/* 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
*/

/*
 * This is an extra level of indirection because for some reason using @tailwind directives directly inside this file doesn't work.
 * When we move to v4 we should be able to just to `@import "tailwindcss"` here.
 */

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

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

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

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

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

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter var, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

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

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

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

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

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

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

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

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

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

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

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

:root {
  --base-50: 248 250 252;
  --base-100: 241 245 249;
  --base-200: 226 232 240;
  --base-300: 203 213 225;
  --base-400: 148 163 184;
  --base-500: 100 116 139;
  --base-600: 71 85 105;
  --base-700: 51 65 85;
  --base-800: 30 41 59;
  --base-900: 15 23 42;
  --base-950: 2 6 23;
}

body[data-skin="paper"] {
  --base-50: 254 252 248;
  --base-100: 250 247 241;
  --base-200: 239 235 226;
  --base-300: 216 211 204;
  --base-400: 170 164 154;
  --base-500: 122 115 106;
  --base-600: 93 87 80;
  --base-700: 74 68 61;
  --base-800: 47 42 36;
  --base-900: 36 30 24;
  --base-950: 14 10 6;
  --primary-50: #eef6ff;
  --primary-100: #deedff;
  --primary-200: #c0dafc;
  --primary-300: #a0c0eb;
  --primary-400: #528ed9;
  --primary-500: #006fd8;
  --primary-600: #005bb4;
  --primary-700: #004b96;
  --primary-800: #003c79;
  --primary-900: #002d5e;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.prose-slate {
  --tw-prose-body: #334155;
  --tw-prose-headings: #0f172a;
  --tw-prose-lead: #475569;
  --tw-prose-links: #0f172a;
  --tw-prose-bold: #0f172a;
  --tw-prose-counters: #64748b;
  --tw-prose-bullets: #cbd5e1;
  --tw-prose-hr: #e2e8f0;
  --tw-prose-quotes: #0f172a;
  --tw-prose-quote-borders: #e2e8f0;
  --tw-prose-captions: #64748b;
  --tw-prose-kbd: #0f172a;
  --tw-prose-kbd-shadows: 15 23 42;
  --tw-prose-code: #0f172a;
  --tw-prose-pre-code: #e2e8f0;
  --tw-prose-pre-bg: #1e293b;
  --tw-prose-th-borders: #cbd5e1;
  --tw-prose-td-borders: #e2e8f0;
  --tw-prose-invert-body: #cbd5e1;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #94a3b8;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #94a3b8;
  --tw-prose-invert-bullets: #475569;
  --tw-prose-invert-hr: #334155;
  --tw-prose-invert-quotes: #f1f5f9;
  --tw-prose-invert-quote-borders: #334155;
  --tw-prose-invert-captions: #94a3b8;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #cbd5e1;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #475569;
  --tw-prose-invert-td-borders: #334155;
}

.prose-stone {
  --tw-prose-body: #44403c;
  --tw-prose-headings: #1c1917;
  --tw-prose-lead: #57534e;
  --tw-prose-links: #1c1917;
  --tw-prose-bold: #1c1917;
  --tw-prose-counters: #78716c;
  --tw-prose-bullets: #d6d3d1;
  --tw-prose-hr: #e7e5e4;
  --tw-prose-quotes: #1c1917;
  --tw-prose-quote-borders: #e7e5e4;
  --tw-prose-captions: #78716c;
  --tw-prose-kbd: #1c1917;
  --tw-prose-kbd-shadows: 28 25 23;
  --tw-prose-code: #1c1917;
  --tw-prose-pre-code: #e7e5e4;
  --tw-prose-pre-bg: #292524;
  --tw-prose-th-borders: #d6d3d1;
  --tw-prose-td-borders: #e7e5e4;
  --tw-prose-invert-body: #d6d3d1;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #a8a29e;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #a8a29e;
  --tw-prose-invert-bullets: #57534e;
  --tw-prose-invert-hr: #44403c;
  --tw-prose-invert-quotes: #f5f5f4;
  --tw-prose-invert-quote-borders: #44403c;
  --tw-prose-invert-captions: #a8a29e;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d6d3d1;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #57534e;
  --tw-prose-invert-td-borders: #44403c;
}

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

a:hover {
  color: var(--secondary-600);
  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 {
  background-color: var(--primary-500);
  --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);
}

.\!button:hover {
  background-color: var(--primary-600);
  --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-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}

.button {
  background-color: var(--primary-500);
  --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);
}

.button:hover {
  background-color: var(--primary-600);
  --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-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}

.\!button:where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 1);
}

.button:where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 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.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 {
  color: var(--secondary-500);
}

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

/* @apply dark:text-base-200; */

.button-secondary.button-increase-contrast {
  color: var(--secondary-700);
}

.button-secondary.button-increase-contrast:hover {
  color: var(--secondary-900);
}

.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: .81rem;
}

.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: .81rem;
}

.button-alternative {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / 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(var(--base-500) / 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);
}

.button-alternative:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-50) / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}

.button-alternative:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.button-alternative:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.button-color {
  background-color: var(--primary-500);
  --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);
}

.button-color:hover {
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.button-color: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-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}

.button-color:where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 1);
}

.button-color.button-red {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.button-color.button-red:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.button-color.button-red:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}

.button-color {
  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;
}

.button-color.button-smaller {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: .81rem;
}

form.button_to input[type=submit].button-color {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].button-color:hover {
  background-color: var(--primary-600);
}

.button-color {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}

.dark .button-color,
[data-theme="dark"] .button-color {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.button-color:hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.button-color:active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}

.button-color.button-smaller {
  box-shadow: var(--unskinned-btn-shadow-flat);
}

[data-skin] .button-color {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .button-color,
[data-skin] a.button-color,
[data-skin] .button-color:hover,
[data-skin] a.button-color:hover {
  background: var(--m, var(--brand));
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--m, var(--brand)) 100%, black 18%);
}

[data-skin] .button-color:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .button-color:active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

[data-skin] .button-color:disabled,
[data-skin] .button-color[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

[data-skin] .button-color:focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}

[data-skin] .button-color.secondary,
[data-skin] a.button-color.secondary,
[data-skin] .button-color.secondary:hover,
[data-skin] a.button-color.secondary:hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

[data-skin] .button-color.ghost,
[data-skin] a.button-color.ghost,
[data-skin] .button-color.ghost:hover,
[data-skin] a.button-color.ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

[data-skin] .button-color.ghost:hover {
  background: var(--paper-2);
  border-color: var(--edge);
  transform: none;
}

[data-skin] .button-color.danger,
[data-skin] a.button-color.danger,
[data-skin] .button-color.danger:hover,
[data-skin] a.button-color.danger:hover {
  background: var(--danger);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--danger) 100%, black 18%);
}

[data-skin] .button-color.button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

.button-color {
  border-radius: 9999px;
}

.btn-toggle input[type=checkbox], .btn-toggle input[type=radio] {
  display: none;
}

.btn-toggle input[type=checkbox]:checked + button, .btn-toggle input[type=radio]:checked + button {
  background-color: var(--primary-500);
  --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);
}

.btn-toggle input[type=checkbox]:checked + button:hover, .btn-toggle input[type=radio]:checked + button:hover {
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.btn-toggle input[type=checkbox]:checked + button:focus, .btn-toggle input[type=radio]:checked + 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-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}

.btn-toggle input[type=checkbox]:checked + button:where(.dark, .dark *), .btn-toggle input[type=radio]:checked + button:where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 1);
}

.btn-toggle input[type=checkbox]:checked + button.button-red, .btn-toggle input[type=radio]:checked + button.button-red {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.btn-toggle input[type=checkbox]:checked + button.button-red:hover, .btn-toggle input[type=radio]:checked + button.button-red:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.btn-toggle input[type=checkbox]:checked + button.button-red:focus, .btn-toggle input[type=radio]:checked + button.button-red:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}

.btn-toggle input[type=checkbox]:checked + button, .btn-toggle input[type=radio]:checked + 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;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.btn-toggle input[type=checkbox]:checked + button.button-smaller, .btn-toggle input[type=radio]:checked + button.button-smaller {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: .81rem;
}

form.button_to input[type=submit].btn-toggle input[type=checkbox]:checked + button,form.button_to input[type=submit] .btn-toggle input[type=radio]:checked + button {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].btn-toggle input[type=checkbox]:checked + button:hover,form.button_to input[type=submit] .btn-toggle input[type=radio]:checked + button:hover {
  background-color: var(--primary-600);
}

.btn-toggle input[type=checkbox]:checked + button, .btn-toggle input[type=radio]:checked + button {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}

.dark .btn-toggle input[type=checkbox]:checked + button,
[data-theme="dark"] .btn-toggle input[type=checkbox]:checked + button,.dark  .btn-toggle input[type=radio]:checked + button,
[data-theme="dark"]  .btn-toggle input[type=radio]:checked + button {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.btn-toggle input[type=checkbox]:checked + button:hover, .btn-toggle input[type=radio]:checked + button:hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.btn-toggle input[type=checkbox]:checked + button:active, .btn-toggle input[type=radio]:checked + button:active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}

.btn-toggle input[type=checkbox]:checked + button.button-smaller, .btn-toggle input[type=radio]:checked + button.button-smaller {
  box-shadow: var(--unskinned-btn-shadow-flat);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button,[data-skin]  .btn-toggle input[type=radio]:checked + button {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button,
[data-skin] .btn-toggle input[type=checkbox]:checked + button:hover,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button:hover,[data-skin]  .btn-toggle input[type=radio]:checked + button,
[data-skin] a .btn-toggle input[type=radio]:checked + button,
[data-skin]  .btn-toggle input[type=radio]:checked + button:hover,
[data-skin] a .btn-toggle input[type=radio]:checked + button:hover {
  background: var(--m, var(--brand));
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--m, var(--brand)) 100%, black 18%);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button:hover,[data-skin]  .btn-toggle input[type=radio]:checked + button:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button:active,[data-skin]  .btn-toggle input[type=radio]:checked + button:active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button:disabled,
[data-skin] .btn-toggle input[type=checkbox]:checked + button[aria-disabled="true"],[data-skin]  .btn-toggle input[type=radio]:checked + button:disabled,
[data-skin]  .btn-toggle input[type=radio]:checked + button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button:focus-visible,[data-skin]  .btn-toggle input[type=radio]:checked + button:focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button.secondary,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button.secondary,
[data-skin] .btn-toggle input[type=checkbox]:checked + button.secondary:hover,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button.secondary:hover,[data-skin]  .btn-toggle input[type=radio]:checked + button.secondary,
[data-skin] a .btn-toggle input[type=radio]:checked + button.secondary,
[data-skin]  .btn-toggle input[type=radio]:checked + button.secondary:hover,
[data-skin] a .btn-toggle input[type=radio]:checked + button.secondary:hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button.ghost,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button.ghost,
[data-skin] .btn-toggle input[type=checkbox]:checked + button.ghost:hover,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button.ghost:hover,[data-skin]  .btn-toggle input[type=radio]:checked + button.ghost,
[data-skin] a .btn-toggle input[type=radio]:checked + button.ghost,
[data-skin]  .btn-toggle input[type=radio]:checked + button.ghost:hover,
[data-skin] a .btn-toggle input[type=radio]:checked + button.ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button.ghost:hover,[data-skin]  .btn-toggle input[type=radio]:checked + button.ghost:hover {
  background: var(--paper-2);
  border-color: var(--edge);
  transform: none;
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button.danger,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button.danger,
[data-skin] .btn-toggle input[type=checkbox]:checked + button.danger:hover,
[data-skin] a.btn-toggle input[type=checkbox]:checked + button.danger:hover,[data-skin]  .btn-toggle input[type=radio]:checked + button.danger,
[data-skin] a .btn-toggle input[type=radio]:checked + button.danger,
[data-skin]  .btn-toggle input[type=radio]:checked + button.danger:hover,
[data-skin] a .btn-toggle input[type=radio]:checked + button.danger:hover {
  background: var(--danger);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--danger) 100%, black 18%);
}

[data-skin] .btn-toggle input[type=checkbox]:checked + button.button-smaller,[data-skin]  .btn-toggle input[type=radio]:checked + button.button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

.btn-toggle.btn-color-picker input[type=checkbox]:checked + button, .btn-toggle.btn-color-picker input[type=radio]:checked + button {
  border-radius: 9999px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.full {
  display: flex;
  width: 100%;
  justify-content: center;
}

form.\!form > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.form > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.\!form .form-wrapper > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.form .form-wrapper > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.\!form .form-wrapper[disabled] {
  opacity: 0.3 !important;
  position: relative !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

form.form .form-wrapper[disabled] {
  opacity: 0.3;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

form.\!form .form-wrapper[disabled]:before {
  content: "" !important;
  position: absolute !important;
  background-color: transparent !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

form.form .form-wrapper[disabled]:before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*
    This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
    because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
    no extra element is injected into the form.
    */

form.\!form[method="post" i], form.\!form[method="patch" i] {
  margin-top: -1.25rem;
}

form.form[method="post" i], form.form[method="patch" i] {
  margin-top: -1.25rem;
}

form.\!form[method="post" i], form.\!form[method="patch" i] {
  margin-top: -1.25rem;
}

form.\!form .buttons {
  padding-top: 0.25rem;
}

form.\!form .buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

form.form .buttons {
  padding-top: 0.25rem;
}

form.form .buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.table {
  width: 100%;
}

.table > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(var(--base-900) / 0.05);
}

.table {
  text-align: left;
}

.table:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--base-700) / 0.05);
}

.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:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.table th:first-child {
  padding-left: 1.25rem;
}

.table th:last-child {
  padding-right: 1.25rem;
}

.table tbody > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(var(--base-900) / 0.05);
}

.table tbody:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--base-700) / 0.05);
}

.table td {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.table td:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.table td:first-child {
  padding-left: 1.25rem;
}

.table td:last-child {
  padding-right: 1.25rem;
}

.table td.buttons {
  padding-right: 0.75rem;
}

.table td.buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

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

.box-table .table th:first-child, .box-table .table td:first-child {
  padding-left: 2rem;
}

.box-table .table th:last-child, .box-table .table td:last-child {
  padding-right: 2rem;
}

.\!pagy {
  display: flex;
}

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

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

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

.\!pagy a:not(.gap) {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / 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(var(--base-500) / 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);
}

.\!pagy a:not(.gap):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-50) / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}

.\!pagy a:not(.gap):where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.\!pagy a:not(.gap):hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.\!pagy a:not(.gap) {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}


.dark .\!pagy a:not(.gap),
[data-theme="dark"] .\!pagy a:not(.gap) {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.\!pagy a:not(.gap):hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.\!pagy a:not(.gap):active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}


[data-skin] .\!pagy a:not(.gap) {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .\!pagy a:not(.gap),
[data-skin] a.\!pagy a:not(.gap),
[data-skin] .\!pagy a:not(.gap):hover,
[data-skin] a.\!pagy a:not(.gap):hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}


[data-skin] .\!pagy a:not(.gap):hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}


[data-skin] .\!pagy a:not(.gap):active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}


[data-skin] .\!pagy a:not(.gap):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


[data-skin] .\!pagy a:not(.gap):focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}


[data-skin] .\!pagy a:not(.gap).button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

.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: .81rem;
}

.pagy a:not(.gap) {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / 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(var(--base-500) / 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);
}

.pagy a:not(.gap):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-50) / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}

.pagy a:not(.gap):where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.pagy a:not(.gap):hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.pagy a:not(.gap) {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}


.dark .pagy a:not(.gap),
[data-theme="dark"] .pagy a:not(.gap) {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.pagy a:not(.gap):hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.pagy a:not(.gap):active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}


[data-skin] .pagy a:not(.gap) {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .pagy a:not(.gap),
[data-skin] a.pagy a:not(.gap),
[data-skin] .pagy a:not(.gap):hover,
[data-skin] a.pagy a:not(.gap):hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}


[data-skin] .pagy a:not(.gap):hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}


[data-skin] .pagy a:not(.gap):active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}


[data-skin] .pagy a:not(.gap):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


[data-skin] .pagy a:not(.gap):focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}


[data-skin] .pagy a:not(.gap).button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

.\!pagy a:not(.gap):not([href]) {
  /* disabled links (aka: the current page) */
}

.pagy a:not(.gap):not([href]) {
  /* disabled links (aka: the current page) */
}

.\!pagy a:not(.gap):not([href]) {
  background-color: var(--primary-500);
  --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);
}

.\!pagy a:not(.gap):not([href]):hover {
  background-color: var(--primary-600);
  --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-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}

.\!pagy a:not(.gap):not([href]):where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 1);
}

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

form.button_to input[type=submit].\!pagy a:not(.gap):not([href]) {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].\!pagy a:not(.gap):not([href]):hover {
  background-color: var(--primary-600);
}

.\!pagy a:not(.gap):not([href]) {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}

.dark .\!pagy a:not(.gap):not([href]),
[data-theme="dark"] .\!pagy a:not(.gap):not([href]) {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.\!pagy a:not(.gap):not([href]):hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.\!pagy a:not(.gap):not([href]):active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}

.\!pagy a:not(.gap):not([href]).button-smaller {
  box-shadow: var(--unskinned-btn-shadow-flat);
}

[data-skin] .\!pagy a:not(.gap):not([href]) {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .\!pagy a:not(.gap):not([href]),
[data-skin] a.\!pagy a:not(.gap):not([href]),
[data-skin] .\!pagy a:not(.gap):not([href]):hover,
[data-skin] a.\!pagy a:not(.gap):not([href]):hover {
  background: var(--m, var(--brand));
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--m, var(--brand)) 100%, black 18%);
}

[data-skin] .\!pagy a:not(.gap):not([href]):hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .\!pagy a:not(.gap):not([href]):active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

[data-skin] .\!pagy a:not(.gap):not([href]):disabled,
[data-skin] .\!pagy a:not(.gap):not([href])[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

[data-skin] .\!pagy a:not(.gap):not([href]):focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}

[data-skin] .\!pagy a:not(.gap):not([href]).secondary,
[data-skin] a.\!pagy a:not(.gap):not([href]).secondary,
[data-skin] .\!pagy a:not(.gap):not([href]).secondary:hover,
[data-skin] a.\!pagy a:not(.gap):not([href]).secondary:hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

[data-skin] .\!pagy a:not(.gap):not([href]).ghost,
[data-skin] a.\!pagy a:not(.gap):not([href]).ghost,
[data-skin] .\!pagy a:not(.gap):not([href]).ghost:hover,
[data-skin] a.\!pagy a:not(.gap):not([href]).ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

[data-skin] .\!pagy a:not(.gap):not([href]).ghost:hover {
  background: var(--paper-2);
  border-color: var(--edge);
  transform: none;
}

[data-skin] .\!pagy a:not(.gap):not([href]).danger,
[data-skin] a.\!pagy a:not(.gap):not([href]).danger,
[data-skin] .\!pagy a:not(.gap):not([href]).danger:hover,
[data-skin] a.\!pagy a:not(.gap):not([href]).danger:hover {
  background: var(--danger);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--danger) 100%, black 18%);
}

[data-skin] .\!pagy a:not(.gap):not([href]).button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

.pagy a:not(.gap):not([href]) {
  background-color: var(--primary-500);
  --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);
}

.pagy a:not(.gap):not([href]):hover {
  background-color: var(--primary-600);
  --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-color: var(--primary-600);
  --tw-ring-offset-width: 2px;
}

.pagy a:not(.gap):not([href]):where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 1);
}

.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: .81rem;
}

form.button_to input[type=submit].pagy a:not(.gap):not([href]) {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].pagy a:not(.gap):not([href]):hover {
  background-color: var(--primary-600);
}

.pagy a:not(.gap):not([href]) {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}

.dark .pagy a:not(.gap):not([href]),
[data-theme="dark"] .pagy a:not(.gap):not([href]) {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.pagy a:not(.gap):not([href]):hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.pagy a:not(.gap):not([href]):active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}

.pagy a:not(.gap):not([href]).button-smaller {
  box-shadow: var(--unskinned-btn-shadow-flat);
}

[data-skin] .pagy a:not(.gap):not([href]) {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .pagy a:not(.gap):not([href]),
[data-skin] a.pagy a:not(.gap):not([href]),
[data-skin] .pagy a:not(.gap):not([href]):hover,
[data-skin] a.pagy a:not(.gap):not([href]):hover {
  background: var(--m, var(--brand));
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--m, var(--brand)) 100%, black 18%);
}

[data-skin] .pagy a:not(.gap):not([href]):hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .pagy a:not(.gap):not([href]):active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

[data-skin] .pagy a:not(.gap):not([href]):disabled,
[data-skin] .pagy a:not(.gap):not([href])[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

[data-skin] .pagy a:not(.gap):not([href]):focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}

[data-skin] .pagy a:not(.gap):not([href]).secondary,
[data-skin] a.pagy a:not(.gap):not([href]).secondary,
[data-skin] .pagy a:not(.gap):not([href]).secondary:hover,
[data-skin] a.pagy a:not(.gap):not([href]).secondary:hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

[data-skin] .pagy a:not(.gap):not([href]).ghost,
[data-skin] a.pagy a:not(.gap):not([href]).ghost,
[data-skin] .pagy a:not(.gap):not([href]).ghost:hover,
[data-skin] a.pagy a:not(.gap):not([href]).ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

[data-skin] .pagy a:not(.gap):not([href]).ghost:hover {
  background: var(--paper-2);
  border-color: var(--edge);
  transform: none;
}

[data-skin] .pagy a:not(.gap):not([href]).danger,
[data-skin] a.pagy a:not(.gap):not([href]).danger,
[data-skin] .pagy a:not(.gap):not([href]).danger:hover,
[data-skin] a.pagy a:not(.gap):not([href]).danger:hover {
  background: var(--danger);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--danger) 100%, black 18%);
}

[data-skin] .pagy a:not(.gap):not([href]).button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

.\!pagy a:not(.gap):not([href]):not([aria-current]){
  /* the prev link when on first page, next link when on last page */
}

.pagy a:not(.gap):not([href]):not([aria-current]){
  /* the prev link when on first page, next link when on last page */
}

.\!pagy a:not(.gap):not([href]):not([aria-current]) {
  display: none;
}

.app-user-card__menu.\!pagy a:not(.gap):not([href]):not([aria-current]) {
  display: none;
}

.pagy a:not(.gap):not([href]):not([aria-current]) {
  display: none;
}

.app-user-card__menu.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;
}

.sortable-active-dropzone {
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-400) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.sortable-active-dropzone:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.sortable-active-item {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 1;
  --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);
}

.sortable-active-item > * {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 1;
}

.sortable-active-item:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.sortable-active-item > *:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.sortable-drop-target {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: #6b7280;
  --tw-shadow: var(--tw-shadow-colored);
}

.sortable-drop-target > * {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  opacity: 0;
}

.sortable-drop-target:hover {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sortable-drop-target:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
  --tw-shadow-color: #000;
  --tw-shadow: var(--tw-shadow-colored);
}

.sortable-drop-target > *:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
}

.bulk-action-unavailable {
  display: none !important;
}

.app-user-card__menu.bulk-action-unavailable {
  display: none !important;
}

.bulk-actions-selectable-item-checkbox-wrapper {
  display: none;
}

.app-user-card__menu.bulk-actions-selectable-item-checkbox-wrapper {
  display: none;
}

.bulk-actions .bulk-actions-checkbox-cell {
  width: 1rem;
  padding-right: 0px;
}

.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle {
  display: none;
}

.app-user-card__menu.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle {
  display: none;
}

.bulk-actions:not(.selectable) td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2) {
  padding-left: 1.25rem;
}

.bulk-actions:not(.selectable) .box-table td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2) {
  padding-left: 2rem;
}

.bulk-actions.selectable-available:not(.selectable) .bulk-action {
  display: none;
}

.app-user-card__menu.bulk-actions.selectable-available:not(.selectable) .bulk-action {
  display: none;
}

.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell {
  display: none;
}

.app-user-card__menu.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell {
  display: none;
}

.bulk-actions.selectable .bulk-action-single {
  display: none;
}

.app-user-card__menu.bulk-actions.selectable .bulk-action-single {
  display: none;
}

.date-input .single-daterange {
  border-radius: 0.375rem;
  font-size: 1rem;
  line-height: 1.5rem;
  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);
}

.date-input .single-daterange:focus {
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}

@media (min-width: 768px) {
  .date-input .single-daterange {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  border-radius: 0.375rem;
  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);
}

.daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus {
  --tw-ring-color: var(--primary-500);
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-300) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus {
  border-color: var(--primary-500) !important;
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  -moz-text-align-last: center;
       text-align-last: center;
}

.daterangepicker .calendar-table .active {
  background-color: var(--primary-500) !important;
}

.select2-container {
  width: 100%;
}

.select2-border {
  border-color: var(--primary-500) !important;
  box-shadow: inset 0 0 0 1px var(--primary-500) !important;
  outline: 0 !important;
}

.select2-selection--single,
  .select2-selection--multiple {
  height: 38px !important;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / var(--tw-border-opacity, 1));
  border-radius: 0.375rem !important;
  padding-top: 0px !important;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 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;
}

.select2-selection--single:focus, .select2-selection--multiple:focus {
  --tw-ring-color: var(--primary-500) !important;
}

.select2-selection--single.focus-visible, .select2-selection--multiple.focus-visible {
  border-color: var(--primary-500) !important;
  box-shadow: inset 0 0 0 1px var(--primary-500) !important;
  outline: 0 !important;
}

.select2-selection--single:focus, .select2-selection--multiple:focus {
  outline: 0 !important;
}

.select2-selection--single .select2-selection__arrow, .select2-selection--multiple .select2-selection__arrow {
  height: 34px !important;
}

.select2-selection--single .select2-selection__rendered, .select2-selection--multiple .select2-selection__rendered {
  padding-left: 0.75rem !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--base-500) / var(--tw-text-opacity, 1)) !important;
  line-height: 35px !important;
}

.select2-selection--multiple .select2-selection__choice {
  margin-top: 6px !important;
  line-height: 22px !important;
}

.select2-container--open .select2-selection--single, .select2-container--open .select2-selection--multiple, .select2-container--focus .select2-selection--single, .select2-container--focus .select2-selection--multiple {
  border-color: var(--primary-500) !important;
  box-shadow: inset 0 0 0 1px var(--primary-500) !important;
  outline: 0 !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
  .select2-container--default.select2-container--disabled .select2-selection--multiple {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-200) / var(--tw-bg-opacity, 1));
}

.select2-container--default.select2-container--disabled .select2-selection--single:hover,
  .select2-container--default.select2-container--disabled .select2-selection--multiple:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-200) / var(--tw-bg-opacity, 1));
}

.select2-container--default.select2-container--disabled .select2-selection--single:where(.dark, .dark *),
  .select2-container--default.select2-container--disabled .select2-selection--multiple:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.select2-container--default.select2-container--disabled .select2-selection--single:where(.dark, .dark *):hover,
  .select2-container--default.select2-container--disabled .select2-selection--multiple:where(.dark, .dark *):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.select2-container .select2-dropdown {
  overflow: hidden !important;
  border-width: 2px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-300) / var(--tw-border-opacity, 1)) !important;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  border-color: var(--primary-500) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--primary-500) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.select2-search__field {
  border-radius: 0.375rem;
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-300) / var(--tw-border-opacity, 1)) !important;
}

.select2-search__field:focus {
  border-color: var(--primary-500) !important;
  --tw-ring-color: var(--primary-500) !important;
}

/* FullCalendar Buttons themed with the app's primary color */

.fc .fc-button {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--primary-400);
  --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.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--primary-700);
}

.fc .fc-button:hover {
  background-color: var(--primary-50);
}

.fc .fc-button:focus-visible {
  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-color: var(--primary-500);
  --tw-ring-offset-width: 2px;
}

.fc .fc-button:active {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.fc .fc-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Selected/active buttons use solid primary */

.fc .fc-button.fc-button-active,
  .fc .fc-button[aria-pressed="true"] {
  border-color: var(--primary-600) !important;
  background-color: var(--primary-600) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.fc .fc-button.fc-button-active:hover,
  .fc .fc-button[aria-pressed="true"]:hover {
  background-color: var(--primary-700) !important;
}

/* Disabled button explicit style */

.fc .fc-button:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-200) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-100) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

/* Today button when disabled: darker text for readability */

.fc .fc-today-button:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--base-600) / var(--tw-text-opacity, 1));
}

/* Today button uses neutral outline style */

.fc .fc-today-button {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / 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(var(--base-700) / var(--tw-text-opacity, 1));
}

.fc .fc-today-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-50) / var(--tw-bg-opacity, 1));
}

/* Grouped buttons (Prev/Next/Today) clean radii */

.fc .fc-button-group .fc-button {
  border-radius: 0px;
}

.fc .fc-button-group .fc-button:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.fc .fc-button-group .fc-button:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Ensure borders use our CSS variables regardless of FC's defaults */

.fc .fc-button,
  .fc .fc-button-primary {
  border-color: var(--fc-button-border-color) !important;
}

.fc .fc-button.fc-button-active,
  .fc .fc-button[aria-pressed="true"] {
  border-color: var(--fc-button-active-border-color) !important;
}

/* Remove ring offset inside tightly grouped buttons */

.fc .fc-button-group .fc-button:focus-visible {
  --tw-ring-offset-width: 0px;
}

/* Dark mode button styling */

.dark .fc .fc-button {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.dark .fc .fc-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark .fc .fc-button:focus-visible {
  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-color: var(--primary-500);
  --tw-ring-offset-width: 0px;
}

.dark .fc .fc-button.fc-button-active,
  .dark .fc .fc-button[aria-pressed="true"] {
  border-color: var(--primary-600);
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .fc .fc-button.fc-button-active:hover,
  .dark .fc .fc-button[aria-pressed="true"]:hover {
  background-color: var(--primary-700);
}

.dark .fc .fc-today-button {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-700) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.dark .fc .fc-today-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark .fc .fc-button:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.dark .fc .fc-button-group .fc-button:focus {
  --tw-ring-offset-width: 0px;
}

.dark .fc .fc-today-button:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.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 {
  inset: 0px;
}

.inset-1 {
  inset: 0.25rem;
}

.inset-2 {
  inset: 0.5rem;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-0\.5 {
  bottom: -0.125rem;
}

.-bottom-4 {
  bottom: -1rem;
}

.-bottom-8 {
  bottom: -2rem;
}

.-left-4 {
  left: -1rem;
}

.-left-8 {
  left: -2rem;
}

.-left-\[9999px\] {
  left: -9999px;
}

.-right-0\.5 {
  right: -0.125rem;
}

.-right-1 {
  right: -0.25rem;
}

.-right-2 {
  right: -0.5rem;
}

.-right-4 {
  right: -1rem;
}

.-right-8 {
  right: -2rem;
}

.-top-0 {
  top: -0px;
}

.-top-1 {
  top: -0.25rem;
}

.-top-2 {
  top: -0.5rem;
}

.-top-3 {
  top: -0.75rem;
}

.-top-4 {
  top: -1rem;
}

.-top-8 {
  top: -2rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-0\.5 {
  bottom: 0.125rem;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-52 {
  bottom: 13rem;
}

.bottom-\[calc\(100\%\+10px\)\] {
  bottom: calc(100% + 10px);
}

.left-0 {
  left: 0px;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-1 {
  left: 0.25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-10 {
  left: 2.5rem;
}

.left-2 {
  left: 0.5rem;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-4 {
  left: 1rem;
}

.left-\[16\.66\%\] {
  left: 16.66%;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-10 {
  right: 2.5rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.right-\[16\.66\%\] {
  right: 16.66%;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-20 {
  top: 5rem;
}

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.top-\[calc\(4rem\+env\(safe-area-inset-top\)\)\] {
  top: calc(4rem + env(safe-area-inset-top));
}

.isolate {
  isolation: isolate;
}

.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-\[\.\.\] {
  z-index: ..;
}

.z-\[1000\] {
  z-index: 1000;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[30\] {
  z-index: 30;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[70\] {
  z-index: 70;
}

.z-\[80\] {
  z-index: 80;
}

.z-\[N\] {
  z-index: N;
}

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

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

.row-span-2 {
  grid-row: span 2 / span 2;
}

.float-right {
  float: right;
}

.-m-2 {
  margin: -0.5rem;
}

.m-0 {
  margin: 0px;
}

.m-2 {
  margin: 0.5rem;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-auto {
  margin: auto;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.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-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mb-1 {
  margin-bottom: -0.25rem;
}

.-mb-1\.5 {
  margin-bottom: -0.375rem;
}

.-mb-5 {
  margin-bottom: -1.25rem;
}

.-mb-6 {
  margin-bottom: -1.5rem;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-ml-10 {
  margin-left: -2.5rem;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-ml-3\.5 {
  margin-left: -0.875rem;
}

.-ml-5 {
  margin-left: -1.25rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.-mt-0\.5 {
  margin-top: -0.125rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-10 {
  margin-top: -2.5rem;
}

.-mt-14 {
  margin-top: -3.5rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.-mt-3 {
  margin-top: -0.75rem;
}

.-mt-4 {
  margin-top: -1rem;
}

.-mt-5 {
  margin-top: -1.25rem;
}

.-mt-6 {
  margin-top: -1.5rem;
}

.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-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0 {
  margin-left: 0px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.ml-12 {
  margin-left: 3rem;
}

.ml-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-auto {
  margin-left: auto;
}

.mr-0 {
  margin-right: 0px;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mr-12 {
  margin-right: 3rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-auto {
  margin-right: auto;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[5px\] {
  margin-top: 5px;
}

.mt-\[7px\] {
  margin-top: 7px;
}

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

.box-border {
  box-sizing: border-box;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}

.aspect-\[74\/105\] {
  aspect-ratio: 74/105;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.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-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-44 {
  height: 11rem;
}

.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-9 {
  height: 2.25rem;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[26px\] {
  height: 26px;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[calc\(100dvh-12rem\)\] {
  height: calc(100dvh - 12rem);
}

.h-\[calc\(100dvh-15rem\)\] {
  height: calc(100dvh - 15rem);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.max-h-\[500px\] {
  max-height: 500px;
}

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

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

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

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

.min-h-32 {
  min-height: 8rem;
}

.min-h-\[1\.25rem\] {
  min-height: 1.25rem;
}

.min-h-\[1\.5rem\] {
  min-height: 1.5rem;
}

.min-h-\[12rem\] {
  min-height: 12rem;
}

.min-h-\[150px\] {
  min-height: 150px;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[2rem\] {
  min-height: 2rem;
}

.min-h-\[48px\] {
  min-height: 48px;
}

.min-h-\[500px\] {
  min-height: 500px;
}

.min-h-\[60px\] {
  min-height: 60px;
}

.min-h-\[6rem\] {
  min-height: 6rem;
}

.min-h-\[var\(--touch-lg\)\] {
  min-height: var(--touch-lg);
}

.min-h-dvh {
  min-height: 100dvh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/5 {
  width: 20%;
}

.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-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[250px\] {
  width: 250px;
}

.w-\[26px\] {
  width: 26px;
}

.w-\[570px\] {
  width: 570px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

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

.min-w-\[24px\] {
  min-width: 24px;
}

.min-w-\[26px\] {
  min-width: 26px;
}

.min-w-full {
  min-width: 100%;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

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

.max-w-3xl {
  max-width: 48rem;
}

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

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

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

.max-w-\[1180px\] {
  max-width: 1180px;
}

.max-w-\[1400px\] {
  max-width: 1400px;
}

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

.max-w-\[48ch\] {
  max-width: 48ch;
}

.max-w-\[52ch\] {
  max-width: 52ch;
}

.max-w-\[80\%\] {
  max-width: 80%;
}

.max-w-\[85\%\] {
  max-width: 85%;
}

.max-w-\[min\(250px\2c 80vw\)\] {
  max-width: min(250px,80vw);
}

.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-screen-md {
  max-width: 768px;
}

.max-w-screen-xl {
  max-width: 1280px;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

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

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-20 {
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-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-5 {
  --tw-translate-y: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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));
}

.transform-none {
  transform: none;
}

@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 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-default {
  cursor: default;
}

.cursor-grab {
  cursor: grab;
}

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

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.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 {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.columns-\[var\(--column-width\2c _15ch\)_3\] {
  -moz-columns: var(--column-width, 15ch) 3;
       columns: var(--column-width, 15ch) 3;
}

.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-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

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

.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}

.grid-cols-\[60px_1fr_1fr_1fr\] {
  grid-template-columns: 60px 1fr 1fr 1fr;
}

.grid-cols-\[max-content_1fr\] {
  grid-template-columns: max-content 1fr;
}

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

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.place-content-center {
  place-content: center;
}

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

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

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

.-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-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-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-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-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-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}

.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
}

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

.divide-base-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--base-100) / var(--tw-divide-opacity, 1));
}

.divide-base-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--base-200) / var(--tw-divide-opacity, 1));
}

.divide-base-900\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--base-900) / 0.05);
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--base-200) / var(--tw-divide-opacity, 1));
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-wrap {
  text-wrap: wrap;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[5px\] {
  border-radius: 5px;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

.rounded-\[var\(--r\)\] {
  border-radius: var(--r);
}

.rounded-\[var\(--r-lg\)\] {
  border-radius: var(--r-lg);
}

.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-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-bl-lg {
  border-bottom-left-radius: 0.5rem;
}

.rounded-bl-none {
  border-bottom-left-radius: 0px;
}

.rounded-br-lg {
  border-bottom-right-radius: 0.5rem;
}

.rounded-br-none {
  border-bottom-right-radius: 0px;
}

.rounded-tl-lg {
  border-top-left-radius: 0.5rem;
}

.rounded-tl-md {
  border-top-left-radius: 0.375rem;
}

.rounded-tr-lg {
  border-top-right-radius: 0.5rem;
}

.rounded-tr-md {
  border-top-right-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-\[length\:var\(--bw\)\] {
  border-width: var(--bw);
}

.border-\[length\:var\(--bw-strong\)\] {
  border-width: var(--bw-strong);
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-r-2 {
  border-right-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-t-\[length\:var\(--bw\)\] {
  border-top-width: var(--bw);
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-\[color\:var\(--bento-card-border\)\] {
  border-color: var(--bento-card-border);
}

.border-\[color\:var\(--edge\)\] {
  border-color: var(--edge);
}

.border-\[color\:var\(--edge-ink\)\] {
  border-color: var(--edge-ink);
}

.border-\[color\:var\(--ink\)\] {
  border-color: var(--ink);
}

.border-\[color\:var\(--paper-card\)\] {
  border-color: var(--paper-card);
}

.border-\[var\(--edge\)\] {
  border-color: var(--edge);
}

.border-\[var\(--paper-card\)\] {
  border-color: var(--paper-card);
}

.border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-200\/50 {
  border-color: rgb(253 230 138 / 0.5);
}

.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-50 {
  --tw-border-opacity: 1;
  border-color: rgb(255 251 235 / var(--tw-border-opacity, 1));
}

.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}

.border-amber-700 {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.border-amber-900 {
  --tw-border-opacity: 1;
  border-color: rgb(120 53 15 / var(--tw-border-opacity, 1));
}

.border-base-100 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-100) / var(--tw-border-opacity, 1));
}

.border-base-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-200) / var(--tw-border-opacity, 1));
}

.border-base-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / var(--tw-border-opacity, 1));
}

.border-base-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-400) / var(--tw-border-opacity, 1));
}

.border-base-900 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / 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-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-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-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-800 {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / 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-600 {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}

.border-lime-200 {
  --tw-border-opacity: 1;
  border-color: rgb(217 249 157 / var(--tw-border-opacity, 1));
}

.border-orange-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-pink-600 {
  --tw-border-opacity: 1;
  border-color: rgb(219 39 119 / var(--tw-border-opacity, 1));
}

.border-primary-200 {
  border-color: var(--primary-200);
}

.border-primary-300 {
  border-color: var(--primary-300);
}

.border-primary-400 {
  border-color: var(--primary-400);
}

.border-primary-500 {
  border-color: var(--primary-500);
}

.border-primary-600 {
  border-color: var(--primary-600);
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.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-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}

.border-sky-200 {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}

.border-sky-600 {
  --tw-border-opacity: 1;
  border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-200) / var(--tw-border-opacity, 1));
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-300) / var(--tw-border-opacity, 1));
}

.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
}

.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-700) / var(--tw-border-opacity, 1));
}

.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
}

.border-stone-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.border-stone-300 {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / 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-violet-600 {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
}

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

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

.border-yellow-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 249 195 / 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-l-primary-500 {
  border-left-color: var(--primary-500);
}

.bg-\[color\:--code-editor-background\] {
  background-color: var(--code-editor-background);
}

.bg-\[color\:var\(--bento-card-bg\)\] {
  background-color: var(--bento-card-bg);
}

.bg-\[var\(--brand\)\] {
  background-color: var(--brand);
}

.bg-\[var\(--brand-tint\)\] {
  background-color: var(--brand-tint);
}

.bg-\[var\(--m-border\)\] {
  background-color: var(--m-border);
}

.bg-\[var\(--m-tint\)\] {
  background-color: var(--m-tint);
}

.bg-\[var\(--paper\)\] {
  background-color: var(--paper);
}

.bg-\[var\(--paper-2\)\] {
  background-color: var(--paper-2);
}

.bg-\[var\(--paper-card\)\] {
  background-color: var(--paper-card);
}

.bg-\[var\(--paper-sunk\)\] {
  background-color: var(--paper-sunk);
}

.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-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-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.bg-amber-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}

.bg-base-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-100) / var(--tw-bg-opacity, 1));
}

.bg-base-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-200) / var(--tw-bg-opacity, 1));
}

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

.bg-base-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-300) / var(--tw-bg-opacity, 1));
}

.bg-base-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-400) / var(--tw-bg-opacity, 1));
}

.bg-base-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-50) / var(--tw-bg-opacity, 1));
}

.bg-base-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.bg-base-600\/50 {
  background-color: rgb(var(--base-600) / 0.5);
}

.bg-base-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.bg-base-700\/50 {
  background-color: rgb(var(--base-700) / 0.5);
}

.bg-base-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.bg-base-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
}

.bg-base-900\/50 {
  background-color: rgb(var(--base-900) / 0.5);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.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-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-current {
  background-color: currentColor;
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-emerald-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-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 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-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.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-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(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-pink-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 39 119 / var(--tw-bg-opacity, 1));
}

.bg-primary-100 {
  background-color: var(--primary-100);
}

.bg-primary-200 {
  background-color: var(--primary-200);
}

.bg-primary-300 {
  background-color: var(--primary-300);
}

.bg-primary-400 {
  background-color: var(--primary-400);
}

.bg-primary-50 {
  background-color: var(--primary-50);
}

.bg-primary-500 {
  background-color: var(--primary-500);
}

.bg-primary-600 {
  background-color: var(--primary-600);
}

.bg-primary-700 {
  background-color: var(--primary-700);
}

.bg-primary-900 {
  background-color: var(--primary-900);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 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-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}

.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}

.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.bg-sky-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(186 230 253 / var(--tw-bg-opacity, 1));
}

.bg-sky-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-100) / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-300) / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-50) / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
}

.bg-slate-900\/50 {
  background-color: rgb(var(--base-900) / 0.5);
}

.bg-stone-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
}

.bg-stone-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.bg-stone-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
}

.bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

.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-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

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

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

.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / 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-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.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-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-none {
  background-image: none;
}

.from-amber-100 {
  --tw-gradient-from: #fef3c7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-200 {
  --tw-gradient-from: #fde68a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-50 {
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-700 {
  --tw-gradient-from: #b45309 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-base-50 {
  --tw-gradient-from: rgb(var(--base-50) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-50) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-base-800 {
  --tw-gradient-from: rgb(var(--base-800) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-800) / 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-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-emerald-100 {
  --tw-gradient-from: #d1fae5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(209 250 229 / 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-600 {
  --tw-gradient-from: #059669 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-100 {
  --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 231 255 / 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-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 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-100 {
  --tw-gradient-from: #ffedd5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-600 {
  --tw-gradient-from: #db2777 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-400 {
  --tw-gradient-from: var(--primary-400) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-500 {
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-700 {
  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-900 {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-100 {
  --tw-gradient-from: #f3e8ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-50 {
  --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary-200 {
  --tw-gradient-from: var(--secondary-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-sky-50 {
  --tw-gradient-from: #f0f9ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 249 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-sky-600 {
  --tw-gradient-from: #0284c7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 132 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-stone-50 {
  --tw-gradient-from: #fafaf9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 250 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-100 {
  --tw-gradient-from: #ede9fe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(237 233 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-400 {
  --tw-gradient-from: #a78bfa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-50 {
  --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-600 {
  --tw-gradient-from: #7c3aed var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(124 58 237 / 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-white\/70 {
  --tw-gradient-from: rgb(255 255 255 / 0.7) 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-100 {
  --tw-gradient-from: #fef9c3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 249 195 / 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);
}

.via-amber-50 {
  --tw-gradient-to: rgb(255 251 235 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fffbeb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-amber-800 {
  --tw-gradient-to: rgb(146 64 14 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #92400e var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-50 {
  --tw-gradient-to: rgb(239 246 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-cyan-50 {
  --tw-gradient-to: rgb(236 254 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ecfeff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-50 {
  --tw-gradient-to: rgb(255 247 237 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-pink-50 {
  --tw-gradient-to: rgb(253 242 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fdf2f8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-50 {
  --tw-gradient-to: rgb(250 245 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-600 {
  --tw-gradient-to: rgb(147 51 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-violet-50 {
  --tw-gradient-to: rgb(245 243 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f5f3ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-yellow-600 {
  --tw-gradient-to: rgb(202 138 4 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ca8a04 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-amber-100 {
  --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
}

.to-amber-200 {
  --tw-gradient-to: #fde68a var(--tw-gradient-to-position);
}

.to-amber-300 {
  --tw-gradient-to: #fcd34d var(--tw-gradient-to-position);
}

.to-amber-50 {
  --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);
}

.to-amber-700 {
  --tw-gradient-to: #b45309 var(--tw-gradient-to-position);
}

.to-amber-800 {
  --tw-gradient-to: #92400e var(--tw-gradient-to-position);
}

.to-amber-900 {
  --tw-gradient-to: #78350f var(--tw-gradient-to-position);
}

.to-base-100 {
  --tw-gradient-to: rgb(var(--base-100) / 1) var(--tw-gradient-to-position);
}

.to-base-900 {
  --tw-gradient-to: rgb(var(--base-900) / 1) var(--tw-gradient-to-position);
}

.to-blue-100 {
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-cyan-100 {
  --tw-gradient-to: #cffafe var(--tw-gradient-to-position);
}

.to-cyan-500 {
  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}

.to-emerald-100 {
  --tw-gradient-to: #d1fae5 var(--tw-gradient-to-position);
}

.to-fuchsia-100 {
  --tw-gradient-to: #fae8ff var(--tw-gradient-to-position);
}

.to-fuchsia-600 {
  --tw-gradient-to: #c026d3 var(--tw-gradient-to-position);
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}

.to-indigo-400 {
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-indigo-700 {
  --tw-gradient-to: #4338ca var(--tw-gradient-to-position);
}

.to-orange-100 {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}

.to-orange-200 {
  --tw-gradient-to: #fed7aa var(--tw-gradient-to-position);
}

.to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.to-orange-600 {
  --tw-gradient-to: #ea580c 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-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

.to-primary-400 {
  --tw-gradient-to: var(--primary-400) var(--tw-gradient-to-position);
}

.to-primary-500 {
  --tw-gradient-to: var(--primary-500) var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.to-primary-800 {
  --tw-gradient-to: var(--primary-800) var(--tw-gradient-to-position);
}

.to-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-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-purple-700 {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.to-sky-100 {
  --tw-gradient-to: #e0f2fe var(--tw-gradient-to-position);
}

.to-sky-50 {
  --tw-gradient-to: #f0f9ff var(--tw-gradient-to-position);
}

.to-teal-100 {
  --tw-gradient-to: #ccfbf1 var(--tw-gradient-to-position);
}

.to-teal-600 {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}

.to-teal-700 {
  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-violet-50 {
  --tw-gradient-to: #f5f3ff var(--tw-gradient-to-position);
}

.to-violet-500 {
  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
}

.to-violet-700 {
  --tw-gradient-to: #6d28d9 var(--tw-gradient-to-position);
}

.to-yellow-200 {
  --tw-gradient-to: #fef08a var(--tw-gradient-to-position);
}

.to-yellow-50 {
  --tw-gradient-to: #fefce8 var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.stroke-sky-500 {
  stroke: #0ea5e9;
}

.stroke-white {
  stroke: #fff;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

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

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.p-9 {
  padding: 2.25rem;
}

.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-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

.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-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-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.pl-1 {
  padding-left: 0.25rem;
}

.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-8 {
  padding-left: 2rem;
}

.pr-0 {
  padding-right: 0px;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-3\.5 {
  padding-right: 0.875rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-8 {
  padding-right: 2rem;
}

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

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

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

.pt-7 {
  padding-top: 1.75rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[calc\(env\(safe-area-inset-top\)\+1rem\)\] {
  padding-top: calc(env(safe-area-inset-top) + 1rem);
}

.pt-safe-top {
  padding-top: env(safe-area-inset-top);
}

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

.text-center {
  text-align: center;
}

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

.font-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

.text-2xs {
  font-size: 0.65rem;
  line-height: 0.9rem;
  letter-spacing: 1px;
}

.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-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-\[length\:var\(--t-h3\)\] {
  font-size: var(--t-h3);
}

.text-\[length\:var\(--t-sm\)\] {
  font-size: var(--t-sm);
}

.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: .81rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

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

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-\[0\.95\] {
  line-height: 0.95;
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.35\] {
  line-height: 1.35;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.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\.03em\] {
  letter-spacing: -0.03em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[color\:var\(--bento-accent\)\] {
  color: var(--bento-accent);
}

.text-\[color\:var\(--bento-text\)\] {
  color: var(--bento-text);
}

.text-\[color\:var\(--bento-text-secondary\)\] {
  color: var(--bento-text-secondary);
}

.text-\[var\(--brand-ink\)\] {
  color: var(--brand-ink);
}

.text-\[var\(--danger-ink\)\] {
  color: var(--danger-ink);
}

.text-\[var\(--ink\)\] {
  color: var(--ink);
}

.text-\[var\(--ink-2\)\] {
  color: var(--ink-2);
}

.text-\[var\(--ink-3\)\] {
  color: var(--ink-3);
}

.text-\[var\(--m-ink\)\] {
  color: var(--m-ink);
}

.text-\[var\(--ok-ink\)\] {
  color: var(--ok-ink);
}

.text-\[var\(--on-brand\)\] {
  color: var(--on-brand);
}

.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-base-100 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-100) / var(--tw-text-opacity, 1));
}

.text-base-200 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.text-base-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.text-base-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.text-base-50 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-50) / var(--tw-text-opacity, 1));
}

.text-base-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-500) / var(--tw-text-opacity, 1));
}

.text-base-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-600) / var(--tw-text-opacity, 1));
}

.text-base-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-700) / var(--tw-text-opacity, 1));
}

.text-base-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-800) / var(--tw-text-opacity, 1));
}

.text-base-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--base-900) / 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-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}

.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-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-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-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-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-pink-100 {
  --tw-text-opacity: 1;
  color: rgb(252 231 243 / var(--tw-text-opacity, 1));
}

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-pink-700 {
  --tw-text-opacity: 1;
  color: rgb(190 24 93 / var(--tw-text-opacity, 1));
}

.text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}

.text-primary-400 {
  color: var(--primary-400);
}

.text-primary-500 {
  color: var(--primary-500);
}

.text-primary-600 {
  color: var(--primary-600);
}

.text-primary-700 {
  color: var(--primary-700);
}

.text-primary-900 {
  color: var(--primary-900);
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-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-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-100 {
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}

.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}

.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / 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-300 {
  color: var(--secondary-300);
}

.text-secondary-500 {
  color: var(--secondary-500);
}

.text-secondary-700 {
  color: var(--secondary-700);
}

.text-sky-100 {
  --tw-text-opacity: 1;
  color: rgb(224 242 254 / var(--tw-text-opacity, 1));
}

.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}

.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}

.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

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

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

.text-stone-500 {
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity, 1));
}

.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}

.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}

.text-stone-900 {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}

.text-teal-100 {
  --tw-text-opacity: 1;
  color: rgb(204 251 241 / 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-transparent {
  color: transparent;
}

.text-violet-100 {
  --tw-text-opacity: 1;
  color: rgb(237 233 254 / var(--tw-text-opacity, 1));
}

.text-violet-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}

.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}

.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}

.text-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 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;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.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-85 {
  opacity: 0.85;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-\[0\.03\] {
  opacity: 0.03;
}

.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-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 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-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\(--lift-3\)\] {
  --tw-shadow-color: var(--lift-3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-base-900 {
  --tw-shadow-color: rgb(var(--base-900) / 1);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-gray-500 {
  --tw-shadow-color: #6b7280;
  --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-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-\[var\(--paper-card\)\] {
  --tw-ring-color: var(--paper-card);
}

.ring-base-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--base-100) / 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-green-600\/20 {
  --tw-ring-color: rgb(22 163 74 / 0.2);
}

.ring-pink-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity, 1));
}

.ring-primary-500 {
  --tw-ring-color: var(--primary-500);
}

.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.ring-transparent {
  --tw-ring-color: transparent;
}

.ring-violet-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity, 1));
}

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

.ring-yellow-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity, 1));
}

.ring-opacity-60 {
  --tw-ring-opacity: 0.6;
}

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

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px 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);
}

.invert {
  --tw-invert: invert(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);
}

.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-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-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.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;
  background-color: var(--primary-200);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.background-fade {
  position: absolute;
  top: 0px;
  transform: translate(-360px, 0px) rotate(-45deg);
  z-index: -1;
  background-color: var(--primary-400);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.medium-fade:before {
  right: -40px;
  top: -200px;
  width: 1000px;
  height: 600px;
}

.medium-fade {
  right: -800px;
  width: 800px;
  height: 600px;
}

.large-fade:before {
  right: -0px;
  top: -200px;
  width: 1500px;
  height: 800px;
}

.large-fade {
  right: -700px;
  width: 1000px;
  height: 800px;
}

.pricing-table-shadow {
  box-shadow: 0 2px 30px 0 rgba(54,88,206,0.2);
}

.pricing-page-background {
  background-image: linear-gradient(to bottom, #f8faff, #fff);
}

.brand-title {
  color: #047bf8;
  font-size: 2.99rem;
  margin: 30px 0px;
  margin-top: 10px;
  position: relative;
  letter-spacing: -0.025em;
  line-height: 120%;
  font-weight: 700;
}

.brand-description {
  color: #868686;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 200;
}

.text-light-gradient {
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-fill-color: rgba(0,0,0,0);
  background-attachment: scroll;
  background-clip: text;
  background-color: rgba(0,0,0,0);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.reveal {
  transition-property: opacity, transform;
  --tw-translate-y: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.reveal-from-left {
  --tw-translate-y: 0px;
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.reveal.in {
  transform: none;
  opacity: 1;
  transition-duration: 1000ms;
}

.space-y > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-x > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.gap-y {
  row-gap: 1.25rem;
}

.gap-x {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

[hidden] {
  display: none !important;
}

/**
     * Custom components
     **/

/* Color picker */

.dark .pcr-app {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark .pcr-app .pcr-interaction .pcr-result {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.dark .pcr-app .pcr-interaction .pcr-result:focus {
  box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 3px var(--primary-500);
}

/* Date range picker */

.dark .daterangepicker {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark .daterangepicker::before {
  border-bottom-color: rgb(var(--base-900) / 1);
}

.dark .daterangepicker::after {
  border-bottom-color: rgb(var(--base-800) / 1);
}

.dark .daterangepicker .calendar-table {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

/* navigation arrows */

.dark .daterangepicker .calendar-table .available span {
  border-color: var(--primary-500);
}

.dark .daterangepicker .calendar-table .\!available span {
  border-color: var(--primary-500);
}

/* Clear and Apply buttons wrapper */

.dark .daterangepicker .drp-buttons {
  border-top-color: rgb(var(--base-900) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.dark .daterangepicker th.available:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark .daterangepicker th.\!available:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark .daterangepicker td.off {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .daterangepicker td.available:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark .daterangepicker td.\!available:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark .daterangepicker .hourselect, .dark .daterangepicker .minuteselect, .dark .daterangepicker .ampmselect {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1)) !important;
}

/* Phone field */

.dark .iti__country-list {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

/* Select2 */

.dark .select2-container .select2-selection__rendered {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1)) !important;
}

.dark .select2-container .select2-dropdown {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.dark .select2-container .select2-search__field {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.dark .select2-container .select2-selection--multiple, .dark .select2-container .select2-selection--single {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.dark .select2-container .select2-selection--multiple:focus, .dark .select2-container .select2-selection--single:focus {
  --tw-ring-color: var(--primary-500) !important;
}

.dark .select2-container .select2-selection--multiple, .dark .select2-container .select2-selection--single {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

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

.dark .select2-container .select2-selection__choice {
  border-color: var(--primary-500) !important;
  background-color: var(--primary-500) !important;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .select2-container .select2-selection__choice .select2-selection__choice__remove {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

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

.dark .select2-container .select2-results__option {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

/* Trix Editor */

.dark trix-editor {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.dark trix-editor:focus, .dark trix-editor:active {
  border-color: var(--primary-500) !important;
}

.dark trix-toolbar {
  opacity: 0.5 !important;
}

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

.dark trix-toolbar .trix-button-group, .dark trix-toolbar .trix-button {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-400) / var(--tw-border-opacity, 1)) !important;
}

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

.dark trix-toolbar .trix-dialog {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / 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: rgb(var(--base-900) / 1) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.dark trix-toolbar .trix-dialog .trix-button--dialog {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark trix-toolbar .trix-dialog .trix-input--dialog {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark trix-toolbar .trix-dialog .trix-input--dialog:focus {
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}

.dark trix-toolbar .trix-dialog .trix-input--dialog:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.dark .tribute-container ul {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.dark .trix-dialogs {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.dark .trix-content a[href^="bullettrain://"] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-500) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* CKEditor */

.dark .ck {
  --ck-color-base-background: rgb(var(--base-800) / 1);
  --ck-color-base-border: rgb(var(--base-900) / 1);
  --ck-color-toolbar-background: rgb(var(--base-800) / 1);
  --ck-color-toolbar-border: rgb(var(--base-900) / 1);
  --ck-color-text: rgb(var(--base-300) / 1);
}

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

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

.\[--app-heading-ink\:\#fff\] {
  --app-heading-ink: #fff;
}

.\[--app-link-decoration\:none\] {
  --app-link-decoration: none;
}

.\[--app-link-hover-ink\:\#fff\] {
  --app-link-hover-ink: #fff;
}

.\[--app-link-hover-ink\:theme\(colors\.amber\.700\)\] {
  --app-link-hover-ink: #b45309;
}

.\[--app-link-hover-ink\:theme\(colors\.base\.900\)\] {
  --app-link-hover-ink: rgb(var(--base-900) / 1);
}

.\[--app-link-hover-ink\:theme\(colors\.blue\.700\)\] {
  --app-link-hover-ink: #1d4ed8;
}

.\[--app-link-hover-ink\:theme\(colors\.emerald\.700\)\] {
  --app-link-hover-ink: #047857;
}

.\[--app-link-hover-ink\:theme\(colors\.indigo\.600\)\] {
  --app-link-hover-ink: #4f46e5;
}

.\[--app-link-hover-ink\:theme\(colors\.indigo\.700\)\] {
  --app-link-hover-ink: #4338ca;
}

.\[--app-link-hover-ink\:theme\(colors\.indigo\.800\)\] {
  --app-link-hover-ink: #3730a3;
}

.\[--app-link-hover-ink\:theme\(colors\.sky\.600\)\] {
  --app-link-hover-ink: #0284c7;
}

.\[--app-link-hover-ink\:theme\(colors\.sky\.700\)\] {
  --app-link-hover-ink: #0369a1;
}

.\[--app-link-hover-ink\:theme\(colors\.sky\.900\)\] {
  --app-link-hover-ink: #0c4a6e;
}

.\[--app-link-hover-ink\:theme\(colors\.violet\.700\)\] {
  --app-link-hover-ink: #6d28d9;
}

.\[--app-link-hover-ink\:var\(--ink\)\] {
  --app-link-hover-ink: var(--ink);
}

.\[--app-link-hover-ink\:var\(--ink-2\)\] {
  --app-link-hover-ink: var(--ink-2);
}

.\[--app-link-hover-ink\:var\(--primary-600\)\] {
  --app-link-hover-ink: var(--primary-600);
}

.\[--app-link-hover-ink\:var\(--primary-700\)\] {
  --app-link-hover-ink: var(--primary-700);
}

.\[--app-link-ink\:\#fff\] {
  --app-link-ink: #fff;
}

.\[--app-link-ink\:rgb\(var\(--base-700\)\)\] {
  --app-link-ink: rgb(var(--base-700));
}

.\[--app-link-ink\:theme\(colors\.amber\.700\)\] {
  --app-link-ink: #b45309;
}

.\[--app-link-ink\:theme\(colors\.base\.900\)\] {
  --app-link-ink: rgb(var(--base-900) / 1);
}

.\[--app-link-ink\:theme\(colors\.blue\.700\)\] {
  --app-link-ink: #1d4ed8;
}

.\[--app-link-ink\:theme\(colors\.emerald\.700\)\] {
  --app-link-ink: #047857;
}

.\[--app-link-ink\:theme\(colors\.indigo\.600\)\] {
  --app-link-ink: #4f46e5;
}

.\[--app-link-ink\:theme\(colors\.indigo\.700\)\] {
  --app-link-ink: #4338ca;
}

.\[--app-link-ink\:theme\(colors\.sky\.600\)\] {
  --app-link-ink: #0284c7;
}

.\[--app-link-ink\:theme\(colors\.sky\.700\)\] {
  --app-link-ink: #0369a1;
}

.\[--app-link-ink\:theme\(colors\.violet\.700\)\] {
  --app-link-ink: #6d28d9;
}

.\[--app-link-ink\:var\(--ink\)\] {
  --app-link-ink: var(--ink);
}

.\[--app-link-ink\:var\(--ink-3\)\] {
  --app-link-ink: var(--ink-3);
}

.\[--app-link-ink\:var\(--primary-600\)\] {
  --app-link-ink: var(--primary-600);
}

.\[--app-link-ink\:var\(--primary-700\)\] {
  --app-link-ink: var(--primary-700);
}

.\[--code-editor-background\:theme\(\'colors\.base\.50\'\)\] {
  --code-editor-background: rgb(var(--base-50) / 1);
}

/* 
 * 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: rgb(var(--base-50) / 1);
  --primary-100: rgb(var(--base-100) / 1);
  --primary-200: rgb(var(--base-200) / 1);
  --primary-300: rgb(var(--base-300) / 1);
  --primary-400: rgb(var(--base-400) / 1);
  --primary-500: rgb(var(--base-500) / 1);
  --primary-600: rgb(var(--base-600) / 1);
  --primary-700: rgb(var(--base-700) / 1);
  --primary-800: rgb(var(--base-800) / 1);
  --primary-900: rgb(var(--base-900) / 1);
  --secondary-50: rgb(var(--base-50) / 1);
  --secondary-100: rgb(var(--base-100) / 1);
  --secondary-200: rgb(var(--base-200) / 1);
  --secondary-300: rgb(var(--base-300) / 1);
  --secondary-400: rgb(var(--base-400) / 1);
  --secondary-500: rgb(var(--base-500) / 1);
  --secondary-600: rgb(var(--base-600) / 1);
  --secondary-700: rgb(var(--base-700) / 1);
  --secondary-800: rgb(var(--base-800) / 1);
  --secondary-900: rgb(var(--base-900) / 1);
}

.theme-gray {
  --primary-50: rgb(var(--base-50) / 1);
  --primary-100: rgb(var(--base-100) / 1);
  --primary-200: rgb(var(--base-200) / 1);
  --primary-300: rgb(var(--base-300) / 1);
  --primary-400: rgb(var(--base-400) / 1);
  --primary-500: rgb(var(--base-500) / 1);
  --primary-600: rgb(var(--base-600) / 1);
  --primary-700: rgb(var(--base-700) / 1);
  --primary-800: rgb(var(--base-800) / 1);
  --primary-900: rgb(var(--base-900) / 1);
  --secondary-50: rgb(var(--base-50) / 1);
  --secondary-100: rgb(var(--base-100) / 1);
  --secondary-200: rgb(var(--base-200) / 1);
  --secondary-300: rgb(var(--base-300) / 1);
  --secondary-400: rgb(var(--base-400) / 1);
  --secondary-500: rgb(var(--base-500) / 1);
  --secondary-600: rgb(var(--base-600) / 1);
  --secondary-700: rgb(var(--base-700) / 1);
  --secondary-800: rgb(var(--base-800) / 1);
  --secondary-900: rgb(var(--base-900) / 1);
}

.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: #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;
  --secondary-50: #fff7ed;
  --secondary-100: #ffedd5;
  --secondary-200: #fed7aa;
  --secondary-300: #fdba74;
  --secondary-400: #fb923c;
  --secondary-500: #f97316;
  --secondary-600: #ea580c;
  --secondary-700: #c2410c;
  --secondary-800: #9a3412;
  --secondary-900: #7c2d12;
}

.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: rgb(var(--base-50) / 1);
  --secondary-100: rgb(var(--base-100) / 1);
  --secondary-200: rgb(var(--base-200) / 1);
  --secondary-300: rgb(var(--base-300) / 1);
  --secondary-400: rgb(var(--base-400) / 1);
  --secondary-500: rgb(var(--base-500) / 1);
  --secondary-600: rgb(var(--base-600) / 1);
  --secondary-700: rgb(var(--base-700) / 1);
  --secondary-800: rgb(var(--base-800) / 1);
  --secondary-900: rgb(var(--base-900) / 1);
}

.theme-secondary-gray {
  --secondary-50: rgb(var(--base-50) / 1);
  --secondary-100: rgb(var(--base-100) / 1);
  --secondary-200: rgb(var(--base-200) / 1);
  --secondary-300: rgb(var(--base-300) / 1);
  --secondary-400: rgb(var(--base-400) / 1);
  --secondary-500: rgb(var(--base-500) / 1);
  --secondary-600: rgb(var(--base-600) / 1);
  --secondary-700: rgb(var(--base-700) / 1);
  --secondary-800: rgb(var(--base-800) / 1);
  --secondary-900: rgb(var(--base-900) / 1);
}

.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: #fff7ed;
  --secondary-100: #ffedd5;
  --secondary-200: #fed7aa;
  --secondary-300: #fdba74;
  --secondary-400: #fb923c;
  --secondary-500: #f97316;
  --secondary-600: #ea580c;
  --secondary-700: #c2410c;
  --secondary-800: #9a3412;
  --secondary-900: #7c2d12;
}

.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);
  /* TODO: Will --tw-ring-opacity still be available in tailwindcss v4? */
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(3, 98, 198, var(--tw-ring-opacity));
}

.electron .electron-mobile-only, .todesktop .electron-mobile-only {
  display: block;
}

[data-badge-toggle-target="overlay"].electron .electron-mobile-only,[data-badge-toggle-target="overlay"] .todesktop .electron-mobile-only {
  display: block;
}

[data-skin] .btn.electron .electron-mobile-only,[data-skin] .btn .todesktop .electron-mobile-only {
  width: 100%;
}

@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(var(--base-300) / 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 {
  background-color: var(--primary-400) !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:where(.dark, .dark *) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / 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;
}

.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(var(--base-300) / 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(var(--base-200) / var(--tw-bg-opacity, 1));
}

trix-editor[disabled]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-200) / var(--tw-bg-opacity, 1));
}

trix-editor[disabled]:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

trix-editor[disabled]:where(.dark, .dark *):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / 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 */

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

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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;
}

.dark .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,transparent);
}

.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)
  }
}

/*
 * A (possibly) temporary fix for a weird interaction between Turbo and turn.js
 * https://github.com/bullet-train-co/bullet_train/issues/2214#issuecomment-3349556410
 */

.turn-view-transitions.turn-transition [data-turn-enter],
.turn-view-transitions.turn-before-transition [data-turn-enter] {
  opacity: 0;
}

/*
 * This mostly prevents sudden side-to-side jumping due to the addition of a scrollbar during transition.
 */

html.turn-advance:has(body.devise_layout){
  overflow: hidden;
}

/*
 * This disables the view transitions that turn automatically injects just by being present.
 */

@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
    opacity: 1 !important;
  }
}

#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 {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].button:hover {
  background-color: var(--primary-600);
}

/* hide the first breadcrumb chevron */

ol.breadcrumb li:first-child svg {
  display: none;
}

/* Override Turbo's progress bar color with the application's theme. */

.turbo-progress-bar {
  height: 5px;
  background-color: var(--primary-500);
}

/*
  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 component styles */

/* Badge toggle styles */

.badge-section-disabled {
  position: relative;
  opacity: 0.6;
}

/* Overlay styles */

[data-badge-toggle-target="overlay"] {
  cursor: not-allowed;
}

[data-badge-toggle-target="overlay"].block {
  display: block;
}

/* Badge message styles */

.badge-message {
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Dark mode support */

.dark .badge-message {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Touch Optimizations for Mobile Interactions */

/* ── Paper migration guard (SP-2 ruling R3, amended) ──────────────────────
   THREE blocks in this file overlap Paper's own control contract and outrank
   it: `.has-touch .btn` is (0,2,0) against Paper's
   `.btn { min-height: var(--touch-min) }` at (0,1,0), so on every touch device
   the 44px pin would win and Paper's 48px floor would never apply.

   The three are marked `R3 GUARD` below: the tap-target block, the `:active`
   scale block and the `:hover` transition-kill block. Each selector in them
   carries `:where(:not([data-skin] *))`, which stands them down inside skinned
   regions and leaves them untouched everywhere else.

   `:where()` contributes ZERO specificity, so behaviour outside skinned
   regions is bit-identical to before this guard existed.

   ── The fourth block is NOT guarded, and that is the amendment ────────────
   R3 as originally written also guarded `input/select/textarea
   { font-size: 16px }`, on a frozen invariant that read "no Paper form control
   drops below 16px — `.input`/`.textarea`/`.select` are `--t-body` = 17px".

   That invariant only holds for controls that CARRY a Paper class. SP-2 edits
   no views, so today zero controls carry one, and inside `[data-skin]` the
   only font-size floor for a form control is `[data-skin] .input, .textarea,
   .select`. Bare hand-written inputs fall through to Tailwind's `.text-sm`
   (0.875rem = 14px) and re-acquire iOS focus-zoom — e.g.
   `account/inbox/compose.html.erb` (`neu-input text-sm`),
   `account/team_messages/new.html.erb`, `account/projects/_members_panel.html.erb`.
   (Bullet-Train-scaffolded fields are unaffected: the theme's
   `fields/_field.html.erb` adds its own `text-base md:text-sm`.)

   Removing the guard costs nothing, because it never bought anything:
   `[data-skin] .input` is (0,2,0) and `.has-touch input` is (0,1,1), so Paper's
   17px already wins on any control that carries a Paper class. The guard only
   ever affected the bare controls it was hurting.

   Everything NOT marked is deliberately left alone — `.dropdown-item`,
   `.modal-content`, `.table-responsive`, momentum scrolling, checkbox sizing
   and nav padding do not overlap Paper.

   The floor that replaces the 44px pin inside skinned regions lives in
   `paper/tokens/base.css`. Do NOT raise these to 48px instead — that would
   visibly resize every button on every touch device today, including the
   carved-out games.
   ────────────────────────────────────────────────────────────────────────── */

/* Increase tap target sizes for touch devices — R3 GUARD */

.has-touch button:where(:not([data-skin] *)),
.has-touch .btn:where(:not([data-skin] *)),
.has-touch a.btn:where(:not([data-skin] *)),
.has-touch [role="button"]:where(:not([data-skin] *)),
.has-touch input[type="submit"]:where(:not([data-skin] *)),
.has-touch input[type="button"]:where(:not([data-skin] *)) {
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem 1rem;
}

/* Increase spacing between interactive elements */

.has-touch .button-group > *,
.has-touch .interactive-group > * {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Improve form controls for touch */

.has-touch input[type="checkbox"],
.has-touch input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}

/* Add active state styles for touch feedback — R3 GUARD */

.has-touch .btn:active:where(:not([data-skin] *)),
.has-touch [role="button"]:active:where(:not([data-skin] *)),
.has-touch a.interactive:active:where(:not([data-skin] *)) {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Remove hover effects on touch devices (they cause delay) — R3 GUARD */

.has-touch .btn:hover:where(:not([data-skin] *)),
.has-touch [role="button"]:hover:where(:not([data-skin] *)) {
  transition: none;
}

/* Improve scrolling experience */

.has-touch .scrollable {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Optimize dropdowns for touch */

.has-touch .dropdown-menu {
  padding: 0.5rem 0;
}

.has-touch .dropdown-item {
  padding: 0.75rem 1.25rem;
}

/* Optimize mobile forms — DELIBERATELY UNGUARDED, see the header note.
   This block keeps its authority INSIDE skinned regions too. */

.has-touch input,
.has-touch select,
.has-touch textarea {
  font-size: 16px;
  /* Prevents iOS zoom on focus */
}

/* Improve tap targets in navigation */

.has-touch .nav-link,
.has-touch .navbar-item {
  padding: 0.75rem 1rem;
}

/* Add pull-to-refresh indicator space */

.is-mobile .main-content {
  padding-top: 10px;
  /* Space for pull-to-refresh */
}

/* `.is-mobile .card-interactive` was deleted at SP-4 Task 9. It held this
   file's only hardcoded colour (a raw `rgba(0, 0, 0, 0.1)` shadow) and
   `.card-interactive` has ZERO consumers anywhere in the repository, so the
   rule could never match an element on any surface — including the carve-outs.
   Task 7 had already verified the R3 guard above, so the touch floor needed no
   change; this was the only outstanding item in this file. */

/* Improve mobile table interactions */

.is-mobile .table-responsive td,
.is-mobile .table-responsive th {
  padding: 0.75rem;
}

/* Optimize mobile modals */

.is-mobile .modal-content {
  border-radius: 1rem 1rem 0 0;
  margin-top: auto;
  margin-bottom: 0;
  max-height: 90vh;
}

/* Add momentum scrolling to all scrollable areas */

* {
  -webkit-overflow-scrolling: touch;
}

/* Fix for iOS 100vh issue */

.full-height {
  height: 100vh;
  height: -webkit-fill-available;
}

/* Prevent text selection on interactive elements */

.has-touch .no-select,
.has-touch .btn,
.has-touch [role="button"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

/* Responsive Media Optimizations for Mobile-First Design */

/* Base responsive image styles */

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

/* Responsive container for embedded content */

.responsive-embed {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

/* Common aspect ratios for embedded content */

.responsive-embed::before {
  display: block;
  content: "";
}

/* 16:9 aspect ratio */

.responsive-embed--16by9::before {
  padding-top: 56.25%;
}

/* 4:3 aspect ratio */

.responsive-embed--4by3::before {
  padding-top: 75%;
}

/* 1:1 aspect ratio (square) */

.responsive-embed--1by1::before {
  padding-top: 100%;
}

/* Position embedded content */

.responsive-embed iframe,
.responsive-embed embed,
.responsive-embed object,
.responsive-embed video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive background images */

.bg-responsive {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Mobile-specific optimizations */

@media (max-width: 767px) {
  /* Optimize image loading for mobile */

  img:not([loading]) {
    loading: lazy;
  }

  /* Prevent large images from causing layout shifts */

  img {
    aspect-ratio: attr(width) / attr(height);
  }

  /* Optimize image display on mobile */

  .mobile-optimized-image {
    width: 100%;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }

  /* Optimize video player controls for touch */

  video::-webkit-media-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
  }

  /* Improve tap targets for video controls */

  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-volume-slider,
  video::-webkit-media-controls-mute-button,
  video::-webkit-media-controls-fullscreen-button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Optimize image galleries for mobile */

  .image-gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
  }

  .image-gallery-item {
    flex: 0 0 85%;
    scroll-snap-align: center;
    margin-right: 1rem;
  }

  /* Optimize avatar images */

  .avatar-image {
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* Optimize hero images */

  .hero-image {
    height: 30vh;
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* Optimize card images */

  .card-image {
    height: 180px;
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* Improve image loading experience */

  .image-loading {
    background-color: #f3f4f6;
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0% {
      opacity: 0.6;
    }

    50% {
      opacity: 0.8;
    }

    100% {
      opacity: 0.6;
    }
  }
}

/* Optimize images for high-DPI screens */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bg-responsive {
    background-size: cover;
  }
}

/* Dark mode adjustments for images */

@media (prefers-color-scheme: dark) {
  .image-loading {
    background-color: #374151;
  }

  img.dark-mode-invert {
    filter: invert(0.85);
  }
}

/* Prevent layout shifts with image placeholders */

.image-placeholder {
  position: relative;
  overflow: hidden;
  background-color: #f3f4f6;
}

.image-placeholder::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}

.image-placeholder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Custom styles for form field components.
 *
 * ── SP-4 Task 9 ──────────────────────────────────────────────────────────
 * Both components in this file are applied at RUNTIME by
 * `app/javascript/support/form_components.js`, so neither class name is
 * grep-visible from markup. What that hides, measured at Task 9:
 *
 *   · `.datepicker-input` is added to EVERY `input[type="date"]` in the
 *     document (`form_components.js:35`), on every surface — the account
 *     tree, the Devise auth screens AND the Bento public profiles
 *     (`public/profile_pages/booking_page.html.erb:97`). It is live.
 *   · `.button-toggle-group` had ZERO markup consumers anywhere in the repo.
 *     SP-7 (T7 item 1) deleted the whole component on that finding — these
 *     rules, `initializeButtonToggles`, and the three skipped system tests in
 *     `test/system/form_components_test.rb`. Only `.datepicker-input` is left.
 *
 * That difference decided the shape of this file.
 *
 * ── Why the unscoped `.datepicker-input` block keeps its hardcoded hex ────
 * Because it is the ONLY thing styling the date control on surfaces Paper is
 * not allowed to touch. Bento profiles and the games hub are pixel-invariant
 * carve-outs; retokenizing the unscoped rule would repaint the booking page's
 * date field. So the legacy block stays byte-identical and a `[data-skin]`
 * block below gives the account surface the Paper treatment.
 *
 * ── The `[data-skin]` block AGREES with Paper, it does not compete ────────
 * `paper/tokens/components.css` (6c) declares a `.field`-scoped control
 * fallback at (0,2,0) — the rule that styles the date control the Bullet
 * Train scaffold renders through its `:field` content slot. This block is
 * also (0,2,0) and `components/*` imports BEFORE the Paper block, so inside a
 * `.field` the Paper fallback wins every tie. The values are therefore
 * written to be identical to it: same tokens, same geometry. The block earns
 * its place on date inputs that are NOT inside a scaffold `.field`.
 * Two sources of truth for one control is the collapse-them-later trap; one
 * source of truth with a documented tie-break is not.
 * ─────────────────────────────────────────────────────────────────────── */

/* Datepicker styles — UNSKINNED FALLBACK. Do not retokenize: see the header. */

.datepicker-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #d1d5db;
  border-width: 1px;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 100%;
  color: #111827;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.datepicker-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Datepicker on Paper — the account surface. Values deliberately mirror
   `paper/tokens/components.css` (6c) so the two agree wherever both apply. */

[data-skin] .datepicker-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--paper-card);
  border: var(--bw-strong) solid var(--edge-ink);
  border-radius: var(--r);
  padding: 0 var(--sp-4);
  min-height: var(--touch-min);
  outline: none;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* (0,2,1), so it also clears the `outline: 2px solid transparent` the
   unskinned rule above sets on focus. That outline is invisible, but it made
   a focused date control read as `outline-style: solid` to every computed
   -style probe in this program — see the "one measured exception" note in the
   SP-4 Task 5 ledger entry. The visible ring is the box-shadow, as everywhere
   else in Paper. */

[data-skin] .datepicker-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
  /* Re-declared, and it is load-bearing. `paper/tokens/base.css`'s global
     `:focus-visible` rule sets `border-radius: var(--r-sm)`, and it is
     (0,2,0) — the same weight as the rest state above, but `components/*`
     imports BEFORE the Paper block, so on a tie Paper wins and the corner
     jumped 12px → 8px the moment the control was keyboard-focused. Measured.
     Task 4 ruled the same question for `.input` and reached the opposite
     answer only because `tokens/components.css` happens to import AFTER
     `base.css`. This selector is (0,2,1), so restating `--r` here settles it
     by specificity rather than by import position. */
  border-radius: var(--r);
}

[data-skin] .datepicker-input::-moz-placeholder {
  color: var(--ink-3);
}

[data-skin] .datepicker-input::placeholder {
  color: var(--ink-3);
}

[data-skin] .datepicker-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-skin] .datepicker-input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* The button-toggle-group block that used to close this file is GONE — SP-7,
   T7 item 1. Its own comment said "if the JS driver is ever deleted, delete
   this block with it", and SP-7 deleted the driver. Re-proved zero markup
   consumers before removing either half: the class name appeared in exactly
   one non-comment place in the whole repo, the querySelector that looked for
   it, and in no view, helper, gem or node_modules package. Nothing rendered
   it, so nothing repaints. Do not re-add these rules without markup. */

/* Home page specific styles

   SP-5 Task 6 (2026-08-14) — THE .background-fade GRADIENT IS DELIBERATELY
   NOT RETOKENIZED. Two independent facts each rule it out, and both were
   measured rather than reasoned from the plan, which was wrong about the
   first one.

   1. THIS FILE IS NOT MARKETING-ONLY. Task 6 records that
      `.background-fade-container` "renders only on the signed-in /". It does
      not. It renders in NINE templates, and one of them is
      `public/cheritera/index.html.erb` line 1 — a game landing, and a
      permanent non-goal of the Paper migration. Public::CheriteraController
      does not declare a skin, so an UNSCOPED colour edit here would repaint a
      carved-out page, silently, with no test able to see it. The full list:
      public/home/index, public/home/about, public/timers/{index,show},
      public/use_cases/{index,personal,family,community,business}, and
      public/cheritera/index. Any future colour work in this file must be
      scoped under the skin attribute so the games branch keeps today's
      pixels; an unscoped rule is the leak.

   2. THE SECOND STOP HAS NO TOKEN TO TAKE. The wash sweeps blue-500 to
      purple-600 at 10% alpha under a 60px blur. Every hue Paper ships is the
      brand, a module family (tasks / shop / money / news / cal) or a status
      role, and the ONLY plum in the system is --cal, the Calendar family.
      Painting an ambient page wash with it would make marketing decoration a
      consumer of the module contract, so that re-hueing Calendar silently
      re-hues eight pages — precisely the laundering R6.4 forbids. Coining a
      neutral plum is inventing a token, which the program forbids outright.
      Tokenizing only the first stop would leave a gradient whose two ends
      drift apart at the next rebrand: worse than a coherent raw pair.

   So R3's decision procedure runs to step 6 and the wash keeps its hue, on
   the same footing as the pilot's raw emerald ticks. The nearest sibling is
   already consistent with that: `.hero-glow` in components/landing.css was
   ruled UNCHANGED at R2.

   The `.reveal*` block further down carries no colour, is shared with
   public/shatranj/games/index and public/cheritera/index (both non-goals),
   and is untouched — landmine 6. */

/* Background fade animation */

.background-fade-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.background-fade {
  position: absolute;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
  border-radius: 50%;
  filter: blur(60px);
  animation: float 20s ease-in-out infinite;
}

.background-fade.large-fade {
  width: 800px;
  height: 800px;
  top: -200px;
  right: -200px;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(30px, -50px) rotate(120deg);
  }

  66% {
    transform: translate(-20px, 20px) rotate(240deg);
  }
}

/* Scroll reveal animations */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.reveal-from-left {
  transform: translateX(-30px) translateY(0);
}

.reveal.reveal-from-right {
  transform: translateX(30px) translateY(0);
}

.reveal.reveal-from-top {
  transform: translateY(-30px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .background-fade.large-fade {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
  }
}

/* Bento Grid Layout System */

/* CSS Custom Properties for theming */

:root {
  --bento-bg: #f8fafc;
  --bento-profile-header-bg: transparent;
  --bento-accent: #6366f1;
  --bento-text: #1e293b;
  --bento-text-secondary: #64748b;
  --bento-card-bg: #ffffff;
  --bento-card-border: #e2e8f0;
  --bento-radius: 0.75rem;
  --bento-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --bento-gap: 1rem;
  --bento-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Bento Container — query container for the responsive bento grid.
   container-type: inline-size lets @container queries respond to the
   container's own width, which is what the editor's preview-at-breakpoint
   toggle relies on (it forces a width on .bento-preview-frame). */

.bento-container {
  width: 100%;
  max-width: 90rem;
  /* 1440px — bumped from 72rem so the Large (>=1280px) tier can activate */
  margin: 0 auto;
  padding: 1.5rem;
  font-family: var(--bento-font);
  container: bento / inline-size;
}

/* Bento Profile Wrapper with theme background */

.bento-profile {
  min-height: 100vh;
  background: var(--bento-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--bento-text);
}

/* The base theme underlines anchors on :hover/:active. Suppress it for links
   and buttons across the public profile so cards and action buttons stay clean. */

.bento-profile a:hover,
.bento-profile a:active,
.bento-profile a:focus,
.bento-profile button:hover,
.bento-profile button:active,
.bento-profile button:focus,
.bento-powered-footer__link:hover,
.bento-powered-footer__link:active,
.bento-powered-footer__link:focus {
  text-decoration: none;
}

/* Editing mode - embedded in account layout */

.bento-profile--editing {
  min-height: auto;
  background: transparent;
  border-radius: var(--bento-radius);
}

.bento-profile--editing .bento-container {
  padding: 0;
}

.bento-profile-gradient {
  background: linear-gradient(135deg, var(--bento-bg) 0%, color-mix(in srgb, var(--bento-bg) 80%, var(--bento-accent)) 100%);
}

/* Main Bento Grid — mobile-first, Small (2-col) is the default.
   Medium and Large activate via @container queries on .bento-container. */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
}

@container bento (min-width: 640px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bento-gap);
  }
}

@container bento (min-width: 1280px) {
  .bento-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* Bento Block Base */

.bento-block {
  background: var(--bento-card-bg);
  border: 1px solid var(--bento-card-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--bento-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.bento-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

/* Block interaction when clickable */

.bento-block--clickable {
  cursor: pointer;
}

.bento-block--clickable:active {
  transform: translateY(0);
  box-shadow: var(--bento-shadow);
}

/* Per-breakpoint span classes.
   The server emits all six classes per block; only one of each
   axis matches at any given container width. */

/* Small (default — applies at all container widths until a @container kicks in) */

.bento-w-s-1 {
  grid-column: span 1;
}

.bento-w-s-2 {
  grid-column: span 2;
}

.bento-h-s-1 {
  grid-row: span 1;
}

.bento-h-s-2 {
  grid-row: span 2;
}

.bento-h-s-3 {
  grid-row: span 3;
}

@container bento (min-width: 640px) {
  .bento-w-m-1 {
    grid-column: span 1;
  }

  .bento-w-m-2 {
    grid-column: span 2;
  }

  .bento-w-m-3 {
    grid-column: span 3;
  }

  .bento-w-m-4 {
    grid-column: span 4;
  }

  .bento-h-m-1 {
    grid-row: span 1;
  }

  .bento-h-m-2 {
    grid-row: span 2;
  }

  .bento-h-m-3 {
    grid-row: span 3;
  }
}

@container bento (min-width: 1280px) {
  .bento-w-l-1 {
    grid-column: span 1;
  }

  .bento-w-l-2 {
    grid-column: span 2;
  }

  .bento-w-l-3 {
    grid-column: span 3;
  }

  .bento-w-l-4 {
    grid-column: span 4;
  }

  .bento-w-l-5 {
    grid-column: span 5;
  }

  .bento-w-l-6 {
    grid-column: span 6;
  }

  .bento-w-l-7 {
    grid-column: span 7;
  }

  .bento-w-l-8 {
    grid-column: span 8;
  }

  .bento-h-l-1 {
    grid-row: span 1;
  }

  .bento-h-l-2 {
    grid-row: span 2;
  }

  .bento-h-l-3 {
    grid-row: span 3;
  }
}

/* Block Content Padding */

.bento-block__content {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bento-block__content--compact {
  padding: 1rem;
}

.bento-block__content--none {
  padding: 0;
}

/* Block Header */

.bento-block__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bento-block__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bento-accent) 10%, transparent);
  color: var(--bento-accent);
  flex-shrink: 0;
}

.bento-block__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bento-block__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bento-text);
  line-height: 1.3;
}

.bento-block__subtitle {
  font-size: 0.85rem;
  color: var(--bento-text-secondary);
  margin-top: 0.125rem;
}

/* Block Body */

.bento-block__body {
  flex: 1;
  font-size: 0.9rem;
  color: var(--bento-text-secondary);
  line-height: 1.6;
}

.bento-block__body p {
  margin: 0;
}

.bento-block__body p + p {
  margin-top: 0.75rem;
}

/* Profile Header Block */

#bento-profile-header {
  position: relative;
  /* overflow stays visible so the share dropdown can escape the card;
     elevated above following blocks so the escaped dropdown paints on top */
  overflow: visible;
  z-index: 30;
  background: var(--bento-profile-header-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bento-profile-header__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* clip the cover image to the card's rounded corners since the
     block itself no longer hides overflow */
  overflow: hidden;
  border-radius: inherit;
}

.bento-profile-header__cover-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bento-profile-header__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.85) 70%,
    var(--bento-card-bg, #ffffff) 100%
  );
}

.bento-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
}

.bento-profile-header__avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid var(--bento-card-bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 1rem;
}

.bento-profile-header__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bento-accent) 0%, color-mix(in srgb, var(--bento-accent) 70%, #000) 100%);
  color: white;
  font-weight: 600;
  font-size: 1.75rem;
  text-transform: uppercase;
}

.bento-profile-header__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bento-text);
  margin-bottom: 0.25rem;
}

.bento-profile-header__username {
  font-size: 0.95rem;
  color: var(--bento-text-secondary);
  margin-bottom: 0.5rem;
}

.bento-profile-header__location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--bento-text-secondary);
}

.bento-profile-header__location svg {
  width: 1rem;
  height: 1rem;
}

/* Social Link Block */

.bento-social {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.bento-social__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bento-social__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.bento-social__info {
  flex: 1;
  min-width: 0;
}

.bento-social__platform {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--bento-text);
}

.bento-social__handle {
  font-size: 0.85rem;
  color: var(--bento-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bento-social__arrow {
  color: var(--bento-text-secondary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bento-block:hover .bento-social__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Social icon hover lift */

.bento-block:hover .bento-social__icon {
  transform: scale(1.08);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-social__icon {
  transition: transform 0.2s ease;
}

/* Image Block */

.bento-image {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.bento-image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  height: 100%;
}

.bento-image-gallery img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Link Preview Block */

.bento-link-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bento-link-preview__image {
  width: 100%;
  height: 8rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.bento-link-preview__content {
  padding: 1rem 1.25rem;
  flex: 1;
}

.bento-link-preview__title {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--bento-text);
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-link-preview__description {
  font-size: 0.85rem;
  color: var(--bento-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.bento-link-preview__domain {
  font-size: 0.75rem;
  color: var(--bento-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.bento-link-preview__favicon {
  width: 1rem;
  height: 1rem;
  border-radius: 0.125rem;
}

/* Embed Block (YouTube, Spotify, etc.) */

.bento-embed {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 12rem;
}

.bento-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--bento-radius);
}

/* Embed Loading Skeleton */

.bento-embed__skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #94a3b8;
  z-index: 1;
  animation: bentoSkeletonPulse 1.5s ease-in-out infinite;
}

.bento-embed__skeleton--spotify {
  background: #f0fdf4;
  color: #22c55e;
}

@keyframes bentoSkeletonPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Map Block */

.bento-map {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  border-radius: var(--bento-radius);
}

/* Text Block */

.bento-text {
  padding: 1.25rem;
}

.bento-text__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--bento-text);
  margin-bottom: 0.625rem;
}

.bento-text__content {
  font-size: 0.9rem;
  color: var(--bento-text-secondary);
  line-height: 1.65;
}

.bento-text__content.prose {
  max-width: none;
}

/* Divider Block */

.bento-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.bento-divider__line {
  width: 100%;
  height: 1px;
  background: var(--bento-card-border);
}

/* Spacer Block */

.bento-spacer {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Editor Mode Styles */

.bento-block--editing {
  position: relative;
}

.bento-block--editing::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed var(--bento-accent);
  border-radius: var(--bento-radius);
  pointer-events: none;
  z-index: 10;
}

.bento-block--dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.bento-block__toolbar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.bento-block:hover .bento-block__toolbar,
.bento-block--editing .bento-block__toolbar {
  opacity: 1;
}

.bento-block__toolbar-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: var(--bento-card-bg);
  border: 1px solid var(--bento-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--bento-text-secondary);
}

.bento-block__toolbar-btn:hover {
  background: var(--bento-accent);
  color: white;
  border-color: var(--bento-accent);
}

.bento-block__toolbar-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Resize Handle */

.bento-block__resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.25rem;
  height: 1.25rem;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bento-block:hover .bento-block__resize-handle,
.bento-block--editing .bento-block__resize-handle {
  opacity: 1;
}

.bento-block__resize-handle::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--bento-text-secondary);
  border-bottom: 2px solid var(--bento-text-secondary);
}

/* Grid Preview (for drag and drop) */

.bento-grid-preview {
  position: absolute;
  background: color-mix(in srgb, var(--bento-accent) 20%, transparent);
  border: 2px dashed var(--bento-accent);
  border-radius: var(--bento-radius);
  pointer-events: none;
  z-index: 5;
}

/* Animation Classes */

.bento-block--enter {
  animation: bentoBlockEnter 0.3s ease-out;
}

@keyframes bentoBlockEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bento-block--exit {
  animation: bentoBlockExit 0.2s ease-in forwards;
}

@keyframes bentoBlockExit {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Staggered entrance animation using --block-index CSS variable */

.bento-grid[data-animate="true"] .bento-block {
  opacity: 0;
  animation: bentoBlockReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--block-index, 0) * 0.06s);
}

@keyframes bentoBlockReveal {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
    filter: blur(4px);
  }

  60% {
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Respect reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .bento-grid[data-animate="true"] .bento-block {
    animation: none;
    opacity: 1;
  }
}

/* Platform-specific Social Colors */

.bento-social--twitter .bento-social__icon {
  background: #1DA1F2;
  color: white;
}

.bento-social--x .bento-social__icon {
  background: #000000;
  color: white;
}

.bento-social--instagram .bento-social__icon {
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color: white;
}

.bento-social--youtube .bento-social__icon {
  background: #FF0000;
  color: white;
}

.bento-social--github .bento-social__icon {
  background: #181717;
  color: white;
}

.bento-social--linkedin .bento-social__icon {
  background: #0A66C2;
  color: white;
}

.bento-social--spotify .bento-social__icon {
  background: #1DB954;
  color: white;
}

.bento-social--tiktok .bento-social__icon {
  background: #000000;
  color: white;
}

.bento-social--facebook .bento-social__icon {
  background: #1877F2;
  color: white;
}

.bento-social--twitch .bento-social__icon {
  background: #9146FF;
  color: white;
}

.bento-social--discord .bento-social__icon {
  background: #5865F2;
  color: white;
}

.bento-social--email .bento-social__icon {
  background: var(--bento-accent);
  color: white;
}

.bento-social--website .bento-social__icon {
  background: var(--bento-text);
  color: white;
}

/* Add Block Button */

.bento-add-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 8rem;
  background: color-mix(in srgb, var(--bento-card-bg) 50%, transparent);
  border: 2px dashed var(--bento-card-border);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bento-add-block:hover {
  border-color: var(--bento-accent);
  background: color-mix(in srgb, var(--bento-accent) 5%, var(--bento-card-bg));
}

.bento-add-block__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bento-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-add-block__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bento-add-block__text {
  font-size: 0.875rem;
  color: var(--bento-text-secondary);
  font-weight: 500;
}

/* Block Type Selector Modal */

.bento-block-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1rem;
}

@media (max-width: 480px) {
  .bento-block-selector {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .bento-block-selector__item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }

  .bento-block-selector__icon {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  .bento-block-selector__label {
    text-align: left;
    font-size: 0.9375rem;
  }
}

.bento-block-selector__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bento-card-border);
  background: var(--bento-card-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bento-block-selector__item:hover {
  border-color: var(--bento-accent);
  background: color-mix(in srgb, var(--bento-accent) 5%, var(--bento-card-bg));
}

.bento-block-selector__icon {
  width: 2rem;
  height: 2rem;
  color: var(--bento-accent);
}

.bento-block-selector__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bento-text);
  text-align: center;
}

/* ==========================================
   Sidebar Editor Layout
   ==========================================
   ── SP-7 Task 1 (ruling T3) — READ THIS BEFORE EDITING ANYTHING BELOW ──────
   Everything from here down is the bento EDITOR, which renders only in
   `account/users/show` and `account/users/sidebar/_blocks_tab` — that is,
   only on `layouts/account`, which always carries `data-skin`. The PUBLIC
   Bento profile system (`.bento-block`, `.bento-container`, the 11
   `--bento-` variables above) is a declared NON-GOAL of the Paper migration
   and is NOT touched by it.

   That distinction is what made this file's 25 compat-shim reads safe to
   retire: all 22 lines carrying them sat under `.bento-editor-layout__`,
   `.bento-sidebar-` or `.bento-preview-` selectors — verified mechanically by
   walking each line back to its rule's selector, not by eye — so substituting
   the shim's Paper right-hand sides at those call sites cannot reach a
   profile. Not one byte of any `.bento-block` rule changed, and none of the
   11 frozen variables moved.

   Two of the 25 were special:

     `neu-bord` was NUMERIC, read as `calc(1px * var(...))` in three places.
     It is 1 in both worlds, so the three sites collapse to a literal `1px`.
     Aliasing it to a Paper length instead would have produced
     `calc(1px * 1.5px)` — invalid at computed-value time, which drops the
     WHOLE border declaration and silently un-outlines the editor sidebar.

     `neu-accent-soft` has no Paper counterpart: it is a translucent
     color-mix, NOT the opaque `--brand-tint`, and it is composited over the
     sidebar's own fill. It is frozen below as `--editor-accent-soft`, a
     file-local property on the two elements that read it — named to stay
     clear of the `--bento-` namespace, which is a frozen public interface.

   (Origin token names in this comment omit their leading double dash on
   purpose: the SP-7 ratchet counts literals, comments included.)
   ========================================== */

.bento-sidebar-block-btn,
.bento-preview-bp-btn--active {
  --editor-accent-soft: color-mix(in oklab, var(--brand) 14%, transparent);
}

/* Dark answers to TWO selectors: Bullet Train toggles `.dark` on <html>,
   Paper's own previews use `[data-theme="dark"]`. */

.dark .bento-sidebar-block-btn,
.dark .bento-preview-bp-btn--active,
[data-theme="dark"] .bento-sidebar-block-btn,
[data-theme="dark"] .bento-preview-bp-btn--active {
  --editor-accent-soft: color-mix(in oklab, var(--brand) 22%, transparent);
}

.bento-editor-layout {
  display: flex;
  gap: 1.5rem;
  min-height: calc(100vh - 8rem);
}

.bento-editor-layout__preview {
  flex: 1;
  min-width: 0;
}

.bento-editor-layout__sidebar {
  width: 340px;
  flex-shrink: 0;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  box-shadow: var(--lift-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 8rem);
  position: sticky;
  top: 1.5rem;
}

/* Sidebar Tabs */

.bento-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--edge);
  flex-shrink: 0;
}

.bento-sidebar-tab {
  flex: 1;
  padding: 0.625rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.bento-sidebar-tab:hover {
  color: var(--ink);
}

.bento-sidebar-tab--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Sidebar Tab Content */

.bento-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar Block Buttons */

.bento-sidebar-block-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.375rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: var(--paper-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  color: var(--brand);
  box-shadow: var(--lift-1);
}

.bento-sidebar-block-btn span {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}

.bento-sidebar-block-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  background: var(--editor-accent-soft);
}

/* ==========================================
   Share Dropdown
   ========================================== */

.bento-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s ease;
}

.bento-share-btn:hover {
  background: color-mix(in srgb, var(--bento-text) 5%, transparent);
}

.bento-share-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 12rem;
  background: var(--bento-card-bg, #ffffff);
  border: 1px solid var(--bento-card-border, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 50;
  overflow: hidden;
}

.bento-share-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--bento-text, #1e293b);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  transition: background 0.1s ease;
}

.bento-share-dropdown__item:hover {
  background: color-mix(in srgb, var(--bento-accent, #6366f1) 8%, var(--bento-card-bg, #ffffff));
}

/* ==========================================
   Powered by Footer
   ========================================== */

.bento-powered-footer {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
}

.bento-powered-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--bento-text-secondary, #64748b);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.bento-powered-footer__link:hover {
  opacity: 1;
}

.bento-powered-footer__link strong {
  font-weight: 600;
  color: var(--bento-accent, #6366f1);
}

/* Sidebar Category Headers */

.bento-sidebar-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.375rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.bento-sidebar-category-header:hover {
  color: var(--ink);
}

.bento-sidebar-chevron {
  transition: transform 0.2s ease;
}

.bento-sidebar-chevron.rotate-180 {
  transform: rotate(180deg);
}

/* ==========================================
   SortableJS Drag & Drop States
   ========================================== */

/* Ghost: placeholder left in original position */

.bento-block--sortable-ghost {
  opacity: 0.3;
  background: color-mix(in srgb, var(--bento-accent) 10%, var(--bento-card-bg));
  border: 2px dashed var(--bento-accent);
  box-shadow: none;
}

.bento-block--sortable-ghost > * {
  visibility: hidden;
}

/* Chosen: the element being dragged (before movement starts) */

.bento-block--sortable-chosen {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

/* Drag: the moving clone during drag */

.bento-block--sortable-drag {
  opacity: 0.9;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

/* Override hover transform during drag to prevent jitter */

.bento-block--sortable-chosen:hover,
.bento-block--sortable-drag:hover {
  transform: none;
}

.bento-block--sortable-drag:hover {
  transform: rotate(2deg) scale(1.02);
}

/* Drag handle cursor */

.bento-block__toolbar-btn--drag {
  cursor: grab;
}

.bento-block__toolbar-btn--drag:active {
  cursor: grabbing;
}

/* ==========================================
   Block Resize Visual Feedback
   ========================================== */

/* Resizing state overlay */

.bento-block--resizing {
  z-index: 50;
  outline: 2px solid var(--bento-accent);
  outline-offset: -1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bento-accent) 20%, transparent),
              0 8px 25px rgba(0, 0, 0, 0.15);
  transition: none;
}

.bento-block--resizing:hover {
  transform: none;
}

/* Size indicator badge (e.g. "2x1") shown during resize */

.bento-resize-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bento-accent);
  color: white;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
  white-space: nowrap;
}

/* Responsive Sidebar */

@media (max-width: 1024px) {
  .bento-editor-layout {
    flex-direction: column;
  }

  .bento-editor-layout__sidebar {
    width: 100%;
    max-height: 50vh;
    position: static;
  }
}

@media (max-width: 768px) {
  .bento-editor-layout__sidebar {
    display: none;
  }
}

/* Profile Page Block */

.bento-profile-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.bento-profile-page__image {
  width: 100%;
  height: 7rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.bento-profile-page__content {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.bento-profile-page__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  color: var(--bento-accent, #6366f1);
  font-size: 1.125rem;
  line-height: 1;
}

.bento-profile-page__text {
  flex: 1;
  min-width: 0;
}

.bento-profile-page__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bento-text);
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-profile-page__description {
  font-size: 0.825rem;
  color: var(--bento-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.bento-profile-page__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bento-text-secondary);
}

.bento-profile-page__type {
  font-weight: 600;
}

.bento-profile-page--empty {
  border: 2px dashed rgba(148, 163, 184, 0.5);
  background: rgba(248, 250, 252, 0.5);
}

/* Owner-only "Hidden" badge inside a profile_page bento card. Visitors never
   see the card at all (the block is filtered server-side); when the owner
   previews their own profile we mark hidden pages so they remember the page
   is not public yet. */

.bento-profile-page__hidden-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: rgba(251, 191, 36, 0.18);
  color: rgb(146, 64, 14);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ==========================================
   Editor: Preview-at-breakpoint frame
   ========================================== */

.bento-preview-frame {
  width: 100%;
}

/* The frame takes its true forced width so the inner .bento-container can
   actually reach the target tier (Large needs >=1280px). The editor pane is
   capped well below 1280px (page max-width minus the sidebar), so the frame
   intentionally overflows and its overflow-x-auto wrapper (in show.html.erb)
   scrolls horizontally — letting the user preview Large/Medium widths their
   screen can't show. (No max-width clamp: that would pin the frame to the pane width
   and the higher @container tier would never fire.) */

.bento-preview-frame[data-force-bp="small"]  {
  width: 400px;
}

.bento-preview-frame[data-force-bp="medium"] {
  width: 960px;
}

.bento-preview-frame[data-force-bp="large"]  {
  width: 1440px;
}

.bento-preview-bp-btn--active {
  background: var(--editor-accent-soft);
  color: var(--brand-ink);
  font-weight: 600;
}

/* ==========================================
   Cross-breakpoint animation
   ========================================== */

/* The crossfade between 2/4/8-col layouts is driven by the
   bento-grid-transitions Stimulus controller (FLIP technique). It already
   no-ops when prefers-reduced-motion is set, so no CSS is needed here —
   blocks simply snap to their new positions for reduced-motion users. */

/* ============================================================
   Firecrawl Theme – Background Animations & Microinteractions
   Inspired by firecrawl.dev: dark developer aesthetic with
   glowing orange accent, animated orbs, dot-grid overlay.
   Activated via .bento-theme--firecrawl on the profile root.
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes fc-orb-drift-1 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  25%  {
    transform: translate(40px, -60px) scale(1.08);
  }

  50%  {
    transform: translate(-30px, 40px) scale(0.95);
  }

  75%  {
    transform: translate(20px, 30px) scale(1.04);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes fc-orb-drift-2 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  30%  {
    transform: translate(-50px, 30px) scale(1.1);
  }

  60%  {
    transform: translate(40px, -20px) scale(0.92);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes fc-orb-drift-3 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  40%  {
    transform: translate(25px, 50px) scale(1.06);
  }

  80%  {
    transform: translate(-35px, -15px) scale(0.97);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes fc-grid-pulse {
  0%, 100% {
    opacity: 0.04;
  }

  50%       {
    opacity: 0.07;
  }
}

@keyframes fc-border-shimmer {
  0%   {
    background-position: 0% 50%;
  }

  50%  {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes fc-avatar-ring-pulse {
  0%   {
    box-shadow: 0 0 0 0 rgba(250, 93, 25, 0.5);
  }

  70%  {
    box-shadow: 0 0 0 10px rgba(250, 93, 25, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(250, 93, 25, 0);
  }
}

@keyframes fc-accent-glow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(250, 93, 25, 0.4);
  }

  50%       {
    text-shadow: 0 0 16px rgba(250, 93, 25, 0.7);
  }
}

/* ── Root container ─────────────────────────────────────────── */

.bento-theme--firecrawl {
  position: relative;
  /* Override default bento-profile background; the CSS var handles the solid
     #171717 fill. We set isolation so z-index stacking is contained. */
  isolation: isolate;
}

/* ── Animated dot-grid overlay (pseudo-element on container) ── */

.bento-theme--firecrawl::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.055) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  animation: fc-grid-pulse 6s ease-in-out infinite;
}

/* ── Orb layer (injected HTML divs inside .bento-anim-layer) ── */

.bento-anim-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bento-anim-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

/* Orb 1 – primary orange, top-right */

.bento-anim-orb--1 {
  width: 680px;
  height: 680px;
  top: -220px;
  right: -180px;
  background: radial-gradient(circle at 40% 40%, rgba(250, 93, 25, 0.22), transparent 70%);
  animation: fc-orb-drift-1 22s ease-in-out infinite;
}

/* Orb 2 – purple, bottom-left */

.bento-anim-orb--2 {
  width: 520px;
  height: 520px;
  bottom: -160px;
  left: -140px;
  background: radial-gradient(circle at 60% 60%, rgba(144, 97, 255, 0.18), transparent 70%);
  animation: fc-orb-drift-2 28s ease-in-out infinite;
  animation-delay: -8s;
}

/* Orb 3 – deep orange/red, center-left */

.bento-anim-orb--3 {
  width: 380px;
  height: 380px;
  top: 40%;
  left: -80px;
  background: radial-gradient(circle at 50% 50%, rgba(235, 52, 36, 0.12), transparent 70%);
  animation: fc-orb-drift-3 18s ease-in-out infinite;
  animation-delay: -4s;
}

/* Content layer sits above orbs & grid */

.bento-theme--firecrawl .bento-container {
  position: relative;
  z-index: 1;
}

/* ── Cards ──────────────────────────────────────────────────── */

.bento-theme--firecrawl .bento-block {
  background: var(--bento-card-bg);
  border: 1px solid var(--bento-card-border);
  /* Subtle inner highlight to suggest depth */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.35);
  transition:
    transform       0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color    0.28s ease,
    box-shadow      0.28s ease;
}

.bento-theme--firecrawl .bento-block:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(250, 93, 25, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(250, 93, 25, 0.18),
    0 8px 32px rgba(250, 93, 25, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Animated gradient border on clickable blocks */

.bento-theme--firecrawl .bento-block--clickable {
  background-clip: padding-box;
}

.bento-theme--firecrawl .bento-block--clickable::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    270deg,
    rgba(250, 93, 25, 0),
    rgba(250, 93, 25, 0.5),
    rgba(144, 97, 255, 0.4),
    rgba(250, 93, 25, 0)
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: fc-border-shimmer 3s linear infinite;
  pointer-events: none;
}

.bento-theme--firecrawl .bento-block--clickable:hover::after {
  opacity: 1;
}

/* ── Profile header ─────────────────────────────────────────── */

.bento-theme--firecrawl .bento-profile-header__avatar {
  border-color: rgba(250, 93, 25, 0.6);
  box-shadow:
    0 0 0 3px rgba(250, 93, 25, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bento-theme--firecrawl .bento-profile-header__avatar:hover,
.bento-theme--firecrawl .bento-profile-header:hover .bento-profile-header__avatar {
  animation: fc-avatar-ring-pulse 1.4s ease-out infinite;
  transform: scale(1.04);
}

.bento-theme--firecrawl .bento-profile-header__name {
  background: linear-gradient(90deg, #f5f5f5 40%, #fa5d19 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Accent elements ────────────────────────────────────────── */

/* Icon containers */

.bento-theme--firecrawl .bento-block__icon {
  background: rgba(250, 93, 25, 0.12);
  color: #fa5d19;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.bento-theme--firecrawl .bento-block:hover .bento-block__icon {
  background: rgba(250, 93, 25, 0.2);
  box-shadow: 0 0 12px rgba(250, 93, 25, 0.25);
}

/* Links */

.bento-theme--firecrawl a {
  color: #fa5d19;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.bento-theme--firecrawl a:hover {
  color: #fb7a42;
  text-shadow: 0 0 10px rgba(250, 93, 25, 0.4);
}

/* ── Social link blocks ─────────────────────────────────────── */

.bento-theme--firecrawl .bento-social-link {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bento-theme--firecrawl .bento-social-link:hover {
  background: rgba(250, 93, 25, 0.12);
  transform: scale(1.06);
}

/* ── Buttons & CTAs ─────────────────────────────────────────── */

.bento-theme--firecrawl .bento-btn,
.bento-theme--firecrawl button[class*="accent"],
.bento-theme--firecrawl .bento-block a[class*="btn"] {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bento-theme--firecrawl .bento-btn:hover {
  box-shadow: 0 0 20px rgba(250, 93, 25, 0.45);
  transform: translateY(-1px);
}

/* Ripple-like spotlight on button hover */

.bento-theme--firecrawl .bento-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bento-theme--firecrawl .bento-btn:hover::after {
  opacity: 1;
}

/* ── Tag / badge chips ───────────────────────────────────────── */

.bento-theme--firecrawl .bento-tag,
.bento-theme--firecrawl [class*="badge"] {
  border: 1px solid rgba(250, 93, 25, 0.25);
  background: rgba(250, 93, 25, 0.08);
  color: #fa5d19;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bento-theme--firecrawl .bento-tag:hover {
  background: rgba(250, 93, 25, 0.16);
  border-color: rgba(250, 93, 25, 0.5);
}

/* ── Block entrance animation ───────────────────────────────── */

@keyframes fc-block-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bento-theme--firecrawl .bento-grid .bento-block {
  animation: fc-block-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger the entrance for the first 8 blocks */

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(1) {
  animation-delay: 0.04s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(2) {
  animation-delay: 0.08s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(3) {
  animation-delay: 0.12s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(4) {
  animation-delay: 0.16s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(5) {
  animation-delay: 0.20s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(6) {
  animation-delay: 0.24s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(7) {
  animation-delay: 0.28s;
}

.bento-theme--firecrawl .bento-grid .bento-block:nth-child(8) {
  animation-delay: 0.32s;
}

/* ── Respect reduced-motion preference ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bento-theme--firecrawl .bento-anim-orb,
  .bento-theme--firecrawl::before,
  .bento-theme--firecrawl .bento-grid .bento-block,
  .bento-theme--firecrawl .bento-block--clickable::after {
    animation: none !important;
    transition: none !important;
  }

  .bento-theme--firecrawl .bento-block:hover {
    transform: none;
  }
}

/*
 * Z-Index Scale Documentation
 * ============================
 *
 * This file documents the z-index hierarchy used throughout the application.
 * Use CSS custom properties to maintain consistency.
 *
 * SCALE:
 * ------
 * --z-base:        0    - Default layer (most content)
 * --z-dropdown:   30    - Dropdown menus
 * --z-sticky:     40    - Sticky headers, navigation
 * --z-overlay:    45    - Background overlays
 * --z-mobile-nav: 50    - Mobile bottom navigation
 * --z-drawer:     60    - Side drawers (utility drawer, filters)
 * --z-modal:      65    - Modal dialogs
 * --z-toast:      70    - Toast notifications
 * --z-tooltip:    80    - Tooltips (highest priority)
 *
 * USAGE:
 * ------
 * Use the CSS variable in your styles:
 *   .my-element { z-index: var(--z-dropdown); }
 *
 * Or use the Tailwind z-[N] utility with the documented values:
 *   class="z-[30]"  // dropdown
 *   class="z-[60]"  // drawer
 *   class="z-[70]"  // toast
 *
 * GUIDELINES:
 * -----------
 * 1. Always use the scale values - don't use arbitrary z-index values
 * 2. Overlays should be at --z-overlay (45) or lower
 * 3. Mobile bottom nav is fixed at --z-mobile-nav (50)
 * 4. Drawers that open from the side use --z-drawer (60)
 * 5. Modals that center on screen use --z-modal (65)
 * 6. Toast notifications always on top at --z-toast (70)
 * 7. Tooltips are the absolute highest at --z-tooltip (80)
 *
 * CURRENT USAGE IN CODEBASE:
 * --------------------------
 * - Mobile bottom menu:      z-50 (--z-mobile-nav)
 * - Mobile sidebar:          z-50 (--z-mobile-nav)
 * - Drawer controller:       z-[60] (--z-drawer)
 * - Search modal:            z-[70] (higher to appear over drawer)
 * - Notifications drawer:    z-[60] (--z-drawer)
 * - Toast container:         z-[70] (--z-toast)
 */

:root {
  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 30;
  --z-sticky: 40;
  --z-overlay: 45;
  --z-mobile-nav: 50;
  --z-drawer: 60;
  --z-modal: 65;
  --z-toast: 70;
  --z-tooltip: 80;
}

/* Utility classes for z-index */

.z-base {
  z-index: var(--z-base);
}

.z-dropdown {
  z-index: var(--z-dropdown);
}

.z-sticky {
  z-index: var(--z-sticky);
}

.z-overlay {
  z-index: var(--z-overlay);
}

.z-mobile-nav {
  z-index: var(--z-mobile-nav);
}

.z-drawer {
  z-index: var(--z-drawer);
}

.z-modal {
  z-index: var(--z-modal);
}

.z-toast {
  z-index: var(--z-toast);
}

.z-tooltip {
  z-index: var(--z-tooltip);
}

/*
 * Skeleton Loading Animations
 * ============================
 *
 * Provides shimmer animations for loading placeholders.
 * Use with the skeleton UI components for consistent loading states.
 *
 * USAGE:
 * ------
 * Apply the base class `.skeleton` to any element to get the shimmer effect.
 * Combine with shape classes for different content types:
 *   - .skeleton-text - Text line placeholder
 *   - .skeleton-avatar - Circular avatar placeholder
 *   - .skeleton-button - Button placeholder
 *   - .skeleton-card - Card placeholder
 *
 * EXAMPLES:
 * ---------
 * <div class="skeleton skeleton-text"></div>
 * <div class="skeleton skeleton-avatar"></div>
 * <div class="skeleton skeleton-text w-3/4"></div>
 */

/* Shimmer animation */

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Base skeleton class */

.skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--base-200) / 1) 25%,
    rgb(var(--base-100) / 1) 50%,
    rgb(var(--base-200) / 1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
}

/* Dark mode skeleton */

.dark .skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--base-700) / 1) 25%,
    rgb(var(--base-600) / 1) 50%,
    rgb(var(--base-700) / 1) 75%
  );
  background-size: 200% 100%;
}

/* Shape variants */

.skeleton-text {
  height: 1rem;
  width: 100%;
}

.skeleton-text-sm {
  height: 0.75rem;
  width: 100%;
}

.skeleton-text-lg {
  height: 1.25rem;
  width: 100%;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
}

.skeleton-avatar-sm {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

.skeleton-avatar-lg {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
}

.skeleton-button {
  height: 2.5rem;
  width: 6rem;
  border-radius: 0.5rem;
}

.skeleton-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
}

.skeleton-card {
  height: 8rem;
  width: 100%;
  border-radius: 0.75rem;
}

.skeleton-card-sm {
  height: 5rem;
  width: 100%;
  border-radius: 0.5rem;
}

/* Pulse animation alternative (less motion) */

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.skeleton-pulse {
  animation: skeleton-pulse 2s ease-in-out infinite;
  background: rgb(var(--base-200) / 1);
}

.dark .skeleton-pulse {
  background: rgb(var(--base-700) / 1);
}

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-pulse {
    animation: none;
    background: rgb(var(--base-200) / 1);
  }

  .dark .skeleton,
  .dark .skeleton-pulse {
    background: rgb(var(--base-700) / 1);
  }
}

/* components/form_validation.css is GONE (SP-4 Task 9). All 123 lines of it
   were dead: `.field-valid` / `.field-invalid` / `.field-validating` /
   `.field-with-validation` / `.validation-error*` / `.validation-success*` /
   `.validation-indicator` had ZERO consumers in views, helpers, JS, tests or
   any bundled gem. The plan's premise — "applied at runtime by the
   form-validation Stimulus controller" — is measurably false: that controller
   writes raw Tailwind utilities (`border-red-500`, `focus:ring-red-500`, …)
   straight onto the field. Deleting it also retires the `.field-invalid` vs
   Paper `.field-error` naming collision by removing one of the two names. */

/* Logo Animation Component
 * A playful hop-and-spin animation for the Sama Sama logo
 * The blue heart-shaped logo made of mini sticky notes
 */

/* Base container for animated logo */

.logo-animated {
  display: inline-block;
  animation: logo-hop-spin 2s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Slower, more subtle version */

.logo-animated-slow {
  display: inline-block;
  animation: logo-hop-spin 3s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Faster, more energetic version */

.logo-animated-fast {
  display: inline-block;
  animation: logo-hop-spin 1.5s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Single hop (no loop) - useful for hover states */

.logo-animated-once {
  display: inline-block;
  animation: logo-hop-spin 1s ease-in-out forwards;
  transform-origin: center bottom;
}

/* Hover trigger - animates on hover */

.logo-animated-hover {
  display: inline-block;
  transform-origin: center bottom;
  transition: transform 0.2s ease;
}

.logo-animated-hover:hover {
  animation: logo-hop-spin 1s ease-in-out;
}

/* Main keyframe animation: hop up, spin, land */

@keyframes logo-hop-spin {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  /* Anticipation - slight crouch before jump */

  10% {
    transform: translateY(2px) rotate(0deg) scale(0.98, 1.02);
  }

  /* Launch upward */

  25% {
    transform: translateY(-20px) rotate(90deg) scale(1.05);
  }

  /* Peak of jump - full spin */

  50% {
    transform: translateY(-30px) rotate(180deg) scale(1.08);
  }

  /* Descending */

  75% {
    transform: translateY(-15px) rotate(270deg) scale(1.05);
  }

  /* Landing with slight squash */

  90% {
    transform: translateY(0) rotate(360deg) scale(1.02, 0.98);
  }

  /* Settle back to normal */

  100% {
    transform: translateY(0) rotate(360deg) scale(1);
  }
}

/* Alternative: Gentle bounce without full spin */

@keyframes logo-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-15px) rotate(-5deg);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }

  75% {
    transform: translateY(-10px) rotate(-3deg);
  }
}

.logo-animated-bounce {
  display: inline-block;
  animation: logo-bounce 1.5s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Alternative: Heartbeat pulse (fitting for heart logo) */

@keyframes logo-heartbeat {
  0%, 100% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.1);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.15);
  }

  40% {
    transform: scale(1);
  }
}

.logo-animated-heartbeat {
  display: inline-block;
  animation: logo-heartbeat 1.5s ease-in-out infinite;
  transform-origin: center center;
}

/* Loading spinner variant - continuous rotation */

@keyframes logo-spin-continuous {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.logo-animated-loading {
  display: inline-block;
  animation: logo-spin-continuous 1.5s linear infinite;
  transform-origin: center center;
}

/* Sticky notes scatter effect (for transitions) */

@keyframes logo-scatter {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }

  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

.logo-animated-scatter {
  display: inline-block;
  animation: logo-scatter 0.5s ease-out forwards;
  transform-origin: center center;
}

/* Sticky notes gather effect (reverse of scatter) */

@keyframes logo-gather {
  0% {
    transform: scale(0) rotate(-360deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(-180deg);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.logo-animated-gather {
  display: inline-block;
  animation: logo-gather 0.5s ease-out forwards;
  transform-origin: center center;
}

/* Pause animation on reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .logo-animated,
  .logo-animated-slow,
  .logo-animated-fast,
  .logo-animated-once,
  .logo-animated-hover:hover,
  .logo-animated-bounce,
  .logo-animated-heartbeat,
  .logo-animated-loading {
    animation: none;
  }
}

/* Utility: Pause animation */

.logo-animated-paused {
  animation-play-state: paused !important;
}

/* Utility: Delay variations */

.logo-animated-delay-1 {
  animation-delay: 0.5s;
}

.logo-animated-delay-2 {
  animation-delay: 1s;
}

.logo-animated-delay-3 {
  animation-delay: 1.5s;
}

/* Styles for rendering HTML email content safely within the inbox */

.email-html-content {
  /* Scope all email HTML to prevent style leakage */
  all: initial;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  /* slate-900 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Restore basic typography */

.email-html-content h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.5em 0;
}

.email-html-content h2 {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0.5em 0;
}

.email-html-content h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0.5em 0;
}

.email-html-content h4,
.email-html-content h5,
.email-html-content h6 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.5em 0;
}

.email-html-content p {
  margin: 0.5em 0;
}

.email-html-content br {
  display: block;
}

.email-html-content a {
  color: #4f46e5;
  /* indigo-600 */
  text-decoration: underline;
}

.email-html-content a:hover {
  color: #4338ca;
  /* indigo-700 */
}

.email-html-content strong,
.email-html-content b {
  font-weight: 700;
}

.email-html-content em,
.email-html-content i {
  font-style: italic;
}

.email-html-content ul,
.email-html-content ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.email-html-content ul {
  list-style-type: disc;
}

.email-html-content ol {
  list-style-type: decimal;
}

.email-html-content li {
  margin: 0.25em 0;
}

/* Tables (common in email layouts) */

.email-html-content table {
  border-collapse: collapse;
  max-width: 100%;
  width: auto;
}

.email-html-content td,
.email-html-content th {
  padding: 4px 8px;
  vertical-align: top;
}

/* Images */

.email-html-content img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Blockquotes (common for quoted replies) */

.email-html-content blockquote {
  border-left: 3px solid #cbd5e1;
  /* slate-300 */
  padding-left: 1em;
  margin: 0.5em 0;
  color: #64748b;
  /* slate-500 */
}

/* Preformatted text */

.email-html-content pre,
.email-html-content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background-color: #f1f5f9;
  /* slate-100 */
  border-radius: 4px;
}

.email-html-content pre {
  padding: 0.75em;
  overflow-x: auto;
  white-space: pre-wrap;
}

.email-html-content code {
  padding: 0.125em 0.25em;
}

/* Horizontal rules */

.email-html-content hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  /* slate-200 */
  margin: 1em 0;
}

/* Gmail-style quoted text */

.email-html-content .gmail_quote,
.email-html-content .yahoo_quoted,
.email-html-content [class*="quote"] {
  border-left: 3px solid #cbd5e1;
  padding-left: 1em;
  color: #64748b;
}

:root {
  /* Light-mode defaults mirror the original hardcoded values so this change is
     visually transparent under the current pin-to-light state. */
  --kepung-board-bg: #fdfcf7;
  --kepung-grid: #dfd8c4;
  /* warm light grid lines */
  --kepung-capture: #3b3a36;
  /* captured-dot cross-mark stroke */
}

.dark {
  --kepung-board-bg: #1e293b;
  /* base-800 */
  --kepung-grid: #3b475a;
  --kepung-capture: #94a3b8;
  /* base-400, visible on dark */
}

.kepung-board-svg {
  background: var(--kepung-board-bg, #fdfcf7);
  border: 1px solid #e8e1cb;
  border-radius: 12px;
  display: block;
}

.kepung-board-svg .kepung-grid line {
  stroke: var(--kepung-grid, #dfd8c4);
  stroke-width: 1;
}

.kepung-board-svg .kepung-guide {
  fill: #c4bda3;
  pointer-events: none;
  transition: fill 0.15s, r 0.15s;
}

.kepung-board-svg .kepung-guide-sealed {
  fill: #e6dfca;
  opacity: 0.5;
}

.kepung-board-svg .kepung-hit {
  fill: transparent;
  cursor: pointer;
}

.kepung-board-svg .kepung-hit:hover + .kepung-guide {
  fill: #5b574a;
  r: 4;
}

.kepung-board-svg .kepung-dot {
  filter: drop-shadow(0 1px 1.5px rgba(40, 30, 20, 0.25));
}

.kepung-board-svg .kepung-dot-captured {
  opacity: 0.3;
}

.kepung-board-svg .kepung-x {
  stroke-dasharray: 0;
}

.kepung-board-svg .kepung-gates line {
  stroke-dasharray: 0;
  filter: drop-shadow(0 0.5px 0.5px rgba(40, 30, 20, 0.2));
}

@media (max-width: 1024px) {
  .kepung-board-svg {
    width: 100%;
    height: auto;
  }
}

/* Landing page (signed-out at `/`) — Dribbble-modern visual layer.
   Scoped under `.landing-page`, which is applied in exactly one place:
   the signed-out branch of `public/home/index.html.erb`. Keep it that way —
   SP-5 R2 forbids promoting these helpers to any other marketing surface,
   because a second consumer turns them into a component system competing
   with Paper's own primitives. New surfaces use Paper classes.

   SP-5 R2 (2026-08-14) — THE GROUNDS ARE NOW ALIASES, NOT VALUES.
   This file used to pick its own two creams, and the comment above them said
   it was keeping the app's cooler slate grounds out. SP-2 deleted that world:
   the app's ground IS warm cream now. Measured in OKLab before the change,
   the island and Paper turned out to be the same colour arrived at
   independently — ground vs paper 0.0018, ground-2 vs paper-card 0.0035,
   both an order of magnitude under the ~0.02 JND bar this repo uses. So the
   light grounds become one indirection instead of two literals and nothing
   moves.

   Dark is the opposite story and it is the point of the change, not a
   regression: the deleted dark block was a navy hue-inversion (263 degrees
   against Paper's 78, OKLab 0.0574, roughly 3x JND) which would have made
   the signed-out landing the only navy surface on a warm-dark marketing
   skin. Paper's own tokens flip themselves under `.dark` (and under
   `[data-theme="dark"]`), so the override is not replaced — it is deleted,
   and the flip arrives through the alias.

   Every surviving dark selector below is DOUBLED. Bullet Train toggles
   `.dark` on the html element; Paper's standalone previews use
   `[data-theme="dark"]`. A rule written for only one of them is live in one
   half of this app and dead in the other. */

.landing-page {
  --ground:     var(--paper);
  /* page ground — hero and alternate zones */
  --ground-2:   var(--paper-card);
  /* sheet — one step lighter than the ground */
  --shadow-soft:  0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 24px rgba(15, 23, 42, 0.06);
  --shadow-float: 0 10px 40px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.05);
}

/* Shadows only. The two grounds are deliberately absent — see the header. */

.dark .landing-page,
[data-theme="dark"] .landing-page {
  --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 10px 40px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.landing-page .bg-ground   {
  background-color: var(--ground);
}

.landing-page .bg-ground-2 {
  background-color: var(--ground-2);
}

.landing-page .shadow-soft  {
  box-shadow: var(--shadow-soft);
}

.landing-page .shadow-float {
  box-shadow: var(--shadow-float);
}

/* Soft warm halo behind hero — uses primary palette so it tints with the
   active BT theme color (config/initializers/theme.rb). */

.landing-page .hero-glow {
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 70%;
  background: radial-gradient(
    ellipse 65% 60% at 70% 45%,
    color-mix(in srgb, var(--primary-300) 35%, transparent),
    transparent 65%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.dark .landing-page .hero-glow,
[data-theme="dark"] .landing-page .hero-glow {
  background: radial-gradient(
    ellipse 65% 60% at 70% 45%,
    color-mix(in srgb, var(--primary-500) 25%, transparent),
    transparent 65%
  );
}

/* Floating chip stickers around the hero product mockup.
   A chip is a sheet floating over the hero ground, which is exactly what
   Paper's card fill is for, so it takes that token and the navy dark
   override that used to sit here is gone with the grounds. */

.landing-page .chip {
  position: absolute;
  background: var(--paper-card);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  padding: 12px 14px;
  z-index: 3;
}

/* Mini-UI rows inside feature cards (small abstract row that says
   "this is the product")

   R8.2 (2026-08-14) deleted five declarations from this island. They read
   the base ramp as if it held a colour; it holds space-separated channels
   (`--base-300: 203 213 225`), so a bare read of one in a colour position
   is invalid at computed-value time. Before SP-2 the property was
   undefined, which is equally invalid. They therefore never rendered, in
   any commit, in either scheme. Deleted rather than repaired: repairing
   them would paint a border and inks that no reviewed baseline has shown.

   The correct spelling, recorded once here for any future design-reviewed
   resurrection, is `rgb(var(--base-N))`. The five deleted were:
     .mini-row            color            reading --base-700
     .dark .mini-row      background       reading --base-100
     .dark .mini-row      color            reading --base-300
     .mini-check          border           1.5px solid, --base-300
     .mini-check.done     border-color     reading --primary-500
   The last is a valid value that only ever recoloured a border box the
   dead shorthand above it never created, so it dies with it.

   One measured consequence, deliberate: an invalid declaration computes to
   unset, not to the next cascade winner, so the dead `.dark` rule was
   actively suppressing this rule's live `background: var(--ground-2)`. Dark
   mini-rows now fill with `--ground-2` instead of painting nothing. That is
   `--paper-card`, which is exactly the card they sit on, so the rendering
   is unchanged (measured: 360 corner-antialiasing pixels, delta 1/255). */

.landing-page .mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--ground-2);
  border-radius: 8px;
  font-size: 11px;
}

.landing-page .mini-check {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: none;
}

.landing-page .mini-check.done {
  background: var(--primary-500);
}

/* ============================================================================
   Sama² · Inter — the Bullet Train theme's UI sans, self-hosted
   ----------------------------------------------------------------------------
   Until now Inter was pulled from https://rsms.me/inter/inter.css on EVERY page
   by the theme gem's `themes/light/layouts/head/_fonts` partial. That partial is
   now ejected and emptied; these faces replace it.

   Why self-host rather than just drop the CDN link:
     · app/javascript/service_worker.js:46 skips all cross-origin requests, so
       the CDN font could never enter the offline cache. Self-hosting fixes a
       pre-existing offline defect.
     · The Paper design system does NOT make Inter redundant. Paper is scoped
       under [data-skin]; the four games and the public Bento profiles never
       carry that attribute and render on the Bullet Train Tailwind stack,
       whose `sans` leads with `Inter var` permanently (see the compiled
       app/assets/builds/application.light.css). Dropping Inter without a
       replacement would flip every un-skinned surface to system-ui forever.
     · One fewer third-party origin on the critical path of every page.

   FAMILY NAME is `Inter var` — the legacy alias rsms.me has kept since Oct
   2023 — because that, not `InterVariable`, is the name Tailwind's `sans`
   stack actually asks for. Do not "modernise" it without also changing the
   theme's font stack, or nothing will resolve.

   Binaries: rsms/inter v4.1 GitHub release (`web/InterVariable*.woff2`),
   verified byte-identical (sha256) to what https://rsms.me/inter/font-files/
   serves today, so this is exact parity with production. Shipped whole and
   un-subset: no tooling needed, and no OFL Reserved Font Name question — see
   public/fonts/inter/LICENSE.txt, which does carry the RFN clause (§ "Reserved
   Font Name" refers to any names specified as such…), though Inter's copyright
   line declares no reserved name. Any future subsetting must revisit that.

   Served from public/ (outside the asset pipeline) so this PostCSS-built CSS
   resolves a stable, digest-free absolute URL — same pattern as fonts_jetbrains_mono.css.
   ========================================================================== */

@font-face {
  font-family: "Inter var";

  font-style: normal;

  font-weight: 100 900;

  font-display: swap;

  src: url(/fonts/inter/InterVariable.woff2) format("woff2");
}

@font-face {
  font-family: "Inter var";

  font-style: italic;

  font-weight: 100 900;

  font-display: swap;

  src: url(/fonts/inter/InterVariable-Italic.woff2) format("woff2");
}

/* Was components/neu_fonts.css. Renamed by SP-7 ruling T4: the neu prefix went
   with the token layer, the FACE did not. It leads Tailwind's `font-mono`
   utility (tailwind.config.js:38-41, 19 call sites including three carve-out
   surfaces) and it is what the neumorph skin's `--f-mono` names, so it is
   load-bearing for both pixel invariance and the ops rollback. Only the
   reader-less `font-mono` custom property died. */

/* ============================================================================
   Sama² · JetBrains Mono — the self-hosted mono face
   ----------------------------------------------------------------------------
   Was `components/neu_fonts.css`. The neu prefix is gone because the neu layer
   is gone (SP-7 ruling T5 deleted both definition sites), but the FACE is not:
   it survives on its own merits, and T4 answers "does a second mono webfont
   ship?" with **yes, for two measured reasons**, so nobody re-opens it.

   1. TAILWIND'S `font-mono` UTILITY LEADS WITH IT. `tailwind.config.js:38-41`
      overrides `themeConfig.theme.extend.fontFamily.mono` to put this face
      first. There are 19 files using `font-mono`, and they include
      `public/shatranj`, `public/kepung` and `public/use_cases` — CARVE-OUT
      surfaces the migration is forbidden to repaint. Dropping the face would
      silently fall those back to OS system mono: a pixel change on a non-goal.

   2. IT IS THE OPS ROLLBACK'S TYPEFACE. `paper/skins/neumorph.css:101` sets
      `--f-mono` to this family, and that skin is the documented rollback
      target — `app/controllers/concerns/skinnable.rb:83`, "ROLLBACK:
      self.default_skin = neumorph". A skin that resolves to fallback metrics
      is not the rollback that was signed off.

   Paper's own mono is Atkinson Hyperlegible Mono (spec §3.7), reached through
   `--f-mono` on skinned surfaces. So two mono webfonts ship, deliberately:
   Atkinson through the Paper tokens, JetBrains for the unskinned `font-mono`
   call sites and for the neumorph skin.

   WHAT DIED WITH THE RENAME: the `:root { font-mono }` custom-property
   declaration (spelled here without its leading sigil so the acceptance grep
   for readers stays literally clean). It had ZERO readers — the theme-kit page
   that used to read it was rewritten onto
   Paper and reads `var(--f-mono)` (verified by grep across app, config, lib and
   test before deleting). The face never needed it; Tailwind's `font-mono`
   utility carries the same stack from the config.

   WHAT STAYS, and is not this file's to move: the tailwind `fontFamily.mono`
   override, the preload at `app/views/layouts/_head.html.erb:38` (which all
   three layouts reach), and the binary under `public/fonts/jetbrains-mono/`.

   The file lives in public/fonts (not the asset pipeline) so this PostCSS-built
   CSS resolves a stable, digest-free absolute URL. `unicode-range` scopes it to
   Latin so CJK/Tamil mono text falls back to the system stack.
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";

  font-style: normal;

  font-weight: 100 800;

  /* variable build — covers the 400/500/600 label weights */

  font-display: swap;

  src: url(/fonts/jetbrains-mono/JetBrainsMono-latin.woff2) format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* components/neumorphism.css is GONE (SP-7 ruling T5), together with
   paper/_compat.css below — ONE commit, never separately. It defined all 39
   `--neu-` custom properties at `:root`; the shim redefined the same 39 under
   `[data-skin]` so Paper values won by inheritance proximity. Deleting only the
   first would have left skinned regions resolving through the shim while every
   unskinned surface blanked; deleting only the second inverts it. Either
   half-state renders wrong somewhere with ZERO test signal, because an
   undefined `var()` resolves to the guaranteed-invalid value with no console
   error, no PostCSS warning and no build failure.

   It was safe to delete only after all 141 consumer references were retired:
   five stylesheets retokenized onto Paper (SP-7 Task 1) and the unscoped
   `.button` block frozen to literals and renamed components/unskinned_button.css
   (ruling T2). `test/integration/paper_token_guard_test.rb` is the instrument —
   it now sits at an EMPTY allowlist and a ceiling of 0, and it keeps that state
   permanently as the reintroduction tripwire.

   Two things this file carried are worth keeping in view:

   1. The five `.neu-shadow*` UTILITIES it once defined were already deleted at
      SP-3 Task 18 (zero class-form usages anywhere in app). They were never the
      same thing as the `neu-shadow-` custom PROPERTIES, which were live to the
      end and are what this deletion actually retires. The two were confused
      repeatedly during the program.
   2. Its forced-colors block re-applied a solid border on every neu affordance,
      because Windows High Contrast strips box-shadow. Paper's own
      tokens/base.css owns that concern now; the neu classes it named no longer
      exist. */

/* The unskinned `.button` fallback. Was components/neu_scaffold.css; renamed by
   SP-7 ruling T2 and frozen to literals, because it is NOT a delete — it is the
   only thing styling `.button` on the surfaces Paper does not reach (the Devise
   auth screens and, via `first_button_primary` returning a bare Ruby string,
   the games-hub navbar and footer CTAs). Its import stays HERE, in the same
   position, so its ties against the Paper block below are decided exactly as
   they were. See the file's own header for the measured reach. */

/* ============================================================================
   THE UNSKINNED `.button` FALLBACK.                     [SP-7 · ruling T2]

   Was `components/neu_scaffold.css`. Renamed because three documents in a row
   listed a file called `neu_scaffold.css` for deletion, and this block is not a
   delete — it is a survivor, and its name now says which job it does. The
   precedent is SP-4's own `components/form_fields.css`, which keeps an unscoped
   `.datepicker-input` as the explicit unskinned fallback for the same reason.

   ── WHAT THIS BLOCK ACTUALLY REACHES ─────────────────────────────────────

   The header this file used to carry claimed: "Zero `.button` occurrences exist
   in app/views/public, so neither this block nor its Paper successor can reach
   a game or a Bento profile." That is a literal-grep truth and it is FALSE at
   render time. `first_button_primary` (Bullet Train's `Account::ButtonsHelper`)
   returns the bare string "button" from RUBY, and
   `app/views/public/shared/_navbar.html.erb:53,55,56` and
   `_footer.html.erb:43,44` both use it. The games hub renders that chrome on
   `layout "public"` and declares no skin.

   Measured on a running server, 2026-08-14:

     /               data-skin="paper"   → covered by `[data-skin] .button`
     /main           no data-skin        → <a class="button"> Sign up / Sign in
     /main/cheritera no data-skin        → same
     /main/kepung    no data-skin        → same
     /users/sign_in  no data-skin        → <input class="button full">

   So this block has exactly two consumers, both UNSKINNED:

     1. the five Devise auth screens (Bullet Train gem views) and Doorkeeper's
        OAuth screens, and
     2. the games-hub navbar and footer sign-up / sign-in CTAs.

   Bento profiles are unaffected: `layout "splash"` renders no navbar.

   Deleting this block would repaint the games hub, which is a declared NON-GOAL
   of the Paper migration and is required to stay pixel-identical. That is why
   SP-7 froze it instead of deleting it.

   ── WHY THE VALUES BELOW ARE LITERALS, AND WHOSE LITERALS ────────────────

   SP-7 deleted both definition sites of the `--neu-` custom properties
   (`components/neumorphism.css` and `paper/_compat.css`). The four shadow
   stacks and the pill radius are therefore frozen here, as file-local
   properties declared on the component root — never on `:root`, so no new
   global token layer is introduced.

   They are `neumorphism.css`'s `:root` and `.dark` values, NOT the Paper values
   the compat shim gave the same names. On every SKINNED surface
   `[data-skin] .button` (paper/tokens/components.css) sets border-radius,
   box-shadow, transition, hover and active at (0,2,0) and beats the (0,1,0)
   rules below outright, so this block's live reach is exactly the unskinned
   surfaces — where the `:root` values are what rendered before the deletion.
   Freezing to the shim's values instead would have repainted the games hub.

   Verified before and after the freeze, both schemes, on /main (unskinned),
   /users/sign_in (unskinned) and / (skinned control): border-radius, box-shadow
   and transition identical on all three, and all six games/profile carve-out
   captures byte-identical.

   ── THE ONE EXIT ─────────────────────────────────────────────────────────

   "Auth onto Paper" is recorded as its own future sub-project, and it is what
   retires this file. It was deliberately REFUSED for SP-7: setting
   `default_skin` on the Devise controllers does not just restyle the buttons —
   post-SP-4 the ejected `themes/light/fields/_field.html.erb` emits `.input`,
   so it flips the whole auth form layer onto Paper, amends two pinned contracts
   (`skinnable_reach_test`'s data-skin count-0 rows for the Devise screens and
   `skin_boundary_test`'s declaration ledger) and needs five screens of new
   baselines. That is a restyle with review obligations; cleanup was the wrong
   vehicle for it. Until it happens, auth keeps what it has today: SP-4's
   accepted Bullet Train stock inputs plus this block's pill buttons.
   ========================================================================== */

/* Buttons — conservative: keep BT's color / padding / sizing (already on
   primary), only soften the shape + add a neumorphic shadow so they sit well
   on the soft surface. Do NOT restyle `.button-secondary` (it's link-style).
   NOTE (Tailwind v4 upgrade): BT's focus ring is an unlayered `.button:focus`
   box-shadow that currently out-specifies this rule. Under TW v4 native
   @layer, re-verify the focus ring still wins over this shadow. */

.button,
.button-alternative {
  /* Frozen from neumorphism.css: neu-strength 0.4, neu-edge-dark
     oklch(78% calc(0.012 + 0.005) 220), neu-edge-light oklch(99% 0.012 220).
     Lengths are the strength multiplier already applied. */
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(78% 0.017 220),
    -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(78% 0.017 220),
    -2px -2px 4.8px oklch(99% 0.012 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(78% 0.017 220),
    -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  border-radius: 999px;
  /* was neu-r-pill */
  box-shadow: var(--unskinned-btn-shadow-out-sm);
  transition: box-shadow 120ms ease, background-color 120ms ease;
}

/* Dark, frozen from neumorphism.css's `.dark, [data-theme="dark"]` block:
   neu-c 0.014, neu-edge-dark oklch(16% 0.014 220), neu-edge-light
   oklch(35% 0.014 220).

   These override the PROPERTIES, not the box-shadow declaration, on purpose. A
   `[data-theme="dark"] .button { box-shadow: ... }` rule would be (0,1,1) —
   the same specificity as `[data-skin] .button` — and would settle against
   Paper on source order alone. Re-declaring the custom properties keeps the
   box-shadow cascade exactly where it is today. */

.dark .button,
.dark .button-alternative,
[data-theme="dark"] .button,
[data-theme="dark"] .button-alternative {
  --unskinned-btn-shadow-out-sm:
    1.2px 1.2px 2.8px oklch(16% 0.014 220),
    -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --unskinned-btn-shadow-out:
    2.4px 2.4px 5.6px oklch(16% 0.014 220),
    -2px -2px 4.8px oklch(35% 0.014 220);
  --unskinned-btn-shadow-in-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --unskinned-btn-shadow-flat:
    0.4px 0.4px 0.8px oklch(16% 0.014 220),
    -0.4px -0.4px 0.8px oklch(35% 0.014 220);
}

.button:hover,
.button-alternative:hover {
  box-shadow: var(--unskinned-btn-shadow-out);
}

.button:active,
.button-alternative:active {
  box-shadow: var(--unskinned-btn-shadow-in-sm);
}

.button.button-smaller {
  box-shadow: var(--unskinned-btn-shadow-flat);
}

/* components/neu_forms.css is GONE (SP-4 Tasks 5 + 6). Its element-scoped
   input layer was retired onto Paper's `.input`/`.textarea`/`.select`, and its
   select2 block moved to paper/vendor/select2.css in the Paper block below.

   This comment used to add "— the only thing giving `super_select` a dark mode
   app-wide". THAT IS FALSE, and paper/vendor/select2.css:10-27, written in the
   same commit, disproves it at length: the theme gem's own
   `light/tailwind/dark-mode.css:74-110` gives select2 a complete dark
   treatment, proved by deleting the file from the build and re-measuring
   (`rgb(47, 42, 36)` still, from a (0,3,0) gem rule). Corrected at the SP-4
   pre-merge fix pass. The real reason the file is kept is in its own header:
   the gem has no notion of a Paper surface, so without it `super_select`
   renders `base-800` beside an input rendering `--paper-card`.

   Two comments from one commit contradicting each other is how a false
   "risk" survives three sub-projects — spec §8 risk 7 is the false claim in
   question. Do not restore the old wording. */

/* App chrome — the frame, sidebar, nav, bell, team switcher and user card.
   Was components/neu_layout.css; renamed `neu-*` → `app-*` and moved to
   paper/app-chrome.css by SP-3 Task 8. Two things about it are deliberate:

   1. It lives under paper/ but is NOT part of the Paper block below, and is
      NOT scoped under [data-skin]. It is app-owned chrome built FROM Paper
      tokens, with no design-system equivalent — the second of the two
      namespaces the program keeps separate. Unscoped is load-bearing: R4's
      ops rollback is flipping `self.default_skin` back to nil, and if this
      file were skin-scoped that rollback would strip the entire sidebar.
      paper/tokens/** + paper/skins/** + paper/_compat.css are the ported DS;
      paper/app-chrome.css is not, and the class-map verifier's globs say so.

   2. Its import stays HERE, before the Paper block, exactly where
      components/neu_layout.css sat. Moving it after Paper would silently
      re-decide every equal-specificity tie in the file. In particular
      paper/tokens/base.css's `[data-skin] a` (0,1,1) currently BEATS a bare
      app class on an <a>, which is why the rules in app-chrome.css whose
      subject is a link carry their component root as an ancestor. That was
      measured twice at SP-3 Tasks 5 and 6; do not "tidy" this line down into
      the block below. */

/* ============================================================================
   APP CHROME — the macro chrome around every authenticated screen: the page
   body, the left sidebar, the nav, the notification bell, the team switcher,
   the user card, and the content backplane.

   ── SP-3 Task 8: this file was components/neu_layout.css ──────────────────
   All 54 classes it defines were renamed `neu-*` → `app-*` and the file moved
   here. Read the four notes below before touching a name.

   1. THIS IS NOT THE DESIGN SYSTEM. `paper/tokens/**`, `paper/skins/**` and
      `paper/_compat.css` are the ported DS — frozen, re-syncable against
      docs/design/sama2-paper/, and every rule in them scoped under
      `[data-skin]`. This file is the OTHER namespace: app-owned chrome with no
      DS equivalent, free to change, and MOSTLY not skin-scoped.

      "Mostly" as of SP-5 R6.1. The MARKETING PARITY SHIM — the first rule
      block below this header — IS `[data-skin]`-scoped, and that is not a
      drift into the DS namespace. It is app-owned CSS whose entire job is to
      out-specify a DS rule that only exists inside a skin, so it has nowhere
      else to hang. What this note protects is ownership and re-syncability,
      not the selector shape: nothing in the shim exists in
      docs/design/sama2-paper/, and re-syncing the three DS paths never
      touches it.

      CORRECTED 2026-08-14 (SP-3 close-out, I2). The reason above used to read
      "R4's ops rollback is flipping `default_skin` back to nil; if this file
      were `[data-skin]`-scoped that rollback would strip the whole shell."
      That was true BEFORE SP-3 and is false after it. Measured at SP-3 HEAD:
      every Paper contract class now has ZERO unscoped rules — paper-card 10,
      btn 17, pill 13, seg 5, check 4, switch 4, icon-btn 4, list-row 3,
      empty-state 3, module-tab 2, avatar 2, progress 2, input 5, all of them
      `[data-skin]`-scoped. (The one unscoped `.btn` hit in the tree is
      `.has-touch .btn` in components/touch_optimizations.css, a pre-Paper
      touch tweak, not a skin rule.) So flipping `default_skin` to nil now
      renders the whole account LEAF surface as unstyled HTML inside a
      perfectly good shell — a worse outcome than the one the old note was
      guarding against.

      THE POST-SP-3 OPS ROLLBACK IS `self.default_skin = "neumorph"`, which
      keeps a complete skin resolving. This file staying unscoped is still
      right — it is app chrome, not DS — but "the rollback needs it unscoped"
      is no longer the argument for it.

      The class-map verifier (sp3-class-map.md §9) scans only the three DS
      paths, so it still catches a chrome name colliding with a DS one.

   2. `app-` IS NOT A RESERVED APP PREFIX. The DS already owns `.app-header`
      (+ its `.title` child) in paper/tokens/components.css. Nothing here may be
      called `app-header`, and nobody may infer ownership from the prefix.

   3. TWO SIDEBARS, TWO NAMES, AND THE MAP GOT THIS WRONG. sp3-class-map.md
      rows C-1 and C-2 both targeted `app-sidebar` while its own note said "do
      not merge them". They are structurally different elements:

        .app-sidebar-shell  the layout column / drawer panel — surface + shadow.
                            Set in layouts/account.html.erb and in
                            themes/light/menu/_mobile.html.erb (the drawer
                            shares it and never gets --compact).
        .app-sidebar-col    the width-animating column inside the shell (16rem,
                            4.5rem when compact).
        .app-sidebar        the nav BLOCK inside the column — flex column,
                            padding, gap. BEM parent of __brand, __nav,
                            __toggle, __section-label, __divider, __avatar.

      ~30 selectors below depend on the distinction (`.app-sidebar-shell--compact
      .app-sidebar`, `.app-sidebar .app-nav-item`, …). Merging them would put
      `display:flex; padding` on the shell and `background; box-shadow` on the
      nav. `neu-app-sidebar` therefore became `app-sidebar-shell`, not
      `app-sidebar`; C-2 keeps `app-sidebar` because C-3…C-9 commit to
      `app-sidebar__*`.

   4. `.main-container`, `.main-container-padding` and `.button_to` are NOT
      renamed and were moved verbatim. They are Bullet Train class names,
      invisible to a `.neu-*` grep, and the first two carry PWA safe-area math
      with a must-sum-to-exactly-100dvh constraint (see "Frame geometry"
      below). Same for `.app-main-pad`'s bottom-nav clearance.
   ──────────────────────────────────────────────────────────────────────────

   BT's light theme paints the body a secondary→primary gradient and the sidebar
   a primary-700→800 gradient (the "blue frame"). This layer overrides those to
   Paper surfaces so the whole shell reads as one calm plane with the content
   cards floating on it — in BOTH light and dark.

   Scoped to explicit marker classes set in app/views/layouts/account.html.erb
   (.app-frame / .app-sidebar-shell / .app-content) and the mobile menu
   partial — NOT by matching from-primary-* (that also hits content banners).
   Token source: paper/tokens/, directly, since SP-7 Task 1. It used to be
   `components/neumorphism.css` by way of the `paper/_compat.css` shim; all 80
   of those reads were substituted for the Paper tokens the shim resolved them
   to, plus the three frozen values in the block below the marketing shim.

   ZERO `!important` — every remaining occurrence of the word in this file is
   comment prose. Keep it that way.

   This file used to open with the claim "!important is required to beat BT's
   utility classes (gem-rendered sidebar text we can't edit at the source)".
   That claim, and all 63 declarations it justified, are gone in four steps:

   · SP-3 Task 3 — the frame/content/sidebar backgrounds (the plan's Group A,
     5 declarations). The utilities they were fighting were written in
     app/views/layouts/account.html.erb, which this app owns, so they were
     deleted rather than out-shouted.
   · SP-3 Task 4 — themes/light/menu/_close.html.erb ejected, removing the
     last gem-rendered markup inside the sidebar.
   · SP-3 Task 5 — the `:is(...)` shotgun (Group B, 5) deleted, and with it
     the 46 declarations (Group C) that existed only to out-specify it.
   · SP-3 Task 6 — the dead flyout override (Group E, 1) deleted and the
     notification bell (Group D, 6) put on specificity parity.

   ONE competitor remains and it is real, so read this before "simplifying" an
   ancestor off any rule below. paper/tokens/base.css declares
   `[data-skin] a { color: var(--brand-ink); text-decoration: underline }` at
   (0,1,1), and Paper is imported after this file. A bare `.app-foo` on an <a>
   is (0,1,0) and LOSES. Every rule here whose subject is an <a> therefore
   carries its component root as an ancestor — `.app-sidebar …`, `.app-bell …`
   — to reach (0,2,0)+, which is the same shape Paper gives its own components
   (`[data-skin] .btn`). Rules whose subject is a span/div/button need no
   ancestor, `[data-skin] a` cannot match them, and they deliberately have
   none. Reaching for `!important` instead of the ancestor is how this file got
   into trouble the first time.
   ========================================================================== */

/* ============================================================================
   MARKETING PARITY SHIM — utility-styled anchors and headings   [SP-5 · R6.1]
   ============================================================================
   THE PROBLEM. paper/tokens/base.css:113 declares
   `[data-skin] a { color: var(--brand-ink); text-decoration: underline }` and
   paper/tokens/typography.css:71 declares
   `[data-skin] :is(h1,h2,h3,h4) { color: var(--ink) }`. Both are (0,1,1).
   EVERY Tailwind colour utility is (0,1,0), so on a skinned surface every
   `text-white` / `text-violet-700` on an anchor or a heading is DEAD.

   On the account surface the sanctioned fix is specificity parity via the
   component root (see the long note further down this file, and
   docs/design/paper-migration/verification-loop.md). MARKETING HAS NO
   COMPONENT ROOT — it is raw utilities on bare `<a>`/`<h2>` — so that fix
   cannot reach it. Measured on the SP-5 pilot (`use_cases/personal`, commit
   `3f784f8a`): the CTA heading computed `oklch(0.24 0.014 70)`, near-black on
   a saturated violet band, and both CTA buttons computed
   `oklch(0.4 0.15 255)` and underlined. `/timers` rendered all twelve preset
   cards underlined through numeral, label and tagline.

   WHY NOT `!important` / cascade order. This file compiles at
   application.css:86, BEFORE the Paper tokens at 125-143, so an
   equal-specificity rule here silently loses. Re-ordering cannot close a
   specificity gap — measured twice at SP-3 Tasks 5 and 6. `!important` is
   forbidden by this file's own zero-shout rule. The counts below win
   regardless of source order.

     anchor    (0,3,2)  vs `[data-skin] a`       (0,1,1)
     :hover    (0,4,2)  vs `[data-skin] a:hover` (0,2,1)
     heading   (0,2,1)  vs the h1-h4 rule        (0,1,1)

   REACH — why the compound hook is the whole safety argument. `data-skin` and
   `public-layout` appear together on exactly one element in this app: the
   `<body>` of app/views/layouts/public.html.erb on its SKINNED branch. So:

     marketing        `public-layout` + `data-skin`  → matches
     the four games   `public-layout`, NO `data-skin` → cannot match
     account shell    `data-skin`, but `.app-frame`   → cannot match
     Bento profiles   `.splash-layout`, neither       → cannot match

   `public-layout` is emitted by no other layout (`grep -rn public-layout app/`
   → layouts/public.html.erb only). The blast radius is marketing, by
   construction. This is the one `[data-skin]`-scoped block in this
   app-owned file, and the scoping is what makes it safe rather than what
   makes it design-system: nothing here exists upstream.

   INERT BY DEFAULT. Every declaration falls back to Paper's OWN value, so
   adding this block repaints nothing. Call sites opt in with Tailwind
   arbitrary-property utilities, which INHERIT — one class on a band root or a
   chrome root covers its whole subtree. The four props, named WITHOUT their
   square brackets on purpose — this file is one of Tailwind's content sources
   (every .css file under app/assets/stylesheets, per the theme gem's config),
   so a bracketed example in prose compiles into a real utility.

   That path is written in prose rather than as a glob deliberately: a glob
   spells a star followed by a slash, which CLOSES this comment. It did, once
   — postcss then died on the remains of this paragraph, `light:build:css`
   exited 1, and `build:css` chained it with `;` so the overall script still
   exited 0 and `assets:precompile` reported success while shipping a stale
   bundle. Never write a glob inside a CSS comment. Today that emits
   nothing junk only because the examples happen to duplicate live classes;
   write one with a placeholder value and you ship a class nobody uses:

     --app-link-ink        --app-link-hover-ink
     --app-link-decoration --app-heading-ink

   It does NOT resurrect dead utilities: a `text-white` on an anchor stays
   dead. The dialect is REPLACEMENT — a dead colour intent becomes the prop
   carrying the same value.

   `text-decoration-LINE`, not the `text-decoration` shorthand. R6.1's draft
   wrote the shorthand; the shorthand resets `text-decoration-thickness` to
   `auto`, and base.css sets it to `1.5px` in a longhand AFTER its own
   shorthand. At this rule's specificity that reset would win and every
   marketing link that KEEPS its underline would silently change weight
   (measured: 1.5px today). The longhand touches only the property in dispute.

   THE `:not()` GUARD is `ce8552ad`'s component list plus the Bullet Train
   `.button` family. Component-shaped anchors already have correct, higher-
   specificity rules (`[data-skin] :is(a,button):is(.paper-card,…)` at (0,2,1);
   `[data-skin] .button` from SP-4 Task 7). Without the guard this shim would
   re-underline every `.paper-card` cross-link the pilot already fixed.
   `.button-secondary` is deliberately NOT excluded — SP-4 ruled it Bullet
   Train's LINK-style control, so on marketing it takes the chrome link props
   like any other link.

   AND THAT EXCLUSION IS REQUEST-ORDER DEPENDENT, which nothing else records.
   Bullet Train's `first_button_primary` (bullet_train-1.38.0/app/helpers/
   account/buttons_helper.rb) returns `"button"` on the FIRST call per context
   in a request and `"button-secondary"` on every call after. So the navbar's
   primary CTA is excluded by `[class~="button"]` only while the navbar is the
   first caller in the request. Render anything that calls that helper ahead of
   `public/shared/_navbar` and "Sign up" silently becomes `.button-secondary`,
   drops out of the guard, and starts taking `--app-link-ink: var(--ink-3)`
   from the nav root — a filled brand CTA turning into muted body text, with no
   error anywhere. Today the navbar is first and the footer's two CTAs are
   already `.button-secondary`, which is why they read as links.

   `[class~="button"]`, NOT `.button` — AND THIS IS NOT STYLE. MEASURED in the
   built bundle. The light theme gem's own components.css does
   `@apply button` / `@apply button-alternative` in four places
   (bullet_train-themes-light-1.38.0/.../light/tailwind/components.css:53,62,
   181,184), and Tailwind implements `@apply <a-class-you-defined>` by COPYING
   every rule whose selector mentions that class, with the applying selector
   substituted for it. Writing `.button` inside this `:not()` therefore emitted
   SIX extra copies of this shim, each with `.button` (or
   `.button-alternative`) swapped for something else — `.button-color`,
   `.pagy a:not(.gap)`, `.btn-toggle input[type=radio]:checked + button`, … .
   Every one of those copies is a rule with the SAME declarations whose
   `:not()` list no longer excludes `.button`, so a `<a class="button">`
   matched one and got repainted; worse, one copy's `:not()` argument is
   (0,3,2), which drags that copy to (0,5,4) and puts it above
   `[data-skin] .button` (0,2,0). The guard silently inverted into a bug.
   `[class~="button"]` selects exactly the same elements — a whitespace-
   separated token equal to `button`, so `button-secondary` still does NOT
   match — at the same (0,1,0), and an attribute selector is invisible to
   `@apply`'s class substitution. Verified: one copy of each rule in the built
   bundle after the change, six before.
   If you ever name a class here that something `@apply`s, you will get the
   same silent duplication. Check `grep -rn '@apply[^;]*\bNAME\b'` across the
   gems before adding one.

   KNOWN CONSEQUENCE, measured and accepted. The heading rule rises to (0,2,1),
   which now also outranks Tailwind's `group-hover:text-*` at (0,2,0). A
   marketing card whose heading changes colour on hover must express that as
   a group-hover `--app-heading-ink` arbitrary property; the raw utility is dead. `dark:text-*`
   is NOT affected — `darkMode: 'selector'` compiles to
   `.dark\:x:where(.dark, .dark *)` and `:where()` adds zero, so those
   utilities were already (0,1,0) and already losing before this block existed.

   `a:is(a)` IS HEADROOM, AND `a` ALONE ALREADY WINS TODAY. Say so plainly,
   because this is the line a simplifier deletes and every other decision in
   this block is defended by a count. `:is(a)` contributes (0,0,1) and nothing
   else — the same subject, matched twice. Without it the rules are (0,3,1) and
   (0,4,1); with it, (0,3,2) and (0,4,2).

   Measured against the built bundle: of every rule under `[data-skin]` whose
   subject is an anchor, the highest that can reach a MARKETING anchor and
   compete for `color` / `text-decoration-line` is (0,2,1) —
   `[data-skin] a:hover`, `[data-skin] a.button`, `[data-skin] .tabbar > a` and
   `[data-skin] :is(a,button):is(.paper-card,…)` all sit exactly there, and the
   last two are excluded by the guard anyway. So the plain form clears the
   field by a full class, and this extra element unit defends against nothing
   that exists.

   It is kept because R6.1 specifies it and because the margin is free, not
   because it is load-bearing. Dropping it is safe TODAY; what would make it
   matter is a future `[data-skin]` rule at (0,3,1) whose subject is an anchor.
   For scale: the file already contains anchor-subject rules far above both
   forms — `[data-skin] .pagy a:not(.gap):not([href]).ghost:hover` is (0,6,1) —
   but `.pagy` is account pagination and never renders inside `.public-layout`,
   so it is not a competitor here. If you do simplify it away, re-run that
   census first; do not reason from this paragraph alone.

   THE TWO `:not()` LISTS BELOW ARE DUPLICATED VERBATIM AND MUST STAY THAT WAY.
   ~140 characters each. A component excluded from one but not the other is a
   control that renders correctly at rest and wrong under the cursor, or the
   reverse — the kind of split nobody notices in a diff. Edit both or neither.
   `test/integration/paper_marketing_shim_guard_test.rb` fails if they drift,
   and also fails if a name here becomes `@apply`-reachable.

   Filed upstream as finding 5 in
   docs/design/paper-migration/upstream-report-01.md. This shim IS the
   documented fallback; it dies if upstream ships a consumer-content story.
   ========================================================================== */

/* KEEP THIS `:not()` LIST IDENTICAL TO THE `:hover` ARM BELOW. */

[data-skin].public-layout
  a:is(a):not(.paper-card, .paper-well, .row-tappable, .list-row, .pill, .module-tab, .btn, [class~="button"], [class~="button-alternative"]) {
  color: var(--app-link-ink, var(--brand-ink));
  text-decoration-line: var(--app-link-decoration, underline);
}

/* KEEP THIS `:not()` LIST IDENTICAL TO THE RESTING RULE ABOVE. */

[data-skin].public-layout
  a:is(a):not(.paper-card, .paper-well, .row-tappable, .list-row, .pill, .module-tab, .btn, [class~="button"], [class~="button-alternative"]):hover {
  color: var(--app-link-hover-ink, var(--brand-strong));
}

[data-skin].public-layout :is(h1, h2, h3, h4) {
  color: var(--app-heading-ink, var(--ink));
}

/* ============================================================================
   THE THREE VALUES PAPER HAS NO TOKEN FOR              [SP-7 Task 1 · ruling T3]
   ============================================================================
   Every other value in this file now reads a Paper token directly. Until SP-7
   all 80 of them went through the `--neu-` compat shim, which re-pointed the
   old names at Paper inside `[data-skin]`; substituting the shim's own
   right-hand sides at the call sites is invariant by construction, because
   this file's markup is the account layout's chrome and that layout always
   carries `data-skin` (`Account::ApplicationController` declares
   `self.default_skin = "paper"`). Three values had nothing to substitute TO,
   and are frozen here instead.

   Origin token names below are written WITHOUT their leading double dash on
   purpose: the SP-7 ratchet (test/integration/paper_token_guard_test.rb)
   counts literals, comments included, and spelling them in full would keep
   this file on its allowlist forever.

     --chrome-well-sm      was `neu-shadow-in-sm`. Paper's elevation scale
                           (--lift-0 … --lift-3) is entirely OUTER — there is
                           no inset "well", because in Paper the drawn border
                           does the structural work neumorphism did with a
                           carve. Aliasing an inset shadow to an outer one
                           would make the ACTIVE nav row read as raised rather
                           than pressed, which is backwards. Frozen at the
                           shim's values with its `neu-strength` (0.4) and the
                           two `neu-edge` helpers expanded to literals:
                           0.4 × 2px = 0.8px, 0.4 × 5px = 2px,
                           0.4 × 4px = 1.6px. Redesigning the wells is
                           recorded backlog (SP-7 ruling T7, item 15).

     --chrome-accent-soft  was `neu-accent-soft`. Deliberately NOT
                           `--brand-tint`, which is OPAQUE: this fill sits on
                           the active nav row over the sidebar's own surface,
                           not over `--paper`, so an opaque swap would change
                           the composited result. Stays a translucent
                           color-mix re-based on `--brand`; 14% light / 22%
                           dark is spec §3.3's prescription.

     --chrome-r-xs         was `neu-r-xs`, an 8px step. Paper's radius scale
                           starts at `--r-sm`, and aliasing there would
                           collapse two distinct steps into one — and under
                           the neumorph skin (the documented ops rollback,
                           skinnable.rb:83) `--r-sm` is 12px, not 8px, so the
                           collapse would be visible. Held at the literal.

   DECLARED ON THE FIVE SELECTORS THAT READ THEM, not on `.app-frame` and
   certainly not on `:root`. A body-level declaration would work today and
   would be a new global token layer tomorrow, which is the thing SP-7 exists
   to remove. A consumer-scoped declaration also cannot silently blank if a
   piece of chrome is ever rendered outside the account frame.
   ========================================================================== */

.app-nav-item--active,
.app-sidebar__avatar,
.app-team-switcher__item,
.app-user-card__item,
.app-user-card__impersonating {
  --chrome-r-xs: 8px;
  --chrome-well-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --chrome-accent-soft: color-mix(in oklab, var(--brand) 14%, transparent);
}

/* Dark answers to TWO selectors and always has to: Bullet Train toggles
   `.dark` on <html>, Paper's own previews use `[data-theme="dark"]`. Miss
   either and the pressed nav row keeps its light lighting on a dark page.
   `--chrome-r-xs` is scheme-independent and is deliberately not repeated. */

.dark .app-nav-item--active,
.dark .app-sidebar__avatar,
.dark .app-team-switcher__item,
.dark .app-user-card__item,
.dark .app-user-card__impersonating,
[data-theme="dark"] .app-nav-item--active,
[data-theme="dark"] .app-sidebar__avatar,
[data-theme="dark"] .app-team-switcher__item,
[data-theme="dark"] .app-user-card__item,
[data-theme="dark"] .app-user-card__impersonating {
  --chrome-well-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --chrome-accent-soft: color-mix(in oklab, var(--brand) 22%, transparent);
}

/* ── Page frame: flat page surface ────────────────────────────────────── */

/* Qualified with `body` (0,1,1) on purpose, not shouted with !important.
   `.app-frame` alone is (0,1,0) and ties with paper/tokens/base.css's
   `[data-skin] { background: var(--paper) }`, which is imported later and so
   would win the tie — flattening the sunk frame onto the raised sidebar's
   plane. The class is only ever applied to <body> (layouts/account.html.erb),
   so qualifying costs nothing. SP-3 Task 3. */

body.app-frame {
  background: var(--paper-sunk);
}

/* ── Content backplane: same plane as the body so cards float seamlessly ─ */

.app-content {
  background: var(--paper-sunk);
  /* Replaces the `dark:border-slate-500` deleted from the layout, so the
     `lg:border-l` divider still gets a colour in both schemes. Written against
     Paper's `--edge` rather than the neu hairline alias, which resolves to the
     exact same value while adding no new compat-shim debt for SP-7 to unwind
     (and this file becomes paper/app-chrome.css in Task 8). `--edge` is
     defined on :root and on .dark in paper/tokens/colors.css, so it resolves
     on the un-skinned path too. SP-3 Task 3. */
  border-color: var(--edge);
}

/* ============================================================================
   FRAME GEOMETRY (PWA-safe) — the wrapper padding and container min-heights
   for layouts/account. In iOS standalone (viewport-fit: cover +
   black-translucent) the viewport extends behind the status bar and home
   indicator, so:
   - the wrapper's md padding must be at least the safe-area insets or the
     card's top edge is cut off by the status bar;
   - padding + min-height must sum to EXACTLY 100dvh or every page scrolls by
     the leftover few px even with no content below the fold.
   The body-level env() bottom padding (application.css) is zeroed here — this
   frame owns its own insets.
   ========================================================================== */

.app-frame {
  padding-bottom: 0;
  /* overrides the global body safe-area padding */
}

/* Mobile: edge-to-edge card; the sticky header (pt-safe-top) fills the status
   bar and the fixed bottom nav covers the home indicator. Exactly one dvh
   tall — no phantom scroll. */

.main-container {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Content padding inside <main>. Below lg the fixed bottom nav overlays the
   page, so reserve its height + the home-indicator inset at the bottom. */

.app-main-pad {
  padding: 0.5rem 0.25rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .app-main-pad {
    padding-bottom: 0.5rem;
    /* bottom nav is lg:hidden */
  }
}

@media (min-width: 768px) {
  /* Floating-card look: 1.25rem gutter, grown to the safe-area inset when the
     status bar / home indicator would otherwise overlap the card. */

  .main-container-padding {
    padding: max(1.25rem, env(safe-area-inset-top, 0px))
             1.25rem
             max(1.25rem, env(safe-area-inset-bottom, 0px));
  }

  /* Offset the wrapper's paddings so padding + card = exactly 100dvh. */

  .main-container {
    min-height: calc(100vh - max(1.25rem, env(safe-area-inset-top, 0px)) - max(1.25rem, env(safe-area-inset-bottom, 0px)));
    min-height: calc(100dvh - max(1.25rem, env(safe-area-inset-top, 0px)) - max(1.25rem, env(safe-area-inset-bottom, 0px)));
  }
}

/* ── Sidebar: a raised Paper surface instead of the blue gradient ─────── */

.app-sidebar-shell {
  background: var(--paper);
  box-shadow: var(--lift-2);
}

/* ── The `:is(...)` sidebar shotgun used to live here ──────────────────────
   DELETED in SP-3 Task 5. Five rules, each `!important`, each at (0,3,1) —
   `.app-sidebar-shell` (0,1,0) + `:is(<element>)` (0,0,1) + two `:not([attr])`
   (0,2,0). They blanket-painted colour onto every a/button/h1-h4/p/span/div
   and every svg inside the sidebar, plus a hover colour and a hover
   background, and their specificity beat every single-class rule in this file
   even when the single-class rule also shouted `!important`. That is why 46
   declarations below carried an `!important` that looked redundant and was
   not: they were losing to this, not to Tailwind.

   Its stated justification — "gem-rendered sidebar text we can't edit at the
   source" — expired in two steps. The SP-2 sidebar revamp (4cd9f12e) replaced
   the gem's sidebar with app-owned partials, and SP-3 Task 4 ejected
   themes/light/menu/_close.html.erb, the last gem partial that still rendered
   inside `.app-sidebar-shell` (its `text-white` SVG was the only thing the
   `svg:not([class*="bg-"])` rule was still doing real work for).

   Everything the blanket painted is now painted by the named rules below,
   which is why it can go without a single replacement rule.
   ────────────────────────────────────────────────────────────────────────── */

/* ── The collapsed-section flyout override used to live here ───────────────
   DELETED in SP-3 Task 6 (the plan's "Group E", 1 !important). It matched
   `.app-sidebar-shell [class*="bg-primary-700"] / [class*="bg-base-700"]` — a
   pattern-match on somebody else's Tailwind utilities — to repaint the
   hover-flyout submenu that themes/light/menu/_subsection.html.erb renders.

   Re-audited before deleting, three ways, all agreeing: `_subsection` has zero
   render sites (`grep -rn subsection app/views app/helpers app/controllers
   config` finds only two prose comments, and no installed bullet_train gem
   renders it either); `account/shared/_menu.html.erb` renders only
   menu/close, menu/team_switcher, menu/neu_item and menu/user_card; and the
   live DOM has ZERO elements matching the selector inside `.app-sidebar-shell`
   in all three sidebar states — expanded rail, compact rail and the open
   mobile drawer. The four remaining `bg-*-700` elements on the page are in the
   content area, which this selector was scoped away from.

   If a flyout ever comes back, restyle the ejected partial. Do not
   reintroduce a rule that pattern-matches utility class names: it fires on any
   element that happens to carry the string, which is why it had to shout.
   ────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   SP-2 SIDEBAR REDESIGN — flat neu IA (brand → team-switcher → nav → user card)
   The new _menu partial renders `.app-sidebar`; these rules style the flat nav
   rows, the team-switcher card + <details> popover, count badges, section
   labels, the bottom user card, and the breadcrumb-row notification bell. All
   with dark: pairs via the neu tokens (light + dark surfaces already toggle in
   neumorphism.css). Arbitrary-value token forms only.
   ========================================================================== */

/* ── Sidebar shell ─────────────────────────────────────────────────────── */

.app-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0.75rem 0.75rem 0;
  gap: 0.5rem;
}

.app-sidebar__nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  padding-top: 0.25rem;
}

/* ── Brand ─────────────────────────────────────────────────────────────── */

.app-sidebar__brand {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 0.75rem;
}

/* Scoped through `.app-sidebar` for the same reason as `.app-nav-item` below,
   and for one extra: `text-decoration: none` here is (0,1,0) and loses to
   Paper's `[data-skin] a { text-decoration: underline }` at (0,1,1), so since
   SP-2 the whole sidebar has been rendering underlined nav chrome that three
   separate rules in this file explicitly declare as not-underlined. Raising
   the specificity to fight for `color` restores that too. Underlining is a
   Paper rule for links in prose; sidebar rows are navigation, distinguished
   by position, icon, hover and the active pill. SP-3 Task 5. */

.app-sidebar .app-brand {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}

/* The brand row's only hover affordance. It used to come from the deleted
   blanket's `.app-sidebar-shell a:hover { background-color: … !important }`,
   which reached this <a> incidentally — the SP-2 design gave every other
   interactive row an explicit hover but never gave this one. Named here so
   the control does not silently lose its feedback: its visible text is
   `.app-brand__mark`, which carries its own colour, so a colour-only hover
   would be invisible. SP-3 Task 5. */

.app-sidebar .app-brand:hover {
  background-color: var(--paper-sunk);
}

.app-brand__mark {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.app-brand__mark sup {
  font-size: 0.7em;
  color: var(--brand);
  font-weight: 800;
}

/* ── Section labels + dividers ─────────────────────────────────────────── */

.app-sidebar__section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.75rem 0.75rem 0.25rem;
}

.app-sidebar__divider {
  height: 1px;
  margin: 0.5rem 0.25rem;
  background: var(--edge);
}

/* ── Nav item (row: icon + label + badge) ──────────────────────────────── */

/* MEASURED, SP-3 Task 5 — read this before "simplifying" the `.app-sidebar `
   ancestor off any rule in this file.
   The nav rows are <a> elements, and paper/tokens/base.css:113 declares
   `[data-skin] a { color: var(--brand-ink) }` at (0,1,1). A bare
   `.app-nav-item` is (0,1,0) and LOSES to it — and Paper is imported after
   this file, so source order does not save it either. That is a SECOND
   competitor, independent of the `:is(...)` blanket this task deleted, and it
   only came into existence when SP-2 landed the Paper layer; the plan's
   `!important` ledger was measured before that and classifies these as
   "blanket-only". They are not.
   So: every rule here whose subject is an <a> is scoped through `.app-sidebar`
   (the shell class `account/shared/_menu.html.erb` puts on its root, present
   in BOTH the desktop rail and the mobile drawer) to reach (0,2,0)+. Rules
   whose subject is a <span>/<div>/<button> need no ancestor — `[data-skin] a`
   cannot match them — and deliberately do not have one.
   This is the same shape Paper gives its own components (`[data-skin] .btn`
   is (0,2,0) for exactly this reason), and it costs zero `!important`. */

.app-sidebar .app-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.app-sidebar .app-nav-item:hover {
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: var(--lift-0);
}

/* No `color` here on purpose. `color: inherit !important` used to sit on this
   rule and on a `.app-nav-item__icon svg` companion, purely to beat the
   deleted blanket's `svg:not([class*="bg-"])`. `color` already inherits by
   default, so with no competitor the declarations were no-ops — deleted
   outright rather than de-shouted. SP-3 Task 5. */

.app-nav-item__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.app-nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active pill: soft primary tint + primary ink (aria-current="page").
   The `.app-sidebar-shell ` ancestor and the `!important` both existed only to
   out-specify the deleted blanket, and they had to go together: dropping the
   `!important` alone would have left (0,3,0) beating `.app-nav-item:hover`
   for the wrong reason, and dropping the ancestor alone would have left an
   `!important` fight at equal specificity. Now it is a plain modifier at
   (0,1,0) / (0,2,0), which beats the base rule and the `:hover` rule on
   SOURCE ORDER — both are declared above this block. Do not move it up.
   SP-3 Task 5. */

.app-sidebar .app-nav-item--active,
.app-sidebar .app-nav-item--active:hover {
  color: var(--brand-ink);
  background: var(--chrome-accent-soft);
  box-shadow: var(--chrome-well-sm);
}

/* The ` svg` arm is redundant while `.app-nav-item__icon` declares no colour
   of its own (the icon inherits), and is kept as a cheap guard against a
   future rule reaching the <svg> directly. */

.app-nav-item--active .app-nav-item__icon,
.app-nav-item--active .app-nav-item__icon svg {
  color: var(--brand);
}

/* Count badge (chat/inbox unread). */

.app-nav-item__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.4rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  background: var(--brand);
  color: var(--on-brand);
}

/* ── Avatar (initials square) ──────────────────────────────────────────── */

/* NB: intentionally NOT `.neu-avatar` — that's a round gradient avatar in
   neumorphism.css used app-wide (inbox threads, custom domains, theme kit).
   This is the sidebar's own square-initials variant, scoped by name. */

.app-sidebar__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--chrome-r-xs);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The "out-specify the blanket" block used to sit here — six selectors whose
   only job was to re-declare, at (0,2,0), a colour their own base rule had
   already declared at (0,1,0), because the blanket beat both. Deleted whole
   in SP-3 Task 5; the base rules below/above now stand unopposed. Four of the
   six were byte-identical duplicates (`.app-sidebar__avatar`,
   `.app-nav-item__badge`, `.app-brand__mark sup`,
   `.app-user-card__item--logout`) and a fifth,
   `.app-sidebar-shell .app-bell__badge`, could never match at all — the bell
   renders in the breadcrumb row, outside the sidebar.

   The sixth was NOT a duplicate and is a deliberate decision, not an
   oversight: `.app-team-switcher__item--new` was re-declared as the brand FILL
   weight here while its base rule says the brand INK weight. Both lost to the
   blanket, so neither is "what shipped". The base rule wins now, which is the
   right one: `--brand-ink` is the AA-rated text weight of the brand hue and
   `--brand` is the fill weight, and this is a text link on a light popover.
   (Token names in this paragraph were the compat shim's until SP-7 Task 1;
   they now name their Paper equivalents, which is the same decision.) */

.app-sidebar__avatar--sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
}

/* ── Team-switcher card + <details> popover ────────────────────────────── */

.app-team-switcher {
  position: relative;
}

.app-team-switcher__current {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  list-style: none;
  background: var(--paper-2);
  box-shadow: var(--lift-1);
}

.app-team-switcher__current::-webkit-details-marker {
  display: none;
}

.app-team-switcher__current:hover {
  box-shadow: var(--lift-2);
}

.app-team-switcher__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.app-team-switcher__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-team-switcher__sub {
  font-size: 0.6875rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-team-switcher__chevron {
  flex: 0 0 auto;
  color: var(--ink-2);
  transition: transform 0.18s ease;
}

.app-team-switcher[open] .app-team-switcher__chevron {
  transform: rotate(180deg);
}

.app-team-switcher__menu {
  margin-top: 0.375rem;
  padding: 0.375rem;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  box-shadow: var(--lift-1);
  border: 1px solid var(--edge);
}

.app-team-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-sidebar .app-team-switcher__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: var(--chrome-r-xs);
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
}

.app-sidebar .app-team-switcher__item:hover {
  color: var(--ink);
  background: var(--paper);
}

/* button_to renders <form class="button_to"><button …>; make the switch row
   look and fill like the link rows. */

.app-team-switcher__list .button_to,
.app-team-switcher__menu > .button_to {
  width: 100%;
  margin: 0;
}

.app-team-switcher__item--switch {
  border: 0;
  cursor: pointer;
  text-align: left;
  background: transparent;
}

.app-team-switcher__item-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar .app-team-switcher__item--new {
  font-weight: 600;
  color: var(--brand-ink);
}

.app-team-switcher__divider {
  border: 0;
  border-top: 1px solid var(--edge);
  margin: 0.375rem 0;
}

/* ── User card (pinned bottom) ─────────────────────────────────────────── */

.app-user-card {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: 0.5rem 0 0.75rem;
  margin-top: 0.5rem;
  background: var(--paper);
}

.app-user-card__inner {
  position: relative;
}

.app-user-card__trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  background: var(--paper-2);
  box-shadow: var(--lift-1);
}

.app-user-card__trigger:hover {
  box-shadow: var(--lift-2);
}

.app-user-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.app-user-card__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user-card__email {
  font-size: 0.6875rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user-card__chevron {
  flex: 0 0 auto;
  color: var(--ink-2);
}

.app-user-card__menu {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  padding: 0.375rem;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  box-shadow: var(--lift-2);
  border: 1px solid var(--edge);
  z-index: 40;
}

.app-user-card__menu.hidden {
  display: none;
}

.app-user-card__group-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.25rem 0.55rem;
}

.app-user-card__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: var(--chrome-r-xs);
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  background: transparent;
  text-align: left;
}

.app-user-card__item:hover {
  color: var(--ink);
  background: var(--paper);
}

/* Same story as `.app-nav-item__icon`: the `color: inherit !important` here
   and on a ` svg` companion existed only to beat the deleted blanket's svg
   rule. `color` inherits by default, so both were no-ops without it and are
   deleted rather than de-shouted. SP-3 Task 5. */

.app-user-card__item-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

/* Declared AFTER `.app-user-card__item:hover` and matching it on hover too.
   Without the `:hover` arm the row would drop to plain ink the moment the
   pointer lands on it — `.app-user-card__item:hover` is (0,2,0) against this
   modifier's (0,1,0) — and a destructive row that stops reading as
   destructive under the cursor is the wrong way round. */

.app-user-card__item--logout,
.app-user-card__item--logout:hover {
  color: var(--danger-ink);
}

.app-user-card__divider {
  border: 0;
  border-top: 1px solid var(--edge);
  margin: 0.375rem 0;
}

.app-user-card__impersonating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--chrome-r-xs);
  background: color-mix(in oklab, var(--warn) 20%, transparent);
}

.app-user-card__impersonating-text {
  font-size: 0.75rem;
  color: var(--warn-ink);
}

.app-user-card__impersonating-stop {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warn-ink);
  text-decoration: underline;
}

/* ============================================================================
   SIDEBAR FULL ↔ COMPACT TOGGLE — desktop-only icon rail. The account layout
   adds .app-sidebar-shell--compact (cookie-backed, flipped live by the
   sidebar-toggle Stimulus controller) on the desktop wrapper; the mobile
   drawer shares .app-sidebar-shell but never gets the modifier, so everything
   below is scoped to --compact.
   ========================================================================== */

/* Column width (replaces the old hard-coded w-64 in the layout). */

.app-sidebar-col {
  width: 16rem;
  transition: width 0.2s ease;
}

.app-sidebar-shell--compact .app-sidebar-col {
  width: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar-col {
    transition: none;
  }
}

/* Toggle button (brand row). Chevron points left when full, right (rotated)
   when compact. */

.app-sidebar__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* `.app-sidebar-shell ` dropped with the `!important` — same pairing rule as the
   active pill: the ancestor was only ever there to out-specify the blanket,
   and (0,2,0) here still beats the (0,1,0) base rule above. SP-3 Task 5. */

.app-sidebar__toggle:hover {
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: var(--lift-1);
}

.app-sidebar__toggle svg {
  transition: transform 0.2s ease;
}

.app-sidebar-shell--compact .app-sidebar__toggle {
  margin-left: 0;
}

.app-sidebar-shell--compact .app-sidebar__toggle svg {
  transform: rotate(180deg);
}

/* Shell: tighter gutters; brand stacks over the toggle. The brand tail
   ("ama") hides, leaving the "s²" monogram. */

.app-sidebar-shell--compact .app-sidebar {
  padding: 0.75rem 0.5rem 0;
}

.app-sidebar-shell--compact .app-sidebar__brand {
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem 0 0.5rem;
}

.app-sidebar-shell--compact .app-brand__tail {
  display: none;
}

/* Nav rows: centered icons, labels hidden (the row keeps its title tooltip). */

.app-sidebar-shell--compact .app-nav-item {
  position: relative;
  justify-content: center;
  padding: 0.625rem 0;
}

.app-sidebar-shell--compact .app-nav-item__label {
  display: none;
}

/* Count badge collapses to a corner dot. */

.app-sidebar-shell--compact .app-nav-item__badge {
  position: absolute;
  top: 0.3rem;
  right: 0.55rem;
  min-width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* Section labels become hairlines (keeps the grouping cue without text). */

.app-sidebar-shell--compact .app-sidebar__section-label {
  font-size: 0;
  height: 1px;
  padding: 0;
  margin: 0.5rem 0.25rem;
  background: var(--edge);
}

/* Team switcher: avatar-only trigger; the popover breaks out of the rail as
   an absolutely-positioned flyout so it stays usable. */

.app-sidebar-shell--compact .app-team-switcher__meta,
.app-sidebar-shell--compact .app-team-switcher__chevron {
  display: none;
}

.app-sidebar-shell--compact .app-team-switcher__current {
  justify-content: center;
  padding: 0.5rem 0;
}

.app-sidebar-shell--compact .app-team-switcher__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.375rem);
  min-width: 15rem;
  margin-top: 0;
  z-index: 40;
}

/* User card: avatar-only trigger; menu keeps a usable width past the rail. */

.app-sidebar-shell--compact .app-user-card__meta,
.app-sidebar-shell--compact .app-user-card__chevron {
  display: none;
}

.app-sidebar-shell--compact .app-user-card__trigger {
  justify-content: center;
  padding: 0.5rem 0;
}

.app-sidebar-shell--compact .app-user-card__menu {
  right: auto;
  min-width: 15rem;
}

/* Impersonation state has no room in the rail; the layout-level banner
   (account/shared/impersonation_banner) still surfaces it. */

.app-sidebar-shell--compact .app-user-card__impersonating {
  display: none;
}

/* ── Notification bell (breadcrumb row) ────────────────────────────────── */

/* MEASURED, SP-3 Task 6 — and it contradicts the plan, which classifies this
   group as "fighting the theme gem's `@layer components { a { @apply
   text-secondary-500 … } }`" and therefore fixable by cascade order alone.
   That was true when the ledger was measured, on `main` before SP-2 landed.
   It is not true now. With the six `!important`s removed and nothing else
   changed, the rule that actually wins on `.app-bell__link` is
   paper/tokens/base.css's own `[data-skin] a { color: var(--brand-ink);
   text-decoration: underline }` at (0,1,1) — verified in the browser against
   the built stylesheet, where it sits ~1,000 lines after `.app-bell__link`
   (0,1,0). The gem's `a` rule is (0,0,1) and loses to a bare single class
   already, order or no order.

   Cascade position cannot close a specificity gap, so ordering is not the
   fix here; specificity parity is. The bell is scoped through `.app-bell`,
   its own component root in account/shared/_notification_bell.html.erb — the
   same shape the sidebar rules use, and the same shape Paper gives its own
   components. Zero `!important`. */

.app-bell {
  flex: 0 0 auto;
  margin-left: 0.5rem;
}

.app-bell .app-bell__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  /* RESIDUE OF TASK 6, fixed at SP-3 Task 9. Task 6 raised this rule to
     (0,2,0) to win `color` back from `[data-skin] a`, but never declared
     `text-decoration` — so the *other* declaration in that same Paper rule,
     `text-decoration: underline`, kept applying unopposed and the bell icon
     rendered underlined. Winning one property off a competitor does not win
     the rest; you have to declare each one you care about. The three other
     <a>-subject chrome classes (`.app-brand`, `.app-team-switcher__item`)
     already do, which is why only the bell showed it. */
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.app-bell .app-bell__link:hover {
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: var(--lift-1);
}

/* `.app-bell__link svg { color: inherit }` used to sit here. Deleted, not
   de-shouted: `color` inherits by default and nothing declares a colour on
   this <svg>. SP-3 Task 6. */

.app-bell__badge {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--brand);
  color: var(--on-brand);
}

/*
 * Compose sheet — unified inbox "Compose Email" screen.
 * =====================================================
 * Desktop: a centered neu card (unchanged from the classic compose look).
 * Mobile (<= 767.98px): the compose form takes over the whole viewport as a
 * full-screen sheet, layered ABOVE the app frame's sticky top bar (z-10) and
 * the mobile bottom nav (z-50) via --z-modal (65), so the Send action is
 * always reachable and clears the home indicator.
 *
 * This is a REAL CSS media query in a component file — deliberately NOT
 * Tailwind `sm:`/`z-[..]` toggling. Tailwind cannot make responsive variants
 * of the custom card class the sheet carries and arbitrary `z-[..]` values
 * aren't in the prebuilt CSS, which is exactly why the first attempt (Phase
 * 1m2 Stream C) had to be reverted. See docs and [[neumorphic_theme_status]].
 *
 * Breakpoint is 767.98px (not 768px) to avoid the documented 768/769
 * dead-zone shared with bento_grid.css.
 *
 * ── SP-7 Task 1 (ruling T3) ────────────────────────────────────────────────
 * The three surface fills below used to read a `--neu-` custom property that
 * paper/_compat.css re-pointed at `--paper` inside `[data-skin]`. They now
 * read `--paper` directly. `account/inbox/compose` renders on
 * `layouts/account`, which always carries `data-skin`, so the substitution is
 * computed-value-invariant — verified byte-identical at 1400x1000 and 390x844,
 * light and dark, with the mobile takeover live.
 *
 * The real `@media` block is NOT a modernisation candidate — see the paragraph
 * above; the `sm:` attempt was reverted once already.
 *
 * ── SPECIFICITY, and why the class is TRIPLED (SP-3 Task 12) ──────────────
 * The sheet element used to carry `.neu-box`, a bare class at (0,1,0), so a
 * doubled `.compose-sheet.compose-sheet` at (0,2,0) was enough to win. It now
 * carries `.paper-card`, whose rule is `[data-skin] .paper-card` at (0,2,0) —
 * a tie that source order decides, and paper/tokens/components.css is imported
 * AFTER this file (application.css:63 vs :106). So every override that
 * contends with the card needs (0,3,0):
 *
 *   `.compose-sheet.compose-sheet.compose-sheet`  — background, radius, shadow
 *   `.compose-sheet.compose-sheet .__close`       — display, vs `[data-skin] .btn`
 *
 * The close affordance is the one that fails LOUDLY if you get it wrong: at
 * (0,1,0) its `display: none` loses to `[data-skin] .btn { display: inline-flex }`
 * and a ✕ meant only for the mobile takeover appears on every desktop compose.
 */

/* Desktop default: replicate the old `max-w-3xl mx-auto` in CSS so nothing on
   the element depends on a Tailwind utility that the media query must override. */

.compose-sheet {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* The in-sheet close (✕) affordance — only rendered on the mobile takeover.
   Scoped through `.compose-sheet` twice to reach (0,3,0): the element is a
   `.btn.ghost.icon-btn`, and `[data-skin] .btn` sets `display: inline-flex`. */

.compose-sheet.compose-sheet .compose-sheet__close {
  display: none;
}

@media (max-width: 767.98px) {
  /* Tripled class out-specifies Tailwind utilities and `[data-skin] .paper-card`
     without resorting to !important, so the full-screen overrides always win. */

  .compose-sheet.compose-sheet.compose-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    /* 65 — over sticky top bar (10) and bottom nav (50) */
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* the inner form scrolls, not the sheet itself */
    background: var(--paper);
    padding-top: env(safe-area-inset-top);
  }

  /* A focused full-screen compose takeover hides intruding app chrome so
     nothing can cover the Send action: the floating PWA install notice
     (z-1000, fixed bottom) and the mobile bottom nav (fixed bottom, in a
     stacking context above the sheet). Scoped to the compose page via :has();
     engines without :has support keep showing them (graceful degradation). */

  body:has(.compose-sheet) [data-controller~="pwa-notice"],
  body:has(.compose-sheet) nav[data-test="bottom-nav"] {
    display: none;
  }

  .compose-sheet__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--paper);
  }

  .compose-sheet.compose-sheet .compose-sheet__close {
    display: inline-flex;
    flex: none;
  }

  /* The form is the scrollable body; its last child (the actions bar) pins. */

  .compose-sheet__form {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  /* Out-specify Tailwind's `.space-y-4 > :not([hidden]) ~ :not([hidden])`
     (specificity 0,3,0, which forces margin-top:16px). Four classes = 0,4,0
     so the auto push wins without resorting to !important. */

  .compose-sheet.compose-sheet .compose-sheet__form .compose-sheet__actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    /* pin to the sheet bottom when the message is short */
    background: var(--paper);
    padding-bottom: max(env(safe-area-inset-bottom), 1rem);
  }
}

/*
 * Settings › Features — feature rows + form-bound toggle.
 * Ported from the design canvas.css §07 (.feat-row / .fr-icn / .nav-pill-new).
 * The design draws a decorative switch <span>; we replace it with a
 * form-bound .feat-switch (a button_to button) so toggling actually submits.
 * All Paper tokens, so dark mode re-themes automatically.
 *
 * ── SP-7 Task 1 (ruling T3): retokenized off the compat shim ───────────────
 * Every value below used to be read through a `--neu-` custom property that
 * `paper/_compat.css` re-pointed at Paper inside `[data-skin]`. This file only
 * ever renders inside a skinned region — its markup lives in
 * account/teams/features/, account/users/features/ and
 * account/teams/features/edit, all on `layouts/account`, which carries
 * `data-skin` from `Account::ApplicationController` — so substituting the
 * shim's own right-hand sides at the call sites is computed-value-invariant
 * by construction, in both schemes.
 *
 * Origin token names in the comments below are written WITHOUT their leading
 * double dash on purpose: the SP-7 ratchet
 * (test/integration/paper_token_guard_test.rb) counts literals, comments
 * included, and naming them in full would keep this file on its allowlist.
 */

/* ── The two values Paper has no token for ─────────────────────────────────
   File-local custom properties, declared on the elements that read them and
   deliberately NOT on :root — a shim that dies is better than a new global
   token layer that does not.

     --feat-well-sm      was `neu-shadow-in-sm`. Paper's elevation scale
                         (--lift-0 … --lift-3) is entirely OUTER; it has no
                         inset "well", because in Paper the drawn border does
                         the structural work a carved well used to do.
                         Aliasing an inset shadow to an outer one would push
                         the icon and the switch track the wrong way visually,
                         so the neumorph wells are frozen verbatim here. These
                         are _compat.css's values with its `neu-strength`
                         (0.4) and `neu-edge-light` / `neu-edge-dark` chains
                         expanded: 0.4 × 2px = 0.8px, 0.4 × 5px = 2px,
                         0.4 × 4px = 1.6px. Redesigning the pressed states is
                         recorded backlog (SP-7 ruling T7, item 15).

     --feat-accent-soft  was `neu-accent-soft`. NOT `--brand-tint`, which is
                         opaque: this fill is composited over backgrounds that
                         are not `--paper`, where an opaque swap visibly
                         changes the result. It stays a translucent color-mix
                         re-based on `--brand`. 14% light / 22% dark is spec
                         §3.3's prescription, already shipped in the shim.
   ─────────────────────────────────────────────────────────────────────── */

.feat-row .fr-icn,
.feat-switch,
.nav-pill-new {
  --feat-well-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
  --feat-accent-soft: color-mix(in oklab, var(--brand) 14%, transparent);
}

/* Dark answers to TWO selectors: Bullet Train toggles `.dark` on <html>, while
   Paper's own previews use `[data-theme="dark"]`. Miss either and half the
   app renders the light values on a dark page. Same selector discipline as
   paper/skins/neumorph.css. */

.dark .feat-row .fr-icn,
.dark .feat-switch,
.dark .nav-pill-new,
[data-theme="dark"] .feat-row .fr-icn,
[data-theme="dark"] .feat-switch,
[data-theme="dark"] .nav-pill-new {
  --feat-well-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
  --feat-accent-soft: color-mix(in oklab, var(--brand) 22%, transparent);
}

.feat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
}

.feat-row + .feat-row {
  border-top: 1px solid var(--edge);
}

.feat-row .fr-icn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--paper-sunk);
  box-shadow: var(--feat-well-sm);
  display: grid;
  place-items: center;
  color: var(--brand-ink);
}

.feat-row.off .fr-icn {
  color: var(--ink-3);
}

.nav-pill-new {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: var(--feat-accent-soft);
  color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

/* button_to wraps its button in a <form>; keep it from adding layout. */

.feat-switch-form {
  margin: 0;
  flex-shrink: 0;
  display: inline-flex;
}

.feat-switch {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid var(--edge);
  background: var(--paper-sunk);
  box-shadow: var(--feat-well-sm);
  position: relative;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.feat-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform 140ms ease;
}

.feat-switch[aria-pressed="true"] {
  background: var(--brand);
}

.feat-switch[aria-pressed="true"]::after {
  transform: translateX(18px);
  background: var(--on-brand);
}

.feat-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/*
 * Onboarding wizard — "what kind of group is this?" single-select cards.
 * Native radio group styled with :has(:checked) for the pressed state; no
 * Stimulus. All Paper tokens so dark mode re-themes automatically.
 *
 * ── SP-7 Task 1 (ruling T3): retokenized off the compat shim ───────────────
 * The 12 values below used to be read through `--neu-` custom properties that
 * `paper/_compat.css` re-pointed at Paper inside `[data-skin]`. Both surfaces
 * that render this file — account/onboarding/team_kinds/_options and
 * account/teams/group_type/edit — inherit `Account::ApplicationController`,
 * which declares `self.default_skin = "paper"`, so the markup is always inside
 * a skinned region and substituting the shim's own right-hand sides is
 * computed-value-invariant in both schemes.
 *
 * Origin token names in the comments below are written WITHOUT their leading
 * double dash on purpose: the SP-7 ratchet counts literals, comments included.
 */

/* ── The one value Paper has no token for ──────────────────────────────────
   `--tk-well-sm` freezes what `neu-shadow-in-sm` resolved to. Paper's
   elevation scale (--lift-0 … --lift-3) is entirely OUTER — it has no inset
   well, because the drawn border does the structural work neumorphism did
   with a carve. Aliasing an inset shadow to an outer one would invert the
   pressed state of a card whose ONLY selected affordance is that it looks
   pressed. So the neumorph wells are frozen verbatim, as file-local custom
   properties on the two elements that read them and never on `:root`. Values
   are _compat.css's own, with its `neu-strength` (0.4) and the two
   `neu-edge` helpers expanded: 0.4 × 2px = 0.8px, 0.4 × 5px = 2px,
   0.4 × 4px = 1.6px. Redesigning the wells is recorded backlog (SP-7 ruling
   T7, item 15).
   ─────────────────────────────────────────────────────────────────────── */

.team-kind-error,
.team-kind-card {
  --tk-well-sm:
    inset 0.8px 0.8px 2px oklch(78% 0.017 220),
    inset -0.8px -0.8px 1.6px oklch(99% 0.012 220);
}

/* Dark answers to TWO selectors: Bullet Train toggles `.dark` on <html>,
   Paper's own previews use `[data-theme="dark"]`. Miss either and the wells
   render with the light lighting on a dark page. */

.dark .team-kind-error,
.dark .team-kind-card,
[data-theme="dark"] .team-kind-error,
[data-theme="dark"] .team-kind-card {
  --tk-well-sm:
    inset 0.8px 0.8px 2px oklch(16% 0.014 220),
    inset -0.8px -0.8px 1.6px oklch(35% 0.014 220);
}

.team-kind-error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--paper-sunk);
  box-shadow: var(--tk-well-sm);
  color: var(--danger-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.team-kind-fieldset {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.team-kind-card {
  display: block;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift-2);
  cursor: pointer;
  transition: box-shadow 140ms ease;
}

.team-kind-card:has(input:checked) {
  box-shadow: var(--tk-well-sm);
}

.team-kind-card:has(input:focus-visible) {
  outline: none;
  box-shadow: var(--lift-2), 0 0 0 3px var(--brand);
}

.team-kind-card .tk-title {
  display: block;
  font-weight: 600;
}

.team-kind-card .tk-desc {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 4px;
}

/* Visually hide the radio but keep it focusable (NOT display:none). */

.team-kind-card input.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sama² Paper design system                            [SP-2 · foundation]
   ══════════════════════════════════════════════════════════════════════════
   INERT UNTIL A LAYOUT SETS `data-skin`. Every rule below that is not a
   custom-property declaration is scoped under `[data-skin]` (SP-2 ruling R2 —
   see the header comment in each file), and nothing in the app carries that
   attribute yet. SP-2 Task 6 adds it, to <body>, on the account surface only.

   The block sits AFTER every `components/*` import above, so Paper wins on
   source order wherever the two overlap at equal specificity. Within the
   block the order is load-bearing in three places:

   1. `tokens/fonts.css` FIRST and UNSCOPED. `@font-face` is a top-level
      at-rule; nesting it under a selector makes it invalid and the browser
      drops it silently, so the self-hosted Atkinson faces would simply never
      load. It is the one Paper file the R2 transform must not touch.
   2. Tokens (`colors`, `typography`, `spacing`) before their consumers
      (`base`, `components`) and before `_compat.css`. `var()` substitutes at
      use time so this is not strictly required for resolution — it is
      required for the cases where the same property is declared twice, and it
      keeps the dependency direction readable.
   3. `skins/neumorph.css` AFTER `tokens/typography.css`. The skin re-asserts
      `font-family`/`color`/`background` on `[data-skin="neumorph"]`, which is
      an attribute selector at (0,1,0) — exactly the specificity of
      typography.css's own `[data-skin]` block. Nothing but source order
      decides that cascade, so the skin must come second or it loses.

   (`_compat.css` used to sit last, and this paragraph used to explain why. It
   was deleted at SP-7 ruling T5 — see the note below `paper/vendor/select2.css`.
   Its position never carried cascade meaning: it worked by inheritance
   proximity, not source order.)

   Files 1–6 mirror the design system's own entry point,
   docs/design/sama2-paper/styles.css, so an upstream re-sync is a diff.
   ══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   Sama² Paper — Font faces (Atkinson Hyperlegible)
   ----------------------------------------------------------
   Atkinson Hyperlegible is engineered by the Braille Institute for
   character disambiguation for low-vision readers. It is the Paper design
   system's accessibility premise, not decoration — so it is SELF-HOSTED,
   never CDN-loaded: app/javascript/service_worker.js skips all cross-origin
   requests, so a CDN font could never enter the offline cache.

   The binaries live in public/fonts (outside the asset pipeline), matching
   the components/neu_fonts.css precedent, so this PostCSS-built CSS resolves
   a stable, digest-free absolute URL.

   Deliberately NO `unicode-range`. The reason is NOT broad script coverage —
   these files are Latin-only. Read out of the shipped binaries with fontTools:
     · AtkinsonHyperlegibleNext        362 cmap entries (222 Latin, 15 combining,
                                       4 stray Greek math symbols)
     · AtkinsonHyperlegibleNext-Italic 362, same shape
     · AtkinsonHyperlegibleMono        359, same shape
   Tamil (U+0B95, U+0BAE) and CJK (U+4E2D, U+6587) are absent from all three,
   and always will be. Upstream's "~150 languages" is a count of languages
   written in the LATIN SCRIPT, not a count of scripts. Malay is covered
   (latin-ext ā/é are present); zh-CN and ta are not, and never were.

   `unicode-range` is omitted because it can only ever LOSE glyphs here. It
   tells the browser "use this face only for these codepoints" — so if the
   declared range is narrower than what the file actually contains, glyphs the
   font does have get suppressed and fall back, producing visibly mixed type.
   components/neu_fonts.css can safely declare one because it ships Google's
   published latin subset, whose range is documented and matches the file
   exactly; these upstream binaries have no such published range. For zh/ta the
   declaration would buy nothing anyway: with no glyph in the font, normal
   per-glyph font fallback already hands those runs to the system stack.

   FAMILY NAMES — verified by reading the OpenType `name` table out of the
   shipped binaries with fontTools, not inferred from filenames:
     · sans → name ID 1  "Atkinson Hyperlegible Next"
     · mono → name ID 16 "Atkinson Hyperlegible Mono"  (NOT "…Next Mono",
       despite the upstream repo being called atkinson-hyperlegible-next-mono;
       ID 1 there reads "Atkinson Hyperlegible Mono ExtraLight" because the
       variable font's default instance is wght 200)
   A third, older family "Atkinson Hyperlegible" (2020, two static weights)
   also exists; it appears only as a fallback in tokens/typography.css and is
   not shipped here — naming a face after it would lose the weight ramp.

   Weight range is the real `wght` axis of each binary: 200 … 800.

   Three faces, not four: the Task 1 italic audit found the only genuine
   `font-style: italic` usages in the design system are sans (a pull quote and
   a "typing…" affordance). Mono italic is unused, so it is not shipped.

   The binaries are UNMODIFIED upstream builds from
   github.com/googlefonts/atkinson-hyperlegible-next{,-mono}
   (fonts/webfonts on main; neither repo cuts releases). They are not subset:
   the OFL's Reserved Font Name clause requires a modified font be renamed,
   and shipping upstream bytes verbatim sidesteps that entirely. Only the
   FILE names were flattened (upstream `Foo[wght].woff2` → `Foo-Variable.woff2`)
   to keep URL-reserved brackets out of request paths; font bytes and the
   internal `name` table are untouched. Licences ship alongside as
   public/fonts/atkinson/OFL-*.txt, as the OFL requires.

   ⚠️ TASK 5 / anyone scoping the Paper layer: this file must be EXCLUDED from
   the `[data-skin]` scoping transform. `@font-face` is a top-level at-rule —
   nesting it inside a selector makes it invalid and the browser drops it
   silently, so the fonts would simply never load. Import it unscoped.
   ────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Atkinson Hyperlegible Next";

  font-style: normal;

  font-weight: 200 800;

  font-display: swap;

  src: url(/fonts/atkinson/AtkinsonHyperlegibleNext-Variable.woff2) format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";

  font-style: italic;

  font-weight: 200 800;

  font-display: swap;

  src: url(/fonts/atkinson/AtkinsonHyperlegibleNext-Italic-Variable.woff2) format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";

  font-style: normal;

  font-weight: 200 800;

  font-display: swap;

  src: url(/fonts/atkinson/AtkinsonHyperlegibleMono-Variable.woff2) format("woff2");
}

/* ──────────────────────────────────────────────────────────
   Sama² Paper — Color tokens
   Warm paper neutrals · near-black ink · color-coded module tabs.
   All values OKLCH. Contrast is the point: body ink clears AAA (>7:1)
   on paper; every solid fill clears AA (>4.5:1) with white text.
   ----------------------------------------------------------
   Verbatim upstream (docs/design/sama2-paper/tokens/colors.css) apart from
   this header. NO scoping transform was needed: both blocks below declare
   custom properties only, and SP-2 ruling R2 leaves those unscoped because
   they are inert — nothing reads a Paper token until a Paper rule or a
   skinned element does. That includes the `.dark` block: it re-values names
   that no un-skinned rule consumes.

   Measured 2026-08-13 for both directions: zero `var(--paper|--ink|--edge|
   --brand|--focus|--on-brand|…)` references, and zero competing DECLARATIONS
   of those names, anywhere outside `app/assets/stylesheets/paper/`.

   Contrast with `paper/_compat.css`, which IS scoped: it redefines `--neu-*`,
   names with 336 live consumers. The inertness exemption is about having no
   consumers, not about being a custom-property block.
   ────────────────────────────────────────────────────────── */

:root {
  /* ---- Paper: the warm off-white surface family ---- */
  --paper: oklch(97.6% 0.008 85);
  /* page background */
  --paper-card: oklch(99.2% 0.006 85);
  /* card / sheet fill (a fresh sheet) */
  --paper-2: oklch(96% 0.010 85);
  /* subtle raised zone */
  --paper-sunk: oklch(94% 0.012 85);
  /* wells, inset fields, tracks */
  /* ---- Ink: near-black warm text + drawn edges ---- */
  --ink: oklch(24% 0.014 70);
  /* body — >12:1 on paper (AAA) */
  --ink-2: oklch(39% 0.014 70);
  /* secondary — ~7:1 (AAA) */
  --ink-3: oklch(48% 0.012 70);
  /* muted — ~5:1 (AA) */
  /* ---- Edges: the "drawn" border that makes paper feel physical ---- */
  --edge: oklch(87% 0.012 80);
  /* hairline divider */
  --edge-strong: oklch(74% 0.016 78);
  /* visible card outline */
  --edge-ink: oklch(46% 0.02 72);
  /* strong drawn outline (emphasis) */
  /* ---- Brand: trustworthy blue (also the Tasks module) ---- */
  --brand: oklch(48% 0.16 255);
  --brand-strong: oklch(42% 0.16 255);
  /* hover / pressed */
  --brand-ink: oklch(40% 0.15 255);
  /* brand text on paper — AA+ */
  --brand-tint: oklch(94% 0.04 255);
  --brand-border: oklch(80% 0.07 255);
  --on-brand: oklch(99% 0.01 255);
  /* text on solid brand */
  /* ---- Module colors — each is a physical "folder tab" ----
     solid (fill, white text, AA), ink (text on tint), tint (bg), border */
  /* Tasks = brand blue (aliases) */
  --tasks: var(--brand);
  --tasks-ink: var(--brand-ink);
  --tasks-tint: var(--brand-tint);
  --tasks-border: var(--brand-border);
  /* Shopping = green */
  --shop: oklch(48% 0.12 150);
  --shop-ink: oklch(40% 0.11 150);
  --shop-tint: oklch(93.5% 0.05 150);
  --shop-border: oklch(80% 0.07 150);
  /* Expenses = clay / ringgit-earth */
  --money: oklch(50% 0.13 48);
  --money-ink: oklch(43% 0.12 48);
  --money-tint: oklch(93.5% 0.05 58);
  --money-border: oklch(82% 0.07 55);
  /* Announcements = red */
  --news: oklch(50% 0.19 25);
  --news-ink: oklch(45% 0.18 25);
  --news-tint: oklch(93.5% 0.05 25);
  --news-border: oklch(83% 0.08 25);
  /* Calendar / Events = plum */
  --cal: oklch(48% 0.16 300);
  --cal-ink: oklch(43% 0.15 300);
  --cal-tint: oklch(93.5% 0.045 300);
  --cal-border: oklch(82% 0.07 300);
  /* ---- Status (semantic) ---- */
  --ok: oklch(48% 0.12 150);
  --ok-ink: oklch(40% 0.11 150);
  --ok-tint: oklch(93.5% 0.05 150);
  --warn: oklch(72% 0.14 80);
  /* amber — dark text only */
  --warn-ink: oklch(46% 0.10 70);
  --warn-tint: oklch(93% 0.06 85);
  --danger: oklch(50% 0.19 25);
  --danger-ink: oklch(45% 0.18 25);
  --danger-tint: oklch(93.5% 0.05 25);
  --info: var(--brand);
  --info-ink: var(--brand-ink);
  --info-tint: var(--brand-tint);
  /* Status borders. Previously status pills BORROWED module borders
     (.pill.ok → --shop-border, .pill.danger → --news-border) and .pill.warn
     hard-coded a literal — so re-hueing Shopping silently re-hued Success, and
     warn was un-skinnable. These values are identical to what was rendered
     before, so this is a refactor, not a restyle. */
  --ok-border: oklch(80% 0.07 150);
  --warn-border: oklch(80% 0.09 85);
  --danger-border: oklch(83% 0.08 25);
  --info-border: var(--brand-border);
  /* ---- Focus: never subtle. WCAG 2.4.7 visible on any surface ---- */
  --focus: oklch(55% 0.19 255);
  --focus-ring: 0 0 0 3px oklch(55% 0.19 255 / 0.45);
}

/* ────────  DARK MODE  ────────
   A dim warm charcoal "night paper". Ink inverts to warm white;
   module colors lighten so text still clears AA on the dark card.
   (Bullet Train toggles `.dark` on <html>; [data-theme] supported too
   for standalone previews — see components/neumorphism.css.) */

.dark,
[data-theme="dark"] {
  --paper: oklch(22% 0.012 75);
  --paper-card: oklch(26% 0.013 75);
  --paper-2: oklch(29% 0.013 75);
  --paper-sunk: oklch(19% 0.012 75);
  --ink: oklch(95% 0.01 85);
  --ink-2: oklch(80% 0.012 85);
  --ink-3: oklch(66% 0.012 85);
  --edge: oklch(36% 0.012 78);
  --edge-strong: oklch(46% 0.016 78);
  --edge-ink: oklch(62% 0.02 78);
  --brand: oklch(72% 0.15 255);
  --brand-strong: oklch(78% 0.15 255);
  --brand-ink: oklch(80% 0.13 255);
  --brand-tint: oklch(34% 0.08 255);
  --brand-border: oklch(48% 0.1 255);
  --on-brand: oklch(18% 0.03 255);
  --shop: oklch(72% 0.13 150);
  --shop-ink: oklch(82% 0.12 150);
  --shop-tint: oklch(32% 0.06 150);
  --shop-border: oklch(46% 0.09 150);
  --money: oklch(74% 0.12 60);
  --money-ink: oklch(84% 0.11 65);
  --money-tint: oklch(33% 0.06 55);
  --money-border: oklch(48% 0.09 55);
  --news: oklch(72% 0.16 25);
  --news-ink: oklch(82% 0.15 25);
  --news-tint: oklch(33% 0.08 25);
  --news-border: oklch(50% 0.12 25);
  --cal: oklch(74% 0.14 300);
  --cal-ink: oklch(84% 0.13 300);
  --cal-tint: oklch(33% 0.07 300);
  --cal-border: oklch(48% 0.1 300);
  --tasks: var(--brand);
  --tasks-ink: var(--brand-ink);
  --tasks-tint: var(--brand-tint);
  --tasks-border: var(--brand-border);
  --ok: var(--shop);
  --ok-ink: var(--shop-ink);
  --ok-tint: var(--shop-tint);
  --ok-border: var(--shop-border);
  --warn: oklch(80% 0.14 85);
  --warn-ink: oklch(86% 0.12 85);
  --warn-tint: oklch(33% 0.06 85);
  --warn-border: oklch(48% 0.09 85);
  --danger: var(--news);
  --danger-ink: var(--news-ink);
  --danger-tint: var(--news-tint);
  --danger-border: var(--news-border);
  --info: var(--brand);
  --info-ink: var(--brand-ink);
  --info-tint: var(--brand-tint);
  --info-border: var(--brand-border);
  --focus: oklch(78% 0.16 255);
  --focus-ring: 0 0 0 3px oklch(78% 0.16 255 / 0.5);
}

/* ──────────────────────────────────────────────────────────
   Sama² Paper — Typography
   Atkinson Hyperlegible everywhere. Generous sizes: nothing that
   carries meaning is below 15px. Base 17px / 1.6 for easy reading
   by people who are not digital natives.
   ----------------------------------------------------------
   ⚠️ SCOPING TRANSFORM APPLIED (SP-2 ruling R2) — NOT verbatim upstream.
   Re-sync against docs/design/sama2-paper/tokens/typography.css by
   re-applying, mechanically:

     · `:root { --* }`      → UNSCOPED, unchanged. Inert: nothing reads a
                              Paper token until a Paper rule or a skinned
                              element does.
     · `body { … }`         → `[data-skin] { … }`. font-family/-size,
                              line-height and font-weight all inherit, so the
                              rule works on <body data-skin> or any subtree.
     · `h1, h2, h3, h4`     → `[data-skin] :is(h1,h2,h3,h4)`
     · `h1` … `h4` singly   → `[data-skin] h1` … `[data-skin] h4`. Both forms
                              land at (0,1,1), so the per-level sizes keep
                              winning by source order exactly as upstream.
     · `.t-*` helpers       → prefixed `[data-skin] `

   WHY: unscoped, the `body` and `h1`–`h4` rules restyle every page in the
   app, including the four games and the public Bento profiles — both declared
   non-goals of this program.

   `[data-skin]` is the attribute PRESENT, any value — never
   `[data-skin="paper"]` — so `[data-skin="neumorph"]` inherits the same type
   rules and only re-values `--f-*` underneath them. NOTE that the neumorph
   skin's own `font-family` re-assertion is also an attribute selector, i.e.
   the same (0,1,0) specificity as the `[data-skin]` block below — it wins by
   SOURCE ORDER alone, so paper/skins/neumorph.css must be imported after this
   file. See the ordering note in application.css.
   ────────────────────────────────────────────────────────── */

:root {
  --f-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  /* @kind font */
  --f-display: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  /* @kind font */
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", monospace;
  /* @kind font */
  /* Weights */
  --w-regular: 400;
  /* @kind font */
  --w-medium: 500;
  /* @kind font */
  --w-bold: 700;
  /* @kind font */
  --w-black: 800;
  /* @kind font */
  /* Type scale (px) — mobile-first, comfortably large */
  --t-display: 34px;
  /* screen titles / marketing */
  --t-h1: 27px;
  --t-h2: 22px;
  --t-h3: 19px;
  --t-lead: 19px;
  /* intros */
  --t-body: 17px;
  /* default reading size */
  --t-sm: 15px;
  /* secondary — floor for meaningful text */
  --t-label: 13px;
  /* uppercase labels + pills, always bold */
  --lh-tight: 1.15;
  /* @kind font */
  --lh-snug: 1.35;
  /* @kind font */
  --lh-body: 1.6;
  /* @kind font */
  --track-label: 0.06em;
}

[data-skin] {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
}

[data-skin] :is(h1, h2, h3, h4) {
  font-family: var(--f-display);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

[data-skin] h1 {
  font-size: var(--t-h1);
}

[data-skin] h2 {
  font-size: var(--t-h2);
}

[data-skin] h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
}

[data-skin] h4 {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

/* Text helpers */

[data-skin] .t-display {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

[data-skin] .t-lead    {
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

[data-skin] .t-body    {
  font-size: var(--t-body);
}

[data-skin] .t-sm      {
  font-size: var(--t-sm);
}

[data-skin] .t-mono    {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

[data-skin] .t-num     {
  font-variant-numeric: tabular-nums;
}

[data-skin] .t-muted   {
  color: var(--ink-2);
}

[data-skin] .t-faint   {
  color: var(--ink-3);
}

[data-skin] .t-label {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ──────────────────────────────────────────────────────────
   Sama² Paper — Spacing, shape & elevation
   ----------------------------------------------------------
   Verbatim upstream (docs/design/sama2-paper/tokens/spacing.css) apart from
   this header and the value-lock note below. NO scoping transform was needed:
   every block here declares custom properties only, and SP-2 ruling R2 leaves
   those unscoped because they are inert — nothing reads a Paper token until a
   Paper rule or a skinned element does. Measured 2026-08-13: zero `var(--sp-*)`
   / `var(--r-*)` / `var(--lift-*)` / `var(--bw*)` / `var(--touch-*)` references
   exist anywhere outside `app/assets/stylesheets/paper/`.

   ⚠️ VALUE LOCK — `--sp-1` … `--sp-6` MUST stay at 4/8/12/16/20/24px.
   `tokens/base.css` defines `.gap-1`…`.gap-6` from them, and those six class
   names collide with Tailwind's own gap utilities — 426 measured uses in
   app/views, every one of them Tailwind's. Inside a skinned region Paper's
   `[data-skin] .gap-2` (0,2,0) beats Tailwind's `.gap-2` (0,1,0), so those 426
   call sites silently switch to these values. They are safe today ONLY because
   the two scales agree: Tailwind's gap-1…6 are 0.25/0.5/0.75/1/1.25/1.5rem =
   4/8/12/16/20/24px at the default 16px root. Change any of these six and you
   silently re-space 426 unrelated call sites with no test and no build error to
   catch it. (The one residual difference is unit, not value: Tailwind's rem
   tracks a user-enlarged root font size, these px do not. Judged acceptable —
   Paper's whole type scale is px for the same reason.)
   ────────────────────────────────────────────────────────── */

:root {
  /* Spacing scale (4px base) — see the VALUE LOCK above before editing 1…6 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  /* Touch — the physical minimum. Primary actions are larger. */
  --touch-min: 48px;
  /* every tappable target is at least this */
  --touch-lg: 56px;
  /* primary buttons, key list rows */
  /* Radius — friendly-rounded paper, never fully soft */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  /* cards / sheets */
  --r-xl: 22px;
  --r-pill: 999px;
  /* Border widths — the "drawn edge" is load-bearing here */
  --bw: 1.5px;
  /* standard card / control outline */
  --bw-strong: 2px;
  /* emphasis, primary, focus target */
  /* Elevation — grounded, honest shadows. Paper resting on paper,
     NOT the diffuse glow of neumorphism. The border does the
     structural work; the shadow only grounds. */
  --lift-0: 0 1px 0 oklch(24% 0.014 70 / 0.04);
  --lift-1:
    0 1px 1px oklch(24% 0.014 70 / 0.05),
    0 2px 6px -2px oklch(24% 0.014 70 / 0.12);
  --lift-2:
    0 2px 3px oklch(24% 0.014 70 / 0.06),
    0 10px 22px -8px oklch(24% 0.014 70 / 0.18);
  --lift-3:
    0 4px 8px oklch(24% 0.014 70 / 0.08),
    0 22px 44px -16px oklch(24% 0.014 70 / 0.24);
}

/* Bullet Train toggles `.dark` on <html>; [data-theme] supported too. */

.dark,
[data-theme="dark"] {
  --lift-0: 0 1px 0 oklch(0% 0 0 / 0.2);
  --lift-1: 0 1px 2px oklch(0% 0 0 / 0.35), 0 3px 8px -3px oklch(0% 0 0 / 0.45);
  --lift-2: 0 2px 4px oklch(0% 0 0 / 0.4), 0 12px 26px -10px oklch(0% 0 0 / 0.55);
  --lift-3: 0 6px 12px oklch(0% 0 0 / 0.45), 0 26px 50px -18px oklch(0% 0 0 / 0.6);
}

/* ──────────────────────────────────────────────────────────
   Sama² Paper — Base reset + utilities
   ----------------------------------------------------------
   ⚠️ SCOPING TRANSFORM APPLIED (SP-2 ruling R2) — NOT verbatim upstream.
   Re-sync against docs/design/sama2-paper/tokens/base.css by re-applying,
   mechanically:

     · `* { box-sizing: border-box }`  and
       `html, body { margin: 0; padding: 0 }`      → DELETED. Tailwind's
       preflight (loaded via $ThemeStylesheet, ahead of this file) already
       ships both, so re-declaring them buys nothing and the `*` selector
       would reach the carve-outs.
     · `body { … }`                    → `[data-skin] { … }`. Every property
       in that block inherits, so the rule works on <body data-skin> or on
       any skinned subtree.
     · `a`, `a:hover`                  → `[data-skin] a`, `[data-skin] a:hover`
     · `:where(…):focus-visible`       → `[data-skin] :where(…):focus-visible`
       — the INNER `:where()` is kept deliberately, so the rule stays at
       (0,1,0) and component overrides remain cheap to write.
     · utility + component classes     → prefixed `[data-skin] `
     · rules that must also match the scope element ITSELF (the scrollbar
       pseudo-elements and the reduced-motion `*` block, since <body> is
       both a scroll container and an animation target)
                                       → `:is([data-skin], [data-skin] *)`
     · `.dark X` / `[data-theme="dark"] X` → the four-combination selector
       list already used by paper/skins/neumorph.css and paper/_compat.css.
       A literal `[data-skin] ` prefix would be WRONG here: Bullet Train puts
       `.dark` on <html>, an ANCESTOR of the skinned <body>, so
       `[data-skin] .dark …` can never match in the real app. Standalone
       previews put `[data-theme]` on the skinned element itself, hence all
       four combinations.

   Also added here, not upstream: the R3 touch floor (see its own comment).

   WHY scope at all: unscoped, these bare element rules repaint EVERY page in
   the app — including the four games and the public Bento profiles, both
   declared non-goals of this program.

   `[data-skin]` is the attribute PRESENT, any value — never
   `[data-skin="paper"]` — so `[data-skin="neumorph"]` keeps the shared class
   contract and only re-values the tokens underneath it.
   ────────────────────────────────────────────────────────── */

[data-skin] {
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* Everyone gets a highly-visible focus ring. Never remove it. */

[data-skin] :where(a, button, input, textarea, select, [tabindex], [role="button"], [role="checkbox"], [role="switch"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* --focus-ring and --lift-* are BOTH box-shadow, so the rule above silently
   flattens any elevated control the moment it receives focus — a focused
   .btn would lose its --lift-1 and appear to sink. Concatenate instead of
   replacing. (The guidelines demonstrated a wrapper-<span> workaround for
   this, which is not a usable production pattern.)

   Elements with no rest elevation (.input/.textarea/.select) are unaffected
   and deliberately not listed. */

[data-skin] .btn:focus-visible,
[data-skin] .icon-btn:focus-visible,
[data-skin] .paper-card.is-tappable:focus-visible,
[data-skin] .seg > button[aria-pressed="true"]:focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}

/* ── Touch floor (SP-2 ruling R3) — NOT upstream ───────────────────────────
   components/touch_optimizations.css pins `.has-touch .btn` and friends to
   44px at (0,2,0), which beats Paper's own `.btn { min-height: --touch-min }`
   at (0,1,0) — so on touch devices Paper's 48px floor would never apply. That
   pin is now excluded from skinned regions via `:where(:not([data-skin] *))`,
   which would otherwise leave BARE, not-yet-migrated controls inside a
   skinned region with NO touch floor at all for the length of SP-3. This rule
   is that floor.

   `:where()` holds it at (0,1,0), so every Paper component class — and every
   `[data-skin] .foo` rule in components.css at (0,2,0) — overrides it freely.

   AMENDED: the iOS-zoom pin (`input/select/textarea { font-size: 16px }`) is
   NOT guarded and keeps its authority inside skinned regions. The original
   ruling dropped it on an invariant — "no Paper form control drops below
   16px, `.input`/`.textarea`/`.select` are `--t-body` = 17px" — that only
   holds for controls CARRYING a Paper class. SP-2 edits no views, so bare
   `text-sm` inputs inside `[data-skin]` would compute 14px and re-acquire
   iOS focus-zoom. Keeping the pin costs nothing: `[data-skin] .input` is
   (0,2,0) against the pin's (0,1,1), so Paper's 17px still wins wherever a
   Paper class is present. Full rationale in
   `components/touch_optimizations.css`'s header. */

[data-skin] :where(button, [role="button"], input[type="submit"], input[type="button"]) {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

/* Honour reduced-motion everywhere */

@media (prefers-reduced-motion: reduce) {
  :is([data-skin], [data-skin] *),
  :is([data-skin], [data-skin] *)::before,
  :is([data-skin], [data-skin] *)::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Links — define defaults so editor-added links aren't browser-blue */

[data-skin] a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

[data-skin] a:hover {
  color: var(--brand-strong);
}

/* Layout utilities */

[data-skin] .row {
  display: flex;
  align-items: center;
}

[data-skin] .col {
  display: flex;
  flex-direction: column;
}

[data-skin] .wrap {
  flex-wrap: wrap;
}

[data-skin] .between {
  justify-content: space-between;
}

[data-skin] .center {
  justify-content: center;
}

[data-skin] .align-start {
  align-items: flex-start;
}

[data-skin] .grow {
  flex: 1 1 auto;
  min-width: 0;
}

/* `.gap-1`…`.gap-6` COLLIDE with Tailwind's own gap utilities — 426 measured
   uses in app/views, all of them Tailwind's. Inside a skinned region these
   win, at (0,2,0) against Tailwind's (0,1,0). That is harmless ONLY because
   the values match: see the value-lock comment in tokens/spacing.css. */

[data-skin] .gap-1 {
  gap: var(--sp-1);
}

[data-skin] .gap-2 {
  gap: var(--sp-2);
}

[data-skin] .gap-3 {
  gap: var(--sp-3);
}

[data-skin] .gap-4 {
  gap: var(--sp-4);
}

[data-skin] .gap-5 {
  gap: var(--sp-5);
}

[data-skin] .gap-6 {
  gap: var(--sp-6);
}

/* Striped placeholder for imagery the user drops in later */

[data-skin] .paper-placeholder {
  background:
    repeating-linear-gradient(135deg,
      oklch(90% 0.012 80), oklch(90% 0.012 80) 7px,
      oklch(94% 0.010 80) 7px, oklch(94% 0.010 80) 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  padding: var(--sp-3);
  border-radius: inherit;
  border: var(--bw) dashed var(--edge-strong);
}

/* Bullet Train toggles `.dark` on <html>; [data-theme] supported too.
   Four combinations because the dark flag may sit on an ancestor of the
   skinned element (the real app) or on the skinned element itself
   (standalone previews / theme kit). Mirrors paper/_compat.css. */

[data-skin].dark .paper-placeholder,
[data-skin][data-theme="dark"] .paper-placeholder,
.dark [data-skin] .paper-placeholder,
[data-theme="dark"] [data-skin] .paper-placeholder {
  background:
    repeating-linear-gradient(135deg,
      oklch(30% 0.012 80), oklch(30% 0.012 80) 7px,
      oklch(34% 0.010 80) 7px, oklch(34% 0.010 80) 14px);
}

/* Scrollbar — `:is(…)` so the skinned element's own scroller is styled too,
   not only its descendants'. */

:is([data-skin], [data-skin] *)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:is([data-skin], [data-skin] *)::-webkit-scrollbar-track {
  background: transparent;
}

:is([data-skin], [data-skin] *)::-webkit-scrollbar-thumb {
  background: var(--edge-strong);
  border-radius: 999px;
}

/* ──────────────────────────────────────────────────────────
   Sama² Paper — Component classes
   The tactile layer. Every surface has a drawn edge + a grounded
   shadow so it reads as a real, physical object. Every control is
   ≥48px, clearly labelled, unambiguously pressable.
   These classes back both the React primitives and the UI kits.
   ----------------------------------------------------------
   ⚠️ SCOPING TRANSFORM APPLIED (SP-2 ruling R2) — NOT verbatim upstream.
   To re-sync against docs/design/sama2-paper/tokens/components.css, take the
   upstream file and prefix EVERY selector with `[data-skin] `. That is the
   whole transform for this file — nothing else changed, and it was applied
   mechanically (postcss, 81 rules, verified as a pure prefix insertion on
   every changed line).

   ⚠️ TWO ZONES. Everything from here to the `APP ADDITIONS` banner at the
   bottom of the file is upstream-plus-prefix, so a re-sync is a plain diff:
   replace that whole span with a freshly prefixed upstream file and leave the
   banner and everything below it alone. Rules BELOW the banner do not exist
   upstream. Never interleave an app addition into the upstream span — that is
   the one edit that turns the re-sync from a diff into an archaeology exercise.
   (SP-3 ruling R8.1/R8.2 chose the appended-block shape for exactly this
   reason. `.paper-card.pad-list` above is NOT an example of an app addition:
   it was promoted upstream and is present in docs/design/sama2-paper/, comment
   and all.)

   Attribute PRESENT, any value — never `[data-skin="paper"]`. The whole point
   of the skin architecture is that one class contract serves every skin, so
   `[data-skin="neumorph"]` regions must match these rules too and only
   re-value the tokens underneath them.

   WHY scope at all: unscoped, `.btn`/`.field`/`.active`/`.col` collide with
   real class names already in app/views (13 measured occurrences), and every
   page in the app — including the four games and the public Bento profiles,
   both declared non-goals of this program — would pick these rules up.
   ────────────────────────────────────────────────────────── */

/* ============ CARD / SHEET ============ */

[data-skin] .paper-card {
  background: var(--paper-card);
  border: var(--bw) solid var(--edge-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  padding: var(--sp-5);
}

[data-skin] .paper-card.pad-lg {
  padding: var(--sp-6);
}

[data-skin] .paper-card.pad-sm {
  padding: var(--sp-4);
}

[data-skin] .paper-card.flat {
  box-shadow: none;
}

/* List container. The specimens (guidelines/comp-lists.html) used an ad-hoc
   `.sheet` with padding 6px 18px that existed nowhere in this file — the
   default 20px padding breaks 56px rows and stops `.list-row + .list-row`
   dividers reaching the card edge. Promoted here so the class contract is
   complete and skins have something to inherit. */

[data-skin] .paper-card.pad-list {
  padding: 6px var(--sp-5);
}

/* A well: pressed into the page (fields, read-only values, tracks) */

[data-skin] .paper-well {
  background: var(--paper-sunk);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r);
  padding: var(--sp-4);
}

/* Clickable card: lifts on hover, presses on active. The lift is the
   affordance — only interactive things move. */

[data-skin] .is-tappable {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

[data-skin] .paper-card.is-tappable:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
  border-color: var(--edge-ink);
}

[data-skin] .paper-card.is-tappable:active {
  transform: translateY(0);
  box-shadow: var(--lift-0);
}

/* ============ MODULE HEADER STRIP ============
   A colored "folder tab" that names the module — the physical
   filing metaphor. Set --m to a module color. */

[data-skin] .module-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  background: var(--m-tint, var(--brand-tint));
  color: var(--m-ink, var(--brand-ink));
  border: var(--bw) solid var(--m-border, var(--brand-border));
  border-radius: var(--r) var(--r) 0 0;
  border-bottom: 0;
  font-weight: var(--w-bold);
  font-size: var(--t-sm);
}

[data-skin] .module-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none;
  background: var(--m, var(--brand));
  border: 1.5px solid oklch(0% 0 0 / 0.15);
}

/* ============ BUTTON ============ */

[data-skin] .btn {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  background: var(--paper-card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

[data-skin] .btn:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .btn:active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

[data-skin] .btn:disabled, [data-skin] .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

[data-skin] .btn.lg {
  min-height: var(--touch-lg);
  font-size: var(--t-lead);
  padding: 0 var(--sp-6);
}

[data-skin] .btn.block {
  width: 100%;
}

/* Primary — solid brand fill (or module color via --m) */

[data-skin] .btn.primary {
  background: var(--m, var(--brand));
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--m, var(--brand)) 100%, black 18%);
}

[data-skin] .btn.primary:hover {
  background: color-mix(in oklch, var(--m, var(--brand)) 100%, black 8%);
}

/* Secondary — white paper with a strong drawn edge */

[data-skin] .btn.secondary {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

/* Ghost — quiet, gains an edge on hover */

[data-skin] .btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
}

[data-skin] .btn.ghost:hover {
  background: var(--paper-2);
  border-color: var(--edge);
  box-shadow: none;
  transform: none;
}

/* Danger */

[data-skin] .btn.danger {
  background: var(--danger);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--danger) 100%, black 18%);
}

/* Icon button — square, ≥48px */

[data-skin] .icon-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-card);
  color: var(--ink);
  border: var(--bw) solid var(--edge-strong);
  box-shadow: var(--lift-1);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 120ms ease;
}

[data-skin] .icon-btn:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .icon-btn:active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

/* ============ FIELD / INPUT ============ */

/* RESTORED BY SP-4 TASK 3 (was disabled by SP-3 Task 0a).
   `.field` is Paper's form-field scaffold: `.field > label + control + help`,
   a flex column with an 8px gap.

   SP-3 Task 0a commented this rule out because seven app files emitted
   `class="field"` with a DIFFERENT structure — `.field > .label + .value`,
   plain block flow — and every one of them renders inside `[data-skin]`, so
   SP-2 had silently restyled them the moment it merged.

   SP-4 Task 3 resolved it by measurement rather than by migration. SIX of the
   seven were DEAD: Bullet Train's `CurrentThemeHelper#render` rewrites
   `shared/fields/x` to `themes/{light,tailwind_css,base}/fields/x`, so those
   `app/views/shared/fields/_*.html.erb` files were shadowed and could not
   reach a screen. Confirmed live — a rendered scaffold form returned
   `.field` count 0 while `.mt-1.5`, the gem partial's control wrapper,
   returned 9. They are deleted; a seventh, `_select.html.erb`, had no theme
   counterpart but also no call site anywhere in the repo, and went with them.

   The one live consumer, `app/views/account/memberships/_form.html.erb`, was
   migrated: its inner `.label` is now `.field-label`. That is the whole
   delta — the wrapper was already a label-then-control column, so Paper's
   rule adds the 8px gap and nothing else. The `.options` wrapper inside it is
   unstyled everywhere in the app and the gems and is left alone; the
   `check_box_tag` rows are deliberately NOT moved onto Paper's `.check`
   contract, because SP-3 ruling R8.3 confined that rework to the app's own
   two shared UI partials.

   Full evidence and the rejected alternatives (migrate all seven / rename the
   wrapper to `app-field`) are in
   docs/design/paper-migration/bt-partial-ejections.md, "SP-4 Task 3".

   `.field-label`, `.field-help`, `.field-error`, `.field-affix` and `.affix`
   were never disabled — they are standalone selectors, not descendants of
   `.field`. `.field-affix` and `.affix` still have no consumer; Task 11 adds
   the RM currency prefix that uses them. */

[data-skin] .field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

[data-skin] .field-label {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--ink);
}

[data-skin] .field-help {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

[data-skin] .field-error {
  font-size: var(--t-sm);
  color: var(--danger-ink);
  font-weight: var(--w-medium);
}

[data-skin] .input, [data-skin] .textarea, [data-skin] .select {
  width: 100%;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper-card);
  border: var(--bw-strong) solid var(--edge-ink);
  border-radius: var(--r);
  padding: 0 var(--sp-4);
  min-height: var(--touch-min);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

[data-skin] .textarea {
  padding: var(--sp-3) var(--sp-4);
  min-height: 96px;
  line-height: var(--lh-body);
  resize: vertical;
}

[data-skin] .input::-moz-placeholder, [data-skin] .textarea::-moz-placeholder {
  color: var(--ink-3);
}

[data-skin] .input::placeholder, [data-skin] .textarea::placeholder {
  color: var(--ink-3);
}

[data-skin] .input:focus, [data-skin] .textarea:focus, [data-skin] .select:focus {
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}

[data-skin] .input[aria-invalid="true"], [data-skin] .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

[data-skin] .field-affix {
  position: relative;
  display: flex;
  align-items: center;
}

[data-skin] .field-affix > .input {
  padding-left: 38px;
}

[data-skin] .field-affix > .affix {
  position: absolute;
  left: var(--sp-4);
  pointer-events: none;
  font-family: var(--f-mono);
  font-weight: var(--w-bold);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

/* ============ PILL / BADGE ============ */

[data-skin] .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper-card);
  color: var(--ink-2);
  border: var(--bw) solid var(--edge-strong);
  white-space: nowrap;
}

[data-skin] .pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

[data-skin] .pill.solid {
  color: var(--on-brand);
  background: var(--brand);
  border-color: transparent;
}

[data-skin] .pill.tasks {
  color: var(--tasks-ink);
  background: var(--tasks-tint);
  border-color: var(--tasks-border);
}

[data-skin] .pill.shop  {
  color: var(--shop-ink);
  background: var(--shop-tint);
  border-color: var(--shop-border);
}

[data-skin] .pill.money {
  color: var(--money-ink);
  background: var(--money-tint);
  border-color: var(--money-border);
}

[data-skin] .pill.news  {
  color: var(--news-ink);
  background: var(--news-tint);
  border-color: var(--news-border);
}

[data-skin] .pill.cal   {
  color: var(--cal-ink);
  background: var(--cal-tint);
  border-color: var(--cal-border);
}

[data-skin] .pill.ok    {
  color: var(--ok-ink);
  background: var(--ok-tint);
  border-color: var(--ok-border);
}

[data-skin] .pill.warn  {
  color: var(--warn-ink);
  background: var(--warn-tint);
  border-color: var(--warn-border);
}

[data-skin] .pill.danger{
  color: var(--danger-ink);
  background: var(--danger-tint);
  border-color: var(--danger-border);
}

[data-skin] .pill.info  {
  color: var(--info-ink);
  background: var(--info-tint);
  border-color: var(--info-border);
}

/* ============ SEGMENTED CONTROL ============ */

[data-skin] .seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-sunk);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-pill);
}

[data-skin] .seg > button {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 var(--sp-4);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

[data-skin] .seg > button[aria-pressed="true"] {
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: var(--lift-1);
  border: var(--bw) solid var(--edge-strong);
}

[data-skin] .seg > button[aria-pressed="true"].accent {
  background: var(--brand);
  color: var(--on-brand);
  border-color: transparent;
}

/* ============ CHECKBOX (physical tick box) ============ */

[data-skin] .check {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--paper-card);
  border: var(--bw-strong) solid var(--edge-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-brand);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

[data-skin] .check svg {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 100ms ease;
}

[data-skin] .check[data-checked="true"] {
  background: var(--m, var(--ok));
  border-color: color-mix(in oklch, var(--m, var(--ok)) 100%, black 18%);
}

[data-skin] .check[data-checked="true"] svg {
  opacity: 1;
}

/* Bigger hit area without a bigger box */

[data-skin] .check-hit {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============ SWITCH ============ */

[data-skin] .switch {
  width: 56px;
  height: 32px;
  flex: none;
  position: relative;
  cursor: pointer;
  background: var(--paper-sunk);
  border: var(--bw-strong) solid var(--edge-ink);
  border-radius: var(--r-pill);
  transition: background 160ms ease, border-color 160ms ease;
}

[data-skin] .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--paper-card);
  border: 1.5px solid var(--edge-ink);
  box-shadow: var(--lift-1);
  transition: transform 180ms cubic-bezier(.5,1.4,.5,1), background 160ms;
}

[data-skin] .switch[data-on="true"] {
  background: var(--brand);
  border-color: color-mix(in oklch, var(--brand) 100%, black 18%);
}

[data-skin] .switch[data-on="true"]::after {
  transform: translateX(24px);
  background: var(--on-brand);
  border-color: transparent;
}

/* ============ AVATAR ============ */

[data-skin] .avatar {
  border-radius: 999px;
  overflow: hidden;
  flex: none;
  background: var(--paper-2);
  border: var(--bw-strong) solid var(--edge-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: var(--w-black);
  color: var(--ink-2);
  width: 44px;
  height: 44px;
  font-size: var(--t-body);
}

[data-skin] .avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============ PROGRESS ============ */

[data-skin] .progress {
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--paper-sunk);
  border: var(--bw) solid var(--edge);
}

[data-skin] .progress > i {
  display: block;
  height: 100%;
  background: var(--m, var(--brand));
  border-radius: inherit;
  transition: width 260ms ease;
}

/* ============ LIST ROW ============ */

[data-skin] .list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-lg);
  padding: var(--sp-3) 0;
}

[data-skin] .list-row + .list-row {
  border-top: var(--bw) solid var(--edge);
}

[data-skin] .row-tappable {
  cursor: pointer;
  border-radius: var(--r);
  padding-inline: var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  transition: background 120ms ease;
}

[data-skin] .row-tappable:hover {
  background: var(--paper-2);
}

/* ============ TAB BAR (bottom nav) ============ */

[data-skin] .tabbar {
  display: flex;
  align-items: stretch;
  background: var(--paper-card);
  border-top: var(--bw-strong) solid var(--edge-ink);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}

[data-skin] .tabbar > a, [data-skin] .tabbar > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--touch-min);
  padding: 6px 4px;
  border: 0;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r);
}

[data-skin] .tabbar [aria-current="page"], [data-skin] .tabbar .active {
  color: var(--brand-ink);
}

[data-skin] .tabbar [aria-current="page"] .tab-ico, [data-skin] .tabbar .active .tab-ico {
  background: var(--brand-tint);
}

[data-skin] .tab-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  border-radius: var(--r-pill);
}

/* ============ APP HEADER ============ */

[data-skin] .app-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-card);
  border-bottom: var(--bw-strong) solid var(--edge-ink);
}

[data-skin] .app-header .title {
  font-family: var(--f-display);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
}

/* ============ EMPTY STATE ============ */

[data-skin] .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  color: var(--ink-2);
}

[data-skin] .empty-state .es-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-lg);
  background: var(--paper-sunk);
  border: var(--bw-strong) solid var(--edge-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}

[data-skin] .empty-state .es-title {
  font-family: var(--f-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   APP ADDITION — reported upstream                        [SP-3 · Task 7]
   ══════════════════════════════════════════════════════════════════════════
   NOTHING BELOW THIS BANNER EXISTS IN docs/design/sama2-paper/. Everything
   above it is the upstream file with the R2 `[data-skin] ` prefix and no other
   change, so re-syncing means replacing the span above and leaving this block
   in place.

   SEVEN additions, numbered (1)-(7) below. (Corrected 2026-08-14: this said
   "two", counting only the R8 pair, and stayed at two when `ce8552ad` added
   (3), the component-underline rule at line 415. This banner is the
   instruction SP-7 follows to re-sync against upstream — an undercount here
   means a rule silently reverted.)

     (1) `.btn.compact`          — SP-3 R8.1
     (2) `.paper-card.pad-0`     — SP-3 R8.2
     (3) component-underline fix — commit `ce8552ad`, after Task 17
     (4) `.field` row-margin reset — SP-4 Task 4
     (5) `.input` utility neutralisation — SP-4 Task 4
     (6) disabled state + the `.field` control fallback — SP-4 Task 5
     (7) `.button` — Bullet Train's control class, on Paper — SP-4 Task 7
     (8) `.field-affix` reach + `.has-trailing-icon` — SP-4 Task 13 review

   (1) and (2) were filed upstream together with the `.icon-btn.ghost` defect
   (class map §7.5); report text:
   docs/design/paper-migration/upstream-report-01.md. (3) postdates that report
   and is NOT yet filed — SP-7 should either file it or fold it in.

   If upstream adopts any of them under a different name, SP-7 does the
   mechanical rename and this block shrinks. If upstream REJECTS them, the
   fallbacks are recorded in the report — they are worse, not equivalent.
   ══════════════════════════════════════════════════════════════════════════ */

/* (1) `.btn.compact` — the de-facto small button, codified.
   Replaces `neu-btn--sm` at 35 call sites (32px / 6px 12px / 12px). Paper
   ships no small button: `Button.d.ts` declares `size?: "md" | "lg"` and
   readme.md:78 makes ≥48px a ruling. But the DS does not obey its own floor —
   its reference screens carry 34 inline `min-height` overrides, 30 of them on a
   DS component class, 23 of THOSE below 48px, and 8 on `.btn` itself (7 of the
   8 sub-floor) — e.g. `class="btn secondary" style="min-height:40px"`.
   (Corrected 2026-08-14: this used to read 25 / 23 / 7, the pre-report estimate.
   The filed figures are upstream-report-01.md §1 and they are the ones to quote.) 40 / 16 / 15 are the values those inline styles
   already use. 40px clears WCAG 2.5.8 AA (24px) and is a strict improvement on
   the 32px status quo.

   The name is `.compact`, deliberately NOT `.sm`: `Button.d.ts` owns a size
   token namespace (`"md" | "lg"`) and a future upstream `.sm` could ship
   different values. `.compact` cannot collide with it.

   Specificity (0,3,0), so it beats `[data-skin] .btn` (0,2,0) and the R3 touch
   floor in base.css (0,1,0) on `min-height`. It deliberately does NOT restate
   `min-width`, so a `<button class="btn compact">` still inherits the R3
   floor's `min-width: 48px` — 40px tall, ≥48px wide. That is intended; only
   labels shorter than ~16px of text ever feel it. */

[data-skin] .btn.compact {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

/* (2) `.paper-card.pad-0` — the missing zero-padding card modifier.
   Replaces `neu-card--flush` at 8 call sites, all full-bleed containers: a
   sandboxed email iframe (inbox/_email_document), the team-messages split
   pane, three `divide-y` lists, and three `overflow-hidden` wrappers.

   The SP-3 plan mapped these to `.paper-card.flat`. That mapping is WRONG —
   `.flat` is `box-shadow: none`, not padding. Paper's padding modifiers are
   `pad-lg` 24px, default 20px, `pad-sm` 16px, `pad-list` `6px 20px`; none is
   zero. `pad-list`'s 6px would inset the iframe and the split pane, which is
   the exact bug the `.sheet` → `.pad-list` note above was written to fix.
   The name extends that existing `pad-*` vocabulary rather than inventing one.

   Specificity (0,3,0) over `[data-skin] .paper-card` (0,2,0). */

[data-skin] .paper-card.pad-0 {
  padding: 0;
}

/* (3) Component-shaped links do not get the prose underline.
   `base.css` declares `[data-skin] a { text-decoration: underline }` at (0,1,1)
   so that editor-added links are identifiable without relying on colour. That
   is right for prose and wrong for an element that is already unambiguously a
   control: a whole settings card, a tappable row, a status pill.

   `.btn` already solves this for itself — it sets `text-decoration: none` in
   its own block — so this is not a new position, it is the same position
   applied to the other components the app makes clickable. Upstream never hit
   it because the DS's own specimens never wrap a card in an <a>.

   Measured: the pre-Paper baseline underlined none of these; today, 11
   settings cards, 7 rows on /account/me, the dashboard inbox tile and every
   announcement card render with an underline through their title AND their
   body copy, because a text decoration set on an ancestor propagates to
   descendants. A Tailwind `no-underline` utility CANNOT fix it at the call
   site: that class is (0,1,0) and loses to (0,1,1).

   Specificity (0,2,1) — `[data-skin]` + `a`/`button` + the component class —
   which is the minimum that beats the base rule. Deliberately NOT `!important`
   and deliberately not a change to `base.css`, whose rule is correct for the
   case it was written for. */

[data-skin] :is(a, button):is(.paper-card, .paper-well, .row-tappable, .list-row, .pill, .module-tab) {
  text-decoration: none;
}

/* (4) `.field` row-margin reset — SP-4 Task 4.
   Bullet Train's field scaffold spaces its rows with a `mt-1.5` utility on the
   control wrapper, the error paragraph and the help paragraph. Paper spaces
   them with `.field`'s 8px `gap`. The two ADD — 6px margin plus 8px gap — and
   that is the one collision specificity cannot settle, because the utility and
   the gap are different properties, not competing declarations.

   `themes/light/fields/_field.html.erb` deliberately keeps those utilities:
   the same partial renders on the UNSKINNED Devise auth screens, where every
   Paper rule is inert and the margins are the only spacing there is. So the
   reset belongs here, inside the skin scope, rather than in the markup.

   Specificity (0,2,0) against the utility's (0,1,0). `> *` is the direct rows
   of a field only — the label slot, the control wrapper and the two
   paragraphs. It is scoped to `.field`, so it cannot reach a Tailwind margin
   anywhere else in a form. */

[data-skin] .field > * {
  margin-top: 0;
}

/* (5) `.input` utility neutralisation — SP-4 Task 4.
   Upstream's `.input` block (line 125 of the DS's tokens/components.css)
   declares neither `box-shadow` nor `font-weight`, because in the DS's own
   specimens the control sits on a clean page and inherits body weight with no
   shadow. On Bullet Train markup it does not: `fields/_field.html.erb` puts
   `shadow-sm font-light` on every control it renders, and Paper declaring
   nothing means those two utilities survive — measured on a scaffolded field,
   `font-weight: 300` and a live Tailwind ring shadow.

   Restating the DS's implicit values explicitly is the smallest fix. The
   alternative — deleting `shadow-sm font-light` from the ejected partial's
   class string — was rejected because that string also renders on the
   UNSKINNED Devise auth screens, where no Paper rule can put the values back.
   Keeping the fork purely additive is worth one line here.

   `box-shadow: none` is safe for focus: `[data-skin] .input:focus` above is
   (0,2,1) and this is (0,2,0), so the focus ring still wins, and every
   `:focus-visible` is also a `:focus`. */

[data-skin] .input,
[data-skin] .textarea,
[data-skin] .select {
  box-shadow: none;
  font-weight: var(--w-regular);
}

/* (6) The disabled state, and the `.field` control fallback — SP-4 Task 5.
   `components/neu_forms.css` used to carry five rule groups on 14 element
   selectors prefixed `form.form`. Task 5 deleted them. Four of the five had a
   Paper equivalent already — surface, focus ring, placeholder and the
   `aria-invalid` error border — and are now delivered by `.input` /
   `.textarea` / `.select` above, put on the markup by the Task 4 fork.

   TWO THINGS HAD NO PAPER EQUIVALENT, and they are (6a) and (6b).

   Deliberately NOT carried over: the neumorphic inset well (the small inset
   shadow token in the `--neu-*` family; it is not named here, because the
   `paper_token_guard` ratchet counts a literal token name in a COMMENT as a
   reference and it is right to — it caught this paragraph's first draft).
   Spec §3.3 lists that token as one of the four genuinely unmappable ones —
   Paper has no inset concept for a control — and the neumorph skin re-values
   it for anyone who wants it back. Also not carried over: the three
   `form.form *.border-red-500` selectors, because Task 4 keeps `border-red-500`
   in the control's class string at (0,1,0) and `[data-skin] .input[aria-invalid]`
   is (0,2,0), so Paper's `--danger` border supersedes it wherever a skin is
   active and the Bullet Train red still shows on the unskinned auth screens. */

/* (6a) Disabled. Upstream Paper declares no disabled state for a form control
   at all — the DS's specimens have no disabled field. `neu_forms.css:58-60`
   did, and dropping it would leave a disabled input indistinguishable from an
   editable one, which is a usability regression rather than a restyle.
   `:disabled` is a pseudo-class, so (0,2,1) — above `.input` and above (5). */

[data-skin] .input:disabled,
[data-skin] .textarea:disabled,
[data-skin] .select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* (6b) `.select` was missing from upstream's `aria-invalid` rule (it lists
   `.input` and `.textarea` only). An errored select is as much an errored
   control as an errored text field. */

[data-skin] .select[aria-invalid="true"] {
  border-color: var(--danger);
}

/* (6c) THE FALLBACK, and it is the judgement call in this task.

   `themes/light/fields/_field.html.erb` can only class the control on the
   branch where IT renders the control. Nine of the gem's field partials
   supply their own through the `:field` content slot, and their block runs
   before the fork's Ruby, so the class cannot reach them. The visible native
   controls that lands on are the two date fields (`fields/_date_field` and
   `_date_and_time_field`, 12 + 22 app call sites) which render
   `input[type="text"].form-control.single-daterange`, and the emoji field.

   Without this rule, deleting the element layer leaves a `.form`-tier form —
   `/account/teams/:id/expenses/new`, measured — rendering a Paper `.input`
   (2px `--edge-ink` edge, 48px, 17px) directly above a bare BT date control
   (1px `base-300`, ~34px, 14px). Two control looks in one form is worse than
   either look consistently, and the alternative that avoids it is ejecting
   nine more gem partials to add one class each.

   WHY THIS IS NOT THE ELEMENT LAYER COMING BACK. The layer being retired was
   scoped to `form.form` — a Bullet Train class carried by 17 of 31 account
   forms WHEN TASK 5 RAN — was outside `[data-skin]` entirely, and was built on
   `--neu-*` tokens. This is scoped to `[data-skin] .field`, a Paper structural
   class the Task 4 fork emits, applies to all 31 forms equally, and is built on
   Paper tokens.

   (The 17-of-31 figure is a Task 5 snapshot and is deliberately kept as one.
   Task 10 later put `.form` on 30 of 31 — every account form partial except the
   horizontal `shopping_items` quick-add row — which strengthens this paragraph
   rather than weakening it: `form.form` was never a reliable hook, which is why
   it moved. `.form` is also not "app-authored": it comes from Bullet Train, and
   five Devise gem views set it on an unskinned surface, which is exactly how
   deleting the element layer reached the auth screens. See
   docs/design/paper-migration/bt-partial-ejections.md, "Auth's CSS is NOT
   byte-identical".)

   SPECIFICITY IS DELIBERATE. `[data-skin]` + `.field` + two zero-weight
   `:where()` groups = (0,2,0), exactly `[data-skin] .input`, so the fallback
   and the class agree rather than fight; the `:focus` variants are (0,2,1),
   exactly `.input:focus`. Both exclusion lists are inside `:where()` for that
   reason — a bare `:not()` chain would have pushed this to (0,10,1) and
   silently outranked the focus rules.

   THE EXCLUSIONS ARE NOT DECORATION. `[type="checkbox"]` and `[type="radio"]`
   are excluded because `@tailwindcss/forms` paints a checked box in three
   escalating rules — `:checked` (0,2,0) then `:checked:hover` and
   `:checked:focus` (0,3,0) — and a (0,2,0) surface rule would half-win,
   producing a control whose computed background reads correct while the
   rendered pixel stays brand-blue. `[type="submit"]` / `"button"` / `"reset"`
   are buttons, not fields, and belong to Task 7's `.button` ruling.
   `[type="file"]`, `"range"`, `"color"` and `"image"` have native widget
   geometry that a 48px min-height and a 12px radius would distort.
   `.select2` is select2's visually-hidden native select.

   HANDOVER TO TASK 9. `components/form_fields.css` styles `.datepicker-input`
   with hardcoded hex and no dark variant; that class is applied at RUNTIME by
   `app/javascript/support/form_components.js`, so it is invisible to every
   grep from markup. It must be retokenized to AGREE with this rule, not to
   compete with it — two sources of truth for the date control is exactly the
   collapse-them-later trap. */

[data-skin] .field :where(input, textarea, select):where(:not(
  .input, .textarea, .select, .select2,
  [type="checkbox"], [type="radio"], [type="submit"], [type="button"],
  [type="reset"], [type="file"], [type="image"], [type="range"],
  [type="color"], [type="hidden"]
)) {
  width: 100%;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--ink);
  background: var(--paper-card);
  border: var(--bw-strong) solid var(--edge-ink);
  border-radius: var(--r);
  padding: 0 var(--sp-4);
  min-height: var(--touch-min);
  outline: none;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

[data-skin] .field :where(textarea):where(:not(.textarea)) {
  padding: var(--sp-3) var(--sp-4);
  min-height: 96px;
  line-height: var(--lh-body);
  resize: vertical;
}

[data-skin] .field :where(input, textarea):where(:not(.input, .textarea))::-moz-placeholder {
  color: var(--ink-3);
}

[data-skin] .field :where(input, textarea):where(:not(.input, .textarea))::placeholder {
  color: var(--ink-3);
}

[data-skin] .field :where(input, textarea, select):where(:not(
  .input, .textarea, .select, .select2,
  [type="checkbox"], [type="radio"], [type="submit"], [type="button"],
  [type="reset"], [type="file"], [type="image"], [type="range"],
  [type="color"], [type="hidden"]
)):focus {
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}

[data-skin] .field :where(input, textarea, select):where(:not(
  .input, .textarea, .select
)):disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-skin] .field :where(input, textarea, select):where(:not(
  .input, .textarea, .select
))[aria-invalid="true"] {
  border-color: var(--danger);
}

/* (7) `.button` — Bullet Train's control class, on Paper.  SP-4 Task 7.
   Full ruling, rejected options and the measurements:
   docs/design/paper-migration/bt-partial-ejections.md, "SP-4 Task 7".

   THREE LIVE DEFECTS THIS FIXES, each measured on a scaffold show page before
   the rule existed and each pinned by
   test/system/account/paper_form_coverage_test.rb:

     · CONTRAST 2.59:1. `[data-skin] a { color: var(--brand-ink) }` in base.css
       is (0,1,1); Bullet Train's `.button { @apply text-white }` is (0,1,0).
       So every `.button` rendered as an `<a>` — which is most of them — drew
       dark blue ink on its own blue fill. WCAG 1.4.3 AA wants 4.5:1.
     · UNDERLINE, from the same rule. A Tailwind `no-underline` at the call
       site cannot fix it: (0,1,0) against (0,1,1).
     · HEIGHT 45px, under Paper's 48px floor. R3's floor in base.css lists
       `button, [role="button"], input[type="submit"], input[type="button"]`,
       and an `<a class="button">` is none of them.

   WHY NOT ALIAS `.button` TO `.btn` (the plan's option c). A bare
   `class="button"` is Bullet Train's PRIMARY control — it is what
   `_show_layout` and every scaffold form put on their call to action — while a
   bare `.btn` in Paper is a white card with an ink edge. A straight alias
   would silently demote every submit button in the app to a secondary-looking
   one. So the geometry, elevation and typography are `.btn`'s, and the
   SEMANTICS stay Bullet Train's: `.button` fills, `.button-alternative` is the
   quiet one.

   WHY NOT LEAVE IT (option a): it ships the contrast failure above on ~69
   scaffold pages.

   `.button-secondary` IS DELIBERATELY UNTOUCHED. It is Bullet Train's
   link-style control, not a button; `neu_scaffold.css` excluded it on purpose
   and so does this.

   THE VARIANT MODIFIERS ARE NOT NEW MARKUP. `_show_layout.html.erb` already
   writes `button primary`, `button danger` and `button secondary` — and until
   this rule existed those modifiers were INERT, because Paper's `.btn.danger`
   needs `.btn`. A Delete button reading `button danger` rendered blue. The
   modifier rules below are what make that markup mean what it says.

   HOVER NEEDS THE ELEMENT IN THE SELECTOR. `[data-skin] a:hover` is (0,2,1)
   and would re-tint the label on hover — the same defect the SP-3 close-out
   recorded for a bare `.btn` on an `<a>`. `a.button:hover` is (0,3,1) and
   settles it outright rather than on source order. */

[data-skin] .button,
[data-skin] .button-alternative {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid var(--edge-ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

/* Bullet Train's semantics: bare `.button` fills, `.button-alternative` does not. */

[data-skin] .button,
[data-skin] a.button,
[data-skin] .button:hover,
[data-skin] a.button:hover {
  background: var(--m, var(--brand));
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--m, var(--brand)) 100%, black 18%);
}

[data-skin] .button-alternative,
[data-skin] a.button-alternative,
[data-skin] .button-alternative:hover,
[data-skin] a.button-alternative:hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

[data-skin] .button:hover,
[data-skin] .button-alternative:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}

[data-skin] .button:active,
[data-skin] .button-alternative:active {
  box-shadow: var(--lift-0);
  transform: translateY(1px);
}

[data-skin] .button:disabled,
[data-skin] .button[aria-disabled="true"],
[data-skin] .button-alternative:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* THE FOCUS RING MUST BE CONCATENATED, NOT REPLACED — and this was caught by
   the test above, red, after the rules had been written.

   `--focus-ring` and `--lift-*` are both `box-shadow`. `base.css`'s global
   `[data-skin] :where(…):focus-visible` is (0,2,0) and so is
   `[data-skin] .button` — and base.css is imported FIRST, so the resting
   `--lift-1` above won the tie and a focused `.button` rendered NO RING AT
   ALL. `base.css:67-72` already solves exactly this for `.btn`, `.icon-btn`
   and the tappable card; `.button` needs the same treatment and did not have
   it because it is not a Paper class.

   This is `neu_scaffold.css:39-41`'s own warning coming true in a different
   form: "BT's focus ring is an unlayered `.button:focus` box-shadow that
   currently out-specifies this rule … re-verify the focus ring still wins over
   this shadow." It did not. (0,2,1) settles it. */

[data-skin] .button:focus-visible,
[data-skin] .button-alternative:focus-visible {
  box-shadow: var(--focus-ring), var(--lift-1);
}

/* The modifiers `_show_layout.html.erb` has been emitting into the void. */

[data-skin] .button.secondary,
[data-skin] a.button.secondary,
[data-skin] .button.secondary:hover,
[data-skin] a.button.secondary:hover {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--edge-ink);
}

[data-skin] .button.ghost,
[data-skin] a.button.ghost,
[data-skin] .button.ghost:hover,
[data-skin] a.button.ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

[data-skin] .button.ghost:hover {
  background: var(--paper-2);
  border-color: var(--edge);
  transform: none;
}

[data-skin] .button.danger,
[data-skin] a.button.danger,
[data-skin] .button.danger:hover,
[data-skin] a.button.danger:hover {
  background: var(--danger);
  color: var(--on-brand);
  border-color: color-mix(in oklch, var(--danger) 100%, black 18%);
}

/* Bullet Train's own size modifier, mapped to the same values as `.btn.compact`
   so the two vocabularies cannot drift apart. */

[data-skin] .button.button-smaller,
[data-skin] .button-alternative.button-smaller {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--t-sm);
}

/* (8) `.field-affix` reach, and a trailing-icon padding class.
   SP-4 Task 13, from the code review of Tasks 9-12.

   ── (8a) THE AFFIX ONLY REACHED `.input` ──────────────────────────────────
   Upstream declares `[data-skin] .field-affix > .input { padding-left: 38px }`
   and nothing else, because the DS's only affix specimen is a text input.
   `themes/light/fields/_field.html.erb` will now wrap ANY control it is given
   an `affix:` for, and two shapes reach that branch without a `.input` class:
   a `text_area` (the fork classes it `.textarea`) and any of the nine gem
   field partials that supply their control through the `:field` content slot
   (those carry no Paper class at all — they are styled by the `.field`
   fallback in (6c) above).

   Without this rule those two render the absolutely-positioned `.affix` ON TOP
   of the control's own value, with `pointer-events: none` so it cannot even be
   clicked through. No call site does it today — all six money forms use
   `text_field`/`number_field` — but the option is now public, and a rule is
   cheaper than a comment asking people not to.

   `:is()` rather than `:where()` on purpose: (0,3,0) beats both
   `[data-skin] .input` (0,2,0) and the (6c) fallback (0,2,0) outright, so this
   does not depend on import order the way (8b) below has to explain.

   ── (8b) `.has-trailing-icon` ─────────────────────────────────────────────
   `app/views/account/shared/ui/_input` pins an error icon, and `_date_picker`
   a clear button, at `right: 0` inside the control wrapper, and both reserved
   room for it with Tailwind's `pr-10`. Measured: that does not work under a
   skin. `.pr-10` is (0,1,0), `[data-skin] .input { padding: 0 var(--sp-4) }`
   is (0,2,0) and imports later, so it wins on both counts and the icon sits on
   top of a long value. This is the class that can actually reserve the room. */

[data-skin] .field-affix > :is(input, textarea, select) {
  padding-left: 38px;
}

[data-skin] .input.has-trailing-icon,
[data-skin] .textarea.has-trailing-icon,
[data-skin] .select.has-trailing-icon {
  padding-right: 40px;
}

/* ──────────────────────────────────────────────────────────
   Sama² Neumorph — interchangeable skin
   The prior soft-UI language (theme/neumorphism.css), re-expressed
   on the shared Sama² token contract. Same markup, same classes,
   same spacing/type/touch — only the token values change.
   Activate: <body data-skin="neumorph"> (or any subtree).

   TOUCH TARGETS ARE PAPER'S, NOT TODAY'S — read this before reaching for
   rollback. This skin re-values colour, elevation and radius tokens; it does
   NOT re-value `--touch-min` (48px, paper/tokens/spacing.css). And SP-2 ruling
   R3's guards in components/touch_optimizations.css key on `[data-skin]` with
   ANY value, so under `data-skin="neumorph"` the legacy 44px pin stands down
   exactly as it does under Paper. Consequence: the rollback skin renders 48px
   buttons where today's un-skinned surface renders 44px.

   That is consistent with R4 — exact-pixel rollback is "no attribute at all"
   (flip `self.default_skin` back to nil in the controller), never
   `data-skin="neumorph"` — and with the note in the SP-2 plan that this skin is
   a TONAL rollback, not a byte-exact one. Stated here because this file is
   where somebody reaching for rollback will look. Do not "fix" it by
   re-valuing `--touch-min` down to 44px; that would make the skin fail the
   accessibility floor the design system treats as a ruling.
   ────────────────────────────────────────────────────────── */

/* DELIBERATE DIVERGENCE FROM THE IMPORTED SOURCE — do not restore.
   Upstream declares `@import url("https://fonts.googleapis.com/...")` here for
   DM Sans + Nunito + JetBrains Mono. It is removed on purpose:
   - This skin's job is ROLLBACK FIDELITY, and the app references neither DM
     Sans nor Nunito anywhere (components/neumorphism.css declares no
     font-family at all). Honouring the @import would push the "rollback" skin
     typographically FURTHER from today than doing nothing. The --f-* values
     below instead pin what actually renders now.
   - A CDN font can never enter the offline cache: app/javascript/service_worker.js:46
     skips cross-origin requests. Same reason Atkinson is being self-hosted.
   - postcss-import inlines this file mid-bundle, where a non-leading @import
     is invalid CSS — so the line was probably inert regardless. */

[data-skin="neumorph"] {
  /* Surfaces — one cool-neutral surface; cards are the SAME color (soft UI) */
  --paper: oklch(92% 0.012 220);
  --paper-card: oklch(92% 0.012 220);
  --paper-2: oklch(95% 0.012 220);
  --paper-sunk: oklch(89% 0.012 220);
  /* Ink */
  --ink: oklch(28% 0.015 220);
  --ink-2: oklch(48% 0.012 220);
  --ink-3: oklch(60% 0.010 220);
  /* Edges — hairlines (the neumorphism legibility fix), never drawn ink */
  --edge: oklch(80% 0.012 220 / 0.55);
  --edge-strong: oklch(72% 0.012 220 / 0.70);
  --edge-ink: oklch(66% 0.014 220 / 0.85);
  --bw: 1px;
  --bw-strong: 1px;
  /* Brand — locked cool blue */
  --brand: oklch(62% 0.16 242);
  --brand-strong: oklch(56% 0.16 242);
  --brand-ink: oklch(38% 0.14 242);
  --brand-tint: oklch(89% 0.05 242);
  --brand-border: oklch(75% 0.08 242 / 0.7);
  --on-brand: oklch(98% 0.01 242);
  /* Modules — re-tuned to the neumorph harmony (L≈62, shared chroma) */
  --tasks: var(--brand);
  --tasks-ink: var(--brand-ink);
  --tasks-tint: var(--brand-tint);
  --tasks-border: var(--brand-border);
  --shop: oklch(62% 0.13 155);
  --shop-ink: oklch(40% 0.11 155);
  --shop-tint: oklch(90% 0.05 155);
  --shop-border: oklch(75% 0.07 155 / 0.7);
  --money: oklch(64% 0.12 55);
  --money-ink: oklch(42% 0.11 55);
  --money-tint: oklch(90% 0.05 55);
  --money-border: oklch(78% 0.07 55 / 0.7);
  --news: oklch(60% 0.17 25);
  --news-ink: oklch(44% 0.16 25);
  --news-tint: oklch(90% 0.05 25);
  --news-border: oklch(78% 0.08 25 / 0.7);
  --cal: oklch(62% 0.14 300);
  --cal-ink: oklch(44% 0.13 300);
  --cal-tint: oklch(90% 0.045 300);
  --cal-border: oklch(78% 0.07 300 / 0.7);
  /* Status */
  --ok: var(--shop);
  --ok-ink: var(--shop-ink);
  --ok-tint: var(--shop-tint);
  --ok-border: var(--shop-border);
  --warn: oklch(70% 0.13 80);
  --warn-ink: oklch(46% 0.10 75);
  --warn-tint: oklch(91% 0.06 85);
  --warn-border: oklch(78% 0.07 85 / 0.7);
  --danger: var(--news);
  --danger-ink: var(--news-ink);
  --danger-tint: var(--news-tint);
  --danger-border: var(--news-border);
  --info: var(--brand);
  --info-ink: var(--brand-ink);
  --info-tint: var(--brand-tint);
  --info-border: var(--brand-border);
  /* Focus */
  --focus: oklch(62% 0.16 242);
  --focus-ring: 0 0 0 3px oklch(62% 0.16 242 / 0.45);
  /* Shape — the softer 18px-base radius scale */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  /* Elevation — the dual light/dark pillow (strength 0.4 baked in) */
  --lift-0: 0.4px 0.4px 0.8px oklch(78% 0.017 220), -0.4px -0.4px 0.8px oklch(99% 0.012 220);
  --lift-1: 1.2px 1.2px 2.8px oklch(78% 0.017 220), -0.8px -0.8px 2.4px oklch(99% 0.012 220);
  --lift-2: 2.4px 2.4px 5.6px oklch(78% 0.017 220), -2px -2px 4.8px oklch(99% 0.012 220);
  --lift-3: 4.8px 4.8px 11.2px oklch(78% 0.017 220), -4px -4px 9.6px oklch(99% 0.012 220);
  /* Fonts — pinned to what the app renders TODAY, not to the imported
     source's DM Sans / Nunito (see the note at the removed @import above).
     --f-sans mirrors the Bullet Train theme's Tailwind stack, `['Inter var',
     ...defaultTheme.fontFamily.sans]` (bullet_train-themes-light-1.38.0/
     tailwind.light.config.js:55); Inter is really loaded, via the gem's
     themes/light/layouts/head/_fonts.html.erb. --f-mono mirrors
     tailwind.config.js:38-41 and is already self-hosted by
     components/fonts_jetbrains_mono.css (that file was `neu_fonts.css` until
     SP-7 ruling T4; THIS LINE is one of the two reasons the face survived the
     cleanup — a rollback skin resolving to fallback mono metrics is not the
     rollback that was signed off). */
  --f-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* @kind font */
  --f-display: var(--f-sans);
  /* @kind font */
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* @kind font */
  /* Re-assert so subtree scoping picks up the skin's own type + ink */
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--paper);
}

/* Neumorph × dark — "midnight pillow"
   (Bullet Train toggles `.dark` on <html>; [data-theme] supported too.) */

[data-skin="neumorph"].dark,
[data-skin="neumorph"][data-theme="dark"],
.dark [data-skin="neumorph"],
[data-theme="dark"] [data-skin="neumorph"] {
  --paper: oklch(27% 0.014 220);
  --paper-card: oklch(27% 0.014 220);
  --paper-2: oklch(30% 0.014 220);
  --paper-sunk: oklch(24% 0.014 220);
  --ink: oklch(94% 0.008 220);
  --ink-2: oklch(76% 0.012 220);
  --ink-3: oklch(60% 0.012 220);
  --edge: oklch(48% 0.014 220 / 0.45);
  --edge-strong: oklch(56% 0.014 220 / 0.60);
  --edge-ink: oklch(62% 0.014 220 / 0.75);
  --brand: oklch(70% 0.15 242);
  --brand-strong: oklch(76% 0.15 242);
  --brand-ink: oklch(82% 0.12 242);
  --brand-tint: oklch(34% 0.06 242);
  --brand-border: oklch(50% 0.08 242 / 0.7);
  --on-brand: oklch(20% 0.04 242);
  --shop: oklch(72% 0.13 155);
  --shop-ink: oklch(82% 0.12 155);
  --shop-tint: oklch(32% 0.06 155);
  --shop-border: oklch(46% 0.09 155 / 0.7);
  --money: oklch(74% 0.12 60);
  --money-ink: oklch(84% 0.11 60);
  --money-tint: oklch(33% 0.06 55);
  --money-border: oklch(48% 0.09 55 / 0.7);
  --news: oklch(68% 0.17 25);
  --news-ink: oklch(82% 0.15 25);
  --news-tint: oklch(33% 0.08 25);
  --news-border: oklch(50% 0.12 25 / 0.7);
  --cal: oklch(74% 0.14 300);
  --cal-ink: oklch(84% 0.13 300);
  --cal-tint: oklch(33% 0.07 300);
  --cal-border: oklch(48% 0.10 300 / 0.7);
  --tasks: var(--brand);
  --tasks-ink: var(--brand-ink);
  --tasks-tint: var(--brand-tint);
  --tasks-border: var(--brand-border);
  --ok: var(--shop);
  --ok-ink: var(--shop-ink);
  --ok-tint: var(--shop-tint);
  --ok-border: var(--shop-border);
  --warn: oklch(78% 0.13 80);
  --warn-ink: oklch(86% 0.12 85);
  --warn-tint: oklch(33% 0.06 85);
  --warn-border: oklch(48% 0.09 85 / 0.7);
  --danger: var(--news);
  --danger-ink: var(--news-ink);
  --danger-tint: var(--news-tint);
  --danger-border: var(--news-border);
  --info: var(--brand);
  --info-ink: var(--brand-ink);
  --info-tint: var(--brand-tint);
  --info-border: var(--brand-border);
  --focus: oklch(74% 0.14 242);
  --focus-ring: 0 0 0 3px oklch(74% 0.14 242 / 0.5);
  --lift-0: 0.4px 0.4px 0.8px oklch(16% 0.014 220), -0.4px -0.4px 0.8px oklch(35% 0.014 220);
  --lift-1: 1.2px 1.2px 2.8px oklch(16% 0.014 220), -0.8px -0.8px 2.4px oklch(35% 0.014 220);
  --lift-2: 2.4px 2.4px 5.6px oklch(16% 0.014 220), -2px -2px 4.8px oklch(35% 0.014 220);
  --lift-3: 4.8px 4.8px 11.2px oklch(16% 0.014 220), -4px -4px 9.6px oklch(35% 0.014 220);
}

/* Bullet Train scaffold chrome on Paper (SP-4 Task 8) — the tables inside the
   scaffold box. The box's own surface is not here: `_box.html.erb` emits
   `paper-card pad-0` and inherits it from tokens/components.css above. */

/* ──────────────────────────────────────────────────────────────────────────
   Bullet Train scaffold chrome, on Paper                       [SP-4 · Task 8]
   --------------------------------------------------------------------------
   The successor to `components/neu_scaffold.css:10-33`. It styles the tables
   inside the scaffold box on ~69 Bullet Train index and show pages.

   THE BOX ITSELF IS NOT HERE, AND THAT IS THE POINT. `app/views/themes/light/
   _box.html.erb:10` now emits `paper-card pad-0` instead of `neu-box`, so the
   surface, the `--r-lg` corner, the `--edge-strong` edge and the `--lift-1`
   elevation all come from `[data-skin] .paper-card` in tokens/components.css —
   the same rule every other card in the account surface uses. There is nothing
   left to re-declare.

   `pad-0` and not bare `.paper-card`: the box partial owns its own internal
   padding (`py-6 px-8` on the title block, `pt-7 px-8` on the body, `pb-7 px-8`
   on the actions), so `.paper-card`'s 20px would double it. `pad-list`'s
   `6px 20px` would be just as wrong for the same reason. `pad-0` was added
   upstream-adjacent by SP-3 ruling R8.2 for exactly this shape.

   ── THREE THINGS THE OLD FILE DID THAT ARE DELIBERATELY NOT PORTED ────────

   1. The old border width, which was `calc(1px * <a numeric neu token>)`.
      (The token is not named here — the `paper_token_guard` ratchet counts a
      literal name in a comment as a reference, correctly, and it caught this
      paragraph. It has now caught three comments in this sub-project, which is
      three regressions it would also have caught.) That token holds the NUMBER
      `1`, so aliasing it to a colour yields `calc(1px * <color>)`, invalid at
      computed-value time, and the browser drops the WHOLE `border` declaration
      — not just the width. The call site is deleted rather than shimmed;
      `.paper-card`'s own `border: var(--bw) solid var(--edge-strong)` replaces
      it.

   2. `.neu-box .bg-base-50 { … !important }` — the old file's only
      `!important`. **It never matched anything.** It was written for the box
      partial's footer strip, and the box's `:footer` / `:raw_footer` slots have
      ZERO consumers across `app/views` and every bundled `bullet_train-*` gem
      (measured). Separately, SP-2's ramp remap already resolves `bg-base-50`
      and `dark:bg-base-900` to Paper surfaces in both schemes, so even if a
      consumer appeared the rule would be redundant. Dropped on both counts.

   3. The neumorphic surface tokens themselves. The thead tint moves from the
      old neu step-2 surface to `--paper-2` and the separators from the neu
      hairline to `--edge`; both are what the rest of the Paper surface already
      uses, so the table stops being a slightly different grey from its own
      card.

   ── AND ONE THAT IS PORTED CAREFULLY ──────────────────────────────────────
   Row hover was the old soft-accent alias (again, not spelled out — same
   ratchet), which is TRANSLUCENT: 14% in light, 22% in dark. `--brand-tint` is OPAQUE, so a straight rename would composite
   differently over any row background that is not `--paper` — and the rows are
   transparent over the card, not over the page. `color-mix(… 14%, transparent)`
   keeps the original compositing behaviour with a Paper hue. (Spec §3.3 flags
   this pair; it is the one token swap in this file that is not a rename.)

   Bullet Train draws the row separators with `divide-y` on the `<tbody>`.
   These rules only soften the HUE — do not replace the mechanism, or every
   scaffold table loses its rows' separation.
   ────────────────────────────────────────────────────────────────────────── */

/* Let the card surface show through the table wrapper. */

[data-skin] .paper-card .box-table {
  background: transparent;
}

[data-skin] .paper-card table.table thead th {
  background: var(--paper-2);
  border-bottom: var(--bw) solid var(--edge);
}

[data-skin] .paper-card table.table tbody tr {
  background: transparent;
}

[data-skin] .paper-card table.table tbody {
  border-color: var(--edge);
}

[data-skin] .paper-card table.table tbody tr:hover {
  background: color-mix(in oklab, var(--brand) 14%, transparent);
}

/* Vendor widget reconciliation (SP-4 Task 6). It must load AFTER the theme
   gem's light/fields/super_select.css — which arrives with `$ThemeStylesheet`
   at the very top of this file — because both sides of that fight are
   `!important`, so specificity decides first and source order decides the
   ties. Both sit after skins/ so a skin's token re-values reach them. (This
   sentence used to end "and before _compat.css only because _compat.css is
   temporary and stays last" — that file is gone; select2.css is now simply
   last in the block, and it MUST NOT be deleted with it. The gem has no notion
   of a Paper surface, so without it `super_select` renders `base-800` beside an
   input rendering `--paper-card`.) */

/* ──────────────────────────────────────────────────────────────────────────
   select2 / `super_select` — the vendor widget, on Paper       [SP-4 · Task 6]
   --------------------------------------------------------------------------
   ⚠️ SP-7 MUST NOT DELETE THIS FILE — but read the next paragraph before
   quoting the reason, because the reason everyone has been giving is wrong.

   It is not part of the neumorphic layer and never was. It moved here from
   `components/neu_forms.css:74-109`, which SP-7 deletes wholesale.

   ── SPEC §8 RISK 7 IS FALSE, MEASURED ─────────────────────────────────────
   The spec, the SP-4 plan and the file's own old comment all say this block is
   "the ONLY thing giving `super_select` a usable dark mode app-wide", because
   `bullet_train-themes-light`'s `fields/super_select.css` sets no background.
   That file does not — but it is not the only one the gem ships.

   `bullet_train-themes-light-1.38.0/app/assets/stylesheets/light/tailwind/
   dark-mode.css:74-110` gives select2 a complete dark treatment:
   `bg-base-800` on the selection, `bg-base-700` on the dropdown,
   `bg-base-800 border-base-900` on the search field, `text-base-300` on the
   rendered value and the result options. After SP-2's ramp remap those
   `base-*` steps already resolve to Paper values inside `[data-skin]`.

   Proved by removing this file from the build entirely and re-measuring: the
   control still came back `rgb(47, 42, 36)` in dark mode, from
   `.dark .select2-container .select2-selection--single` at (0,3,0). The
   widget does NOT go white.

   Same class of miss as the third theme gem SP-4 Task 1 found — an inventory
   taken from one obviously-named file.

   ── SO WHAT IS THIS FILE ACTUALLY FOR ─────────────────────────────────────
   The Paper SURFACE, which the gem has no notion of. Deleting it does not
   blind anyone; it makes `super_select` stop matching the text input beside
   it — different background (`base-800` vs `--paper-card`), different radius
   (`rounded-md` vs `--r`), different edge, and the dropdown reverts to the
   gem's 2px `primary-500` border. That is a visual regression on every
   `belongs_to` field in the app, which is reason enough to keep it, and it is
   what `test/system/account/paper_select2_test.rb` actually pins.

   ── WHY EVERY `!important` STAYS ──────────────────────────────────────────
   16 of them, and they are load-bearing. They exist to beat select2's own
   stylesheet and Bullet Train's, not to beat anything neumorphic — the theme
   gem itself writes `@apply bg-primary-400 !important` (:44),
   `@apply text-white bg-primary-500 !important` (:107) and
   `@apply border-2 border-base-300 shadow-sm !important` on the dropdown
   (:100-101). An important declaration can only be beaten by another
   important declaration, so dropping ours hands the widget back to the gem.

   ── WHY THE `[data-skin]` PREFIX IS NEW, AND WHAT IT CHANGES ──────────────
   The original block was UNSCOPED, which SP-2 ruling R2 forbids for anything
   in `paper/`: an unscoped rule built on Paper tokens can reach the four games
   and the Bento profiles, both of which are pixel-invariant carve-outs. The
   prefix is what makes this file provably unable to.

   It also fixes a defect the original had. `.select2-dropdown` is (0,1,0);
   the gem's `.select2-container .select2-dropdown` is (0,2,0). Both are
   important, so **the gem was winning the dropdown's border and shadow** —
   measured before the move: a 2px `rgb(0, 111, 216)` `primary-500` edge, on
   top of the neu background. With the prefix this file reaches (0,2,0) and
   lands later in the bundle, so the dropdown finally gets the surface the
   block was written to give it.

   The dropdown is appended to `<body>` by select2, and `<body>` is where
   `data-skin` renders, so the prefix matches it. Verified in the browser with
   the dropdown open, not assumed.

   ── TOKEN MAPPING ─────────────────────────────────────────────────────────
   The old `--neu-*` family is out, Paper is in. (The old names are not spelled
   out below: `paper_token_guard` counts a literal token name in a comment as a
   reference, correctly, and it caught this header's first draft.) Two
   deliberate VALUE changes, both toward `[data-skin] .input` in
   `tokens/components.css`, because a `super_select` sits directly beside text
   inputs in every form that has one and there is no reason for it to be a
   different colour:

     surface  the old neu surface alias, which resolved to `--paper`
              →  `--paper-card`, matching `.input`
     edge     the old neu hairline alias, which resolved to `--edge`
              →  `--edge-ink` at `--bw-strong`, matching `.input`

   The neumorphic inset well is dropped rather than mapped — spec §3.3 lists it
   as unmappable and `.input` no longer has one either. Everything else is a
   straight rename: ink → `--ink`, radius → `--r` / `--r-sm`, the popover
   elevation → `--lift-2`, the highlight pair → `--brand` / `--on-brand`, and
   the focus treatment → `--focus` / `--focus-ring`, which is the SAME ring
   `paper/tokens/base.css` gives every other control. That is the
   reconciliation Task 2 asked for: select2's focus is no longer a private
   3px accent ring fighting the global `:focus-visible`, it is the same token.

   ── KNOWN, NOT FIXED HERE ─────────────────────────────────────────────────
   The gem pins `.select2-selection--single { height: 38px !important }`,
   below Paper's 48px touch floor. Overriding it needs the inner
   `__rendered`/arrow geometry moved too, so it is geometry work, not a token
   swap. Recorded for the touch-floor reconciliation in Task 7 / Task 9.
   ────────────────────────────────────────────────────────────────────────── */

[data-skin] .select2-container--default .select2-selection {
  background: var(--paper-card) !important;
  border: var(--bw-strong) solid var(--edge-ink) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

[data-skin] .select2-container--default .select2-selection .select2-selection__rendered,
[data-skin] .select2-container--default .select2-selection__rendered {
  color: var(--ink) !important;
}

[data-skin] .select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--focus) !important;
  box-shadow: var(--focus-ring) !important;
}

[data-skin] .select2-dropdown {
  background: var(--paper-card) !important;
  border: var(--bw) solid var(--edge-strong) !important;
  box-shadow: var(--lift-2) !important;
  color: var(--ink);
}

[data-skin] .select2-results__option {
  color: var(--ink);
}

[data-skin] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-skin] .select2-container--default .select2-results__option--highlighted {
  background: var(--brand) !important;
  color: var(--on-brand) !important;
}

[data-skin] .select2-search--dropdown .select2-search__field {
  background: var(--paper-card) !important;
  color: var(--ink) !important;
  border: var(--bw) solid var(--edge) !important;
  border-radius: var(--r-sm) !important;
}

/* paper/_compat.css is GONE (SP-7 ruling T5), in the same commit as
   components/neumorphism.css above. Three things it knew that are worth not
   re-learning:

   1. WHY IT WAS SCOPED TO `[data-skin]` AND NEVER `:root`. The neumorph and
      Paper palettes are different hues — neumorph 220 cool blue-grey, Paper 85
      warm off-white — so mapping one onto the other was a REPAINT, not a
      rename. A `:root`-scoped shim would have won on source order and repainted
      all consumers at once, including components/bento_grid.css, which powers
      the public Bento profiles and is a permanent NON-GOAL. Scoping to
      `[data-skin]` made the repaint opt-in per subtree, and it worked because
      custom properties resolve by INHERITANCE PROXIMITY rather than selector
      specificity once the two declarations sit on different elements.

   2. THE COROLLARY, WHICH STILL BINDS: `data-skin` goes on `<body>`, never on
      `<html>`. On `<html>` both declarations land on the same element at equal
      specificity and resolution falls to silent source order.

   3. DO NOT WRITE A GLOB INSIDE A CSS COMMENT. The shim's own dependency list
      spelled its paths without stars on purpose: a star followed by a slash
      closes the comment early, CSS comments do not nest, and the failure is
      silent — it turns the rest of the block into a selector. That is a real
      branch build this program broke once. */

/* FullCalendar theme (kept minimal; uses Tailwind-friendly colors) */

:root {
  --fc-border-color: #e5e7eb;
  /* slate-200 */
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: #f8fafc;
  /* slate-50 */
  --fc-today-bg-color: rgba(59, 130, 246, 0.08);
  /* blue-500 @ 8% */
  /* Button vars tuned for outlined default + solid active */
  --fc-button-bg-color: #fff;
  --fc-button-text-color: var(--primary-700);
  --fc-button-border-color: var(--primary-400);
  --fc-button-hover-bg-color: var(--primary-50);
  --fc-button-active-bg-color: var(--primary-600);
  --fc-button-active-text-color: #fff;
  --fc-button-active-border-color: var(--primary-600);
  --fc-event-bg-color: var(--primary-600);
  --fc-event-border-color: var(--primary-600);
  --fc-event-text-color: #fff;
}

/* Fix Tribute.js menu positioning within scrollable containers */

.tribute-container {
  position: fixed !important;
  z-index: 9999;
}

/* Visual token style removed: we now insert @username directly on selection. */

/* Dark mode variable overrides */

.dark {
  --fc-border-color: rgb(var(--base-700) / 1);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgb(var(--base-900) / 1);
  /* Button variables for dark */
  --fc-button-bg-color: rgb(var(--base-900) / 1);
  --fc-button-text-color: rgb(var(--base-200) / 1);
  --fc-button-border-color: rgb(var(--base-600) / 1);
  --fc-button-hover-bg-color: rgb(var(--base-800) / 1);
  --fc-button-active-bg-color: var(--primary-600);
  --fc-button-active-text-color: #fff;
  --fc-button-active-border-color: var(--primary-600);
  /* Events */
  --fc-event-bg-color: var(--primary-500);
  --fc-event-border-color: var(--primary-500);
  --fc-event-text-color: #fff;
}

/* Make calendar grid rounded and tighter */

.fc .fc-scrollgrid, .fc .fc-theme-standard td, .fc .fc-theme-standard th {
  border-color: var(--fc-border-color);
}

.fc .fc-toolbar-title {
  font-weight: 600;
}

/* Mobile density tweaks */

@media (max-width: 767px) {
  .fc .fc-toolbar {
    gap: 0.25rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1rem;
  }
}

/* iOS PWA safe area support (viewport-fit: cover + apple-mobile-web-app-capable).
 * With black-translucent status bar the viewport extends behind the iOS status bar,
 * so top: 0 sits BEHIND it. These classes fix sticky/fixed elements at the top. */

/* Native-app feel in the PWA: don't rubber-band the document itself when a
 * page fits the viewport (inner scrollers keep their own bounce). */

html,
body {
  overscroll-behavior-y: none;
}

/* Global bottom safe area — keeps all page content above the home indicator.
 * env() returns 0 on non-PWA / desktop so this is a no-op there.
 * NB: layouts/account zeroes this (.app-frame in paper/app-chrome.css) and
 * manages its own insets, otherwise its 100dvh frame overscrolls by the
 * inset height. */

body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Adds top padding equal to the status bar height so content clears the bar
 * while the element's background still fills the area behind the bar. */

.pt-safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Bottom safe area utility — use on fixed/absolute scroll containers that
 * don't inherit body padding (e.g. the mobile sidebar overlay). */

.pb-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* For sticky sub-headers that must sit below the h-16 (4rem) top navbar.
 * On iOS PWA the effective navbar height is 4rem + status-bar, so sticky
 * position must account for the inset too. */

.top-below-navbar {
  top: calc(4rem + env(safe-area-inset-top, 0px));
}

/* Fixed toast/banner offset that clears the iOS PWA status bar. Replaces a
 * bare `top-4`, which renders under the status bar in standalone (PWA) mode. */

.top-safe-4 {
  top: calc(1rem + env(safe-area-inset-top, 0px));
}

/* iOS PWA status bar safe-area color */

.ios-statusbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  background: #177EF4;
  z-index: 50;
  pointer-events: none;
}

.fc-header-toolbar.fc-toolbar {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .fc-header-toolbar.fc-toolbar {
    display: flex;
    flex-direction: column;
  }
}

.disabled\:dark:disabled .fc .fc-button {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-button:focus-visible {
  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-color: var(--primary-500);
  --tw-ring-offset-width: 0px;
}

.disabled\:dark:disabled .fc .fc-button.fc-button-active,.disabled\:dark:disabled .fc .fc-button[aria-pressed="true"] {
  border-color: var(--primary-600);
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-button.fc-button-active:hover,.disabled\:dark:disabled .fc .fc-button[aria-pressed="true"]:hover {
  background-color: var(--primary-700);
}

.disabled\:dark:disabled .fc .fc-button.fc-button-active,.disabled\:dark:disabled .fc .fc-button[aria-pressed="true"] {
  border-color: var(--primary-600);
  background-color: var(--primary-600);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-button.fc-button-active:hover,.disabled\:dark:disabled .fc .fc-button[aria-pressed="true"]:hover {
  background-color: var(--primary-700);
}

.disabled\:dark:disabled .fc .fc-today-button {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-700) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-today-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-button:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .fc .fc-button-group .fc-button:focus {
  --tw-ring-offset-width: 0px;
}

.disabled\:dark:disabled .fc .fc-today-button:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.dark\:prose-invert:where(.dark, .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);
}

.\*\:bg-gray-100 > * {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.\*\:bg-white > * {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.file\:mr-2::file-selector-button {
  margin-right: 0.5rem;
}

.file\:mr-4::file-selector-button {
  margin-right: 1rem;
}

.file\:rounded-full::file-selector-button {
  border-radius: 9999px;
}

.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}

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

.file\:bg-indigo-50::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.file\:bg-primary-50::file-selector-button {
  background-color: var(--primary-50);
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-1::file-selector-button {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.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\:text-xs::file-selector-button {
  font-size: .81rem;
}

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

.file\:font-semibold::file-selector-button {
  font-weight: 600;
}

.file\:text-indigo-700::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.file\:text-primary-700::file-selector-button {
  color: var(--primary-700);
}

.placeholder\:text-\[color\:var\(--bento-text-secondary\)\]::-moz-placeholder {
  color: var(--bento-text-secondary);
}

.placeholder\:text-\[color\:var\(--bento-text-secondary\)\]::placeholder {
  color: var(--bento-text-secondary);
}

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

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

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

.open\:border-indigo-300[open] {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.open\:bg-indigo-50[open] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

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

.checked\:bg-none:checked {
  background-image: none;
}

.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\: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\:border-\[color\:var\(--bento-accent\)\]:hover {
  border-color: var(--bento-accent);
}

.hover\:border-\[color\:var\(--edge-ink\)\]:hover {
  border-color: var(--edge-ink);
}

.hover\:border-amber-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

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

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-emerald-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}

.hover\:border-indigo-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-500:hover {
  border-color: var(--primary-500);
}

.hover\:border-sky-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}

.hover\:border-violet-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}

.hover\:border-violet-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[var\(--paper-2\)\]:hover {
  background-color: var(--paper-2);
}

.hover\:bg-\[var\(--paper-sunk\)\]:hover {
  background-color: var(--paper-sunk);
}

.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-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-amber-50\/50:hover {
  background-color: rgb(255 251 235 / 0.5);
}

.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}

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

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

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

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

.hover\:bg-base-700\/30:hover {
  background-color: rgb(var(--base-700) / 0.3);
}

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

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

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / 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-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 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-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 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-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-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / 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-lime-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 254 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pink-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pink-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 24 93 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-200:hover {
  background-color: var(--primary-200);
}

.hover\:bg-primary-50:hover {
  background-color: var(--primary-50);
}

.hover\:bg-primary-600:hover {
  background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
  background-color: var(--primary-700);
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 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-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}

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

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

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

.hover\:bg-slate-700\/30:hover {
  background-color: rgb(var(--base-700) / 0.3);
}

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

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

.hover\:bg-stone-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
}

.hover\:bg-violet-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-violet-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / 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\/50:hover {
  background-color: rgb(255 255 255 / 0.5);
}

.hover\:bg-yellow-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.hover\:from-amber-100:hover {
  --tw-gradient-from: #fef3c7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-emerald-700:hover {
  --tw-gradient-from: #047857 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-indigo-700:hover {
  --tw-gradient-from: #4338ca var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(67 56 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-orange-100:hover {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}

.hover\:to-purple-700:hover {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.hover\:to-teal-700:hover {
  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
}

.hover\:text-\[var\(--ink\)\]:hover {
  color: var(--ink);
}

.hover\:text-\[var\(--ink-2\)\]:hover {
  color: var(--ink-2);
}

.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-base-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--base-500) / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:text-base-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--base-900) / 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-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 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-indigo-600:hover {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-800:hover {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-600:hover {
  color: var(--primary-600);
}

.hover\:text-primary-700:hover {
  color: var(--primary-700);
}

.hover\:text-primary-800:hover {
  color: var(--primary-800);
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-rose-600:hover {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}

.hover\:text-rose-800:hover {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary-600:hover {
  color: var(--secondary-600);
}

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

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

.hover\:text-violet-600:hover {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

.hover\:shadow-2xl:hover {
  --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);
}

.hover\:shadow-inner:hover {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.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-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-\[var\(--lift-1\)\]:hover {
  --tw-shadow-color: var(--lift-1);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:ring-indigo-200:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}

.hover\:ring-primary-400:hover {
  --tw-ring-color: var(--primary-400);
}

.hover\:ring-primary-500:hover {
  --tw-ring-color: var(--primary-500);
}

.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:\[--app-heading-ink\:theme\(colors\.indigo\.600\)\]:hover {
  --app-heading-ink: #4f46e5;
}

.hover\:file\:bg-indigo-100::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.hover\:file\:bg-primary-100::file-selector-button:hover {
  background-color: var(--primary-100);
}

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

.focus\:border-\[color\:var\(--bento-accent\)\]:focus {
  border-color: var(--bento-accent);
}

.focus\:border-amber-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.focus\:border-amber-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / 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-500:focus {
  border-color: var(--primary-500);
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:border-violet-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / 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\:shadow:focus {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

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

.focus\:ring-\[color\:var\(--bento-accent\)\]:focus {
  --tw-ring-color: var(--bento-accent);
}

.focus\:ring-\[var\(--brand\)\]:focus {
  --tw-ring-color: var(--brand);
}

.focus\:ring-amber-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}

.focus\:ring-amber-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / 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-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / 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-pink-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-200:focus {
  --tw-ring-color: var(--primary-200);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-500);
}

.focus\:ring-primary-600:focus {
  --tw-ring-color: var(--primary-600);
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-violet-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity, 1));
}

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

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

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

.checked\:focus\:bg-transparent:focus:checked {
  background-color: transparent;
}

.focus-visible\:shadow-\[var\(--focus-ring\)\]:focus-visible {
  --tw-shadow-color: var(--focus-ring);
  --tw-shadow: var(--tw-shadow-colored);
}

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

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

.focus-visible\:ring-\[color\:var\(--bento-accent\)\]:focus-visible {
  --tw-ring-color: var(--bento-accent);
}

.focus-visible\:ring-indigo-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-indigo-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary-500:focus-visible {
  --tw-ring-color: var(--primary-500);
}

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

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

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

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

.disabled\:bg-base-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-200) / var(--tw-bg-opacity, 1));
}

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

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:dark:disabled .pcr-app {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .pcr-app .pcr-interaction .pcr-result {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .pcr-app .pcr-interaction .pcr-result:focus {
  box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 3px var(--primary-500);
}

.disabled\:dark:disabled .daterangepicker {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .daterangepicker::before {
  border-bottom-color: rgb(var(--base-900) / 1);
}

.disabled\:dark:disabled .daterangepicker::after {
  border-bottom-color: rgb(var(--base-800) / 1);
}

.disabled\:dark:disabled .daterangepicker .calendar-table {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .daterangepicker .calendar-table .available span {
  border-color: var(--primary-500);
}

.disabled\:dark:disabled .daterangepicker .drp-buttons {
  border-top-color: rgb(var(--base-900) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .daterangepicker th.available:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .daterangepicker td.off {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .daterangepicker td.available:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .daterangepicker .hourselect,.disabled\:dark:disabled .daterangepicker .minuteselect,.disabled\:dark:disabled .daterangepicker .ampmselect {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1)) !important;
}

.disabled\:dark:disabled .iti__country-list {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .select2-container .select2-selection__rendered {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1)) !important;
}

.disabled\:dark:disabled .select2-container .select2-dropdown {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled .select2-container .select2-search__field {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:dark:disabled .select2-container .select2-selection--multiple,.disabled\:dark:disabled .select2-container .select2-selection--single {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:dark:disabled .select2-container .select2-selection--multiple:focus,.disabled\:dark:disabled .select2-container .select2-selection--single:focus {
  --tw-ring-color: var(--primary-500) !important;
}

.disabled\:dark:disabled .select2-container .select2-selection--multiple,.disabled\:dark:disabled .select2-container .select2-selection--single {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:dark:disabled .select2-container .select2-selection--multiple:focus,.disabled\:dark:disabled .select2-container .select2-selection--single:focus {
  --tw-ring-color: var(--primary-500) !important;
}

.disabled\:dark:disabled .select2-container .select2-selection--multiple,.disabled\:dark:disabled .select2-container .select2-selection--single {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .select2-container .select2-selection__choice {
  border-color: var(--primary-500) !important;
  background-color: var(--primary-500) !important;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .select2-container .select2-selection__choice .select2-selection__choice__remove:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .select2-container .select2-results__option {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled trix-editor {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:dark:disabled trix-editor:focus,.disabled\:dark:disabled trix-editor:active {
  border-color: var(--primary-500) !important;
}

.disabled\:dark:disabled trix-toolbar {
  opacity: 0.5 !important;
}

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

.disabled\:dark:disabled trix-toolbar .trix-button-group,.disabled\:dark:disabled trix-toolbar .trix-button {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-400) / var(--tw-border-opacity, 1)) !important;
}

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

.disabled\:dark:disabled trix-toolbar .trix-dialog {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / 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: rgb(var(--base-900) / 1) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-button--dialog {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-input--dialog {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-input--dialog:focus {
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}

.disabled\:dark:disabled trix-toolbar .trix-dialog .trix-input--dialog:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .tribute-container ul {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:dark:disabled .trix-dialogs {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:dark:disabled .trix-content a[href^="bullettrain://"] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-500) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.disabled\:dark:disabled .ck {
  --ck-color-base-background: rgb(var(--base-800) / 1);
  --ck-color-base-border: rgb(var(--base-900) / 1);
  --ck-color-toolbar-background: rgb(var(--base-800) / 1);
  --ck-color-toolbar-border: rgb(var(--base-900) / 1);
  --ck-color-text: rgb(var(--base-300) / 1);
}

.disabled\:dark:disabled .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);
}

.disabled\:dark:disabled .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);
}

.disabled\:\[--code-editor-background\:theme\(\'colors\.base\.200\'\)\]:disabled {
  --code-editor-background: rgb(var(--base-200) / 1);
}

.group[open] .group-open\:hidden {
  display: none;
}

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

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group\/item:hover .group-hover\/item\:translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-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\:translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\: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\:border-pink-400 {
  --tw-border-opacity: 1;
  border-color: rgb(244 114 182 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-pink-50\/50 {
  background-color: rgb(253 242 248 / 0.5);
}

.group:hover .group-hover\:bg-violet-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(221 214 254 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:from-amber-200 {
  --tw-gradient-from: #fde68a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:from-orange-200 {
  --tw-gradient-from: #fed7aa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 215 170 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:from-yellow-200 {
  --tw-gradient-from: #fef08a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 240 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:to-amber-300 {
  --tw-gradient-to: #fcd34d var(--tw-gradient-to-position);
}

.group:hover .group-hover\:to-orange-300 {
  --tw-gradient-to: #fdba74 var(--tw-gradient-to-position);
}

.group:hover .group-hover\:to-yellow-300 {
  --tw-gradient-to: #fde047 var(--tw-gradient-to-position);
}

.group:hover .group-hover\:text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

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

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

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

.group:hover .group-hover\:ring-indigo-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}

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

.group:hover .group-hover\:\[--app-heading-ink\:theme\(colors\.amber\.700\)\] {
  --app-heading-ink: #b45309;
}

.group:hover .group-hover\:\[--app-heading-ink\:theme\(colors\.blue\.700\)\] {
  --app-heading-ink: #1d4ed8;
}

.group:hover .group-hover\:\[--app-heading-ink\:theme\(colors\.emerald\.700\)\] {
  --app-heading-ink: #047857;
}

.group:hover .group-hover\:\[--app-heading-ink\:theme\(colors\.violet\.700\)\] {
  --app-heading-ink: #6d28d9;
}

.peer[open] ~ .peer-open\:hidden {
  display: none;
}

.peer:checked ~ .peer-checked\:border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-amber-700 {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-indigo-600 {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-primary-500 {
  border-color: var(--primary-500);
}

.peer:checked ~ .peer-checked\:bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-primary-50 {
  background-color: var(--primary-50);
}

.peer:checked ~ .peer-checked\:bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.peer:checked ~ .peer-checked\: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);
}

.peer:checked ~ .peer-checked\:to-amber-100 {
  --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
}

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

.peer:checked ~ .peer-checked\:ring-primary-500 {
  --tw-ring-color: var(--primary-500);
}

.group:has([data-city]:checked) .group-has-\[\[data-city\]\:checked\]\:hidden {
  display: none;
}

.aria-pressed\:bg-primary-600[aria-pressed="true"] {
  background-color: var(--primary-600);
}

.aria-pressed\:text-white[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:bottom-40 {
    bottom: 10rem;
  }

  .sm\:left-auto {
    left: auto;
  }

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

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

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

  .sm\:m-10 {
    margin: 2.5rem;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:-mt-16 {
    margin-top: -4rem;
  }

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

  .sm\:ml-8 {
    margin-left: 2rem;
  }

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

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

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

  .sm\:h-12 {
    height: 3rem;
  }

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

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:h-44 {
    height: 11rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-80 {
    height: 20rem;
  }

  .sm\:h-\[76px\] {
    height: 76px;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-32 {
    width: 8rem;
  }

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

  .sm\:w-full {
    width: 100%;
  }

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

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

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

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

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

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

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

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

  .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-1 {
    gap: 0.25rem;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

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

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

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

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .sm\:rounded-md {
    border-radius: 0.375rem;
  }

  .sm\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

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

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

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

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:pb-1 {
    padding-bottom: 0.25rem;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:pl-4 {
    padding-left: 1rem;
  }

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

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

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

  .sm\:pt-10 {
    padding-top: 2.5rem;
  }

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

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

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

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .sm\:text-\[30px\] {
    font-size: 30px;
  }

  .sm\:text-\[32px\] {
    font-size: 32px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

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

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 768px) {
  .md\:relative {
    position: relative;
  }

  .md\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .md\:left-1\/2 {
    left: 50%;
  }

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

  .md\:mt-8 {
    margin-top: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

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

  .md\:h-screen {
    height: 100vh;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-14 {
    width: 3.5rem;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-\[26rem\] {
    width: 26rem;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:min-w-\[300px\] {
    min-width: 300px;
  }

  .md\:min-w-\[60rem\] {
    min-width: 60rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:gap-10 {
    gap: 2.5rem;
  }

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

  .md\:overflow-y-scroll {
    overflow-y: scroll;
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  .md\:rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  .md\:rounded-tl-lg {
    border-top-left-radius: 0.5rem;
  }

  .md\:border-l-2 {
    border-left-width: 2px;
  }

  .md\:border-l-\[length\:var\(--bw\)\] {
    border-left-width: var(--bw);
  }

  .md\:border-t-0 {
    border-top-width: 0px;
  }

  .md\:border-none {
    border-style: none;
  }

  .md\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

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

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

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

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

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

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

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[0\.75rem\] {
    font-size: 0.75rem;
  }

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

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .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\:col-span-5 {
    grid-column: span 5 / span 5;
  }

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

  .lg\:m-20 {
    margin: 5rem;
  }

  .lg\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg\:-ml-px {
    margin-left: -1px;
  }

  .lg\:-mr-px {
    margin-right: -1px;
  }

  .lg\:-mt-5 {
    margin-top: -1.25rem;
  }

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

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:mb-16 {
    margin-bottom: 4rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-\[calc\(100dvh-14rem\)\] {
    height: calc(100dvh - 14rem);
  }

  .lg\:h-\[calc\(100dvh-17rem\)\] {
    height: calc(100dvh - 17rem);
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }

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

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

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

  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

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

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

  .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-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_300px\] {
    grid-template-columns: 1fr 300px;
  }

  .lg\:grid-cols-\[1fr_400px\] {
    grid-template-columns: 1fr 400px;
  }

  .lg\:grid-cols-\[1fr_420px\] {
    grid-template-columns: 1fr 420px;
  }

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

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

  .lg\:gap-12 {
    gap: 3rem;
  }

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

  .lg\:rounded-l-none {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-r {
    border-right-width: 1px;
  }

  .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-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

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

  .lg\:pb-28 {
    padding-bottom: 7rem;
  }

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

  .lg\:pt-24 {
    padding-top: 6rem;
  }

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

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-\[64px\] {
    font-size: 64px;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:gap-10 {
    gap: 2.5rem;
  }

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

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

  .xl\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

.dark\:divide-base-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--base-700) / var(--tw-divide-opacity, 1));
}

.dark\:divide-base-700\/5:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--base-700) / 0.05);
}

.dark\:divide-gray-800:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-divide-opacity, 1));
}

.dark\:border-amber-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-700\/50:where(.dark, .dark *) {
  border-color: rgb(180 83 9 / 0.5);
}

.dark\:border-amber-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-900\/20:where(.dark, .dark *) {
  border-color: rgb(120 53 15 / 0.2);
}

.dark\:border-amber-900\/40:where(.dark, .dark *) {
  border-color: rgb(120 53 15 / 0.4);
}

.dark\:border-base-300\/10:where(.dark, .dark *) {
  border-color: rgb(var(--base-300) / 0.1);
}

.dark\:border-base-500:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-500) / var(--tw-border-opacity, 1));
}

.dark\:border-base-500\/5:where(.dark, .dark *) {
  border-color: rgb(var(--base-500) / 0.05);
}

.dark\:border-base-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
}

.dark\:border-base-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-700) / var(--tw-border-opacity, 1));
}

.dark\:border-base-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-800) / var(--tw-border-opacity, 1));
}

.dark\:border-base-900:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-900) / var(--tw-border-opacity, 1));
}

.dark\:border-blue-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-green-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}

.dark\:border-green-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.dark\:border-indigo-400:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.dark\:border-indigo-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}

.dark\:border-pink-400:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(244 114 182 / var(--tw-border-opacity, 1));
}

.dark\:border-primary-500:where(.dark, .dark *) {
  border-color: var(--primary-500);
}

.dark\:border-primary-700:where(.dark, .dark *) {
  border-color: var(--primary-700);
}

.dark\:border-purple-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}

.dark\:border-purple-800\/50:where(.dark, .dark *) {
  border-color: rgb(107 33 168 / 0.5);
}

.dark\:border-red-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800\/50:where(.dark, .dark *) {
  border-color: rgb(153 27 27 / 0.5);
}

.dark\:border-rose-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(159 18 57 / var(--tw-border-opacity, 1));
}

.dark\:border-sky-400:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
}

.dark\:border-sky-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(7 89 133 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-500:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-500) / var(--tw-border-opacity, 1));
}

.dark\:border-slate-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-600) / var(--tw-border-opacity, 1));
}

.dark\:border-slate-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-700) / var(--tw-border-opacity, 1));
}

.dark\:border-stone-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(87 83 78 / var(--tw-border-opacity, 1));
}

.dark\:border-stone-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(68 64 60 / var(--tw-border-opacity, 1));
}

.dark\:border-teal-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(17 94 89 / var(--tw-border-opacity, 1));
}

.dark\:border-violet-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(91 33 182 / var(--tw-border-opacity, 1));
}

.dark\:border-yellow-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
}

.dark\:border-yellow-800:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}

.dark\:bg-\[\#2c2620\]:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 38 32 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#4a4036\]:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(74 64 54 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_20\%\2c transparent\)\]:where(.dark, .dark *) {
  background-color: color-mix(in oklab,var(--primary-900) 20%,transparent);
}

.dark\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_30\%\2c transparent\)\]:where(.dark, .dark *) {
  background-color: color-mix(in oklab,var(--primary-900) 30%,transparent);
}

.dark\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_40\%\2c transparent\)\]:where(.dark, .dark *) {
  background-color: color-mix(in oklab,var(--primary-900) 40%,transparent);
}

.dark\:bg-amber-600:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-900\/20:where(.dark, .dark *) {
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:bg-amber-900\/30:where(.dark, .dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:bg-amber-900\/40:where(.dark, .dark *) {
  background-color: rgb(120 53 15 / 0.4);
}

.dark\:bg-base-100:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-100) / var(--tw-bg-opacity, 1));
}

.dark\:bg-base-50\/10:where(.dark, .dark *) {
  background-color: rgb(var(--base-50) / 0.1);
}

.dark\:bg-base-600:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark\:bg-base-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.dark\:bg-base-700\/50:where(.dark, .dark *) {
  background-color: rgb(var(--base-700) / 0.5);
}

.dark\:bg-base-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark\:bg-base-800\/50:where(.dark, .dark *) {
  background-color: rgb(var(--base-800) / 0.5);
}

.dark\:bg-base-800\/60:where(.dark, .dark *) {
  background-color: rgb(var(--base-800) / 0.6);
}

.dark\:bg-base-800\/80:where(.dark, .dark *) {
  background-color: rgb(var(--base-800) / 0.8);
}

.dark\:bg-base-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
}

.dark\:bg-base-900\/40:where(.dark, .dark *) {
  background-color: rgb(var(--base-900) / 0.4);
}

.dark\:bg-base-900\/80:where(.dark, .dark *) {
  background-color: rgb(var(--base-900) / 0.8);
}

.dark\:bg-base-950:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-950) / var(--tw-bg-opacity, 1));
}

.dark\:bg-black\/10:where(.dark, .dark *) {
  background-color: rgb(0 0 0 / 0.1);
}

.dark\:bg-blue-900\/30:where(.dark, .dark *) {
  background-color: rgb(30 58 138 / 0.3);
}

.dark\:bg-blue-900\/40:where(.dark, .dark *) {
  background-color: rgb(30 58 138 / 0.4);
}

.dark\:bg-emerald-900\/30:where(.dark, .dark *) {
  background-color: rgb(6 78 59 / 0.3);
}

.dark\:bg-emerald-900\/40:where(.dark, .dark *) {
  background-color: rgb(6 78 59 / 0.4);
}

.dark\:bg-gray-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900\/30:where(.dark, .dark *) {
  background-color: rgb(20 83 45 / 0.3);
}

.dark\:bg-indigo-500:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.dark\:bg-indigo-900\/30:where(.dark, .dark *) {
  background-color: rgb(49 46 129 / 0.3);
}

.dark\:bg-indigo-900\/40:where(.dark, .dark *) {
  background-color: rgb(49 46 129 / 0.4);
}

.dark\:bg-orange-900\/20:where(.dark, .dark *) {
  background-color: rgb(124 45 18 / 0.2);
}

.dark\:bg-orange-900\/30:where(.dark, .dark *) {
  background-color: rgb(124 45 18 / 0.3);
}

.dark\:bg-pink-900\/30:where(.dark, .dark *) {
  background-color: rgb(131 24 67 / 0.3);
}

.dark\:bg-pink-900\/40:where(.dark, .dark *) {
  background-color: rgb(131 24 67 / 0.4);
}

.dark\:bg-primary-400:where(.dark, .dark *) {
  background-color: var(--primary-400);
}

.dark\:bg-primary-500:where(.dark, .dark *) {
  background-color: var(--primary-500);
}

.dark\:bg-purple-900\/30:where(.dark, .dark *) {
  background-color: rgb(88 28 135 / 0.3);
}

.dark\:bg-red-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-700\/40:where(.dark, .dark *) {
  background-color: rgb(185 28 28 / 0.4);
}

.dark\:bg-red-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-900\/30:where(.dark, .dark *) {
  background-color: rgb(127 29 29 / 0.3);
}

.dark\:bg-rose-900\/20:where(.dark, .dark *) {
  background-color: rgb(136 19 55 / 0.2);
}

.dark\:bg-rose-900\/30:where(.dark, .dark *) {
  background-color: rgb(136 19 55 / 0.3);
}

.dark\:bg-rose-950:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1));
}

.dark\:bg-sky-900\/30:where(.dark, .dark *) {
  background-color: rgb(12 74 110 / 0.3);
}

.dark\:bg-sky-900\/40:where(.dark, .dark *) {
  background-color: rgb(12 74 110 / 0.4);
}

.dark\:bg-slate-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark\:bg-stone-600:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
}

.dark\:bg-stone-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
}

.dark\:bg-stone-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
}

.dark\:bg-stone-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

.dark\:bg-teal-900\/30:where(.dark, .dark *) {
  background-color: rgb(19 78 74 / 0.3);
}

.dark\:bg-violet-900\/20:where(.dark, .dark *) {
  background-color: rgb(76 29 149 / 0.2);
}

.dark\:bg-violet-900\/30:where(.dark, .dark *) {
  background-color: rgb(76 29 149 / 0.3);
}

.dark\:bg-violet-900\/40:where(.dark, .dark *) {
  background-color: rgb(76 29 149 / 0.4);
}

.dark\:bg-yellow-900\/30:where(.dark, .dark *) {
  background-color: rgb(113 63 18 / 0.3);
}

.dark\:from-amber-800:where(.dark, .dark *) {
  --tw-gradient-from: #92400e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(146 64 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-amber-900\/20:where(.dark, .dark *) {
  --tw-gradient-from: rgb(120 53 15 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-amber-900\/30:where(.dark, .dark *) {
  --tw-gradient-from: rgb(120 53 15 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-amber-900\/40:where(.dark, .dark *) {
  --tw-gradient-from: rgb(120 53 15 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-base-700:where(.dark, .dark *) {
  --tw-gradient-from: rgb(var(--base-700) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-700) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-base-700\/50:where(.dark, .dark *) {
  --tw-gradient-from: rgb(var(--base-700) / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-700) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-base-800:where(.dark, .dark *) {
  --tw-gradient-from: rgb(var(--base-800) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-800) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-base-900:where(.dark, .dark *) {
  --tw-gradient-from: rgb(var(--base-900) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-900) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-blue-900\/30:where(.dark, .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-blue-950:where(.dark, .dark *) {
  --tw-gradient-from: #172554 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-emerald-950:where(.dark, .dark *) {
  --tw-gradient-from: #022c22 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 44 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-indigo-900\/20:where(.dark, .dark *) {
  --tw-gradient-from: rgb(49 46 129 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-orange-900\/40:where(.dark, .dark *) {
  --tw-gradient-from: rgb(124 45 18 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-pink-900:where(.dark, .dark *) {
  --tw-gradient-from: #831843 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(131 24 67 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-primary-900:where(.dark, .dark *) {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-sky-900:where(.dark, .dark *) {
  --tw-gradient-from: #0c4a6e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-sky-900\/20:where(.dark, .dark *) {
  --tw-gradient-from: rgb(12 74 110 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-700\/50:where(.dark, .dark *) {
  --tw-gradient-from: rgb(var(--base-700) / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--base-700) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-stone-900:where(.dark, .dark *) {
  --tw-gradient-from: #1c1917 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(28 25 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-violet-950:where(.dark, .dark *) {
  --tw-gradient-from: #2e1065 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(46 16 101 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-yellow-900\/20:where(.dark, .dark *) {
  --tw-gradient-from: rgb(113 63 18 / 0.2) 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\:from-yellow-900\/40:where(.dark, .dark *) {
  --tw-gradient-from: rgb(113 63 18 / 0.4) 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-base-900:where(.dark, .dark *) {
  --tw-gradient-to: rgb(var(--base-900) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--base-900) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark\:via-purple-950:where(.dark, .dark *) {
  --tw-gradient-to: rgb(59 7 100 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #3b0764 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark\:via-stone-900:where(.dark, .dark *) {
  --tw-gradient-to: rgb(28 25 23 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1c1917 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark\:to-amber-700:where(.dark, .dark *) {
  --tw-gradient-to: #b45309 var(--tw-gradient-to-position);
}

.dark\:to-amber-800\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(146 64 14 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-amber-800\/40:where(.dark, .dark *) {
  --tw-gradient-to: rgb(146 64 14 / 0.4) var(--tw-gradient-to-position);
}

.dark\:to-amber-900\/20:where(.dark, .dark *) {
  --tw-gradient-to: rgb(120 53 15 / 0.2) var(--tw-gradient-to-position);
}

.dark\:to-amber-900\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(120 53 15 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-base-800:where(.dark, .dark *) {
  --tw-gradient-to: rgb(var(--base-800) / 1) var(--tw-gradient-to-position);
}

.dark\:to-base-900:where(.dark, .dark *) {
  --tw-gradient-to: rgb(var(--base-900) / 1) var(--tw-gradient-to-position);
}

.dark\:to-blue-900:where(.dark, .dark *) {
  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
}

.dark\:to-blue-900\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(30 58 138 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-cyan-900\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(22 78 99 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-emerald-900:where(.dark, .dark *) {
  --tw-gradient-to: #064e3b var(--tw-gradient-to-position);
}

.dark\:to-fuchsia-900:where(.dark, .dark *) {
  --tw-gradient-to: #701a75 var(--tw-gradient-to-position);
}

.dark\:to-indigo-900\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(49 46 129 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-indigo-950:where(.dark, .dark *) {
  --tw-gradient-to: #1e1b4b var(--tw-gradient-to-position);
}

.dark\:to-orange-800\/40:where(.dark, .dark *) {
  --tw-gradient-to: rgb(154 52 18 / 0.4) var(--tw-gradient-to-position);
}

.dark\:to-orange-900\/20:where(.dark, .dark *) {
  --tw-gradient-to: rgb(124 45 18 / 0.2) var(--tw-gradient-to-position);
}

.dark\:to-orange-900\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(124 45 18 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-primary-600:where(.dark, .dark *) {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.dark\:to-purple-950:where(.dark, .dark *) {
  --tw-gradient-to: #3b0764 var(--tw-gradient-to-position);
}

.dark\:to-sky-900\/20:where(.dark, .dark *) {
  --tw-gradient-to: rgb(12 74 110 / 0.2) var(--tw-gradient-to-position);
}

.dark\:to-slate-800:where(.dark, .dark *) {
  --tw-gradient-to: rgb(var(--base-800) / 1) var(--tw-gradient-to-position);
}

.dark\:to-stone-900:where(.dark, .dark *) {
  --tw-gradient-to: #1c1917 var(--tw-gradient-to-position);
}

.dark\:to-teal-900:where(.dark, .dark *) {
  --tw-gradient-to: #134e4a var(--tw-gradient-to-position);
}

.dark\:to-violet-900\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(76 29 149 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-yellow-800\/40:where(.dark, .dark *) {
  --tw-gradient-to: rgb(133 77 14 / 0.4) var(--tw-gradient-to-position);
}

.dark\:stroke-base-700:where(.dark, .dark *) {
  stroke: rgb(var(--base-700) / 1);
}

.dark\:stroke-sky-400:where(.dark, .dark *) {
  stroke: #38bdf8;
}

.dark\:text-amber-200:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-900\/30:where(.dark, .dark *) {
  color: rgb(120 53 15 / 0.3);
}

.dark\:text-base-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-100) / var(--tw-text-opacity, 1));
}

.dark\:text-base-200:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.dark\:text-base-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.dark\:text-base-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.dark\:text-base-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-500) / var(--tw-text-opacity, 1));
}

.dark\:text-base-600:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-600) / var(--tw-text-opacity, 1));
}

.dark\:text-base-700:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-700) / var(--tw-text-opacity, 1));
}

.dark\:text-base-800:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-800) / var(--tw-text-opacity, 1));
}

.dark\:text-base-900:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-900) / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-900\/30:where(.dark, .dark *) {
  color: rgb(30 58 138 / 0.3);
}

.dark\:text-emerald-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-900\/30:where(.dark, .dark *) {
  color: rgb(6 78 59 / 0.3);
}

.dark\:text-gray-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.dark\:text-pink-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}

.dark\:text-primary-300:where(.dark, .dark *) {
  color: var(--primary-300);
}

.dark\:text-primary-400:where(.dark, .dark *) {
  color: var(--primary-400);
}

.dark\:text-purple-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.dark\:text-red-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-red-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-900\/30:where(.dark, .dark *) {
  color: rgb(136 19 55 / 0.3);
}

.dark\:text-sky-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.dark\:text-slate-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.dark\:text-slate-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-500) / var(--tw-text-opacity, 1));
}

.dark\:text-slate-700:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-700) / var(--tw-text-opacity, 1));
}

.dark\:text-stone-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 245 244 / var(--tw-text-opacity, 1));
}

.dark\:text-stone-200:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(231 229 228 / var(--tw-text-opacity, 1));
}

.dark\:text-stone-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1));
}

.dark\:text-stone-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-900\/30:where(.dark, .dark *) {
  color: rgb(19 78 74 / 0.3);
}

.dark\:text-violet-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-900\/30:where(.dark, .dark *) {
  color: rgb(76 29 149 / 0.3);
}

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

.dark\:text-yellow-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.dark\:opacity-30:where(.dark, .dark *) {
  opacity: 0.3;
}

.dark\:shadow:where(.dark, .dark *) {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:shadow-black:where(.dark, .dark *) {
  --tw-shadow-color: #000;
  --tw-shadow: var(--tw-shadow-colored);
}

.dark\:ring-base-700:where(.dark, .dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--base-700) / var(--tw-ring-opacity, 1));
}

.dark\:ring-base-800:where(.dark, .dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--base-800) / var(--tw-ring-opacity, 1));
}

.dark\:ring-green-500\/30:where(.dark, .dark *) {
  --tw-ring-color: rgb(34 197 94 / 0.3);
}

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

.dark\:ring-offset-base-700:where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-700) / 1);
}

.dark\:\[--app-link-hover-ink\:theme\(colors\.base\.100\)\]:where(.dark, .dark *) {
  --app-link-hover-ink: rgb(var(--base-100) / 1);
}

.dark\:\[--app-link-hover-ink\:theme\(colors\.indigo\.300\)\]:where(.dark, .dark *) {
  --app-link-hover-ink: #a5b4fc;
}

.dark\:\[--app-link-hover-ink\:theme\(colors\.indigo\.400\)\]:where(.dark, .dark *) {
  --app-link-hover-ink: #818cf8;
}

.dark\:\[--app-link-hover-ink\:theme\(colors\.sky\.300\)\]:where(.dark, .dark *) {
  --app-link-hover-ink: #7dd3fc;
}

.dark\:\[--app-link-hover-ink\:theme\(colors\.sky\.400\)\]:where(.dark, .dark *) {
  --app-link-hover-ink: #38bdf8;
}

.dark\:\[--app-link-hover-ink\:var\(--primary-400\)\]:where(.dark, .dark *) {
  --app-link-hover-ink: var(--primary-400);
}

.dark\:\[--app-link-ink\:rgb\(var\(--base-300\)\)\]:where(.dark, .dark *) {
  --app-link-ink: rgb(var(--base-300));
}

.dark\:\[--app-link-ink\:theme\(colors\.base\.100\)\]:where(.dark, .dark *) {
  --app-link-ink: rgb(var(--base-100) / 1);
}

.dark\:\[--app-link-ink\:theme\(colors\.indigo\.400\)\]:where(.dark, .dark *) {
  --app-link-ink: #818cf8;
}

.dark\:\[--app-link-ink\:theme\(colors\.sky\.400\)\]:where(.dark, .dark *) {
  --app-link-ink: #38bdf8;
}

.dark\:\[--app-link-ink\:var\(--primary-400\)\]:where(.dark, .dark *) {
  --app-link-ink: var(--primary-400);
}

.dark\:\[--code-editor-background\:theme\(\'colors\.base\.800\'\)\]:where(.dark, .dark *) {
  --code-editor-background: rgb(var(--base-800) / 1);
}

.dark\:\*\:bg-base-700 > *:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.dark\:\*\:bg-base-900 > *:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-900) / var(--tw-bg-opacity, 1));
}

.dark\:file\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_40\%\2c transparent\)\]:where(.dark, .dark *)::file-selector-button {
  background-color: color-mix(in oklab,var(--primary-900) 40%,transparent);
}

.dark\:file\:text-primary-400:where(.dark, .dark *)::file-selector-button {
  color: var(--primary-400);
}

.dark\:open\:border-primary-600[open]:where(.dark, .dark *) {
  border-color: var(--primary-600);
}

.dark\:open\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_20\%\2c transparent\)\][open]:where(.dark, .dark *) {
  background-color: color-mix(in oklab,var(--primary-900) 20%,transparent);
}

.dark\:hover\:border-amber-700:hover:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:hover\:border-base-500:hover:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--base-500) / var(--tw-border-opacity, 1));
}

.dark\:hover\:border-blue-700:hover:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.dark\:hover\:border-emerald-700:hover:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}

.dark\:hover\:border-sky-700:hover:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(3 105 161 / var(--tw-border-opacity, 1));
}

.dark\:hover\:border-violet-700:hover:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(109 40 217 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_60\%\2c transparent\)\]:hover:where(.dark, .dark *) {
  background-color: color-mix(in oklab,var(--primary-900) 60%,transparent);
}

.dark\:hover\:bg-amber-500:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-amber-700:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-amber-800\/60:hover:where(.dark, .dark *) {
  background-color: rgb(146 64 14 / 0.6);
}

.dark\:hover\:bg-amber-900\/20:hover:where(.dark, .dark *) {
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:hover\:bg-amber-900\/50:hover:where(.dark, .dark *) {
  background-color: rgb(120 53 15 / 0.5);
}

.dark\:hover\:bg-base-400:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-400) / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-base-500:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-500) / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-base-600:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-base-700:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-base-700\/50:hover:where(.dark, .dark *) {
  background-color: rgb(var(--base-700) / 0.5);
}

.dark\:hover\:bg-base-800:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-800) / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-base-800\/50:hover:where(.dark, .dark *) {
  background-color: rgb(var(--base-800) / 0.5);
}

.dark\:hover\:bg-green-900\/50:hover:where(.dark, .dark *) {
  background-color: rgb(20 83 45 / 0.5);
}

.dark\:hover\:bg-indigo-600:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-indigo-900\/20:hover:where(.dark, .dark *) {
  background-color: rgb(49 46 129 / 0.2);
}

.dark\:hover\:bg-pink-900\/20:hover:where(.dark, .dark *) {
  background-color: rgb(131 24 67 / 0.2);
}

.dark\:hover\:bg-red-600:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-red-900\/30:hover:where(.dark, .dark *) {
  background-color: rgb(127 29 29 / 0.3);
}

.dark\:hover\:bg-red-900\/50:hover:where(.dark, .dark *) {
  background-color: rgb(127 29 29 / 0.5);
}

.dark\:hover\:bg-sky-900\/20:hover:where(.dark, .dark *) {
  background-color: rgb(12 74 110 / 0.2);
}

.dark\:hover\:bg-sky-900\/40:hover:where(.dark, .dark *) {
  background-color: rgb(12 74 110 / 0.4);
}

.dark\:hover\:bg-stone-500:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-stone-600:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
}

.hover\:dark\:bg-base-700:where(.dark, .dark *):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.dark\:hover\:from-amber-900\/30:hover:where(.dark, .dark *) {
  --tw-gradient-from: rgb(120 53 15 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:hover\:to-orange-900\/30:hover:where(.dark, .dark *) {
  --tw-gradient-to: rgb(124 45 18 / 0.3) var(--tw-gradient-to-position);
}

.dark\:hover\:text-amber-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-base-100:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-100) / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-base-200:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-200) / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-base-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-300) / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-base-400:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-400) / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-blue-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-green-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-indigo-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-indigo-400:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-primary-300:hover:where(.dark, .dark *) {
  color: var(--primary-300);
}

.dark\:hover\:text-primary-400:hover:where(.dark, .dark *) {
  color: var(--primary-400);
}

.dark\:hover\:text-red-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-rose-300:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-rose-400:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.dark\:focus\:border-primary-400:focus:where(.dark, .dark *) {
  border-color: var(--primary-400);
}

.dark\:focus\:bg-base-600:focus:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-600) / var(--tw-bg-opacity, 1));
}

.dark\:focus\:ring-amber-400:focus:where(.dark, .dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-amber-500:focus:where(.dark, .dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-indigo-400:focus:where(.dark, .dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-primary-400:focus:where(.dark, .dark *) {
  --tw-ring-color: var(--primary-400);
}

.dark\:focus\:ring-primary-900:focus:where(.dark, .dark *) {
  --tw-ring-color: var(--primary-900);
}

.dark\:focus\:ring-offset-base-900:focus:where(.dark, .dark *) {
  --tw-ring-offset-color: rgb(var(--base-900) / 1);
}

.disabled\:dark\:bg-base-700:where(.dark, .dark *):disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
}

.disabled\:dark\:\[--code-editor-background\:theme\(\'colors\.base\.700\'\)\]:where(.dark, .dark *):disabled {
  --code-editor-background: rgb(var(--base-700) / 1);
}

.group:hover .dark\:group-hover\:border-pink-500:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / var(--tw-border-opacity, 1));
}

.group:hover .dark\:group-hover\:bg-base-700\/25:where(.dark, .dark *) {
  background-color: rgb(var(--base-700) / 0.25);
}

.group:hover .dark\:group-hover\:bg-pink-900\/10:where(.dark, .dark *) {
  background-color: rgb(131 24 67 / 0.1);
}

.group:hover .dark\:group-hover\:text-amber-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-amber-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-base-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--base-100) / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-indigo-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-orange-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-orange-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-sky-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-yellow-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-yellow-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:ring-indigo-500:where(.dark, .dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.peer:checked ~ .dark\:peer-checked\:bg-\[color-mix\(in_oklab\2c var\(--primary-900\)_20\%\2c transparent\)\]:where(.dark, .dark *) {
  background-color: color-mix(in oklab,var(--primary-900) 20%,transparent);
}

.peer:checked ~ .dark\:peer-checked\:bg-amber-900\/30:where(.dark, .dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.peer:checked ~ .dark\:peer-checked\:bg-stone-600:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .dark\:peer-checked\:from-amber-900\/30:where(.dark, .dark *) {
  --tw-gradient-from: rgb(120 53 15 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.peer:checked ~ .dark\:peer-checked\:to-amber-800\/30:where(.dark, .dark *) {
  --tw-gradient-to: rgb(146 64 14 / 0.3) var(--tw-gradient-to-position);
}

@media (min-width: 640px) {
  .sm\:dark\:bg-base-700:where(.dark, .dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--base-700) / var(--tw-bg-opacity, 1));
  }

  .sm\:dark\:shadow-lg:where(.dark, .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);
  }
}

.\[\&_\*\]\:\!text-inherit * {
  color: inherit !important;
}