*, ::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 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: DM Sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    scroll-behavior: smooth;
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  
  .bg-gradient-showcase body,
  .bg-gradient-sidebar body { /* warm charcoal on light card */ /* warm gray-slate on light card */
    --foreground: 0.29 0.012 55; /* warm charcoal on light card */
    --muted-foreground: 0.5 0.012 55; /* warm gray-slate on light card */
  }

  body {
    font-family: var(--font-body);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.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-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-24 {
  bottom: -6rem;
}
.-bottom-4 {
  bottom: -1rem;
}
.-left-12 {
  left: -3rem;
}
.-left-16 {
  left: -4rem;
}
.-left-20 {
  left: -5rem;
}
.-left-full {
  left: -100%;
}
.-right-12 {
  right: -3rem;
}
.-right-24 {
  right: -6rem;
}
.-top-12 {
  top: -3rem;
}
.-top-32 {
  top: -8rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-12 {
  top: 3rem;
}
.top-14 {
  top: 3.5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[80\] {
  z-index: 80;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-auto {
  margin-top: auto;
}
.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 {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}
.aspect-car {
  aspect-ratio: 3 / 2;
}
.aspect-media {
  aspect-ratio: 16 / 10;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.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-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[calc\(100dvh-2rem\)\] {
  max-height: calc(100dvh - 2rem);
}
.max-h-none {
  max-height: none;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-12 {
  min-height: 3rem;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[10rem\] {
  min-height: 10rem;
}
.min-h-\[16rem\] {
  min-height: 16rem;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[46vh\] {
  min-height: 46vh;
}
.min-h-\[65vh\] {
  min-height: 65vh;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[26rem\] {
  width: 26rem;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-40 {
  max-width: 10rem;
}
.max-w-48 {
  max-width: 12rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[85vw\] {
  max-width: 85vw;
}
.max-w-\[calc\(100\%-1\.5rem\)\] {
  max-width: calc(100% - 1.5rem);
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.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-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --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-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --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-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-3 {
  --tw-translate-y: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --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-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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 carousel-slide {

  0% {
    opacity: 0;
    transform: translateX(18px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-carousel-slide {
  animation: carousel-slide 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fade-up {

  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes float-slow {

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

  50% {
    transform: translateY(-8px);
  }
}
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}
@keyframes marquee-scroll {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee-scroll {
  animation: marquee-scroll 40s linear infinite;
}
@keyframes pulse {

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes star-pop {

  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.28);
  }

  100% {
    transform: scale(1);
  }
}
.animate-star-pop {
  animation: star-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.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-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.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-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-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));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-tl-sm {
  border-top-left-radius: 0.125rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-accent {
  border-color: oklch(var(--accent));
}
.border-border {
  border-color: oklch(var(--border));
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  border-color: oklch(var(--primary));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-primary-foreground {
  border-top-color: oklch(var(--primary-foreground));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  background-color: oklch(var(--accent));
}
.bg-accent-foreground {
  background-color: oklch(var(--accent-foreground));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-destructive {
  background-color: oklch(var(--destructive));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  background-color: oklch(var(--muted));
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  background-color: oklch(var(--primary));
}
.bg-secondary {
  background-color: oklch(var(--secondary));
}
.bg-sidebar {
  background-color: oklch(var(--sidebar-background));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-sidebar-primary {
  background-color: oklch(var(--sidebar-primary));
}
.bg-transparent {
  background-color: transparent;
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-primary {
  --tw-gradient-from: oklch(var(--primary)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white\/60 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary));
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.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-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-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-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: DM Sans, system-ui, -apple-system, Segoe UI, sans-serif;
}
.font-display {
  font-family: Bricolage Grotesque, Space Grotesk, serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.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-\[0\.6875rem\] {
  font-size: 0.6875rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[1\.75rem\] {
  font-size: 1.75rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.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-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.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 {
  color: oklch(var(--accent));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-background {
  color: oklch(var(--background));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: oklch(var(--destructive));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  color: oklch(var(--muted-foreground));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  color: oklch(var(--primary));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-sidebar-primary-foreground {
  color: oklch(var(--sidebar-primary-foreground));
}
.text-success {
  color: oklch(var(--success));
}
.text-transparent {
  color: transparent;
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-accent {
  accent-color: oklch(var(--accent));
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.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;
}
.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-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 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-card-lift {
  --tw-shadow: 0 6px 16px oklch(0.34 0.025 48 / 0.16), 0 1px 3px oklch(0.34 0.025 48 / 0.1), 0 0 0 1px oklch(0.68 0.135 52 / 0.35);
  --tw-shadow-colored: 0 6px 16px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color), 0 0 0 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-elevated {
  --tw-shadow: 0 2px 8px oklch(0.34 0.025 48 / 0.12), 0 1px 2px oklch(0.34 0.025 48 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color), 0 1px 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-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-subtle {
  --tw-shadow: 0 1px 2px oklch(0.34 0.025 48 / 0.1);
  --tw-shadow-colored: 0 1px 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-table-row {
  --tw-shadow: inset 0 -1px 0 oklch(0.9 0.004 260 / 0.7);
  --tw-shadow-colored: inset 0 -1px 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-warm {
  --tw-shadow: 0 4px 14px oklch(0.68 0.135 52 / 0.14), 0 0 0 1px oklch(0.68 0.135 52 / 0.24);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color), 0 0 0 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-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);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-border {
  --tw-ring-color: oklch(var(--border));
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  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);
  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 {
  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, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  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-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
  .font-display {
    font-family: var(--font-display);
  }

  .font-body {
    font-family: var(--font-body);
  }

  .text-gradient-hero {
    background: var(--gradient-hero-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .bg-gradient-primary {
    background: var(--gradient-primary);
  }

  .bg-gradient-subtle {
    background: var(--gradient-subtle);
  }

  .transition-smooth {
    transition: var(--transition-smooth);
  }

  /* Soft warm-charcoal-tinted hairline shadows — refined depth, no heavy drop */
  .shadow-subtle {
    box-shadow: 0 1px 2px oklch(0.34 0.025 48 / 0.1);
  }

  .shadow-elevated {
    box-shadow: 0 2px 8px oklch(0.34 0.025 48 / 0.12), 0 1px 2px
      oklch(0.34 0.025 48 / 0.08);
  }

  /* Dedicated card hover lift — orange hairline + faint warm depth */
  .shadow-card-lift {
    box-shadow: 0 6px 16px oklch(0.34 0.025 48 / 0.16), 0 1px 3px
      oklch(0.34 0.025 48 / 0.1);
    border: 1px solid oklch(0.68 0.135 52 / 0.4);
  }

  /* Subtle row separator shadow for admin data tables */
  .shadow-table-row {
    box-shadow: inset 0 -1px 0 oklch(0.9 0.004 260 / 0.7);
  }

  .bg-gradient-media {
    background: var(--gradient-media);
  }

  .bg-gradient-sidebar {
    background: var(--gradient-sidebar);
  }

  .bg-gradient-accent {
    background: var(--gradient-accent);
  }

  /* Featured Tour Operators showcase band — warm charcoal spotlight */
  .bg-gradient-showcase {
    background: var(--gradient-showcase);
  }

  /* VIP badge orange fill */
  .bg-gradient-vip-badge {
    background: var(--gradient-vip-badge);
  }

  /* Empty-state placeholder band */
  .bg-gradient-placeholder {
    background: var(--gradient-placeholder);
  }

  /* ── Readable body text on deep warm-charcoal surfaces ──────────────
     Deep warm-charcoal structural zones (bg-gradient-showcase,
     bg-gradient-sidebar) render light-gray foreground/muted text at high
     contrast in light mode. Nested light cards keep warm-charcoal text. Layout
     and structure are unchanged.

     NOTE: `.bg-secondary` is deliberately NOT in this list. In the light-gray
     palette `--secondary` is a LIGHT band (0.94 0.004 260), so it must keep the
     default warm-charcoal foreground/muted tokens. Only the genuinely dark
     gradient bands get the light-gray override. */
  .bg-gradient-showcase,
  .bg-gradient-sidebar {
    --foreground: 0.975 0.003 260; /* light gray on warm charcoal */
    --muted-foreground: 0.87 0.004 260; /* soft gray on warm charcoal */
  }
  .bg-gradient-showcase .bg-card,
  .bg-gradient-showcase .bg-background,
  .bg-gradient-showcase .showcase-card,
  .bg-gradient-sidebar .bg-card,
  .bg-gradient-sidebar .bg-background,
  .bg-gradient-sidebar .showcase-card {
    --foreground: 0.29 0.012 55; /* warm charcoal on light card */
    --muted-foreground: 0.5 0.012 55; /* warm gray-slate on light card */
  }

  /* Featured operator card — neutral card face, orange hairline rim */
  .shadow-showcase {
    box-shadow: 0 8px 24px oklch(0.34 0.025 48 / 0.3), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.3), inset 0 1px 0 oklch(0.975 0.003 260 / 0.6);
  }
  .dark .shadow-showcase {
    box-shadow: 0 10px 28px oklch(0.12 0.006 260 / 0.55), 0 0 0 1px
      oklch(0.72 0.135 55 / 0.35), inset 0 1px 0 oklch(0.95 0.003 260 / 0.06);
  }

  /* Tight orange glow for the VIP badge — refined, not neon */
  .shadow-vip {
    box-shadow: 0 2px 6px oklch(0.68 0.135 52 / 0.35), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.4), inset 0 1px 0 oklch(0.78 0.12 60 / 0.5);
  }
  .dark .shadow-vip {
    box-shadow: 0 2px 6px oklch(0.72 0.135 55 / 0.45), 0 0 0 1px
      oklch(0.72 0.135 55 / 0.5), inset 0 1px 0 oklch(0.78 0.12 60 / 0.6);
  }

  /* Featured operator card — neutral face, orange hairline */
  .showcase-card {
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.3);
    border-radius: var(--radius-card);
    transition: var(--transition-smooth);
  }
  .showcase-card:hover {
    border-color: oklch(0.68 0.135 52 / 0.6);
    transform: translateY(-4px);
    box-shadow: var(--shadow-showcase, 0 8px 24px oklch(0.34 0.025 48 / 0.3));
  }
  .dark .showcase-card {
    background: oklch(0.23 0.004 260);
    border: 1px solid oklch(0.72 0.135 55 / 0.3);
  }

  /* VIP corner badge — burnt orange, jewel-cut */
  .showcase-vip-badge {
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border-radius: 9999px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Empty-state placeholder slot — dashed orange border on faint warm charcoal */
  .showcase-placeholder {
    background: var(--gradient-placeholder);
    border: 1.5px dashed oklch(0.68 0.135 52 / 0.4);
    border-radius: var(--radius-card);
  }
  .dark .showcase-placeholder {
    border-color: oklch(0.72 0.135 55 / 0.4);
  }

  /* Edge fade mask for horizontal-scroll showcase on mobile */
  .showcase-edge-fade {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0 0 0) 4%,
      oklch(0 0 0) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0 0 0) 4%,
      oklch(0 0 0) 96%,
      transparent 100%
    );
  }

  .text-gradient-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Media overlay — warm-charcoal haze over video posters / image grids.
     Deliberately does NOT set `position`: every consumer supplies its own
     positioning utility (`relative` for in-flow media frames, `absolute
     inset-0` for full-bleed banner media). Setting `position: relative` here
     would override Tailwind's `absolute` utility on the same element and drop
     the banner media into normal flow, pushing the overlay content below the
     fold. The `::after` scrim resolves against whichever positioned ancestor
     the consumer establishes. */
  .media-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-media);
    pointer-events: none;
    border-radius: inherit;
  }

  /* Banner scrim — the full-width homepage banner's own bottom-weighted veil.
     Same mechanics as .media-overlay (no `position` of its own, so the
     consumer's `absolute inset-0` still wins) but uses the lighter
     --gradient-banner-scrim so the picture stays the dominant element while
     the lower text band keeps its contrast. */
  .banner-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-banner-scrim);
    pointer-events: none;
    border-radius: inherit;
  }

  /* ── Homepage banner layout ────────────────────────────────────────────
     The banner is a two-zone composition: the media fills the full-bleed
     frame and the copy lives in a dedicated side panel, so the words never
     sit over the people in the picture. On mobile the panel stacks beneath
     the media (single column, no horizontal scroll); from lg the panel takes
     a fixed column on the inline-end side and the picture keeps the rest. */
  .banner-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 1024px) {
    .banner-layout {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
      align-items: stretch;
    }
  }
  @media (min-width: 1280px) {
    .banner-layout {
      grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem);
    }
  }

  /* Copy panel — calm warm-charcoal surface so the copy reads at full
     contrast beside the picture without a heavy scrim over the faces. The
     media zone keeps the bottom-weighted banner scrim for its own edge
     contrast. */
  .banner-panel {
    background: var(--gradient-primary);
    --foreground: 0.975 0.003 260; /* light gray on warm charcoal */
    --muted-foreground: 0.87 0.004 260; /* soft gray on warm charcoal */
  }
  .dark .banner-panel {
    background: var(--gradient-sidebar);
  }
  /* The glass secondary CTA sits on the charcoal panel, so its light glass
     face keeps warm-charcoal text (the .glass-card default) — no override
     needed. The eyebrow uses the burnt-orange accent, which reads on both. */

  /* Frosted glass card — neutral light-gray surface, orange hairline */
  .glass-card {
    background: oklch(0.975 0.003 260 / 0.78);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid oklch(0.68 0.135 52 / 0.22);
    /* The light glass face is a light surface, so any `text-background` /
       `text-secondary-foreground` consumer inside it must resolve to warm
       charcoal rather than light gray. Scoped to the pill itself so nested
       content is unaffected. */
    --background: 0.29 0.012 55;
    --secondary-foreground: 0.29 0.012 55;
  }
  .dark .glass-card {
    background: oklch(0.23 0.004 260 / 0.72);
    border: 1px solid oklch(0.72 0.135 55 / 0.25);
  }

  /* Admin dashboard table row hover treatment — neutral tint, warm-charcoal text */
  .admin-table-row {
    transition: var(--transition-smooth);
  }
  .admin-table-row:hover {
    background: oklch(0.94 0.004 260 / 0.5);
  }
  .dark .admin-table-row:hover {
    background: oklch(0.27 0.004 260 / 0.6);
  }

  /* Media manager action buttons — Adventures in Motion + all media managers.
     Change = deep warm-charcoal structural fill, Delete = orange hairline +
     refined red. Clear, consistent, and unambiguous for both videos and
     pictures. */
  .media-action-change {
    background: oklch(0.34 0.025 48);
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.35);
    border-radius: 0.5rem;
    transition: var(--transition-smooth);
  }
  .media-action-change:hover {
    background: oklch(0.27 0.022 48);
    border-color: oklch(0.68 0.135 52 / 0.6);
    box-shadow: 0 0 0 1px oklch(0.68 0.135 52 / 0.4);
  }
  .dark .media-action-change {
    background: oklch(0.27 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.35);
  }
  .dark .media-action-change:hover {
    background: oklch(0.33 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.6);
  }

  .media-action-delete {
    background: oklch(0.975 0.003 260);
    color: oklch(0.52 0.2 25);
    border: 1px solid oklch(0.52 0.2 25 / 0.45);
    border-radius: 0.5rem;
    transition: var(--transition-smooth);
  }
  .media-action-delete:hover {
    background: oklch(0.52 0.2 25);
    color: oklch(0.975 0.003 260);
    border-color: oklch(0.52 0.2 25);
  }
  .dark .media-action-delete {
    background: oklch(0.23 0.004 260);
    color: oklch(0.72 0.2 25);
    border-color: oklch(0.58 0.2 25 / 0.5);
  }
  .dark .media-action-delete:hover {
    background: oklch(0.58 0.2 25);
    color: oklch(0.95 0.003 260);
    border-color: oklch(0.58 0.2 25);
  }

  /* Media manager card — poster/video preview face with warm-charcoal overlay,
     orange hairline rim, matching existing media managers. */
  .media-manager-card {
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.25);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: var(--transition-smooth);
  }
  .media-manager-card:hover {
    border-color: oklch(0.68 0.135 52 / 0.5);
    box-shadow: 0 6px 16px oklch(0.34 0.025 48 / 0.16);
  }
  .dark .media-manager-card {
    background: oklch(0.23 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.25);
  }
  .dark .media-manager-card:hover {
    border-color: oklch(0.72 0.135 55 / 0.5);
  }

  /* ── Photo lightbox viewer ─────────────────────────────────────────────
     Full-screen zoom view opened from any listing picture. Reuses the
     `--scrim-lightbox` deep warm-charcoal veil and the existing
     `lightbox-control` orange-on-charcoal circular buttons so the photo viewer
     reads as one family with the video lightbox. The image sits centered on a
     bare charcoal stage (no chrome) with a thin orange hairline rim; close +
     prev/next controls float over the backdrop. Navigation is hidden when a
     listing has one picture. */
  .photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--scrim-lightbox);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: lightbox-fade 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .photo-lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 72rem);
    max-height: 100%;
    animation: lightbox-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .photo-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: var(--radius-media);
    border: 1px solid oklch(0.68 0.135 52 / 0.35);
    box-shadow: 0 24px 60px oklch(0.12 0.006 260 / 0.65), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.2);
    background: oklch(0.15 0.015 48);
  }
  /* Counter — picture N of M, light-gray mono on a deep warm-charcoal pill,
     matching the duration-badge language so media readouts feel like one
     family. */
  .photo-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: -3.25rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.82);
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
  }
  /* Caption — the tile's label, light-gray on a deep warm-charcoal pill that
     sits below the image, matching the counter's media-readout language. It is
     offset past the counter's band (`bottom: -3.25rem`) so the two centered
     pills stack instead of colliding when a mosaic has multiple tiles. */
  .photo-lightbox-caption {
    position: absolute;
    left: 50%;
    top: calc(100% + 3.5rem);
    transform: translateX(-50%);
    max-width: min(100%, 32rem);
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.82);
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Floating controls reuse `.lightbox-control` sizing; the photo viewer only
     repositions them relative to the image stage. */
  .photo-lightbox-close {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: 2;
  }
  .photo-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .photo-lightbox-prev {
    left: -0.5rem;
  }
  .photo-lightbox-next {
    right: -0.5rem;
  }
  @media (min-width: 768px) {
    .photo-lightbox-close {
      top: -1rem;
      right: -1rem;
    }
    .photo-lightbox-prev {
      left: -1.25rem;
    }
    .photo-lightbox-next {
      right: -1.25rem;
    }
  }

  /* ── Featured accommodation highlight band ─────────────────────────────
     A dedicated showcase band above the normal accommodation grid. Reuses the
     existing `--gradient-showcase` warm-charcoal spotlight so it reads as the
     sibling of the Featured Tour Operators strip: light-gray section label,
     light-gray heading + supporting line, and the existing listing cards
     dropped onto the charcoal band. The band only adds the section surface and
     label rhythm — card layout is untouched. */
  .featured-listings-section {
    background: var(--gradient-showcase);
    position: relative;
    overflow: hidden;
  }
  /* Soft orange blur orb — the single ambient accent for the band. */
  .featured-listings-section::before {
    content: "";
    position: absolute;
    top: -6rem;
    right: -4rem;
    width: 22rem;
    height: 22rem;
    border-radius: 9999px;
    background: radial-gradient(
      circle,
      oklch(0.68 0.135 52 / 0.22) 0%,
      oklch(0.68 0.135 52 / 0) 70%
    );
    pointer-events: none;
  }
  .featured-listings-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.68 0.135 52); /* burnt-orange section label */
  }
  .featured-listings-heading {
    color: oklch(0.975 0.003 260); /* light gray on warm charcoal — AA+ */
  }
  .featured-listings-support {
    color: oklch(0.87 0.004 260); /* soft gray supporting line — AA+ */
  }

  /* Featured card emphasis — an orange hairline rim + faint orange glow on the
     existing card face. Layout, radius, and content are unchanged; only the
     border and shadow read as "featured". */
  .featured-card {
    position: relative;
    border: 1px solid oklch(0.68 0.135 52 / 0.55);
    box-shadow: 0 8px 24px oklch(0.12 0.006 260 / 0.35), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.25);
    transition: var(--transition-smooth);
  }
  .featured-card:hover {
    border-color: oklch(0.68 0.135 52 / 0.85);
    box-shadow: 0 12px 30px oklch(0.12 0.006 260 / 0.45), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.45);
  }
  /* Featured pill — jewel-cut burnt orange, same language as the VIP badge but
     quieter: orange gradient fill, deep warm-ink tracked uppercase label. */
  .featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border: 1px solid oklch(0.78 0.12 60 / 0.6);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 2px 6px oklch(0.68 0.135 52 / 0.35);
  }
  .featured-badge svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  /* ── Admin numeric limit fields + featured toggle ──────────────────────
     Two small numeric inputs (picture limit, video limit) and a Featured
     switch that sits beside the existing Active toggle. Mirrors the existing
     admin form controls: neutral field face, orange hairline border,
     burnt-orange focus ring; the switch reuses the deep warm-charcoal fill for
     "on". */
  .limit-field {
    width: 5.5rem;
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.9 0.004 260);
    border-radius: 0.5rem;
    color: oklch(0.29 0.012 55);
    transition: var(--transition-smooth);
  }
  .limit-field:focus-visible {
    outline: none;
    border-color: oklch(0.68 0.135 52 / 0.7);
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.25);
  }
  .dark .limit-field {
    background: oklch(0.25 0.004 260);
    border-color: oklch(0.33 0.004 260);
    color: oklch(0.95 0.003 260);
  }
  .limit-field-hint {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: oklch(0.5 0.012 55); /* warm gray-slate muted hint */
  }
  .dark .limit-field-hint {
    color: oklch(0.76 0.004 260);
  }

  /* ── Admin form sections ───────────────────────────────────────────────
     Labelled fieldset headings that group the accommodation form into
     Basics / Location & pricing / Media / Amenities / Visibility. The legend
     carries the warm burnt-orange accent rule; the hint is a muted one-liner. */
  .form-section-legend {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(0.29 0.012 55);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid oklch(0.68 0.135 52 / 0.3);
    width: 100%;
  }
  .dark .form-section-legend {
    color: oklch(0.95 0.003 260);
    border-bottom-color: oklch(0.72 0.135 55 / 0.35);
  }
  .form-section-hint {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: oklch(0.5 0.012 55);
  }
  .dark .form-section-hint {
    color: oklch(0.76 0.004 260);
  }
  /* Inline validation message shown beneath an invalid field. */
  .form-field-error {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: oklch(0.55 0.19 27);
  }
  .dark .form-field-error {
    color: oklch(0.72 0.16 27);
  }
  /* Featured switch — deep warm-charcoal "on" fill with an orange hairline,
     matching the media-action-change button language; light-gray "off" track. */
  .featured-switch[data-state="checked"] {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.68 0.135 52 / 0.6);
  }
  .dark .featured-switch[data-state="checked"] {
    background: oklch(0.72 0.135 55);
    border-color: oklch(0.72 0.135 55 / 0.7);
  }

  /* Upload progress bar — deep warm-charcoal fill on neutral track, orange hairline */
  .media-upload-track {
    background: oklch(0.955 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.25);
    border-radius: 9999px;
    overflow: hidden;
  }
  .dark .media-upload-track {
    background: oklch(0.25 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.25);
  }
  .media-upload-fill {
    background: linear-gradient(
      90deg,
      oklch(0.42 0.03 48) 0%,
      oklch(0.29 0.024 48) 100%
    );
    border-radius: 9999px;
    height: 100%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .dark .media-upload-fill {
    background: linear-gradient(
      90deg,
      oklch(0.27 0.004 260) 0%,
      oklch(0.33 0.004 260) 100%
    );
  }

  /* ── Video gallery card ────────────────────────────────────────────────
     Public video gallery mirrors the picture gallery grid + lightbox but
     renders playable videos. Card carries the warm-charcoal `--gradient-media`
     scrim over the video poster/thumbnail; the orange play button sits centered
     and lifts + brightens on hover. Same orange hairline rim language as
     media-manager-card so video and picture cards read as one family. */
  .video-card {
    position: relative;
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.25);
    border-radius: var(--radius-media);
    overflow: hidden;
    transition: var(--transition-smooth);
  }
  .video-card:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
    box-shadow: 0 8px 20px oklch(0.34 0.025 48 / 0.18), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.3);
    transform: translateY(-3px);
  }
  .dark .video-card {
    background: oklch(0.23 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.25);
  }
  .dark .video-card:hover {
    border-color: oklch(0.72 0.135 55 / 0.55);
  }

  /* Burnt-orange play button — the single bright-orange accent per video card.
     Deep warm-ink triangle glyph on an orange gradient disc, framed by a deep
     warm-charcoal ring so it reads against both light and charcoal scrims.
     Grows gently on hover. */
  .video-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    box-shadow: 0 0 0 2px oklch(0.29 0.012 55 / 0.55), 0 6px 16px
      oklch(0.12 0.006 260 / 0.4);
    transition: var(--transition-smooth);
  }
  .video-play-button svg {
    width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.15rem;
  }
  .video-card:hover .video-play-button,
  .group:hover .video-play-button {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px oklch(0.29 0.012 55 / 0.7), 0 8px 20px
      oklch(0.12 0.006 260 / 0.5);
  }
  .dark .video-play-button {
    color: oklch(0.19 0.004 260);
    box-shadow: 0 0 0 2px oklch(0.95 0.003 260 / 0.4), 0 6px 16px
      oklch(0.12 0.006 260 / 0.5);
  }
  .dark .video-card:hover .video-play-button {
    box-shadow: 0 0 0 2px oklch(0.95 0.003 260 / 0.6), 0 8px 20px
      oklch(0.12 0.006 260 / 0.6);
  }

  /* Video lightbox play control — larger orange play disc for the full-screen
     lightbox, reusing the same warm-ink-ring + orange-gradient language. */
  .video-play-button-lg {
    width: 4.5rem;
    height: 4.5rem;
    box-shadow: 0 0 0 2px oklch(0.95 0.003 260 / 0.5), 0 10px 28px
      oklch(0.12 0.006 260 / 0.6);
  }
  .video-play-button-lg svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  /* ── Video caption under each gallery card ─────────────────────────────
     Elegant, readable caption/title beneath the video card face. Warm-charcoal
     text on the neutral card with a short orange hairline tick above it, so
     the label reads as part of the video-card family while staying quiet next
     to the single orange play-button accent. */
  .video-caption {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: oklch(0.29 0.012 55); /* warm charcoal on neutral — AA+ */
    padding: 0.75rem 0.9rem 0.9rem;
  }
  .video-caption::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52); /* orange hairline tick */
  }
  .dark .video-caption {
    color: oklch(0.95 0.003 260); /* light gray on dark card */
  }
  .dark .video-caption::before {
    background: oklch(0.72 0.135 55);
  }
  /* Caption inside the lightbox — light gray on the charcoal control bar */
  .lightbox-caption {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: oklch(0.95 0.003 260); /* light gray on charcoal — AA+ */
  }

  /* ── Lightbox viewer ───────────────────────────────────────────────────
     Fullscreen playback view opened from a video card. A deep warm-charcoal
     scrim veils the page; the video sits centered in a charcoal stage with an
     orange hairline rim. Controls (close, prev/next, fullscreen) are
     orange-accented on charcoal, reusing the video-play-button ring + orange
     language. */
  .video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--scrim-lightbox);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: lightbox-fade 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .video-lightbox-stage {
    position: relative;
    width: min(100%, 64rem);
    background: oklch(0.19 0.004 260); /* deep charcoal stage */
    border: 1px solid oklch(0.68 0.135 52 / 0.35);
    border-radius: var(--radius-media);
    overflow: hidden;
    box-shadow: 0 24px 60px oklch(0.12 0.006 260 / 0.6), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.25);
    animation: lightbox-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .video-lightbox-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: oklch(0.15 0.015 48);
  }
  .video-lightbox-video video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  /* Caption bar — charcoal strip under the video, orange hairline tick */
  .video-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: oklch(0.19 0.004 260);
    border-top: 1px solid oklch(0.68 0.135 52 / 0.25);
  }
  .video-lightbox-bar::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52);
  }
  .dark .video-lightbox-stage {
    background: oklch(0.23 0.004 260);
  }
  .dark .video-lightbox-bar {
    background: oklch(0.23 0.004 260);
  }

  /* Lightbox controls — orange on charcoal, circular, consistent family */
  .lightbox-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.55);
    color: oklch(0.95 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.45);
    box-shadow: 0 0 0 1px oklch(0.95 0.003 260 / 0.08);
    transition: var(--transition-smooth);
  }
  .lightbox-control:hover {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.68 0.135 52 / 0.8);
    color: oklch(0.975 0.003 260);
  }
  .lightbox-control svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  /* Positioned controls */
  .lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
  }
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .lightbox-nav-prev {
    left: 1rem;
  }
  .lightbox-nav-next {
    right: 1rem;
  }
  .lightbox-fullscreen {
    margin-left: auto;
  }
  /* Duration readout — current time / total, light-gray mono on charcoal */
  .lightbox-duration {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(0.95 0.003 260);
    white-space: nowrap;
  }
  /* Loop + mute toggles — same orange-on-charcoal circular family as the other
     lightbox controls. Active state fills with orange so the toggle reads as
     engaged against the charcoal bar. */
  .lightbox-control.is-active {
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border-color: oklch(0.78 0.12 60 / 0.9);
    box-shadow: 0 0 0 1px oklch(0.22 0.02 50 / 0.4), 0 2px 8px
      oklch(0.68 0.135 52 / 0.4);
  }
  .lightbox-control.is-active:hover {
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border-color: oklch(0.78 0.12 60);
  }
  /* Fullscreen state — the stage fills the viewport */
  .video-lightbox.is-fullscreen .video-lightbox-stage {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .video-lightbox.is-fullscreen .video-lightbox-video {
    height: 100%;
    aspect-ratio: auto;
  }
  .video-lightbox.is-fullscreen .video-lightbox-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid oklch(0.68 0.135 52 / 0.3);
  }

  @keyframes lightbox-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes lightbox-rise {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* ── Video Gallery section ─────────────────────────────────────────────
     Section wrapper for the homepage Video Gallery. Sits on the alternate
     muted neutral band (same rhythm as the picture Gallery section) and
     reuses the existing video-card / video-play-button tokens for each card —
     this block only adds the wrapper surface, the responsive side-by-side grid
     rhythm (1 column mobile → 5 across desktop), and the section label.
     Existing card + play-button styles are untouched. */
  .video-gallery-section {
    background: var(--gradient-subtle);
  }
  .dark .video-gallery-section {
    background: var(--gradient-subtle);
  }

  /* Responsive grid — 1 column mobile, 2 tablet, 4 laptop, 5 desktop.
     Each cell is a video-card; gap tightens on small screens, breathes on
     desktop so the side-by-side row reads as one premium strip. */
  .video-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 768px) {
    .video-gallery-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .video-gallery-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.75rem;
    }
  }
  @media (min-width: 1280px) {
    .video-gallery-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1.75rem;
    }
  }

  /* Section label — small tracked uppercase display accent above the grid,
     matching the site's section-label language (orange accent, charcoal text). */
  .video-gallery-label {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ── Video duration badge ───────────────────────────────────────────────
     Premium charcoal pill overlaid on each poster card, showing the video's
     real duration (read from metadata). Deep warm-charcoal fill with an orange
     hairline rim and light-gray mono text — the same ring + orange language as
     the video-play-button and lightbox-control family. Sits bottom-left so it
     never collides with the centered play button. */
  .video-duration-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.82);
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    box-shadow: 0 0 0 1px oklch(0.95 0.003 260 / 0.08), 0 2px 6px
      oklch(0.12 0.006 260 / 0.4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .dark .video-duration-badge {
    background: oklch(0.16 0.006 260 / 0.85);
    border-color: oklch(0.72 0.135 55 / 0.5);
  }

  /* ── Fun on Tour video strip ───────────────────────────────────────────
     The "Young Travellers Having Fun on Tour" section renders exactly six
     admin-managed videos side by side. It reuses the video-card /
     video-play-button / video-caption / video-lightbox language above; this
     block only adds the section surface and the six-across grid rhythm
     (1 column mobile → 2 tablet → 3 laptop → 6 desktop). */
  .fun-on-tour-section {
    background: var(--gradient-subtle);
  }
  .dark .fun-on-tour-section {
    background: var(--gradient-subtle);
  }

  .fun-on-tour-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 640px) {
    .fun-on-tour-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .fun-on-tour-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }
  @media (min-width: 1280px) {
    .fun-on-tour-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  /* ── Fun on Tour tile text + share control ─────────────────────────────
     Each tile is a video-card whose poster fills the 4/5 media area; the
     admin-set short description sits above the video and the caption beneath
     it, both on the neutral card face. The share control floats over the
     poster's top-right corner so it never collides with the centered play
     button or the bottom-left duration badge. */
  .fun-on-tour-grid .video-card {
    display: flex;
    flex-direction: column;
  }
  .fun-on-tour-grid .video-card > button.absolute {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Short description — quiet supporting line above the video, warm gray-slate
     on the neutral card, clamped to two lines so tiles stay even. */
  .video-description {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: oklch(0.5 0.012 55); /* warm gray-slate muted */
    padding: 0.75rem 0.9rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dark .video-description {
    color: oklch(0.76 0.004 260);
  }
  /* When a description precedes the caption, the caption's tick already
     separates the two blocks — tighten the caption's top padding. */
  .video-description + .video-caption {
    padding-top: 0.6rem;
  }

  /* Share control — orange-on-charcoal circular trigger matching the lightbox
     control family, floating over the poster's top-right corner. */
  .share-menu {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
  }
  .share-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.72);
    color: oklch(0.95 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    box-shadow: 0 0 0 1px oklch(0.95 0.003 260 / 0.08), 0 2px 8px
      oklch(0.12 0.006 260 / 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: var(--transition-smooth);
  }
  .share-trigger:hover {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.68 0.135 52 / 0.85);
  }
  .share-trigger svg {
    width: 1rem;
    height: 1rem;
  }
  /* Popover — deep warm-charcoal panel with an orange hairline rim, anchored
     under the trigger. Right-aligned by default; `is-left` flips it for the
     lightbox bar where the trigger sits mid-row. */
  .share-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 4;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
    border-radius: 0.75rem;
    background: oklch(0.19 0.004 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.45);
    box-shadow: 0 12px 32px oklch(0.12 0.006 260 / 0.6), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.2);
    animation: lightbox-fade 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .share-popover.is-left {
    right: auto;
    left: 0;
  }
  .share-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.95 0.003 260);
    text-align: left;
    transition: var(--transition-smooth);
  }
  .share-item:hover {
    background: oklch(0.34 0.025 48);
    color: oklch(0.975 0.003 260);
  }
  .share-item-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    color: oklch(0.68 0.135 52);
  }
  .share-item:hover .share-item-icon {
    color: oklch(0.975 0.003 260);
  }
  /* Lightbox share trigger sits inline in the charcoal control bar. */
  .video-lightbox-bar .share-menu {
    position: relative;
    top: auto;
    right: auto;
    flex: none;
  }
  .video-lightbox-bar .share-popover {
    top: auto;
    bottom: calc(100% + 0.5rem);
  }

  /* ── Admin contact editor ──────────────────────────────────────────────
     Editable contact-information form in the dashboard. Card face mirrors the
     media managers (neutral surface + neutral hairline) so the editor reads as
     part of the same admin system. */
  .contact-editor-card {
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.25);
    border-radius: var(--radius-card);
    box-shadow: 0 2px 8px oklch(0.34 0.025 48 / 0.1);
  }
  .dark .contact-editor-card {
    background: oklch(0.23 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.25);
  }

  /* Contact-detail row — one add/remove entry (address, phone, email, opening
     hours). Neutral face with an orange hairline separator; destructive remove
     control mirrors media-action-delete. */
  .contact-detail-row {
    background: oklch(0.975 0.003 260 / 0.5);
    border: 1px solid oklch(0.9 0.004 260);
    border-radius: 0.75rem;
    transition: var(--transition-smooth);
  }
  .contact-detail-row:hover {
    border-color: oklch(0.68 0.135 52 / 0.45);
    background: oklch(0.995 0.002 260);
  }
  .dark .contact-detail-row {
    background: oklch(0.25 0.004 260 / 0.5);
    border-color: oklch(0.33 0.004 260);
  }
  .dark .contact-detail-row:hover {
    border-color: oklch(0.72 0.135 55 / 0.45);
    background: oklch(0.27 0.004 260);
  }

  /* Organic curved wave dividers — light-gray-to-charcoal and
     charcoal-to-light-gray section transitions */
  .divider-wave-sand-teal {
    --divider-fill: var(--gradient-showcase);
  }
  .divider-wave-teal-sand {
    --divider-fill: var(--gradient-subtle);
  }
  .divider-wave-sand-teal,
  .divider-wave-teal-sand {
    position: relative;
    width: 100%;
    height: 0;
    line-height: 0;
  }
  .divider-wave-sand-teal::before,
  .divider-wave-teal-sand::before {
    content: "";
    display: block;
    width: 100%;
    height: 48px;
    background: var(--divider-fill);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,24 C240,48 480,0 720,16 C960,32 1200,8 1440,24 L1440,48 L0,48 Z' fill='black'/></svg>")
      no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,24 C240,48 480,0 720,16 C960,32 1200,8 1440,24 L1440,48 L0,48 Z' fill='black'/></svg>")
      no-repeat center / 100% 100%;
  }
  .divider-wave-teal-sand::before {
    transform: scaleY(-1);
  }

  /* ── Two-rate price display (Single / Double) ─────────────────────────
     Accommodation cards + read-more detail show two nightly rates instead of
     one discounted price. A quiet two-cell inline row: each cell carries a
     small tracked uppercase label (Single / Double) over a prominent
     warm-charcoal display price, separated by a thin orange hairline. Matches
     the existing charcoal-and-orange language — orange appears once, as the
     divider accent. */
  .price-rates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
  }
  .price-rate {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .price-rate + .price-rate {
    position: relative;
    padding-left: 1rem;
  }
  .price-rate + .price-rate::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: oklch(0.68 0.135 52 / 0.35); /* orange hairline divider */
  }
  .dark .price-rate + .price-rate::before {
    background: oklch(0.72 0.135 55 / 0.4);
  }
  .price-rate-label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.5 0.012 55); /* warm gray-slate muted label */
    white-space: nowrap;
  }
  .dark .price-rate-label {
    color: oklch(0.76 0.004 260);
  }
  .price-rate-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: oklch(0.29 0.012 55); /* warm-charcoal price — AA+ */
    white-space: nowrap;
  }
  .dark .price-rate-value {
    color: oklch(0.95 0.003 260);
  }

  /* ══════════════════════════════════════════════════════════════════════
     TRAVELLER STORIES
     Additive extension of the Neutral Light Gray + Warm Amber system. Every
     class below reuses the existing palette, radii, fonts, and the
     charcoal-and-orange-hairline language of `video-card` / `share-menu` /
     `price-rates`. Nothing existing is redefined — these are new siblings in
     the same family: a story card is a `video-card` that carries a rating and
     a paid amount, and the share menu simply gains two more platform rows.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Story card ────────────────────────────────────────────────────────
     The feed unit. Same neutral face, orange hairline rim, and radius as
     `video-card`, plus a footer strip that holds the accommodation link, the
     five-star rating and the paid-amount badge. Lifts on hover with the
     existing warm-charcoal-tinted depth. */
  .story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.25);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: var(--transition-smooth);
  }
  .story-card:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
    box-shadow: 0 8px 20px oklch(0.34 0.025 48 / 0.18), 0 0 0 1px
      oklch(0.68 0.135 52 / 0.3);
    transform: translateY(-3px);
  }
  .dark .story-card {
    background: oklch(0.23 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.25);
  }
  .dark .story-card:hover {
    border-color: oklch(0.72 0.135 55 / 0.55);
  }
  /* Card body — caption + meta, neutral face, warm-charcoal text. */
  .story-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.9rem 1rem 1rem;
  }
  /* Traveller byline — small display name over a muted handle line. */
  .story-author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: oklch(0.29 0.012 55);
  }
  .dark .story-author {
    color: oklch(0.95 0.003 260);
  }
  .story-author-meta {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.35;
    color: oklch(0.5 0.012 55); /* warm gray-slate muted */
  }
  .dark .story-author-meta {
    color: oklch(0.76 0.004 260);
  }
  /* Caption — two-line clamp so feed cards stay even. */
  .story-caption {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(0.29 0.012 55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dark .story-caption {
    color: oklch(0.93 0.003 260);
  }
  /* Linked accommodation — the travel anchor of every post. Orange hairline
     tick + display name, matching the `video-caption` label rhythm. */
  .story-stay-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: oklch(0.29 0.012 55);
    transition: var(--transition-smooth);
  }
  .story-stay-link::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52); /* orange hairline dot */
  }
  .story-stay-link:hover {
    color: oklch(0.68 0.135 52);
  }
  .dark .story-stay-link {
    color: oklch(0.95 0.003 260);
  }
  .dark .story-stay-link:hover {
    color: oklch(0.72 0.135 55);
  }
  /* Meta footer — rating on the left, paid badge on the right, separated by
     a thin orange hairline (the `price-rates` divider language). */
  .story-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid oklch(0.68 0.135 52 / 0.25);
  }
  .dark .story-card-footer {
    border-top-color: oklch(0.72 0.135 55 / 0.3);
  }
  /* Share count readout — mono, warm gray-slate, matching the media-readout
     language of `video-duration-badge` / `photo-lightbox-counter`. */
  .story-share-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-share-count {
    color: oklch(0.76 0.004 260);
  }
  .story-share-count svg {
    width: 0.85rem;
    height: 0.85rem;
    color: oklch(0.68 0.135 52);
  }

  /* ── Story media frame ─────────────────────────────────────────────────
     Fixed aspect-ratio media window with the warm-charcoal `--gradient-media`
     scrim, matching `video-card`'s poster treatment. Each content kind gets
     its own ratio so a vertical selfie and a wide car shot both read
     intentionally rather than as a cropped accident. */
  .story-media-frame {
    position: relative;
    width: 100%;
    background: oklch(0.15 0.015 48);
    overflow: hidden;
  }
  .story-media-frame > img,
  .story-media-frame > video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  /* Content-kind ratios — the travel-only vocabulary. */
  .story-media-frame.is-video {
    aspect-ratio: 16 / 9;
  }
  .story-media-frame.is-selfie {
    aspect-ratio: 4 / 5;
  }
  .story-media-frame.is-hotel {
    aspect-ratio: 4 / 3;
  }
  .story-media-frame.is-car {
    aspect-ratio: 3 / 2;
  }
  /* Stacked media (a post with a video plus hotel/car photos): the primary
     frame carries the ratio, secondary tiles sit in a thin strip beneath. */
  .story-media-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: oklch(0.68 0.135 52 / 0.25);
  }
  .story-media-strip > * {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: oklch(0.15 0.015 48);
  }
  .story-media-strip img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  /* "+N" overflow tile on the media strip. */
  .story-media-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.975 0.003 260);
    background: oklch(0.29 0.012 55 / 0.82);
  }

  /* ── Story detail gallery ──────────────────────────────────────────────
     The optional hotel and car photo sets beneath the primary media on the
     story detail view. Each set is labelled with a small mono heading and
     reuses the feed's `story-media-strip` tile language, so the detail view
     reads as the same family as the card. */
  .story-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.9rem 1rem 0;
  }
  .story-detail-gallery-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .story-detail-gallery-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-detail-gallery-title {
    color: oklch(0.76 0.004 260);
  }
  .story-detail-gallery-title svg {
    width: 0.85rem;
    height: 0.85rem;
    color: oklch(0.68 0.135 52);
  }
  .story-detail-gallery .story-media-strip {
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .story-detail-gallery .story-media-strip > button {
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
  }

  /* Full caption on the detail view — the feed clamps to two lines, the
     detail view shows the whole story. */
  .story-caption-full {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* ── Story detail actions ──────────────────────────────────────────────
     The share readout plus the author-only edit/delete controls, separated
     from the story facts by the same orange hairline as the card footer. */
  .story-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid oklch(0.68 0.135 52 / 0.25);
  }
  .dark .story-detail-actions {
    border-top-color: oklch(0.72 0.135 55 / 0.3);
  }

  /* ── Story detail delete confirmation ──────────────────────────────────
     A focused confirmation panel over a warm-charcoal scrim. The destructive
     action is the only filled control; keeping the story is the quiet
     hairline default. */
  .story-detail-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: oklch(0.15 0.015 48 / 0.62);
    backdrop-filter: blur(2px);
  }
  .story-detail-dialog {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.3);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 44px oklch(0.15 0.015 48 / 0.35);
  }
  .dark .story-detail-dialog {
    background: oklch(0.23 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.3);
  }
  .story-detail-dialog-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: oklch(0.29 0.012 55);
  }
  .dark .story-detail-dialog-title {
    color: oklch(0.95 0.003 260);
  }
  .story-detail-dialog-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-detail-dialog-text {
    color: oklch(0.76 0.004 260);
  }
  .story-detail-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.35rem;
  }

  /* ── Star rating (display) ─────────────────────────────────────────────
     Five-star accommodation rating. The filled stars are the single orange
     accent of the card footer; empty stars are a quiet neutral hairline gray
     so the score reads instantly at a glance. */
  .star-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
  }
  .star-rating svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
  }
  .star-rating .star-filled {
    color: oklch(0.68 0.135 52); /* burnt-orange filled star */
  }
  .star-rating .star-empty {
    color: oklch(0.9 0.004 260); /* neutral hairline empty star */
  }
  .dark .star-rating .star-empty {
    color: oklch(0.33 0.004 260);
  }
  /* Numeric score beside the stars — mono, warm gray-slate. */
  .star-rating-value {
    margin-left: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(0.5 0.012 55);
  }
  .dark .star-rating-value {
    color: oklch(0.76 0.004 260);
  }
  /* Compact variant for dense card footers. */
  .star-rating.is-sm svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  /* Large variant for the post detail hero. */
  .star-rating.is-lg svg {
    width: 1.35rem;
    height: 1.35rem;
  }
  .star-rating.is-lg .star-rating-value {
    font-size: 0.875rem;
  }

  /* ── Star rating (input) ───────────────────────────────────────────────
     Interactive five-star control for the create/edit post form. Empty stars
     are neutral hairlines; hovering or selecting fills orange up to the
     pointer, with a gentle pop so the choice feels tactile. Keyboard focus
     gets the standard burnt-orange ring. */
  .star-rating-input {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
  }
  .star-rating-input button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
    border-radius: 0.35rem;
    color: oklch(0.9 0.004 260);
    transition: var(--transition-smooth);
  }
  .star-rating-input button:hover {
    transform: scale(1.12);
  }
  .star-rating-input button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  .star-rating-input button.is-filled {
    color: oklch(0.68 0.135 52);
  }
  .star-rating-input button svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .dark .star-rating-input button {
    color: oklch(0.33 0.004 260);
  }
  .dark .star-rating-input button.is-filled {
    color: oklch(0.72 0.135 55);
  }
  /* Selected-score readout beside the control. */
  .star-rating-input-value {
    margin-left: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    color: oklch(0.29 0.012 55);
  }
  .dark .star-rating-input-value {
    color: oklch(0.95 0.003 260);
  }

  /* ── Paid-amount badge ─────────────────────────────────────────────────
     "Paid ZAR 1 850 via Ndemoongela". Deep warm-charcoal pill with an orange
     hairline rim and light-gray mono amount — the same jewel-cut readout
     language as `video-duration-badge`, so money reads as a fact, not a
     marketing price. */
  .paid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.92);
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    box-shadow: 0 0 0 1px oklch(0.95 0.003 260 / 0.08), 0 2px 6px
      oklch(0.12 0.006 260 / 0.35);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }
  .paid-badge svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
    color: oklch(0.68 0.135 52); /* orange accent glyph */
  }
  .paid-badge-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(0.87 0.004 260);
  }
  .dark .paid-badge {
    background: oklch(0.16 0.006 260 / 0.9);
    border-color: oklch(0.72 0.135 55 / 0.5);
  }
  /* Large variant for the post-detail hero. */
  .paid-badge.is-lg {
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
  }
  .paid-badge.is-lg svg {
    width: 1rem;
    height: 1rem;
  }

  /* ── Content-kind chip ─────────────────────────────────────────────────
     Travel-only taxonomy: Travel video / Selfie / Hotel / Car. Neutral
     hairline chip on the card face with a single orange icon — the chip is
     the quiet label, the icon carries the accent. */
  .content-kind-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: oklch(0.955 0.003 260);
    border: 1px solid oklch(0.9 0.004 260);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    color: oklch(0.29 0.012 55);
    white-space: nowrap;
  }
  .content-kind-chip svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
    color: oklch(0.68 0.135 52); /* single orange accent per chip */
  }
  .dark .content-kind-chip {
    background: oklch(0.27 0.004 260);
    border-color: oklch(0.33 0.004 260);
    color: oklch(0.95 0.003 260);
  }
  .dark .content-kind-chip svg {
    color: oklch(0.72 0.135 55);
  }
  /* Overlay variant — sits on the media scrim, so it flips to charcoal
     glass with light-gray text. */
  .content-kind-chip.is-overlay {
    background: oklch(0.29 0.012 55 / 0.82);
    border-color: oklch(0.68 0.135 52 / 0.5);
    color: oklch(0.975 0.003 260);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* ── Story share menu ──────────────────────────────────────────────────
     Extends the existing `share-menu` / `share-popover` / `share-item`
     family with the two additional platforms (Instagram, TikTok). The
     popover widens to fit five rows comfortably; each row keeps the existing
     orange-on-charcoal icon language. */
  .share-popover.is-stories {
    min-width: 14rem;
  }
  .share-item.is-instagram .share-item-icon {
    color: oklch(0.68 0.135 52);
  }
  .share-item.is-facebook .share-item-icon {
    color: oklch(0.6 0.11 250); /* muted brand-adjacent blue, desaturated to
       sit inside the warm palette rather than shout */
  }
  .share-item.is-tiktok .share-item-icon {
    color: oklch(0.72 0.14 68); /* warm amber */
  }
  .share-item.is-whatsapp .share-item-icon {
    color: oklch(0.55 0.13 150); /* harmonized green */
  }
  .share-item.is-x .share-item-icon {
    color: oklch(0.95 0.003 260); /* light gray */
  }
  .share-item.is-instagram:hover,
  .share-item.is-facebook:hover,
  .share-item.is-tiktok:hover,
  .share-item.is-whatsapp:hover,
  .share-item.is-x:hover {
    background: oklch(0.34 0.025 48);
  }
  .share-item.is-instagram:hover .share-item-icon,
  .share-item.is-facebook:hover .share-item-icon,
  .share-item.is-tiktok:hover .share-item-icon,
  .share-item.is-whatsapp:hover .share-item-icon,
  .share-item.is-x:hover .share-item-icon {
    color: oklch(0.975 0.003 260);
  }
  /* Confirmation line under the platform rows. */
  .share-popover-note {
    padding: 0.4rem 0.7rem 0.3rem;
    border-top: 1px solid oklch(0.68 0.135 52 / 0.25);
    margin-top: 0.2rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: oklch(0.87 0.004 260);
  }

  /* ── Story filter bar ──────────────────────────────────────────────────
     Sticky filter row above the feed: content-kind chips + star-rating
     filters. Sits on the neutral card face with a hairline bottom border,
     matching the header's treatment. Active pill fills deep warm charcoal
     with an orange hairline — the same "selected" language as the sidebar
     active state and `media-action-change`. */
  .story-filter-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    background: oklch(0.995 0.002 260 / 0.92);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid oklch(0.9 0.004 260);
  }
  .dark .story-filter-bar {
    background: oklch(0.23 0.004 260 / 0.92);
    border-bottom-color: oklch(0.33 0.004 260);
  }
  .story-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    background: oklch(0.955 0.003 260);
    border: 1px solid oklch(0.9 0.004 260);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: oklch(0.29 0.012 55);
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .story-filter-pill:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
    color: oklch(0.29 0.012 55);
  }
  .story-filter-pill svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: oklch(0.68 0.135 52);
  }
  .story-filter-pill.is-active {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.68 0.135 52 / 0.6);
    color: oklch(0.975 0.003 260);
  }
  .story-filter-pill.is-active svg {
    color: oklch(0.975 0.003 260);
  }
  .dark .story-filter-pill {
    background: oklch(0.27 0.004 260);
    border-color: oklch(0.33 0.004 260);
    color: oklch(0.95 0.003 260);
  }
  .dark .story-filter-pill.is-active {
    background: oklch(0.72 0.135 55);
    border-color: oklch(0.72 0.135 55 / 0.7);
    color: oklch(0.2 0.02 50);
  }
  .dark .story-filter-pill.is-active svg {
    color: oklch(0.2 0.02 50);
  }
  /* Divider between the kind filters and the rating filters. */
  .story-filter-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.15rem 0.25rem;
    background: oklch(0.68 0.135 52 / 0.35);
  }
  .dark .story-filter-divider {
    background: oklch(0.72 0.135 55 / 0.4);
  }

  /* ── Story feed grid ───────────────────────────────────────────────────
     Responsive masonry-ish feed: 1 column mobile → 2 tablet → 3 desktop.
     Cards breathe with the site's existing card gap rhythm. */
  .story-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .story-feed-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.75rem;
    }
  }
  @media (min-width: 1024px) {
    .story-feed-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
    }
  }

  /* ── Traveller profile header ──────────────────────────────────────────
     Warm-charcoal spotlight band above a traveller's own stories, reusing
     `--gradient-showcase` so it reads as the sibling of the Featured Tour
     Operators strip and the Featured accommodation band. Avatar ring is the
     single orange accent; stats are separated by orange hairlines. */
  .traveller-profile-header {
    position: relative;
    overflow: hidden;
    background: var(--gradient-showcase);
    border-radius: var(--radius-card);
    padding: 2rem 1.5rem;
  }
  .traveller-profile-header::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -3rem;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    background: radial-gradient(
      circle,
      oklch(0.68 0.135 52 / 0.22) 0%,
      oklch(0.68 0.135 52 / 0) 70%
    );
    pointer-events: none;
  }
  .traveller-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
    background: oklch(0.29 0.012 55);
    border: 2px solid oklch(0.68 0.135 52 / 0.7);
    box-shadow: 0 0 0 4px oklch(0.68 0.135 52 / 0.15);
  }
  .traveller-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(0.975 0.003 260); /* light gray on warm charcoal — AA+ */
  }
  .traveller-handle {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: oklch(0.87 0.004 260); /* soft gray on warm charcoal — AA+ */
  }
  /* Stat row — posts / average rating given / total shared. */
  .traveller-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.25rem;
  }
  .traveller-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .traveller-stat + .traveller-stat {
    position: relative;
    padding-left: 1.25rem;
  }
  .traveller-stat + .traveller-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: oklch(0.68 0.135 52 / 0.45); /* orange hairline divider */
  }
  .traveller-stat-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: oklch(0.975 0.003 260);
    white-space: nowrap;
  }
  .traveller-stat-label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.87 0.004 260);
    white-space: nowrap;
  }

  /* ── Story empty state ─────────────────────────────────────────────────
     Invitation to be the first to share a story. Reuses the dashed-orange
     placeholder language of `showcase-placeholder` on a faint warm-charcoal
     band, with the orange accent carrying the call to action. */
  .story-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--gradient-placeholder);
    border: 1.5px dashed oklch(0.68 0.135 52 / 0.4);
    border-radius: var(--radius-card);
  }
  .dark .story-empty-state {
    border-color: oklch(0.72 0.135 55 / 0.4);
  }
  .story-empty-state svg {
    width: 2.25rem;
    height: 2.25rem;
    color: oklch(0.68 0.135 52);
  }
  .story-empty-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: oklch(0.29 0.012 55);
  }
  .dark .story-empty-title {
    color: oklch(0.95 0.003 260);
  }
  .story-empty-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 28rem;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-empty-text {
    color: oklch(0.76 0.004 260);
  }

  /* ── Travel-only validation message ────────────────────────────────────
     Shown when a non-travel upload is rejected. Refined red hairline panel
     with the destructive token, matching `form-field-error` semantics but
     sized for a full message. */
  .story-rule-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: oklch(0.52 0.2 25 / 0.06);
    border: 1px solid oklch(0.52 0.2 25 / 0.35);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(0.45 0.18 27);
  }
  .story-rule-notice svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: 0.15rem;
    color: oklch(0.52 0.2 25);
  }
  .dark .story-rule-notice {
    background: oklch(0.58 0.2 25 / 0.1);
    border-color: oklch(0.58 0.2 25 / 0.45);
    color: oklch(0.8 0.14 27);
  }
  .dark .story-rule-notice svg {
    color: oklch(0.72 0.16 27);
  }

  /* ══════════════════════════════════════════════════════════════════════
     TRAVELLER STORIES — COMMENTS, FOLLOW CONTROLS, HOME HIGHLIGHTS STRIP
     Second additive extension of the same system. No token, font, radius, or
     existing class is redefined. Comments are a quiet neutral card with
     hairline-separated rows; follow controls reuse the charcoal/orange button
     language; the highlights strip is the feed card at reduced scale on the
     existing alternate band. Orange still appears at most once per cluster.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Comment thread ────────────────────────────────────────────────────
     The thread container. Neutral card face + orange hairline rim, matching
     `story-card`; the thread itself is the quiet zone — orange appears once,
     as the composer's focus ring / submit fill. */
  .story-comments {
    display: flex;
    flex-direction: column;
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.25);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .dark .story-comments {
    background: oklch(0.23 0.004 260);
    border-color: oklch(0.72 0.135 55 / 0.25);
  }
  /* Section heading row — tracked uppercase display label + mono count. */
  .story-comments-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.15rem 0.85rem;
    border-bottom: 1px solid oklch(0.68 0.135 52 / 0.25);
  }
  .dark .story-comments-header {
    border-bottom-color: oklch(0.72 0.135 55 / 0.3);
  }
  .story-comments-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.29 0.012 55);
  }
  .dark .story-comments-title {
    color: oklch(0.95 0.003 260);
  }
  .story-comments-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-comments-count {
    color: oklch(0.76 0.004 260);
  }
  /* The list itself — rows separated by a neutral hairline, no card-per-row. */
  .story-comment-list {
    display: flex;
    flex-direction: column;
  }
  /* One comment row: avatar column + content column. */
  .story-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1.15rem;
    transition: var(--transition-smooth);
  }
  .story-comment + .story-comment {
    border-top: 1px solid oklch(0.9 0.004 260);
  }
  .dark .story-comment + .story-comment {
    border-top-color: oklch(0.33 0.004 260);
  }
  .story-comment:hover {
    background: oklch(0.975 0.003 260 / 0.6);
  }
  .dark .story-comment:hover {
    background: oklch(0.27 0.004 260 / 0.5);
  }
  /* Indented one-level reply — a thin orange hairline runs down the reply
     spine, the single orange accent of the thread body. */
  .story-comment.is-reply {
    margin-left: 1.85rem;
    padding-left: 1rem;
    border-left: 2px solid oklch(0.68 0.135 52 / 0.45);
  }
  .dark .story-comment.is-reply {
    border-left-color: oklch(0.72 0.135 55 / 0.5);
  }
  /* Comment avatar — small neutral disc; the profile avatar's orange ring is
     reserved for the spotlight band, so comment avatars stay quiet. */
  .story-comment-avatar {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
    background: oklch(0.955 0.003 260);
    border: 1px solid oklch(0.9 0.004 260);
  }
  .dark .story-comment-avatar {
    background: oklch(0.27 0.004 260);
    border-color: oklch(0.33 0.004 260);
  }
  /* Content column. */
  .story-comment-main {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  /* Byline row — display name + mono timestamp, pushed apart. */
  .story-comment-byline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .story-comment-author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: oklch(0.29 0.012 55);
  }
  .dark .story-comment-author {
    color: oklch(0.95 0.003 260);
  }
  .story-comment-time {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(0.5 0.012 55);
    white-space: nowrap;
  }
  .dark .story-comment-time {
    color: oklch(0.76 0.004 260);
  }
  /* Comment body — warm-charcoal, comfortable line-height, wraps freely. */
  .story-comment-body {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: oklch(0.29 0.012 55);
    overflow-wrap: anywhere;
  }
  .dark .story-comment-body {
    color: oklch(0.93 0.003 260);
  }
  /* Action row — quiet muted text buttons; Delete turns refined red on hover.
     No orange here: the thread's orange budget is spent on the reply spine. */
  .story-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.1rem;
  }
  .story-comment-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: oklch(0.5 0.012 55);
    transition: var(--transition-smooth);
  }
  .story-comment-action svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
  }
  .story-comment-action:hover {
    color: oklch(0.29 0.012 55);
  }
  .story-comment-action.is-danger:hover {
    color: oklch(0.52 0.2 25);
  }
  .dark .story-comment-action {
    color: oklch(0.76 0.004 260);
  }
  .dark .story-comment-action:hover {
    color: oklch(0.95 0.003 260);
  }
  .dark .story-comment-action.is-danger:hover {
    color: oklch(0.72 0.16 27);
  }
  /* Removed-comment placeholder — a muted italic line on a faint gray tint
     with a dashed hairline, so a deleted comment leaves a legible trace
     without shouting. */
  .story-comment.is-removed {
    background: oklch(0.955 0.003 260 / 0.6);
    border: 1px dashed oklch(0.9 0.004 260);
    border-radius: 0.75rem;
    margin: 0.6rem 1.15rem;
    padding: 0.7rem 0.9rem;
  }
  .story-comment.is-removed + .story-comment {
    border-top: none;
  }
  .story-comment-removed-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-comment.is-removed {
    background: oklch(0.27 0.004 260 / 0.5);
    border-color: oklch(0.33 0.004 260);
  }
  .dark .story-comment-removed-text {
    color: oklch(0.76 0.004 260);
  }

  /* ── Comment composer ──────────────────────────────────────────────────
     Textarea + submit, separated from the thread by an orange hairline. The
     field is a neutral face with a burnt-orange focus ring (the `limit-field`
     language); the submit is the single filled orange control. */
  .story-comment-composer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.15rem 1.15rem;
    border-top: 1px solid oklch(0.68 0.135 52 / 0.25);
  }
  .dark .story-comment-composer {
    border-top-color: oklch(0.72 0.135 55 / 0.3);
  }
  .story-comment-input {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    padding: 0.7rem 0.85rem;
    background: oklch(0.995 0.002 260);
    border: 1px solid oklch(0.9 0.004 260);
    border-radius: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(0.29 0.012 55);
    transition: var(--transition-smooth);
  }
  .story-comment-input::-moz-placeholder {
    color: oklch(0.5 0.012 55);
  }
  .story-comment-input::placeholder {
    color: oklch(0.5 0.012 55);
  }
  .story-comment-input:focus-visible {
    outline: none;
    border-color: oklch(0.68 0.135 52 / 0.7);
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.25);
  }
  .story-comment-input.is-invalid {
    border-color: oklch(0.52 0.2 25 / 0.65);
  }
  .dark .story-comment-input {
    background: oklch(0.25 0.004 260);
    border-color: oklch(0.33 0.004 260);
    color: oklch(0.95 0.003 260);
  }
  .dark .story-comment-input::-moz-placeholder {
    color: oklch(0.76 0.004 260);
  }
  .dark .story-comment-input::placeholder {
    color: oklch(0.76 0.004 260);
  }
  .dark .story-comment-input:focus-visible {
    border-color: oklch(0.72 0.135 55 / 0.7);
    box-shadow: 0 0 0 3px oklch(0.72 0.135 55 / 0.25);
  }
  /* Composer footer — validation message left, submit right. */
  .story-comment-composer-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .story-comment-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    border-radius: 9999px;
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border: 1px solid oklch(0.78 0.12 60 / 0.6);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px oklch(0.68 0.135 52 / 0.3);
    transition: var(--transition-smooth);
  }
  .story-comment-submit svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
  }
  .story-comment-submit:hover {
    border-color: oklch(0.78 0.12 60);
    box-shadow: 0 4px 12px oklch(0.68 0.135 52 / 0.4);
  }
  .story-comment-submit:disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
  }
  .dark .story-comment-submit {
    color: oklch(0.19 0.004 260);
  }
  /* Inline validation message — refined red, the `form-field-error` voice. */
  .story-comment-error {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: oklch(0.55 0.19 27);
  }
  .story-comment-error svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
  }
  .dark .story-comment-error {
    color: oklch(0.72 0.16 27);
  }
  /* Sign-in prompt shown in place of the composer for signed-out visitors. */
  .story-comment-signin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem 1.15rem;
    border-top: 1px solid oklch(0.68 0.135 52 / 0.25);
  }
  .dark .story-comment-signin {
    border-top-color: oklch(0.72 0.135 55 / 0.3);
  }
  .story-comment-signin-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(0.5 0.012 55);
  }
  .dark .story-comment-signin-text {
    color: oklch(0.76 0.004 260);
  }

  /* ── Follow controls ───────────────────────────────────────────────────
     Two button states that sit beside the traveller's name on the spotlight
     band. Primary = not-yet-following (filled burnt orange, the single accent
     of the band's action cluster). Secondary = already following (transparent
     ghost with an orange hairline and a check glyph), so the "engaged" state
     reads quieter than the invitation. */
  .follow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .follow-button svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
  }
  .follow-button.is-primary {
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border: 1px solid oklch(0.78 0.12 60 / 0.6);
    box-shadow: 0 2px 6px oklch(0.68 0.135 52 / 0.35);
  }
  .follow-button.is-primary:hover {
    border-color: oklch(0.78 0.12 60);
    box-shadow: 0 4px 14px oklch(0.68 0.135 52 / 0.45);
  }
  .follow-button.is-secondary {
    background: transparent;
    color: oklch(0.975 0.003 260); /* light gray on the charcoal band */
    border: 1px solid oklch(0.68 0.135 52 / 0.55);
  }
  .follow-button.is-secondary:hover {
    background: oklch(0.34 0.025 48 / 0.6);
    border-color: oklch(0.68 0.135 52 / 0.85);
  }
  .follow-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .dark .follow-button.is-primary {
    color: oklch(0.19 0.004 260);
  }
  /* Follower / following stat blocks — siblings of `traveller-stat`, so they
     inherit the same orange hairline divider rhythm on the spotlight band. */
  .traveller-stat.is-follow .traveller-stat-value {
    color: oklch(0.975 0.003 260);
  }
  .traveller-stat.is-follow .traveller-stat-label {
    color: oklch(0.87 0.004 260);
  }

  /* ── Home highlights strip ─────────────────────────────────────────────
     A horizontal band of compact story cards on the existing alternate muted
     neutral band. Reuses `story-card` at reduced scale; the strip adds only
     the section surface, the heading row, and the horizontal scroll rhythm. */
  .story-highlights-section {
    background: oklch(0.955 0.003 260 / 0.6); /* alternate muted band */
  }
  .dark .story-highlights-section {
    background: oklch(0.25 0.004 260 / 0.5);
  }
  .story-highlights-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .story-highlights-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(0.68 0.135 52); /* burnt-orange section label */
  }
  .story-highlights-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(0.29 0.012 55);
  }
  .dark .story-highlights-heading {
    color: oklch(0.95 0.003 260);
  }
  /* "See all stories" link — display weight, orange arrow, underline on hover. */
  .story-highlights-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    color: oklch(0.29 0.012 55);
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .story-highlights-link svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    color: oklch(0.68 0.135 52); /* single orange accent of the header */
    transition: var(--transition-smooth);
  }
  .story-highlights-link:hover {
    color: oklch(0.68 0.135 52);
  }
  .story-highlights-link:hover svg {
    transform: translateX(3px);
  }
  .dark .story-highlights-link {
    color: oklch(0.95 0.003 260);
  }
  .dark .story-highlights-link:hover {
    color: oklch(0.72 0.135 55);
  }
  /* Horizontal scroll track — snap points, edge fade, hidden scrollbar. */
  .story-highlights-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 15rem;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .story-highlights-track::-webkit-scrollbar {
    display: none;
  }
  .story-highlights-track > * {
    scroll-snap-align: start;
  }
  @media (min-width: 768px) {
    .story-highlights-track {
      grid-auto-columns: 17rem;
      gap: 1.25rem;
    }
  }
  /* Compact card variant — the feed card at reduced scale: tighter body
     padding, smaller byline and caption, footer kept intact. */
  .story-card.is-compact .story-card-body {
    gap: 0.5rem;
    padding: 0.75rem 0.85rem 0.85rem;
  }
  .story-card.is-compact .story-author {
    font-size: 0.8125rem;
  }
  .story-card.is-compact .story-caption {
    font-size: 0.8125rem;
    -webkit-line-clamp: 2;
  }
  .story-card.is-compact .story-card-footer {
    padding-top: 0.55rem;
  }
  .story-card.is-compact .star-rating svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  .story-card.is-compact .paid-badge {
    padding: 0.25rem 0.55rem;
    font-size: 0.6875rem;
  }
  .story-card.is-compact .paid-badge svg {
    width: 0.7rem;
    height: 0.7rem;
  }

  /* ══════════════════════════════════════════════════════════════════════
     CALM, IMAGE-LED REFINEMENT
     A quiet layer on the same Neutral Light Gray + Warm Amber system. Nothing
     is redefined: these are new siblings that let photography carry the page.
     Cards lose their orange rims for a near-invisible hairline and a soft,
     low-contrast shadow; section bands alternate through three explicit tones;
     and a new photo-led listing card gives accommodation a large image area,
     a compact name, a row of small pill amenity tags, and one restrained
     price line. Orange stays a single whisper per cluster.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Band rhythm ───────────────────────────────────────────────────────
     Three explicit section surfaces so the page alternates calmly as it
     scrolls: canvas (default), soft (first alternate), muted (second
     alternate). Generous vertical padding is applied by the section classes
     below, not by the band itself. */
  .band-canvas {
    background: var(--surface-canvas);
  }
  .band-soft {
    background: var(--surface-soft);
  }
  .band-muted {
    background: var(--surface-muted);
  }

  /* Generous, calm vertical rhythm. Larger than the original py-20/28 so the
     page breathes and each band reads as its own quiet chapter. */
  .section-calm {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  @media (min-width: 768px) {
    .section-calm {
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
  }
  .section-calm-tight {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  @media (min-width: 768px) {
    .section-calm-tight {
      padding-top: 4.5rem;
      padding-bottom: 4.5rem;
    }
  }

  /* ── Restrained section typography ─────────────────────────────────────
     Smaller and tighter than a marketing page: a quiet tracked label, a
     compact display heading, and a calmer supporting line. */
  .section-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(0.5 0.012 55); /* warm gray-slate — quiet, not orange */
  }
  .dark .section-label {
    color: oklch(0.76 0.004 260);
  }
  .section-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: oklch(0.29 0.012 55);
  }
  @media (min-width: 768px) {
    .section-heading {
      font-size: 1.875rem;
    }
  }
  .dark .section-heading {
    color: oklch(0.95 0.003 260);
  }
  .section-support {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(0.5 0.012 55);
    max-width: 38rem;
  }
  .dark .section-support {
    color: oklch(0.76 0.004 260);
  }

  /* ── Quiet card ────────────────────────────────────────────────────────
     The calm default surface: a near-invisible hairline and a soft, low-
     contrast shadow. No orange rim at rest — orange is reserved for the
     single interactive moment (hover/focus). */
  .card-quiet {
    background: var(--surface-panel);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
  }
  .card-quiet:hover {
    box-shadow: var(--shadow-soft-lift);
    transform: translateY(-2px);
  }
  .dark .card-quiet {
    background: var(--surface-panel);
    border-color: var(--border-quiet);
  }

  /* ── Photo-led listing card ────────────────────────────────────────────
     Accommodation card anatomy: a large image area carries the card, the
     name sits compact beneath it, a row of small pill amenity tags follows,
     and one restrained price line closes it. The card itself is quiet — the
     photograph is the only loud thing on the page. */
  .listing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-panel);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
  }
  .listing-card:hover {
    box-shadow: var(--shadow-soft-lift);
    transform: translateY(-2px);
  }
  .dark .listing-card {
    background: var(--surface-panel);
    border-color: var(--border-quiet);
  }
  /* Large image area — the dominant element. 4:3 on mobile, 3:2 on wider
     screens so the photograph reads as landscape travel photography. */
  .listing-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: oklch(0.94 0.003 260);
  }
  @media (min-width: 768px) {
    .listing-card-media {
      aspect-ratio: 3 / 2;
    }
  }
  .listing-card-media > img,
  .listing-card-media > video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .listing-card:hover .listing-card-media > img {
    transform: scale(1.03);
  }
  .dark .listing-card-media {
    background: oklch(0.25 0.004 260);
  }
  /* Body — compact, generous line spacing, no heavy chrome. */
  .listing-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem 1.15rem;
  }
  /* Compact name — the only display type in the card, kept small. */
  .listing-card-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: oklch(0.29 0.012 55);
  }
  .dark .listing-card-name {
    color: oklch(0.95 0.003 260);
  }
  /* Row of small pill-shaped amenity tags — quiet neutral chips, one per
     amenity, wrapping as needed. */
  .listing-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .listing-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: var(--surface-soft);
    border: 1px solid var(--border-quiet);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    color: oklch(0.5 0.012 55);
    white-space: nowrap;
  }
  .dark .listing-tag {
    background: var(--surface-muted);
    border-color: var(--border-quiet);
    color: oklch(0.76 0.004 260);
  }
  /* Single restrained price line — one quiet line, no two-rate grid, no
     orange. The price is stated, not sold. */
  .listing-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-quiet);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(0.5 0.012 55);
  }
  .listing-card-price-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: oklch(0.29 0.012 55);
    white-space: nowrap;
  }
  .dark .listing-card-price {
    border-top-color: var(--border-quiet);
    color: oklch(0.76 0.004 260);
  }
  .dark .listing-card-price-value {
    color: oklch(0.95 0.003 260);
  }
  /* Quiet overlay chip for a single label on the image (region / featured).
     Charcoal glass so it reads on any photograph. */
  .listing-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.72);
    color: oklch(0.975 0.003 260);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* Responsive listing grid — 1 column mobile → 2 tablet → 3 desktop, with
     generous gaps so photographs never crowd each other. */
  .listing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 640px) {
    .listing-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.75rem;
    }
  }
  @media (min-width: 1024px) {
    .listing-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     MOBILE LAYOUT FOUNDATION (public site, down to 360px)
     A small, additive set of global guards so no public page can scroll
     sideways at 360px and long unbroken strings (emails, URLs, captions)
     wrap instead of pushing the layout wide. These are layout-only rules —
     no colors, fonts, or component structure change.
     ══════════════════════════════════════════════════════════════════════ */

  /* Global horizontal-overflow guard. `overflow-x: clip` (not `hidden`)
     prevents sideways scrolling without creating a scroll container, so
     `position: sticky` headers keep working. */
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  /* Long words, emails, URLs and captions wrap rather than overflow their
     container. Applied broadly on the public surface; `break-word` only
     breaks a word when it would otherwise overflow, so normal prose is
     unaffected. */
  .wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Comfortable mobile tap targets — at least 44px tall for buttons, links
     and form controls on small screens. Desktop sizing is untouched. */
  @media (max-width: 767px) {
    .tap-target {
      min-height: 44px;
    }

    /* Full-width primary actions on mobile so they are easy to hit and read
       as the single clear next step. */
    .tap-target-block {
      min-height: 44px;
      width: 100%;
    }

    /* Traveller Stories surfaces — every interactive control reaches the
       44px mobile minimum. These are the same controls the public site's
       tap-target utility covers elsewhere; the stories components use their
       own class language, so the guard is applied here rather than by
       editing each component. Desktop sizing is untouched. */
    .story-filter-pill,
    .story-comment-submit,
    .follow-button,
    .story-comment-action {
      min-height: 44px;
    }

    /* ── Admin stacked-card tables ────────────────────────────────────────
       Wide admin tables become stacked card rows on phones. Each row turns
       into a card and every cell shows its column label above the value, so
       no field is lost and nothing scrolls sideways. The label comes from
       the matching <th> via `data-label` on the <td>; cells without a label
       (e.g. an image or an actions cell) simply render their content. */
    .admin-stack-table table,
    .admin-stack-table tbody,
    .admin-stack-table tr,
    .admin-stack-table td {
      display: block;
      width: 100%;
    }
    .admin-stack-table thead {
      display: none;
    }
    .admin-stack-table tbody {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding: 0.75rem;
    }
    .admin-stack-table tr {
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      background: var(--card);
      padding: 0.25rem 0.75rem;
    }
    .admin-stack-table td {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.6rem 0;
      border-bottom: 1px solid var(--border);
      white-space: normal;
      text-align: left;
    }
    .admin-stack-table td:last-child {
      border-bottom: 0;
    }
    .admin-stack-table td[data-label]::before {
      content: attr(data-label);
      flex: 0 0 40%;
      max-width: 40%;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--muted-foreground);
    }
    .admin-stack-table td[data-label] > * {
      min-width: 0;
    }
    /* Numeric cells keep their right alignment inside the value column. */
    .admin-stack-table td.text-right {
      text-align: right;
    }

    /* ── Admin full-height scrollable dialog ──────────────────────────────
       Admin edit dialogs fill the phone viewport and scroll their body, so
       long forms stay reachable and the header/actions stay put. Applied by
       adding `.admin-sheet-dialog` to the DialogContent. */
    .admin-sheet-dialog {
      top: 0;
      left: 0;
      width: 100%;
      max-width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      transform: none;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .admin-sheet-dialog[data-state="open"] {
      animation: none;
    }
    .admin-sheet-dialog[data-state="closed"] {
      animation: none;
    }
  }

  /* ── Horizontally scrolling filter/tab rows ────────────────────────────
     The stories feed's tab row and filter bar keep every control on one
     line and scroll sideways within their own region instead of wrapping
     and pushing the page wide. The row bleeds to the container gutter so
     the first and last pill are reachable, and the scrollbar is hidden so
     the row reads as a calm strip. Desktop keeps the original wrap. */
  .story-scroll-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .story-scroll-row::-webkit-scrollbar {
    display: none;
  }
  .story-scroll-row > * {
    flex: none;
    scroll-snap-align: start;
  }
  @media (min-width: 768px) {
    .story-scroll-row {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     OFFLINE INDICATOR · UNREAD BADGE · SHARE ACTION
     Third additive extension of the Neutral Light Gray + Warm Amber system.
     No token, font, radius, or existing class is redefined. All three reuse
     the established charcoal-glass + orange-hairline language: the offline
     banner is a calm charcoal-glass strip (never a red alarm), the unread
     badge is the single filled burnt-orange pill of the admin inbox, and the
     share action is a labelled sibling of the existing `share-trigger`.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Offline indicator banner ──────────────────────────────────────────
     A calm, unobtrusive strip shown when the connection drops. It is NOT an
     error state: no red, no alarm iconography — just a warm-charcoal glass
     bar with an orange hairline, a small pulsing orange status dot, and a
     light-gray message. Sits at the top of the viewport (fixed) so it never
     reflows the page, and clears when the connection returns. At 360px it
     wraps to two lines and keeps a full-width retry affordance. */
  .offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    padding: 0.55rem 1rem;
    background: oklch(0.29 0.012 55 / 0.94);
    color: oklch(0.975 0.003 260);
    border-bottom: 1px solid oklch(0.68 0.135 52 / 0.45);
    box-shadow: 0 6px 20px oklch(0.12 0.006 260 / 0.35);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    animation: offline-drop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .dark .offline-banner {
    background: oklch(0.16 0.006 260 / 0.94);
    border-bottom-color: oklch(0.72 0.135 55 / 0.45);
  }
  /* Status dot — the single orange accent. Pulses gently so the state reads
     as "live" without a spinner or an alarm. */
  .offline-banner-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52);
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.2);
    animation: offline-pulse 2s ease-in-out infinite;
  }
  .dark .offline-banner-dot {
    background: oklch(0.72 0.135 55);
    box-shadow: 0 0 0 3px oklch(0.72 0.135 55 / 0.25);
  }
  /* Message — light-gray body, wraps anywhere so long copy never overflows. */
  .offline-banner-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: oklch(0.975 0.003 260);
    overflow-wrap: anywhere;
  }
  .offline-banner-text strong {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  /* Retry / dismiss affordance — a quiet ghost pill with an orange hairline,
     matching the `follow-button.is-secondary` language. */
  .offline-banner-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background: transparent;
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.55);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .offline-banner-action svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
  }
  .offline-banner-action:hover {
    background: oklch(0.34 0.025 48 / 0.7);
    border-color: oklch(0.68 0.135 52 / 0.85);
  }
  /* Full-width message + action stack at 360px so nothing is cramped. */
  @media (max-width: 767px) {
    .offline-banner {
      padding: 0.6rem 0.9rem;
      justify-content: flex-start;
    }
    .offline-banner-text {
      flex: 1 1 100%;
    }
    .offline-banner-action {
      min-height: 44px;
    }
  }
  @keyframes offline-drop {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes offline-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.55;
      transform: scale(0.82);
    }
  }

  /* ── Unread count badge (admin inbox) ──────────────────────────────────
     Small, high-contrast, legible. A filled burnt-orange pill with deep
     warm-ink mono digits — the single filled accent of an inbox row, so an
     unread enquiry is unmistakable at a glance. The `.is-dot` variant is a
     bare orange dot for tight spaces (tab labels / collapsed nav). */
  .unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50); /* deep warm ink on orange — AA+ */
    border: 1px solid oklch(0.78 0.12 60 / 0.6);
    box-shadow: 0 1px 4px oklch(0.68 0.135 52 / 0.4);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .dark .unread-badge {
    color: oklch(0.19 0.004 260);
  }
  /* Compact variant for dense list rows. */
  .unread-badge.is-sm {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.32rem;
    font-size: 0.625rem;
  }
  /* Bare dot — no count, used where a number would crowd the label. */
  .unread-badge.is-dot {
    min-width: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    font-size: 0;
    border: none;
    box-shadow: 0 0 0 2px oklch(0.995 0.002 260 / 0.9);
  }
  .dark .unread-badge.is-dot {
    box-shadow: 0 0 0 2px oklch(0.23 0.004 260 / 0.9);
  }
  /* Unread indicator on a row — a thin orange spine down the left edge of an
     unhandled enquiry, so the row reads as unread even without the badge. */
  .unread-row {
    position: relative;
  }
  .unread-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 3px;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52);
  }
  .dark .unread-row::before {
    background: oklch(0.72 0.135 55);
  }

  /* ── Share action (listing cards + detail panels) ──────────────────────
     A labelled sibling of the existing `share-trigger`: same charcoal-glass
     circular/rounded control, same orange hairline, but it can carry a text
     label and always meets the 44px mobile tap minimum. The icon-only
     `.is-icon` variant keeps the circular `share-trigger` footprint for
     overlay placement on media. */
  .share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.72);
    color: oklch(0.95 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    box-shadow: 0 0 0 1px oklch(0.95 0.003 260 / 0.08), 0 2px 8px
      oklch(0.12 0.006 260 / 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .share-button svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .share-button:hover {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.68 0.135 52 / 0.85);
  }
  .share-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.35);
  }
  /* Quiet variant for the neutral card face — no charcoal glass, just a
     hairline ghost pill that turns orange on hover. */
  .share-button.is-quiet {
    background: transparent;
    color: oklch(0.29 0.012 55);
    border-color: var(--border-quiet);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .share-button.is-quiet svg {
    color: oklch(0.5 0.012 55);
  }
  .share-button.is-quiet:hover {
    background: transparent;
    color: oklch(0.29 0.012 55);
    border-color: oklch(0.68 0.135 52 / 0.55);
  }
  .share-button.is-quiet:hover svg {
    color: oklch(0.68 0.135 52);
  }
  .dark .share-button.is-quiet {
    color: oklch(0.95 0.003 260);
    border-color: var(--border-quiet);
  }
  .dark .share-button.is-quiet svg {
    color: oklch(0.76 0.004 260);
  }
  .dark .share-button.is-quiet:hover {
    color: oklch(0.95 0.003 260);
    border-color: oklch(0.72 0.135 55 / 0.55);
  }
  .dark .share-button.is-quiet:hover svg {
    color: oklch(0.72 0.135 55);
  }
  /* Icon-only circular variant — the `share-trigger` footprint, for overlay
     placement over media. */
  .share-button.is-icon {
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    gap: 0;
  }
  /* Confirmation feedback — a small charcoal pill that appears after a
     successful copy/share, matching the media-readout language. */
  .share-feedback {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    background: oklch(0.29 0.012 55 / 0.92);
    color: oklch(0.975 0.003 260);
    border: 1px solid oklch(0.68 0.135 52 / 0.5);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    animation: lightbox-fade 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .share-feedback svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: oklch(0.68 0.135 52);
  }
  .dark .share-feedback {
    background: oklch(0.16 0.006 260 / 0.92);
    border-color: oklch(0.72 0.135 55 / 0.5);
  }
  /* 44px mobile tap minimum for every share affordance. */
  @media (max-width: 767px) {
    .share-button {
      min-height: 44px;
    }
    .share-button.is-icon {
      width: 44px;
      height: 44px;
    }
  }

  /* ── Mobile layout for the traveller stories surfaces ──────────────────
     Layout-only adjustments so the feed, detail, composer, profile and
     photo viewer all hold together at 360px. No colors, fonts, or
     component structure change. */
  @media (max-width: 767px) {
    /* Profile spotlight band — tighter padding so the avatar, name and
       stats keep their breathing room on a small screen. */
    .traveller-profile-header {
      padding: 1.5rem 1.15rem;
    }
    .traveller-avatar {
      width: 4rem;
      height: 4rem;
    }
    .traveller-name {
      font-size: 1.25rem;
    }

    /* Stats — a two-column grid instead of a wrapping flex row, so the five
       figures never overflow and the orange hairline dividers are dropped
       (they read as noise once the row wraps). */
    .traveller-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1.25rem;
    }
    .traveller-stat + .traveller-stat {
      padding-left: 0;
    }
    .traveller-stat + .traveller-stat::before {
      display: none;
    }
    .traveller-stat-value {
      font-size: 1.125rem;
    }

    /* Comment thread — reduce the reply indent so a nested reply keeps a
       readable measure at 360px. */
    .story-comment {
      padding: 0.8rem 0.9rem;
    }
    .story-comment.is-reply {
      margin-left: 0.9rem;
      padding-left: 0.75rem;
    }
    .story-comment.is-removed {
      margin: 0.6rem 0.9rem;
    }
    .story-comments-header,
    .story-comment-composer,
    .story-comment-signin {
      padding-left: 0.9rem;
      padding-right: 0.9rem;
    }

    /* Photo viewer — pull the floating controls inside the stage so the
       close and prev/next buttons stay fully on-screen and reachable. */
    .photo-lightbox {
      padding: 1rem;
    }
    .photo-lightbox-close {
      top: 0.5rem;
      right: 0.5rem;
    }
    .photo-lightbox-prev {
      left: 0.5rem;
    }
    .photo-lightbox-next {
      right: 0.5rem;
    }
    .photo-lightbox-image {
      max-height: calc(100vh - 6rem);
    }
    .photo-lightbox-counter {
      bottom: -2.75rem;
    }
    .photo-lightbox-caption {
      top: calc(100% + 3rem);
      max-width: min(100%, 20rem);
    }

    /* ── Gallery viewer (video/picture lightbox) ─────────────────────────
       The gallery viewer reuses the video-lightbox stage. On a phone the
       floating close/prev/next controls are pulled inside the stage so they
       stay fully on-screen and within thumb reach, and the stage is capped to
       the viewport so a wide video never pushes the controls off the edge. */
    .gallery-viewer-stage {
      width: 100%;
      max-width: 100%;
    }
    .gallery-viewer-close {
      top: 0.5rem;
      right: 0.5rem;
    }
    .gallery-viewer-nav {
      width: 2.75rem;
      height: 2.75rem;
    }
    .gallery-viewer-nav.lightbox-nav-prev {
      left: 0.5rem;
    }
    .gallery-viewer-nav.lightbox-nav-next {
      right: 0.5rem;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     GALLERY FILTER · TESTIMONIALS CAROUSEL · AVAILABILITY CALENDAR
     Fourth additive extension of the Neutral Light Gray + Warm Amber system.
     No token, font, radius, or existing class is redefined. All three surfaces
     reuse the established language: the filter chips are the `story-filter-pill`
     segmented control, the carousel reuses Hero's prev/next + dot indicator
     vocabulary, and the calendar is a quiet neutral grid whose only chromatic
     voices are the burnt-orange selected/today ring and the warm-charcoal
     booked fill. Orange still appears at most once per cluster.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Gallery filter chips / segmented control ──────────────────────────
     A single horizontal filter row above the gallery grid: All / Accommodation
     / Adventures / Car Hire / Wildlife. Quiet neutral hairline chips at rest;
     the active chip fills deep warm charcoal with an orange hairline — the same
     "selected" language as `story-filter-pill.is-active` and the admin sidebar.
     At 360px the row scrolls sideways within its own region instead of
     wrapping and pushing the page wide. */
  .gallery-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .gallery-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    background: var(--surface-panel);
    border: 1px solid var(--border-quiet);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: oklch(0.29 0.012 55);
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .gallery-filter-chip:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
  }
  .gallery-filter-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  .gallery-filter-chip svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: oklch(0.68 0.135 52); /* single orange accent per chip */
  }
  .gallery-filter-chip.is-active {
    background: oklch(0.34 0.025 48); /* deep warm charcoal fill */
    border-color: oklch(0.68 0.135 52 / 0.6);
    color: oklch(0.975 0.003 260);
  }
  .gallery-filter-chip.is-active svg {
    color: oklch(0.975 0.003 260);
  }
  .dark .gallery-filter-chip {
    background: var(--surface-muted);
    border-color: var(--border-quiet);
    color: oklch(0.95 0.003 260);
  }
  .dark .gallery-filter-chip.is-active {
    background: oklch(0.72 0.135 55);
    border-color: oklch(0.72 0.135 55 / 0.7);
    color: oklch(0.2 0.02 50);
  }
  .dark .gallery-filter-chip.is-active svg {
    color: oklch(0.2 0.02 50);
  }
  /* Count readout inside a chip — mono, quiet, matches the media-readout
     language of `video-duration-badge`. */
  .gallery-filter-count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.7;
  }
  /* Empty state when a category has no items — a calm dashed-hairline panel,
     never a blank grid. */
  .gallery-filter-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--surface-soft);
    border: 1.5px dashed var(--border-quiet);
    border-radius: var(--radius-card);
  }
  .gallery-filter-empty-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: oklch(0.29 0.012 55);
  }
  .gallery-filter-empty-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 26rem;
    color: oklch(0.5 0.012 55);
  }
  .dark .gallery-filter-empty-title {
    color: oklch(0.95 0.003 260);
  }
  .dark .gallery-filter-empty-text {
    color: oklch(0.76 0.004 260);
  }
  @media (max-width: 767px) {
    .gallery-filter-row {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      margin-inline: -1rem;
      padding-inline: 1rem;
    }
    .gallery-filter-row::-webkit-scrollbar {
      display: none;
    }
    .gallery-filter-row > * {
      flex: none;
      scroll-snap-align: start;
    }
    .gallery-filter-chip {
      min-height: 44px;
    }
  }

  /* ── Testimonials carousel ─────────────────────────────────────────────
     A single-slide carousel replacing the static review grid. Reuses Hero's
     slideshow visual language: one quote per slide, prev/next circular
     controls, and dot indicators. The slide crossfades on change; the track
     is a fixed-height stack so the section never jumps between quotes. */
  .testimonial-carousel {
    position: relative;
  }
  .testimonial-track {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  /* Every slide occupies the same grid cell so the tallest quote sets the
     height and there is no layout shift when the active slide changes. */
  .testimonial-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--surface-panel);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s
      linear 0.6s;
  }
  .testimonial-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .dark .testimonial-slide {
    background: var(--surface-panel);
    border-color: var(--border-quiet);
  }
  /* Opening quote mark — the single orange accent of the slide. */
  .testimonial-mark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3rem;
    line-height: 0.6;
    color: oklch(0.68 0.135 52);
  }
  .testimonial-quote {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 42rem;
    color: oklch(0.29 0.012 55);
    text-wrap: pretty;
  }
  @media (min-width: 768px) {
    .testimonial-quote {
      font-size: 1.25rem;
    }
  }
  .dark .testimonial-quote {
    color: oklch(0.95 0.003 260);
  }
  /* Author byline — display name over a quiet mono role line, matching the
     `video-caption` tick rhythm. */
  .testimonial-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .testimonial-author-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    color: oklch(0.29 0.012 55);
  }
  .testimonial-author-name::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 2px;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52); /* orange hairline tick */
  }
  .testimonial-author-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(0.5 0.012 55);
  }
  .dark .testimonial-author-name {
    color: oklch(0.95 0.003 260);
  }
  .dark .testimonial-author-meta {
    color: oklch(0.76 0.004 260);
  }
  /* Controls row — prev/next circular controls flanking the dot indicators.
     The controls reuse the `lightbox-control` charcoal-glass + orange-hairline
     language; on a light card face they use the quiet neutral variant. */
  .testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .testimonial-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--surface-panel);
    color: oklch(0.29 0.012 55);
    border: 1px solid var(--border-quiet);
    transition: var(--transition-smooth);
  }
  .testimonial-control svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .testimonial-control:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
    color: oklch(0.68 0.135 52);
  }
  .testimonial-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  .testimonial-control:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .dark .testimonial-control {
    background: var(--surface-muted);
    color: oklch(0.95 0.003 260);
    border-color: var(--border-quiet);
  }
  /* Dot indicators — quiet neutral hairline dots at rest; the active dot
     stretches into a short burnt-orange pill, the single orange accent of the
     control row. Reuses Hero's dot indicator vocabulary. */
  .testimonial-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .testimonial-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: oklch(0.9 0.004 260);
    transition: var(--transition-smooth);
  }
  .testimonial-dot:hover {
    background: oklch(0.68 0.135 52 / 0.5);
  }
  .testimonial-dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  .testimonial-dot.is-active {
    width: 1.5rem;
    background: oklch(0.68 0.135 52); /* burnt-orange active pill */
  }
  .dark .testimonial-dot {
    background: oklch(0.33 0.004 260);
  }
  .dark .testimonial-dot.is-active {
    background: oklch(0.72 0.135 55);
  }
  /* Reduced-motion: no crossfade — the active slide simply shows. */
  @media (prefers-reduced-motion: reduce) {
    .testimonial-slide {
      transition: none;
    }
    .testimonial-dot {
      transition: none;
    }
  }
  @media (max-width: 767px) {
    .testimonial-slide {
      padding: 1.75rem 1.15rem;
    }
    .testimonial-control {
      width: 44px;
      height: 44px;
    }
  }

  /* ── Availability calendar ─────────────────────────────────────────────
     A quiet month grid marking booked dates for one accommodation listing.
     Day cells are neutral at rest; the four meaningful states are:
       · available  — plain neutral cell, warm-charcoal numeral
       · booked     — deep warm-charcoal fill, light-gray numeral, struck
       · selected   — burnt-orange fill with a deep warm-ink numeral
       · today      — burnt-orange hairline ring (no fill)
     Days outside the current month are muted and non-interactive. Orange
     appears at most once per cluster: the selected fill OR the today ring. */
  .availability-calendar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-panel);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius-card);
  }
  .dark .availability-calendar {
    background: var(--surface-panel);
    border-color: var(--border-quiet);
  }
  /* Month header — display month label flanked by quiet prev/next chevrons. */
  .availability-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .availability-calendar-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    color: oklch(0.29 0.012 55);
  }
  .dark .availability-calendar-title {
    color: oklch(0.95 0.003 260);
  }
  .availability-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: oklch(0.5 0.012 55);
    border: 1px solid var(--border-quiet);
    transition: var(--transition-smooth);
  }
  .availability-calendar-nav svg {
    width: 0.95rem;
    height: 0.95rem;
  }
  .availability-calendar-nav:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
    color: oklch(0.68 0.135 52);
  }
  .availability-calendar-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  /* Weekday header row — small tracked uppercase mono labels. */
  .availability-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
  }
  .availability-calendar-weekday {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(0.5 0.012 55);
  }
  .dark .availability-calendar-weekday {
    color: oklch(0.76 0.004 260);
  }
  /* Day grid — seven equal columns, square-ish cells via aspect-ratio. */
  .availability-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
  }
  .availability-day {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: oklch(0.29 0.012 55);
    font-variant-numeric: tabular-nums;
    transition: var(--transition-smooth);
  }
  .dark .availability-day {
    color: oklch(0.95 0.003 260);
  }
  /* Outside-month — muted, non-interactive filler. */
  .availability-day.is-outside {
    color: oklch(0.72 0.004 260);
    pointer-events: none;
  }
  .dark .availability-day.is-outside {
    color: oklch(0.45 0.004 260);
  }
  /* Today — a burnt-orange hairline ring, no fill. */
  .availability-day.is-today {
    border-color: oklch(0.68 0.135 52 / 0.7);
    font-weight: 600;
  }
  .dark .availability-day.is-today {
    border-color: oklch(0.72 0.135 55 / 0.7);
  }
  /* Booked — deep warm-charcoal fill with light-gray numeral and a struck
     line through the date, so an unavailable night is unmistakable. */
  .availability-day.is-booked {
    background: oklch(0.34 0.025 48);
    color: oklch(0.87 0.004 260);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: oklch(0.68 0.135 52 / 0.7);
    text-decoration-thickness: 1.5px;
  }
  .dark .availability-day.is-booked {
    background: oklch(0.27 0.004 260);
    color: oklch(0.76 0.004 260);
  }
  /* Selected (check-in / check-out) — burnt-orange fill with a deep warm-ink
     numeral, the single loud cell of the grid. */
  .availability-day.is-selected {
    background: var(--gradient-vip-badge);
    color: oklch(0.22 0.02 50);
    border-color: oklch(0.78 0.12 60 / 0.6);
    font-weight: 600;
    box-shadow: 0 2px 6px oklch(0.68 0.135 52 / 0.35);
  }
  .dark .availability-day.is-selected {
    color: oklch(0.19 0.004 260);
  }
  /* In-range — the nights between check-in and check-out: a faint orange tint
     with no fill weight, so the span reads without competing with the ends. */
  .availability-day.is-in-range {
    background: oklch(0.68 0.135 52 / 0.14);
  }
  .dark .availability-day.is-in-range {
    background: oklch(0.72 0.135 55 / 0.18);
  }
  /* Interactive available day — quiet hover tint; focus gets the standard ring. */
  .availability-day.is-available {
    cursor: pointer;
  }
  .availability-day.is-available:hover {
    background: var(--surface-soft);
  }
  .dark .availability-day.is-available:hover {
    background: var(--surface-muted);
  }
  .availability-day:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  /* Legend — a compact key under the grid, one swatch per state. */
  .availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-quiet);
  }
  .availability-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: oklch(0.5 0.012 55);
  }
  .dark .availability-legend-item {
    color: oklch(0.76 0.004 260);
  }
  .availability-legend-swatch {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-quiet);
  }
  .availability-legend-swatch.is-available {
    background: transparent;
  }
  .availability-legend-swatch.is-booked {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.34 0.025 48);
  }
  .availability-legend-swatch.is-selected {
    background: oklch(0.68 0.135 52);
    border-color: oklch(0.68 0.135 52);
  }
  .availability-legend-swatch.is-today {
    background: transparent;
    border-color: oklch(0.68 0.135 52 / 0.7);
  }
  /* Overlap warning on the booking form — a warm-amber advisory (not an
     error): the enquiry is still allowed, so the tone stays cautionary. */
  .availability-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    background: oklch(0.72 0.14 68 / 0.1);
    border: 1px solid oklch(0.72 0.14 68 / 0.4);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(0.45 0.11 62);
  }
  .availability-warning svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: 0.1rem;
    color: oklch(0.62 0.14 62);
  }
  .dark .availability-warning {
    background: oklch(0.78 0.14 68 / 0.12);
    border-color: oklch(0.78 0.14 68 / 0.45);
    color: oklch(0.88 0.1 72);
  }
  @media (max-width: 767px) {
    .availability-calendar {
      padding: 0.75rem;
    }
    .availability-calendar-grid,
    .availability-calendar-weekdays {
      gap: 0.2rem;
    }
    .availability-day {
      font-size: 0.75rem;
      border-radius: 0.4rem;
    }
    .availability-calendar-nav {
      width: 44px;
      height: 44px;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     DESTINATION FILTER · SAVE CONTROL · FILTERED EMPTY STATE
     Fifth additive extension of the Neutral Light Gray + Warm Amber system.
     No token, font, radius, or existing class is redefined. The country filter
     row is the `gallery-filter-chip` segmented control in a wrapping variant;
     the save control is a heart toggle in the charcoal-glass + orange-hairline
     family; the empty state reuses the dashed-hairline panel language. Orange
     stays the single interactive accent; the saved state is the one new
     chromatic token (a warm rose-red) and appears only on a saved heart.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Country / destination filter row ──────────────────────────────────
     A wrapping row of pill chips above the accommodation grid and above the
     car hire grid: "All countries" plus one chip per country present in the
     active listings, each with a mono count badge. Quiet neutral chips at
     rest; the active country fills deep warm charcoal with an orange hairline
     — the same "selected" language as `gallery-filter-chip.is-active` and the
     admin sidebar. Wraps to multiple lines on desktop; scrolls sideways within
     its own region at 360px so the page never goes wide. */
  .country-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .country-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    background: var(--chip-rest);
    border: 1px solid var(--border-quiet);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--chip-rest-foreground);
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .country-filter-chip:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
  }
  .country-filter-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  /* Single orange accent per chip — the "All countries" globe glyph. */
  .country-filter-chip svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: oklch(0.68 0.135 52);
  }
  .country-filter-chip.is-active {
    background: var(--chip-active);
    border-color: oklch(0.68 0.135 52 / 0.6);
    color: var(--chip-active-foreground);
  }
  .country-filter-chip.is-active svg {
    color: var(--chip-active-foreground);
  }
  /* Per-country count badge — mono, quiet, matching the media-readout
     language of `video-duration-badge` / `gallery-filter-count`. */
  .country-filter-count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--chip-count);
    font-variant-numeric: tabular-nums;
  }
  .country-filter-chip.is-active .country-filter-count {
    color: var(--chip-count-active);
  }
  @media (max-width: 767px) {
    .country-filter-row {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      margin-inline: -1rem;
      padding-inline: 1rem;
    }
    .country-filter-row::-webkit-scrollbar {
      display: none;
    }
    .country-filter-row > * {
      flex: none;
      scroll-snap-align: start;
    }
    .country-filter-chip {
      min-height: 44px;
    }
  }

  /* ── Save / favourite heart toggle ─────────────────────────────────────
     One control, three states, used on listing cards and in the detail panel:
       · unsaved  — hairline ghost pill, quiet warm-gray outline heart
       · saved    — warm rose-red fill, light-gray solid heart (the single
                    chromatic moment of the card)
       · hover/focus — orange hairline + burnt-orange focus ring
       · signed-out — same quiet ghost, an orange lock hint; activating opens
                      the sign-in prompt instead of saving.
     Meets the 44px mobile tap minimum. */
  .save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    background: transparent;
    color: oklch(0.29 0.012 55);
    border: 1px solid var(--border-quiet);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .save-button svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }
  .save-button:hover {
    border-color: oklch(0.68 0.135 52 / 0.55);
  }
  .save-button:hover svg {
    color: oklch(0.68 0.135 52);
  }
  .save-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.68 0.135 52 / 0.3);
  }
  /* Saved — the heart fills warm rose-red, the card's single chromatic accent. */
  .save-button.is-saved {
    background: oklch(0.6 0.185 32 / 0.12);
    border-color: oklch(0.6 0.185 32 / 0.45);
    color: oklch(0.48 0.17 30);
  }
  .save-button.is-saved svg {
    color: var(--saved);
    fill: var(--saved);
  }
  .save-button.is-saved:hover {
    border-color: oklch(0.6 0.185 32 / 0.7);
  }
  /* Signed-out — same quiet ghost, with an orange lock hint signalling that
     saving needs a sign-in first. */
  .save-button.is-signed-out svg {
    color: oklch(0.68 0.135 52);
  }
  .save-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .dark .save-button {
    color: oklch(0.95 0.003 260);
    border-color: var(--border-quiet);
  }
  .dark .save-button.is-saved {
    background: oklch(0.66 0.185 32 / 0.16);
    border-color: oklch(0.66 0.185 32 / 0.5);
    color: oklch(0.82 0.14 32);
  }
  .dark .save-button.is-saved svg {
    color: oklch(0.66 0.185 32);
    fill: oklch(0.66 0.185 32);
  }
  /* Icon-only circular variant — for overlay placement on a listing image. */
  .save-button.is-icon {
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
    gap: 0;
    background: oklch(0.29 0.012 55 / 0.72);
    color: oklch(0.95 0.003 260);
    border-color: oklch(0.68 0.135 52 / 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .save-button.is-icon svg {
    color: oklch(0.95 0.003 260);
  }
  .save-button.is-icon.is-saved {
    background: oklch(0.6 0.185 32 / 0.92);
    border-color: oklch(0.75 0.16 34 / 0.7);
  }
  .save-button.is-icon.is-saved svg {
    color: oklch(0.975 0.003 260);
    fill: oklch(0.975 0.003 260);
  }
  /* Positioned variant — floats over the top-right of a listing image,
     opposite the existing top-left `listing-card-badge`. */
  .save-button.is-overlay {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
  }
  @media (max-width: 767px) {
    .save-button {
      min-height: 44px;
    }
    .save-button.is-icon {
      width: 44px;
      height: 44px;
    }
  }

  /* ── Filtered empty state ──────────────────────────────────────────────
     "No listings in this country" — a calm dashed-hairline panel on the
     alternate soft band, with a clear-filter action. Never a blank grid; the
     clear action is the single orange interactive moment. */
  .filter-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--surface-soft);
    border: 1.5px dashed var(--border-quiet);
    border-radius: var(--radius-card);
  }
  .filter-empty-state svg {
    width: 2rem;
    height: 2rem;
    color: oklch(0.68 0.135 52);
  }
  .filter-empty-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: oklch(0.29 0.012 55);
  }
  .filter-empty-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 28rem;
    color: oklch(0.5 0.012 55);
  }
  /* Clear-filter action — quiet ghost pill that turns orange on hover. */
  .filter-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.5rem 1.05rem;
    border-radius: 9999px;
    background: transparent;
    color: oklch(0.29 0.012 55);
    border: 1px solid oklch(0.68 0.135 52 / 0.55);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .filter-empty-action svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    color: oklch(0.68 0.135 52);
  }
  .filter-empty-action:hover {
    background: oklch(0.34 0.025 48);
    border-color: oklch(0.68 0.135 52 / 0.85);
    color: oklch(0.975 0.003 260);
  }
  .filter-empty-action:hover svg {
    color: oklch(0.975 0.003 260);
  }
  .dark .filter-empty-state {
    background: var(--surface-muted);
    border-color: var(--border-quiet);
  }
  .dark .filter-empty-title {
    color: oklch(0.95 0.003 260);
  }
  .dark .filter-empty-text {
    color: oklch(0.76 0.004 260);
  }
  .dark .filter-empty-action {
    color: oklch(0.95 0.003 260);
    border-color: oklch(0.72 0.135 55 / 0.55);
  }
  @media (max-width: 767px) {
    .filter-empty-action {
      min-height: 44px;
    }
  }

  /* ── Price on request ────────────────────────────────────────────────
     The public placeholder shown in place of a price when a listing has no
     rate set. Deliberately distinct from a real price: a dashed, muted panel
     with a question-mark icon and a single orange action that sends the
     visitor to the in-page enquiry section. Never renders a zero or blank. */
  .price-on-request {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1.5px dashed var(--border-quiet);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
  }
  .price-on-request-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: oklch(0.68 0.135 52 / 0.14);
    color: oklch(0.68 0.135 52);
  }
  .price-on-request-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: oklch(0.29 0.012 55);
  }
  .price-on-request-detail-text {
    margin-top: 0.1rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(0.5 0.012 55);
  }
  .price-on-request-action {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-left: auto;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: oklch(0.34 0.025 48);
    color: oklch(0.975 0.003 260);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition-smooth);
  }
  .price-on-request-action:hover {
    background: oklch(0.68 0.135 52);
    color: oklch(0.2 0.02 50);
  }
  .price-on-request-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  }
  .price-on-request-detail {
    padding: 1rem 1.1rem;
  }
  .price-on-request-detail .price-on-request-label {
    font-size: 1.0625rem;
  }
  .dark .price-on-request {
    background: var(--surface-muted);
    border-color: var(--border-quiet);
  }
  .dark .price-on-request-label {
    color: oklch(0.95 0.003 260);
  }
  .dark .price-on-request-detail-text {
    color: oklch(0.76 0.004 260);
  }
  .dark .price-on-request-action {
    background: oklch(0.72 0.135 55);
    color: oklch(0.2 0.02 50);
  }
  .dark .price-on-request-action:hover {
    background: oklch(0.78 0.13 58);
  }
  @media (max-width: 480px) {
    .price-on-request {
      flex-wrap: wrap;
    }
    .price-on-request-action {
      margin-left: 0;
      width: 100%;
      justify-content: center;
      min-height: 44px;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[animation-delay\:120ms\] {
  animation-delay: 120ms;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutral Light Gray + Warm Amber — a light, airy palette built on a
     neutral light-gray field (a whisper of cool neutral, never greige) with a
     single earthy burnt-orange accent. Deep warm charcoal replaces the old
     navy as the structural ink; the warm orange is the only chromatic voice
     and appears once per cluster. Fonts, radii, spacing, layout, wave dividers
     and every component class stay exactly as they were — only color values
     changed. */
  --background: 0.975 0.003 260; /* neutral light-gray surface — airy, never pure white */
  --foreground: 0.29 0.012 55; /* warm charcoal body text — contrast & readability */
  --card: 0.995 0.002 260; /* near-white neutral card face */
  --card-foreground: 0.29 0.012 55;
  --popover: 0.995 0.002 260;
  --popover-foreground: 0.29 0.012 55;
  --primary: 0.34 0.025 48; /* deep warm charcoal — structural accent */
  --primary-foreground: 0.975 0.003 260; /* light gray on warm charcoal */
  --secondary: 0.94 0.004 260; /* soft neutral structural band */
  --secondary-foreground: 0.29 0.012 55; /* warm charcoal on neutral band */
  --muted: 0.955 0.003 260; /* lighter neutral */
  --muted-foreground: 0.5 0.012 55; /* warm gray-slate text */
  --accent: 0.68 0.135 52; /* earthy burnt-orange accent — muted, never neon */
  --accent-foreground: 0.22 0.02 50; /* deep warm ink on the orange fill — AA+
     on bg-accent. Deep warm-charcoal gradient surfaces use
     --primary-foreground (light gray) instead, so this token stays dark. */
  --destructive: 0.52 0.2 25; /* refined red */
  --destructive-foreground: 0.975 0.003 260;
  --success: 0.55 0.13 150; /* harmonized green */
  --success-foreground: 0.975 0.003 260;
  --warning: 0.72 0.14 68; /* warm amber */
  --warning-foreground: 0.22 0.02 50;
  --border: 0.918 0.003 260; /* quieter neutral hairline — cards recede */
  --input: 0.918 0.003 260;
  --ring: 0.68 0.135 52; /* burnt-orange focus ring */

  /* ── Calm, image-led refinement ────────────────────────────────────────
     Photography carries the page: every surface below is a quieter, lower-
     contrast relative of the original so cards never compete with the image.
     Band tones alternate explicitly (canvas → soft → muted) for vertical
     rhythm, and shadows are soft + low-contrast rather than directional. */
  --surface-canvas: 0.978 0.003 260; /* page canvas — airy neutral */
  --surface-soft: 0.962 0.003 260; /* primary alternate band */
  --surface-muted: 0.945 0.003 260; /* deeper alternate band */
  --surface-panel: 0.995 0.002 260; /* card / panel face */
  --border-quiet: 0.928 0.003 260; /* ultra-subtle card hairline */
  --shadow-soft: 0 1px 2px oklch(0.34 0.025 48 / 0.04), 0 6px 20px
    oklch(0.34 0.025 48 / 0.06);
  --shadow-soft-lift: 0 2px 4px oklch(0.34 0.025 48 / 0.05), 0 14px 34px
    oklch(0.34 0.025 48 / 0.1);
  --chart-1: 0.34 0.025 48; /* warm charcoal */
  --chart-2: 0.68 0.135 52; /* burnt orange */
  --chart-3: 0.5 0.012 55; /* warm gray-slate */
  --chart-4: 0.72 0.14 68; /* warm amber */
  --chart-5: 0.52 0.2 25; /* red */
  --sidebar-background: 0.34 0.025 48; /* deep warm charcoal sidebar */
  --sidebar-foreground: 0.975 0.003 260; /* light gray text */
  --sidebar-primary: 0.68 0.135 52; /* burnt-orange active */
  --sidebar-primary-foreground: 0.22 0.02 50; /* deep warm ink on orange */
  --sidebar-accent: 0.42 0.028 48; /* lighter warm charcoal hover */
  --sidebar-accent-foreground: 0.975 0.003 260;
  --sidebar-border: 0.29 0.022 48; /* warm charcoal border */
  --sidebar-ring: 0.68 0.135 52;

  /* Typography — unchanged (Bricolage Grotesque display + DM Sans body) */
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Sans", ui-monospace, monospace;

  /* Gradients — warm-charcoal structure + burnt-orange accent on light gray */
  --gradient-primary: linear-gradient(
    135deg,
    oklch(0.42 0.03 48) 0%,
    oklch(0.34 0.025 48) 50%,
    oklch(0.27 0.022 48) 100%
  );
  --gradient-subtle: linear-gradient(
    180deg,
    oklch(0.975 0.003 260) 0%,
    oklch(0.95 0.004 260) 100%
  );
  --gradient-hero-text: linear-gradient(
    110deg,
    oklch(0.29 0.012 55) 0%,
    oklch(0.4 0.03 48) 55%,
    oklch(0.68 0.135 52) 100%
  );
  /* Warm charcoal scrim for video posters & media cards. Softened so the
     picture stays the dominant element; the banner uses the dedicated
     --gradient-banner-scrim below for its bottom-weighted treatment. */
  --gradient-media: linear-gradient(
    180deg,
    oklch(0.34 0.025 48 / 0) 0%,
    oklch(0.28 0.022 48 / 0.28) 60%,
    oklch(0.22 0.02 48 / 0.6) 100%
  );
  /* Banner-specific scrim — bottom-weighted so the upper part of the picture
     stays clear while the lower text band keeps its contrast. Lighter than the
     shared media scrim so the image reads through. */
  --gradient-banner-scrim: linear-gradient(
    180deg,
    oklch(0.34 0.025 48 / 0) 0%,
    oklch(0.3 0.024 48 / 0.06) 42%,
    oklch(0.26 0.022 48 / 0.34) 72%,
    oklch(0.2 0.018 48 / 0.66) 100%
  );
  /* Warm charcoal gradient for admin sidebar depth */
  --gradient-sidebar: linear-gradient(
    180deg,
    oklch(0.4 0.03 48) 0%,
    oklch(0.29 0.024 48) 100%
  );
  /* Warm charcoal gradient for tour operator / VIP badges */
  --gradient-accent: linear-gradient(
    110deg,
    oklch(0.4 0.03 48) 0%,
    oklch(0.29 0.024 48) 100%
  );
  /* Featured Tour Operators showcase band — warm charcoal spotlight */
  --gradient-showcase: linear-gradient(
    180deg,
    oklch(0.4 0.03 48) 0%,
    oklch(0.29 0.024 48) 100%
  );
  /* VIP badge orange — earthy burnt-orange, muted not neon */
  --gradient-vip-badge: linear-gradient(
    135deg,
    oklch(0.78 0.12 60) 0%,
    oklch(0.68 0.135 52) 50%,
    oklch(0.6 0.13 46) 100%
  );
  /* Empty-state placeholder band — faint warm charcoal with orange dashed cue */
  --gradient-placeholder: linear-gradient(
    180deg,
    oklch(0.34 0.025 48 / 0.4) 0%,
    oklch(0.29 0.024 48 / 0.25) 100%
  );
  /* Lightbox viewer scrim — deep warm-charcoal veil over the page behind the
     centered video, dark enough to keep the orange controls legible. */
  --scrim-lightbox: oklch(0.15 0.015 48 / 0.82);
  --scrim-lightbox-soft: oklch(0.15 0.015 48 / 0.6);

  /* ── Destination filter + save control ─────────────────────────────────
     New OKLCH tokens for the country filter row and the heart save control.
     All are relatives of the existing palette — no new hue is introduced. */
  --chip-rest: 0.962 0.003 260; /* quiet neutral chip face at rest */
  --chip-rest-foreground: 0.29 0.012 55; /* warm-charcoal chip label */
  --chip-active: 0.34 0.025 48; /* deep warm-charcoal active chip fill */
  --chip-active-foreground: 0.975 0.003 260; /* light gray on active chip */
  --chip-count: 0.5 0.012 55; /* mono count readout inside a chip */
  --chip-count-active: 0.87 0.004 260; /* count on the active charcoal fill */
  --saved: 0.6 0.185 32; /* warm rose-red — the single "saved" accent */
  --saved-foreground: 0.975 0.003 260; /* light gray on the saved fill */
  --focus-ring: 0.68 0.135 52; /* burnt-orange focus ring (same as --ring) */

  /* Motion */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 0.75rem;
  --radius-card: 1rem;
  --radius-media: 1.25rem;
}

.dark {
  /* Neutral Light Gray + Warm Amber — dark-gray dark mode, warm orange accent */
  --background: 0.19 0.004 260; /* dark neutral gray */
  --foreground: 0.95 0.003 260; /* light gray */
  --card: 0.23 0.004 260; /* dark gray card */
  --card-foreground: 0.95 0.003 260;
  --popover: 0.23 0.004 260;
  --popover-foreground: 0.95 0.003 260;
  --primary: 0.72 0.135 55; /* warm burnt-orange */
  --primary-foreground: 0.2 0.02 50; /* deep warm ink on orange */
  --secondary: 0.27 0.004 260; /* lighter dark gray */
  --secondary-foreground: 0.93 0.003 260;
  --muted: 0.25 0.004 260;
  --muted-foreground: 0.76 0.004 260;
  --accent: 0.72 0.135 55; /* warm burnt-orange accent */
  --accent-foreground: 0.2 0.02 50;
  --destructive: 0.58 0.2 25;
  --destructive-foreground: 0.95 0.003 260;
  --success: 0.6 0.14 150;
  --success-foreground: 0.19 0.004 260;
  --warning: 0.78 0.14 68;
  --warning-foreground: 0.19 0.004 260;
  --border: 0.3 0.004 260; /* quieter dark hairline — cards recede */
  --input: 0.3 0.004 260;
  --ring: 0.72 0.135 55;

  /* Calm, image-led refinement — dark band tones + soft shadows */
  --surface-canvas: 0.185 0.004 260;
  --surface-soft: 0.215 0.004 260;
  --surface-muted: 0.245 0.004 260;
  --surface-panel: 0.225 0.004 260;
  --border-quiet: 0.29 0.004 260;
  --shadow-soft: 0 1px 2px oklch(0.1 0.006 260 / 0.4), 0 6px 20px
    oklch(0.1 0.006 260 / 0.35);
  --shadow-soft-lift: 0 2px 4px oklch(0.1 0.006 260 / 0.45), 0 14px 34px
    oklch(0.1 0.006 260 / 0.5);
  --chart-1: 0.72 0.135 55;
  --chart-2: 0.4 0.03 48;
  --chart-3: 0.6 0.004 260;
  --chart-4: 0.78 0.14 68;
  --chart-5: 0.58 0.2 25;
  --sidebar-background: 0.17 0.004 260;
  --sidebar-foreground: 0.95 0.003 260;
  --sidebar-primary: 0.72 0.135 55;
  --sidebar-primary-foreground: 0.2 0.02 50;
  --sidebar-accent: 0.27 0.004 260;
  --sidebar-accent-foreground: 0.95 0.003 260;
  --sidebar-border: 0.27 0.004 260;
  --sidebar-ring: 0.72 0.135 55;

  --gradient-primary: linear-gradient(
    135deg,
    oklch(0.78 0.12 60) 0%,
    oklch(0.72 0.135 55) 50%,
    oklch(0.64 0.13 48) 100%
  );
  --gradient-subtle: linear-gradient(
    180deg,
    oklch(0.19 0.004 260) 0%,
    oklch(0.23 0.004 260) 100%
  );
  --gradient-hero-text: linear-gradient(
    110deg,
    oklch(0.95 0.003 260) 0%,
    oklch(0.88 0.004 260) 55%,
    oklch(0.72 0.135 55) 100%
  );
  --gradient-media: linear-gradient(
    180deg,
    oklch(0.72 0.135 55 / 0) 0%,
    oklch(0.3 0.01 260 / 0.32) 60%,
    oklch(0.2 0.008 260 / 0.66) 100%
  );
  --gradient-banner-scrim: linear-gradient(
    180deg,
    oklch(0.72 0.135 55 / 0) 0%,
    oklch(0.28 0.01 260 / 0.08) 42%,
    oklch(0.22 0.008 260 / 0.38) 72%,
    oklch(0.16 0.006 260 / 0.72) 100%
  );
  --gradient-sidebar: linear-gradient(
    180deg,
    oklch(0.25 0.004 260) 0%,
    oklch(0.18 0.004 260) 100%
  );
  --gradient-accent: linear-gradient(
    110deg,
    oklch(0.27 0.004 260) 0%,
    oklch(0.19 0.004 260) 100%
  );
  --gradient-showcase: linear-gradient(
    180deg,
    oklch(0.25 0.004 260) 0%,
    oklch(0.18 0.004 260) 100%
  );
  --gradient-vip-badge: linear-gradient(
    135deg,
    oklch(0.8 0.12 60) 0%,
    oklch(0.72 0.135 55) 50%,
    oklch(0.64 0.13 48) 100%
  );
  --gradient-placeholder: linear-gradient(
    180deg,
    oklch(0.25 0.004 260 / 0.5) 0%,
    oklch(0.19 0.004 260 / 0.3) 100%
  );
  --scrim-lightbox: oklch(0.12 0.006 260 / 0.88);
  --scrim-lightbox-soft: oklch(0.12 0.006 260 / 0.7);

  /* Destination filter + save control — dark mode */
  --chip-rest: 0.27 0.004 260;
  --chip-rest-foreground: 0.95 0.003 260;
  --chip-active: 0.72 0.135 55; /* warm burnt-orange active chip */
  --chip-active-foreground: 0.2 0.02 50; /* deep warm ink on orange */
  --chip-count: 0.76 0.004 260;
  --chip-count-active: 0.2 0.02 50;
  --saved: 0.66 0.185 32; /* warm rose-red lifted for dark surfaces */
  --saved-foreground: 0.19 0.004 260;
  --focus-ring: 0.72 0.135 55;
}

@theme inline {
  --color-background: oklch(var(--background));
  --color-foreground: oklch(var(--foreground));
  --color-card: oklch(var(--card));
  --color-card-foreground: oklch(var(--card-foreground));
  --color-popover: oklch(var(--popover));
  --color-popover-foreground: oklch(var(--popover-foreground));
  --color-primary: oklch(var(--primary));
  --color-primary-foreground: oklch(var(--primary-foreground));
  --color-secondary: oklch(var(--secondary));
  --color-secondary-foreground: oklch(var(--secondary-foreground));
  --color-muted: oklch(var(--muted));
  --color-muted-foreground: oklch(var(--muted-foreground));
  --color-accent: oklch(var(--accent));
  --color-accent-foreground: oklch(var(--accent-foreground));
  --color-destructive: oklch(var(--destructive));
  --color-destructive-foreground: oklch(var(--destructive-foreground));
  --color-success: oklch(var(--success));
  --color-success-foreground: oklch(var(--success-foreground));
  --color-warning: oklch(var(--warning));
  --color-warning-foreground: oklch(var(--warning-foreground));
  --color-border: oklch(var(--border));
  --color-input: oklch(var(--input));
  --color-ring: oklch(var(--ring));
  --color-chip-rest: oklch(var(--chip-rest));
  --color-chip-rest-foreground: oklch(var(--chip-rest-foreground));
  --color-chip-active: oklch(var(--chip-active));
  --color-chip-active-foreground: oklch(var(--chip-active-foreground));
  --color-chip-count: oklch(var(--chip-count));
  --color-chip-count-active: oklch(var(--chip-count-active));
  --color-saved: oklch(var(--saved));
  --color-saved-foreground: oklch(var(--saved-foreground));
  --color-focus-ring: oklch(var(--focus-ring));
  --color-chart-1: oklch(var(--chart-1));
  --color-chart-2: oklch(var(--chart-2));
  --color-chart-3: oklch(var(--chart-3));
  --color-chart-4: oklch(var(--chart-4));
  --color-chart-5: oklch(var(--chart-5));
  --color-sidebar-background: oklch(var(--sidebar-background));
  --color-sidebar-foreground: oklch(var(--sidebar-foreground));
  --color-sidebar-primary: oklch(var(--sidebar-primary));
  --color-sidebar-primary-foreground: oklch(var(--sidebar-primary-foreground));
  --color-sidebar-accent: oklch(var(--sidebar-accent));
  --color-sidebar-accent-foreground: oklch(var(--sidebar-accent-foreground));
  --color-sidebar-border: oklch(var(--sidebar-border));
  --color-sidebar-ring: oklch(var(--sidebar-ring));
  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-mono: var(--font-mono);
  --radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .animate-fade-up,
  .float-slow,
  .shimmer-sundown,
  .animate-marquee-scroll,
  .animate-badge-shine,
  .animate-star-pop,
  .animate-carousel-slide {
    animation: none !important;
  }

  /* Testimonials carousel — no crossfade or slide; the active slide shows
     immediately and the controls stay available for manual navigation. */
  .testimonial-slide {
    transition: none !important;
  }
  .testimonial-dot {
    transition: none !important;
  }

  .star-rating-input button:hover {
    transform: none !important;
  }

  .video-lightbox,
  .video-lightbox-stage,
  .photo-lightbox,
  .photo-lightbox-stage {
    animation: none !important;
  }

  .group:hover .group-hover\:scale-105,
  .group-hover\:scale-105 {
    transform: none !important;
  }
}

.selection\:bg-primary *::-moz-selection {
  background-color: oklch(var(--primary));
}

.selection\:bg-primary *::selection {
  background-color: oklch(var(--primary));
}

.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection {
  background-color: oklch(var(--primary));
}

.selection\:bg-primary::selection {
  background-color: oklch(var(--primary));
}

.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}

.file\:mr-2::file-selector-button {
  margin-right: 0.5rem;
}

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

.file\:inline-flex::file-selector-button {
  display: inline-flex;
}

.file\:h-7::file-selector-button {
  height: 1.75rem;
}

.file\:rounded-full::file-selector-button {
  border-radius: 9999px;
}

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

.file\:bg-primary::file-selector-button {
  background-color: oklch(var(--primary));
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

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

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

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

.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:font-body::file-selector-button {
  font-family: DM Sans, system-ui, -apple-system, Segoe UI, sans-serif;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

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

.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}

.file\:text-primary-foreground::file-selector-button {
  color: oklch(var(--primary-foreground));
}

  .file\:font-body::file-selector-button {
    font-family: var(--font-body);
  }

.placeholder\:text-muted-foreground::-moz-placeholder {
  color: oklch(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::placeholder {
  color: oklch(var(--muted-foreground));
}

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

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

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

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

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --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));
}
  .fun-on-tour-grid .video-card > .after\:absolutebutton::after {
    content: var(--tw-content);
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

.first\:rounded-l-md:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

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

.last\:rounded-r-md:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

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

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

.focus-within\:ring-ring:focus-within {
  --tw-ring-color: oklch(var(--ring));
}

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

.focus-within\:ring-offset-background:focus-within {
  --tw-ring-offset-color: oklch(var(--background));
}

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

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

.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-accent:hover {
  border-color: oklch(var(--accent));
}

.hover\:border-primary:hover {
  border-color: oklch(var(--primary));
}

.hover\:bg-accent:hover {
  background-color: oklch(var(--accent));
}

.hover\:bg-card:hover {
  background-color: oklch(var(--card));
}

.hover\:bg-destructive:hover {
  background-color: oklch(var(--destructive));
}

.hover\:bg-muted:hover {
  background-color: oklch(var(--muted));
}

.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}

.hover\:text-accent:hover {
  color: oklch(var(--accent));
}

.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}

.hover\:text-destructive:hover {
  color: oklch(var(--destructive));
}

.hover\:text-destructive-foreground:hover {
  color: oklch(var(--destructive-foreground));
}

.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  color: oklch(var(--muted-foreground));
}

.hover\:text-primary:hover {
  color: oklch(var(--primary));
}

.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}

.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-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 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);
}

.hover\:shadow-card-lift:hover {
  --tw-shadow: 0 6px 16px oklch(0.34 0.025 48 / 0.16), 0 1px 3px oklch(0.34 0.025 48 / 0.1), 0 0 0 1px oklch(0.68 0.135 52 / 0.35);
  --tw-shadow-colored: 0 6px 16px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color), 0 0 0 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);
}

.hover\:shadow-elevated:hover {
  --tw-shadow: 0 2px 8px oklch(0.34 0.025 48 / 0.12), 0 1px 2px oklch(0.34 0.025 48 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color), 0 1px 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\:ring-2:hover {
  --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);
}

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

.hover\:ring-primary:hover {
  --tw-ring-color: oklch(var(--primary));
}

  .hover\:shadow-elevated:hover {
    box-shadow: 0 2px 8px oklch(0.34 0.025 48 / 0.12), 0 1px 2px
      oklch(0.34 0.025 48 / 0.08);
  }
  .hover\:shadow-card-lift:hover {
    box-shadow: 0 6px 16px oklch(0.34 0.025 48 / 0.16), 0 1px 3px
      oklch(0.34 0.025 48 / 0.1);
    border: 1px solid oklch(0.68 0.135 52 / 0.4);
  }
  .bg-gradient-showcase .hover\:bg-card:hover,
  .bg-gradient-sidebar .hover\:bg-card:hover { /* warm charcoal on light card */ /* warm gray-slate on light card */
    --foreground: 0.29 0.012 55; /* warm charcoal on light card */
    --muted-foreground: 0.5 0.012 55; /* warm gray-slate on light card */
  }

.hover\:file\:opacity-90::file-selector-button:hover {
  opacity: 0.9;
}

.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

.focus\:z-10:focus {
  z-index: 10;
}

.focus\:border-primary:focus {
  border-color: oklch(var(--primary));
}

.focus\:border-ring:focus {
  border-color: oklch(var(--ring));
}

.focus\:bg-accent:focus {
  background-color: oklch(var(--accent));
}

.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}

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

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

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

.focus\:ring-accent:focus {
  --tw-ring-color: oklch(var(--accent));
}

.focus\:ring-primary:focus {
  --tw-ring-color: oklch(var(--primary));
}

.focus\:ring-ring:focus {
  --tw-ring-color: oklch(var(--ring));
}

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

.focus-visible\:z-10:focus-visible {
  z-index: 10;
}

.focus-visible\:border-accent:focus-visible {
  border-color: oklch(var(--accent));
}

.focus-visible\:border-ring:focus-visible {
  border-color: oklch(var(--ring));
}

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

.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring));
}

.focus-visible\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-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-4: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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[3px\]: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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-primary-foreground:focus-visible {
  --tw-ring-color: oklch(var(--primary-foreground));
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: oklch(var(--ring));
}

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

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

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}

.focus-visible\:ring-offset-card:focus-visible {
  --tw-ring-offset-color: oklch(var(--card));
}

.focus-visible\:ring-offset-primary:focus-visible {
  --tw-ring-offset-color: oklch(var(--primary));
}

.focus-visible\:ring-offset-secondary:focus-visible {
  --tw-ring-offset-color: oklch(var(--secondary));
}

.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

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

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

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

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

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

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

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes badge-shine {

  0% {
    transform: translateX(-120%) skewX(-12deg);
  }

  100% {
    transform: translateX(220%) skewX(-12deg);
  }
}

.group:hover .group-hover\:animate-badge-shine {
  animation: badge-shine 0.7s ease-out;
}

.group:hover .group-hover\:text-background {
  color: oklch(var(--background));
}

.group:hover .group-hover\:text-primary-foreground {
  color: oklch(var(--primary-foreground));
}

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

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

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: oklch(var(--muted-foreground));
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}

.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --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));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --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));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  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));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: 0.375rem;
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: 0.375rem;
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"] {
  border-color: oklch(var(--ring));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  border-color: oklch(var(--primary));
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  background-color: oklch(var(--primary));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  background-color: oklch(var(--accent));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  background-color: oklch(var(--primary));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  background-color: oklch(var(--primary));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  background-color: oklch(var(--accent));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: oklch(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: oklch(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: oklch(var(--accent));
}

.data-\[state\=open\]\:bg-muted[data-state="open"] {
  background-color: oklch(var(--muted));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: oklch(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  color: oklch(var(--destructive));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: oklch(var(--muted-foreground));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: oklch(var(--muted-foreground));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  color: oklch(var(--destructive));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --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);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
  
  .bg-gradient-showcase .data-\[state\=active\]\:bg-background[data-state="active"],
  .bg-gradient-sidebar .data-\[state\=active\]\:bg-background[data-state="active"] { /* warm charcoal on light card */ /* warm gray-slate on light card */
    --foreground: 0.29 0.012 55; /* warm charcoal on light card */
    --muted-foreground: 0.5 0.012 55; /* warm gray-slate on light card */
  }

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --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));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  background-color: oklch(var(--accent));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: oklch(var(--accent));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  background-color: oklch(var(--accent));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: oklch(var(--accent));
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  color: oklch(var(--destructive));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: 0.5rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: 0.375rem;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  border-color: oklch(var(--ring));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --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);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar-background));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

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

  @keyframes pulse {

    50% {
      opacity: .5;
    }
  }

  .motion-safe\:animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

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

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

.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:text-muted-foreground:is(.dark *) {
  color: oklch(var(--muted-foreground));
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}

@media not all and (min-width: 768px) {

  .max-md\:mt-auto {
    margin-top: auto;
  }

  .max-md\:flex {
    display: flex;
  }

  .max-md\:flex-col {
    flex-direction: column;
  }

  .max-md\:flex-col-reverse {
    flex-direction: column-reverse;
  }

  .max-md\:items-stretch {
    align-items: stretch;
  }

  .max-md\:rounded-none {
    border-radius: 0px;
  }

  .max-md\:p-0 {
    padding: 0px;
  }

  .max-md\:pt-4 {
    padding-top: 1rem;
  }
}

@media (min-width: 400px) {

  .min-\[400px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {

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

  .sm\:-bottom-5 {
    bottom: -1.25rem;
  }

  .sm\:bottom-5 {
    bottom: 1.25rem;
  }

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

  .sm\:right-5 {
    right: 1.25rem;
  }

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

  .sm\:ml-auto {
    margin-left: auto;
  }

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

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:min-h-\[56vh\] {
    min-height: 56vh;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-44 {
    width: 11rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-40 {
    min-width: 10rem;
  }

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

  .sm\:max-w-\[calc\(50\%-0\.5rem\)\] {
    max-width: calc(50% - 0.5rem);
  }

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

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

  .sm\:max-w-none {
    max-width: none;
  }

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

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

  .sm\:flex-none {
    flex: none;
  }

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

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

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

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

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

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

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

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

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

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

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

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

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

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

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

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

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

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

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

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

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

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

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

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

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

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

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

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  @media (max-width: 767px) {
    .sm\:tap-target {
      min-height: 44px;
    }

    /* Full-width primary actions on mobile so they are easy to hit and read
       as the single clear next step. */

    /* Traveller Stories surfaces — every interactive control reaches the
       44px mobile minimum. These are the same controls the public site's
       tap-target utility covers elsewhere; the stories components use their
       own class language, so the guard is applied here rather than by
       editing each component. Desktop sizing is untouched. */

    /* ── Admin stacked-card tables ────────────────────────────────────────
       Wide admin tables become stacked card rows on phones. Each row turns
       into a card and every cell shows its column label above the value, so
       no field is lost and nothing scrolls sideways. The label comes from
       the matching <th> via `data-label` on the <td>; cells without a label
       (e.g. an image or an actions cell) simply render their content. */
    /* Numeric cells keep their right alignment inside the value column. */

    /* ── Admin full-height scrollable dialog ──────────────────────────────
       Admin edit dialogs fill the phone viewport and scroll their body, so
       long forms stay reachable and the header/actions stay put. Applied by
       adding `.admin-sheet-dialog` to the DialogContent. */
  }
  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }
  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

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

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

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

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-12 {
    height: 3rem;
  }

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

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:auto-rows-\[200px\] {
    grid-auto-rows: 200px;
  }

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

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

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

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

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

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

  .md\:gap-14 {
    gap: 3.5rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:pr-14 {
    padding-right: 3.5rem;
  }

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

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

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

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

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

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }
  .fun-on-tour-grid .video-card > button.md\:absolute {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }
  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\: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);
  }
}

@media (min-width: 1024px) {

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

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:min-h-\[70vh\] {
    min-height: 70vh;
  }

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

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

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

  .lg\:grid-cols-\[1fr_1\.25fr\] {
    grid-template-columns: 1fr 1.25fr;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

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

@media (min-width: 1280px) {

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

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

  .xl\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  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));
}

.\[\&\>button\]\:hidden>button {
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  color: oklch(var(--muted-foreground));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --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));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground));
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted));
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted));
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: oklch(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  color: oklch(var(--muted-foreground));
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover {
  background-color: oklch(var(--accent));
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}