/*
 * Stylesheet for the server-rendered public film page (views/films/**) and
 * the OAuth consent pages (views/oauth/**). Compiled separately from the SPA
 * bundle by script/marketingCss.ts with tailwind.films.config.ts. Tokens, the
 * page base and the component layer come from the shared design system
 * (shared/design); the preset injects the :root variables, so nothing here
 * redeclares a colour or radius. What remains is film-page-only: the page's
 * own heading type, the native <dialog> backdrop and the pin that keeps the
 * locked trailer overlay exactly as it was. Imports must come first (CSS
 * rule), the Tailwind directives follow.
 */
/* Base layer: the page itself. Tokens come from the preset's :root block. */
/*
 * Component layer: the graded glass. Only what utilities cannot express lives
 * here (gradient fills, the masked lit-edge ring, inner highlights). Recipes in
 * recipes.ts attach these classes; nothing else should.
 *
 * Depth strategy, declared once: tonal surface steps + lit-edge hairlines +
 * a 1px inner top highlight. No resting drop shadows on panels and no backdrop
 * blur (panels sit on a flat page; blur caused hover ghost bands on macOS).
 */

*, ::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: Inter, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: Outfit, sans-serif; /* 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 {
  --background: 222 47% 6%;
  --foreground: 210 40% 98%;
  --card: 222 47% 10%;
  --card-foreground: 210 40% 98%;
  --popover: 222 47% 10%;
  --popover-foreground: 210 40% 98%;
  --primary: 193 98% 62%;
  --primary-foreground: 222 47% 11%;
  --secondary: 211 95% 48%;
  --secondary-foreground: 0 0% 100%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 33% 17%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 193 98% 62%;
  --sidebar-background: 222 47% 6%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-primary: 193 98% 62%;
  --sidebar-primary-foreground: 222 47% 11%;
  --sidebar-accent: 217 33% 17%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 217 33% 17%;
  --sidebar-ring: 193 98% 62%;
  --ink: 210 40% 98%;
  --ink-secondary: 215 20% 72%;
  --ink-tertiary: 215 16% 58%;
  --ink-muted: 215 14% 44%;
  --surface-page: hsl(222 47% 6%);
  --surface-panel: rgb(255 255 255 / 0.05);
  --surface-well: rgb(0 0 0 / 0.25);
  --surface-frame: hsl(222 40% 11%);
  --hairline: rgb(255 255 255 / 0.1);
  --edge-accent: 255 255 255;
  --edge-line: 0.2;
  --edge-glow: 0;
  --edge-side: 0.12;
  --edge-base: 0.08;
  --control-sm: 2.25rem;
  --control-md: 2.5rem;
  --control-lg: 3rem;
  --control-icon: 2.5rem;
  --radius: 0.75rem;
  --radius-control: 0.75rem;
  --radius-panel: 0.75rem;
  --radius-card: 1rem;
  --frame-pad: 0.5rem;
  --glow-primary: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 0 28px rgb(63 212 253 / 0.28);
  --glow-primary-hover: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0 32px rgb(63 212 253 / 0.4);
  --shadow-float: 0 24px 48px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-frame: 0 30px 60px -36px rgb(0 0 0 / 0.6);
  --shadow-well: inset 0 1px 2px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-field: inset 0 1px 2px rgb(0 0 0 / 0.35);
  --glow-field: inset 0 1px 2px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(63 212 253 / 0.5), 0 0 22px rgb(63 212 253 / 0.28);
  --gradient-brand: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
}
  * {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
  }

  body {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
  font-family: Inter, sans-serif;
  --tw-text-opacity: 1;
  color: hsl(var(--ink) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
    caret-color: hsl(var(--primary));
}

  /* The page glow: one fixed layer behind everything, so panels can stay translucent. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 15% 50%, hsl(var(--secondary) / 0.1), transparent 25%),
      radial-gradient(circle at 85% 30%, hsl(var(--primary) / 0.08), transparent 25%);
  }

  h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-family: Outfit, sans-serif;
  letter-spacing: -0.025em;
}

  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

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

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

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.16);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(255 255 255 / 0.28);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  /* The film page's type is kept as the owner approved it: Outfit at 600 with
     regular tracking and natural wrapping, not the display tweaks the shared
     base gives marketing and app headings. (The OAuth screens set their type
     through recipe classes, which take precedence over this rule.) */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: normal;
    text-wrap: wrap;
  }

  /* The checkout dialog is a native <dialog> opened with showModal(); its
     backdrop matches the dialog recipe's overlay (bg-background/80). */
  dialog::backdrop {
    background-color: hsl(222 47% 6% / 0.8);
  }

  /* LOCKED: the trailer overlay (views/films/partials/trailer-overlay.ejs)
     keeps its pre-rollout look. The preset moved --radius from 8px to 12px
     and added a global focus outline; pin the old values on the overlay root
     so its iframe corner and close button stay what they were. */
  [data-trailer-overlay] {
    --radius: 0.5rem;
  }

  [data-trailer-overlay] :focus-visible {
    outline: revert;
    outline-offset: revert;
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}
@media (min-width: 475px) {

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

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

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

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

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

  .container {
    max-width: 1536px;
  }
}
  /* ── Lit-edge hairline ──────────────────────────────────────────────
     A 1px gradient ring — accent-tinted along the top (--edge-line), fading
     to white/12 → white/8 down the sides — drawn in ::before and masked to
     the ring, so the interior stays translucent and the page glow shows
     through. Emphasis raises --edge-line / --edge-glow, nothing else. */
  .ds-edge,
  .ds-panel {
    position: relative;
    isolation: isolate;
  }
  .ds-edge::before,
  .ds-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgb(var(--edge-accent) / var(--edge-line)),
      rgb(255 255 255 / var(--edge-side)) 36%,
      rgb(255 255 255 / var(--edge-base))
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }

  /* ── Panel: graded glass ────────────────────────────────────────────
     Brighter at the top, fading toward the page (felt, not seen), inner top
     highlight for the edge read, optional accent glow behind the top edge. */
  .ds-panel {
    background:
      radial-gradient(70% 45% at 50% 0%, rgb(var(--edge-accent) / var(--edge-glow)), transparent 70%),
      linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }

  /* Hover/raised: an overlay's opacity brightens fill and edge together (no gradient transition), plus a 1px lift. */
  .ds-interactive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: rgb(255 255 255 / 0.05);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .ds-interactive:hover::after,
  .ds-interactive:focus-within::after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ds-interactive {
      transition: transform var(--duration-base) var(--ease-out);
    }
    .ds-interactive:hover {
      transform: translateY(-1px);
    }
  }

  .ds-emphasis {
    --edge-line: 0.4;
    --edge-glow: 0.1;
  }

  /* ── Inset well: slightly darker, receives content (inputs, meters, code, icon chips). */
  .ds-well {
    background: var(--surface-well);
    box-shadow: var(--shadow-well);
  }

  /* ── Frame: the house frame (port of Helpdesky's .hf-dark) ─────────
     Outer shell: padding, radius = inner + padding, three-stop cyan→blue
     wash over a base a touch lighter than the page, accent glow behind the
     top, lit-edge border via the padding-box/border-box stack, soft deep
     shadow. For showcase objects only — demo windows, feature media, video
     thumbnails, the highlighted plan. */
  .ds-frame {
    --frame-inner: var(--radius-panel);
    --edge-line: 0.3;
    --edge-glow: 0.1;
    padding: var(--frame-pad);
    border: 1px solid transparent;
    border-radius: calc(var(--frame-inner) + var(--frame-pad));
    background:
      radial-gradient(70% 45% at 50% 0%, rgb(var(--edge-accent) / var(--edge-glow)), transparent 70%) padding-box,
      linear-gradient(160deg, rgb(63 212 253 / 0.16), rgb(6 119 239 / 0.13) 55%, rgb(37 99 235 / 0.07)) padding-box,
      linear-gradient(var(--surface-frame), var(--surface-frame)) padding-box,
      linear-gradient(180deg, rgb(var(--edge-accent) / var(--edge-line)), rgb(255 255 255 / 0.12) 36%, rgb(255 255 255 / 0.08)) border-box;
    box-shadow: var(--shadow-frame);
  }
  .ds-frame-core {
    border-radius: var(--frame-inner);
    overflow: hidden;
  }

  /* ── Showcase ring (hero trial, 2026-10-05): a soft offset ring around ONE
     hero object per page — the live player, a product video. The band is the
     house frame's wash (the same cyan → blue tints `.ds-frame` lays over its
     base) left translucent, so it reads as a soft halo rather than a solid
     bezel, closed by a faint hairline; the window inside is the dark page
     surface with a crisp hairline edge. The window's radius is 20px (card
     radius × 1.25): at the card's 16px the player's corners read squarer than
     the ring's (owner, 2026-10-05); ~1.4× the band keeps the two curves
     parallel, the proportion of the owner's reference. Concentric: outer
     radius = window radius + band (10px on phones, 14px from `sm`, from
     `--frame-pad`). No blur. Band colour (owner, 2026-10-05): the top-left
     corner is the title/logo cyan (`--primary`), fading to the same cyan at the
     bottom right; both stops were toned down the same day ("a bit too strong":
     solid → 60 % at the corner, 16 % → 10 % at the far end). */
  .ds-showcase {
    --showcase-band: calc(var(--frame-pad) * 1.25);
    --showcase-radius: calc(var(--radius-card) * 1.25);
    position: relative;
    isolation: isolate;
    padding: var(--showcase-band);
    border-radius: calc(var(--showcase-radius) + var(--showcase-band));
    background: linear-gradient(160deg, hsl(var(--primary) / 0.6), hsl(var(--primary) / 0.1));
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.06),
      var(--shadow-frame);
  }
  /* The earlier band, kept alongside the accent one (owner, 2026-10-05): the
     house frame's wash — the same cyan → blue tints `.ds-frame` lays over its
     base — left translucent, with the cyan corner lifted from 16 % to 32 %
     the same day ("too flat of a gradient"). `showcase({ band: 'wash' })`. */
  .ds-showcase-wash {
    background: linear-gradient(160deg, rgb(63 212 253 / 0.32), rgb(6 119 239 / 0.13) 55%, rgb(37 99 235 / 0.07));
  }
  @media (min-width: 640px) {
    .ds-showcase {
      --showcase-band: calc(var(--frame-pad) * 1.75);
    }
  }
  .ds-showcase-window {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--showcase-radius);
    background: var(--surface-page);
    box-shadow: 0 0 0 1px var(--hairline);
  }

  /* ── Graded-glass bar (scrolled marketing header): the panel grade over a
     near-opaque page tint, bottom hairline, inner top highlight. No blur. */
  .ds-bar {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.03)),
      hsl(var(--background) / 0.92);
    border-bottom: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }

  /* ── Active nav item: thin cyan edge marker. */
  .ds-nav-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 2px;
    border-radius: 9999px;
    background: hsl(var(--primary));
  }

  /* Product specimens: a substantial branded surround, not a live UI.
     All treatment consumes the incumbent tokens; artwork geometry belongs
     to the consuming template. Scoped classes leave existing demos alone. */
  .ds-product-graphic {
    isolation: isolate;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius-card) + var(--frame-pad) * 3);
    background:
      radial-gradient(ellipse at 0% 0%, hsl(var(--primary) / 0.38), transparent 65%),
      linear-gradient(145deg, hsl(var(--secondary) / 0.58), hsl(var(--primary) / 0.16)),
      var(--surface-frame);
    box-shadow: var(--shadow-frame);
  }
  .ds-product-graphic-window {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background: var(--surface-page);
    box-shadow: var(--shadow-well);
  }
  .ds-product-graphic-media {
    background:
      radial-gradient(ellipse at 70% 15%, hsl(var(--primary) / 0.24), transparent 65%),
      linear-gradient(155deg, hsl(var(--secondary) / 0.22), var(--surface-frame));
  }
  .ds-product-graphic-overlay {
    background: var(--surface-frame);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
  }
  .ds-product-graphic-track {
    background: var(--hairline);
    border-radius: var(--radius-control);
  }

  .ds-select-chevron {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
.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-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.m-0 {
  margin: 0px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-24 {
  width: 6rem;
  height: 6rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.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-control-icon {
  width: var(--control-icon);
  height: var(--control-icon);
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-control-lg {
  height: var(--control-lg);
}
.h-control-md {
  height: var(--control-md);
}
.h-control-sm {
  height: var(--control-sm);
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-none {
  max-height: none;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-44 {
  width: 11rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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 spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hairline);
}
.self-stretch {
  align-self: stretch;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[calc\(var\(--radius-control\)-4px\)\] {
  border-radius: calc(var(--radius-control) - 4px);
}
.rounded-card {
  border-radius: var(--radius-card);
}
.rounded-control {
  border-radius: var(--radius-control);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-panel {
  border-radius: var(--radius-panel);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4);
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-hairline {
  border-color: var(--hairline);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}
.border-purple-400\/30 {
  border-color: rgb(192 132 252 / 0.3);
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-background {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}
.bg-background\/80 {
  background-color: hsl(var(--background) / 0.8);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/\[0\.08\] {
  background-color: rgb(16 185 129 / 0.08);
}
.bg-hairline {
  background-color: var(--hairline);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.15);
}
.bg-primary\/\[0\.08\] {
  background-color: hsl(var(--primary) / 0.08);
}
.bg-purple-500\/10 {
  background-color: rgb(168 85 247 / 0.1);
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-surface-frame {
  background-color: var(--surface-frame);
}
.bg-surface-well {
  background-color: var(--surface-well);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-brand {
  background-image: var(--gradient-brand);
}
.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-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/15 {
  --tw-gradient-from: hsl(var(--primary) / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/\[0\.16\] {
  --tw-gradient-from: hsl(var(--primary) / 0.16) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/\[0\.18\] {
  --tw-gradient-from: rgb(255 255 255 / 0.18) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-black\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.to-primary\/\[0\.07\] {
  --tw-gradient-to: hsl(var(--primary) / 0.07) var(--tw-gradient-to-position);
}
.to-white\/0 {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-\[right_0\.75rem_center\] {
  background-position: right 0.75rem center;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentColor;
}
.stroke-current {
  stroke: currentColor;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.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;
}
.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-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.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-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-\[family-name\:ui-monospace\2c SFMono-Regular\2c Menlo\2c Consolas\2c monospace\] {
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.font-display {
  font-family: Outfit, sans-serif;
}
.font-heading {
  font-family: Outfit, sans-serif;
}
.font-mono {
  font-family: Outfit, sans-serif;
}
.font-sans {
  font-family: Inter, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.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\.1\] {
  line-height: 1.1;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-ink {
  --tw-text-opacity: 1;
  color: hsl(var(--ink) / var(--tw-text-opacity, 1));
}
.text-ink-muted {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-muted) / var(--tw-text-opacity, 1));
}
.text-ink-secondary {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-secondary) / var(--tw-text-opacity, 1));
}
.text-ink-tertiary {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-tertiary) / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.caret-primary {
  caret-color: hsl(var(--primary) / 1);
}
.accent-foreground {
  accent-color: hsl(var(--foreground) / 1);
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgb\(255_255_255_\/_0\.08\)\] {
  --tw-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-field {
  --tw-shadow: var(--shadow-field);
  --tw-shadow-colored: var(--shadow-field);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-field-focus {
  --tw-shadow: var(--glow-field);
  --tw-shadow-colored: var(--glow-field);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-float {
  --tw-shadow: var(--shadow-float);
  --tw-shadow-colored: var(--shadow-float);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-frame {
  --tw-shadow: var(--shadow-frame);
  --tw-shadow-colored: var(--shadow-frame);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow {
  --tw-shadow: var(--glow-primary);
  --tw-shadow-colored: var(--glow-primary);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-hover {
  --tw-shadow: var(--glow-primary-hover);
  --tw-shadow-colored: var(--glow-primary-hover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-well {
  --tw-shadow: var(--shadow-well);
  --tw-shadow-colored: var(--shadow-well);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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);
}
.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-\[0_0_28px_rgba\(63\2c 212\2c 253\2c 0\.25\)\] {
  --tw-drop-shadow: drop-shadow(0 0 28px rgba(63,212,253,0.25));
  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);
}
.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-\[background-color\2c border-color\2c color\2c box-shadow\2c transform\2c opacity\] {
  transition-property: background-color,border-color,color,box-shadow,transform,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\] {
  transition-property: background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\] {
  transition-property: background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c padding\2c border-color\] {
  transition-property: background-color,padding,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[box-shadow\2c border-color\2c background-color\] {
  transition-property: box-shadow,border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c border-color\2c background-color\] {
  transition-property: color,border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c transform\] {
  transition-property: color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c background-color\2c border-color\] {
  transition-property: opacity,background-color,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[transform\2c opacity\] {
  transition-property: transform,opacity;
  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-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-base {
  transition-duration: var(--duration-base);
}
.duration-fast {
  transition-duration: var(--duration-fast);
}
.duration-slow {
  transition-duration: var(--duration-slow);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-out-soft {
  transition-timing-function: var(--ease-out);
}
  /* The hero heading's gradient (pinned brand element): the brand gradient token. */
  .text-gradient {
    background-image: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Scroll/load reveals: the existing CSS approach, movement dropped under reduced motion. */
  @keyframes reveal-up {

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  .reveal {
  animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      animation: none;
    }
  }
.\[--edge-accent\:248_113_113\] {
  --edge-accent: 248 113 113;
}
.\[--edge-accent\:251_191_36\] {
  --edge-accent: 251 191 36;
}
.\[--edge-accent\:52_211_153\] {
  --edge-accent: 52 211 153;
}
.\[--frame-inner\:var\(--radius-card\)\] {
  --frame-inner: var(--radius-card);
}
.placeholder\:text-ink-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-muted) / var(--tw-text-opacity, 1));
}
.placeholder\:text-ink-muted::placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-muted) / var(--tw-text-opacity, 1));
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.open\:grid[open] {
  display: grid;
}
.hover\:border-primary\/50:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.hover\:border-primary\/60:hover {
  border-color: hsl(var(--primary) / 0.6);
}
.hover\:border-red-400\/30:hover {
  border-color: rgb(248 113 113 / 0.3);
}
.hover\:border-white\/15:hover {
  border-color: rgb(255 255 255 / 0.15);
}
.hover\:border-white\/30:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}
.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgb(255 255 255 / 0.08);
}
.hover\:from-primary\/\[0\.26\]:hover {
  --tw-gradient-from: hsl(var(--primary) / 0.26) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-white\/\[0\.26\]:hover {
  --tw-gradient-from: rgb(255 255 255 / 0.26) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-primary\/\[0\.14\]:hover {
  --tw-gradient-to: hsl(var(--primary) / 0.14) var(--tw-gradient-to-position);
}
.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--ink) / var(--tw-text-opacity, 1));
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:shadow-glow-hover:hover {
  --tw-shadow: var(--glow-primary-hover);
  --tw-shadow-colored: var(--glow-primary-hover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:border-primary\/60:focus-visible {
  border-color: hsl(var(--primary) / 0.6);
}
.focus-visible\:shadow-field-focus:focus-visible {
  --tw-shadow: var(--glow-field);
  --tw-shadow-colored: var(--glow-field);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.disabled\:hover\:bg-white\/5:hover:disabled {
  background-color: rgb(255 255 255 / 0.05);
}
.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\:border-primary\/60 {
  border-color: hsl(var(--primary) / 0.6);
}
.group:hover .group-hover\:bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-ink {
  --tw-text-opacity: 1;
  color: hsl(var(--ink) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {

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

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

  .group:hover .motion-safe\:group-hover\:scale-\[1\.03\] {
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
@media (min-width: 640px) {

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

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

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

  .sm\:right-0 {
    right: 0px;
  }

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

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

  .sm\:block {
    display: block;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-7 {
    gap: 1.75rem;
  }

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

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

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

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

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

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

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

  .sm\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }
}
@media (min-width: 768px) {

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

  .md\:w-60 {
    width: 15rem;
  }

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

  .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\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

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

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

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1280px) {

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

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

  .xl\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
}
@media (min-width: 1536px) {

  .\32xl\:gap-6 {
    gap: 1.5rem;
  }
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:mt-0\.5 svg {
  margin-top: 0.125rem;
}
.\[\&_svg\]\:size-10 svg {
  width: 2.5rem;
  height: 2.5rem;
}
.\[\&_svg\]\:size-3\.5 svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:size-5 svg {
  width: 1.25rem;
  height: 1.25rem;
}
.\[\&_svg\]\:size-6 svg {
  width: 1.5rem;
  height: 1.5rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_svg\]\:translate-x-px svg {
  --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));
}
.\[\&_svg\]\:text-primary svg {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}