/* Simplified theme styles - automatic color detection based on background */

/* ---- Flat theme engine (#flat-themes) ----
   Every rule below already reads --theme-card-radius / --theme-button-radius
   / --theme-card / --theme-card-border etc. generically, with no hardcoded
   floor, shadow or blur baked in for a specific theme — so a flat theme
   (background.flat === true, `theme-flat` class set by applyThemeToPage)
   already renders correctly from this file with no override needed here.
   The immersive extras that DO need actively switching off for a flat page
   (kinetic gradient headings, atmosphere, depth shadows, and index.css's
   16px card-radius floor) live in pageThemes.css's `.theme-flat` block,
   right next to the rules they're countering. */

/* Theme-aware text colors */
.theme-text-primary {
  color: var(--theme-text-primary, #1F2937) !important;
}

.theme-text-secondary {
  color: var(--theme-text-secondary, #6B7280) !important;
}

/* Page container uses theme colors for all child text by default */
.page-container {
  background-color: var(--theme-background, #FFFFFF);
  color: var(--theme-text-primary, #1F2937);
  font-family: var(--theme-font-family, "Inter", sans-serif);
  /* Own stacking context so the immersive atmosphere can sit at z-index:-1
     (behind content, above the page fill) without us having to promote every
     content child to position:relative — that promotion used to clobber fixed
     overlays (the theme drawer) and drop them into page flow. isolation/relative
     do NOT create a containing block for position:fixed, so overlays still
     anchor to the viewport. */
  position: relative;
  isolation: isolate;
}

.page-container h1,
.page-container h2,
.page-container h3,
.page-container h4,
.page-container h5,
.page-container h6 {
  color: var(--theme-text-primary, #1F2937);
}

.page-container p,
.page-container span:not(.preserve-color),
.page-container label:not(.preserve-color) {
  color: var(--theme-text-primary, #1F2937);
}

/* The Add / Edit Detail panel is a neutral light surface. Reset the themed
   colour variables on it so a dark page theme doesn't turn its labels and the
   Save/Add button white-on-white. The accent stays inherited for highlights.
   .neutral-surface is the same reset for other light chrome inside the page
   (e.g. the email-confirmation banner). */
.detail-modal-surface,
.neutral-surface {
  --theme-text-primary: #111827;
  --theme-text-secondary: #6B7280;
  --theme-background: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-border: #E5E7EB;
  color: #111827;
}

/* Detail cards use theme surface color for subtle contrast */
.detail-card {
  background-color: var(--theme-surface, transparent);
  border-color: transparent;
  color: var(--theme-text-primary, #1F2937);
  border-radius: var(--theme-card-radius, var(--theme-button-radius, 10px));
  transition: all 0.2s ease;
}

/* Hover is a tint only — no scale, no lift. Cards must never change size or
   move under the cursor (they push the page around and read as jittery). */
.detail-card.detail-card-clickable:hover {
  background-color: var(--theme-surface-hover, rgba(0, 0, 0, 0.03));
}

/* Outline card shape variant */
.detail-card.detail-card-outline {
  background-color: transparent;
  border: 1.5px solid var(--theme-border, #E5E7EB);
}

.detail-card.detail-card-outline.detail-card-clickable:hover {
  background-color: var(--theme-surface-hover, rgba(0, 0, 0, 0.03));
  border-color: var(--theme-text-secondary, #6B7280);
}

/* Simple link centered layout */
.detail-card.detail-card-simple-link {
  text-align: center;
}

/* Social icon tiles keep a fixed compact radius regardless of the page card
   shape — they must never inherit a pill/oval radius from --theme-card-radius. */
.page-container .detail-card.social-tile {
  border-radius: 16px;
}

.detail-card h3,
.detail-card h4,
.detail-card p {
  color: var(--theme-text-primary, #1F2937);
}

/* Detail card secondary text (descriptions, URLs) */
.detail-card .detail-secondary-text {
  color: var(--theme-text-secondary, #6B7280);
}

/* Bottom sheets use theme background color to match page */
.theme-sheet {
  background-color: var(--theme-background, #FFFFFF);
  color: var(--theme-text-primary, #1F2937);
}

/* Floating theme drawer — same translucent glass language as the toolbar pill,
   tinted by the page theme so it still previews on-theme. The header is a touch
   more opaque so the tabs stay legible over content scrolling beneath it. */
.theme-sheet.theme-sheet-floating {
  background-color: color-mix(in srgb, var(--theme-background, #FFFFFF) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.theme-sheet-header {
  background-color: color-mix(in srgb, var(--theme-background, #FFFFFF) 92%, transparent);
  color: var(--theme-text-primary, #1F2937);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.theme-sheet h2,
.theme-sheet h3,
.theme-sheet label,
.theme-sheet p {
  color: var(--theme-text-primary, #1F2937);
}

.theme-sheet .border-gray-200,
.theme-sheet .border-gray-100 {
  border-color: var(--theme-border, #E5E7EB) !important;
}

.theme-sheet input,
.theme-sheet textarea,
.theme-sheet select {
  background-color: var(--theme-surface, #F8FAFC) !important;
  color: var(--theme-text-primary, #1F2937) !important;
  border-color: var(--theme-border, #E5E7EB) !important;
}

.theme-sheet input::placeholder,
.theme-sheet textarea::placeholder {
  color: var(--theme-text-secondary, #6B7280) !important;
}

.theme-sheet button:hover {
  background-color: var(--theme-surface, #F3F4F6);
}

/* Add detail button - stands out with dashed border and centered icon */
.add-detail-button {
  background-color: var(--theme-surface, #F8FAFC);
  border-color: var(--theme-border, #E5E7EB);
  color: var(--theme-text-primary, #1F2937);
  border-radius: var(--theme-button-radius, 8px);
}

.add-detail-button:hover {
  background-color: var(--theme-surface-hover, rgba(0, 0, 0, 0.03));
}

/* Social icon row - theme-aware hover backgrounds */
.page-container .social-icon-link {
  transition: all 0.2s ease;
}

.page-container.theme-dark .social-icon-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.page-container.theme-light .social-icon-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Context menu / dropdown for dark themes */
.page-container.theme-dark .theme-dropdown {
  background-color: var(--theme-surface, #2D2D3F);
  border-color: var(--theme-border, #374151);
}

.page-container.theme-dark .theme-dropdown button,
.page-container.theme-dark .theme-dropdown a {
  color: var(--theme-text-primary, #E5E5E5);
}

.page-container.theme-dark .theme-dropdown button:hover,
.page-container.theme-dark .theme-dropdown a:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.page-container.theme-light .theme-dropdown {
  background-color: #FFFFFF;
  border-color: #E5E7EB;
}

/* Section headers */
.page-container .section-header-text {
  color: var(--theme-text-secondary, #6B7280);
}

/* View counter */
.page-container .view-counter {
  color: var(--theme-text-secondary, #6B7280);
}

/* Edit mode labels */
.page-container .edit-label {
  color: var(--theme-text-secondary, #6B7280);
}

/* Footer theme integration */
.page-container .theme-footer {
  border-color: var(--theme-border, #E5E7EB);
}

.page-container .theme-footer p {
  color: var(--theme-text-secondary, #6B7280);
}

.page-container.theme-dark .theme-footer img {
  filter: invert(1);
}

/* Smooth transitions for theme changes - applied to specific elements for better performance */
.theme-transition,
.page-container,
.detail-card,
button,
a,
input,
textarea,
select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Form Controls - Scoped to page-container for theme integration */
.page-container input[type="text"],
.page-container input[type="email"],
.page-container input[type="password"],
.page-container input[type="url"],
.page-container input[type="tel"],
.page-container input[type="number"],
.page-container input[type="search"],
.page-container input[type="date"],
.page-container input[type="time"],
.page-container input[type="datetime-local"],
.page-container textarea,
.page-container select:not(.text-transparent) {
  background-color: var(--theme-surface, #ffffff) !important;
  color: var(--theme-text-primary, #374151) !important;
  border-color: var(--theme-border, #d1d5db) !important;
}

/* Allow text-transparent selects to remain transparent */
.page-container select.text-transparent {
  color: transparent !important;
}

/* Focus states - scoped to page-container, using theme accent */
.page-container input:focus,
.page-container textarea:focus,
.page-container select:not(.text-transparent):focus {
  border-color: var(--theme-accent, #52A8FF) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #52A8FF) 15%, transparent) !important;
  outline: none;
}

/* Specific overrides for common form classes */
.page-container .form-input,
.page-container .form-textarea,
.page-container .form-select {
  background-color: var(--theme-surface, #ffffff) !important;
  color: var(--theme-text-primary, #374151) !important;
  border-color: var(--theme-border, #d1d5db) !important;
}

.page-container .form-input:focus,
.page-container .form-textarea:focus,
.page-container .form-select:focus {
  border-color: var(--theme-accent, #52A8FF) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #52A8FF) 15%, transparent) !important;
}

/* Layout selector buttons - theme aware */
.page-container .layout-btn {
  border-color: var(--theme-border, #E5E7EB);
  color: var(--theme-text-secondary, #9CA3AF);
}

.page-container .layout-btn:hover {
  border-color: var(--theme-border-light, #D1D5DB);
}

.page-container .layout-btn.layout-btn-active {
  border-color: var(--theme-accent, #52A8FF);
  color: var(--theme-accent, #52A8FF);
}

/* Error banners stay consistent regardless of theme */
.page-container .error-banner {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Section dashed borders for dark themes */
.page-container.theme-dark .section-container {
  border-color: var(--theme-border, #374151);
}

/* Edit mode action buttons (grip, menu, etc.) */
.page-container .edit-action-btn {
  color: var(--theme-text-secondary, #9CA3AF);
}

.page-container .edit-action-btn:hover {
  color: var(--theme-text-primary, #1F2937);
  background-color: rgba(128, 128, 128, 0.1);
}

/* Custom scrollbar to match theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--theme-surface, #F8FAFC);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border, #D1D5DB);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-border-light, #9CA3AF);
}

/* Theme-aware card border radius */
.page-container .detail-card {
  border-radius: var(--theme-card-radius, var(--theme-button-radius, 0.5rem));
}

.page-container .add-detail-button {
  border-radius: var(--theme-button-radius, 0.5rem);
}

/* Hero layout - featured first item gets larger styling */
.hero-featured-item .detail-card {
  padding: 2rem;
}

.hero-featured-item .detail-card h3 {
  font-size: 1.25rem;
}

.hero-featured-item .detail-card img {
  max-height: 400px;
  object-fit: cover;
}

.hero-featured-item .detail-card iframe {
  min-height: 300px;
}

/* ── Mobile touch target improvements ── */

/* On touch devices (coarse pointer), enlarge edit controls for easier tapping */
@media (pointer: coarse) {
  /* Drag handle: wider touch target */
  .detail-card [title="Drag to reorder"] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    opacity: 0.4;
  }

  /* …but the compact social/icon tiles can't fit a 44px handle next to the edit
     button without colliding with the centred icon, so keep their controls small. */
  .detail-card.social-tile [title="Drag to reorder"] {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
  }

  /* 3-dot context menu button: larger touch target */
  .detail-card [title="More options"] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    opacity: 0.6;
  }

  /* Context menu items: taller rows for easier tapping */
  .theme-dropdown button,
  .theme-dropdown a {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}

/* ── Flowline shared-utility protection ──
   The element-scoped input rules above use !important (so themed pages don't get
   white-on-white fields). When a field opts into the shared .form-input-soft /
   .focus-ring-accent polish, those !important rules would otherwise stomp its
   soft radius + accent focus glow. Re-assert the soft treatment at higher
   specificity (class + container) so the premium states win without weakening
   the existing themed-input behaviour for non-opted fields. */
.theme-sheet input.form-input-soft,
.theme-sheet textarea.form-input-soft,
.theme-sheet select.form-input-soft,
.detail-modal-surface input.form-input-soft,
.detail-modal-surface textarea.form-input-soft,
.detail-modal-surface select.form-input-soft,
.page-container input.form-input-soft,
.page-container textarea.form-input-soft,
.page-container select.form-input-soft,
input.form-input-soft,
textarea.form-input-soft,
select.form-input-soft {
  border-radius: 12px !important;
}

.theme-sheet input.form-input-soft:focus,
.theme-sheet textarea.form-input-soft:focus,
.theme-sheet select.form-input-soft:focus,
.detail-modal-surface input.form-input-soft:focus,
.detail-modal-surface textarea.form-input-soft:focus,
.detail-modal-surface select.form-input-soft:focus,
.page-container input.form-input-soft:focus,
.page-container textarea.form-input-soft:focus,
.page-container select.form-input-soft:not(.text-transparent):focus,
input.form-input-soft:focus,
textarea.form-input-soft:focus,
select.form-input-soft:focus {
  border-color: var(--theme-accent, #52A8FF) !important;
  box-shadow:
    0 0 0 2px var(--theme-accent, #52A8FF),
    0 0 0 6px color-mix(in srgb, var(--theme-accent, #52A8FF) 18%, transparent) !important;
  outline: none !important;
}

.theme-sheet .focus-ring-accent:focus-visible,
.detail-modal-surface .focus-ring-accent:focus-visible,
.page-container .focus-ring-accent:focus-visible {
  outline: 2px solid var(--theme-accent, #52A8FF) !important;
  outline-offset: 2px !important;
}

/* ── Swipeable detail styles ── */
.swipeable-detail-wrapper {
  /* Prevent text selection during swipe */
  -webkit-user-select: none;
  user-select: none;
}

/* Keyboard focus outline for navigated details */
.swipeable-detail-wrapper.ring-2 {
  outline: none;
}

*, ::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.19 | 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 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Poppins, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

input::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;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1\.5 {
  bottom: -0.375rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-2\.5 {
  top: -0.625rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-full {
  bottom: 100%;
}
.end-2 {
  inset-inline-end: 0.5rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-3\.5 {
  left: 0.875rem;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.start-2 {
  inset-inline-start: 0.5rem;
}
.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-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.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-\[60\] {
  z-index: 60;
}
.z-\[69\] {
  z-index: 69;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.-mx-0\.5 {
  margin-left: -0.125rem;
  margin-right: -0.125rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-my-0\.5 {
  margin-top: -0.125rem;
  margin-bottom: -0.125rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.\!me-1 {
  margin-inline-end: 0.25rem !important;
}
.\!me-1\.5 {
  margin-inline-end: 0.375rem !important;
}
.\!ms-auto {
  margin-inline-start: auto !important;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1\.5 {
  margin-left: -0.375rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mr-1\.5 {
  margin-right: -0.375rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.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-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.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\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.ms-0\.5 {
  margin-inline-start: 0.125rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-px {
  margin-top: 1px;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.\!inline {
  display: inline !important;
}
.inline {
  display: inline;
}
.\!flex {
  display: flex !important;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.\!h-2\.5 {
  height: 0.625rem !important;
}
.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-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[min\(52vh\2c 520px\)\] {
  height: min(52vh, 520px);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[28rem\] {
  max-height: 28rem;
}
.max-h-\[55vh\] {
  max-height: 55vh;
}
.max-h-\[600px\] {
  max-height: 600px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[72vh\] {
  max-height: 72vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[calc\(90vh-72px\)\] {
  max-height: calc(90vh - 72px);
}
.min-h-\[1px\] {
  min-height: 1px;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-2\.5 {
  width: 0.625rem !important;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[52px\] {
  width: 52px;
}
.w-\[62\%\] {
  width: 62%;
}
.w-\[calc\(100\%-32px\)\] {
  width: calc(100% - 32px);
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-24 {
  min-width: 6rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[28px\] {
  min-width: 28px;
}
.min-w-full {
  min-width: 100%;
}
.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-\[160px\] {
  max-width: 160px;
}
.max-w-\[210px\] {
  max-width: 210px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[40vw\] {
  max-width: 40vw;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.basis-full {
  flex-basis: 100%;
}
.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-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-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));
}
.translate-x-3\.5 {
  --tw-translate-x: 0.875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[1px\] {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2 {
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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));
}
.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));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes fade-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slide-in-right {

  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}
.animate-slide-in-right {
  animation: slide-in-right 0.25s ease-out;
}
@keyframes slide-out-right {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}
.animate-slide-out-right {
  animation: slide-out-right 0.2s ease-in forwards;
}
@keyframes slide-up {

  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}
.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.appearance-none {
  appearance: none;
}
.grid-flow-row-dense {
  grid-auto-flow: row dense;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-items-center {
  place-items: 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 !important;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-x-1 {
  column-gap: 0.25rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :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-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-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-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-white\/\[0\.06\] > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.06);
}
.divide-white\/\[0\.08\] > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.08);
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-nowrap {
  text-wrap: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-t-md {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.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-l-\[3px\] {
  border-left-width: 3px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.\!border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}
.border-accent-base {
  --tw-border-opacity: 1;
  border-color: rgb(255 218 185 / 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-300\/40 {
  border-color: rgb(252 211 77 / 0.4);
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-amber-500\/20 {
  border-color: rgb(245 158 11 / 0.2);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-current {
  border-color: currentColor;
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-200\/70 {
  border-color: rgb(229 231 235 / 0.7);
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-neutral-700 {
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
}
.border-neutral-gray-darker {
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity, 1));
}
.border-primary-base {
  --tw-border-opacity: 1;
  border-color: rgb(140 155 255 / var(--tw-border-opacity, 1));
}
.border-primary-darkest {
  --tw-border-opacity: 1;
  border-color: rgb(31 59 255 / var(--tw-border-opacity, 1));
}
.border-primary-darkest\/15 {
  border-color: rgb(31 59 255 / 0.15);
}
.border-primary-darkest\/40 {
  border-color: rgb(31 59 255 / 0.4);
}
.border-primary-lighter {
  --tw-border-opacity: 1;
  border-color: rgb(211 217 255 / var(--tw-border-opacity, 1));
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-600 {
  --tw-border-opacity: 1;
  border-color: rgb(147 51 234 / 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-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-800 {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.border-sky-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
}
.border-slate-900\/5 {
  border-color: rgb(15 23 42 / 0.05);
}
.border-stone-300 {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/\[0\.06\] {
  border-color: rgb(255 255 255 / 0.06);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.border-white\/\[0\.12\] {
  border-color: rgb(255 255 255 / 0.12);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-l-red-600 {
  --tw-border-opacity: 1;
  border-left-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-t-primary-base {
  --tw-border-opacity: 1;
  border-top-color: rgb(140 155 255 / var(--tw-border-opacity, 1));
}
.border-t-sky-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#171717\] {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/0 {
  background-color: rgb(0 0 0 / 0);
}
.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.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-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-current {
  background-color: currentColor;
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 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-900\/40 {
  background-color: rgb(6 78 59 / 0.4);
}
.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-200\/70 {
  background-color: rgb(229 231 235 / 0.7);
}
.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-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/50 {
  background-color: rgb(17 24 39 / 0.5);
}
.bg-gray-900\/60 {
  background-color: rgb(17 24 39 / 0.6);
}
.bg-gray-900\/70 {
  background-color: rgb(17 24 39 / 0.7);
}
.bg-gray-900\/75 {
  background-color: rgb(17 24 39 / 0.75);
}
.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}
.bg-gray-900\/90 {
  background-color: rgb(17 24 39 / 0.9);
}
.bg-gray-900\/95 {
  background-color: rgb(17 24 39 / 0.95);
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 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-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-inherit {
  background-color: inherit;
}
.bg-neutral-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-primary-base {
  --tw-bg-opacity: 1;
  background-color: rgb(140 155 255 / var(--tw-bg-opacity, 1));
}
.bg-primary-base\/\[0\.18\] {
  background-color: rgb(140 155 255 / 0.18);
}
.bg-primary-darkest {
  --tw-bg-opacity: 1;
  background-color: rgb(31 59 255 / var(--tw-bg-opacity, 1));
}
.bg-primary-darkest\/20 {
  background-color: rgb(31 59 255 / 0.2);
}
.bg-primary-darkest\/5 {
  background-color: rgb(31 59 255 / 0.05);
}
.bg-primary-lighter {
  --tw-bg-opacity: 1;
  background-color: rgb(211 217 255 / var(--tw-bg-opacity, 1));
}
.bg-primary-lightest {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / 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-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/60 {
  background-color: rgb(254 242 242 / 0.6);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}
.bg-red-900\/40 {
  background-color: rgb(127 29 29 / 0.4);
}
.bg-red-950\/20 {
  background-color: rgb(69 10 10 / 0.2);
}
.bg-red-950\/50 {
  background-color: rgb(69 10 10 / 0.5);
}
.bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/55 {
  background-color: rgb(15 23 42 / 0.55);
}
.bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}
.bg-stone-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
}
.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-900\/40 {
  background-color: rgb(76 29 149 / 0.4);
}
.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\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}
.bg-white\/\[0\.07\] {
  background-color: rgb(255 255 255 / 0.07);
}
.bg-white\/\[0\.08\] {
  background-color: rgb(255 255 255 / 0.08);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-opacity-0 {
  --tw-bg-opacity: 0;
}
.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}
.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));
}
.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-50\/30 {
  --tw-gradient-from: rgb(255 251 235 / 0.3) 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-gray-50 {
  --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-base {
  --tw-gradient-from: #8C9BFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(140 155 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-base\/\[0\.06\] {
  --tw-gradient-from: rgb(140 155 255 / 0.06) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(140 155 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-darker {
  --tw-gradient-from: #4C63FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(76 99 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-darkest {
  --tw-gradient-from: #1F3BFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 59 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-lightest {
  --tw-gradient-from: #EEF1FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 241 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-gray-100 {
  --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
}
.to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}
.to-primary-base {
  --tw-gradient-to: #8C9BFF var(--tw-gradient-to-position);
}
.to-primary-darkest {
  --tw-gradient-to: #1F3BFF var(--tw-gradient-to-position);
}
.to-primary-lighter\/40 {
  --tw-gradient-to: rgb(211 217 255 / 0.4) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-black {
  fill: #000;
}
.fill-gray-200 {
  fill: #e5e7eb;
}
.object-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-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.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-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[calc\(env\(safe-area-inset-bottom\2c 0px\)\+0\.75rem\)\] {
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + 0.75rem);
}
.pb-\[calc\(env\(safe-area-inset-bottom\2c 0px\)\+1\.25rem\)\] {
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + 1.25rem);
}
.pe-6 {
  padding-inline-end: 1.5rem;
}
.pl-0\.5 {
  padding-left: 0.125rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-3\.5 {
  padding-right: 0.875rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.align-middle {
  vertical-align: middle;
}
.align-bottom {
  vertical-align: bottom;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[clamp\(1\.9rem\2c 7\.5vw\2c 3rem\)\] {
  font-size: clamp(1.9rem, 7.5vw, 3rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\!font-medium {
  font-weight: 500 !important;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.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-\[1\.05\] {
  line-height: 1.05;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent-base {
  --tw-text-opacity: 1;
  color: rgb(255 218 185 / var(--tw-text-opacity, 1));
}
.text-accent-darker {
  --tw-text-opacity: 1;
  color: rgb(255 197 156 / 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-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-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-fuchsia-600 {
  --tw-text-opacity: 1;
  color: rgb(192 38 211 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-inherit {
  color: inherit;
}
.text-neutral-200 {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
}
.text-neutral-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
}
.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-base {
  --tw-text-opacity: 1;
  color: rgb(224 224 224 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-darker {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity, 1));
}
.text-neutral-gray-darkest {
  --tw-text-opacity: 1;
  color: rgb(160 160 160 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-pink-500 {
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}
.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-primary-darker {
  --tw-text-opacity: 1;
  color: rgb(76 99 255 / var(--tw-text-opacity, 1));
}
.text-primary-darkest {
  --tw-text-opacity: 1;
  color: rgb(31 59 255 / var(--tw-text-opacity, 1));
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-600\/80 {
  color: rgb(220 38 38 / 0.8);
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-stone-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-text-primary {
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}
.text-text-secondary {
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.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));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white\/30::placeholder {
  color: rgb(255 255 255 / 0.3);
}
.accent-purple-600 {
  accent-color: #9333ea;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.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-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.6\)\2c 0_10px_26px_-16px_rgba\(61\2c 149\2c 232\2c 0\.5\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.6),0 10px 26px -16px rgba(61,149,232,0.5);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 10px 26px -16px 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-black\/10 {
  --tw-shadow-color: rgb(0 0 0 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/20 {
  --tw-shadow-color: rgb(0 0 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-900\/10 {
  --tw-shadow-color: rgb(17 24 39 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-900\/20 {
  --tw-shadow-color: rgb(17 24 39 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-slate-900\/10 {
  --tw-shadow-color: rgb(15 23 42 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-slate-900\/15 {
  --tw-shadow-color: rgb(15 23 42 / 0.15);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-slate-900\/30 {
  --tw-shadow-color: rgb(15 23 42 / 0.3);
  --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) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-emerald-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1));
}
.ring-emerald-500\/20 {
  --tw-ring-color: rgb(16 185 129 / 0.2);
}
.ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-gray-900\/5 {
  --tw-ring-color: rgb(17 24 39 / 0.05);
}
.ring-primary-base\/40 {
  --tw-ring-color: rgb(140 155 255 / 0.4);
}
.ring-primary-base\/50 {
  --tw-ring-color: rgb(140 155 255 / 0.5);
}
.ring-primary-darkest {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 59 255 / var(--tw-ring-opacity, 1));
}
.ring-primary-darkest\/20 {
  --tw-ring-color: rgb(31 59 255 / 0.2);
}
.ring-primary-darkest\/30 {
  --tw-ring-color: rgb(31 59 255 / 0.3);
}
.ring-primary-lighter {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(211 217 255 / var(--tw-ring-opacity, 1));
}
.ring-purple-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity, 1));
}
.ring-purple-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.ring-slate-900\/5 {
  --tw-ring-color: rgb(15 23 42 / 0.05);
}
.ring-stone-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity, 1));
}
.ring-violet-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(221 214 254 / var(--tw-ring-opacity, 1));
}
.ring-violet-500\/20 {
  --tw-ring-color: rgb(139 92 246 / 0.2);
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}
.ring-white\/\[0\.12\] {
  --tw-ring-color: rgb(255 255 255 / 0.12);
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-sm {
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  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-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[height\2c max-height\2c border-radius\] {
  transition-property: height,max-height,border-radius;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-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-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.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-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}

/* Import custom theme styles */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   Floating editor toolbar geometry
   Single source of truth shared by Toolbar.js (which positions the pill) and
   the page container (which must reserve enough room below its last element —
   the Add detail / Add section buttons — so the pill never covers them).
   ────────────────────────────────────────────────────────────────────────── */
:root {
    /* Height of the pill: 2 x 6px padding + 36px tallest control (Save). */
    --editor-toolbar-height: 48px;
    /* Gap between the pill and the bottom of the (safe) viewport. */
    --editor-toolbar-offset: 18px;
    /* Distance from the bottom of the viewport to the top of the pill,
       including the iOS home-indicator inset. */
    --editor-toolbar-inset: calc(
        var(--editor-toolbar-height) + var(--editor-toolbar-offset) + env(safe-area-inset-bottom, 0px)
    );
    /* What scrollable editor content must clear: the pill plus breathing room. */
    --editor-toolbar-clearance: calc(var(--editor-toolbar-inset) + 1.5rem);
}

/* Applied to the page container only while the floating toolbar is rendered
   (owner/editor view). Public pages get no dead space. */
.has-editor-toolbar {
    padding-bottom: var(--editor-toolbar-clearance);
}

/* ──────────────────────────────────────────────────────────────────────────
   Shared premium-polish utilities ("Flowline")
   Light/dark-safe via --theme-* vars. Animated affordances are wrapped in
   prefers-reduced-motion: no-preference so they stay calm when asked.
   ────────────────────────────────────────────────────────────────────────── */

/* Eyebrow label: Poppins, uppercase, wide tracking, short accent rule. */
.ey-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--theme-text-secondary, #6B7280);
}
.ey-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--theme-accent, #52A8FF),
        color-mix(in srgb, var(--theme-accent, #52A8FF) 35%, transparent));
    flex: none;
}

/* Accent gradient-clipped heading text. */
/* The #52A8FF fallbacks in the --theme-accent helpers below are deliberate:
   these classes serve themed pages, where the page theme sets --theme-accent.
   App pages override them in flatForms.css (.fh-app). */
.accent-gradient-text {
    background: linear-gradient(120deg,
        var(--theme-accent, #52A8FF) 0%,
        color-mix(in srgb, var(--theme-accent, #52A8FF) 72%, #78C2CE) 55%,
        color-mix(in srgb, var(--theme-accent, #52A8FF) 88%, #A78BFA) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Soft translucent panel surface with layered depth. */
.form-surface {
    border-radius: 16px;
    background: color-mix(in srgb, var(--theme-card, var(--theme-surface, #FFFFFF)) 88%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--theme-card-border, rgba(0, 0, 0, 0.06));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 30px -18px rgba(15, 23, 42, 0.22);
}

/* Soft rounded input with tasteful hover lift and accent focus glow. */
.form-input-soft {
    border-radius: 12px;
    border: 1px solid var(--theme-border, #E5E7EB);
    background: var(--theme-surface, #FFFFFF);
    transition: border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.form-input-soft:hover {
    border-color: color-mix(in srgb, var(--theme-accent, #52A8FF) 40%, var(--theme-border, #E5E7EB));
    box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.25);
}
.form-input-soft:focus,
.form-input-soft:focus-visible {
    outline: none;
    border-color: var(--theme-accent, #52A8FF);
    box-shadow:
        0 0 0 2px var(--theme-accent, #52A8FF),
        0 0 0 6px color-mix(in srgb, var(--theme-accent, #52A8FF) 18%, transparent);
}

/* iOS focus-zoom guard (app-wide). Mobile Safari zooms toward any focused
   text field whose font-size is < 16px and does NOT zoom back out, leaving the
   page partially scaled and horizontally scrollable. Render every text input at
   >= 16px on touch devices so focusing one never triggers the zoom — across the
   editor, theme drawer, auth, search, page fields, everywhere. Desktop keeps the
   smaller, denser type. Non-text controls (checkbox/radio/range/color) are
   excluded since font-size doesn't affect them. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Keyboard focus ring helper. */
.focus-ring-accent:focus-visible {
    outline: 2px solid var(--theme-accent, #52A8FF);
    outline-offset: 2px;
    border-radius: inherit;
}

/* Primary accent button: gradient fill, glow, hover lift, press squash. */
.btn-accent-lift {
    background: linear-gradient(120deg,
        var(--theme-accent, #52A8FF) 0%,
        color-mix(in srgb, var(--theme-accent, #52A8FF) 78%, #78C2CE) 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--theme-accent, #52A8FF) 65%, transparent);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.2s ease;
}
/* No lift on hover — nothing in the UI changes size or position on hover
   (see the hover rules documented below). Depth only. */
.btn-accent-lift:hover {
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--theme-accent, #52A8FF) 70%, transparent);
}
.btn-accent-lift:active {
    transform: scale(0.98);
}
.btn-accent-lift:disabled,
.btn-accent-lift[disabled],
.btn-accent-lift[aria-disabled="true"] {
    opacity: 0.4;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Pro/upsell callout card. */
.upsell-card {
    border: 1px solid #FCD34D;
    border-left-width: 2px;
    border-left-color: #F59E0B;
    background: rgba(255, 251, 235, 0.4);
    color: #92400E;
    border-radius: 14px;
}

/* Brief accent pulse to confirm a copy action. */
.copy-flash {
    animation: copy-flash 0.6s ease-out;
}
@keyframes copy-flash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, #52A8FF) 55%, transparent); }
    40%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #52A8FF) 28%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, #52A8FF) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .form-input-soft,
    .btn-accent-lift { transition: none; }
    .copy-flash { animation: none; }
}

/* Detail spotlight overlay animations */
@keyframes spotlight-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes spotlight-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes spotlight-card-in {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spotlight-card-out {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.92) translateY(20px); }
}
.animate-spotlight-fade-in { animation: spotlight-fade-in 0.25s ease-out forwards; }
.animate-spotlight-fade-out { animation: spotlight-fade-out 0.3s ease-in forwards; }
.animate-spotlight-card-in { animation: spotlight-card-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-spotlight-card-out { animation: spotlight-card-out 0.3s ease-in forwards; }

/* The landing pages' main call-to-action button: flat cobalt like the
   homepage (it used to be an animated sky-blue gradient with a glow). The
   class name stays so the pages don't need touching. These pages sit
   outside .fh-root, so the cobalt is literal: keep it in step with tailwind
   primary.darkest / primary.hover. */
.animated-button {
    background: #1F3BFF;
    transition: background-color 0.15s ease;
}
.animated-button:hover {
    background: #1831D6;
}

/* ── Shared slide-up entrance ──
   Used by DetailModal / DetailSidebar / BackgroundPicker / CollaboratorsPanel.
   Refined to a premium, decisive curve so panels feel like they "settle" in. */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slide-up 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* Reduced-motion guard: spotlight + slide-up entrances/exits resolve instantly
   to their end state so nothing animates when the user has asked for less. */
@media (prefers-reduced-motion: reduce) {
    .animate-spotlight-fade-in,
    .animate-spotlight-fade-out,
    .animate-spotlight-card-in,
    .animate-spotlight-card-out,
    .animate-slide-up,
    .animate-slide-out-bottom {
        animation-duration: 0.001s !important;
    }
}

/* ── Touch device utilities ── */
/* Show elements at reduced opacity on touch devices (coarse pointer) */
@media (pointer: coarse) {
    .coarse-pointer\:opacity-40 {
        opacity: 0.4 !important;
    }
}

/* Mobile bottom-sheet slide-out animation */
@keyframes slide-out-bottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
.animate-slide-out-bottom {
    animation: slide-out-bottom 0.2s ease-in forwards;
}

/* ── Detail editing highlight ── */
/* Pulse applied to the card being edited. Uses the active theme accent (via
   color-mix) so the highlight is coherent with whatever theme is set, instead
   of a hardcoded blue. */
@keyframes editing-pulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, #52A8FF) 55%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #52A8FF) 28%, transparent); }
}
.detail-editing-highlight {
    border-radius: 12px;
    animation: editing-pulse 2s ease-in-out 3;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, #52A8FF) 55%, transparent);
    position: relative;
}
.detail-editing-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    border-radius: 12px 0 0 12px;
    background: var(--theme-accent, #52A8FF);
    z-index: 1;
}

/* ── Inline editing affordance ── */
/* Subtle accent cue on hover so creators can see what is tap-to-edit,
   plus a theme-accent focus ring while editing a title/URL in place. */
.inline-edit-affordance:hover {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--theme-accent, #52A8FF) 45%, transparent);
}
.inline-edit-input:focus {
    border-color: var(--theme-accent, #52A8FF);
    box-shadow: 0 1px 0 0 var(--theme-accent, #52A8FF);
}

/* ── In-place header editing ── */
/* Title and bio are edited where they're shown, in the page's own type and
   colours: no label above, no grey box at rest. A soft tint on hover/focus and
   an accent edge while typing are the only chrome. */
.edit-inline-field {
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: var(--theme-text-primary, #1F2937);
    resize: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.edit-inline-field.is-secondary {
    color: var(--theme-text-secondary, #6B7280);
}

.edit-inline-field:focus {
    outline: none;
    background: color-mix(in srgb, var(--theme-text-primary, #1F2937) 7%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--theme-accent, #52A8FF) 70%, transparent);
}
.edit-inline-field::placeholder {
    color: currentColor;
    opacity: 0.4;
}
/* Beat the page-wide form-control theming (themes.css paints every textarea
   in .page-container as a bordered surface, with !important) and the iOS
   focus-zoom guard (forces 16px on touch, which shrank the title to body
   size). These fields are always >= 20px, so they never trigger the zoom. */
.page-container textarea.edit-inline-field {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--theme-text-primary, #1F2937) !important;
    box-shadow: none !important;
}
.page-container textarea.edit-inline-field.is-secondary {
    color: var(--theme-text-secondary, #6B7280) !important;
}
/* Hover tint only where hover exists — on touch it sticks after a tap. */
@media (hover: hover) {
    .page-container textarea.edit-inline-field:hover:not(:focus) {
        background-color: color-mix(in srgb, var(--theme-text-primary, #1F2937) 5%, transparent) !important;
    }
}
.page-container textarea.edit-inline-field:focus {
    background-color: color-mix(in srgb, var(--theme-text-primary, #1F2937) 7%, transparent) !important;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--theme-accent, #52A8FF) 70%, transparent) !important;
}
textarea.edit-inline-field.is-title { font-size: 2.25rem !important; line-height: 1.15; }
/* Title and bio over the header photo: white, sized exactly as the live hero
   header sets them (the bio goes to 16px rather than 14px so focusing it never
   triggers iOS zoom). */
.page-container textarea.edit-inline-field.on-photo {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.page-container textarea.edit-inline-field.on-photo.is-hero-bio {
    color: rgba(255, 255, 255, 0.85) !important;
}
.page-container textarea.edit-inline-field.on-photo:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7) !important;
}
@media (hover: hover) {
    .page-container textarea.edit-inline-field.on-photo:hover:not(:focus) {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
}
textarea.edit-inline-field.is-hero-title { font-size: clamp(1.9rem, 7.5vw, 3rem) !important; line-height: 1.05; }
textarea.edit-inline-field.is-hero-bio { font-size: 1rem !important; line-height: 1.4; }
textarea.edit-inline-field.is-bio { font-size: 1.25rem !important; line-height: 1.5; }

/* One button style for header actions: icon leading, label, same weight. */
.edit-pill-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1F2937);
    background: color-mix(in srgb, var(--theme-text-primary, #1F2937) 7%, transparent);
    transition: background-color 0.15s ease;
}
.edit-pill-button:hover {
    background: color-mix(in srgb, var(--theme-text-primary, #1F2937) 12%, transparent);
}
.edit-pill-button:focus-visible {
    outline: 2px solid var(--theme-accent, #52A8FF);
    outline-offset: 2px;
}

/* ── Drag handle affordance ── */
/* The whole card is the drag target now (long-press on touch, press-and-move
   with a mouse — utils/dndSensors.js), so the grip is only a desktop hint and
   the keyboard entry point. Touch devices don't show it at all: a row of grips
   on every card was noise, and too small to hit reliably anyway. */
.drag-handle-affordance {
    opacity: 0;
    touch-action: none;
    transition: opacity 0.15s ease;
}
.group:hover .drag-handle-affordance,
.sortable-detail-item:hover .drag-handle-affordance,
.drag-handle-affordance:focus-visible {
    opacity: 0.7;
}
.drag-handle-affordance:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--theme-accent, #52A8FF) 8%, transparent);
    border-radius: 8px;
    color: var(--theme-accent, #52A8FF);
}
@media (hover: none) and (pointer: coarse) {
    .drag-handle-affordance {
        display: none !important;
    }
}

/* ── Drag-and-drop polish ── */

/* Suppress text selection on sortable cards so dragging never highlights
   their text/labels (the previous behaviour the user found distracting). */
.sortable-detail-item {
    -webkit-user-select: none;
    user-select: none;
}

/* While a detail is being dragged, embed iframes must not swallow the pointer
   (they otherwise capture it the instant the cursor crosses them, breaking the
   drag and sometimes leaving a card stuck over another). */
body.dnd-dragging iframe {
    pointer-events: none !important;
}

/* Source slot: the card's old spot stays as a quiet gap while the lifted card
   travels in the DragOverlay — like a native list reorder, not a dashed box. */
.sortable-detail-item.is-drag-placeholder {
    border-radius: 12px;
}

.sortable-detail-item.is-drag-placeholder > * {
    opacity: 0.25;
    transition: opacity 0.12s ease;
}

/* Long-press on touch must not select text or pop the iOS callout, and the
   hold must not be eaten by double-tap zoom. Form fields inside a card still
   select normally. */
.sortable-detail-item {
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.sortable-detail-item input,
.sortable-detail-item textarea,
.sortable-detail-item [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* The lifted card: a small scale and a soft shadow, eased in. */
@keyframes card-lift {
    from { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08)); }
    to   { transform: scale(1.03); filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.22)); }
}
.unified-drag-overlay {
    cursor: grabbing;
    transform: scale(1.03);
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.22));
    border-radius: 16px;
    animation: card-lift 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .unified-drag-overlay { animation: none; }
}

.unified-drag-overlay > .detail-card,
.detail-card-dragging {
    /* Lifted, not highlighted: the shadow carries it, no accent ring. */
    border-color: transparent !important;
}

/* Reorder group layout */
.reorder-group-y {
    display: flex;
    flex-direction: column;
}

.reorder-group-x {
    display: flex;
    flex-wrap: wrap;
}

/* ── Insertion indicator ──
   A glowing accent line that animates in at the exact slot the dragged item
   will land. Rendered on the neighbouring item via .drop-indicator-before
   (line above the item) / .drop-indicator-after (line below, i.e. end-of-list).
   The wrapper is position:relative-friendly; the line is an absolutely placed
   pseudo so it never affects layout/reflow. */
.sortable-detail-item {
    position: relative;
}

.sortable-detail-item.drop-indicator-before::before,
.sortable-detail-item.drop-indicator-after::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    height: 5px;
    border-radius: 999px;
    background: var(--theme-accent, #52A8FF);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, #52A8FF) 35%, transparent),
                0 0 14px color-mix(in srgb, var(--theme-accent, #52A8FF) 65%, transparent);
    z-index: 40;
    pointer-events: none;
    animation: drop-line-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sortable-detail-item.drop-indicator-before::before {
    top: -8px;
}

.sortable-detail-item.drop-indicator-after::after {
    bottom: -8px;
}

/* A pulsing dot on the leading edge of the line for extra clarity. */
.sortable-detail-item.drop-indicator-before::before,
.sortable-detail-item.drop-indicator-after::after {
    background-image: radial-gradient(circle at 6px 50%, color-mix(in srgb, var(--theme-accent, #52A8FF) 95%, white) 3px, transparent 3.5px);
}

@keyframes drop-line-in {
    from { transform: scaleX(0.4); opacity: 0; }
    to   { transform: scaleX(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sortable-detail-item.drop-indicator-before::before,
    .sortable-detail-item.drop-indicator-after::after { animation: none; }
}

/* ── Section-over highlight ──
   When a detail is dragged INTO a section (cross-container), the whole section
   container glows so the target is unmistakable. */
.unified-container {
    border-radius: 12px;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.unified-container.unified-container-over,
.unified-empty-dropzone.unified-container-over {
    background-color: color-mix(in srgb, var(--theme-accent, #52A8FF) 6%, transparent);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--theme-accent, #52A8FF) 70%, transparent),
                0 0 0 7px color-mix(in srgb, var(--theme-accent, #52A8FF) 12%, transparent);
}

/* Empty-section drop target in the unified editor DnD. Shows a dashed well so a
   creator can drag a detail into a section that has no details yet. While a
   drag is active it grows and shows a "Drop here to add to {section}" CTA. */
.unified-empty-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px;
    border: 1px dashed var(--theme-border, #d1d5db);
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, min-height 0.15s ease;
}

.unified-empty-dropzone.is-drag-active {
    min-height: 60px;
    border-width: 2px;
    border-color: color-mix(in srgb, var(--theme-accent, #52A8FF) 60%, transparent);
    background-color: color-mix(in srgb, var(--theme-accent, #52A8FF) 6%, transparent);
}

.unified-empty-dropzone-cta {
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-accent, #2563eb);
}

.unified-empty-dropzone.is-over {
    border-color: var(--theme-accent, #52A8FF);
    background-color: color-mix(in srgb, var(--theme-accent, #52A8FF) 14%, transparent);
}

/* ── Toolbar pinning during drag (founder issue #3) ──
   While a unified-DnD drag is active the sticky editor toolbar is frozen at the
   visual-viewport top (top:0, set inline). Disable overscroll chaining on the
   document during a drag so a rubber-band at the BOTTOM of the page can't shift
   the visual viewport (which previously dragged the toolbar down the page), and
   force the pinned header to ignore any inherited transform. */
body.dnd-dragging {
    overscroll-behavior-y: contain;
}

.toolbar-drag-pinned {
    transform: none !important;
    will-change: auto;
}

/* ── Consistent card surface (founder issue #2) ──
   Every detail card — simple link, social tile, and complex types — gets the
   SAME themed surface so they read as uniform cards on any backdrop, including
   multi-stop gradients where the flat-derived --theme-surface barely differs
   from the background. --theme-card is a translucent veil set per-theme in
   applyThemeToPage(); the backdrop-filter keeps text legible where the gradient
   runs light↔dark under a single card. These override themes.css (imported at
   the top of this file) at equal specificity by source order.

   Solid (non-gradient) presets still look correct: the veil sits over their
   matching surface colour, so the card reads as before. */
.page-container .detail-card,
.page-container .detail-card.detail-card-simple-link,
.page-container .detail-card.social-tile {
    background-color: var(--theme-card, var(--theme-surface, rgba(255, 255, 255, 0.62)));
    border: 1px solid var(--theme-card-border, rgba(0, 0, 0, 0.06));
    /* Set to blur(8px) by applyThemeToPage only when the background is a
       gradient; 'none' otherwise. A per-card backdrop blur costs a GPU pass
       per card per scroll frame, and on a solid background it changes nothing
       visible. Default 'none' so a page renders cheap before JS runs. */
    -webkit-backdrop-filter: var(--theme-card-blur, none);
    backdrop-filter: var(--theme-card-blur, none);
}

/* Phones are where the blur hurts most and where most visitors are: a
   mid-range device drops frames scrolling a page of blurred cards. The veil
   alone carries legibility there. */
@media (max-width: 640px) {
    .page-container .detail-card,
    .page-container .detail-card.detail-card-simple-link,
    .page-container .detail-card.social-tile {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.page-container .detail-card.detail-card-clickable:hover {
    background-color: var(--theme-card-hover, var(--theme-surface-hover, rgba(255, 255, 255, 0.82)));
}

/* Outline shape opts out of the filled veil — keep it a clean bordered card,
   but use the themed card border so it's visible on a gradient too. */
.page-container .detail-card.detail-card-outline {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1.5px solid var(--theme-card-border, var(--theme-border, #E5E7EB));
}

/* The featured (hero) card and inline-editor surfaces keep their own treatment;
   don't double-veil them. */
.page-container .hero-featured-item .detail-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ── Card hover (Flowline) ──
   Detail cards get a hairline accent border and a soft shadow on hover — but
   NEVER a size or position change. The old translateY lift ("grow on hover")
   made the page twitch under the cursor and was cut. Source order beats the
   themes.css hover (which only swaps background). Radius harmonised to >=16px so
   cards read as soft, modern surfaces regardless of --theme-card-radius. */
.detail-card.detail-card-clickable:hover {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #52A8FF) 55%, transparent);
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.28);
}

/* ── Click-to-edit affordance (edit mode) ──
   The edit pencil is gone: the whole card is the edit target. Signal that with
   a pointer cursor and a tint/border on hover — again, no scale or translate.
   The drag handle keeps its own grab cursor (it drags, it never edits). */
.detail-card.detail-card-editable {
    cursor: pointer;
}

.detail-card.detail-card-editable:hover {
    background-color: var(--theme-card-hover, var(--theme-surface-hover, rgba(0, 0, 0, 0.03)));
    border-color: color-mix(in srgb, var(--theme-accent, #52A8FF) 45%, transparent);
}

.detail-card.detail-card-editable:focus-visible {
    outline: 2px solid var(--theme-accent, #52A8FF);
    outline-offset: 2px;
}

.detail-card.detail-card-editable .drag-handle-affordance {
    cursor: grab;
}

.page-container .detail-card {
    border-radius: max(16px, var(--theme-card-radius, var(--theme-button-radius, 16px)));
}

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-gray-100::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-1\.5::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.file\:text-xs::file-selector-button {
  font-size: 0.75rem;
  line-height: 1rem;
}

.file\:font-semibold::file-selector-button {
  font-weight: 600;
}

.file\:text-gray-700::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-0::before {
  content: var(--tw-content);
  inset: 0px;
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:left-\[2px\]::after {
  content: var(--tw-content);
  left: 2px;
}

.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}

.after\:h-3\.5::after {
  content: var(--tw-content);
  height: 0.875rem;
}

.after\:h-4::after {
  content: var(--tw-content);
  height: 1rem;
}

.after\:w-3\.5::after {
  content: var(--tw-content);
  width: 0.875rem;
}

.after\:w-4::after {
  content: var(--tw-content);
  width: 1rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

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

.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:border-\[color\:var\(--theme-accent\2c \#52A8FF\)\]:hover {
  border-color: var(--theme-accent,#52A8FF);
}

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

.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-darker:hover {
  --tw-border-opacity: 1;
  border-color: rgb(76 99 255 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-darkest\/30:hover {
  border-color: rgb(31 59 255 / 0.3);
}

.hover\:border-purple-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.hover\:border-red-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2);
}

.hover\:border-white\/\[0\.1\]:hover {
  border-color: rgb(255 255 255 / 0.1);
}

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

.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-black\/80:hover {
  background-color: rgb(0 0 0 / 0.8);
}

.hover\:bg-black\/\[0\.03\]:hover {
  background-color: rgb(0 0 0 / 0.03);
}

.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-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-gray-200\/70:hover {
  background-color: rgb(229 231 235 / 0.7);
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / 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-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / 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-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-darker:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(76 99 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 49 214 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-lighter:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(211 217 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-lightest:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-lightest\/50:hover {
  background-color: rgb(238 241 255 / 0.5);
}

.hover\:bg-purple-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100\/70:hover {
  background-color: rgb(254 226 226 / 0.7);
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.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-sky-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / 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-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / 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\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}

.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}

.hover\:bg-white\/\[0\.04\]:hover {
  background-color: rgb(255 255 255 / 0.04);
}

.hover\:bg-white\/\[0\.05\]:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}

.hover\:bg-opacity-50:hover {
  --tw-bg-opacity: 0.5;
}

.hover\:from-primary-darkest:hover {
  --tw-gradient-from: #1F3BFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 59 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-primary-darker:hover {
  --tw-gradient-to: #4C63FF var(--tw-gradient-to-position);
}

.hover\:text-\[var\(--theme-accent\2c \#52A8FF\)\]:hover {
  color: var(--theme-accent,#52A8FF);
}

.hover\:text-amber-800:hover {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

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

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-darker:hover {
  --tw-text-opacity: 1;
  color: rgb(76 99 255 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-darkest:hover {
  --tw-text-opacity: 1;
  color: rgb(31 59 255 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-hover:hover {
  --tw-text-opacity: 1;
  color: rgb(24 49 214 / var(--tw-text-opacity, 1));
}

.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

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

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

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

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:file\:bg-gray-200::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.focus\:border-accent-darker:focus {
  --tw-border-opacity: 1;
  border-color: rgb(255 197 156 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

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

.focus\:border-gray-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.focus\:border-gray-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-base:focus {
  --tw-border-opacity: 1;
  border-color: rgb(140 155 255 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-darker:focus {
  --tw-border-opacity: 1;
  border-color: rgb(76 99 255 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-darkest:focus {
  --tw-border-opacity: 1;
  border-color: rgb(31 59 255 / var(--tw-border-opacity, 1));
}

.focus\:border-red-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:bg-gray-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.focus\:text-gray-600:focus {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-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-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-base:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(140 155 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-darkest:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 59 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 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-\[var\(--theme-accent\2c \#52A8FF\)\]:focus-visible {
  --tw-ring-color: var(--theme-accent,#52A8FF);
}

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

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.active\:bg-gray-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.active\:bg-red-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

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

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

.disabled\:cursor-wait:disabled {
  cursor: wait;
}

.disabled\:no-underline:disabled {
  text-decoration-line: none;
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:shadow-none:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.group:hover .group-hover\:max-h-16 {
  max-height: 4rem;
}

.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\:bg-black\/15 {
  background-color: rgb(0 0 0 / 0.15);
}

.group:hover .group-hover\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-darkest {
  --tw-text-opacity: 1;
  color: rgb(31 59 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-hover {
  --tw-text-opacity: 1;
  color: rgb(24 49 214 / var(--tw-text-opacity, 1));
}

.group\/child:hover .group-hover\/child\:opacity-100 {
  opacity: 1;
}

.group\/img:hover .group-hover\/img\:opacity-100 {
  opacity: 1;
}

.group\/og:hover .group-hover\/og\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.peer:checked ~ .peer-checked\:bg-primary-darkest {
  --tw-bg-opacity: 1;
  background-color: rgb(31 59 255 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-\[14px\]::after {
  content: var(--tw-content);
  --tw-translate-x: 14px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.peer:focus ~ .peer-focus\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-primary-base {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(140 155 255 / var(--tw-ring-opacity, 1));
}

.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:animate-\[fadeIn_0\.2s_ease-out\] {
    animation: fadeIn 0.2s ease-out;
  }

  .motion-safe\:animate-\[slideUp_0\.3s_cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\] {
    animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1);
  }

  @keyframes fade-in {

    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .motion-safe\:animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }

  @keyframes slide-up {

    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }
  }

  .motion-safe\:animate-slide-up {
    animation: slide-up 0.3s ease-out;
  }

  @keyframes spin {

    to {
      transform: rotate(360deg);
    }
  }

  .motion-safe\:animate-spin {
    animation: spin 1s linear infinite;
  }

  .motion-safe\: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);
  }

  .motion-safe\:active\:translate-y-0:active {
    --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 .motion-safe\:group-hover\: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);
  }
}

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:transform-none {
    transform: none;
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

@media (min-width: 640px) {

  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .sm\:bottom-auto {
    bottom: auto;
  }

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

  .sm\:right-auto {
    right: auto;
  }

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

  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .sm\:ml-4 {
    margin-left: 1rem;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:w-\[34\%\] {
    width: 34%;
  }

  .sm\:w-\[calc\(33\.333\%-\$\{thirdOffset\}rem\)\] {
    width: calc(33.333% - ${thirdOffset}rem);
  }

  .sm\:w-\[calc\(50\%-\$\{halfOffset\}rem\)\] {
    width: calc(50% - ${halfOffset}rem);
  }

  .sm\:w-full {
    width: 100%;
  }

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

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

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

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

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

  @keyframes fade-in {

    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .sm\:animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }

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

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

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

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

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

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

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

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

  .sm\:p-0 {
    padding: 0px;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:align-middle {
    vertical-align: middle;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 768px) {

  .md\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

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

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[calc\(100vh-2rem\)\] {
    height: calc(100vh - 2rem);
  }

  .md\:max-h-none {
    max-height: none;
  }

  .md\:w-\[24rem\] {
    width: 24rem;
  }

  @keyframes slide-in-right {

    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0);
    }
  }

  .md\:animate-slide-in-right {
    animation: slide-in-right 0.25s ease-out;
  }

  .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\:items-center {
    align-items: center;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

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

  .md\:border {
    border-width: 1px;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .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\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (prefers-color-scheme: dark) {

  .dark\:\!border-neutral-700 {
    --tw-border-opacity: 1 !important;
    border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)) !important;
  }

  .dark\:border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }

  .dark\:border-neutral-600 {
    --tw-border-opacity: 1;
    border-color: rgb(82 82 82 / var(--tw-border-opacity, 1));
  }

  .dark\:border-neutral-700 {
    --tw-border-opacity: 1;
    border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-800\/60 {
    border-color: rgb(153 27 27 / 0.6);
  }

  .dark\:border-red-900\/40 {
    border-color: rgb(127 29 29 / 0.4);
  }

  .dark\:border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
  }

  .dark\:\!bg-neutral-800 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)) !important;
  }

  .dark\:bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-800\/50 {
    background-color: rgb(31 41 55 / 0.5);
  }

  .dark\:bg-gray-800\/60 {
    background-color: rgb(31 41 55 / 0.6);
  }

  .dark\:bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-indigo-900\/40 {
    background-color: rgb(49 46 129 / 0.4);
  }

  .dark\:bg-neutral-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-neutral-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-neutral-900\/80 {
    background-color: rgb(23 23 23 / 0.8);
  }

  .dark\:bg-primary-darkest\/10 {
    background-color: rgb(31 59 255 / 0.1);
  }

  .dark\:bg-red-900\/20 {
    background-color: rgb(127 29 29 / 0.2);
  }

  .dark\:bg-red-950\/40 {
    background-color: rgb(69 10 10 / 0.4);
  }

  .dark\:bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-800\/70 {
    background-color: rgb(30 41 59 / 0.7);
  }

  .dark\:bg-slate-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-violet-900\/40 {
    background-color: rgb(76 29 149 / 0.4);
  }

  .dark\:bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
  }

  .dark\:from-slate-800\/40 {
    --tw-gradient-from: rgb(30 41 59 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:to-slate-800\/20 {
    --tw-gradient-to: rgb(30 41 59 / 0.2) var(--tw-gradient-to-position);
  }

  .dark\:fill-neutral-200 {
    fill: #e5e5e5;
  }

  .dark\:text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  }

  .dark\:text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }

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

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

  .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }

  .dark\:text-indigo-300 {
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1));
  }

  .dark\:text-neutral-200 {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity, 1));
  }

  .dark\:text-neutral-400 {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity, 1));
  }

  .dark\:text-neutral-500 {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity, 1));
  }

  .dark\:text-primary-base {
    --tw-text-opacity: 1;
    color: rgb(140 155 255 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-400\/80 {
    color: rgb(248 113 113 / 0.8);
  }

  .dark\:text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  }

  .dark\:text-violet-300 {
    --tw-text-opacity: 1;
    color: rgb(196 181 253 / var(--tw-text-opacity, 1));
  }

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

  .dark\:ring-gray-600 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity, 1));
  }

  .dark\:ring-slate-800 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity, 1));
  }

  .dark\:ring-white\/10 {
    --tw-ring-color: rgb(255 255 255 / 0.1);
  }

  .dark\:file\:bg-gray-800::file-selector-button {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:file\:text-gray-200::file-selector-button {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-neutral-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-slate-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
  }

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

  .dark\:hover\:text-neutral-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-neutral-300:hover {
    --tw-text-opacity: 1;
    color: rgb(212 212 212 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-slate-200:hover {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:file\:bg-gray-700::file-selector-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:focus\:bg-neutral-800:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
  }

  .dark\:focus\:text-neutral-300:focus {
    --tw-text-opacity: 1;
    color: rgb(212 212 212 / var(--tw-text-opacity, 1));
  }
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
  border-radius: 9999px;
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-300::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {

  .dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
  }
}

.\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-100::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {

  .dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
  }
}

.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
  width: 0.5rem;
}

.\[\&\>svg\]\:h-auto>svg {
  height: auto;
}

.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}
/* Consent banner: flat, matches the homepage (white, black ink, DM Sans).
   Accept and Reject share one rule on purpose. */
.dp-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30; /* above page content, below the editor bars, sheets and modals (z-50+) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  /* iPhone screens curve at the bottom corners. The page doesn't opt into
     viewport-fit=cover, so env(safe-area-inset-*) is 0 there; keep at least
     24px below and 20px beside the buttons so they clear the curve either way. */
  padding: 12px max(20px, env(safe-area-inset-right)) max(24px, calc(12px + env(safe-area-inset-bottom)))
    max(20px, env(safe-area-inset-left));
  background: #fff;
  color: #000;
  border-top: 1px solid #e5e5e5;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  animation: dp-consent-in 0.2s ease-out;
}
.dp-consent-text { margin: 0; max-width: 640px; }
.dp-consent-text a { color: #1f3bff; text-decoration: underline; }
.dp-consent-actions { display: flex; gap: 8px; }
.dp-consent-btn {
  min-height: 40px;
  min-width: 140px;
  padding: 8px 16px;
  border: 1.5px solid #000;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dp-consent-btn:hover { background: #f4f4f4; }
.dp-consent-btn:focus-visible,
.dp-consent-text a:focus-visible { outline: 2px solid #1f3bff; outline-offset: 2px; }
@media (max-width: 520px) {
  .dp-consent { font-size: 13px; padding-top: 10px; }
  .dp-consent-actions { width: 100%; }
  .dp-consent-btn { flex: 1; min-width: 0; }
}
@keyframes dp-consent-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dp-consent { animation: none; }
}

/* "Cookie settings" link-buttons in footers */
.dp-cookie-settings {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Flat homepage styles, scoped under .fh-root so nothing leaks into the rest
   of the Tailwind SPA. Design rules: white background, black text, one
   cobalt accent used sparingly. No gradients, no blur, no drop shadows. */

/* Bricolage Grotesque (600-800) + DM Sans (400-700) are self-hosted — see
   wwwroot/fonts/fonts.css, loaded once globally from _Layout.cshtml. No
   per-page @import: that would be a second request to Google on every
   homepage view, which is exactly what self-hosting avoids. */

.fh-root, .fh-root * { box-sizing: border-box; }
.fh-root {
  --ink: #000000;
  --bg: #FFFFFF;
  --accent: #1F3BFF; /* keep in step with tailwind primary.darkest */
  --accent-hover: #1831D6; /* keep in step with tailwind primary.hover */
  --accent-tint: #EEF1FF;
  --muted: #545454;
  --border: #E5E5E5;
  --display-font: 'Bricolage Grotesque', system-ui, sans-serif;
  --body-font: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  overflow-x: hidden;
  width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .fh-root { scroll-behavior: smooth; }
}

.fh-wrap {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .fh-wrap { padding: 0 24px; }
}

.fh-root a, .fh-root button, .fh-root input { font-family: inherit; }
.fh-root a:focus-visible,
.fh-root button:focus-visible,
.fh-root input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- hero ---------- */
.fh-hero { padding: 48px 0 56px; }
.fh-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .fh-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* Grid items default to min-width:auto, which sizes them to their content's
   min-content width — a flex row of three 390px-wide sample cards has a huge
   min-content, so without this the grid blows out past the viewport (both
   columns widen to fit it, squeezing the copy column and overflowing the
   page horizontally on mobile). min-width: 0 lets each column shrink to its
   actual track size instead. */
.fh-hero-copy, .fh-hero-showcase { min-width: 0; }

.fh-hero-h1 {
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.fh-hero-sub {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 18px;
  max-width: 54ch;
}

.fh-claim { margin-top: 32px; max-width: 420px; }
.fh-claim-row {
  display: flex;
  align-items: center;
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.fh-claim-row:focus-within { border-color: var(--accent); }
.fh-claim-prefix {
  padding-left: 16px;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
}
.fh-claim-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 15px 8px;
  font-size: 16px;
  color: var(--ink);
}
.fh-claim-input::placeholder { color: #9A9A9A; }
.fh-claim-status { padding-right: 14px; display: flex; align-items: center; min-height: 44px; }
.fh-claim-taken { font-size: 13px; color: #C81E3A; }

.fh-claim-msg { margin-top: 8px; font-size: 14px; }
.fh-claim-msg.err { color: #C81E3A; }
.fh-claim-msg.muted { color: var(--muted); }

.fh-claim-btn {
  width: 100%;
  margin-top: 14px;
  padding: 15px 20px;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.fh-claim-btn:disabled { cursor: not-allowed; }
.fh-claim-btn:hover:not(:disabled) { background: var(--accent-hover); }

.fh-claim-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 13px;
}
.fh-claim-sep::before, .fh-claim-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.fh-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  min-height: 48px;
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.fh-google-btn:hover { border-color: #ACACAC; }

.fh-signin { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.fh-signin a { color: var(--accent); text-decoration: none; }
.fh-signin a:hover { text-decoration: underline; }

.fh-plan-line { margin-top: 20px; font-size: 13.5px; color: var(--muted); }

/* ---------- showcase ---------- */
.fh-showcase-row { display: flex; gap: 16px; }
.fh-showcase-item { flex: 1 1 0; min-width: 0; }
.fh-showcase-card {
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg);
}
.fh-showcase-caption { margin-top: 12px; padding: 0 2px; }
.fh-showcase-theme { font-weight: 600; font-size: 14.5px; }
.fh-showcase-for { color: var(--muted); font-size: 13px; margin-top: 2px; }
.fh-showcase-note { margin-top: 20px; color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .fh-showcase-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .fh-showcase-item { flex: 0 0 74vw; max-width: 300px; scroll-snap-align: start; }
}

/* ---------- capabilities ---------- */
.fh-section { padding: 56px 0; }
.fh-section h2 {
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -0.01em;
}
.fh-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin-top: 32px;
}
@media (max-width: 720px) {
  .fh-cap-grid { grid-template-columns: 1fr; }
}
.fh-cap-row { display: flex; gap: 14px; align-items: flex-start; }
.fh-cap-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fh-cap-title { font-weight: 700; font-size: 16px; }
.fh-cap-desc { color: var(--muted); font-size: 14.5px; margin-top: 4px; line-height: 1.55; max-width: 44ch; }

/* ---------- start buttons and closing call to action ---------- */
.fh-start-btn {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.fh-start-btn:hover { background: var(--accent-hover); }
.fh-start-btn.secondary {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.fh-start-btn.secondary:hover { background: rgba(31, 59, 255, 0.07); }
.fh-cap-tag { margin-left: 8px; font-size: 12px; color: var(--muted); opacity: 0.85; white-space: nowrap; }
.fh-cta-band { background: #F6F7FB; border-radius: 24px; padding: 40px 28px; }
.fh-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.fh-cta-actions .fh-start-btn { margin-top: 20px; }
.fh-cta-link { margin-top: 20px; font-size: 14px; color: var(--muted); text-decoration: underline; }
.fh-cta-link:hover { color: inherit; }

/* ---------- FAQ ---------- */
.fh-faq-list { margin-top: 8px; }
.fh-faq-row { border-top: 1px solid var(--border); }
.fh-faq-row:last-child { border-bottom: 1px solid var(--border); }
.fh-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.fh-faq-q .question { font-weight: 600; font-size: 15.5px; }
.fh-faq-chevron { color: var(--muted); flex-shrink: 0; transition: transform 0.15s ease; }
.fh-faq-q[aria-expanded="true"] .fh-faq-chevron { transform: rotate(180deg); }
.fh-faq-a { padding: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 65ch; }

/* ---------- price comparison (linktree-alternative only) ---------- */
.fh-price-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .fh-price-compare { grid-template-columns: 1fr; }
}
.fh-price-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
}
.fh-price-card.us { border-color: var(--accent); background: var(--accent-tint); }
.fh-price-card-label { color: var(--muted); font-size: 14px; font-weight: 600; }
.fh-price-card-amount {
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.fh-price-card-period { color: var(--muted); font-size: 13px; }
.fh-price-card-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.fh-price-card-notes span { font-size: 12.5px; color: var(--muted); }
.fh-price-card.us .fh-price-card-notes span { color: var(--ink); }

/* ---------- feature comparison table ---------- */
.fh-compare-wrap {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 8px;
  overflow-x: auto;
}
.fh-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.fh-compare-table thead tr { background: #F6F7FB; }
.fh-compare-table th {
  text-align: center;
  padding: 14px 12px;
  font-weight: 700;
  font-family: var(--display-font);
}
.fh-compare-table th:first-child, .fh-compare-table td:first-child { text-align: left; }
.fh-compare-table th .fh-compare-sub { display: block; font-family: var(--body-font); font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fh-compare-table td { padding: 12px; text-align: center; vertical-align: top; }
.fh-compare-table tbody tr { border-top: 1px solid var(--border); }
.fh-compare-feature { font-weight: 500; }
.fh-compare-note { display: block; font-size: 11px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.fh-compare-tick { color: var(--accent); }
.fh-compare-cross { color: #B8B8B8; }
.fh-compare-limited { color: var(--muted); font-size: 12px; font-style: italic; }
.fh-compare-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  vertical-align: middle;
}
.fh-compare-caption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .fh-root, .fh-root * { transition: none !important; animation: none !important; }
}

/* Sign-in, sign-up and onboarding in the homepage's flat style. Scoped under
   .fh-root (tokens and fonts come from flowline.css): white page, black ink,
   one cobalt accent, Bricolage headings over DM Sans. No cards, gradients or
   drop shadows; the form sits on the page, left-aligned. */

.fh-root.fh-page {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.fh-form-page {
  width: min(460px, 100%);
  margin: 0 auto;
  /* Clears the floating menu button (fixed, top right) on phones. */
  padding: 68px 16px 72px;
}
.fh-form-page.wide { width: min(640px, 100%); }
@media (min-width: 640px) {
  .fh-form-page { padding-top: 72px; }
}

.fh-form-h1 {
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.fh-form-h2 {
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(24px, 4.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fh-form-lede {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 52ch;
}

.fh-form { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }

.fh-label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 6px;
}
.fh-input,
.fh-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.fh-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.fh-input::placeholder,
.fh-textarea::placeholder { color: #9A9A9A; }
.fh-root .fh-input:focus,
.fh-root .fh-textarea:focus,
.fh-root .fh-input:focus-visible,
.fh-root .fh-textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  outline: none;
}
.fh-input[aria-invalid="true"] { border-color: #C81E3A; }

/* An input with a fixed prefix, like the homepage claim box. */
.fh-prefixed {
  display: flex;
  align-items: center;
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.fh-prefixed:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fh-prefixed-prefix {
  padding-left: 14px;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
}
.fh-root .fh-prefixed input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 12px 14px 12px 2px;
  min-height: 46px;
  font-size: 16px;
  color: var(--ink);
}

.fh-help { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.fh-help.ok { color: #1F8A4C; }
.fh-help.err { color: #C81E3A; }

.fh-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fh-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.fh-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.fh-link { color: var(--accent); text-decoration: none; font-size: 14.5px; }
.fh-link:hover { text-decoration: underline; }

.fh-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.fh-btn:hover:not(:disabled) { background: var(--accent-hover); }
.fh-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fh-btn.auto { width: auto; }

.fh-btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 4px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.fh-btn-quiet:hover { color: var(--ink); }

.fh-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.fh-btn-outline:hover { border-color: #ACACAC; }

.fh-google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Apple's sign-in button is black by Apple's rules, so its logo goes white. */
.fh-google-btn.fh-apple-btn { background: #000; color: #fff; border-color: #000; }
.fh-google-btn.fh-apple-btn:hover { background: #1A1A1A; }
.fh-google-btn.fh-apple-btn svg path { fill: #fff; }

.fh-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.fh-sep::before, .fh-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.fh-notice {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: #12218F;
  font-size: 14.5px;
  line-height: 1.5;
}
.fh-errors {
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDF2F4;
  color: #A3122C;
  font-size: 14.5px;
  line-height: 1.5;
}
.fh-errors ul { margin: 0; padding-left: 18px; list-style: disc; }

.fh-below { margin-top: 24px; font-size: 14.5px; color: var(--muted); }

/* Onboarding progress: four quiet segments, the current step in the accent. */
.fh-progress { display: flex; gap: 6px; }
.fh-progress span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.fh-progress span.done { background: var(--ink); }
.fh-progress span.current { background: var(--accent); }
.fh-progress-label { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

.fh-step-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fh-step-actions .fh-btn { width: auto; min-width: 140px; }

/* Onboarding's last step: what's about to go live. */
.fh-summary { margin-top: 20px; border-top: 1px solid var(--border); }
.fh-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.fh-summary dt { color: var(--muted); }
.fh-summary dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* App pages inside SiteLayout (dashboard, analytics, settings, pricing,
   discover): page titles in the homepage's display face. Section headings
   (h2/h3) keep the body face so dense screens stay calm. */
.fh-app h1 {
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* The app pages used two gradient helpers meant for themed pages; with no
   page theme they fell back to the old sky blue. On app pages: titles are
   plain ink, primary buttons flat cobalt. */
.fh-app .accent-gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
.fh-app h1.accent-gradient-text,
.fh-app h2.accent-gradient-text {
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.fh-app .btn-accent-lift {
  background: var(--accent);
  box-shadow: none;
}
.fh-app .btn-accent-lift:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: none;
}

/* Immersive theme engine — atmosphere, kinetic headings and depth for the
   token-driven "wow" themes (Flowline / Studio / Calm / Editorial). Everything
   is scoped under a `.theme-<key>` / `.theme-kinetic` class set by
   applyThemeToPage, so plain presets and existing pages are untouched. All
   motion is gated behind prefers-reduced-motion. */

/* ---- per-theme kinetic heading gradient ---- */
.page-container.theme-flowline  { --theme-grad: linear-gradient(105deg, #52A8FF, #78C2CE 38%, #FFB07F 72%, #8B5CF6); }
.page-container.theme-studio    { --theme-grad: linear-gradient(105deg, #C084FC, #818CF8 50%, #F472B6); }
.page-container.theme-calm      { --theme-grad: linear-gradient(105deg, #8B7FC7, #9FC0E8 50%, #E2A6C4); }
.page-container.theme-editorial { --theme-grad: linear-gradient(105deg, #221E1A, #B0532E); }

/* kinetic page title (applied to the profile name <h1> via .page-title-kinetic) */
.theme-kinetic .page-title-kinetic {
  background-image: var(--theme-grad, linear-gradient(105deg, var(--theme-accent), var(--theme-accent)));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-kinetic .page-title-kinetic { animation: pageKineticSweep 9s ease-in-out infinite; }
}
@keyframes pageKineticSweep {
  0%, 100% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- depth: give detail cards the theme's elevation ---- */
.page-container.theme-kinetic .detail-card,
.page-container.theme-kinetic .unified-container {
  box-shadow: var(--theme-depth-shadow, 0 6px 18px -12px rgba(20, 60, 110, 0.12));
}

/* ---- atmosphere backdrop ---- */
/* z-index:-1 keeps it behind content (which paints naturally above) yet above
   the container's background fill, scoped by .page-container's stacking context.
   This replaces the old "promote every content child to position:relative"
   trick, which also clobbered fixed overlays like the theme drawer. */
.page-atmo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* orbs (Flowline) */
.page-atmo-orbs .ao { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; }
.theme-flowline .page-atmo-orbs .ao1 { width: 46vw; height: 46vw; left: -8vw; top: 2vh; background: radial-gradient(circle, #52A8FF, transparent 70%); }
.theme-flowline .page-atmo-orbs .ao2 { width: 42vw; height: 42vw; right: -6vw; top: 16vh; background: radial-gradient(circle, #78C2CE, transparent 70%); }
.theme-flowline .page-atmo-orbs .ao3 { width: 50vw; height: 50vw; left: 4vw; top: 58vh; background: radial-gradient(circle, #FFB07F, transparent 70%); }
.theme-flowline .page-atmo-orbs .ao4 { width: 44vw; height: 44vw; right: 0; top: 84vh; background: radial-gradient(circle, #8B5CF6, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .page-atmo-orbs .ao1 { animation: atmoDriftA 24s ease-in-out infinite; }
  .page-atmo-orbs .ao2 { animation: atmoDriftB 28s ease-in-out infinite; }
  .page-atmo-orbs .ao3 { animation: atmoDriftA 32s ease-in-out infinite; }
  .page-atmo-orbs .ao4 { animation: atmoDriftB 26s ease-in-out infinite; }
}

/* aurora (Studio) — saturated rotating glow on the dark canvas */
.page-atmo-aurora .aa { position: absolute; border-radius: 50%; filter: blur(85px); opacity: 0.55; }
.page-atmo-aurora .aa1 { width: 80vw; height: 80vw; left: -20vw; top: -10vh; background: radial-gradient(circle, #7C3AED, transparent 65%); }
.page-atmo-aurora .aa2 { width: 70vw; height: 70vw; right: -18vw; top: 40vh; background: radial-gradient(circle, #DB2777, transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .page-atmo-aurora .aa1 { animation: atmoSpin 60s linear infinite; transform-origin: 60% 40%; }
  .page-atmo-aurora .aa2 { animation: atmoSpin 80s linear infinite reverse; transform-origin: 40% 60%; }
}

/* mesh (Calm) — gentle pastel drift */
.page-atmo-mesh .am { position: absolute; border-radius: 50%; filter: blur(75px); opacity: 0.5; }
.page-atmo-mesh .am1 { width: 55vw; height: 55vw; left: -10vw; top: -5vh; background: radial-gradient(circle, #C7D6F5, transparent 70%); }
.page-atmo-mesh .am2 { width: 50vw; height: 50vw; right: -8vw; top: 30vh; background: radial-gradient(circle, #F2D9EC, transparent 70%); }
.page-atmo-mesh .am3 { width: 52vw; height: 52vw; left: 10vw; top: 70vh; background: radial-gradient(circle, #FBE6D4, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .page-atmo-mesh .am1 { animation: atmoDriftA 30s ease-in-out infinite; }
  .page-atmo-mesh .am2 { animation: atmoDriftB 34s ease-in-out infinite; }
  .page-atmo-mesh .am3 { animation: atmoDriftA 38s ease-in-out infinite; }
}

@keyframes atmoDriftA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, 4%) scale(1.1); } }
@keyframes atmoDriftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 5%) scale(1.12); } }
@keyframes atmoSpin { to { transform: rotate(360deg); } }

/* ---- Social icon colour mode ----
   Default (no class) = monochrome: icons inherit the theme text colour (set
   inline on the element). The 'brand' mode renders the real brand colour on a
   white contrast chip so the actual app colours read on any backdrop. The
   per-icon brand hex arrives as the inline --brand custom property; we override
   colour with !important to beat the inline mono fallback. */
.page-container.icons-brand .social-icon-link {
  background: #ffffff;
  color: var(--brand, var(--theme-text-primary, #1F2937)) !important;
  box-shadow: 0 2px 9px -3px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.page-container.icons-brand .social-icon-link:hover {
  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.page-container.icons-brand .social-tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--brand, var(--theme-text-primary, #1F2937)) !important;
  box-shadow: 0 2px 9px -3px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Social detail-card icons follow the icon colour mode too, so the choice is
   consistent across every social surface — row, tile and full card. Plain
   (theme text colour) by default; the real brand colour in brand mode. Only
   social/brand platforms carry .social-card-icon, so non-social detail icons
   (Event, Menu, …) keep their per-type colour. */
.page-container:not(.icons-brand) .social-card-icon {
  color: var(--theme-text-primary, #1F2937) !important;
}
.page-container.icons-brand .social-card-icon {
  color: var(--brand, currentColor) !important;
}

/* ---- Generic atmosphere + kinetic gradient (vibe presets, #47) ----
   So the orbs atmosphere and kinetic headings work on ANY theme/vibe, not just
   the token themes. The per-theme rules earlier out-specify these (keeping their
   hand-tuned palettes); every other theme falls back to accent-derived colour. */
.page-container {
  --theme-grad: linear-gradient(105deg, var(--theme-accent, #52A8FF), color-mix(in srgb, var(--theme-accent, #52A8FF) 55%, #8B5CF6));
}
.page-atmo-orbs .ao1 { width: 46vw; height: 46vw; left: -8vw; top: 2vh;  background: radial-gradient(circle, var(--theme-accent, #52A8FF), transparent 70%); }
.page-atmo-orbs .ao2 { width: 42vw; height: 42vw; right: -6vw; top: 16vh; background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #52A8FF) 60%, #FFFFFF), transparent 70%); }
.page-atmo-orbs .ao3 { width: 50vw; height: 50vw; left: 4vw;  top: 58vh; background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #52A8FF) 55%, #8B5CF6), transparent 70%); }
.page-atmo-orbs .ao4 { width: 44vw; height: 44vw; right: 0;   top: 84vh; background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #52A8FF) 65%, #78C2CE), transparent 70%); }

/* ---- Flat theme engine (#flat-themes) ----
   Flat themes (background.flat === true) set `theme-flat` on .page-container
   via applyThemeToPage and deliberately DON'T set theme-kinetic / theme-<key>,
   so every rule above this point already doesn't fire for them. These rules
   are the belt-and-braces layer for the few things that are driven by data
   rather than those classes — e.g. the Effects tab's "vibe" presets can still
   write a `tokens` bundle onto ANY stored background, flat included, so a
   flat page must actively refuse the atmosphere/kinetic/depth it implies
   rather than merely lacking the classes that would normally draw it.

   No gradients, no blur, no glow, no card shadows — a flat theme is flat. */

/* No ambient backdrop, however it got there. */
.page-container.theme-flat .page-atmo {
  display: none;
}

/* Any gradient-clipped heading (the page title, and the few editor/eyebrow
   labels that share .accent-gradient-text) renders as plain solid text in the
   theme's own colour — no gradient fill, no shimmer. */
.page-container.theme-flat .page-title-kinetic,
.page-container.theme-flat .accent-gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--theme-text-primary, #111827);
}

/* The page title additionally picks up the theme's display face — this is
   the one heading that's meant to carry a flat theme's typographic identity. */
.page-container.theme-flat .page-title-kinetic {
  font-family: var(--theme-font-display, inherit);
  font-weight: var(--theme-display-weight, 700);
  font-stretch: var(--theme-display-stretch, normal);
  animation: none;
}

/* No depth: flat cards sit flush with the page, at the theme's own corner
   radius. `:not(.social-tile)` keeps the fixed compact icon-tile radius
   (themes.css) carved out, same as every other theme. The explicit
   border-radius also beats index.css's `max(16px, …)` floor on .detail-card
   (added so immersive themes always read as "soft, modern surfaces"), which
   would otherwise round Stage/Studio's intentionally tight corners up to
   16px regardless of their 4px / 6px radius. */
.page-container.theme-flat .detail-card:not(.social-tile),
.page-container.theme-flat .unified-container {
  border-radius: var(--theme-card-radius, 12px);
  box-shadow: none;
}

.page-container.theme-flat .detail-card.detail-card-clickable:hover {
  box-shadow: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Page layout: header, section headings and link rows.

   Built on the theme contract set by applyThemeToPage (themeUtils.js):
     --theme-font-display, --theme-font-body, --theme-display-weight,
     --theme-display-stretch, --theme-radius, --theme-block, --theme-on-block,
     --theme-line
   plus the long-standing --theme-text-*, --theme-card, --theme-accent.
   Every use has a fallback, so older (non-flat) themes render sensibly too.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Header: left-aligned, the name set large in the theme's display face ── */
.page-container .page-header .page-title {
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700);
    font-stretch: var(--theme-display-stretch, normal);
    font-size: clamp(2.4rem, 9vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}
.page-container .page-header .page-bio {
    font-family: var(--theme-font-body, inherit);
    font-size: 1.0625rem;
    line-height: 1.5;
    max-width: 36ch;
    margin: 0;
}

.page-container .page-avatar {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 9999px;
    flex-shrink: 0;
}
.page-container.theme-flat .page-avatar {
    border-radius: var(--theme-radius, 12px);
}
/* Editor: the avatar's button carries the same shape so its focus ring fits. */
.page-container .editor-avatar-button {
    border-radius: 9999px;
}
.page-container.theme-flat .editor-avatar-button {
    border-radius: var(--theme-radius, 12px);
}
.page-container .page-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-block, var(--theme-accent, #3D95E8));
    color: var(--theme-on-block, #FFFFFF);
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700);
    font-stretch: var(--theme-display-stretch, normal);
    font-size: 1.75rem;
}
.page-container .page-avatar--initials span {
    color: inherit;
}

/* Editor: the in-place title and bio use the same faces as the page. */
.page-container textarea.edit-inline-field.is-title {
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700) !important;
    font-stretch: var(--theme-display-stretch, normal);
    letter-spacing: -0.015em;
}
.page-container textarea.edit-inline-field.is-bio {
    font-family: var(--theme-font-body, inherit);
}

/* ── Section headings: a real heading in the creator's own casing ── */
.page-container .section-heading-title {
    margin: 0;
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700);
    font-stretch: var(--theme-display-stretch, normal);
    font-size: 1.625rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--theme-text-primary, #1F2937);
    text-transform: none;
}
.page-container .section-heading-subtitle {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--theme-text-secondary, #6B7280);
}
/* The editor's rename control is a button that looks like the heading. */
.page-container .section-heading-title--edit {
    background: none;
    border: 0;
    padding: 0;
    cursor: text;
}

/* ── Social icons: left-aligned, on the theme's surface ── */
.page-container .social-icon-row {
    justify-content: flex-start;
}
.page-container.theme-flat .social-icon-link {
    width: 44px;
    height: 44px;
    border-radius: var(--theme-radius, 12px);
    background: var(--theme-card, rgba(0, 0, 0, 0.04));
}

/* ── Link rows ──
   A run of plain links shares one surface: rounded only at the ends, a 1px
   divider between rows, the title left-aligned with a chevron on the right. */
.page-container .link-rows {
    border-radius: var(--theme-radius, var(--theme-card-radius, 14px));
    background: var(--theme-card, rgba(255, 255, 255, 0.62));
    overflow: hidden;
}
.page-container .link-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 8px 16px;
    box-sizing: border-box;
    color: var(--theme-text-primary, #1F2937);
    text-decoration: none;
    font-family: var(--theme-font-body, inherit);
    transition: background-color 0.15s ease;
}
.page-container .link-rows > * + * .link-row {
    border-top: 1px solid var(--theme-line, var(--theme-border, rgba(0, 0, 0, 0.08)));
}
.page-container .link-row-title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    color: inherit;
}
.page-container .link-row-sub {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--theme-text-secondary, #6B7280);
}
.page-container .link-row-icon {
    color: currentColor;
}
.page-container.icons-brand .link-row-icon {
    color: var(--brand, currentColor);
}
.page-container .link-row-chevron {
    color: var(--theme-text-secondary, #6B7280);
}
@media (hover: hover) {
    .page-container a.link-row:hover {
        background: color-mix(in srgb, var(--theme-text-primary, #1F2937) 5%, transparent);
    }
}
.page-container a.link-row:focus-visible {
    outline: 2px solid var(--theme-accent, #3D95E8);
    outline-offset: -2px;
}

/* Editor: each row is its own sortable item, so a run of rows inside a section
   joins up here (cancelling the list's 12px gap) instead of in the markup. */
.page-container .link-row-item .link-row {
    background: var(--theme-card, rgba(255, 255, 255, 0.62));
    border-radius: var(--theme-radius, var(--theme-card-radius, 14px));
    cursor: pointer;
}
.page-container .reorder-group-y > .link-row-item + .link-row-item {
    margin-top: -0.75rem;
}
.page-container .reorder-group-y > .link-row-item + .link-row-item .link-row {
    border-top: 1px solid var(--theme-line, var(--theme-border, rgba(0, 0, 0, 0.08)));
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.page-container .reorder-group-y > .link-row-item:has(+ .link-row-item) .link-row {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── The bold block: the one thing that matters on the page ── */
.page-container.theme-flat .featured-block {
    background: var(--theme-block, var(--theme-accent, #3D95E8));
    color: var(--theme-on-block, #FFFFFF);
    border: 0 !important;
    border-radius: var(--theme-radius, 14px);
    box-shadow: none;
}
.page-container.theme-flat .featured-block :is(h1, h2, h3, h4, p, span:not(.preserve-color), label) {
    color: inherit;
}
.page-container.theme-flat .featured-block .featured-block-title {
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700);
    font-stretch: var(--theme-display-stretch, normal);
}
/* Inside the block, the old amber chrome steps aside for the block colours. */
.page-container.theme-flat .featured-block,
.page-container.theme-flat .featured-block [class*="from-amber"],
.page-container.theme-flat .featured-block [class*="bg-amber"] {
    background-image: none !important;
}
.page-container.theme-flat .featured-block [class*="bg-amber-100"] {
    background-color: color-mix(in srgb, var(--theme-on-block, #FFFFFF) 16%, transparent) !important;
}
.page-container.theme-flat .featured-block [class*="text-amber"] {
    color: inherit !important;
}

/* ── Events ──
   On flat themes an event card is the card: the generic detail wrapper around
   it steps back (no card inside a card), and the type label goes. */
.page-container.theme-flat .detail-card--bare {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.page-container.theme-flat .event-card {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--theme-radius, 16px);
    background: var(--theme-card, var(--theme-surface)) !important;
}
.page-container.theme-flat .event-card .event-type-label {
    display: none;
}
.page-container.theme-flat .event-card .event-title {
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700);
    font-stretch: var(--theme-display-stretch, normal);
    font-size: 1.375rem;
    line-height: 1.05;
}
/* The page's main event is the bold block: the card's own theme variables are
   re-pointed at the block colours, so its date chip, buttons and text follow. */
.page-container.theme-flat .event-card--block {
    --theme-surface: var(--theme-block);
    --theme-card: var(--theme-block);
    --theme-text-primary: var(--theme-on-block);
    --theme-text-secondary: color-mix(in srgb, var(--theme-on-block) 78%, var(--theme-block));
    --theme-accent: var(--theme-on-block);
    --theme-on-accent: var(--theme-block);
    --theme-background: color-mix(in srgb, var(--theme-on-block) 12%, var(--theme-block));
    --theme-border: color-mix(in srgb, var(--theme-on-block) 28%, transparent);
    background: var(--theme-block) !important;
    color: var(--theme-on-block);
}
.page-container.theme-flat .event-card--block :is(h4, p, span:not(.preserve-color), a, label, div) {
    color: inherit;
}
.page-container.theme-flat .event-card--block .event-title {
    font-size: 1.875rem;
}

/* ── Product lists: items as rows sharing one surface ── */
.page-container.theme-flat .product-rows {
    background: var(--theme-card, var(--theme-surface));
    border-radius: var(--theme-radius, 14px);
    overflow: hidden;
}
.page-container.theme-flat .product-rows > * + * {
    margin-top: 0 !important;
}
.page-container.theme-flat .product-row {
    border: 0 !important;
    border-radius: 0 !important;
}
.page-container.theme-flat .product-rows > * + .product-row {
    border-top: 1px solid var(--theme-line, var(--theme-border)) !important;
}
.page-container.theme-flat .product-list-title {
    font-family: var(--theme-font-display, inherit);
    font-weight: var(--theme-display-weight, 700);
    font-stretch: var(--theme-display-stretch, normal);
    font-size: 1.625rem;
    line-height: 1.05;
}
.page-container.theme-flat .product-list-cover {
    border-radius: var(--theme-radius, 16px);
}

/* Product list fold: one quiet row with the item count, above the rows. */
.page-container .product-list-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 8px 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--theme-line, var(--theme-border, rgba(0, 0, 0, 0.1)));
    color: var(--theme-text-primary, inherit);
    font-family: var(--theme-font-body, inherit);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    text-align: left;
}
.page-container .product-list-toggle-chevron {
    color: var(--theme-text-secondary, currentColor);
    transition: transform 0.15s ease;
}
.page-container .product-list-toggle[aria-expanded="true"] .product-list-toggle-chevron {
    transform: rotate(180deg);
}
.page-container .product-list-toggle:focus-visible {
    outline: 2px solid var(--theme-accent, #3D95E8);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .page-container .product-list-toggle-chevron { transition: none; }
}

/* The map pin stays the page's colour on the block (its accent there is the
   light on-block colour, which vanishes on a pale map). */
.page-container.theme-flat .event-card--block {
    --theme-map-pin: var(--theme-block);
}

/* Creator-page footer: quiet text in the page's muted colour. */
.page-container .creator-footer,
.page-container .creator-footer a,
.page-container .creator-footer span {
    color: var(--theme-text-secondary, #6B7280);
}
.page-container .theme-footer {
    border-color: var(--theme-line, var(--theme-border, rgba(0, 0, 0, 0.08)));
}

/* Editor: the add-detail action uses the page's own bold colours. */
.page-container .editor-add-detail {
    background: var(--theme-block, var(--theme-accent, #3D95E8));
    color: var(--theme-on-block, #FFFFFF);
    border-radius: var(--theme-radius, 12px);
}

/* Older (non-flat) themes draw cards as a translucent veil with a hairline
   border; on a plain white background the veil alone is invisible, so rows
   get the same hairline. In the editor, a row followed by another row drops
   its bottom edge so the join stays one line. */
.page-container:not(.theme-flat) .link-rows,
.page-container:not(.theme-flat) .link-row-item .link-row {
    border: 1px solid var(--theme-card-border, rgba(0, 0, 0, 0.08));
}
.page-container:not(.theme-flat) .reorder-group-y > .link-row-item:has(+ .link-row-item) .link-row {
    border-bottom-width: 0;
}