/* 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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .\!button.button-smaller {
    display: none;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .button.button-smaller,[data-theme] [data-prompt-autocomplete-target="suggestions"] > button  .button-secondary.button-smaller,[data-theme] [data-prompt-autocomplete-target="suggestions"] > button  .button-alternative.button-smaller {
    display: none;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .full {
    align-items: center;
  }
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .full > .flex {
    align-items: center;
  }
}
form.\!form > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.form > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.\!form .form-wrapper > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.form .form-wrapper > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
form.\!form .form-wrapper[disabled] {
        opacity: 0.3 !important;
        position: relative !important;
        -webkit-user-select: none !important;
           -moz-user-select: none !important;
                user-select: none !important;
      }
form.form .form-wrapper[disabled] {
        opacity: 0.3;
        position: relative;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
form.\!form .form-wrapper[disabled]:before {
          content: "" !important;
          position: absolute !important;
          background-color: transparent !important;
          top: 0 !important;
          bottom: 0 !important;
          left: 0 !important;
          right: 0 !important;
        }
form.form .form-wrapper[disabled]:before {
          content: "";
          position: absolute;
          background-color: transparent;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
/*
    This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
    because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
    no extra element is injected into the form.
    */
form.\!form[method="post" i], form.\!form[method="patch" i]{
  margin-top: -1.25rem;
}
form.form[method="post" i], form.form[method="patch" i]{
  margin-top: -1.25rem;
}
form.\!form[method="post" i], form.\!form[method="patch" i]{
  margin-top: -1.25rem;
}
form.\!form .buttons{
  padding-top: 0.25rem;
}
form.\!form .buttons > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
form.form .buttons{
  padding-top: 0.25rem;
}
form.form .buttons > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.\!table{
  width: 100%;
}
.\!table > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
  --tw-divide-opacity: 0.05;
}
.\!table{
  text-align: left;
}
.\!table: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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .pagy {
    align-items: center;
  }
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .pagy > .flex {
    align-items: center;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .pagy a:not(.gap).button-smaller {
    display: none;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .pagy a:not(.gap):not([href]).button-smaller {
    display: none;
  }
}
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: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"].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: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"].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-\[65\]{
  z-index: 65;
}
.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-\[60vh\]{
  max-height: 60vh;
}
.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%;
}
.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-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.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-gray-800 > :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;
}
.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-b-\[3px\]{
  border-bottom-width: 3px;
}
.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-500\/40{
  border-color: rgb(245 158 11 / 0.4);
}
.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\/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\/40{
  border-color: rgb(29 78 216 / 0.4);
}
.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-blue{
  border-color: var(--ed-accent-blue);
}
.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-emerald-500\/40{
  border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-700\/40{
  border-color: rgb(4 120 87 / 0.4);
}
.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-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-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-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\/40{
  background-color: rgb(255 251 235 / 0.4);
}
.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-amber-900\/30{
  background-color: rgb(120 53 15 / 0.3);
}
.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\/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\/40{
  background-color: rgb(30 58 138 / 0.4);
}
.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-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 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-600{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-900\/30{
  background-color: rgb(6 78 59 / 0.3);
}
.bg-emerald-900\/40{
  background-color: rgb(6 78 59 / 0.4);
}
.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\/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-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\/40{
  background-color: rgb(88 28 135 / 0.4);
}
.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-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-800\/70{
  background-color: rgb(30 41 59 / 0.7);
}
.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-blue-900\/40{
  --tw-gradient-from: rgb(30 58 138 / 0.4) 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-emerald-900\/40{
  --tw-gradient-from: rgb(6 78 59 / 0.4) 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);
}
.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-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-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-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-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-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-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-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-600{
  --tw-gradient-to: #059669 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-600{
  --tw-gradient-to: #16a34a 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-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-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-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-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-12{
  padding-bottom: 3rem;
}
.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-overskill{
  font-family: "Grifter", "Bricolage Grotesque", system-ui, sans-serif;
}
.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-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-400\/70{
  color: rgb(251 191 36 / 0.7);
}
.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-400\/80{
  color: rgb(96 165 250 / 0.8);
}
.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-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-400\/80{
  color: rgb(52 211 153 / 0.8);
}
.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-100{
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-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-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-editor-accent-blue{
  --tw-ring-color: var(--ed-accent-blue);
}
.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-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-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;
}
.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-700{
  transition-duration: 700ms;
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .tribute-container ul li {
    align-items: center;
  }
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .tribute-container ul li > .flex {
    align-items: center;
  }
}
.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;
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .btn-primary {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4);
  }
}
.btn-primary {
  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);
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .btn-secondary {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4);
  }
}
.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); }
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .btn-ghost {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4);
  }
}
.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);
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .pill-brand {
    display: none;
  }
}
.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;
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .btn-secondary-semantic {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4);
  }
}
.btn-secondary-semantic {
  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;
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .btn-ghost-semantic {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4);
  }
}
.btn-ghost-semantic {
  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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .badge-success {
    display: none;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .badge-error {
    display: none;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .badge-warning {
    display: none;
  }
}
.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;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .badge-info {
    display: none;
  }
}
/* Size modifier — opt in by adding `.badge-lg` alongside any of the four
   semantic state classes (e.g. `class="badge-success badge-lg"`).
   The base badge-* utilities are `text-xs px-2 py-1`; this bumps the
   token to `text-sm px-3 py-1` to match the larger status pills that
   already exist inline on /account/billing/show. Added May 2026 so we
   can migrate those pills without shrinking them.
   The selector wins via `:where()` having zero specificity — pairing
   .badge-success.badge-lg with the size override here without mixing
   `@apply` directives. */
.badge-lg{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .badge-lg {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4);
  }
}
/* Neutral / muted state (e.g. "Cancelling", "Canceled", "Inactive").
   Pairs the same way as badge-success/error/warning/info — uses muted
   surface + secondary text tokens. Added May 2026 alongside .badge-lg
   for the /account/billing/show pills migration where some states
   don't fit success/error/warning/info. */
.badge-neutral {
  background-color: var(--surface-2);
  color: var(--text-secondary);
  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-neutral a {
    color: #6bec81; /* primary-400 */
  }

  .badge-neutral a:hover {
    color: #82ef94; /* primary-300 */
    text-decoration: underline;
  }
}
@media (max-width: 768px) {
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .badge-neutral {
    display: none;
  }
}
/* --- 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;
  }
}
/* Global iOS zoom-on-focus prevention for all form controls.
   Must load AFTER any rule that sets font-size <16px on inputs (it uses
   !important to win, but specificity ordering can still matter for
   debugger inspection). Applies on viewports <=768px. See file header
   comment for rationale. */
/* ==========================================================================
   Mobile iOS zoom-on-focus prevention (May 2026 — global rule).
   --------------------------------------------------------------------------
   iOS Safari (and Safari on iPadOS in iPhone-emulation mode) auto-zooms the
   viewport when an input/textarea/select with a computed font-size BELOW
   16px receives focus. The zoom is irreversible without a pinch-out, breaks
   sticky/fixed layouts, and looks broken to non-technical users.

   MEMORY.md rule (Todd): every form control must render at >= 16px on
   mobile breakpoints. Easier to enforce here once than to police every
   .input-class rule + every inline `style="font-size: 15px"` writer.

   Why `!important`: inline styles win specificity over class rules. The
   v2 join form (app/views/waitlist/_signup_form_v2.html.erb) sets
   `style="font-size: 15px"` directly on the email + phone inputs. Without
   !important here, the inline 15px wins, the input zooms on iOS, layout
   breaks.

   Why 768px and not 640px: 768px is Tailwind's `md` breakpoint and matches
   our existing mobile-suggestion-strip + mobile chat controls breakpoints.
   Any device with viewport >= 768px is treated as "tablet or desktop" —
   iPadOS does NOT zoom on focus, so the rule can safely turn off there.

   Why type="hidden" is excluded: hidden inputs don't render so the font
   rule is wasted bytes. type="checkbox"/"radio" also don't trigger zoom
   (they're not text inputs); excluding them avoids unintended visual
   side-effects on custom-styled checkboxes/radios.

   Scope: GLOBAL — loads from application.css, applies to every layout
   including auth pages (devise/sessions, waitlist /join, etc.) that
   might bypass the design-system bundle. The rule is intentionally
   bare-CSS (no [data-theme] scoping) so it works on legacy + v2
   surfaces alike.
   ========================================================================== */
@media (max-width: 768px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !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:   #0f7a23;   /* darkened brand green for WCAG AA on light bg.
                                  5.29:1 against --bg-2 light (#FAFBFC); previous
                                  #1A8730 came in at 4.45:1 — failed by .05.
                                  Sanzone-ratification pending (May 2026). */
  --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);
}
/* Optical-center the initial letter. Grifter Bold (var(--font-display)) has
   top-heavy glyph metrics — cap-height sits closer to the ascender line than
   the baseline, so flex-centering alone leaves the letter visually high.
   1px nudge down + block display + line-height:1 normalizes the inline-box
   so the painted glyph sits centered. Reported by Sanzone 2026-05-22. */
[data-theme] .nav-avatar > span[aria-hidden="true"]{
  display: block;
  line-height: 1;
  transform: translateY(1px);
}
[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);
}
/* Photo variant — image fills the 36x36 circle; drop the accent background
   and letter-spacing tweaks so the image is the only visual. The .nav-avatar
   element keeps its border + focus ring + hover transform behavior. */
[data-theme] .nav-avatar--photo{
  background: transparent;
  overflow: hidden;
  padding: 0;
}
[data-theme] .nav-avatar--photo img{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-pill);
  display: block;
}
[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);
}
/* ============= Happy Hour pill (Issue #982, May 2026) =================
   Icon-only sibling of .ed-credit-pill. Same 30px height + 7px radius so
   the two pills sit cleanly in the topbar cluster. Tooltip carries the
   semantics; the icon does the heavy lifting visually.

   State diff matrix:
     .is-off       — interactive, idle sparkle every 4s, hover lifts.
     .is-on        — active, golden glow + sparkle on a tighter cadence,
                     visually the most prominent element in the topbar.
     .is-locked    — Free tier, dimmed, no animation.
     .is-exhausted — Paid + cap-hit, dimmed warning tint, no animation.

   Sparkle = pseudo-element fading in/out on a CSS keyframe loop. No JS
   needed; works in light + dark themes. `prefers-reduced-motion` disables. */
[data-theme] .editor-topbar .happy-hour-pill {
  /* Square icon-only shape — same height as credit pill for vertical
     alignment, but width is square so the icon centers nicely. */
  width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible; /* let sparkle escape the border */
}
/* Sparkle pseudo-element — small radial gradient dot positioned at the
   top-right corner. Off by default; the keyframe animation fades it in
   and out on a 4s loop (idle states) or 2s loop (active state). */
[data-theme] .editor-topbar .happy-hour-pill::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 90%, transparent) 0%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  animation: happy-hour-sparkle 4s ease-in-out infinite;
}
/* OFF — interactive, calls attention via idle sparkle. */
[data-theme] .editor-topbar .happy-hour-pill.is-off {
  color: var(--fg-2);
  cursor: pointer;
}
[data-theme] .editor-topbar .happy-hour-pill.is-off:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--hover-border);
}
[data-theme] .editor-topbar .happy-hour-pill.is-off svg {
  color: var(--accent);
}
/* ON — active state. Golden background + glow ring + faster sparkle.
   This is intentionally louder than the credit pill so it reads as
   "something is happening right now." */
[data-theme] .editor-topbar .happy-hour-pill.is-on {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 25%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent-text, var(--accent));
  animation: happy-hour-glow 2.4s ease-in-out infinite;
}
[data-theme] .editor-topbar .happy-hour-pill.is-on svg {
  color: var(--accent-text, var(--accent));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 50%, transparent));
}
/* Tighter sparkle cadence + brighter when active. */
[data-theme] .editor-topbar .happy-hour-pill.is-on::after {
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 100%, transparent) 0%,
    color-mix(in srgb, var(--accent) 40%, transparent) 40%,
    transparent 75%
  );
  animation: happy-hour-sparkle 2s ease-in-out infinite;
}
/* LOCKED + EXHAUSTED — clickable upsell affordance (May 22 2026, Todd).
   Dimmed vs. .is-on so they still read as "not currently active", but
   cursor + hover make it clear the user can interact: locked opens the
   subscribe modal, exhausted navigates to /account/billing. No sparkle
   — sparkle is reserved for .is-off (real activation invitation) and
   .is-on (active state); using it here would muddy the meaning. */
[data-theme] .editor-topbar .happy-hour-pill.is-locked,
[data-theme] .editor-topbar .happy-hour-pill.is-exhausted {
  color: var(--fg-3);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t-base), color var(--t-base), border-color var(--t-base), background var(--t-base);
}
[data-theme] .editor-topbar .happy-hour-pill.is-locked:hover,
[data-theme] .editor-topbar .happy-hour-pill.is-exhausted:hover {
  opacity: 1;
  background: var(--bg-2);
  color: var(--fg-2);
  border-color: var(--hover-border);
}
[data-theme] .editor-topbar .happy-hour-pill.is-locked svg,
[data-theme] .editor-topbar .happy-hour-pill.is-exhausted svg {
  color: var(--fg-3);
  transition: color var(--t-base);
}
[data-theme] .editor-topbar .happy-hour-pill.is-locked:hover svg,
[data-theme] .editor-topbar .happy-hour-pill.is-exhausted:hover svg {
  /* Hint at "upgrade unlocks accent" on hover — color shifts toward the
     active-state accent so the user gets a preview of the unlocked look. */
  color: var(--accent);
}
/* Suppress the sparkle on these states — sparkle is the "activate me"
   signal for .is-off, not the "upgrade to unlock me" signal for these. */
[data-theme] .editor-topbar .happy-hour-pill.is-locked::after,
[data-theme] .editor-topbar .happy-hour-pill.is-exhausted::after {
  display: none;
}
/* Exhausted carries a faint warning tint so it differentiates from
   locked (which is "you don't qualify yet"). Pro+ users who burned
   their slots see a hint that it's a temporary state — not a permanent
   gate. */
[data-theme] .editor-topbar .happy-hour-pill.is-exhausted {
  border-color: color-mix(in srgb, var(--warning-fg) 25%, var(--line));
}
/* Keyframes */
@keyframes happy-hour-sparkle {
  0%, 88%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  4% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
  12% {
    opacity: 0;
    transform: scale(0.7) rotate(360deg);
  }
}
@keyframes happy-hour-glow {
  0%, 100% {
    box-shadow: 0 0 6px -1px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}
/* Respect user motion preference — kills both the sparkle and glow
   animations for users who've opted out. Static states still convey
   meaning via color + border. */
@media (prefers-reduced-motion: reduce) {
  [data-theme] .editor-topbar .happy-hour-pill::after {
    animation: none;
    opacity: 0;
  }
  [data-theme] .editor-topbar .happy-hour-pill.is-on {
    animation: none;
    box-shadow: 0 0 8px -1px color-mix(in srgb, var(--accent) 50%, transparent);
  }
}
/* ============= 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); }
/* ============= Plan/Build mode pill (issue #1125, restyled May 23 2026) ===
   Two-segment toggle in the chat composer. Reference design (Todd, May 23
   2026): active segment = green tint + bold green text + icon; inactive =
   muted gray. When in plan mode, the WHOLE composer card gets a green
   glow border via `.chat-composer-card.plan-mode-glow` so the cache-saving
   state reads at-a-glance from across the room. See plan_build_controller.js. */
.plan-build-pill-wrapper {
  /* Inline-flex gap=1 set on the wrapper in markup; no container bg.
     Segments float independently. */
}
.plan-build-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-3, #9098ad);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}
.plan-build-segment:hover {
  color: var(--fg-2, #e4e6ec);
}
/* Active segment — green tint matches the reference screenshots. The same
   green is used for the composer-card glow below for visual coherence. */
.plan-build-segment.is-active {
  background: rgba(34, 197, 94, 0.12);  /* tailwind green-500 @ 12% */
  color: #22c55e;                       /* tailwind green-500 */
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
}
.plan-build-segment svg {
  display: inline-block;
  flex-shrink: 0;
  /* Icon inherits color, so it goes green when active. */
}
/* Light-mode adjustments. The green tint reads strongly enough on light
   bg without further changes; just bump inactive contrast. */
:root .plan-build-segment {
  color: #6b7280; /* gray-500 */
}
:root .plan-build-segment:hover {
  color: #111827; /* gray-900 */
}
:root .plan-build-segment.is-active {
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;                       /* tailwind green-600 (slightly darker for light bg contrast) */
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.30);
}
/* Composer-card green glow when in plan mode. The chat-composer-card
   class is on the wrapper div of the chat input — see _chat_form.html.erb.
   The Stimulus plan-build controller toggles .plan-mode-glow on mode flip. */
.chat-composer-card.plan-mode-glow {
  border-color: rgba(34, 197, 94, 0.60) !important;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.40),
    0 0 12px 2px rgba(34, 197, 94, 0.20);
}
/* Light-mode glow uses a slightly more saturated green so the border
   reads against the white composer background. */
:root .chat-composer-card.plan-mode-glow {
  border-color: rgba(22, 163, 74, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.35),
    0 0 12px 2px rgba(22, 163, 74, 0.18);
}
/* Respect reduced motion — don't animate the glow. The transition: all on
   .chat-composer-card from the Tailwind utility class would otherwise
   fade in slowly when toggling. */
@media (prefers-reduced-motion: reduce) {
  .chat-composer-card.plan-mode-glow {
    transition: none;
  }
}
/* ==========================================================================
   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;
}
/* Recovery / continuation action row — wraps the Continue button rendered
   by _agent_reply_content.html.erb on failure / interrupted / max-iter
   states. Sanzone 2026-05-20 flagged the button being partially obscured
   by the chat scroll's bottom shadow + reading as v1-blue instead of v2
   primary. The button itself now uses `.btn.btn-primary.btn-sm` (or
   `.btn-md` for the max-iter variant); this wrapper gives it explicit
   top + bottom margin so a soft shadow can't cover the click target,
   plus position:relative + z-index so it sits above any sibling mask. */
[data-theme] .continue-action {
  position: relative;
  z-index: 2;
  margin: 12px 0 14px;
  display: inline-flex;
}
/* --------------------------------------------------------------------------
   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;
  /* All other visual styling (bg/border/hover-color/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.

     2026-05-21: the previous hover-expand rule (220px → 360px on
     hover, with `transition: flex-basis ..., width ..., box-shadow`
     and `transition-delay: 250ms` for hover-intent) was removed per
     Todd. The size change pushed neighboring cards around on mouseover
     which felt jumpy. Cards now stay at their resting 220px width and
     rely on the title/desc line-clamp rules (below) to truncate cleanly.
     The subtle hover affordance (bg/border color shift) lives inline
     on the <button> via Tailwind `hover:bg-[var(--bg-3)]
     hover:border-[var(--line-2)] transition-all` — preserved. */
}
/* Title clamps to 1 line, desc to 2 lines — cards stay at the resting
   220px width, so this is the user's only view of the suggestion text.
   The full prompt is still available on click (populates the textarea). */
[data-theme] .chat-suggest-card .chat-suggest-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-theme] .chat-suggest-card .chat-suggest-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Collapse toggle (Todd 2026-05-20). When the header chevron is clicked,
   the controller writes `data-suggestions-collapsed="true"` on the
   wrapper and hides the body via the `hidden` HTML attribute. The
   chevron icon rotates 180° to indicate the state via CSS below. */
[data-theme] .chat-suggest-collapse-icon {
  transition: transform 160ms var(--ease-out);
}
[data-theme] [data-suggestions-collapsed="true"] .chat-suggest-collapse-icon {
  transform: rotate(180deg);
}
[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-within {
  /* Mirror the old :focus-visible behavior now that focus lives on the inner
     overlay link. outline (not box-shadow) so the card's overflow:hidden
     doesn't clip the focus ring. */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Stretched editor link — fills the card via ::before so any click that isn't
   intercepted by an inner anchor (the URL row) navigates to the editor. */
[data-theme] .dash-app-card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
  color: inherit;
  /* Visually empty; the .sr-only span gives screen readers the label */
}
[data-theme] .dash-app-card-overlay-link:focus-visible {
  /* Focus ring is hoisted up to .dash-app-card via :focus-within above */
  outline: none;
}
/* App URL row — independently clickable, opens in a new tab. Sits above the
   stretched overlay link so clicks here don't navigate to the editor. */
[data-theme] .dash-app-card-url {
  position: relative;
  z-index: 2;
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-slow) var(--ease-out);
}
[data-theme] .dash-app-card-url:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme] .dash-app-card-url:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
[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); }
/* ==========================================================================
   Credit Balance Widget + Theme Switcher — Design System v2

   Mockup source: ~/clawd/projects/overskill/design-ui-icon/credits-design-spec/
                  Usage_Dashboard_Standalone.html
   Spec:          CREDITS_BEHAVIOR_SPEC.md (May 21, 2026)

   All values extracted directly from the Sanzone standalone mockup. Two
   widgets live together in the top nav:

   - .credits-widget  → pill trigger + 320px hover popover
   - .credits-upgrade → adjacent CTA (Upgrade or Buy more credits)
   - .theme-switcher  → 3-option dropdown (Light / Dark / System)

   Token scoping: every rule gated on [data-theme] so the widget is inert
   on layouts that haven't opted into DS v2 (matches the pattern from
   _dashboard_v2.css and _editor_chat.css).
   ========================================================================== */
/* --------------------------------------------------------------------------
   Credit balance pill + CTA button
   -------------------------------------------------------------------------- */
[data-theme] .credits-widget {
  position: relative;
  display: inline-flex;
}
/* Hover bridge from the trigger to the popover.

   The popover is `position: absolute` so it does NOT contribute to the
   widget wrapper's geometric bounding box — the wrapper is sized purely
   by the trigger button. When the user cursors straight-down from the
   trigger toward the popover, they cross the 8px CSS gap (top: calc(100%
   + 8px) on .credits-pop). Geometrically the cursor is OUTSIDE the
   wrapper at that point even though the popover is a DOM descendant, so
   mouseleave fires on the wrapper and the close timer starts.

   We extend the wrapper's hit area downward with an invisible `::after`
   that overlaps both the gap AND the popover when it's open. As long as
   `.show` is set, mouseleave is suppressed because the cursor is still
   over the wrapper geometrically.

   2026-05-23: replaces relying solely on `.credits-pop::before` (which
   only existed on the popover and didn't help the wrapper bbox). Sanzone
   reported flaky hover-keep-alive on the editor right-cluster placement. */
[data-theme] .credits-widget.show::after {
  content: "";
  position: absolute;
  top: 100%;
  /* Right-anchored to the trigger; extend 320px to the left so the bridge
     spans the full popover width (which is 320px and right-anchored).
     Also extend 8px past the trigger's right edge to forgive cursor drift. */
  right: -8px;
  width: calc(320px + 16px);
  /* Cover the 8px gap PLUS the popover area until ~350px below the
     trigger — enough to keep hover-keepalive active while the cursor
     traverses to/within the popover, but bounded so it doesn't capture
     pointer events deep in the canvas below the popover. */
  height: 360px;
  /* Below the popover (z-65) so the popover itself still receives
     clicks; above default wrapper children so mouseover hits the bridge
     and keeps the wrapper-hover state alive. */
  z-index: 1;
  pointer-events: auto;
  background: transparent;
}
[data-theme] .credits-trigger,
[data-theme] .credits-upgrade {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  font: 600 13px/1 "Work Sans", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
[data-theme] .credits-trigger {
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
}
[data-theme] .credits-trigger:hover,
[data-theme] .credits-trigger[aria-expanded="true"] {
  background: var(--bg-3);
  border-color: color-mix(in srgb, var(--fg) 14%, transparent);
}
[data-theme] .credits-trigger .spark {
  width: 14px;
  height: 14px;
  color: var(--accent-text);
  flex-shrink: 0;
}
[data-theme] .credits-trigger .num {
  font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
   Compact variant — used by the editor toolbar (placed in the LEFT cluster
   of the toolbar rather than the right cluster). Three behaviors:
     1. Anchor popover to LEFT edge of the trigger so it grows rightward
        instead of overflowing off the left edge of the viewport.
     2. Hide the sibling .credits-upgrade button (editor has its own
        Upgrade entry and the popover still surfaces Upgrade inside).
     3. Collapse the pill to icon-only below 480px viewport width so it
        doesn't crowd the project title + tab cluster.
   See Sanzone 2026-05-22 feedback.
   -------------------------------------------------------------------------- */
/* Compact variant historically forced left-anchor for the editor's
   left-cluster placement. As of 2026-05-23 the widget lives in the
   right cluster (Sanzone repositioning), so the default right-anchor
   from `.credits-pop` applies and we no longer override it. The
   compact class still toggles other behaviors below (Upgrade button
   hidden, mobile icon-only) which we keep. */
/* Mobile responsiveness — applies to ALL credit widgets (compact AND
   default), 2026-05-23. Sanzone flagged: on the /account dash top-nav,
   the pill + standalone Upgrade button + bell + Jimbot + theme toggle
   wrap onto a second row at mobile widths and look broken. Fix:
   collapse the pill to icon-only AND hide the standalone Upgrade
   button. The popover still surfaces the Upgrade link inside its
   header, so the action stays discoverable. */
@media (max-width: 480px) {
  [data-theme] .credits-widget .credits-trigger .num {
    display: none;
  }
  [data-theme] .credits-widget .credits-trigger {
    padding: 0 10px;
    gap: 0;
  }
  /* Hide the standalone Upgrade / Buy more credits button on mobile.
     The widget popover still shows the Upgrade link in its header for
     non-highest-plan teams, so users can still upgrade — just from
     inside the popover, not as a separate top-row button. */
  [data-theme] .credits-upgrade {
    display: none;
  }
}
/* CTA (Upgrade / Buy more credits). Inverted vs trigger — dark on light,
   light on dark. The mockup uses literal black/white but we route through
   DS tokens so a future palette change cascades. */
[data-theme] .credits-upgrade {
  background: var(--fg);
  color: var(--bg);
  border: 1px solid transparent;
}
[data-theme] .credits-upgrade:hover {
  background: color-mix(in srgb, var(--fg) 88%, var(--bg-3));
}
/* --------------------------------------------------------------------------
   Credit popover
   -------------------------------------------------------------------------- */
[data-theme] .credits-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow:
    rgba(255, 255, 255, 0.03) 0 1px 0 inset,
    rgba(0, 0, 0, 0.55) 0 24px 60px -20px,
    rgba(0, 0, 0, 0.3) 0 10px 24px -10px;
  /* z-index 65: above .editor-topbar (z-60) so the popover renders ON TOP
     of the preview canvas region when the widget sits inside the editor
     topbar. Below .publish-modal (z-70). Sanzone, 2026-05-23 — screenshot
     showed the popover being clipped/overlaid by the iframe wrapper
     because both stacked at z-60 in sibling contexts. */
  z-index: 65;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 140ms,
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
:root[data-theme="light"] .credits-pop {
  background: #ffffff;
  box-shadow:
    rgba(15, 23, 42, 0.04) 0 1px 2px,
    rgba(15, 23, 42, 0.18) 0 24px 60px -20px,
    rgba(15, 23, 42, 0.10) 0 10px 24px -10px;
}
[data-theme] .credits-widget.show .credits-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Invisible bridge between trigger and popover — prevents mouseleave from
   firing as the cursor traverses the 8px gap (which would close the popover
   mid-traversal). */
[data-theme] .credits-pop::before {
  content: "";
  position: absolute;
  inset: -10px -8px auto;
  height: 14px;
  background: transparent;
}
/* Popover head: plan badge + optional Upgrade link */
[data-theme] .cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 10px;
}
[data-theme] .cp-plan {
  font: 600 13.5px "Work Sans", sans-serif;
  letter-spacing: -0.005em;
  color: var(--fg);
}
[data-theme] .cp-plan-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12.5px "Work Sans", sans-serif;
  color: var(--accent-text);
  text-decoration: none;
  transition: color 0.15s, gap 0.15s;
}
[data-theme] .cp-plan-upgrade svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}
[data-theme] .cp-plan-upgrade:hover {
  color: var(--accent);
  gap: 6px;
}
[data-theme] .cp-plan-upgrade:hover svg {
  transform: translateX(2px);
}
/* Dashed divider — borders, not bg, so it picks up --line-2 cleanly */
[data-theme] .cp-divider {
  height: 1px;
  background: transparent;
  border-top: 1px dashed var(--line-2);
  margin: 0 -4px 8px;
}
/* TOTAL row — the big calm hero number */
[data-theme] .cp-total {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 0;
}
[data-theme] .cp-total-val {
  font-family: Grifter, "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
[data-theme] .cp-total-unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
/* Breakdown rows */
[data-theme] .cp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 2px;
}
[data-theme] .cp-row-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg);
  font-weight: 500;
}
[data-theme] .cp-row-l .info {
  width: 13px;
  height: 13px;
  color: var(--fg-4, var(--fg-3));
  cursor: help;
  transition: color 0.15s;
}
[data-theme] .cp-row-l .info:hover {
  color: var(--fg-2);
}
[data-theme] .cp-row-r {
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
[data-theme] .cp-row-r.mono {
  font-family: "JetBrains Mono", monospace;
}
[data-theme] .cp-row-of {
  color: var(--fg-4, var(--fg-3));
  font-weight: 400;
}
/* Tooltip — pure CSS, attached to .cp-tip[data-tip="..."]. Slides up into
   place above the info icon on hover/focus. Uses var(--bg-3) dark so it
   contrasts the popover surface. */
[data-theme] .cp-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}
[data-theme] .cp-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 5px 8px;
  font: 500 11.5px "Work Sans", sans-serif;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms, transform 160ms;
  z-index: 70;
}
:root[data-theme="light"] .cp-tip::after {
  background: #0f0f0f;
  color: #ffffff;
  border-color: #0f0f0f;
}
[data-theme] .cp-tip:hover::after,
[data-theme] .cp-tip:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Popover footer — two links separated by gap, top border */
[data-theme] .cp-foot {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
[data-theme] .cp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 13px "Work Sans", sans-serif;
  color: var(--fg);
  text-decoration: none;
  padding: 4px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}
[data-theme] .cp-link:hover {
  color: var(--accent-text);
}
[data-theme] .cp-link svg {
  width: 13px;
  height: 13px;
  color: var(--fg-4, var(--fg-3));
  transition: color 0.15s;
}
[data-theme] .cp-link:hover svg {
  color: var(--accent-text);
}
/* --------------------------------------------------------------------------
   Theme switcher dropdown (Light / Dark / System)
   -------------------------------------------------------------------------- */
[data-theme] .theme-switcher {
  position: relative;
  display: inline-flex;
}
[data-theme] .theme-switcher.show .theme-switcher-trigger {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-2);
}
[data-theme] .theme-switcher-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow:
    rgba(255, 255, 255, 0.03) 0 1px 0 inset,
    rgba(0, 0, 0, 0.5) 0 10px 24px -8px,
    rgba(0, 0, 0, 0.25) 0 4px 10px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms,
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
:root[data-theme="light"] .theme-switcher-pop {
  background: #ffffff;
  box-shadow:
    rgba(15, 23, 42, 0.04) 0 1px 2px,
    rgba(15, 23, 42, 0.14) 0 10px 24px -8px,
    rgba(15, 23, 42, 0.06) 0 4px 10px;
}
[data-theme] .theme-switcher.show .theme-switcher-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Bridge to forgive the cursor crossing the 8px gap */
[data-theme] .theme-switcher-pop::before {
  content: "";
  position: absolute;
  inset: -10px -8px auto;
  height: 14px;
  background: transparent;
}
[data-theme] .theme-switcher-opt {
  position: relative;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
[data-theme] .theme-switcher-opt:hover {
  background: var(--bg-3);
  color: var(--fg);
}
/* Selected — both .is-active (Stimulus convention) and .active (mockup
   convention) supported so either controller path works during the
   transition period. */
[data-theme] .theme-switcher-opt.is-active,
[data-theme] .theme-switcher-opt.active {
  background: var(--bg-3);
  color: var(--accent-text);
}
[data-theme] .theme-switcher-opt svg {
  width: 15px;
  height: 15px;
}
/* Hover label — slides in from the right of the option button. */
[data-theme] .theme-switcher-opt-label {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  font: 500 11px "Work Sans", system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--fg-2);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 110ms, transform 160ms;
}
:root[data-theme="light"] .theme-switcher-opt-label {
  background: #ffffff;
}
[data-theme] .theme-switcher-opt:hover .theme-switcher-opt-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* ==========================================================================
   Pricing v2 — public /pricing page, May 2026 reskin

   Rendered when Flipper.enabled?(:pricing_v2) is true OR ?ds=v2 is set.
   See app/views/public/pricing/index_v2.html.erb +
       app/views/public/pricing/_tier_card_v2.html.erb +
       app/views/public/pricing/_feature_row_v2.html.erb.

   All rules gated on [data-theme] — the `landing` layout sets
   data-theme="dark" on <html>, so the page renders dark by default. Light
   theme falls through if the layout is later updated to honor cookie pref.

   Token-only — no hardcoded colors except the brand-green border-glow on
   the popular tier card (where the visual treatment is explicitly
   var(--accent)-derived).
   ========================================================================== */
/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
[data-theme] .pricing-v2-hero {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
[data-theme] .pricing-v2-hero-inner {
  text-align: center;
}
[data-theme] .pricing-v2-hero-eyebrow {
  margin-bottom: 16px;
}
[data-theme] .pricing-v2-hero-title {
  font-family: Grifter, "Work Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0 0 20px;
}
[data-theme] .pricing-v2-hero-subhead {
  font: 400 18px/1.55 "Work Sans", sans-serif;
  color: var(--fg-2);
  max-width: 640px;
  margin: 0 auto 32px;
}
/* Segmented monthly/annual control — mirrors the period selector in
   /account/billing/usage (PR #1005). Track is bg-2 with the active option
   lifted to bg-3 + subtle shadow. */
[data-theme] .pricing-v2-interval {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
[data-theme] .pricing-v2-interval-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font: 600 13px/1 "Work Sans", sans-serif;
  letter-spacing: -0.005em;
  color: var(--fg-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
[data-theme] .pricing-v2-interval-opt:hover {
  color: var(--fg);
}
[data-theme] .pricing-v2-interval-opt.is-active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 0 inset rgba(255, 255, 255, 0.06),
              0 1px 2px rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] .pricing-v2-interval-opt.is-active {
  box-shadow: 0 1px 0 inset rgba(255, 255, 255, 0.6),
              0 1px 2px rgba(15, 23, 42, 0.08);
}
[data-theme] .pricing-v2-interval-save {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
}
[data-theme] .pricing-v2-waiver-wrap {
  max-width: 720px;
  margin: 24px auto 0;
}
/* --------------------------------------------------------------------------
   Tier ladder grid + tier card
   -------------------------------------------------------------------------- */
[data-theme] .pricing-v2-tiers {
  padding: 56px 0 64px;
}
[data-theme] .pricing-v2-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  [data-theme] .pricing-v2-tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  [data-theme] .pricing-v2-tier-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
[data-theme] .pricing-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
[data-theme] .pricing-tier-card:hover {
  border-color: var(--line-2);
}
/* "Most popular" Studio tier — accent-bordered with a subtle glow ring */
[data-theme] .pricing-tier-card.is-popular {
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
    0 20px 40px -20px color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (min-width: 1080px) {
  [data-theme] .pricing-tier-card.is-popular {
    transform: scale(1.03);
    z-index: 2;
  }
}
[data-theme] .pricing-tier-popular-badge {
  background: var(--accent);
  color: var(--accent-fg);
  text-align: center;
  padding: 8px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
[data-theme] .pricing-tier-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
[data-theme] .pricing-tier-head {
  margin-bottom: 20px;
}
[data-theme] .pricing-tier-name {
  font: 700 22px/1.1 "Work Sans", sans-serif;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 6px;
}
[data-theme] .pricing-tier-tagline {
  font: 400 13.5px/1.45 "Work Sans", sans-serif;
  color: var(--fg-2);
  margin: 0;
}
/* Price block */
[data-theme] .pricing-tier-price {
  margin-bottom: 20px;
}
[data-theme] .pricing-tier-price-value {
  font-family: Grifter, "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}
[data-theme] .pricing-tier-price-suffix {
  font: 400 14px "Work Sans", sans-serif;
  color: var(--fg-3);
  letter-spacing: -0.005em;
  margin-left: 4px;
}
[data-theme] .pricing-tier-price-savings {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 6px 0 0;
}
[data-theme] .pricing-tier-price-note {
  font: 400 12px "Work Sans", sans-serif;
  color: var(--fg-3);
  margin: 4px 0 0;
}
[data-theme] .pricing-tier-credits {
  font: 500 14px "Work Sans", sans-serif;
  color: var(--fg);
  margin: 10px 0 0;
}
/* Features list */
[data-theme] .pricing-tier-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme] .pricing-tier-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 400 13.5px/1.45 "Work Sans", sans-serif;
  color: var(--fg-2);
}
[data-theme] .pricing-tier-check {
  color: var(--accent-text);
  flex-shrink: 0;
  margin-top: 2px;
}
/* Volume ladder (details/summary) */
[data-theme] .pricing-tier-ladder {
  margin-bottom: 20px;
  margin-top: -4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
[data-theme] .pricing-tier-ladder-summary {
  cursor: pointer;
  padding: 10px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
}
[data-theme] .pricing-tier-ladder-summary::-webkit-details-marker {
  display: none;
}
[data-theme] .pricing-tier-ladder-summary:hover {
  background: var(--bg-2);
  color: var(--fg);
}
[data-theme] .pricing-tier-ladder-chevron {
  color: var(--fg-4, var(--fg-3));
  transition: transform 0.2s;
}
[data-theme] .pricing-tier-ladder[open] .pricing-tier-ladder-chevron {
  transform: rotate(180deg);
}
[data-theme] .pricing-tier-ladder-body {
  border-top: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme] .pricing-tier-ladder-rung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
[data-theme] .pricing-tier-ladder-rung:hover {
  background: var(--bg-2);
}
[data-theme] .pricing-tier-ladder-rung[data-selected="true"] {
  background: var(--bg-2);
  border-color: var(--accent);
}
[data-theme] .pricing-tier-ladder-rung-price {
  font-weight: 600;
  color: var(--fg);
}
[data-theme] .pricing-tier-ladder-rung-suffix {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--fg-3);
}
[data-theme] .pricing-tier-ladder-rung-credits {
  color: var(--fg-2);
}
/* Tier CTA */
[data-theme] .pricing-tier-cta-wrap {
  margin-top: auto;
}
[data-theme] .pricing-tier-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  background: var(--fg);
  color: var(--bg);
  font: 600 14px/1 "Work Sans", sans-serif;
  letter-spacing: -0.005em;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
[data-theme] .pricing-tier-cta:hover {
  opacity: 0.92;
}
[data-theme] .pricing-tier-cta--popular {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .pricing-tier-cta--popular:hover {
  background: var(--primary-hover, var(--accent));
}
/* --------------------------------------------------------------------------
   Enterprise card — full-width dark band
   -------------------------------------------------------------------------- */
[data-theme] .pricing-v2-enterprise {
  margin-top: 32px;
  padding: 28px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 720px) {
  [data-theme] .pricing-v2-enterprise {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}
[data-theme] .pricing-v2-enterprise-body {
  flex: 1;
}
[data-theme] .pricing-v2-enterprise-name {
  font: 700 26px/1.1 "Work Sans", sans-serif;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 8px;
}
[data-theme] .pricing-v2-enterprise-tagline {
  font: 400 15px/1.5 "Work Sans", sans-serif;
  color: var(--fg-2);
  margin: 0 0 16px;
}
[data-theme] .pricing-v2-enterprise-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 540px) {
  [data-theme] .pricing-v2-enterprise-features {
    grid-template-columns: repeat(2, 1fr);
  }
}
[data-theme] .pricing-v2-enterprise-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 400 13.5px/1.45 "Work Sans", sans-serif;
  color: var(--fg-2);
}
[data-theme] .pricing-v2-enterprise-check {
  color: var(--accent-text);
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme] .pricing-v2-enterprise-cta {
  display: inline-block;
  white-space: nowrap;
  padding: 12px 24px;
  background: var(--fg);
  color: var(--bg);
  font: 600 14px/1 "Work Sans", sans-serif;
  letter-spacing: -0.005em;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.15s;
}
[data-theme] .pricing-v2-enterprise-cta:hover {
  opacity: 0.9;
}
/* --------------------------------------------------------------------------
   Compare feature table
   -------------------------------------------------------------------------- */
[data-theme] .pricing-v2-compare {
  padding: 64px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
[data-theme] .pricing-v2-section-title {
  font-family: Grifter, "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-align: center;
  margin: 0 0 8px;
}
[data-theme] .pricing-v2-section-sub {
  font: 400 16px/1.5 "Work Sans", sans-serif;
  color: var(--fg-2);
  text-align: center;
  margin: 0 0 40px;
}
[data-theme] .pricing-v2-compare-table-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
}
[data-theme] .pricing-v2-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
[data-theme] .pricing-v2-compare-th {
  padding: 14px 16px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
[data-theme] .pricing-v2-compare-th-feature {
  text-align: left;
}
[data-theme] .pricing-compare-row {
  border-bottom: 1px solid var(--line);
}
[data-theme] .pricing-compare-row:last-child {
  border-bottom: 0;
}
[data-theme] .pricing-compare-cell {
  padding: 12px 16px;
  font: 400 14px/1.4 "Work Sans", sans-serif;
  color: var(--fg-2);
}
[data-theme] .pricing-compare-cell-label {
  font-weight: 500;
  color: var(--fg);
}
[data-theme] .pricing-compare-cell-value {
  text-align: center;
}
[data-theme] .pricing-compare-check {
  display: inline-flex;
  color: var(--accent-text);
}
[data-theme] .pricing-compare-dash {
  display: inline-flex;
  color: var(--fg-4, var(--fg-3));
  opacity: 0.6;
}
[data-theme] .pricing-compare-soon {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #fbbf24;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-theme="light"] .pricing-compare-soon {
  background: color-mix(in srgb, #f59e0b 14%, var(--bg-1));
  color: #b45309;
  border-color: color-mix(in srgb, #f59e0b 40%, var(--line));
}
[data-theme] .pricing-compare-text {
  color: var(--fg);
  font-weight: 500;
}
/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
[data-theme] .pricing-v2-faq {
  padding: 64px 0;
}
[data-theme] .pricing-v2-faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
[data-theme] .pricing-v2-faq-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
}
[data-theme] .pricing-v2-faq-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
[data-theme] .pricing-v2-faq-q {
  font: 600 17px/1.4 "Work Sans", sans-serif;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 8px;
}
[data-theme] .pricing-v2-faq-a {
  font: 400 15px/1.55 "Work Sans", sans-serif;
  color: var(--fg-2);
  margin: 0;
}
/* --------------------------------------------------------------------------
   Final CTA band
   -------------------------------------------------------------------------- */
[data-theme] .pricing-v2-final-cta {
  padding: 72px 0;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
}
[data-theme] .pricing-v2-final-cta-inner {
  text-align: center;
}
[data-theme] .pricing-v2-final-cta-title {
  font-family: Grifter, "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.018em;
  color: var(--fg);
  margin: 0 0 14px;
}
[data-theme] .pricing-v2-final-cta-sub {
  font: 400 17px/1.5 "Work Sans", sans-serif;
  color: var(--fg-2);
  margin: 0 0 28px;
}
[data-theme] .pricing-v2-final-cta-btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--accent);
  color: var(--accent-fg);
  font: 600 15px/1 "Work Sans", sans-serif;
  letter-spacing: -0.005em;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
[data-theme] .pricing-v2-final-cta-btn:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}
/* ==========================================================================
   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;
  /* Grow to consume the available width when sharing a line with the search
     input — and stretch to full line width when `.ti-toolbar`'s flex-wrap
     pushes it to its own row. Without this, the row sizes to its inner
     scroller's intrinsic content width, blowing past the toolbar and
     defeating the inner `.ti-cat-chips` overflow-x scroll. (May 2026.) */
  flex: 1 1 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.

      Horizontal-scroll behavior (May 2026): on /integrations the category
      list can grow past viewport width (14+ categories). Previously the row
      wrapped to 2 lines which broke the toolbar grid and looked off-brand
      next to the search input. Now: `.ti-cat-chips` is a single-row
      horizontal scroller, wrapped in `.ti-cat-chips-scroller` which provides
      the edge-fade affordance driven by the `scroll-fade` Stimulus
      controller's `data-scroll-fade-state` attribute.
   -------------------------------------------------------------------------- */
[data-theme] .ti-cat-chips-scroller {
  position: relative;
  display: block;
  /* Sit inside the `.ti-toolbar-row` flex container and consume the remaining
     space after the search input. `flex: 1 1 0` + `min-width: 0` is the
     standard "let me shrink below content size" combo — without it, the
     inner `.ti-cat-chips` sizes to its full intrinsic content width and
     `overflow-x: auto` never triggers (the parent grows to fit the content
     instead of clipping it). */
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-1);
  border-radius: var(--radius-sm);
}
[data-theme] .ti-cat-chips-scroller::before,
[data-theme] .ti-cat-chips-scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 1;
  border-radius: var(--radius-sm);
}
[data-theme] .ti-cat-chips-scroller::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-1), transparent);
}
[data-theme] .ti-cat-chips-scroller::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-1), transparent);
}
/* Show fades based on scroll position. "none" = fits, no fades.
   "start" = at left, only right fade (more content right).
   "middle" = both fades visible.
   "end" = at right, only left fade (more content left). */
[data-theme] .ti-cat-chips-scroller[data-scroll-fade-state="start"]::after,
[data-theme] .ti-cat-chips-scroller[data-scroll-fade-state="middle"]::before,
[data-theme] .ti-cat-chips-scroller[data-scroll-fade-state="middle"]::after,
[data-theme] .ti-cat-chips-scroller[data-scroll-fade-state="end"]::before {
  opacity: 1;
}
[data-theme] .ti-cat-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 3px;
  background: var(--bg-1);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  /* So the scroller's ::before/::after fades sit ON TOP of the chips at the
     edges; no extra padding needed because the fades are pure visual. */
}
[data-theme] .ti-cat-chips::-webkit-scrollbar { display: none; }
[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);
  /* Don't let chips compress when the scroller is narrower than total width;
     they should keep their natural size and let the row scroll instead. */
  flex: 0 0 auto;
  white-space: nowrap;
}
[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; }
}
/* ==========================================================================
   DOCS PAGE — /integrations/:slug/docs

   Developer-facing docs rendered by Public::IntegrationsController#docs
   from cached Composio API data + AI-generated content. Reuses the show
   page's .ti-show-* hero / breadcrumb / facts grid, then layers a smaller
   set of section helpers + a code block + an actions list on top.
   ========================================================================== */
/* --- 1. Section helpers (titles, ledes, notes) ------------------------- */
[data-theme] .ti-section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
[data-theme] .ti-section-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
  max-width: 64ch;
}
[data-theme] .ti-section-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: var(--space-4) 0 0;
  max-width: 64ch;
}
[data-theme] .ti-section-prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 68ch;
}
[data-theme] .ti-section-prose p { margin: 0 0 var(--space-3); }
[data-theme] .ti-section-prose strong { color: var(--fg-1); font-weight: var(--weight-semibold); }
/* CTA-style section: padded card surface, centered actions. Mirrors
   .ti-show-cta but used as a section variant (composes with .ti-section). */
[data-theme] .ti-section.ti-section--cta {
  padding: var(--space-12) var(--space-8);
  margin: var(--space-12) 0 var(--space-20);
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-align: center;
}
[data-theme] .ti-section--cta .ti-section-title { margin-bottom: var(--space-3); }
[data-theme] .ti-section--cta .ti-section-lede { margin: 0 auto var(--space-6); }
[data-theme] .ti-section--cta .ti-show-actions { justify-content: center; }
/* --- 2. Code block ----------------------------------------------------- */
/* Used for the "Quick start" example. Monospace, scrollable on overflow,
   DS-token surface so it tracks light/dark mode. */
[data-theme] .ti-code-block {
  display: block;
  margin: 0 0 var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: 13px/1.55 var(--font-mono);
  color: var(--fg-1);
  overflow-x: auto;
  scrollbar-width: thin;
  /* Preserve indentation in the pre block while still wrapping where
     possible to avoid horizontal-only-scroll on narrow viewports. */
  white-space: pre;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}
[data-theme] .ti-code-block code {
  font-family: inherit;
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
}
/* --- 3. Action list ---------------------------------------------------- */
/* Renders the composio_actions array. Each row: slug (mono) + optional
   description. Featured list is always visible; the disclosure
   collapses the long tail behind a <details>. */
[data-theme] .ti-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  [data-theme] .ti-action-list { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
}
[data-theme] .ti-action-row {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-1);
}
[data-theme] .ti-action-slug {
  display: inline-block;
  font: var(--weight-medium) 12.5px/1.4 var(--font-mono);
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
  word-break: break-all;
}
[data-theme] .ti-action-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: var(--space-2) 0 0;
}
[data-theme] .ti-action-disclosure {
  margin: var(--space-5) 0 0;
}
[data-theme] .ti-action-disclosure > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  font: var(--weight-medium) 14px/1 var(--font-body);
  background: var(--bg-1);
  border: 1px solid var(--line);
  transition: background var(--t-fast);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-theme] .ti-action-disclosure > summary:hover {
  background: var(--bg-2);
}
[data-theme] .ti-action-disclosure[open] > summary {
  margin-bottom: var(--space-4);
}
[data-theme] .ti-action-list--full {
  /* Slight visual demotion vs. the featured list so the eye knows the
     featured set is the curated subset. */
  opacity: 0.92;
}
/* 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%);
}
/* ==========================================================================
   Mobile suggestion strip — May 2026 (Option 1, revised May 24).
   --------------------------------------------------------------------------
   On mobile (<=768px) collapse two suggestion surfaces from "tall panel that
   covers the input + keyboard area" into a "single-row horizontal scroll
   strip of compact chips that sits flush BELOW the input." Tap → fills the
   textarea (existing controller behavior); the strip stays visible while
   typing because it's a thin band of chips, not a 250px vertical column.

   Two surfaces are targeted:

     1. [data-prompt-autocomplete-target="suggestions"]
        Homepage generator + dashboard composer + landing-v2 composer.
        Rendered by app/javascript/controllers/prompt_autocomplete_controller.js
        which injects a header row, N suggestion buttons, and a footer hint
        into the container element. We hide header/footer on mobile and
        re-layout the buttons as horizontal pill chips.

     2. .chat-suggest-row (editor v2 chat suggestions)
        Defined in _editor_chat.css. Already a horizontal scroller on
        desktop but each `chat-suggest-card` is a 220px-wide 2-line card.
        On mobile we shrink those cards into compact single-line pill chips
        with the same tap-to-fill behavior.

   POSITIONING (revised May 24):
   On the v2 landing/dashboard composers, the autocomplete container is the
   FIRST child of `.composer` and is positioned absolute with
   `bottom: calc(100% + 8px)` — a popover floating ABOVE the composer. On
   mobile this puts the strip in the headline/subhead area, which looked
   floaty + disconnected. Per Todd's request, on mobile we:
     - Switch position from absolute → relative.
     - Use `order: 999` to push it to the END of the composer's flex
       column (composer is `display: flex; flex-direction: column`), so it
       renders inside the composer card BELOW the toolbar foot.
     - Add a small top-border so it reads as a sub-section of the composer
       rather than a separate floating tile.

   POSTCSS GOTCHA — DO NOT USE :not(.hidden):
   Some plugin in our build chain rewrites `:not(.hidden)` to non-sensical
   compound selectors like `:not(.pagy a:not(.gap):not([href]):not([aria-current]))`
   which DON'T filter out elements that have `.hidden`. The first attempt
   used `:not(.hidden)` extensively and the result was an empty popover
   visible at all times. Fix: write the strip styles unconditionally AND
   add an explicit `.hidden { display: none !important }` rule (higher
   specificity because of the extra class) to force-hide when toggled off.

   Desktop (>768px) is untouched on both surfaces.

   Scoped under [data-theme] so design-system tokens (--bg-2, --line, --fg,
   etc.) resolve correctly. Every layout that renders these surfaces emits
   data-theme on <html>, so the scope is universal.
   ========================================================================== */
@media (max-width: 768px) {

  /* ------------------------------------------------------------------
     0) FORCE-HIDE when .hidden is present.
     ------------------------------------------------------------------
     Higher-specificity escape hatch for the PostCSS `:not(.hidden)`
     mangling described in the header comment. This rule wins because
     adding `.hidden` to the selector raises specificity above the bare
     `[data-prompt-autocomplete-target="suggestions"]` rules below. The
     prompt_autocomplete Stimulus controller adds/removes `.hidden` to
     toggle visibility (see showSuggestions / hideSuggestions). */
  [data-theme] [data-prompt-autocomplete-target="suggestions"].hidden {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     1) Prompt-autocomplete container → horizontal pill strip,
        positioned BELOW the composer (not floating above).
     ------------------------------------------------------------------
     Layout: flex row, content-sized chips, horizontal scroll-snap.
     Position: relative + `order: 999` so it sits at the END of the
     composer's flex column. Margins compensate for the
     `bottom: calc(100% + 8px)` that the legacy `.composer-popover`
     and `.composer-autocomplete` rules try to apply. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] {
    /* Replace vertical column with horizontal scroller. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;

    /* Anchor BELOW the composer (in normal flex flow, not absolute).
       Beats `.composer-popover` and `.composer-autocomplete` rules
       that set position:absolute + bottom:calc(100% + 8px). */
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    order: 999;

    /* Cancel the vertical max-height + overflow so chips don't get
       clipped at the top/bottom; we own overflow now (x only). */
    max-height: none !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;

    /* Hide native scrollbar — fade affordance handled by mobile UX
       convention (cards drop off at edges). */
    scrollbar-width: none;

    /* Visual treatment: subtle hairline at the top so the strip reads
       as a section of the composer card (rather than a floating tile
       that happens to land below). Drop the heavy popover shadow +
       border the v2 popover rules apply on desktop. */
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #282828) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  [data-theme] [data-prompt-autocomplete-target="suggestions"]::-webkit-scrollbar {
    display: none;
  }

  /* Header row ("SUGGESTIONS" + close X) — first child div in the
     controller's rendered HTML. Hidden on mobile: the strip itself is
     the affordance, and a separate header would steal vertical room. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > div:first-child {
    display: none !important;
  }

  /* Footer hint ("Tap outside or X to close") — already has Tailwind's
     `sm:hidden` so it shows on mobile. We don't need it because the
     chip strip is self-explanatory; close-on-outside still works. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > div:last-child {
    display: none !important;
  }

  /* Suggestion buttons → compact pill chips. The controller emits
     each suggestion as a <button> with class "w-full text-left ...";
     we override width/padding/border-radius to make them pill-shaped
     and content-sized. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--line, #282828) !important;
    background-color: var(--bg-2, #1B1C1E) !important;
    /* Cancel the legacy border-bottom-only separator the controller
       writes inline (`style="border-bottom: 1px solid #282828"`). */
    border-bottom: 1px solid var(--line, #282828) !important;
    scroll-snap-align: start;
    white-space: nowrap;
    /* Subtle hover/active feedback in keeping with prompt-chip style. */
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button:hover,
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button:active {
    background-color: var(--bg-3, #2a2c35) !important;
    border-color: var(--accent, #45E760) !important;
  }

  /* Inner flex (.flex.items-start.justify-between) — align center so
     the single-line text sits vertically centered inside the chip,
     not top-anchored as in the original 2-line card. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .flex {
    align-items: center !important;
  }
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button > .flex > .flex {
    align-items: center !important;
  }

  /* Icon — keep it (visual anchor) but tighter than desktop. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button svg {
    width: 12px;
    height: 12px;
    margin-right: 6px !important;
    margin-top: 0 !important;
    flex-shrink: 0;
  }

  /* Text — single line. 14px is fine for chip labels (not focusable
     inputs, so the iOS 16px-no-zoom rule doesn't apply). */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .text-sm {
    font-size: 14px !important;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--fg, #F1F2F4) !important;
  }

  /* Category label ("Common", "Trending", etc.) — irrelevant in chip
     mode where space is at a premium; hide on mobile. */
  [data-theme] [data-prompt-autocomplete-target="suggestions"] > button .text-xs {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     2) Editor v2 chat-suggest-row → compact mobile chips
     ------------------------------------------------------------------
     `.chat-suggest-row` already scrolls horizontally on desktop, but
     each .chat-suggest-card is a 220px wide x 2-line tile. On a
     ~390px-wide phone that gives you ~1.5 cards visible and the
     vertical real estate eaten by the tile (description line) is what
     pushes the chat input toward the keyboard.

     On mobile: shrink to a single-line chip variant. Title still
     visible; description hidden (the full prompt still populates the
     textarea on tap, so the user gets the detail via the input). */

  [data-theme] .chat-suggest-row {
    /* Cancel the desktop card-row gap; use the chip-strip gap value. */
    gap: 8px;
    padding: 2px 0;
  }

  [data-theme] .chat-suggest-card {
    /* Content-sized chip instead of fixed-width card. */
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    /* Stack title only — description is hidden via the next rule. */
    display: inline-flex !important;
    align-items: center;
  }

  /* Hide the multi-line description; keep the bold title. */
  [data-theme] .chat-suggest-card .chat-suggest-desc {
    display: none !important;
  }

  /* Title rules: single line, slightly smaller than desktop 13px so
     longer titles don't truncate aggressively in the chip pill. */
  [data-theme] .chat-suggest-card .chat-suggest-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    /* Re-enable normal overflow handling — we want the chip to be
       content-sized, so let the title size the chip rather than
       clipping it. */
    -webkit-line-clamp: unset !important;
    display: inline !important;
    overflow: visible !important;
  }

  /* Edge fades remain functional (parent .chat-suggest-wrap untouched). */
}
/* ==========================================================================
   Mobile chat actions — May 2026 (Option 3 revised, issue #1156).
   --------------------------------------------------------------------------
   Single [+] FAB next to the chat input + a half-height bottom sheet that
   holds ALL secondary actions in one place (attach, mode, thinking,
   settings). Replaces the prior inline controls-row approach.

   Three pieces here:

     1. .chat-actions-fab — the brand-green [+] button next to the
        textarea. Same footprint as the previous paperclip (36×36) so it
        slots into the existing chat-input flex row without disturbing the
        textarea/send-button proportions.

     2. .chat-actions-sheet — the half-height bottom sheet itself. Fixed
        positioned, slides up from bottom on `is-open`. Contains:
          - drag handle
          - header (title + close)
          - body (Attach / Mode / Thinking / More sections)

     3. .chat-actions-sheet-backdrop — full-viewport dim layer behind the
        sheet. Click-to-close.

   Plus the segmented control for thinking effort inside the sheet, and
   row-button styles for attach + settings entries.

   All rules scoped under [data-theme] so they're inert outside the design
   system. Mobile-only — the partial that renders this is wrapped in
   `lg:hidden` so it never paints on desktop.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1) [+] FAB next to the chat input
   --------------------------------------------------------------------------
   Brand-green pill matching the brand guide canvas-green (--accent). On
   tap it dispatches the `chat-actions-sheet:open` window event (see
   _chat_form.html.erb mobile section). Footprint matches the editor-send
   button (36×36) so the input row stays balanced. */
[data-theme] .chat-actions-fab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #45E760);
  color: var(--accent-fg, #0a0e0a);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base, 160ms) ease,
              transform var(--t-fast, 100ms) ease;
}
[data-theme] .chat-actions-fab:hover {
  background: var(--brand-hover, #8CE747);
}
[data-theme] .chat-actions-fab:active {
  transform: scale(0.95);
}
[data-theme] .chat-actions-fab:focus-visible {
  outline: 2px solid var(--accent, #45E760);
  outline-offset: 2px;
}
/* The FAB lives inside a `lg:hidden` block — Tailwind sets `display: none`
   at lg. Guard against the legacy `.editor-toolbar-icon` hover background
   bleeding through on touch devices. */
[data-theme] .chat-actions-fab i {
  font-size: 14px;
}
/* --------------------------------------------------------------------------
   2) Bottom sheet + backdrop
   --------------------------------------------------------------------------
   Fixed positioned. Sheet is always rendered (so we can transition into
   view) — the `is-open` class flips opacity + translate.

   Z-index notes:
     - .chat-actions-sheet-backdrop: 80   (above bottom nav, below sheet)
     - .chat-actions-sheet:           81   (above backdrop)
     - Mobile bottom nav h-16:         z-30 (in the layout)
     - Editor topbar:                  z-20
   So the sheet covers everything but the topmost system UI (e.g. iOS
   home indicator stays visible on supported safe-area-inset layouts). */
[data-theme] .chat-actions-sheet-root {
  /* The wrapper itself has no layout — its children are fixed positioned. */
  display: contents;
}
[data-theme] .chat-actions-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: opacity 200ms ease;
}
[data-theme] .chat-actions-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
[data-theme] .chat-actions-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 81;
  background: var(--bg-2, #272B2E);
  /* Sheet sits above the bottom edge — round the TOP corners only so the
     bottom edge melts into the iOS home-indicator area on supported devices. */
  border-radius: 16px 16px 0 0;
  /* Hairline border (no glow — per brand guide). The shadow is intentionally
     subtle since the backdrop already dims everything behind. */
  border-top: 1px solid var(--line-2, #3A3D42);
  box-shadow: 0 -8px 24px -6px rgba(0, 0, 0, 0.35);
  /* Default = closed. translateY(100%) puts the entire sheet just below
     the viewport. `.is-open` flips this to translateY(0). Transition
     duration matches the backdrop fade. */
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  /* iOS safe-area: extend the bottom padding by the home-indicator inset
     so the last section isn't clipped by the indicator. Falls back to 0
     on devices without the env() value. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Cap the sheet at half-viewport — Todd's spec calls for "half-height".
     max-height keeps it from growing past 60vh if we add more sections
     later, with internal scrolling. */
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}
[data-theme] .chat-actions-sheet.is-open {
  transform: translateY(0);
}
/* Drag handle — slim pill centered at the top edge. Tap target is the
   FULL handle area (16px tall) including some bleed above and below the
   visible pill, so users don't have to be pixel-precise. */
[data-theme] .chat-actions-sheet-handle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 16px;
  padding-top: 8px;
  cursor: grab;
  touch-action: none; /* allow JS to handle the touch directly */
  flex-shrink: 0;
}
[data-theme] .chat-actions-sheet-handle:active {
  cursor: grabbing;
}
[data-theme] .chat-actions-sheet-handle > span {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--fg-4, #5B5E65);
  opacity: 0.6;
}
/* Header — title + close button. The title text size sits between body
   and section-label so it reads as a sheet heading. */
[data-theme] .chat-actions-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 12px;
  flex-shrink: 0;
}
[data-theme] .chat-actions-sheet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg, #F1F2F4);
}
[data-theme] .chat-actions-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-3, #8B8C91);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
[data-theme] .chat-actions-sheet-close:hover {
  background: var(--bg-3, #35363A);
  color: var(--fg, #F1F2F4);
}
/* Body — scrollable when content exceeds the 60vh cap. */
[data-theme] .chat-actions-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* --------------------------------------------------------------------------
   3) Sections + rows + segmented controls
   -------------------------------------------------------------------------- */
[data-theme] .chat-actions-section {
  padding: 12px 12px;
  border-top: 1px solid var(--line, #2F3034);
}
/* First section has no top divider — the header already creates the
   visual boundary. */
[data-theme] .chat-actions-section:first-child {
  border-top: 0;
}
[data-theme] .chat-actions-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 8px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3, #8B8C91);
}
[data-theme] .chat-actions-section-help {
  margin: 8px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-3, #8B8C91);
}
[data-theme] .chat-actions-section-help strong {
  color: var(--fg-2, #C5C6CB);
  font-weight: 600;
}
/* Full-width row buttons — Attach Image, Attach File, App Settings. Grid
   layout with icon + label-stack + chevron. 56px tall = comfortable
   thumb-friendly tap target (above Apple HIG minimum 44pt). */
[data-theme] .chat-actions-row {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 56px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  color: var(--fg, #F1F2F4);
  transition: background 120ms ease;
}
[data-theme] .chat-actions-row:hover,
[data-theme] .chat-actions-row:focus-visible {
  background: var(--bg-3, #35363A);
  outline: none;
}
[data-theme] .chat-actions-row:active {
  background: color-mix(in srgb, var(--accent, #45E760) 12%, var(--bg-2, #272B2E));
}
[data-theme] .chat-actions-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-3, #35363A);
  color: var(--accent-text, var(--accent));
  font-size: 14px;
}
[data-theme] .chat-actions-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-theme] .chat-actions-row-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg, #F1F2F4);
}
[data-theme] .chat-actions-row-sub {
  font-size: 12px;
  line-height: 1.2;
  color: var(--fg-3, #8B8C91);
}
[data-theme] .chat-actions-row-chevron {
  color: var(--fg-4, #5B5E65);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Mode control wrapper — wraps the embedded plan_build/pill partial so
   it can sit centered with a `.chat-actions-section-help` line below. */
[data-theme] .chat-actions-mode-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 4px;
}
/* Thinking segmented control — 3 buttons in a row, sharing border, with
   the active button highlighted brand-green. Layout matches the Plan/Build
   pill style for visual consistency within the sheet. */
[data-theme] .chat-actions-thinking-segmented {
  display: flex;
  gap: 0;
  padding: 4px;
  background: var(--bg-1, #1B1C1E);
  border: 1px solid var(--line, #2F3034);
  border-radius: 999px;
  /* Take the full content width so the three options share space evenly. */
  width: 100%;
}
[data-theme] .chat-actions-thinking-option {
  flex: 1 1 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--fg-3, #8B8C91);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
[data-theme] .chat-actions-thinking-option:hover {
  color: var(--fg, #F1F2F4);
}
[data-theme] .chat-actions-thinking-option.is-active {
  background: var(--accent, #45E760);
  color: var(--accent-fg, #0a0e0a);
}
[data-theme] .chat-actions-thinking-option:focus-visible {
  outline: 2px solid var(--accent, #45E760);
  outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   Misc — disable page scroll behind the sheet
   --------------------------------------------------------------------------
   When the sheet is open, lock body scroll so the page behind doesn't
   move when the user drags inside the sheet. Mirrors the existing
   `mobile-editor` class pattern used by mobile_navigation_controller. */
[data-theme] body.chat-actions-sheet-open {
  overflow: hidden;
}
/* 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;
}
/* ==========================================================================
   Profile page — v2 (Sanzone 2026-05-23)
   --------------------------------------------------------------------------
   Renders /account/users/edit under the design system. Mirrors Sanzone's
   reference markup (id-head / ptabs / panel / form-grid / photo-upload /
   conn-row / info-banner / warn-banner). All rules are scoped under
   `[data-theme]` so this file is inert on legacy BT surfaces.

   Class names match the reference HTML so the markup can read 1:1. We
   prefix with `.profile-page` only where a name might collide with a more
   general DS component (e.g. `.field`, `.panel`); the prefix is applied at
   the wrapper, not on every leaf, to keep selectors readable.
   ========================================================================== */
/* ============= PAGE SHELL ============= */
[data-theme] .profile-page {
  padding: 56px 0 64px;
  background: var(--bg);
  min-height: calc(100vh - 64px);
}
[data-theme] .profile-page .container.narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  [data-theme] .profile-page { padding: 32px 0 48px; }
  [data-theme] .profile-page .container.narrow { padding: 0 16px; }
}
/* ============= IDENTITY HEADER ============= */
[data-theme] .profile-page .id-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  [data-theme] .profile-page .id-head { gap: 20px; }
}
[data-theme] .profile-page .id-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: var(--radius-pill);
  overflow: visible;
  flex-shrink: 0;
}
[data-theme] .profile-page .id-avatar > img,
[data-theme] .profile-page .id-avatar > .id-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: block;
}
[data-theme] .profile-page .id-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 480px) {
  [data-theme] .profile-page .id-avatar { width: 96px; height: 96px; }
  [data-theme] .profile-page .id-avatar-fallback { font-size: 38px; }
}
[data-theme] .profile-page .id-info { min-width: 0; }
[data-theme] .profile-page .id-info h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--fg);
}
[data-theme] .profile-page .id-info .id-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 14px;
  color: var(--fg-3);
}
[data-theme] .profile-page .id-info .id-meta .email {
  color: var(--fg-2);
  font-weight: 500;
}
[data-theme] .profile-page .id-info .id-meta .since {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme] .profile-page .id-info .id-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--fg-4);
}
/* ============= TABS (segmented, mirrors dashboard) ============= */
[data-theme] .profile-page .ptabs {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-1);
  margin: 24px 0 32px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-theme] .profile-page .ptabs::-webkit-scrollbar { display: none; }
[data-theme] .profile-page .ptab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base);
}
[data-theme] .profile-page .ptab svg { width: 14px; height: 14px; }
[data-theme] .profile-page .ptab:hover { color: var(--fg); }
[data-theme] .profile-page .ptab.active {
  background: var(--card-bg);
  color: var(--fg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
[data-theme] .profile-page .ptab.active svg { color: var(--accent-text); }
/* ============= PANELS ============= */
[data-theme] .profile-page .panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme] .profile-page .panel + .panel { margin-top: 20px; }
[data-theme] .profile-page .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px 22px;
}
[data-theme] .profile-page .panel-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
  display: block;
}
[data-theme] .profile-page .panel-head h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
  color: var(--fg);
}
[data-theme] .profile-page .panel-head p {
  margin: 0;
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.5;
  max-width: 60ch;
}
[data-theme] .profile-page .panel-divider {
  height: 1px;
  background: var(--line);
  margin: 0 28px;
}
/* ============= NOTIFICATION ROW ============= */
[data-theme] .profile-page .notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
}
[data-theme] .profile-page .notif-row .left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 500;
}
[data-theme] .profile-page .notif-row .indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  flex-shrink: 0;
}
[data-theme] .profile-page .notif-row .indicator.off {
  background: var(--fg-4);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-4) 12%, transparent);
}
/* ============= SWITCH ============= */
[data-theme] .profile-page .switch-control {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-theme] .profile-page .switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-theme] .profile-page .switch-control .track {
  width: 44px;
  height: 24px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--t-base), border-color var(--t-base);
}
[data-theme] .profile-page .switch-control .track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--fg-2);
  transition: left var(--t-base), background var(--t-base);
}
[data-theme] .profile-page .switch-control input:checked + .track {
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme] .profile-page .switch-control input:checked + .track::before {
  left: 22px;
  background: var(--accent-fg);
}
[data-theme] .profile-page .switch-control input:focus-visible + .track {
  box-shadow: var(--focus-ring);
}
/* ============= FORM (panel-local — does NOT use .field from _form.css) ============= */
[data-theme] .profile-page .form-body { padding: 24px 28px 28px; }
[data-theme] .profile-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
@media (max-width: 640px) {
  [data-theme] .profile-page .form-grid { grid-template-columns: 1fr; }
}
[data-theme] .profile-page .form-grid .full { grid-column: 1 / -1; }
[data-theme] .profile-page .pf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme] .profile-page .pf-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
  font-weight: 500;
}
[data-theme] .profile-page .pf-field input[type="text"],
[data-theme] .profile-page .pf-field input[type="email"],
[data-theme] .profile-page .pf-field input[type="password"],
[data-theme] .profile-page .pf-field select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
[data-theme] .profile-page .pf-field input::-moz-placeholder { color: var(--fg-4); }
[data-theme] .profile-page .pf-field input::placeholder { color: var(--fg-4); }
[data-theme] .profile-page .pf-field input:hover,
[data-theme] .profile-page .pf-field select:hover {
  border-color: var(--hover-border);
  background: var(--bg-2);
}
[data-theme] .profile-page .pf-field input:focus,
[data-theme] .profile-page .pf-field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--bg);
}
/* Sanzone's mock keeps the field background flat in light mode; the
   `[data-theme="light"]` override removes the slight bg-2 hover. */
[data-theme="light"] .profile-page .pf-field input:hover,
[data-theme="light"] .profile-page .pf-field select:hover { background: var(--bg-2); }
/* Native select arrow — encoded inline because data URIs cannot reference
   CSS custom properties. Two themed strokes mirror _form.css conventions. */
[data-theme="dark"] .profile-page .select-wrap select {
  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 14px center;
  padding-right: 38px;
  cursor: pointer;
}
[data-theme="light"] .profile-page .select-wrap select {
  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 14px center;
  padding-right: 38px;
  cursor: pointer;
}
/* ============= PHOTO UPLOAD ============= */
[data-theme] .profile-page .photo-upload {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-md);
  background: var(--bg);
}
[data-theme="light"] .profile-page .photo-upload { background: var(--bg-2); }
[data-theme] .profile-page .photo-upload .preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--line-2);
  flex-shrink: 0;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-4);
}
[data-theme] .profile-page .photo-upload .preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
[data-theme] .profile-page .photo-upload .preview svg { width: 24px; height: 24px; }
[data-theme] .profile-page .photo-upload .info { flex: 1; min-width: 0; }
[data-theme] .profile-page .photo-upload .info .row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
[data-theme] .profile-page .photo-upload .filename {
  font-size: 13px;
  color: var(--fg-3);
}
[data-theme] .profile-page .photo-upload .hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme] .profile-page .photo-upload .choose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .profile-page .photo-upload .choose:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .profile-page .photo-upload .choose svg { width: 13px; height: 13px; }
[data-theme] .profile-page .photo-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ============= FORM ACTIONS ============= */
[data-theme] .profile-page .form-actions {
  padding: 18px 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-theme] .profile-page .form-actions .spacer { flex: 1; }
/* ============= CONNECTION ROWS ============= */
[data-theme] .profile-page .conn-list {
  display: flex;
  flex-direction: column;
}
[data-theme] .profile-page .conn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}
[data-theme] .profile-page .conn-row:last-child { border-bottom: 0; }
[data-theme] .profile-page .conn-row .ico {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme] .profile-page .conn-row .ico svg { width: 22px; height: 22px; display: block; }
[data-theme] .profile-page .conn-row .ico.ico-dark { background: #0f0f0f; border-color: #0f0f0f; }
[data-theme] .profile-page .conn-row .info { flex: 1; min-width: 0; }
[data-theme] .profile-page .conn-row .info .name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 4px;
}
[data-theme] .profile-page .conn-row .info .state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-4);
  text-transform: uppercase;
}
[data-theme] .profile-page .conn-row .info .state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--fg-4);
}
[data-theme] .profile-page .conn-row .info .state.connected { color: var(--accent-text); }
[data-theme] .profile-page .conn-row .info .state.connected::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-theme] .profile-page .conn-row .btn-conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
[data-theme] .profile-page .conn-row .btn-conn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .profile-page .conn-row .btn-conn.is-disconnect {
  color: var(--danger-fg);
}
[data-theme] .profile-page .conn-row .btn-conn.is-disconnect:hover {
  background: var(--danger-bg);
  border-color: var(--danger-fg);
  color: var(--danger-fg);
}
/* ============= INFO BANNER (under connected accounts) ============= */
[data-theme] .profile-page .info-banner {
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-1));
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.5;
}
[data-theme] .profile-page .info-banner svg {
  width: 16px;
  height: 16px;
  color: var(--accent-text);
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme] .profile-page .info-banner a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
[data-theme] .profile-page .info-banner a:hover { text-decoration-thickness: 2px; }
/* ============= WARNING BANNER (security) ============= */
[data-theme] .profile-page .warn-banner {
  margin: 0 28px 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning-fg) 45%, var(--line));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--warning-fg);
  line-height: 1.45;
}
[data-theme] .profile-page .warn-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme] .profile-page .warn-banner strong { font-weight: 600; }
/* ============= SECURITY GROUP ============= */
[data-theme] .profile-page .form-note {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 4px 0 -4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
/* ============= TAB PANES ============= */
[data-theme] .profile-page .ptab-pane { display: none; }
[data-theme] .profile-page .ptab-pane.active { display: block; }
/* ============= 2FA panel — host for the bullet-train _two_factor partial ============= */
/* The Bullet Train _two_factor.html.erb partial renders its own
   `account/shared/box` chrome. We wrap it in our `.panel` to keep
   the surrounding panel look consistent, but we don't restyle the
   inner BT markup — it stays on the BT theme partials. */
[data-theme] .profile-page .panel .two-factor-body { padding: 0 28px 24px; }
/* 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; }
}
/* ==========================================================================
   Surfaces — compare (/compare/*)
   --------------------------------------------------------------------------
   Brand-aligned styling for the public comparison pages (OverSkill vs
   Lovable / Replit / Base44 / Manus). Mirrors the pattern in
   surfaces/landing.css — consumes design system tokens (--bg, --accent,
   --line, etc.) and references design system class names. The Tailwind
   utilities in the partials handle layout primitives (grid, flex,
   spacing); this file handles chrome (surfaces, lines, hover, focus,
   typography) via design system tokens so light + dark modes are driven
   by [data-theme] toggling instead of `dark:` Tailwind variants.

   Scoped to [data-theme] for inert-on-legacy isolation — if a future
   compare-related page renders without data-theme on <html>, none of
   these rules fire.
   ========================================================================== */
/* ============= Section rhythm ============= */
[data-theme] .cmp-section {
  padding: var(--space-16) 0;
}
@media (max-width: 768px) {
  [data-theme] .cmp-section { padding: var(--space-10) 0; }
}
[data-theme] .cmp-section--surface-0 { background: var(--bg); }
[data-theme] .cmp-section--surface-1 { background: var(--bg-1); }
[data-theme] .cmp-section--surface-2 { background: var(--bg-2); }
/* ============= Hero — release-pill, headline, stat tiles ============= */
[data-theme] .cmp-hero {
  background: var(--bg);
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}
[data-theme] .cmp-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: var(--space-6);
}
[data-theme] .cmp-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--space-5);
}
[data-theme] .cmp-hero__intro {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 720px;
  margin: 0 auto var(--space-8);
}
[data-theme] .cmp-hero__intro strong { color: var(--fg); font-weight: 600; }
[data-theme] .cmp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  [data-theme] .cmp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme] .cmp-stat {
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
[data-theme] .cmp-stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
[data-theme] .cmp-stat__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin-top: var(--space-1);
}
[data-theme] .cmp-stat__sublabel {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}
/* ============= Section headers ============= */
[data-theme] .cmp-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-align: center;
  margin: 0 0 var(--space-8);
}
/* ============= Key wins (card grid) ============= */
[data-theme] .cmp-wins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 768px) {
  [data-theme] .cmp-wins { grid-template-columns: 1fr; }
}
[data-theme] .cmp-win {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .cmp-win--critical { border-left-color: var(--danger-fg); }
[data-theme] .cmp-win--high     { border-left-color: var(--warning-fg); }
[data-theme] .cmp-win--medium   { border-left-color: var(--accent); }
[data-theme] .cmp-win__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme] .cmp-win--critical .cmp-win__badge { background: var(--danger-bg); color: var(--danger-fg); }
[data-theme] .cmp-win--high     .cmp-win__badge { background: rgba(245,194,69,0.10); color: var(--warning-fg); }
[data-theme] .cmp-win--medium   .cmp-win__badge { background: var(--success-bg); color: var(--success-fg); }
[data-theme] .cmp-win__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: var(--space-3) 0 var(--space-2);
}
[data-theme] .cmp-win__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
/* ============= Comparison table ============= */
[data-theme] .cmp-table-wrap {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme] .cmp-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
[data-theme] .cmp-table thead { background: var(--bg-1); }
[data-theme] .cmp-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
}
[data-theme] .cmp-table th.cmp-table__overskill-col {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
}
[data-theme] .cmp-table th.cmp-table__col-center,
[data-theme] .cmp-table td.cmp-table__col-center { text-align: center; }
[data-theme] .cmp-table td {
  padding: var(--space-4) var(--space-5);
  font-size: 14px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line);
}
[data-theme] .cmp-table td.cmp-table__feature {
  font-weight: 600;
  color: var(--fg);
}
[data-theme] .cmp-table td.cmp-table__overskill {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--fg);
  font-weight: 600;
}
[data-theme] .cmp-table__explanation {
  background: var(--bg-1);
}
[data-theme] .cmp-table__explanation td {
  font-size: 13px;
  color: var(--fg-3);
  padding: var(--space-3) var(--space-5);
}
[data-theme] .cmp-table__explanation strong { color: var(--fg-2); }
[data-theme] .cmp-winner-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
[data-theme] .cmp-winner-pill--overskill {
  background: var(--accent);
  color: var(--accent-fg);
}
[data-theme] .cmp-winner-pill--tie,
[data-theme] .cmp-winner-pill--competitor {
  background: var(--bg-3);
  color: var(--fg-2);
}
/* Summary callout under the table */
[data-theme] .cmp-table__summary {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md);
}
[data-theme] .cmp-table__summary h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
[data-theme] .cmp-table__summary p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
/* ============= Verdict (CTA banner) ============= */
[data-theme] .cmp-verdict {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  text-align: center;
}
[data-theme] .cmp-verdict__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
[data-theme] .cmp-verdict__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 680px;
  margin: 0 auto var(--space-6);
}
[data-theme] .cmp-verdict__body strong { color: var(--fg); font-weight: 600; }
[data-theme] .cmp-verdict__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
/* ============= FAQ list ============= */
[data-theme] .cmp-faqs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
}
[data-theme] .cmp-faq {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .cmp-faq__q {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
[data-theme] .cmp-faq__a {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
/* ============= Competitor info block ============= */
[data-theme] .cmp-info { max-width: 880px; margin: 0 auto; }
[data-theme] .cmp-info__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
[data-theme] .cmp-info__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
}
[data-theme] .cmp-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 768px) {
  [data-theme] .cmp-info__grid { grid-template-columns: 1fr; }
}
[data-theme] .cmp-info__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .cmp-info__card--danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger-fg) 30%, transparent);
}
[data-theme] .cmp-info__card h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
[data-theme] .cmp-info__card--danger h4 { color: var(--danger-fg); }
[data-theme] .cmp-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
[data-theme] .cmp-info__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}
[data-theme] .cmp-info__card--danger .cmp-info__list li { color: var(--danger-fg); }
[data-theme] .cmp-info__list strong { color: var(--fg); font-weight: 600; }
[data-theme] .cmp-info__card--danger .cmp-info__list strong { color: var(--danger-fg); }
/* ============= Source citations ============= */
[data-theme] .cmp-sources { max-width: 760px; margin: 0 auto; }
[data-theme] .cmp-sources__lead {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
}
[data-theme] .cmp-source {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
[data-theme] .cmp-source h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0 0 var(--space-2);
}
[data-theme] .cmp-source p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0 0 var(--space-2);
}
[data-theme] .cmp-source ul { list-style: none; padding: 0; margin: 0; }
[data-theme] .cmp-source li { margin-bottom: 4px; }
[data-theme] .cmp-source a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--accent-text);
  text-decoration: none;
}
[data-theme] .cmp-source a:hover { text-decoration: underline; }
[data-theme] .cmp-sources__updated {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  margin-top: var(--space-5);
}
/* ============= Final CTA banner ============= */
[data-theme] .cmp-cta {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: var(--space-16) 0;
  text-align: center;
}
[data-theme] .cmp-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
[data-theme] .cmp-cta__body {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
}
[data-theme] .cmp-cta__fine {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-4);
  margin: var(--space-4) 0 0;
}
/* ============= "Why builders choose" + competitor overview (index) ============= */
[data-theme] .cmp-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 980px) { [data-theme] .cmp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-theme] .cmp-overview { grid-template-columns: 1fr; } }
[data-theme] .cmp-overview__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .cmp-overview__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: 0 0 var(--space-2);
}
[data-theme] .cmp-overview__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
/* Versus grid (index page) */
[data-theme] .cmp-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 768px) { [data-theme] .cmp-versus { grid-template-columns: 1fr; } }
[data-theme] .cmp-versus__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
[data-theme] .cmp-versus__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
[data-theme] .cmp-versus__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--fg);
  margin: 0;
}
[data-theme] .cmp-versus__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
[data-theme] .cmp-versus__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
}
[data-theme] .cmp-versus__issues-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--danger-fg);
  margin: 0 0 var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
[data-theme] .cmp-versus__issues {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
[data-theme] .cmp-versus__issues li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--danger-fg);
}
[data-theme] .cmp-versus__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
}
[data-theme] .cmp-versus__cta:hover { text-decoration: underline; }
/* ==========================================================================
   Surfaces — agents (/agents)
   --------------------------------------------------------------------------
   Brand-aligned styling for the public "/agents" hub. Mirrors the patterns
   in surfaces/landing.css + surfaces/compare.css. The page lives on the
   marketing layout (data-theme="dark"), so all rules below consume design
   system tokens (var(--bg), var(--accent), var(--line), --fg-*) and are
   scoped to [data-theme] for inert-on-legacy isolation.

   Previously the agents view used Tailwind `emerald-*` (≈#10b981) and
   `gray-*` chrome with raw `text-emerald-400` everywhere — the same shape
   as the brand accent but the wrong hue (OverSkill brand green is
   #45E760 = `var(--accent)`). This surface stylesheet maps the existing
   visual structure onto correct brand tokens.
   ========================================================================== */
/* ============= Section rhythm + pill ============= */
[data-theme] .agents-section {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 768px) { [data-theme] .agents-section { padding: var(--space-10) 0; } }
[data-theme] .agents-section--surface-0 { background: var(--bg); }
[data-theme] .agents-section--surface-1 { background: var(--bg-1); }
[data-theme] .agents-hero {
  position: relative;
  background: var(--bg);
  padding: var(--space-20) 0 var(--space-16);
  text-align: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
[data-theme] .agents-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse at top,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    transparent 60%
  );
  opacity: 0.6;
  pointer-events: none;
}
[data-theme] .agents-hero > * { position: relative; }
[data-theme] .agents-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-7);
}
[data-theme] .agents-hero__pill .pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: agents-pulse 2s infinite;
}
@keyframes agents-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.9); }
}
[data-theme] .agents-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--space-5);
}
[data-theme] .agents-hero__title .accent { color: var(--accent); }
[data-theme] .agents-hero__intro {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 640px;
  margin: 0 auto var(--space-8);
}
[data-theme] .agents-hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
/* ============= Section headers + eyebrow ============= */
[data-theme] .agents-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
}
[data-theme] .agents-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
[data-theme] .agents-lead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-2);
  margin: 0 0 var(--space-10);
}
/* ============= Differentiator (numbered steps) ============= */
[data-theme] .agents-diff {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 980px) { [data-theme] .agents-diff { grid-template-columns: 1fr; } }
[data-theme] .agents-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
[data-theme] .agents-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .agents-step__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme] .agents-step__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  margin: 0 0 4px;
}
[data-theme] .agents-step__code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  word-break: break-all;
}
[data-theme] .agents-step__code .accent { color: var(--accent-text); }
[data-theme] .agents-diff__body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
}
[data-theme] .agents-diff__body p strong { color: var(--fg); font-weight: 600; }
[data-theme] .agents-diff__body code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-text);
}
[data-theme] .agents-diff__body p:last-child { font-size: 13px; color: var(--fg-3); }
/* ============= Code blocks (curl demo) ============= */
[data-theme] .agents-code {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 980px) { [data-theme] .agents-code { grid-template-columns: 1fr; } }
[data-theme] .agents-code__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-4);
  margin-bottom: var(--space-2);
}
[data-theme] .agents-code__block {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
[data-theme] .agents-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
}
[data-theme] .agents-code__head .ok { color: var(--accent-text); }
[data-theme] .agents-code__copy {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  transition: color var(--t-base);
}
[data-theme] .agents-code__copy:hover { color: var(--fg-2); }
[data-theme] .agents-code__block pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
[data-theme] .agents-code__block pre code.accent-text { color: var(--accent-text); }
[data-theme] .agents-code__block pre code.body-text { color: var(--fg-2); }
[data-theme] .agents-code__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-4);
  margin: var(--space-3) 0 0;
}
[data-theme] .agents-code__note code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
}
/* ============= Install cards grid ============= */
[data-theme] .agents-install {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 980px) { [data-theme] .agents-install { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-theme] .agents-install { grid-template-columns: 1fr; } }
[data-theme] .agents-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .agents-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
[data-theme] .agents-card__badge {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
[data-theme] .agents-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0;
}
[data-theme] .agents-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0 0 var(--space-3);
}
[data-theme] .agents-card__cmd {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
  word-break: break-all;
}
/* ============= Auth / no-auth dual columns ============= */
[data-theme] .agents-endpoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 768px) { [data-theme] .agents-endpoints { grid-template-columns: 1fr; } }
[data-theme] .agents-endpoint-col__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
[data-theme] .agents-endpoint-col--accent .agents-endpoint-col__label { color: var(--accent-text); }
[data-theme] .agents-endpoint-col--neutral .agents-endpoint-col__label { color: var(--fg-3); }
[data-theme] .agents-endpoint-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
[data-theme] .agents-endpoint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
[data-theme] .agents-endpoint__icon {
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme] .agents-endpoint__path {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}
[data-theme] .agents-endpoint--accent .agents-endpoint__icon,
[data-theme] .agents-endpoint--accent .agents-endpoint__path { color: var(--accent-text); }
[data-theme] .agents-endpoint--neutral .agents-endpoint__icon,
[data-theme] .agents-endpoint--neutral .agents-endpoint__path { color: var(--fg-3); }
[data-theme] .agents-endpoint__desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}
[data-theme] .agents-rate-limits {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
}
[data-theme] .agents-rate-limits strong { color: var(--fg); font-weight: 600; }
[data-theme] .agents-rate-limits a { color: var(--accent-text); }
[data-theme] .agents-rate-limits a:hover { text-decoration: underline; }
[data-theme] .agents-rate-limits code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
}
/* ============= Discovery file grid ============= */
[data-theme] .agents-discovery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 980px) { [data-theme] .agents-discovery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-theme] .agents-discovery { grid-template-columns: 1fr; } }
[data-theme] .agents-disc-card {
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base);
}
[data-theme] .agents-disc-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: var(--hover-bg);
}
[data-theme] .agents-disc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
[data-theme] .agents-disc-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  margin: 0;
}
[data-theme] .agents-disc-card__ext {
  color: var(--fg-4);
  transition: color var(--t-base);
}
[data-theme] .agents-disc-card:hover .agents-disc-card__ext { color: var(--accent-text); }
[data-theme] .agents-disc-card__path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
  word-break: break-all;
}
[data-theme] .agents-disc-card__desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-3);
  margin: var(--space-2) 0 0;
  line-height: 1.4;
}
/* Auxiliary info pair (Link headers + markdown nego) */
[data-theme] .agents-aux {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 768px) { [data-theme] .agents-aux { grid-template-columns: 1fr; } }
[data-theme] .agents-aux__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .agents-aux__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0 0 var(--space-2);
}
[data-theme] .agents-aux__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0 0 var(--space-3);
}
[data-theme] .agents-aux__body code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
}
[data-theme] .agents-aux__example {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
  word-break: break-all;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-3);
}
/* ============= Standards grid ============= */
[data-theme] .agents-standards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 768px) { [data-theme] .agents-standards { grid-template-columns: 1fr; } }
[data-theme] .agents-standard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
[data-theme] .agents-standard__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
[data-theme] .agents-standard__icon {
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme] .agents-standard__icon--shipped { color: var(--accent-text); }
[data-theme] .agents-standard__icon--planned { color: var(--warning-fg); }
[data-theme] .agents-standard__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0 0 var(--space-2);
}
[data-theme] .agents-standard__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0;
}
[data-theme] .agents-standard__desc strong { color: var(--warning-fg); font-weight: 600; }
[data-theme] .agents-standard__desc em { color: var(--fg-2); font-style: normal; font-weight: 500; }
/* ============= CTA closer ============= */
[data-theme] .agents-cta {
  text-align: center;
  padding: var(--space-20) 0;
}
[data-theme] .agents-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
[data-theme] .agents-cta p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--fg-2);
  max-width: 560px;
  margin: 0 auto var(--space-8);
}
[data-theme] .agents-cta__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
[data-theme] .agents-cta__fine {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-4);
  margin-top: var(--space-7);
}
[data-theme] .agents-cta__fine a { color: var(--accent-text); }
[data-theme] .agents-cta__fine a:hover { text-decoration: underline; }
/* 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\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-blue-50::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.file\:bg-gray-100::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(224 228 238 / var(--tw-bg-opacity, 1));
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button{
  font-weight: 500;
}
.file\:text-blue-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.file\:text-gray-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(37 40 45 / var(--tw-text-opacity, 1));
}
.placeholder\:text-gray-400::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.placeholder\:text-gray-400::placeholder{
  --tw-text-opacity: 1;
  color: rgb(127 140 153 / var(--tw-text-opacity, 1));
}
.backdrop\:bg-black\/50::backdrop{
  background-color: rgb(0 0 0 / 0.5);
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:left-\[2px\]::after{
  content: var(--tw-content);
  left: 2px;
}
.after\:top-\[2px\]::after{
  content: var(--tw-content);
  top: 2px;
}
.after\:h-5::after{
  content: var(--tw-content);
  height: 1.25rem;
}
.after\:w-5::after{
  content: var(--tw-content);
  width: 1.25rem;
}
.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}
.after\:border::after{
  content: var(--tw-content);
  border-width: 1px;
}
.after\:border-gray-300::after{
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(179 185 192 / var(--tw-border-opacity, 1));
}
.after\:bg-white::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.after\:transition-all::after{
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}
.last\:border-0:last-child{
  border-width: 0px;
}
.last\:border-r-0:last-child{
  border-right-width: 0px;
}
.odd\:bg-white:nth-child(odd){
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.even\:bg-gray-50\/40:nth-child(even){
  background-color: rgb(247 249 251 / 0.4);
}
.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-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-50\/100:hover{
  background-color: rgb(247 249 251 / 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-800\/50:hover{
  background-color: rgb(37 40 45 / 0.5);
}
.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\(--accent-fg\)\]:hover{
  color: var(--accent-fg);
}
.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-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-300:hover{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-400:hover{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-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-white\/60:focus{
  --tw-ring-color: rgb(255 255 255 / 0.6);
}
.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-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-gray-700\/50:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(37 40 45 / 0.5);
}
.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-600\/50:is(.dark *){
  border-color: rgb(217 119 6 / 0.5);
}
.dark\:border-amber-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-700\/50:is(.dark *){
  border-color: rgb(180 83 9 / 0.5);
}
.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:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(120 53 15 / var(--tw-border-opacity, 1));
}
.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-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-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(6 78 59 / 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-700\/50:is(.dark *){
  border-color: rgb(37 40 45 / 0.5);
}
.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-700\/50:is(.dark *){
  border-color: rgb(185 28 28 / 0.5);
}
.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-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-700\/50:is(.dark *){
  border-color: rgb(161 98 7 / 0.5);
}
.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\/20:is(.dark *){
  background-color: rgb(6 78 59 / 0.2);
}
.dark\:bg-emerald-900\/30:is(.dark *){
  background-color: rgb(6 78 59 / 0.3);
}
.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-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-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-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / 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-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\: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\:odd\:bg-gray-800:nth-child(odd):is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(37 40 45 / var(--tw-bg-opacity, 1));
}
.dark\:even\:bg-gray-800\/60:nth-child(even):is(.dark *){
  background-color: rgb(37 40 45 / 0.6);
}
.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-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-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-700\/60:hover:is(.dark *){
  background-color: rgb(37 40 45 / 0.6);
}
.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-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .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-block{
    display: inline-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-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-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\:flex-initial{
    flex: 0 1 auto;
  }
  .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-2{
    gap: 0.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\: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-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-8{
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .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;
}