*, ::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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), 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;
}
  :root {
    --font-display: "Oswald", "Bricolage Grotesque", sans-serif;
    --font-body: "Inter", "General Sans", sans-serif;
    --font-mono: "JetBrains Mono", "Geist Mono", monospace;

    --radius: 0;

    /* Global announcement bar height — the persistent red top banner rendered
       above the fixed navbar on every page. The fixed Nav offsets itself by
       this value (top-[var(--announcement-bar-height)]) so the bar never
       overlaps the nav, and the vigil spotlight section uses it in its
       scroll-margin so in-page anchor scrolling clears the fixed header. */
    --announcement-bar-height: 2.5rem;

    /* Cinematic Civic — deep blue is the default; light is a constrained inverse.
       The hero placeholder deep blue (oklch 0.22 0.08 255) is now the universal
       background. --background sits one step darker than --navy so the two tokens
       stay distinguishable (navy is used for section backgrounds like the footer). */
    --background: 0.145 0.02 265;
    --foreground: 0.98 0.005 250;
    --card: 0.21 0.035 262;
    --card-foreground: 0.98 0.005 250;
    --popover: 0.21 0.035 262;
    --popover-foreground: 0.98 0.005 250;

    --primary: 0.55 0.22 25;
    --primary-foreground: 0.98 0.005 250;

    --secondary: 0.19 0.03 262;
    --secondary-foreground: 0.98 0.005 250;

    --muted: 0.2 0.03 262;
    --muted-foreground: 0.74 0.04 255;

    --accent: 0.55 0.22 25;
    --accent-foreground: 0.98 0.005 250;

    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.98 0.005 250;

    --border: 0.3 0.04 262;
    --input: 0.3 0.04 262;
    --ring: 0.55 0.22 25;

    --navy: 0.185 0.03 262;

    --chart-1: 0.55 0.22 25;
    --chart-2: 0.22 0.08 255;
    --chart-3: 0.98 0.005 250;
    --chart-4: 0.74 0.04 255;
    --chart-5: 0.45 0.12 25;

    --sidebar: 0.26 0.08 255;
    --sidebar-foreground: 0.98 0.005 250;
    --sidebar-primary: 0.55 0.22 25;
    --sidebar-primary-foreground: 0.98 0.005 250;
    --sidebar-accent: 0.22 0.08 255;
    --sidebar-accent-foreground: 0.98 0.005 250;
    --sidebar-border: 0.3 0.08 255;
    --sidebar-ring: 0.55 0.22 25;

    /* Gallery + Admin dashboard extension — layered surfaces on the deep-blue canvas.
       Upload zone sits one step above background; admin card one step above that.
       Lightbox backdrop is a near-opaque deep-blue scrim darker than background for focus.
       Destructive-soft is a muted red wash for delete confirmations. */
    --upload-zone: 0.22 0.06 255;
    --upload-zone-hover: 0.24 0.07 255;
    --upload-zone-active: 0.2 0.1 25;
    --admin-card: 0.28 0.08 255;
    --admin-card-hover: 0.3 0.08 255;
    --lightbox-backdrop: 0.1 0.06 255;
    --destructive-soft: 0.3 0.1 25;

    /* Blog CMS extension — cinematic covers, narrow reading column, dark composer.
       Hero card sits one step above --card for the featured post; blog grid card
       reuses --card at 40% with backdrop-blur for the translucent blue-tinted look.
       Cover-fallback is a blue-tinted neutral (distinct from --card) so a failed
       cover shows a placeholder, not a void. Prose tokens tune the reading column:
       bright white headings, soft blue-tinted grey body, softer still for metadata.
       Status badges: muted amber for draft, success green for published. Composer
       surface sits one step above --admin-card for the publishing dashboard. */
    --blog-hero-card: 0.3 0.08 255;
    --blog-card: 0.26 0.08 255;
    --blog-cover-fallback: 0.2 0.06 255;
    --blog-prose-heading: 0.98 0.005 250;
    --blog-prose-body: 0.78 0.025 255;
    --blog-prose-muted: 0.62 0.025 255;
    --status-draft: 0.7 0.15 85;
    --status-draft-foreground: 0.16 0.04 85;
    --status-published: 0.62 0.16 150;
    --status-published-foreground: 0.14 0.04 150;
    --composer-surface: 0.24 0.08 255;

    /* ArticleCard + /real-british-history hub extension — per-category pill
       accents so the two hubs are distinguishable at a glance. Blog keeps the
       red --primary (via .category-pill.is-blog); Real British History uses
       a blue-tinted azure accent distinct from red. Hub-header tokens reuse
       existing --blog-prose-heading / --muted-foreground / --blog-prose-body. */
    --category-rbh: 0.6 0.14 235;
    --category-rbh-foreground: 0.14 0.04 235;

    --gradient-scrim: linear-gradient(
      to bottom,
      oklch(0.145 0.02 265) 0%,
      oklch(0.145 0.02 265 / 0.35) 22%,
      oklch(0.145 0.02 265 / 0.05) 50%,
      oklch(0.145 0.02 265 / 0.55) 78%,
      oklch(0.145 0.02 265) 100%
    );
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    /* Dark is the canonical theme — tokens mirror :root intentionally. */
    --background: 0.145 0.02 265;
    --foreground: 0.98 0.005 250;
    --card: 0.21 0.035 262;
    --card-foreground: 0.98 0.005 250;
    --popover: 0.21 0.035 262;
    --popover-foreground: 0.98 0.005 250;

    --primary: 0.55 0.22 25;
    --primary-foreground: 0.98 0.005 250;

    --secondary: 0.19 0.03 262;
    --secondary-foreground: 0.98 0.005 250;

    --muted: 0.2 0.03 262;
    --muted-foreground: 0.74 0.04 255;

    --accent: 0.55 0.22 25;
    --accent-foreground: 0.98 0.005 250;

    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.98 0.005 250;

    --border: 0.3 0.04 262;
    --input: 0.3 0.04 262;
    --ring: 0.55 0.22 25;

    --navy: 0.185 0.03 262;

    --chart-1: 0.55 0.22 25;
    --chart-2: 0.22 0.08 255;
    --chart-3: 0.98 0.005 250;
    --chart-4: 0.74 0.04 255;
    --chart-5: 0.45 0.12 25;

    --sidebar: 0.26 0.08 255;
    --sidebar-foreground: 0.98 0.005 250;
    --sidebar-primary: 0.55 0.22 25;
    --sidebar-primary-foreground: 0.98 0.005 250;
    --sidebar-accent: 0.22 0.08 255;
    --sidebar-accent-foreground: 0.98 0.005 250;
    --sidebar-border: 0.3 0.08 255;
    --sidebar-ring: 0.55 0.22 25;

    /* Gallery + Admin dashboard extension — mirror :root in dark (canonical). */
    --upload-zone: 0.22 0.06 255;
    --upload-zone-hover: 0.24 0.07 255;
    --upload-zone-active: 0.2 0.1 25;
    --admin-card: 0.28 0.08 255;
    --admin-card-hover: 0.3 0.08 255;
    --lightbox-backdrop: 0.1 0.06 255;
    --destructive-soft: 0.3 0.1 25;

    /* Blog CMS extension — mirror :root in dark (canonical theme). */
    --blog-hero-card: 0.3 0.08 255;
    --blog-card: 0.26 0.08 255;
    --blog-cover-fallback: 0.2 0.06 255;
    --blog-prose-heading: 0.98 0.005 250;
    --blog-prose-body: 0.78 0.025 255;
    --blog-prose-muted: 0.62 0.025 255;
    --status-draft: 0.7 0.15 85;
    --status-draft-foreground: 0.16 0.04 85;
    --status-published: 0.62 0.16 150;
    --status-published-foreground: 0.14 0.04 150;
    --composer-surface: 0.24 0.08 255;

    /* ArticleCard + /real-british-history hub extension — mirror :root in dark. */
    --category-rbh: 0.6 0.14 235;
    --category-rbh-foreground: 0.14 0.04 235;
  }

  * {
  border-color: oklch(var(--border));
}

  html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    /* Universal midnight base — painted on <html> (the canvas) so the fixed
       ambient mesh layers below can sit between the canvas and page content. */
    background-color: #030712;
    /* Horizontal-scroll guard: entrance-right elements begin at
       translateX(5rem) and can momentarily extend past the right viewport
       edge on narrow phones (<380px) in sections without their own
       overflow clipping. `clip` avoids creating a new scroll container;
       `hidden` is the fallback for older WebKit. Vertical scrolling is
       untouched. */
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
  }

  body {
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -moz-osx-font-smoothing: grayscale;
    /* Deliberately NO opaque background on <body>: the html canvas paints the
       deep midnight base and body::before / body::after (fixed, z-index -1)
       paint the ambient mesh + vignette. An opaque body background would
       cover both fixed layers (negative-z boxes paint before in-flow
       descendant backgrounds in the root stacking context). */
    background-color: transparent;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Same horizontal-scroll guard as <html> (belt-and-braces: some mobile
       browsers propagate overflow from body, others from html). */
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

  /* ── Universal ambient background atmosphere ──────────────────────────
     Deep midnight navy base (#030712 → #0B1220) with smooth dual radial
     mesh glows: a cool neon cobalt / electric blue ambient anchored
     top-right + center-right, balanced by a subtle deep crimson / ruby
     undertone on the bottom-left. Rendered on a fixed, viewport-sized
     body::before layer at z-index -1 so EVERY page, section, and card
     (root layout + main wrapper are transparent) carries the same
     cohesive dark aesthetic while content scrolls above it. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #030712;
    background-image: radial-gradient(
        1100px 750px at 82% 8%,
        rgba(30, 58, 138, 0.35),
        rgba(2, 132, 199, 0.2) 45%,
        transparent 72%
      ),
      radial-gradient(
        950px 700px at 100% 48%,
        rgba(2, 132, 199, 0.16),
        transparent 65%
      ),
      radial-gradient(
        1000px 800px at 6% 96%,
        rgba(185, 28, 28, 0.2),
        rgba(225, 29, 72, 0.12) 45%,
        transparent 72%
      ), linear-gradient(180deg, #030712 0%, #0b1220 55%, #030712 100%);
  }

  /* Smooth metallic brushed / vignette overlay — a fixed radial vignette
     with a faint cool sheen and a glowing blue perimeter accent hugging
     the viewport edges. Paints above the mesh (later sibling in the same
     negative-z layer) and below all content. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        130% 130% at 50% 40%,
        transparent 55%,
        rgba(2, 6, 18, 0.45) 100%
      ),
      linear-gradient(
        115deg,
        rgba(148, 163, 184, 0.04) 0%,
        transparent 30%,
        rgba(148, 163, 184, 0.03) 55%,
        transparent 80%
      );
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08), inset 0 0 120px
      rgba(30, 58, 138, 0.12);
  }

  ::-moz-selection {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
  }

  ::selection {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@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 !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-9 {
  top: -2.25rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-\[88px\] {
  bottom: 88px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.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-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-\[var\(--announcement-bar-height\)\] {
  top: var(--announcement-bar-height);
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[110\] {
  z-index: 110;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[9999\] {
  z-index: 9999;
}
.z-\[99\] {
  z-index: 99;
}
.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;
}
.-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;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.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-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.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-block {
  display: inline-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;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.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-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-1\/3 {
  height: 33.333333%;
}
.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-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-3\/5 {
  height: 60%;
}
.h-4 {
  height: 1rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[1em\] {
  height: 1em;
}
.h-\[600px\] {
  height: 600px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--announcement-bar-height\)\] {
  height: var(--announcement-bar-height);
}
.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-screen {
  height: 100vh;
}
.h-svh {
  height: 100svh;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[26rem\] {
  min-height: 26rem;
}
.min-h-\[28rem\] {
  min-height: 28rem;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[60dvh\] {
  min-height: 60dvh;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[65dvh\] {
  min-height: 65dvh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.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-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.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-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[15rem\] {
  width: 15rem;
}
.w-\[1em\] {
  width: 1em;
}
.w-\[85\%\] {
  width: 85%;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-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-\[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-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.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-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-center {
  transform-origin: center;
}
.-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-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-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-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-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));
}
.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 headline-rise {

  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-\[headline-rise_0\.7s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_0\.15s_both\] {
  animation: headline-rise 0.7s cubic-bezier(0.4,0,0.2,1) 0.15s both;
}
@keyframes hero-fade-in {

  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-\[hero-fade-in_0\.8s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)_both\] {
  animation: hero-fade-in 0.8s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes lightbox-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate-\[lightbox-fade_0\.2s_ease-out_both\] {
  animation: lightbox-fade 0.2s ease-out both;
}
@keyframes pulse {

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.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;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-mt-20 {
  scroll-margin-top: 5rem;
}
.scroll-mt-\[calc\(var\(--announcement-bar-height\)\+4rem\)\] {
  scroll-margin-top: calc(var(--announcement-bar-height) + 4rem);
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: 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-\[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-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.\!justify-start {
  justify-content: flex-start !important;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.\!justify-items-center {
  justify-items: center !important;
}
.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-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-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.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));
}
.self-start {
  align-self: flex-start;
}
.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;
}
.overflow-x-clip {
  overflow-x: clip;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.\!rounded-none {
  border-radius: 0 !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 0;
}
.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;
}
.rounded-md {
  border-radius: 0;
}
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: 0;
}
.rounded-xl {
  border-radius: 0;
}
.rounded-b-2xl {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-b-xl {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-l-md {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-r-md {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-t-xl {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-tl-sm {
  border-top-left-radius: 0;
}
.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-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.border-blue-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.border-border {
  border-color: oklch(var(--border));
}
.border-foreground {
  border-color: oklch(var(--foreground));
}
.border-input {
  border-color: oklch(var(--input));
}
.border-muted {
  --tw-border-opacity: 1;
  border-color: oklch(var(--muted) / var(--tw-border-opacity, 1));
}
.border-neutral-800 {
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-red-900\/40 {
  border-color: rgb(127 29 29 / 0.4);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-primary {
  --tw-border-opacity: 1;
  border-top-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#00247D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 36 125 / var(--tw-bg-opacity, 1));
}
.bg-\[\#030712\] {
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}
.bg-\[\#030712\]\/35 {
  background-color: rgb(3 7 18 / 0.35);
}
.bg-\[oklch\(var\(--status-draft\)\)\] {
  background-color: oklch(var(--status-draft));
}
.bg-\[oklch\(var\(--status-published\)\)\] {
  background-color: oklch(var(--status-published));
}
.bg-\[oklch\(var\(--upload-zone\)\)\] {
  background-color: oklch(var(--upload-zone));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-700\/15 {
  background-color: rgb(29 78 216 / 0.15);
}
.bg-blue-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}
.bg-blue-950\/50 {
  background-color: rgb(23 37 84 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary-foreground {
  background-color: oklch(var(--primary-foreground));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-600\/15 {
  background-color: rgb(220 38 38 / 0.15);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/60 {
  background-color: rgb(15 23 42 / 0.6);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-\[linear-gradient\(to_bottom\2c transparent_70\%\2c \#C8102E_70\%\2c \#C8102E_85\%\2c transparent_85\%\)\] {
  background-image: linear-gradient(to bottom,transparent 70%,#C8102E 70%,#C8102E 85%,transparent 85%);
}
.bg-\[linear-gradient\(to_right\2c \#C8102E_0\%\2c \#C8102E_3px\2c transparent_3px\)\] {
  background-image: linear-gradient(to right,#C8102E 0%,#C8102E 3px,transparent 3px);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#030712\] {
  --tw-gradient-from: #030712 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-950\/85 {
  --tw-gradient-from: rgb(23 37 84 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#030712\]\/55 {
  --tw-gradient-to: rgb(3 7 18 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(3 7 18 / 0.55) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-blue-950\/65 {
  --tw-gradient-to: rgb(23 37 84 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(23 37 84 / 0.65) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-blue-950 {
  --tw-gradient-to: #172554 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-\[length\:100\%_100\%\] {
  background-size: 100% 100%;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.\!py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.\!py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.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;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.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-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[8dvh\] {
  padding-bottom: 8dvh;
}
.pl-0 {
  padding-left: 0px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-4 {
  padding-top: 1rem;
}
.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: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.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-loose {
  line-height: 2;
}
.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\.01em\] {
  letter-spacing: -0.01em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.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-\[\#C8102E\] {
  --tw-text-opacity: 1;
  color: rgb(200 16 46 / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-background {
  color: oklch(var(--background));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-border {
  color: oklch(var(--border));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-inherit {
  color: inherit;
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.underline {
  text-decoration-line: underline;
}
.decoration-primary\/40 {
  text-decoration-color: oklch(var(--primary) / 0.4);
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.mix-blend-screen {
  mix-blend-mode: screen;
}
.mix-blend-overlay {
  mix-blend-mode: overlay;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 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-\[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-\[0_0_12px_rgba\(16\2c 185\2c 129\2c 0\.4\)\] {
  --tw-shadow: 0 0 12px rgba(16,185,129,0.4);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_25px_rgba\(220\2c 38\2c 38\2c 0\.15\)\] {
  --tw-shadow: 0 0 25px rgba(220,38,38,0.15);
  --tw-shadow-colored: 0 0 25px 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_30px_rgba\(220\2c 38\2c 38\2c 0\.2\)\] {
  --tw-shadow: 0 0 30px rgba(220,38,38,0.2);
  --tw-shadow-colored: 0 0 30px 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 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-md {
  --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-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 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-xl {
  --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-xs {
  --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);
}
.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-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
  --tw-sepia: sepia(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-md {
  --tw-backdrop-blur: blur(12px);
  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;
}
.duration-700 {
  transition-duration: 700ms;
}
.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;
}
.fade-out {
  --tw-exit-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;
}
.duration-700 {
  animation-duration: 700ms;
}
.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;
}
/* One idea + one action per screen.
     NOTE: overflow is intentionally NOT hidden here. The Hero CTA's TPUK
     arrow is sized to break out beyond the rounded-full pill edge, and any
     overflow clipping on this section would crop the arrowhead. The hero
     background video plate and scrim are themselves absolutely positioned
     with inset-0, so they self-contain without needing section-level clipping. */
.scroll-snap-section {
    /* Mobile-first responsive hero height: shorter on phones so object-cover
       crops the background video less, stepping up to full viewport on
       desktop. The shared Hero section inherits this height via the
       .scroll-snap-section class. */
    min-height: 65dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
  }
@media (min-width: 640px) {
    .scroll-snap-section {
      min-height: 75dvh;
    }
  }
@media (min-width: 768px) {
    .scroll-snap-section {
      min-height: 85dvh;
    }
  }
@media (min-width: 1024px) {
    .scroll-snap-section {
      min-height: 100dvh;
    }
  }
/* NOTE: the legacy .hero-scrim CSS class was removed. The Hero gradient
      overlay now uses Tailwind classes directly
      (bg-gradient-to-b from-blue-950/85 via-blue-950/65 to-blue-950 absolute
      inset-0 z-10) so the overlay sits above the native <video> at z-0 and
      below the content at z-20. The --gradient-scrim token is retained for
      any other consumers. */
/* Condensed-grotesque uppercase headlines with heavy tracking. */
.text-headline {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.95;
    font-size: clamp(2.25rem, 7vw, 5.375rem); /* 36 → 86px */
    font-stretch: 90%;
  }
.text-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: oklch(var(--muted-foreground));
  }
/* Pill CTA — solid red, rounded-full, no shadow. The single primary action per screen.
     Scales up slightly on hover; the inline .tpuk-arrow nudges up-and-right. */
.btn-primary-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2.25rem;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--primary));
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
  }
.btn-primary-square:hover {
    background: oklch(0.62 0.24 25);
    border-color: oklch(0.62 0.24 25);
    transform: scale(1.05);
  }
/* Mobile fixed bottom Donate bar — neutralize the inherited hover scale so the
     full-width fixed bar never overflows the viewport on tap and stays truly
     pinned to the bottom edge. Visual styling (color, height, width) is
     unchanged; only the pill-CTA scale transform is suppressed for this
     full-width fixed variant. */
[data-ocid="mobile.donate_bar"]:hover {
    transform: none;
  }
/* Pill outline CTA — white outline that inverts to solid white on hover, rounded-full. */
.btn-outline-invert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2.25rem;
    background: transparent;
    color: oklch(var(--foreground));
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--foreground));
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
  }
.btn-outline-invert:hover {
    background: oklch(var(--foreground));
    color: oklch(var(--background));
    transform: scale(1.05);
  }
/* Inline curved TPUK arrow inside primary CTAs. Nudges up-and-right on parent hover. */
.tpuk-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
  }
.btn-primary-square:hover .tpuk-arrow,
  .btn-outline-invert:hover .tpuk-arrow {
    transform: translate(2px, -2px);
  }
/* Universal entrance animations — applied via Intersection Observer across every page.
     Initial state set by .entrance-left / .entrance-right; .entrance-visible triggers the
     settled state. Runs ALONGSIDE the existing hero-fade-in / headline-rise, not replacing them.

     FOUC guard: the hidden initial state (opacity:0 / translateX) is gated behind the
     `.entrance-js` marker that useEntranceAnimation adds to <html> on mount. Before JS is
     active (or if it never runs) entrance elements stay fully visible, so footer/content
     never flashes hidden-then-animated at the bottom on initial desktop load. */
.entrance-js .entrance-left {
    opacity: 0;
    transform: translateX(-5rem);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    will-change: opacity, transform;
  }
.entrance-js .entrance-right {
    opacity: 0;
    transform: translateX(5rem);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    will-change: opacity, transform;
  }
/* Universal auto-reveal — applied by useUniversalReveal (Layout) to every
     text node / block (headings, paragraphs, list items, cards, media)
     inside <main> that does not already carry a manual entrance class.
     Rises up + fades in when scrolled into view. Same FOUC guard as
     entrance-left/right: hidden state only applies once `.entrance-js`
     marks JS as active. */
.entrance-js .entrance-up {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms
      cubic-bezier(0.4, 0, 0.2, 1);
    /* Deliberately NO will-change here: this class is auto-applied to
       potentially hundreds of elements per page by useUniversalReveal, and
       a blanket will-change would force a GPU layer per element — a real
       memory/battery cost on mobile. opacity + transform transitions are
       compositor-friendly without the hint. */
  }
.entrance-js .entrance-visible {
    opacity: 1;
    transform: translateX(0);
  }
/* Ambient translucent card surface — the universal card treatment for the
     midnight mesh theme: slate-900/60 glass with backdrop blur, a hairline
     white/10 border, and a soft cobalt perimeter glow. */
.ambient-card {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(30, 58, 138, 0.15), inset 0 0 0 1px
      rgba(59, 130, 246, 0.05);
  }
/* Fixed nav: translucent at top, solidifies on scroll via .nav-solid. */
.nav-translucent {
    background: oklch(var(--background) / 0.55);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid oklch(var(--border) / 0.6);
    transition: var(--transition-smooth);
  }
.nav-solid {
    background: oklch(var(--background));
    backdrop-filter: none;
    border-bottom: 1px solid oklch(var(--border));
  }
/* Centered logo white notch plate — hangs slightly below the navbar bar.
      tailwind.config.js zeroes all borderRadius except full and all boxShadow,
      so the rounded bottom corners and drop shadow are implemented here as
      explicit CSS rather than rounded-b-2xl / shadow-lg (which would be zeroed).
      The plate stays solid white at every scroll position.
      inline-block + tight px-4 py-2 padding sizes the white background exactly
      to the logo's dimensions, acting as a fitted shield rather than a wide bar. */
.nav-notch-plate {
    background: oklch(0.98 0.005 250);
    display: inline-block;
    /* Desktop (xl+) logo plate — zero left padding (0) so the Turning Point
       UK logo sits all the way flush with the top-left corner of the screen,
       while the right padding (1rem) keeps the plate's right edge balanced
       around the logo. Vertical padding (0.625rem) is unchanged so the
       xl:h-16 logo still has its breathing room. Mobile uses the separate
       .nav-notch-plate-sm class and is unaffected. */
    padding: 0.625rem 1rem 0.625rem 0;
    border-radius: 0 0 1rem 1rem; /* rounded-b-2xl equivalent */
    box-shadow: 0 10px 25px -5px oklch(0.2 0.08 255 / 0.45), 0 8px 10px -6px
      oklch(0.2 0.08 255 / 0.35);
    /* Hang slightly below the navbar bar. */
    margin-top: -1px;
  }
/* Mobile-sized white notch plate — same white-backed shield treatment as the
     desktop CenteredLogo, but with smaller padding and a shorter logo height so
     it fits the mobile top bar (h-12 vs h-16). Used by the mobile top-bar logo
     so the brand is clearly visible against the dark/transparent navbar.
     tailwind.config.js zeroes non-full radii and all shadows, so the rounded
     bottom corners and drop shadow are explicit CSS here. */
.nav-notch-plate-sm {
    background: oklch(0.98 0.005 250);
    display: inline-block;
    padding: 0.25rem 0.625rem 0.25rem 0; /* py-1 px-2.5 with zero left padding so the logo sits flush with the left edge */
    border-radius: 0 0 0.75rem 0.75rem; /* rounded-b-xl equivalent */
    box-shadow: 0 6px 16px -4px oklch(0.2 0.08 255 / 0.45), 0 4px 8px -4px
      oklch(0.2 0.08 255 / 0.35);
    margin-top: -1px;
  }
/* Sheet header logo white plate — a flat white backing (no hanging notch)
      for the logo inside the mobile menu Sheet header. Keeps the brand visible
      against the Sheet's bg-background. Smaller radius and no bottom-hang since
      it sits inside a bordered header, not hanging below a bar. */
.sheet-logo-plate {
    background: oklch(0.98 0.005 250);
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px -4px oklch(0.2 0.08 255 / 0.4);
  }
/* Mobile navbar single-row overflow guard — the below-xl top bar packs the
      logo, 4 social icons, $MBGA pill, DONATE button, and hamburger onto one
      row. On narrow phones (down to ~360px) the row can overflow horizontally
      if any flex child refuses to shrink. This rule enforces min-width: 0 on
      every direct flex child (the canonical fix for truncating/shrinking flex
      children) and clips any residual horizontal overflow as defense-in-depth
      so no element is pushed off-screen or causes a horizontal scrollbar.
      Only the below-xl row uses .mobile-nav-row; the desktop (xl+) navbar is
      unaffected. */
.mobile-nav-row > * {
    min-width: 0;
  }
.mobile-nav-row {
    overflow-x: clip;
  }
/* ── Gallery + Admin dashboard extension ─────────────────────────
     Dashed upload zone, admin management cards, lightbox overlay,
     fade-in-up scroll animation, admin form inputs. All respect the
     existing zero-radius / no-shadow discipline. ──────────────── */
/* Drag-and-drop upload zone — dashed border, lifts on hover, turns red
     when a file is dragged over. Centered, prominent, single action. */
.upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    background: oklch(var(--upload-zone));
    border: 2px dashed oklch(var(--border));
    transition: var(--transition-smooth);
    cursor: pointer;
  }
.upload-dropzone:hover {
    background: oklch(var(--upload-zone-hover));
    border-color: oklch(var(--muted-foreground));
  }
.upload-dropzone.is-active {
    background: oklch(var(--upload-zone-active));
    border-color: oklch(var(--primary));
  }
/* Admin management card — elevated surface one step above --card,
     hairline border, subtle background lift on hover. No shadow (discipline). */
.admin-card {
    background: oklch(var(--admin-card));
    border: 1px solid oklch(var(--border));
    transition: var(--transition-smooth);
    overflow: hidden;
  }
.admin-card:hover {
    background: oklch(var(--admin-card-hover));
    border-color: oklch(var(--muted-foreground));
  }
/* Admin form input — dark recessed field, hairline border, red focus ring.
     Matches the SpaceX discipline: square corners, no shadow. */
.admin-input {
    width: 100%;
    background: oklch(var(--upload-zone));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--foreground));
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: var(--transition-smooth);
    outline: none;
  }
.admin-input:focus {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary));
  }
.admin-input::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }
.admin-input::placeholder {
    color: oklch(var(--muted-foreground));
  }
/* Admin select (category dropdown) — same recessed field treatment as
     .admin-input but with a native chevron via appearance + background-image
     so the control reads as a dropdown, not a text field. Square corners,
     no shadow, red focus ring. color-scheme: dark so the native <option>
     list renders dark in supporting browsers. */
.admin-select {
    width: 100%;
    background: oklch(var(--upload-zone));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--foreground));
    padding: 0.625rem 2rem 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: var(--transition-smooth);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a8b3c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
  }
.admin-select:focus {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary));
  }
.admin-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
/* Admin date input — same recessed field treatment as .admin-input.
     color-scheme: dark so the native date picker calendar icon and the
     dropdown day/month/year picker render in the dark theme. Square corners,
     no shadow, red focus ring. The native calendar indicator is recolored
     via the ::-webkit-calendar-picker-indicator pseudo so it reads against
     the dark surface. */
.admin-date {
    width: 100%;
    background: oklch(var(--upload-zone));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--foreground));
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: var(--transition-smooth);
    outline: none;
    color-scheme: dark;
  }
.admin-date:focus {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary));
  }
.admin-date:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.admin-date::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.2) hue-rotate(180deg);
    cursor: pointer;
  }
.admin-date::-webkit-clear-button,
  .admin-date::-webkit-inner-spin-button {
    filter: invert(0.7);
  }
/* Admin meta tag — small uppercase mono label showing the item's current
      category and event date on the management card, above the edit form.
      Square corners, no shadow. Reuses --muted-foreground so it reads as
      metadata, not a CTA. */
.admin-meta-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: oklch(var(--muted) / 0.5);
    border: 1px solid oklch(var(--border));
    color: oklch(var(--foreground) / 0.85);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    font-weight: 500;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
  }
/* ── Shared AdminLayout shell ────────────────────────────────────
     Fixed admin header with bold ADMIN DASHBOARD title, horizontal
     tab nav between admin dashboards, II principal + sign-out, and a
     Quick Links cluster of external-tool CTAs. The dashboard body
     uses bg-blue-950 directly (per user preference) for a clean
     minimal dark-navy surface distinct from the public --background.
     All respect the existing zero-radius / no-shadow discipline. */
/* Admin header — fixed top bar over the bg-blue-950 dashboard.
      Hairline bottom border separates it from the page content.
      Uses a slightly elevated navy surface (one OKLCH step above
      --background) so the header reads as a distinct chrome zone
      against the bg-blue-950 body. No shadow (discipline). */
.admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: oklch(0.24 0.09 255);
    border-bottom: 1px solid oklch(var(--border));
    backdrop-filter: saturate(140%) blur(8px);
  }
/* Admin tab — internal navigation between admin dashboards.
      Mono uppercase label, hairline border, transparent inactive state.
      Inactive: muted foreground text. Hover: lifts to a subtle muted
      background and brightens the text. Active: solid red --primary
      background with primary-foreground text (matches the gallery
      filter button active state). Square corners, no shadow. */
.admin-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: transparent;
    color: oklch(var(--foreground) / 0.7);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    font-weight: 500;
    border: 1px solid oklch(var(--border));
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
  }
.admin-tab:hover:not(.admin-tab-active) {
    background: oklch(var(--muted) / 0.6);
    border-color: oklch(var(--muted-foreground));
    color: oklch(var(--foreground));
  }
.admin-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--ring));
  }
/* Admin tab active — solid red --primary background, primary-foreground
      text, matching border. Visually distinct from the outline Quick Links
      so internal nav reads as the current section. */
.admin-tab-active {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border-color: oklch(var(--primary));
  }
/* Admin quick link — external-tool CTA (Mailchimp, Plesk) styled as a
      subtle outline / secondary button so it stands apart from the
      internal admin tabs. Transparent background, hairline foreground
      border, foreground text. Hover inverts to solid foreground
      background + background text (mirrors .btn-outline-invert but at
      a smaller, secondary scale). Square corners, no shadow. */
.admin-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    background: transparent;
    color: oklch(var(--foreground) / 0.85);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    font-weight: 500;
    border: 1px solid oklch(var(--foreground) / 0.4);
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
  }
.admin-quick-link:hover {
    background: oklch(var(--foreground));
    color: oklch(0.24 0.09 255);
    border-color: oklch(var(--foreground));
  }
.admin-quick-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--ring));
  }
/* Lightbox overlay — full-screen backdrop darker than background for focus.
     Fades in via the lightbox-fade keyframe (tailwind.config.js). */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: oklch(var(--lightbox-backdrop) / 0.92);
    backdrop-filter: blur(8px);
  }
/* Image-fallback background — a blue-tinted neutral (oklch 0.20 0.06 255)
     used on gallery <img> wrappers so a failed image shows a blue-tinted square
     instead of the deep-blue --card token that masquerades as the
     "blue cards" symptom. Distinct from --card (0.26 0.08 255) so the
     fallback state is visibly a placeholder, not a void. */
.bg-image-fallback {
    background: oklch(0.2 0.06 255);
  }
/* ── Masonry gallery + filter + per-tile skeleton ───────────────
     True CSS masonry via `columns` so mixed-orientation event photos
     pack into variable-height columns with no fixed row heights. Each
     tile uses `break-inside: avoid` so a tile never splits across a
     column break. Responsive: 1 col mobile, 2 col tablet, 3 col
     desktop, 4 col wide desktop. Respects the existing zero-radius /
     no-shadow discipline. ──────────────────────────────────────── */
/* Masonry container — CSS multi-column layout. `gap` controls the
     horizontal column gap; vertical spacing between tiles in a column
     is `column-gap`-equivalent via the tile's margin-bottom (see
     .gallery-masonry-item). `columns` is used (not `column-count`)
     so we can specify both the count and a min width hint. */
.gallery-masonry {
    -moz-columns: 1;
         columns: 1;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
@media (min-width: 640px) {
    .gallery-masonry {
      -moz-columns: 2;
           columns: 2;
      -moz-column-gap: 1.5rem;
           column-gap: 1.5rem;
    }
  }
@media (min-width: 1024px) {
    .gallery-masonry {
      -moz-columns: 3;
           columns: 3;
      -moz-column-gap: 1.5rem;
           column-gap: 1.5rem;
    }
  }
@media (min-width: 1280px) {
    .gallery-masonry {
      -moz-columns: 4;
           columns: 4;
      -moz-column-gap: 1.5rem;
           column-gap: 1.5rem;
    }
  }
/* Masonry tile — each tile is one inline-block column item that must
     not split across a column break. `break-inside: avoid` is the
     canonical masonry guard; the legacy `page-break-inside: avoid`
     fallback covers older engines. `display: inline-block` (not block)
     is required so the column algorithm treats the tile as an atomic
     unit. The bottom margin provides the vertical gutter between tiles
     in the same column. Width is 100% of the column. */
.gallery-masonry-item {
    display: inline-block;
    width: 100%;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.5rem;
  }
/* Category filter bar — horizontal scroll on mobile, wraps on
     desktop. Buttons use the existing red --primary accent for the
     active state (inverted style) and a hairline outline for inactive.
     Respects the zero-radius discipline (square corners). Rendered as a
     <fieldset> for accessible grouping, so reset the browser-default
     fieldset chrome (margin/border/padding) so the flex layout reads
     cleanly. */
.gallery-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    border: 0;
    padding: 0;
    margin-bottom: 2rem;
  }
/* Filter button — square corners, mono uppercase label, hairline
     border. Inactive: transparent background, foreground text. Active:
     solid red --primary background, primary-foreground text. Hover on
     inactive lifts to a subtle muted background. */
.gallery-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: transparent;
    color: oklch(var(--foreground) / 0.8);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    font-weight: 500;
    border: 1px solid oklch(var(--border));
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    white-space: nowrap;
  }
.gallery-filter-button:hover:not(.is-active) {
    background: oklch(var(--muted) / 0.6);
    border-color: oklch(var(--muted-foreground));
    color: oklch(var(--foreground));
  }
.gallery-filter-button.is-active {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border-color: oklch(var(--primary));
  }
.gallery-filter-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--ring));
  }
/* Per-tile image skeleton — a shimmer placeholder shown behind the
     <img> until onLoad fires. The skeleton fills the tile's image
     frame and crossfades out when the image loads. CSS-only shimmer
     via a diagonal gradient sweep; no extra deps. */
.gallery-tile-frame {
    position: relative;
    overflow: hidden;
    background: oklch(0.2 0.06 255);
  }
.gallery-tile-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      oklch(0.22 0.06 255) 30%,
      oklch(0.28 0.08 255) 50%,
      oklch(0.22 0.06 255) 70%
    );
    background-size: 200% 100%;
    animation: gallery-skeleton-shimmer 1.4s ease-in-out infinite;
    transition: opacity 400ms ease-out;
    z-index: 1;
  }
.gallery-tile-skeleton.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
.gallery-tile-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 400ms ease-out;
  }
.gallery-tile-image.is-loaded {
    opacity: 1;
  }
@keyframes gallery-skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
/* Lightbox metadata — category tag + event date pill rendered
     beneath the lightbox image. Reuses the existing .category-pill
     red accent for the category tag so the lightbox matches the
     gallery's categorical accent discipline. */
.gallery-lightbox-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
.gallery-lightbox-date {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: oklch(var(--muted) / 0.6);
    color: oklch(var(--foreground) / 0.85);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    font-weight: 500;
    border: 1px solid oklch(var(--border));
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
  }
/* Fade-in-up scroll animation — gallery grid items and admin cards rise
     and fade in as they enter the viewport. Initial state set by .fade-in-up;
     .fade-in-up-visible triggers the settled state. Mirrors the .entrance-*
     Intersection Observer pattern. */
.fade-in-up {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    will-change: opacity, transform;
  }
.fade-in-up-visible {
    opacity: 1;
    transform: translateY(0);
  }
.transition-smooth {
    transition: var(--transition-smooth);
  }
.bg-navy {
    background: oklch(var(--navy));
  }
.bg-destructive-soft {
    background: oklch(var(--destructive-soft));
  }
/* ── ArticleCard + /real-british-history hub extension ──────────
     Reusable vertical preview card, per-category pill, primary red
     Read Article button, and hub header zone. All respect the existing
     zero-radius / no-shadow / red-accent discipline. Reuse existing
     tokens (--blog-card, --primary, --blog-prose-heading, --blog-prose-body,
     --blog-cover-fallback). ─────────────────────────────────────── */
/* ArticleCard — vertical preview card with top image, category pill,
     title, author + readTime, and a Read Article button. Translucent
     blue-tinted surface (reuses --blog-card at 40% + backdrop-blur) so it
     matches the existing .blog-card grid aesthetic; hairline white/10
     border; hover lift -4px. rounded-t-xl / rounded-xl declared for
     semantic clarity but resolve to 0 under --radius: 0 (square discipline). */
.article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: oklch(var(--blog-card) / 0.4);
    backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid oklch(0.98 0.005 250 / 0.1);
    border-radius: 0;
    overflow: hidden;
    transition: var(--transition-smooth);
    cursor: pointer;
  }
.article-card:hover {
    background: oklch(var(--blog-card) / 0.6);
    border-color: oklch(0.98 0.005 250 / 0.2);
    transform: translateY(-4px);
  }
.article-card .article-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: oklch(var(--blog-cover-fallback));
    border-radius: 0 0 0 0;
  }
.article-card .article-card-cover img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.article-card .article-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
  }
.article-card .article-card-title {
    color: oklch(var(--blog-prose-heading));
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
.article-card .article-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: oklch(var(--blog-prose-muted));
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.article-card .article-card-meta .meta-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: oklch(var(--blog-prose-muted) / 0.6);
    flex-shrink: 0;
  }
/* Category pill — small uppercase mono badge below the image, per-category
     color. .is-blog reuses red --primary (matches existing .category-badge);
     .is-rbh uses the blue-tinted azure --category-rbh accent so the two hubs
     are distinguishable at a glance. Square corners, no shadow. */
.category-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    font-weight: 500;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
  }
.category-pill.is-blog {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
  }
.category-pill.is-rbh {
    background: oklch(var(--category-rbh));
    color: oklch(var(--category-rbh-foreground));
  }
/* Read Article button — primary red CTA inside the ArticleCard. Solid red
     --primary, square corners (card-internal button, NOT a pill — distinct
     from hero CTAs), hover intensifies to the lifted red. Full-width inside
     the card body. */
.read-article-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    border-radius: 0;
    border: 1px solid oklch(var(--primary));
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    margin-top: 0.25rem;
  }
.read-article-button:hover {
    background: oklch(0.62 0.24 25);
    border-color: oklch(0.62 0.24 25);
  }
.read-article-button .read-article-arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
  }
.read-article-button:hover .read-article-arrow {
    transform: translate(2px, -2px);
  }
/* Hub header zone — eyebrow + display headline + standfirst for the
     /real-british-history hub (and reusable for /blog). Matches the blog
     hub hero header styling WITHOUT a featured hero card. Reuses existing
     --blog-prose-heading (bright white), --muted-foreground (eyebrow),
     --blog-prose-body (standfirst). */
.hub-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(3rem, 8vw, 5.5rem) 1.5rem clamp(2rem, 5vw, 3.5rem);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
  }
.hub-header .hub-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: oklch(var(--muted-foreground));
  }
.hub-header .hub-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.95;
    font-size: clamp(2.25rem, 6vw, 4rem);
    color: oklch(var(--blog-prose-heading));
  }
.hub-header .hub-standfirst {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: oklch(var(--blog-prose-body));
    max-width: 40rem;
  }
/* ── Blog CMS extension ─────────────────────────────────────────
     Featured hero card, responsive grid cards, cinematic cover,
     narrow reading column, publish-status badge, dark composer,
     Markdown prose styling, Load More button. All respect the
     existing zero-radius / no-shadow / red-accent discipline. ─── */
/* Featured hero card — full-width cinematic featured post at the top
     of the blog hub. Cover image fills the frame; gradient scrim anchors
     the headline low-left. One step above --card for prominence. */
.featured-hero-card {
    position: relative;
    width: 100%;
    min-height: clamp(22rem, 60vh, 42rem);
    overflow: hidden;
    background: oklch(var(--blog-hero-card));
    border: 1px solid oklch(var(--border) / 0.6);
  }
.featured-hero-card .featured-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 0;
  }
.featured-hero-card .featured-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      oklch(0.2 0.08 255 / 0.35) 0%,
      oklch(0.2 0.08 255 / 0.1) 40%,
      oklch(0.2 0.08 255 / 0.55) 70%,
      oklch(0.2 0.08 255 / 0.92) 100%
    );
    z-index: 1;
  }
.featured-hero-card .featured-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    gap: 1rem;
  }
/* Blog grid card — responsive card with cover image, category badge,
     headline, standfirst, read time. Translucent blue-tinted surface with
     backdrop-blur, hairline border, hover lift one OKLCH step. */
.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: oklch(var(--blog-card) / 0.4);
    backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid oklch(0.98 0.005 250 / 0.1);
    overflow: hidden;
    transition: var(--transition-smooth);
  }
.blog-card:hover {
    background: oklch(var(--blog-card) / 0.6);
    border-color: oklch(0.98 0.005 250 / 0.2);
    transform: translateY(-4px);
  }
.blog-card .blog-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    background: oklch(var(--blog-cover-fallback));
  }
.blog-card .blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem 1.5rem 1.5rem;
  }
/* Category badge — small red uppercase mono label. Red reserved for
     categorical accents (badges, arrows, CTAs) per the existing discipline. */
.category-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.25rem 0.625rem;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    font-weight: 500;
    border-radius: 0;
    box-shadow: none;
  }
/* Article reading column — narrow max-w-3xl mx-auto column for long-form.
     Bright white headings, soft blue-tinted grey body text. */
.article-reading-column {
    max-width: 48rem; /* max-w-3xl equivalent */
    margin-left: auto;
    margin-right: auto;
    padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  }
.article-reading-column h1,
  .article-reading-column h2,
  .article-reading-column h3,
  .article-reading-column h4 {
    color: oklch(var(--blog-prose-heading));
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }
.article-reading-column h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }
.article-reading-column h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  }
.article-reading-column h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  }
.article-reading-column p,
  .article-reading-column li {
    color: oklch(var(--blog-prose-body));
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
  }
.article-reading-column a {
    color: oklch(var(--primary));
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: var(--transition-smooth);
  }
.article-reading-column a:hover {
    color: oklch(0.62 0.24 25);
  }
.article-reading-column blockquote {
    border-left: 3px solid oklch(var(--primary));
    padding-left: 1.5rem;
    margin: 2rem 0;
    color: oklch(var(--blog-prose-heading));
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.6;
  }
.article-reading-column code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: oklch(var(--muted));
    padding: 0.15em 0.4em;
    color: oklch(var(--blog-prose-heading));
  }
.article-reading-column img {
    width: 100%;
    height: auto;
    margin: 2rem 0;
    background: oklch(var(--blog-cover-fallback));
  }
.article-reading-column ul,
  .article-reading-column ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
  }
.article-reading-column ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
  }
.article-reading-column ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
  }
.article-reading-column hr {
    border: none;
    border-top: 1px solid oklch(var(--border));
    margin: 3rem 0;
  }
/* Article share buttons — X/Twitter, Facebook, and a copy-link button
     rendered at the end of the reading column. Square corners, hairline
     border, mono uppercase label, no shadow (matches the SpaceX discipline).
     Hover lifts the surface one OKLCH step and tints the border toward the
     foreground so the affordance reads clearly against the deep-blue canvas.
     The copy-link button reuses the same surface but flips its label/icon
     to a "Link copied" confirmation state via JS. */
.article-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
.article-share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: oklch(var(--blog-card) / 0.4);
    border: 1px solid oklch(var(--border));
    color: oklch(var(--blog-prose-heading));
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    font-weight: 500;
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    text-decoration: none;
    min-height: 2.75rem;
  }
.article-share-button:hover {
    background: oklch(var(--blog-card) / 0.7);
    border-color: oklch(var(--muted-foreground));
    color: oklch(var(--foreground));
  }
.article-share-button:focus-visible {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
  }
.article-share-button svg {
    flex-shrink: 0;
  }
/* Copy-link button is a real <button> (not an anchor) — reset any
     inherited button defaults so it matches the anchor share buttons. */
button.article-share-button {
    font-family: var(--font-mono);
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
  }
/* Cinematic cover — massive full-width cover image at the top of an
     article page. Full viewport width, ~55vh tall, gradient scrim at the
     bottom for headline legibility if overlaid. */
.cinematic-cover {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(24rem, 55vh, 44rem);
    overflow: hidden;
    background: oklch(var(--blog-cover-fallback));
  }
.cinematic-cover img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    animation: blog-cover-reveal 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
.cinematic-cover .cinematic-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      oklch(0.2 0.08 255 / 0.2) 0%,
      oklch(0.2 0.08 255 / 0.05) 50%,
      oklch(0.2 0.08 255 / 0.7) 100%
    );
    z-index: 1;
  }
/* Publish status badge — draft (amber) vs published (green). Square
     corners, mono uppercase, no shadow. Functional state cue, not decorative. */
.publish-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    font-weight: 500;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
  }
.publish-status-badge::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
  }
.publish-status-badge.is-draft {
    background: oklch(var(--status-draft) / 0.18);
    color: oklch(var(--status-draft));
    border: 1px solid oklch(var(--status-draft) / 0.4);
  }
.publish-status-badge.is-published {
    background: oklch(var(--status-published) / 0.18);
    color: oklch(var(--status-published));
    border: 1px solid oklch(var(--status-published) / 0.4);
  }
/* Blog admin composer — dark-themed publishing dashboard surface.
     Sits one step above --admin-card. Wraps the composer form + cover
     upload zone + draft/published toggle. Reuses .admin-input for fields. */
.blog-admin-composer {
    background: oklch(var(--composer-surface));
    border: 1px solid oklch(var(--border));
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
.blog-admin-composer .composer-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.blog-admin-composer .composer-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    color: oklch(var(--muted-foreground));
  }
.blog-admin-composer textarea.admin-input {
    min-height: 18rem;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
  }
/* Markdown content — prose styling for rendered Markdown in the reading
     column. Delegates heading/body colors to .article-reading-column tokens
     so a standalone .markdown-content block also reads correctly. */
.markdown-content {
    color: oklch(var(--blog-prose-body));
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
  }
.markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4 {
    color: oklch(var(--blog-prose-heading));
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }
.markdown-content h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }
.markdown-content h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  }
.markdown-content h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  }
.markdown-content p {
    margin-bottom: 1.25rem;
  }
.markdown-content a {
    color: oklch(var(--primary));
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
.markdown-content blockquote {
    border-left: 3px solid oklch(var(--primary));
    padding-left: 1.5rem;
    margin: 2rem 0;
    color: oklch(var(--blog-prose-heading));
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.6;
  }
.markdown-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: oklch(var(--muted));
    padding: 0.15em 0.4em;
    color: oklch(var(--blog-prose-heading));
  }
.markdown-content pre {
    background: oklch(var(--muted));
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid oklch(var(--border));
  }
.markdown-content pre code {
    background: transparent;
    padding: 0;
  }
.markdown-content img {
    width: 100%;
    height: auto;
    margin: 2rem 0;
    background: oklch(var(--blog-cover-fallback));
  }
.markdown-content ul,
  .markdown-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
  }
.markdown-content ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
  }
.markdown-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
  }
.markdown-content hr {
    border: none;
    border-top: 1px solid oklch(var(--border));
    margin: 3rem 0;
  }
/* Load More button — red outline pill that inverts to solid red on hover.
     Carries a downward arrow. Square-corners discipline exempts pill CTAs
     (matches .btn-primary-square / .btn-outline-invert). */
.load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2.25rem;
    background: transparent;
    color: oklch(var(--primary));
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--primary));
    box-shadow: none;
    transition: var(--transition-smooth);
    cursor: pointer;
  }
.load-more-button:hover:not(:disabled) {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    transform: scale(1.05);
  }
.load-more-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: oklch(var(--muted-foreground));
    color: oklch(var(--muted-foreground));
  }
@keyframes blog-cover-reveal {
    from {
      opacity: 0;
      transform: scale(1.04);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
/* Branded loading screen — full-viewport overlay with the TPUK arrow centered.
     Motion is a single opacity fade-in only (no layout/scale animation); the
     global prefers-reduced-motion override in index.css neutralizes it. */
.loading-screen {
    animation: loading-screen-fade 240ms ease-out both;
  }
@keyframes loading-screen-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
/* Circling UK loading arrow — continuous 360-degree spin around its center.
     Only transform is animated (no layout properties). The global
     prefers-reduced-motion override in index.css neutralizes the spin, leaving
     the static arrow with just the opacity fade. */
.loading-arrow-spin {
    animation: loading-arrow-spin 1.4s linear infinite;
    will-change: transform;
  }
@keyframes loading-arrow-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
/* $MBGA capsule icon — continuous energetic jump/flip/bounce loop. Two
      bounce peaks per loop (translateY -11px at 25% and 75%) combined with a
      full 360° rotation spread across the loop and a scale pop to 1.08 at each
      bounce peak for extra energy. Only the icon <span> is animated; the pill
      wrapper (emerald-500 bg, font-black, rounded-full) and the "$MBGA" text
      are untouched. The prefers-reduced-motion block below neutralizes this
      animation for users who prefer reduced motion. */
.spin-jump {
    animation: spin-jump 2.6s ease-in-out infinite;
    will-change: transform;
  }
@keyframes spin-jump {
    0% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
      transform: translateY(-11px) rotate(90deg) scale(1.08);
    }
    50% {
      transform: translateY(0) rotate(180deg) scale(1);
    }
    75% {
      transform: translateY(-11px) rotate(270deg) scale(1.08);
    }
    100% {
      transform: translateY(0) rotate(360deg) scale(1);
    }
  }
/* Preloader arrow spin + glow — a continuous 360° rotation combined with a
     pulsing red drop-shadow glow on the centered Turning Point arrow on the
     global full-screen preloader. Rotates 0 -> 360° linearly while the red
     drop-shadow breathes 10px -> 25px -> 10px, ~1.5s linear infinite. Only
     transform + filter are animated (no layout properties). The global
     prefers-reduced-motion block below neutralizes the spin + glow, leaving
     the static arrow visible. */
.spinner-glow {
    animation: spinner-glow 1.5s linear infinite;
    will-change: transform, filter;
  }
@keyframes spinner-glow {
    0% {
      transform: rotate(0deg) scale(1);
      filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.5));
    }
    50% {
      transform: rotate(180deg) scale(1.1);
      filter: drop-shadow(0 0 25px rgba(220, 38, 38, 0.95));
    }
    100% {
      transform: rotate(360deg) scale(1);
      filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.5));
    }
  }
/* Preloader arrow pulse — subtle scale + opacity breathing on the centered
     Turning Point arrow on the global full-screen preloader. Combines a gentle
     1 -> 1.08 scale with a 1 -> 0.85 opacity dip at the midpoint, ~1.6s
     ease-in-out infinite. Only transform + opacity are animated (no layout
     properties). The global prefers-reduced-motion block below neutralizes the
     pulse, leaving the static arrow visible. */
.loading-arrow-pulse {
    animation: loading-arrow-pulse 1.6s ease-in-out infinite;
    will-change: transform, opacity;
  }
@keyframes loading-arrow-pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.08);
      opacity: 0.85;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
/* Preloader progress bar — thin on-brand indeterminate bar beneath the
     arrow. A royal-blue (#00247D) accent travels left-to-right across a faint
     white track, ~1.4s ease-in-out infinite. Only transform is animated. The
     global prefers-reduced-motion block neutralizes the travel, leaving a
     static accent segment. */
.preloader-progress-bar {
    animation: preloader-progress 1.4s ease-in-out infinite;
    will-change: transform;
  }
@keyframes preloader-progress {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(400%);
    }
  }
/* Movement pillar icons — subtle staggered scale-pulse with a soft red
     drop-shadow glow. Scale 1 -> 1.12 -> 1 over 3.2s ease-in-out infinite.
     Only transform + filter are animated (no layout properties). The six
     pillar cards stagger the loop via inline animation-delay (0s, 0.4s,
     0.8s, 1.2s, 1.6s, 2.0s) so the icons breathe out of phase rather than
     in lockstep. The global prefers-reduced-motion block below neutralizes
     the pulse + glow, leaving the static red glyphs visible. */
.icon-pulse {
    animation: icon-pulse 3.2s ease-in-out infinite;
    will-change: transform, filter;
  }
@keyframes icon-pulse {
    0% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(200, 16, 46, 0));
    }
    50% {
      transform: scale(1.12);
      filter: drop-shadow(0 0 6px rgba(200, 16, 46, 0.55));
    }
    100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(200, 16, 46, 0));
    }
  }
/* 'Our podcasts' floating CTA label — subtle continuous vertical bounce
     on the global fixed half-oval Patreon CTA on the middle-right edge.
     Only transform is animated (no layout properties). The global
     prefers-reduced-motion block below neutralizes the bounce, leaving
     the static label visible. */
.podcasts-bounce {
    animation: podcasts-bounce 1.5s ease-in-out infinite;
    will-change: transform;
  }
@keyframes podcasts-bounce {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
    100% {
      transform: translateY(0);
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[text-orientation\:mixed\] {
  text-orientation: mixed;
}
.\[transform-origin\:center\] {
  transform-origin: center;
}
.\[writing-mode\:vertical-rl\] {
  writing-mode: vertical-rl;
}

/* ─────────────────────────────────────────────────────────────
   Cinematic Civic — Turning Point UK
   SpaceX discipline: near-black, square corners, no shadows,
   one idea + one action per screen.
   ───────────────────────────────────────────────────────────── */

/* Fonts loaded via Google Fonts CDN <link> in index.html:
   - Oswald (display): condensed grotesque for bold uppercase headlines.
   - Inter (body): neutral sans for paragraphs and UI.
   - JetBrains Mono (mono): technical eyebrow / metadata labels.
   @font-face declarations were removed because the referenced woff2 files
   did not exist in /assets/fonts/ and silently failed open to the fallback
   family. The CDN <link> guarantees the chosen type stack actually renders. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  .scroll-snap-section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  /* Entrance animations: jump straight to settled state, no slide. Gated behind
     `.entrance-js` to match the FOUC guard — before JS is active entrance elements
     are already fully visible, so this only needs to neutralize the JS-driven
     hidden state. */
  .entrance-js .entrance-left,
  .entrance-js .entrance-right,
  .entrance-js .entrance-up,
  .fade-in-up {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }
  .fade-in-up {
    transform: translateY(0);
  }
  /* CTA hover scale + arrow nudge disabled for reduced motion. */
  .btn-primary-square:hover,
  .btn-outline-invert:hover {
    transform: none;
  }
  .btn-primary-square:hover .tpuk-arrow,
  .btn-outline-invert:hover .tpuk-arrow {
    transform: none;
  }
  /* ArticleCard hover lift + Read Article arrow nudge disabled for reduced motion. */
  .article-card:hover {
    transform: none;
  }
  .read-article-button:hover .read-article-arrow {
    transform: none;
  }
  /* Blog cover reveal + load-more arrow nudge disabled for reduced motion. */
  .cinematic-cover img {
    animation: none;
  }
  /* $MBGA capsule icon spin/jump disabled for reduced motion — leaves a
      static capsule icon inside the pill. */
  .spin-jump {
    animation: none;
  }
  /* Preloader arrow spin + glow + pulse + progress bar travel disabled for
     reduced motion — leaves the static arrow + a static accent segment
     visible. */
  .spinner-glow {
    animation: none;
  }
  .loading-arrow-pulse {
    animation: none;
  }
  .preloader-progress-bar {
    animation: none;
    transform: translateX(0);
  }
  .load-more-button:hover:not(:disabled) {
    transform: none;
  }
  /* Gallery skeleton shimmer disabled for reduced motion — leaves a
      static neutral placeholder behind the image until it loads. */
  .gallery-tile-skeleton {
    animation: none;
  }
  /* 'Our podcasts' floating CTA label bounce disabled for reduced motion —
      leaves the static label visible on the half-oval Patreon CTA. */
  .podcasts-bounce {
    animation: none;
  }
  /* Background video policy under reduced-motion: the hero background
     videos are muted, looped, and ambient (non-distracting), so they are
     allowed to play even when the user prefers reduced motion. The user
     explicitly wants the homepage hero video to PLAY on mobile, where
     many devices report prefers-reduced-motion under battery saver.
     The shared <BackgroundVideo> component now renders the <video>
     element under reduced-motion (with the poster still set as a
     buffering fallback), so no defense-in-depth `video[autoplay] {
     display: none }` rule is needed here — that rule previously hid
     every autoplay video on reduced-motion devices and was the main
     cause of the "mobile shows only a static poster" symptom. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Mailchimp connected-site popup (mcjs) — theme overrides
   The mcjs script injects the popup markup into the DOM with its own
   inline styles. These overrides are scoped to #mc_embed_signup and
   its descendants so they never leak into the rest of the site, and
   use !important to win over Mailchimp's injected inline styles.
   Matches the Cinematic Civic design system: deep-navy background,
   red --primary accents, white text, Oswald display headings, Inter
   body, zero border-radius, no box-shadows, hairline borders.
   ───────────────────────────────────────────────────────────────── */

/* Popup shell — deep-navy canvas, square corners, no shadow. */
#mc_embed_signup {
  background: oklch(var(--background)) !important;
  color: oklch(var(--foreground)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid oklch(var(--border)) !important;
  font-family: var(--font-body) !important;
}

/* Inner wrapper that Mailchimp pads — keep the navy canvas, kill any
   default white background Mailchimp injects. */
#mc_embed_signup .mc_embed_signup,
#mc_embed_signup .mc_embed_signup_scroll,
#mc_embed_signup .mc-form-embed {
  background: oklch(var(--background)) !important;
  color: oklch(var(--foreground)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
}

/* Popup heading — Oswald, bold, uppercase, tight tracking, white. */
#mc_embed_signup h1,
#mc_embed_signup h2,
#mc_embed_signup h3,
#mc_embed_signup .mc-embedded-subscribe-form-heading,
#mc_embed_signup .heading {
  color: oklch(var(--foreground)) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Popup body / helper text — Inter, soft blue-grey. */
#mc_embed_signup p,
#mc_embed_signup .helper-text,
#mc_embed_signup .mc-text {
  color: oklch(var(--muted-foreground)) !important;
  font-family: var(--font-body) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Field labels — Oswald uppercase mono-style eyebrow above inputs. */
#mc_embed_signup label,
#mc_embed_signup .mc-field-group label,
#mc_embed_signup .mc-label {
  color: oklch(var(--foreground)) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.75rem !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Field group wrapper — hairline border, square corners, no shadow. */
#mc_embed_signup .mc-field-group {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Email input — dark recessed field, white text, hairline border,
   red focus ring. Square corners, no shadow. */
#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"],
#mc_embed_signup .mc-field-group input,
#mc_embed_signup .email {
  background: oklch(var(--upload-zone)) !important;
  color: oklch(var(--foreground)) !important;
  border: 1px solid oklch(var(--border)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  padding: 0.75rem 0.875rem !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#mc_embed_signup input[type="email"]::-moz-placeholder, #mc_embed_signup input[type="text"]::-moz-placeholder, #mc_embed_signup .email::-moz-placeholder {
  color: oklch(var(--muted-foreground)) !important;
}
#mc_embed_signup input[type="email"]::placeholder,
#mc_embed_signup input[type="text"]::placeholder,
#mc_embed_signup .email::placeholder {
  color: oklch(var(--muted-foreground)) !important;
}
#mc_embed_signup input[type="email"]:focus,
#mc_embed_signup input[type="text"]:focus,
#mc_embed_signup .mc-field-group input:focus,
#mc_embed_signup .email:focus {
  border-color: oklch(var(--primary)) !important;
  box-shadow: 0 0 0 1px oklch(var(--primary)) !important;
  outline: none !important;
}

/* Submit button — solid red block, white uppercase Oswald, zero radius,
   no shadow, brighter-red hover. */
#mc_embed_signup input[type="submit"],
#mc_embed_signup .mc-field-group input[type="submit"],
#mc_embed_signup .button,
#mc_embed_signup .mc-embedded-subscribe {
  background: oklch(var(--primary)) !important;
  color: oklch(var(--primary-foreground)) !important;
  border: 1px solid oklch(var(--primary)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.875rem !important;
  padding: 0.85rem 1.5rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
#mc_embed_signup input[type="submit"]:hover,
#mc_embed_signup .mc-field-group input[type="submit"]:hover,
#mc_embed_signup .button:hover,
#mc_embed_signup .mc-embedded-subscribe:hover {
  background: oklch(0.62 0.24 25) !important;
  border-color: oklch(0.62 0.24 25) !important;
}
#mc_embed_signup input[type="submit"]:focus-visible,
#mc_embed_signup .mc-field-group input[type="submit"]:focus-visible,
#mc_embed_signup .button:focus-visible,
#mc_embed_signup .mc-embedded-subscribe:focus-visible {
  outline: 2px solid oklch(var(--primary)) !important;
  outline-offset: 2px !important;
}

/* Form element itself — transparent background, square corners. */
#mc_embed_signup form,
#mc_embed_signup .mc-embedded-subscribe-form {
  background: transparent !important;
  color: oklch(var(--foreground)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
}

/* Close button — visible against the dark navy background. Mailchimp
   renders the close control as an anchor/button with a × glyph; make
   it foreground-colored, hairline-bordered, square, no shadow, with a
   red hover so it reads as an intentional part of the design system. */
#mc_embed_signup .mc-close-modal,
#mc_embed_signup .mc-close,
#mc_embed_signup a[href="#close"],
#mc_embed_signup .close-modal,
#mc_embed_signup button.mc-close {
  background: transparent !important;
  color: oklch(var(--foreground)) !important;
  border: 1px solid oklch(var(--border)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
#mc_embed_signup .mc-close-modal:hover,
#mc_embed_signup .mc-close:hover,
#mc_embed_signup a[href="#close"]:hover,
#mc_embed_signup .close-modal:hover,
#mc_embed_signup button.mc-close:hover {
  background: oklch(var(--primary)) !important;
  color: oklch(var(--primary-foreground)) !important;
  border-color: oklch(var(--primary)) !important;
  opacity: 1 !important;
}

/* Response / success / error messages — Inter, red accent for errors,
   foreground for success. Square corners, no shadow. */
#mc_embed_signup .response,
#mc_embed_signup #mce-success-response,
#mc_embed_signup #mce-error-response,
#mc_embed_signup .mce_inline_error {
  background: transparent !important;
  color: oklch(var(--foreground)) !important;
  font-family: var(--font-body) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
}
#mc_embed_signup #mce-error-response,
#mc_embed_signup .mce_inline_error {
  color: oklch(var(--primary)) !important;
  background: oklch(var(--destructive-soft) / 0.3) !important;
  border: 1px solid oklch(var(--primary) / 0.5) !important;
  padding: 0.5rem 0.75rem !important;
}
#mc_embed_signup #mce-success-response {
  color: oklch(var(--status-published)) !important;
}

/* Mailchimp "powered by" / footer link — muted, mono, no shadow. */
#mc_embed_signup .mc-embedded-subscribe-form .small-help,
#mc_embed_signup .small-help,
#mc_embed_signup .powered-by,
#mc_embed_signup a[href*="mailchimp"] {
  color: oklch(var(--muted-foreground)) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
#mc_embed_signup a[href*="mailchimp"]:hover {
  color: oklch(var(--primary)) !important;
  text-decoration: underline !important;
}

/* Generic catch-all for any injected div/section inside the popup so
   Mailchimp's white defaults never bleed through. Square corners, no
   shadow, navy/transparent backgrounds, foreground text. */
#mc_embed_signup div,
#mc_embed_signup section,
#mc_embed_signup fieldset {
  background: transparent !important;
  color: oklch(var(--foreground)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
}
#mc_embed_signup fieldset {
  border: 1px solid oklch(var(--border)) !important;
}

/* Links inside the popup — red accent, underline on hover. */
#mc_embed_signup a {
  color: oklch(var(--primary)) !important;
  font-family: var(--font-body) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
#mc_embed_signup a:hover {
  color: oklch(0.62 0.24 25) !important;
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────────
   Mailchimp popup — mobile responsive overrides
   Mailchimp's mcjs injects the popup with inline positioning/sizing
   (bottom-right, fixed width) that clips and is hard to fill out on
   small touch screens. These media queries override those inline
   styles with !important so the popup becomes a full-width bottom
   sheet on mobile, with touch-friendly inputs, no horizontal
   overflow, vertically stacked fields, and tappable controls.
   Scoped to #mc_embed_signup and descendants only — does NOT affect
   the in-page Mailchimp forms on /merchandise, /join-us, or the
   global ContactForm.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Popup shell — full-width bottom sheet, no right-edge clipping. */
  #mc_embed_signup {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 100dvh !important;
  }

  /* Inner wrappers — full width, no clipping, safe box model. */
  #mc_embed_signup .mc_embed_signup,
  #mc_embed_signup .mc_embed_signup_scroll,
  #mc_embed_signup .mc-form-embed,
  #mc_embed_signup form,
  #mc_embed_signup .mc-embedded-subscribe-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Headings — slightly smaller on mobile, still Oswald uppercase. */
  #mc_embed_signup h1,
  #mc_embed_signup h2,
  #mc_embed_signup h3,
  #mc_embed_signup .mc-embedded-subscribe-form-heading,
  #mc_embed_signup .heading {
    font-size: 1.25rem !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
  }

  /* Body / helper text — readable, not cramped. */
  #mc_embed_signup p,
  #mc_embed_signup .helper-text,
  #mc_embed_signup .mc-text {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    margin: 0 0 0.75rem 0 !important;
  }

  /* Field labels — keep eyebrow style, slightly larger for legibility. */
  #mc_embed_signup label,
  #mc_embed_signup .mc-field-group label,
  #mc_embed_signup .mc-label {
    display: block !important;
    width: 100% !important;
    font-size: 0.8125rem !important;
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
  }

  /* Field groups — stack vertically, full width, no inline clipping. */
  #mc_embed_signup .mc-field-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inputs — touch-friendly: 44px min-height, 16px font to prevent
     iOS auto-zoom, full width, stack vertically. */
  #mc_embed_signup input[type="email"],
  #mc_embed_signup input[type="text"],
  #mc_embed_signup .mc-field-group input,
  #mc_embed_signup .email {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0.75rem 0.875rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
         appearance: none !important;
  }

  /* Submit button — full-width tappable block, 44px min-height. */
  #mc_embed_signup input[type="submit"],
  #mc_embed_signup .mc-field-group input[type="submit"],
  #mc_embed_signup .button,
  #mc_embed_signup .mc-embedded-subscribe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 1rem !important;
    padding: 0.85rem 1rem !important;
    margin: 0.75rem 0 0 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
         appearance: none !important;
  }

  /* Consent checkbox group — full width, tappable, label wraps. */
  #mc_embed_signup .mc-field-group.input-group,
  #mc_embed_signup .mc-field-group.checkbox-group,
  #mc_embed_signup .interestgroup_field,
  #mc_embed_signup .mc-interest-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #mc_embed_signup input[type="checkbox"],
  #mc_embed_signup input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 0.5rem 0 0 !important;
    flex: 0 0 auto !important;
  }
  #mc_embed_signup .mc-field-group.input-group label,
  #mc_embed_signup .mc-field-group.checkbox-group label,
  #mc_embed_signup .interestgroup_field label,
  #mc_embed_signup .mc-interest-group label {
    display: inline-flex !important;
    align-items: flex-start !important;
    width: calc(100% - 2rem) !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 0.5rem 0 !important;
  }

  /* Close button — fixed top-right inside the sheet, 44px hit target. */
  #mc_embed_signup .mc-close-modal,
  #mc_embed_signup .mc-close,
  #mc_embed_signup a[href="#close"],
  #mc_embed_signup .close-modal,
  #mc_embed_signup button.mc-close {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    z-index: 10 !important;
  }

  /* Response / error / success messages — full width, readable. */
  #mc_embed_signup .response,
  #mc_embed_signup #mce-success-response,
  #mc_embed_signup #mce-error-response,
  #mc_embed_signup .mce_inline_error {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0.5rem 0.75rem !important;
    box-sizing: border-box !important;
  }

  /* "Powered by" footer link — full width, smaller, no clipping. */
  #mc_embed_signup .mc-embedded-subscribe-form .small-help,
  #mc_embed_signup .small-help,
  #mc_embed_signup .powered-by,
  #mc_embed_signup a[href*="mailchimp"] {
    display: block !important;
    width: 100% !important;
    font-size: 0.625rem !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
  }

  /* Generic injected divs/sections — full width, no overflow. */
  #mc_embed_signup div,
  #mc_embed_signup section,
  #mc_embed_signup fieldset {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* Very small screens — tighten padding and font sizes further so the
   popup stays usable on phones under 480px wide. */
@media (max-width: 480px) {
  #mc_embed_signup {
    padding: 0.75rem !important;
  }
  #mc_embed_signup h1,
  #mc_embed_signup h2,
  #mc_embed_signup h3,
  #mc_embed_signup .mc-embedded-subscribe-form-heading,
  #mc_embed_signup .heading {
    font-size: 1.125rem !important;
    padding-right: 2.5rem !important;
  }
  #mc_embed_signup p,
  #mc_embed_signup .helper-text,
  #mc_embed_signup .mc-text {
    font-size: 0.8125rem !important;
  }
  #mc_embed_signup input[type="email"],
  #mc_embed_signup input[type="text"],
  #mc_embed_signup .mc-field-group input,
  #mc_embed_signup .email {
    padding: 0.625rem 0.75rem !important;
  }
  #mc_embed_signup input[type="submit"],
  #mc_embed_signup .mc-field-group input[type="submit"],
  #mc_embed_signup .button,
  #mc_embed_signup .mc-embedded-subscribe {
    padding: 0.75rem 0.875rem !important;
  }
  #mc_embed_signup .mc-field-group {
    margin: 0 0 0.625rem 0 !important;
  }
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.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 {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.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));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.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\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.hover\:border-red-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#00247D\]\/30:hover {
  background-color: rgb(0 36 125 / 0.3);
}
.hover\:bg-\[oklch\(var\(--admin-card-hover\)\)\]:hover {
  background-color: oklch(var(--admin-card-hover));
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-card:hover {
  background-color: oklch(var(--card));
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-emerald-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-foreground:hover {
  background-color: oklch(var(--foreground));
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:bg-\[linear-gradient\(to_bottom\2c transparent_70\%\2c \#00247D_70\%\2c \#00247D_85\%\2c transparent_85\%\)\]:hover {
  background-image: linear-gradient(to bottom,transparent 70%,#00247D 70%,#00247D 85%,transparent 85%);
}
.hover\:bg-\[length\:100\%_100\%\]:hover {
  background-size: 100% 100%;
}
.hover\:text-\[\#C8102E\]:hover {
  --tw-text-opacity: 1;
  color: rgb(200 16 46 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-background:hover {
  color: oklch(var(--background));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.hover\:text-primary-foreground:hover {
  color: oklch(var(--primary-foreground));
}
.hover\:text-primary\/80:hover {
  color: oklch(var(--primary) / 0.8);
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:no-underline:hover {
  text-decoration-line: none;
}
.hover\:decoration-primary:hover {
  text-decoration-color: oklch(var(--primary) / 1);
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.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-xl:hover {
  --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);
}
.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\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-\[\#C8102E\]:focus {
  --tw-text-opacity: 1;
  color: rgb(200 16 46 / var(--tw-text-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:bg-card:focus-visible {
  background-color: oklch(var(--card));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-\[oklch\(var\(--primary\)\)\]:focus-visible {
  outline-color: oklch(var(--primary));
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.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-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.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));
}
.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;
}
.group:focus-within .group-focus-within\:pointer-events-auto {
  pointer-events: auto;
}
.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}
.group:focus-within .group-focus-within\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}
.group:hover .group-hover\:visible {
  visibility: visible;
}
.group:hover .group-hover\:w-10 {
  width: 2.5rem;
}
.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\: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-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\: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-\[1\.04\] {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-\[oklch\(0\.62_0\.24_25\)\] {
  color: oklch(0.62 0.24 25);
}
.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.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;
}
.group:hover .group-hover\:brightness-110 {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.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));
}
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.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;
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: 0;
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.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"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}
.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"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.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"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.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"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.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 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);
}
.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --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);
}
.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-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.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;
}
.\*\: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-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}
.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"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.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"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}
.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.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;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: 0;
}
.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 {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.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 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);
}
.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\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.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));
}
.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: reduce) {

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

  .group:hover .motion-reduce\:group-hover\: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:hover .motion-reduce\:group-hover\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}
.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.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 *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.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));
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}
@media (min-width: 640px) {

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

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

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:aspect-\[21\/9\] {
    aspect-ratio: 21/9;
  }

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

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:min-h-\[75dvh\] {
    min-height: 75dvh;
  }

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

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

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

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

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

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

  .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\:flex-row {
    flex-direction: row;
  }

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

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

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

  .sm\:justify-center {
    justify-content: center;
  }

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

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .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\:p-10 {
    padding: 2.5rem;
  }

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

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

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

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

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

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

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

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

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

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

  .sm\:pb-32 {
    padding-bottom: 8rem;
  }

  .sm\:pb-\[14dvh\] {
    padding-bottom: 14dvh;
  }

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

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

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

  .sm\:pt-32 {
    padding-top: 8rem;
  }

  .sm\:pt-40 {
    padding-top: 10rem;
  }

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

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

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

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

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

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

  .sm\:text-7xl {
    font-size: 4.5rem;
    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;
  }

  .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\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table-cell {
    display: table-cell;
  }

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

  .md\:min-h-\[85dvh\] {
    min-height: 85dvh;
  }

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

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

  .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\:gap-1\.5 {
    gap: 0.375rem;
  }

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

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

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

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

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

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

  .md\:opacity-0 {
    opacity: 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;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --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);
  }
}
@media (min-width: 1024px) {

  .lg\:bottom-0 {
    bottom: 0px;
  }

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

  .lg\:flex {
    display: flex;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

  .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\:flex-row {
    flex-direction: row;
  }

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

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

  .lg\:justify-center {
    justify-content: center;
  }

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

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

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

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

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

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

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

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

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

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

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}
@media (min-width: 1280px) {

  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:h-16 {
    height: 4rem;
  }

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

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

  .xl\:gap-6 {
    gap: 1.5rem;
  }

  .xl\:pl-0 {
    padding-left: 0px;
  }

  .xl\:pr-12 {
    padding-right: 3rem;
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.\[\&\: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;
  border-bottom-right-radius: 0;
}
.\[\&\>\[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 {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&\>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) / 1);
}
.\[\&_\.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) / 1);
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.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] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_\[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-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_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 {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}