/*
 * Marketing site stylesheet (server-rendered EJS pages under views/marketing).
 * Compiled separately from the app's SPA CSS by script/marketingCss.ts with
 * tailwind.marketing.config.ts, which extends the shared design preset.
 *
 * Tokens, the page base (glow, headings, focus ring, scrollbars) and the
 * component layer (graded panels, lit edges, frames, reveals) come from
 * shared/design; this file keeps only what is specific to these pages: the
 * scroll-driven reveal, the /pricing chooser state, the storyboard demos, the
 * scrolled header bar and the reading pages (articles and tutorials).
 */
/* 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;
    }
  }
  /* Native disclosure widgets replace the React accordions; hide the default marker. */
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
.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-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.-inset-4 {
  inset: -1rem;
}
.-inset-px {
  inset: -1px;
}
.inset-0 {
  inset: 0px;
}
.inset-1 {
  inset: 0.25rem;
}
.inset-6 {
  inset: 1.5rem;
}
.-inset-x-2 {
  left: -0.5rem;
  right: -0.5rem;
}
.-inset-y-1 {
  top: -0.25rem;
  bottom: -0.25rem;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.-bottom-10 {
  bottom: -2.5rem;
}
.-bottom-20 {
  bottom: -5rem;
}
.-left-3 {
  left: -0.75rem;
}
.-left-4 {
  left: -1rem;
}
.-left-40 {
  left: -10rem;
}
.-left-5 {
  left: -1.25rem;
}
.-right-10 {
  right: -2.5rem;
}
.-right-20 {
  right: -5rem;
}
.-right-24 {
  right: -6rem;
}
.-right-3 {
  right: -0.75rem;
}
.-right-40 {
  right: -10rem;
}
.-top-10 {
  top: -2.5rem;
}
.-top-24 {
  top: -6rem;
}
.-top-3 {
  top: -0.75rem;
}
.-top-40 {
  top: -10rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-16 {
  bottom: 4rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-7 {
  bottom: 1.75rem;
}
.bottom-9 {
  bottom: 2.25rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-6 {
  left: 1.5rem;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-14 {
  right: 3.5rem;
}
.right-2 {
  right: 0.5rem;
}
.right-28 {
  right: 7rem;
}
.right-3 {
  right: 0.75rem;
}
.right-32 {
  right: 8rem;
}
.right-4 {
  right: 1rem;
}
.right-6 {
  right: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/3 {
  top: 33.333333%;
}
.top-1\/4 {
  top: 25%;
}
.top-2 {
  top: 0.5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-\[268px\] {
  top: 268px;
}
.top-\[48rem\] {
  top: 48rem;
}
.top-\[60px\] {
  top: 60px;
}
.top-\[86px\] {
  top: 86px;
}
.top-\[94px\] {
  top: 94px;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-\[12\] {
  order: 12;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-ml-3 {
  margin-left: -0.75rem;
}
.-mr-10 {
  margin-right: -2.5rem;
}
.-mr-px {
  margin-right: -1px;
}
.-mt-10 {
  margin-top: -2.5rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-24 {
  margin-bottom: 6rem;
}
.mb-28 {
  margin-bottom: 7rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-auto {
  margin-left: auto;
}
.ml-px {
  margin-left: 1px;
}
.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-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.mt-px {
  margin-top: 1px;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/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-2 {
  width: 0.5rem;
  height: 0.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-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[26rem\] {
  height: 26rem;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[500px\] {
  height: 500px;
}
.h-\[58px\] {
  height: 58px;
}
.h-\[600px\] {
  height: 600px;
}
.h-\[640px\] {
  height: 640px;
}
.h-\[800px\] {
  height: 800px;
}
.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;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-64 {
  min-height: 16rem;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-\[80vh\] {
  min-height: 80vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[104px\] {
  width: 104px;
}
.w-\[1200px\] {
  width: 1200px;
}
.w-\[22\%\] {
  width: 22%;
}
.w-\[39\%\] {
  width: 39%;
}
.w-\[640px\] {
  width: 640px;
}
.w-\[720px\] {
  width: 720px;
}
.w-\[800px\] {
  width: 800px;
}
.w-\[900px\] {
  width: 900px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[4ch\] {
  min-width: 4ch;
}
.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-\[150px\] {
  max-width: 150px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[60vw\] {
  max-width: 60vw;
}
.max-w-\[85\%\] {
  max-width: 85%;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-left {
  transform-origin: left;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-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));
}
.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[10\%\] {
  --tw-translate-x: 10%;
  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 bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {

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

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}
.animate-soft-pulse {
  animation: soft-pulse 2.4s ease-in-out infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-none {
  list-style-type: 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));
}
.grid-cols-\[0\.8fr_1fr_1\.2fr\] {
  grid-template-columns: 0.8fr 1fr 1.2fr;
}
.grid-cols-\[2\.5rem_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 2.5rem minmax(0,1fr);
}
.grid-cols-\[4\.5rem_minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: 4.5rem minmax(0,1fr) auto;
}
.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;
}
.justify-items-start {
  justify-items: start;
}
.justify-items-end {
  justify-items: end;
}
.justify-items-center {
  justify-items: center;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-16 {
  gap: 4rem;
}
.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-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.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-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.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-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}
.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hairline);
}
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}
.divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.05);
}
.self-start {
  align-self: flex-start;
}
.self-stretch {
  align-self: stretch;
}
.justify-self-end {
  justify-self: end;
}
.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;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[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-none {
  border-radius: 0px;
}
.rounded-panel {
  border-radius: var(--radius-panel);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-lg {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.rounded-bl-md {
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-br-md {
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-l {
  border-left-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.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-blue-400\/20 {
  border-color: rgb(96 165 250 / 0.2);
}
.border-current {
  border-color: currentColor;
}
.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-green-400\/20 {
  border-color: rgb(74 222 128 / 0.2);
}
.border-green-400\/25 {
  border-color: rgb(74 222 128 / 0.25);
}
.border-green-400\/30 {
  border-color: rgb(74 222 128 / 0.3);
}
.border-green-500\/25 {
  border-color: rgb(34 197 94 / 0.25);
}
.border-hairline {
  border-color: var(--hairline);
}
.border-orange-500\/25 {
  border-color: rgb(249 115 22 / 0.25);
}
.border-orange-500\/30 {
  border-color: rgb(249 115 22 / 0.3);
}
.border-pink-500\/25 {
  border-color: rgb(236 72 153 / 0.25);
}
.border-pink-500\/30 {
  border-color: rgb(236 72 153 / 0.3);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/15 {
  border-color: hsl(var(--primary) / 0.15);
}
.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.2);
}
.border-primary\/25 {
  border-color: hsl(var(--primary) / 0.25);
}
.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}
.border-primary\/60 {
  border-color: hsl(var(--primary) / 0.6);
}
.border-primary\/70 {
  border-color: hsl(var(--primary) / 0.7);
}
.border-purple-400\/20 {
  border-color: rgb(192 132 252 / 0.2);
}
.border-purple-400\/30 {
  border-color: rgb(192 132 252 / 0.3);
}
.border-purple-500\/25 {
  border-color: rgb(168 85 247 / 0.25);
}
.border-purple-500\/30 {
  border-color: rgb(168 85 247 / 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-secondary\/20 {
  border-color: hsl(var(--secondary) / 0.2);
}
.border-secondary\/25 {
  border-color: hsl(var(--secondary) / 0.25);
}
.border-secondary\/30 {
  border-color: hsl(var(--secondary) / 0.3);
}
.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\/5 {
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.bg-\[\#0d1424\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 20 36 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0d1830\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 24 48 / var(--tw-bg-opacity, 1));
}
.bg-\[\#141a2b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(20 26 43 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-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\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-400\/10 {
  background-color: rgb(96 165 250 / 0.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-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-400\/10 {
  background-color: rgb(74 222 128 / 0.1);
}
.bg-green-400\/15 {
  background-color: rgb(74 222 128 / 0.15);
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}
.bg-hairline {
  background-color: var(--hairline);
}
.bg-ink {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--ink) / var(--tw-bg-opacity, 1));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/70 {
  background-color: hsl(var(--muted-foreground) / 0.7);
}
.bg-orange-400\/70 {
  background-color: rgb(251 146 60 / 0.7);
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/15 {
  background-color: rgb(249 115 22 / 0.15);
}
.bg-orange-500\/20 {
  background-color: rgb(249 115 22 / 0.2);
}
.bg-pink-500\/15 {
  background-color: rgb(236 72 153 / 0.15);
}
.bg-pink-500\/20 {
  background-color: rgb(236 72 153 / 0.2);
}
.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\/20 {
  background-color: hsl(var(--primary) / 0.2);
}
.bg-primary\/30 {
  background-color: hsl(var(--primary) / 0.3);
}
.bg-primary\/60 {
  background-color: hsl(var(--primary) / 0.6);
}
.bg-primary\/\[0\.04\] {
  background-color: hsl(var(--primary) / 0.04);
}
.bg-primary\/\[0\.08\] {
  background-color: hsl(var(--primary) / 0.08);
}
.bg-purple-300\/60 {
  background-color: rgb(216 180 254 / 0.6);
}
.bg-purple-300\/80 {
  background-color: rgb(216 180 254 / 0.8);
}
.bg-purple-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.bg-purple-400\/10 {
  background-color: rgb(192 132 252 / 0.1);
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10 {
  background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/15 {
  background-color: rgb(168 85 247 / 0.15);
}
.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-500\/5 {
  background-color: rgb(168 85 247 / 0.05);
}
.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-secondary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/10 {
  background-color: hsl(var(--secondary) / 0.1);
}
.bg-secondary\/15 {
  background-color: hsl(var(--secondary) / 0.15);
}
.bg-secondary\/5 {
  background-color: hsl(var(--secondary) / 0.05);
}
.bg-secondary\/60 {
  background-color: hsl(var(--secondary) / 0.6);
}
.bg-surface-frame {
  background-color: var(--surface-frame);
}
.bg-surface-well {
  background-color: var(--surface-well);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-\[radial-gradient\(circle_at_30\%_20\%\2c rgba\(62\2c 211\2c 252\2c 0\.35\)\2c transparent_45\%\)\2c radial-gradient\(circle_at_80\%_80\%\2c rgba\(6\2c 120\2c 240\2c 0\.4\)\2c transparent_50\%\)\] {
  background-image: radial-gradient(circle at 30% 20%,rgba(62,211,252,0.35),transparent 45%),radial-gradient(circle at 80% 80%,rgba(6,120,240,0.4),transparent 50%);
}
.bg-\[radial-gradient\(ellipse_at_center\2c _var\(--tw-gradient-stops\)\)\] {
  background-image: radial-gradient(ellipse at center, var(--tw-gradient-stops));
}
.bg-brand {
  background-image: var(--gradient-brand);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#0b1e3a\] {
  --tw-gradient-from: #0b1e3a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 30 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#10315c\] {
  --tw-gradient-from: #10315c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 49 92 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary {
  --tw-gradient-from: hsl(var(--primary) / 1) 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\/10 {
  --tw-gradient-from: hsl(var(--primary) / 0.1) 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\/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\/20 {
  --tw-gradient-from: hsl(var(--primary) / 0.2) 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\/25 {
  --tw-gradient-from: hsl(var(--primary) / 0.25) 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\/30 {
  --tw-gradient-from: hsl(var(--primary) / 0.3) 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\.12\] {
  --tw-gradient-from: hsl(var(--primary) / 0.12) 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-secondary\/15 {
  --tw-gradient-from: hsl(var(--secondary) / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary\/20 {
  --tw-gradient-from: hsl(var(--secondary) / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/10 {
  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/5 {
  --tw-gradient-from: rgb(255 255 255 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/\[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-\[\#10315c\] {
  --tw-gradient-to: rgb(16 49 92 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #10315c var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/\[0\.04\] {
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.04) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#062032\] {
  --tw-gradient-to: #062032 var(--tw-gradient-to-position);
}
.to-primary\/10 {
  --tw-gradient-to: hsl(var(--primary) / 0.1) var(--tw-gradient-to-position);
}
.to-primary\/5 {
  --tw-gradient-to: hsl(var(--primary) / 0.05) var(--tw-gradient-to-position);
}
.to-primary\/\[0\.07\] {
  --tw-gradient-to: hsl(var(--primary) / 0.07) var(--tw-gradient-to-position);
}
.to-secondary {
  --tw-gradient-to: hsl(var(--secondary) / 1) var(--tw-gradient-to-position);
}
.to-secondary\/10 {
  --tw-gradient-to: hsl(var(--secondary) / 0.1) var(--tw-gradient-to-position);
}
.to-secondary\/20 {
  --tw-gradient-to: hsl(var(--secondary) / 0.2) var(--tw-gradient-to-position);
}
.to-secondary\/25 {
  --tw-gradient-to: hsl(var(--secondary) / 0.25) var(--tw-gradient-to-position);
}
.to-secondary\/30 {
  --tw-gradient-to: hsl(var(--secondary) / 0.3) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white\/0 {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
}
.to-white\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0.05) var(--tw-gradient-to-position);
}
.bg-\[right_0\.75rem_center\] {
  background-position: right 0.75rem center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentColor;
}
.fill-white {
  fill: #fff;
}
.stroke-current {
  stroke: currentColor;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.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;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-20 {
  padding-right: 5rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-40 {
  padding-top: 10rem;
}
.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-text-bottom {
  vertical-align: text-bottom;
}
.align-\[-2px\] {
  vertical-align: -2px;
}
.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-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[9px\] {
  font-size: 9px;
}
.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-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
  line-height: 1rem;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[14px\] {
  line-height: 14px;
}
.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;
}
.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-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / 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-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-pink-400 {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / 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-primary\/80 {
  color: hsl(var(--primary) / 0.8);
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-400\/60 {
  color: rgb(248 113 113 / 0.6);
}
.text-secondary {
  --tw-text-opacity: 1;
  color: hsl(var(--secondary) / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 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-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.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-\[0_0_12px_rgba\(192\2c 132\2c 252\2c 0\.9\)\] {
  --tw-shadow: 0 0 12px rgba(192,132,252,0.9);
  --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_32px_rgba\(62\2c 211\2c 252\2c 0\.45\)\] {
  --tw-shadow: 0 0 32px rgba(62,211,252,0.45);
  --tw-shadow-colored: 0 0 32px 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_40px_rgba\(168\2c 85\2c 247\2c 0\.12\)\] {
  --tw-shadow: 0 0 40px rgba(168,85,247,0.12);
  --tw-shadow-colored: 0 0 40px 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_8px_rgba\(62\2c 211\2c 252\2c 0\.9\)\] {
  --tw-shadow: 0 0 8px rgba(62,211,252,0.9);
  --tw-shadow-colored: 0 0 8px 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_24px_60px_-20px_rgba\(0\2c 0\2c 0\2c 0\.7\)\2c 0_0_48px_rgba\(62\2c 211\2c 252\2c 0\.10\)\] {
  --tw-shadow: 0 24px 60px -20px rgba(0,0,0,0.7),0 0 48px rgba(62,211,252,0.10);
  --tw-shadow-colored: 0 24px 60px -20px var(--tw-shadow-color), 0 0 48px 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-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-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);
}
.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);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[120px\] {
  --tw-blur: blur(120px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[140px\] {
  --tw-blur: blur(140px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[150px\] {
  --tw-blur: blur(150px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[80px\] {
  --tw-blur: blur(80px);
  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);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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-opacity {
  transition-property: opacity;
  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;
}
  .reveal-delay-1 { animation-delay: 100ms; }
  .reveal-delay-2 { animation-delay: 200ms; }
  .reveal-delay-3 { animation-delay: 300ms; }
  .reveal-delay-4 { animation-delay: 400ms; }
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      animation: none;
    }
  }
  /* Tailwind v4 perspective utility used by the homepage demo player. */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Scroll-driven reveal where supported; elsewhere the element is simply
     visible. The load-time .reveal and its keyframes come from the shared
     component layer. */
  @supports (animation-timeline: view()) {
    .reveal-scroll {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal-scroll { 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);
}
.\[animation-delay\:120ms\] {
  animation-delay: 120ms;
}
.\[animation-delay\:240ms\] {
  animation-delay: 240ms;
}

/* ---------------------------------------------------------------------------
   Homepage hero backdrop: the page glow concentrated behind the headline and
   the showcase player. Layers in one absolutely positioned element — a faded
   hairline grid, a cyan crown and blue floor glow, and two aurora blobs that
   drift slowly (motion-safe only) — all fading into the page towards the
   bottom edge. Gradients and masks only: no backdrop-filter (macOS ghost
   bands) and no blur filter on viewport-sized layers. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, black 72%, transparent 100%);
  mask-image: linear-gradient(180deg, black 72%, transparent 100%);
}
.hero-backdrop-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 75%);
}
.hero-backdrop-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 45% at 50% -5%, hsl(var(--primary) / 0.08), transparent 70%),
    radial-gradient(45% 40% at 12% 92%, hsl(var(--primary) / 0.06), transparent 70%),
    radial-gradient(45% 40% at 88% 88%, hsl(var(--primary) / 0.06), transparent 70%);
}
.hero-backdrop-aurora {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 80vw;
  max-width: 1100px;
  aspect-ratio: 2 / 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, hsl(var(--primary) / 0.08), transparent);
}
.hero-backdrop-aurora-2 {
  top: 58%;
  width: 60vw;
  max-width: 820px;
  background: radial-gradient(closest-side, hsl(var(--primary) / 0.06), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-backdrop-aurora { animation: hero-drift 18s ease-in-out infinite alternate; }
  .hero-backdrop-aurora-2 { animation: hero-drift 24s ease-in-out infinite alternate-reverse; }
}
@keyframes hero-drift {
  from { transform: translate3d(-6%, -5%, 0) scale(1); }
  to { transform: translate3d(6%, 6%, 0) scale(1.12); }
}

/* ---------------------------------------------------------------------------
   /pricing chooser. The inline script marks the chooser root [data-pricing-js]
   before the two pricing panels are parsed, so with JavaScript nothing is priced
   until a card (or an in-section switch) picks a model; without it both panels
   render stacked. Selected state for the cards and the compact switch. */
[data-pricing-js] [data-pricing-panel]:not([data-pricing-active]) { display: none; }
[data-pricing-js] [data-pricing-cards] [aria-selected="true"] {
  border-color: hsl(var(--primary) / 0.6);
  --tw-shadow: 0 0 40px rgba(62,211,252,0.15);
  --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
[data-pricing-js] [data-pricing-cards] [data-pricing-pick="on-demand"][aria-selected="true"] {
  border-color: rgb(192 132 252 / 0.6);
  --tw-shadow: 0 0 40px rgba(168,85,247,0.15);
  --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-chooser-check svg { opacity: 0; transition: opacity 0.2s ease-out; }
[aria-selected="true"] .pricing-chooser-check {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
[data-pricing-pick="on-demand"][aria-selected="true"] .pricing-chooser-check {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
[aria-selected="true"] .pricing-chooser-check svg { opacity: 1; }
.pricing-switch-option[aria-selected="true"] {
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
[data-pricing-switch] [data-pricing-pick="on-demand"][aria-selected="true"] {
  background-color: rgb(168 85 247 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
[data-pricing-switch] [data-pricing-pick="hosted"][aria-selected="true"] {
  background-color: hsl(var(--primary) / 0.2);
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------------------------
   Animated product demos ("storyboards") on the homepage, /on-demand and /mcp-server.

   A stage ([data-demo]) is an ordinary HTML mockup whose default markup IS the
   finished frame. The keyframes below only add the sequence and are bound when
   the in-view controller in layout.ejs sets data-demo-state ("paused" while
   off-screen, "playing" in view, nothing at all without JavaScript or when the
   embed demo is handed over to the visitor). Every element of a stage animates
   over the same --demo-duration with keyframes written as percentages of that
   one timeline, so a 12.5 s stage reads 1 s = 8%. Only opacity and transform
   are animated (plus the registered --demo-count integer for counters), stages
   never change size, and under prefers-reduced-motion nothing animates at all.

   Cursor targets: the controller measures [data-demo-target="name"] centres
   into --demo-<name>-x / -y px custom properties on the stage, so cursor
   keyframes can say translate(var(--demo-copy-x), var(--demo-copy-y)).
   --------------------------------------------------------------------------- */
@property --demo-count {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.demo-stage { --demo-duration: 12.5s; position: relative; isolation: isolate; }
/* Elements that only exist mid-storyboard; their keyframes end back at 0. */
.demo-hidden { opacity: 0; pointer-events: none; }
/* Crossfading alternatives share one grid cell so nothing shifts. */
.demo-stack { display: grid; }
.demo-stack > * { grid-area: 1 / 1; }
/* Counting figures: the integer lives in --demo-count and is printed via a CSS counter. */
.demo-count { --demo-count: var(--demo-final, 0); counter-reset: demo-count var(--demo-count); }
.demo-count::after { content: counter(demo-count); }
.demo-count-pad::after { content: counter(demo-count, decimal-leading-zero); }
.demo-count-pct::after { content: counter(demo-count) "%"; }
/* The fake pointer: the SVG's origin is the arrow tip, hidden in the finished frame. */
.demo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  width: 14px;
  height: 20px;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  transform-origin: 0 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.demo-cursor-ring { opacity: 0; transform-origin: 0 0; }

@media (prefers-reduced-motion: no-preference) {
  [data-demo-state] .demo-anim {
    animation-duration: var(--demo-duration);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-play-state: paused;
    will-change: transform, opacity;
  }
  [data-demo-state="playing"] .demo-anim { animation-play-state: running; }

  /* 1. Upload & Embed */
  [data-demo-state] .demo-up-zone { animation-name: demo-up-zone; }
  [data-demo-state] .demo-up-zone-hl { animation-name: demo-up-zone-hl; }
  [data-demo-state] .demo-up-zone-icon { animation-name: demo-up-zone-icon; }
  [data-demo-state] .demo-up-chip { animation-name: demo-up-chip; }
  [data-demo-state] .demo-up-cursor { animation-name: demo-up-cursor; }
  [data-demo-state] .demo-up-ring { animation-name: demo-up-ring; }
  [data-demo-state] .demo-up-preview { animation-name: demo-up-preview; }
  [data-demo-state] .demo-up-title-new { animation-name: demo-up-title-new; }
  [data-demo-state] .demo-up-title-file { animation-name: demo-up-title-file; }
  [data-demo-state] .demo-up-icon { animation-name: demo-up-icon; }
  [data-demo-state] .demo-up-pill-uploading { animation-name: demo-up-pill-uploading; }
  [data-demo-state] .demo-up-pill-processing { animation-name: demo-up-pill-processing; }
  [data-demo-state] .demo-up-pill-ready { animation-name: demo-up-pill-ready; }
  [data-demo-state] .demo-up-count { animation-name: demo-up-count; animation-timing-function: linear; }
  [data-demo-state] .demo-up-bar { animation-name: demo-up-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-up-tick-1 { animation-name: demo-up-tick-1; }
  [data-demo-state] .demo-up-tick-2 { animation-name: demo-up-tick-2; }
  [data-demo-state] .demo-up-tick-3 { animation-name: demo-up-tick-3; }
  [data-demo-state] .demo-up-card-url { animation-name: demo-up-card-url; }
  [data-demo-state] .demo-up-card-embed { animation-name: demo-up-card-embed; }
  [data-demo-state] .demo-up-copy-idle { animation-name: demo-up-copy-idle; }
  [data-demo-state] .demo-up-copy-done { animation-name: demo-up-copy-done; }
  [data-demo-state] .demo-up-toast { animation-name: demo-up-toast; }

  /* 2. Box office */
  [data-demo-state] .demo-bo-cursor { animation-name: demo-bo-cursor; }
  [data-demo-state] .demo-bo-ring { animation-name: demo-bo-ring; }
  [data-demo-state] .demo-bo-rent-hl { animation-name: demo-bo-rent-hl; }
  [data-demo-state] .demo-bo-buy { animation-name: demo-bo-buy; }
  [data-demo-state] .demo-bo-dim { animation-name: demo-bo-dim; }
  [data-demo-state] .demo-bo-sheet { animation-name: demo-bo-sheet; }
  [data-demo-state] .demo-bo-pay-label { animation-name: demo-bo-pay-label; }
  [data-demo-state] .demo-bo-pay-busy { animation-name: demo-bo-pay-busy; }
  [data-demo-state] .demo-bo-checkout { animation-name: demo-bo-checkout; }
  [data-demo-state] .demo-bo-done { animation-name: demo-bo-done; }
  [data-demo-state] .demo-bo-play { animation-name: demo-bo-play; }
  [data-demo-state] .demo-bo-play-lit { animation-name: demo-bo-play-lit; }
  [data-demo-state] .demo-bo-purchased { animation-name: demo-bo-purchased; }
  [data-demo-state] .demo-bo-toast { animation-name: demo-bo-toast; }
  [data-demo-state] .demo-bo-count { animation-name: demo-bo-count; animation-timing-function: linear; }

  /* 3. Embed options (the toggles themselves are driven by the builder script) */
  [data-demo-state] .demo-em-cursor { animation-name: demo-em-cursor; }
  [data-demo-state] .demo-em-ring { animation-name: demo-em-ring; }
  [data-demo-state] .demo-em-site { animation-name: demo-em-site; }
  [data-demo-state] .demo-em-tile { animation-name: demo-em-tile; }
  [data-demo-state] .demo-em-shift { animation-name: demo-em-shift; }

  /* 4. Host & Embed card (demo-wh-*), 12.5 s loop: upload → link + full embed code → copy → paste into the visitor's index.html → the player on their site */
  [data-demo-state] .demo-wh-track { animation-name: demo-wh-track; }
  [data-demo-state] .demo-wh-bar { animation-name: demo-wh-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-wh-uploading { animation-name: demo-wh-uploading; }
  [data-demo-state] .demo-wh-ready { animation-name: demo-wh-ready; }
  [data-demo-state] .demo-wh-plan { animation-name: demo-wh-plan; }
  [data-demo-state] .demo-wh-link { animation-name: demo-wh-link; }
  [data-demo-state] .demo-wh-code { animation-name: demo-wh-code; }
  [data-demo-state] .demo-wh-cursor { animation-name: demo-wh-cursor; }
  [data-demo-state] .demo-wh-ring { animation-name: demo-wh-ring; }
  [data-demo-state] .demo-wh-copy-idle { animation-name: demo-wh-copy-idle; }
  [data-demo-state] .demo-wh-copy-done { animation-name: demo-wh-copy-done; }
  [data-demo-state] .demo-wh-editor { animation-name: demo-wh-editor; }
  [data-demo-state] .demo-wh-caret { animation-name: demo-wh-caret; }
  [data-demo-state] .demo-wh-pasted { animation-name: demo-wh-pasted; }
  [data-demo-state] .demo-wh-preview { animation-name: demo-wh-preview; }
  [data-demo-state] .demo-wh-tile { animation-name: demo-wh-tile; }

  /* 5. MCP chat (homepage and /mcp-server) */
  [data-demo-state] .demo-mcp-prompt { animation-name: demo-mcp-prompt; }
  [data-demo-state] .demo-mcp-word-1 { animation-name: demo-mcp-word-1; }
  [data-demo-state] .demo-mcp-word-2 { animation-name: demo-mcp-word-2; }
  [data-demo-state] .demo-mcp-word-3 { animation-name: demo-mcp-word-3; }
  [data-demo-state] .demo-mcp-word-4 { animation-name: demo-mcp-word-4; }
  [data-demo-state] .demo-mcp-word-5 { animation-name: demo-mcp-word-5; }
  [data-demo-state] .demo-mcp-word-6 { animation-name: demo-mcp-word-6; }
  [data-demo-state] .demo-mcp-word-7 { animation-name: demo-mcp-word-7; }
  [data-demo-state] .demo-mcp-word-8 { animation-name: demo-mcp-word-8; }
  [data-demo-state] .demo-mcp-word-9 { animation-name: demo-mcp-word-9; }
  [data-demo-state] .demo-mcp-thinking { animation-name: demo-mcp-thinking; }
  [data-demo-state] .demo-mcp-chip-1 { animation-name: demo-mcp-chip-1; }
  [data-demo-state] .demo-mcp-chip-1-run { animation-name: demo-mcp-chip-1-run; }
  [data-demo-state] .demo-mcp-chip-1-done { animation-name: demo-mcp-chip-1-done; }
  [data-demo-state] .demo-mcp-chip-2 { animation-name: demo-mcp-chip-2; }
  [data-demo-state] .demo-mcp-chip-2-run { animation-name: demo-mcp-chip-2-run; }
  [data-demo-state] .demo-mcp-chip-2-done { animation-name: demo-mcp-chip-2-done; }
  [data-demo-state] .demo-mcp-reply { animation-name: demo-mcp-reply; }
  [data-demo-state] .demo-mcp-cursor { animation-name: demo-mcp-cursor; }
  [data-demo-state] .demo-mcp-ring { animation-name: demo-mcp-ring; }
  [data-demo-state] .demo-mcp-copy-idle { animation-name: demo-mcp-copy-idle; }
  [data-demo-state] .demo-mcp-copy-done { animation-name: demo-mcp-copy-done; }
  [data-demo-state] .demo-mcp-toast { animation-name: demo-mcp-toast; }

  /* 6. Film page (homepage "Independent films deserve a home") */
  [data-demo-state] .demo-fp-media { animation-name: demo-fp-media; }
  [data-demo-state] .demo-fp-play { animation-name: demo-fp-play; }
  [data-demo-state] .demo-fp-mode { animation-name: demo-fp-mode; }
  [data-demo-state] .demo-fp-title { animation-name: demo-fp-title; }
  [data-demo-state] .demo-fp-person { animation-name: demo-fp-person; }
  [data-demo-state] .demo-fp-buy { animation-name: demo-fp-buy; }
  [data-demo-state] .demo-fp-buy-hl { animation-name: demo-fp-buy-hl; }
  [data-demo-state] .demo-fp-rent { animation-name: demo-fp-rent; }
  [data-demo-state] .demo-fp-credits-label { animation-name: demo-fp-credits-label; }
  [data-demo-state] .demo-fp-credit-1 { animation-name: demo-fp-credit-1; }
  [data-demo-state] .demo-fp-credit-2 { animation-name: demo-fp-credit-2; }
  [data-demo-state] .demo-fp-credit-3 { animation-name: demo-fp-credit-3; }
  [data-demo-state] .demo-fp-credit-4 { animation-name: demo-fp-credit-4; }
  [data-demo-state] .demo-fp-credit-hl { animation-name: demo-fp-credit-hl; }
  [data-demo-state] .demo-fp-cursor { animation-name: demo-fp-cursor; }
  [data-demo-state] .demo-fp-ring { animation-name: demo-fp-ring; }

  /* 7. Access modes (homepage "Sell or rent your film"): af = Free to watch, ap = Rent / Buy */
  [data-demo-state] .demo-af-play { animation-name: demo-af-play; }
  [data-demo-state] .demo-af-before { animation-name: demo-af-before; }
  [data-demo-state] .demo-af-after { animation-name: demo-af-after; }
  [data-demo-state] .demo-af-chip { animation-name: demo-af-chip; }
  [data-demo-state] .demo-af-playing { animation-name: demo-af-playing; }
  [data-demo-state] .demo-af-bar { animation-name: demo-af-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-af-count { animation-name: demo-af-count; animation-timing-function: linear; }
  [data-demo-state] .demo-af-cursor { animation-name: demo-af-cursor; }
  [data-demo-state] .demo-af-ring { animation-name: demo-af-ring; }
  [data-demo-state] .demo-ap-play { animation-name: demo-ap-play; }
  [data-demo-state] .demo-ap-sheet { animation-name: demo-ap-sheet; }
  [data-demo-state] .demo-ap-before { animation-name: demo-ap-before; }
  [data-demo-state] .demo-ap-after { animation-name: demo-ap-after; }
  [data-demo-state] .demo-ap-chip { animation-name: demo-ap-chip; }
  [data-demo-state] .demo-ap-playing { animation-name: demo-ap-playing; }
  [data-demo-state] .demo-ap-bar { animation-name: demo-ap-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-ap-count { animation-name: demo-ap-count; animation-timing-function: linear; }
  [data-demo-state] .demo-ap-cursor { animation-name: demo-ap-cursor; }
  [data-demo-state] .demo-ap-ring { animation-name: demo-ap-ring; }

  /* 8. Earn (homepage): switch on, film plays, sponsor banner, steps light up */
  [data-demo-state] .demo-ea-play { animation-name: demo-ea-play; }
  [data-demo-state] .demo-ea-banner { animation-name: demo-ea-banner; }
  [data-demo-state] .demo-ea-playing { animation-name: demo-ea-playing; }
  [data-demo-state] .demo-ea-bar { animation-name: demo-ea-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-ea-count { animation-name: demo-ea-count; animation-timing-function: linear; }
  [data-demo-state] .demo-ea-before { animation-name: demo-ea-before; }
  [data-demo-state] .demo-ea-after { animation-name: demo-ea-after; }
  [data-demo-state] .demo-ea-track { animation-name: demo-ea-track; }
  [data-demo-state] .demo-ea-knob { animation-name: demo-ea-knob; }
  [data-demo-state] .demo-ea-step-1 { animation-name: demo-ea-step-1; }
  [data-demo-state] .demo-ea-step-2 { animation-name: demo-ea-step-2; }
  [data-demo-state] .demo-ea-step-3 { animation-name: demo-ea-step-3; }
  [data-demo-state] .demo-ea-cursor { animation-name: demo-ea-cursor; }
  [data-demo-state] .demo-ea-ring { animation-name: demo-ea-ring; }

  /* 9. Streaming quality (homepage): outlines grow to 8K DCI, the strip fills 24 → 60 fps, the 10-bit bar sweeps in under 8-bit */
  [data-demo-state] .demo-sq-res-1 { animation-name: demo-sq-res-1; }
  [data-demo-state] .demo-sq-res-2 { animation-name: demo-sq-res-2; }
  [data-demo-state] .demo-sq-res-3 { animation-name: demo-sq-res-3; }
  [data-demo-state] .demo-sq-res-4 { animation-name: demo-sq-res-4; }
  [data-demo-state] .demo-sq-res-5 { animation-name: demo-sq-res-5; }
  [data-demo-state] .demo-sq-spec-1 { animation-name: demo-sq-spec-1; }
  [data-demo-state] .demo-sq-spec-2 { animation-name: demo-sq-spec-2; }
  [data-demo-state] .demo-sq-spec-3 { animation-name: demo-sq-spec-3; }
  [data-demo-state] .demo-sq-fps-strip { animation-name: demo-sq-fps-strip; animation-timing-function: linear; }
  [data-demo-state] .demo-sq-fps-count { animation-name: demo-sq-fps-count; animation-timing-function: linear; }
  [data-demo-state] .demo-sq-tenbit-bar { animation-name: demo-sq-tenbit-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-sq-tenbit-text { animation-name: demo-sq-tenbit-text; }

  /* 10. Projects (homepage): publish, fund, find crew, make the film */
  [data-demo-state] .demo-pj-before { animation-name: demo-pj-before; }
  [data-demo-state] .demo-pj-after { animation-name: demo-pj-after; }
  [data-demo-state] .demo-pj-meter { animation-name: demo-pj-meter; animation-timing-function: linear; }
  [data-demo-state] .demo-pj-role-1-open { animation-name: demo-pj-role-1-open; }
  [data-demo-state] .demo-pj-role-1 { animation-name: demo-pj-role-1; }
  [data-demo-state] .demo-pj-role-2-open { animation-name: demo-pj-role-2-open; }
  [data-demo-state] .demo-pj-role-2 { animation-name: demo-pj-role-2; }
  [data-demo-state] .demo-pj-step-1 { animation-name: demo-pj-step-1; }
  [data-demo-state] .demo-pj-step-2 { animation-name: demo-pj-step-2; }
  [data-demo-state] .demo-pj-step-3 { animation-name: demo-pj-step-3; }
  [data-demo-state] .demo-pj-step-4 { animation-name: demo-pj-step-4; }
  [data-demo-state] .demo-pj-cursor { animation-name: demo-pj-cursor; }
  [data-demo-state] .demo-pj-ring { animation-name: demo-pj-ring; }

  /* 11. Filmmaker profile (homepage): a crew credit is accepted and joins the filmography */
  [data-demo-state] .demo-pr-sheet { animation-name: demo-pr-sheet; }
  [data-demo-state] .demo-pr-before { animation-name: demo-pr-before; }
  [data-demo-state] .demo-pr-after { animation-name: demo-pr-after; }
  [data-demo-state] .demo-pr-row { animation-name: demo-pr-row; }
  [data-demo-state] .demo-pr-row-hl { animation-name: demo-pr-row-hl; }
  [data-demo-state] .demo-pr-cursor { animation-name: demo-pr-cursor; }
  [data-demo-state] .demo-pr-ring { animation-name: demo-pr-ring; }

  /* 12. Publish steps (homepage "How to publish"): hu upload, hp page, hw watch, hs publish */
  [data-demo-state] .demo-hu-count { animation-name: demo-hu-count; animation-timing-function: linear; }
  [data-demo-state] .demo-hu-bar { animation-name: demo-hu-bar; animation-timing-function: linear; }
  [data-demo-state] .demo-hu-before { animation-name: demo-hu-before; }
  [data-demo-state] .demo-hu-after { animation-name: demo-hu-after; }
  [data-demo-state] .demo-hu-asset-1-open { animation-name: demo-hu-asset-1-open; }
  [data-demo-state] .demo-hu-asset-1 { animation-name: demo-hu-asset-1; }
  [data-demo-state] .demo-hu-asset-2-open { animation-name: demo-hu-asset-2-open; }
  [data-demo-state] .demo-hu-asset-2 { animation-name: demo-hu-asset-2; }
  [data-demo-state] .demo-hu-asset-3-open { animation-name: demo-hu-asset-3-open; }
  [data-demo-state] .demo-hu-asset-3 { animation-name: demo-hu-asset-3; }
  [data-demo-state] .demo-hp-line-1 { animation-name: demo-hp-line-1; }
  [data-demo-state] .demo-hp-line-2 { animation-name: demo-hp-line-2; }
  [data-demo-state] .demo-hp-info { animation-name: demo-hp-info; }
  [data-demo-state] .demo-hp-credit-1 { animation-name: demo-hp-credit-1; }
  [data-demo-state] .demo-hp-credit-2 { animation-name: demo-hp-credit-2; }
  [data-demo-state] .demo-hp-credit-3 { animation-name: demo-hp-credit-3; }
  [data-demo-state] .demo-hw-free-on { animation-name: demo-hw-free-on; }
  [data-demo-state] .demo-hw-paid-on { animation-name: demo-hw-paid-on; }
  [data-demo-state] .demo-hw-prices { animation-name: demo-hw-prices; }
  [data-demo-state] .demo-hw-cursor { animation-name: demo-hw-cursor; }
  [data-demo-state] .demo-hw-ring { animation-name: demo-hw-ring; }
  [data-demo-state] .demo-hs-before { animation-name: demo-hs-before; }
  [data-demo-state] .demo-hs-after { animation-name: demo-hs-after; }
  [data-demo-state] .demo-hs-link { animation-name: demo-hs-link; }
  [data-demo-state] .demo-hs-share { animation-name: demo-hs-share; }
  [data-demo-state] .demo-hs-cursor { animation-name: demo-hs-cursor; }
  [data-demo-state] .demo-hs-ring { animation-name: demo-hs-ring; }
}
[data-demo^="access-"], [data-demo^="publish-"] { --demo-duration: 8s; }

/* --- Storyboard 7: Access modes (8 s; 1 s = 12.5%) ------------------------
   Free to watch (af): 1–2.3 s the cursor presses "Watch free" → 2.5 s the film
   plays (progress + counter, "Free" chip, status line) → hold.
   Rent / Buy (ap):   1–2.3 s the cursor presses Rent $4 / Buy $12 → 2.6 s the
   checkout sheet slides up → 3.5–4.1 s the cursor pays → 4.4 s the sheet goes,
   the film plays with the Rented / Owned chip → hold. */
@keyframes demo-af-play {
  0%, 28% { opacity: 1; transform: none; }
  32% { opacity: 0; transform: scale(0.9); }
  33%, 100% { opacity: 0; transform: none; }
}
@keyframes demo-af-before {
  0%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes demo-af-after {
  0%, 30% { opacity: 0; }
  34%, 100% { opacity: 1; }
}
@keyframes demo-af-chip {
  0%, 30% { opacity: 0; transform: translateY(-4px); }
  36%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-af-playing {
  0%, 30% { opacity: 0; }
  36%, 100% { opacity: 1; }
}
@keyframes demo-af-bar {
  0%, 34% { transform: scaleX(0); }
  92%, 100% { transform: scaleX(1); }
}
@keyframes demo-af-count {
  0%, 34% { --demo-count: 0; }
  92%, 100% { --demo-count: var(--demo-final); }
}
@keyframes demo-af-cursor {
  0%, 8% { opacity: 0; transform: translate(calc(var(--demo-cta-x) - 70px), calc(var(--demo-cta-y) + 50px)); }
  12% { opacity: 1; transform: translate(calc(var(--demo-cta-x) - 70px), calc(var(--demo-cta-y) + 50px)); }
  22%, 28% { opacity: 1; transform: translate(var(--demo-cta-x), var(--demo-cta-y)); }
  29% { opacity: 1; transform: translate(var(--demo-cta-x), var(--demo-cta-y)) scale(0.85); }
  30.5%, 40% { opacity: 1; transform: translate(var(--demo-cta-x), var(--demo-cta-y)); }
  46%, 100% { opacity: 0; transform: translate(var(--demo-cta-x), var(--demo-cta-y)); }
}
@keyframes demo-af-ring {
  0%, 28.4% { opacity: 0; transform: scale(0.2); }
  29.2% { opacity: 0.9; transform: scale(0.4); }
  31.5%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-ap-play {
  0%, 52% { opacity: 1; transform: none; }
  56% { opacity: 0; transform: scale(0.9); }
  57%, 100% { opacity: 0; transform: none; }
}
@keyframes demo-ap-sheet {
  0%, 31% { opacity: 0; transform: translateY(12px); }
  35%, 53% { opacity: 1; transform: none; }
  56% { opacity: 0; transform: translateY(8px); }
  57%, 100% { opacity: 0; transform: none; }
}
@keyframes demo-ap-before {
  0%, 54% { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes demo-ap-after {
  0%, 54% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@keyframes demo-ap-chip {
  0%, 54% { opacity: 0; transform: translateY(-4px); }
  60%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-ap-playing {
  0%, 54% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
@keyframes demo-ap-bar {
  0%, 58% { transform: scaleX(0); }
  94%, 100% { transform: scaleX(1); }
}
@keyframes demo-ap-count {
  0%, 58% { --demo-count: 0; }
  94%, 100% { --demo-count: var(--demo-final); }
}
@keyframes demo-ap-cursor {
  0%, 8% { opacity: 0; transform: translate(calc(var(--demo-cta-x) - 70px), calc(var(--demo-cta-y) + 50px)); }
  12% { opacity: 1; transform: translate(calc(var(--demo-cta-x) - 70px), calc(var(--demo-cta-y) + 50px)); }
  22%, 28% { opacity: 1; transform: translate(var(--demo-cta-x), var(--demo-cta-y)); }
  29% { opacity: 1; transform: translate(var(--demo-cta-x), var(--demo-cta-y)) scale(0.85); }
  30.5%, 36% { opacity: 1; transform: translate(var(--demo-cta-x), var(--demo-cta-y)); }
  44%, 50% { opacity: 1; transform: translate(var(--demo-pay-x), var(--demo-pay-y)); }
  51% { opacity: 1; transform: translate(var(--demo-pay-x), var(--demo-pay-y)) scale(0.85); }
  52.5%, 62% { opacity: 1; transform: translate(var(--demo-pay-x), var(--demo-pay-y)); }
  68%, 100% { opacity: 0; transform: translate(var(--demo-pay-x), var(--demo-pay-y)); }
}
@keyframes demo-ap-ring {
  0%, 28.4% { opacity: 0; transform: scale(0.2); }
  29.2% { opacity: 0.9; transform: scale(0.4); }
  31.5%, 50.4% { opacity: 0; transform: scale(1.4); }
  50.5% { opacity: 0; transform: scale(0.2); }
  51.2% { opacity: 0.9; transform: scale(0.4); }
  53.5%, 100% { opacity: 0; transform: scale(1.4); }
}

/* --- Storyboard 6: Film page (12.5 s; 1 s = 8%) --------------------------
   0–0.9 s   the poster fades in, then the play button, badges and title
   1.2–2.6 s the filmmaker row, Buy and Rent pop in
   2.4–4.6 s "Crew credits" and the four credit rows slide in one by one
   4.8–7 s   the cursor appears and hovers the director's credit (link underline)
   7.8–10.5 s the cursor hovers Buy (glow), clicks, holds
   11–12.5 s the cursor fades; the finished frame holds until the loop restarts */
@keyframes demo-fp-media {
  0% { opacity: 0; }
  6%, 100% { opacity: 1; }
}
@keyframes demo-fp-play {
  0%, 3% { opacity: 0; transform: scale(0.8); }
  9%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-mode {
  0%, 4% { opacity: 0; transform: translateY(-6px); }
  10%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-title {
  0%, 5% { opacity: 0; transform: translateY(8px); }
  11%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-person {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  16%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-buy {
  0%, 13% { opacity: 0; transform: scale(0.9); }
  19%, 62% { opacity: 1; transform: none; }
  64%, 70.5% { opacity: 1; transform: translateY(-1px); }
  71.3% { opacity: 1; transform: translateY(-1px) scale(0.97); }
  72.5%, 84% { opacity: 1; transform: translateY(-1px); }
  87%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-buy-hl {
  0%, 62% { opacity: 0; }
  64%, 84% { opacity: 1; }
  87%, 100% { opacity: 0; }
}
@keyframes demo-fp-rent {
  0%, 15% { opacity: 0; transform: scale(0.9); }
  21%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-credits-label {
  0%, 18% { opacity: 0; }
  23%, 100% { opacity: 1; }
}
@keyframes demo-fp-credit-1 {
  0%, 20% { opacity: 0; transform: translateX(-8px); }
  25%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-credit-2 {
  0%, 24% { opacity: 0; transform: translateX(-8px); }
  29%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-credit-3 {
  0%, 28% { opacity: 0; transform: translateX(-8px); }
  33%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-credit-4 {
  0%, 32% { opacity: 0; transform: translateX(-8px); }
  37%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-fp-credit-hl {
  0%, 46% { opacity: 0; }
  48%, 56% { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes demo-fp-cursor {
  0%, 38% { opacity: 0; transform: translate(calc(var(--demo-credit-x) + 90px), calc(var(--demo-credit-y) + 70px)); }
  41% { opacity: 1; transform: translate(calc(var(--demo-credit-x) + 90px), calc(var(--demo-credit-y) + 70px)); }
  47%, 56% { opacity: 1; transform: translate(var(--demo-credit-x), var(--demo-credit-y)); }
  63%, 70.5% { opacity: 1; transform: translate(var(--demo-buy-x), var(--demo-buy-y)); }
  71.3% { opacity: 1; transform: translate(var(--demo-buy-x), var(--demo-buy-y)) scale(0.85); }
  72.5%, 84% { opacity: 1; transform: translate(var(--demo-buy-x), var(--demo-buy-y)); }
  88%, 100% { opacity: 0; transform: translate(var(--demo-buy-x), var(--demo-buy-y)); }
}
@keyframes demo-fp-ring {
  0%, 70.6% { opacity: 0; transform: scale(0.2); }
  71.3% { opacity: 0.9; transform: scale(0.4); }
  73.5%, 100% { opacity: 0; transform: scale(1.4); }
}

/* --- Storyboard 1: Upload & Embed (12.5 s; 1 s = 8%) ---------------------
   0–2 s  drop zone, file chip glides in under the cursor and is released
   2.5–6 s "Uploading" pill, bar and % count to 100, "Uploaded" tick
   6–8.5 s "Processing" pill, "Processed" tick, pill turns "Ready"
   8.5–11 s URL and embed cards slide up, cursor copies the URL ("Copied")
   11–12.5 s hold the finished frame */
@keyframes demo-up-zone {
  0% { opacity: 0; }
  2%, 16% { opacity: 1; }
  19%, 100% { opacity: 0; }
}
@keyframes demo-up-zone-hl {
  0%, 11% { opacity: 0; }
  12.5%, 15.5% { opacity: 1; }
  17%, 100% { opacity: 0; }
}
@keyframes demo-up-zone-icon {
  0%, 15% { transform: none; }
  16% { transform: scale(1.15); }
  17.5%, 100% { transform: none; }
}
@keyframes demo-up-chip {
  0%, 2% { opacity: 0; transform: translate(calc(var(--demo-zone-x) - 210px), calc(var(--demo-zone-y) + 130px)); }
  4% { opacity: 1; transform: translate(calc(var(--demo-zone-x) - 210px), calc(var(--demo-zone-y) + 130px)); }
  12%, 15.5% { opacity: 1; transform: translate(calc(var(--demo-zone-x) - 90px), calc(var(--demo-zone-y) + 54px)); }
  16.5%, 100% { opacity: 0; transform: translate(calc(var(--demo-zone-x) - 90px), calc(var(--demo-zone-y) + 54px)); }
}
@keyframes demo-up-cursor {
  0%, 2% { opacity: 0; transform: translate(calc(var(--demo-zone-x) - 202px), calc(var(--demo-zone-y) + 138px)); }
  4% { opacity: 1; transform: translate(calc(var(--demo-zone-x) - 202px), calc(var(--demo-zone-y) + 138px)); }
  12%, 72% { opacity: 1; transform: translate(calc(var(--demo-zone-x) - 82px), calc(var(--demo-zone-y) + 62px)); }
  80%, 81% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  81.8% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)) scale(0.85); }
  83%, 86% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  90%, 100% { opacity: 0; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
}
@keyframes demo-up-ring {
  0%, 81% { opacity: 0; transform: scale(0.2); }
  81.8% { opacity: 0.9; transform: scale(0.4); }
  84%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-up-preview {
  0%, 20% { opacity: 0; }
  22%, 67% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes demo-up-title-new {
  0%, 18% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes demo-up-title-file {
  0%, 18% { opacity: 0; }
  20%, 100% { opacity: 1; }
}
@keyframes demo-up-icon {
  0%, 18% { opacity: 0.45; }
  20%, 100% { opacity: 1; }
}
@keyframes demo-up-pill-uploading {
  0%, 19% { opacity: 0; }
  21%, 48% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes demo-up-pill-processing {
  0%, 48% { opacity: 0; }
  50%, 66% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes demo-up-pill-ready {
  0%, 66% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes demo-up-count {
  0%, 21% { --demo-count: 0; }
  47%, 100% { --demo-count: var(--demo-final); }
}
@keyframes demo-up-bar {
  0%, 21% { transform: scaleX(0); }
  47%, 100% { transform: scaleX(1); }
}
@keyframes demo-up-tick-1 {
  0%, 47% { opacity: 0.35; }
  49%, 100% { opacity: 1; }
}
@keyframes demo-up-tick-2 {
  0%, 64% { opacity: 0.35; }
  66%, 100% { opacity: 1; }
}
@keyframes demo-up-tick-3 {
  0%, 67% { opacity: 0.35; }
  69%, 100% { opacity: 1; }
}
@keyframes demo-up-card-url {
  0%, 69% { opacity: 0; transform: translateY(14px); }
  73%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-up-card-embed {
  0%, 73% { opacity: 0; transform: translateY(14px); }
  77%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-up-copy-idle {
  0%, 81.5% { opacity: 1; }
  82.5%, 100% { opacity: 0; }
}
@keyframes demo-up-copy-done {
  0%, 81.5% { opacity: 0; }
  82.5%, 100% { opacity: 1; }
}
@keyframes demo-up-toast {
  0%, 82% { opacity: 0; transform: translateY(6px); }
  84%, 93% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* --- Storyboard 2: Box office (12.5 s; 1 s = 8%) ---------------------------
   0–4 s   cursor hovers Rent, settles on Buy and clicks
   4–8.5 s checkout sheet: Pay → Processing… → "You're all set"
   8.5–9.5 s sheet dismisses, play button lights, "Purchased" pill
   9.5–11 s "New sale" toast and the creator's earnings count up
   11–12.5 s hold */
@keyframes demo-bo-cursor {
  0%, 2% { opacity: 0; transform: translate(calc(var(--demo-rent-x) + 60px), calc(var(--demo-rent-y) + 70px)); }
  4% { opacity: 1; transform: translate(calc(var(--demo-rent-x) + 60px), calc(var(--demo-rent-y) + 70px)); }
  12%, 19% { opacity: 1; transform: translate(var(--demo-rent-x), var(--demo-rent-y)); }
  26%, 30.5% { opacity: 1; transform: translate(var(--demo-buy-x), var(--demo-buy-y)); }
  31.5% { opacity: 1; transform: translate(var(--demo-buy-x), var(--demo-buy-y)) scale(0.85); }
  33%, 37% { opacity: 1; transform: translate(var(--demo-buy-x), var(--demo-buy-y)); }
  44%, 45% { opacity: 1; transform: translate(var(--demo-pay-x), var(--demo-pay-y)); }
  45.8% { opacity: 1; transform: translate(var(--demo-pay-x), var(--demo-pay-y)) scale(0.85); }
  47%, 62% { opacity: 1; transform: translate(var(--demo-pay-x), var(--demo-pay-y)); }
  66%, 100% { opacity: 0; transform: translate(var(--demo-pay-x), var(--demo-pay-y)); }
}
@keyframes demo-bo-ring {
  0%, 30.8% { opacity: 0; transform: scale(0.2); }
  31.5% { opacity: 0.9; transform: scale(0.4); }
  33.5%, 45% { opacity: 0; transform: scale(1.4); }
  45.1% { opacity: 0; transform: scale(0.2); }
  45.8% { opacity: 0.9; transform: scale(0.4); }
  48%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-bo-rent-hl {
  0%, 12% { opacity: 0; }
  13.5%, 19% { opacity: 1; }
  21%, 100% { opacity: 0; }
}
@keyframes demo-bo-buy {
  0%, 26% { transform: none; }
  28%, 30.5% { transform: scale(1.03); }
  31.5% { transform: scale(0.97); }
  33%, 100% { transform: none; }
}
@keyframes demo-bo-dim {
  0%, 31.5% { opacity: 0; }
  34%, 68% { opacity: 1; }
  71%, 100% { opacity: 0; }
}
@keyframes demo-bo-sheet {
  0%, 31.5% { opacity: 0; transform: translateY(24px); }
  35%, 68% { opacity: 1; transform: none; }
  71%, 100% { opacity: 0; transform: translateY(16px); }
}
@keyframes demo-bo-pay-label {
  0%, 45.5% { opacity: 1; }
  47%, 80% { opacity: 0; }
  82%, 100% { opacity: 1; }
}
@keyframes demo-bo-pay-busy {
  0%, 45.5% { opacity: 0; }
  47%, 80% { opacity: 1; }
  82%, 100% { opacity: 0; }
}
@keyframes demo-bo-checkout {
  0%, 57% { opacity: 1; }
  59%, 80% { opacity: 0; }
  82%, 100% { opacity: 1; }
}
@keyframes demo-bo-done {
  0%, 57% { opacity: 0; transform: translateY(6px); }
  59%, 80% { opacity: 1; transform: none; }
  82%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes demo-bo-play {
  0%, 71% { transform: none; }
  73% { transform: scale(1.12); }
  75%, 100% { transform: none; }
}
@keyframes demo-bo-play-lit {
  0%, 71% { opacity: 0; }
  74%, 100% { opacity: 1; }
}
@keyframes demo-bo-purchased {
  0%, 73% { opacity: 0; transform: translateY(6px); }
  76%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-bo-toast {
  0%, 75% { opacity: 0; transform: translateX(16px); }
  79%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-bo-count {
  0%, 78% { --demo-count: 0; }
  88%, 100% { --demo-count: var(--demo-final); }
}

/* --- Storyboard 3: Embed options (12.5 s; 1 s = 8%) ------------------------
   The builder script flips the toggles at 1.6 s, 2.9 s, 4.7 s and 5.8 s and
   shows "Copied" at 7.6 s, in step with the cursor presses below.
   8–11.5 s a site mockup appears over the code and the player drops into it
   11.5–12.5 s hold the plain builder */
@keyframes demo-em-cursor {
  0%, 2% { opacity: 0; transform: translate(calc(var(--demo-rounded-x) - 140px), calc(var(--demo-rounded-y) + 80px)); }
  4% { opacity: 1; transform: translate(calc(var(--demo-rounded-x) - 140px), calc(var(--demo-rounded-y) + 80px)); }
  11%, 12% { opacity: 1; transform: translate(var(--demo-rounded-x), var(--demo-rounded-y)); }
  12.8% { opacity: 1; transform: translate(var(--demo-rounded-x), var(--demo-rounded-y)) scale(0.85); }
  14%, 16% { opacity: 1; transform: translate(var(--demo-rounded-x), var(--demo-rounded-y)); }
  22%, 22.4% { opacity: 1; transform: translate(var(--demo-responsive-x), var(--demo-responsive-y)); }
  23.2% { opacity: 1; transform: translate(var(--demo-responsive-x), var(--demo-responsive-y)) scale(0.85); }
  24.5%, 29% { opacity: 1; transform: translate(var(--demo-responsive-x), var(--demo-responsive-y)); }
  36%, 36.8% { opacity: 1; transform: translate(var(--demo-rounded-x), var(--demo-rounded-y)); }
  37.6% { opacity: 1; transform: translate(var(--demo-rounded-x), var(--demo-rounded-y)) scale(0.85); }
  39%, 41% { opacity: 1; transform: translate(var(--demo-rounded-x), var(--demo-rounded-y)); }
  45%, 45.6% { opacity: 1; transform: translate(var(--demo-responsive-x), var(--demo-responsive-y)); }
  46.4% { opacity: 1; transform: translate(var(--demo-responsive-x), var(--demo-responsive-y)) scale(0.85); }
  48%, 51% { opacity: 1; transform: translate(var(--demo-responsive-x), var(--demo-responsive-y)); }
  59%, 60% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  60.8% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)) scale(0.85); }
  62%, 65% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  69%, 100% { opacity: 0; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
}
@keyframes demo-em-ring {
  0%, 12% { opacity: 0; transform: scale(0.2); }
  12.8% { opacity: 0.9; transform: scale(0.4); }
  15%, 22.4% { opacity: 0; transform: scale(1.4); }
  22.5% { opacity: 0; transform: scale(0.2); }
  23.2% { opacity: 0.9; transform: scale(0.4); }
  25.5%, 36.8% { opacity: 0; transform: scale(1.4); }
  36.9% { opacity: 0; transform: scale(0.2); }
  37.6% { opacity: 0.9; transform: scale(0.4); }
  40%, 45.6% { opacity: 0; transform: scale(1.4); }
  45.7% { opacity: 0; transform: scale(0.2); }
  46.4% { opacity: 0.9; transform: scale(0.4); }
  48.8%, 60% { opacity: 0; transform: scale(1.4); }
  60.1% { opacity: 0; transform: scale(0.2); }
  60.8% { opacity: 0.9; transform: scale(0.4); }
  63%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-em-site {
  0%, 64% { opacity: 0; transform: translateY(10px); }
  68%, 91% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes demo-em-tile {
  0%, 70% { opacity: 0; transform: translateY(-28px); }
  74% { opacity: 1; transform: translateY(3px); }
  76%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-em-shift {
  0%, 70% { transform: translateY(-56px); }
  75%, 100% { transform: none; }
}

/* --- Host & Embed card: embed on your own site (8 s; 1 s = 12.5%) --------------------------
   0.4–2.6 s the file uploads (bar 0→100), then reads "Ready" on the plan
   2.9–3.2 s its direct link fades in; 3.3–3.6 s the embed code slides in
   3.6–4.7 s the cursor copies the embed code
   5.3–5.8 s the player drops into the visitor's own site
   5.8–8 s hold */
/* Host & Embed card (12.5 s; 1 s = 8%): 0–2.4 s upload → Ready; 2.6 s link; 3.1 s the
   full embed code; cursor copies it at 5.2 s; pastes into index.html at 6.7 s; the
   visitor's site preview shows the player from 8.5 s; hold to 12.5 s. */
@keyframes demo-wh-track {
  0%, 17% { opacity: 1; }
  19%, 100% { opacity: 0; }
}
@keyframes demo-wh-bar {
  0%, 3% { transform: scaleX(0); }
  16%, 100% { transform: none; }
}
@keyframes demo-wh-uploading {
  0%, 17% { opacity: 1; }
  19%, 100% { opacity: 0; }
}
@keyframes demo-wh-ready {
  0%, 18% { opacity: 0; transform: translateY(4px); }
  21%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-wh-plan {
  0%, 19% { opacity: 0; }
  22%, 100% { opacity: 1; }
}
@keyframes demo-wh-link {
  0%, 21% { opacity: 0; transform: translateY(6px); }
  25%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-wh-code {
  0%, 25% { opacity: 0; transform: translateY(8px); }
  29%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-wh-cursor {
  0%, 30% { opacity: 0; transform: translate(calc(var(--demo-copy-x) - 140px), calc(var(--demo-copy-y) + 90px)); }
  33% { opacity: 1; transform: translate(calc(var(--demo-copy-x) - 140px), calc(var(--demo-copy-y) + 90px)); }
  39%, 40.5% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  41.5% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)) scale(0.85); }
  43%, 45% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  51%, 52.5% { opacity: 1; transform: translate(var(--demo-paste-x), var(--demo-paste-y)); }
  53.5% { opacity: 1; transform: translate(var(--demo-paste-x), var(--demo-paste-y)) scale(0.85); }
  55%, 60% { opacity: 1; transform: translate(var(--demo-paste-x), var(--demo-paste-y)); }
  64%, 100% { opacity: 0; transform: translate(var(--demo-paste-x), var(--demo-paste-y)); }
}
@keyframes demo-wh-ring {
  0%, 40.5% { opacity: 0; transform: scale(0.2); }
  41.5% { opacity: 0.9; transform: scale(0.4); }
  44%, 52.5% { opacity: 0; transform: scale(1.4); }
  52.6% { opacity: 0; transform: scale(0.2); }
  53.5% { opacity: 0.9; transform: scale(0.4); }
  56%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-wh-copy-idle {
  0%, 42% { opacity: 1; }
  43.5%, 100% { opacity: 0; }
}
@keyframes demo-wh-copy-done {
  0%, 42% { opacity: 0; }
  43.5%, 100% { opacity: 1; }
}
@keyframes demo-wh-editor {
  0%, 44% { opacity: 0; }
  47%, 64% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes demo-wh-caret {
  0%, 46% { opacity: 0; }
  48%, 54% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes demo-wh-pasted {
  0%, 54% { opacity: 0; }
  56%, 66% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes demo-wh-preview {
  0%, 66% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes demo-wh-tile {
  0%, 68% { opacity: 0; transform: translateY(-26px); }
  73% { opacity: 1; transform: translateY(3px); }
  75%, 100% { opacity: 1; transform: none; }
}
/* --- Storyboard 5: MCP chat (12.5 s; 1 s = 8%) -----------------------------
   0.5–2.2 s the creator's prompt appears word by word
   2.5–3 s   the assistant "thinks" (dots)
   3–6 s     list_videos runs and completes, then get_embed_code
   6.3–7 s   the reply card with the embed code slides up
   7.3–9 s   the cursor glides to Copy and clicks: "Copied" + toast
   9–12.5 s  hold the finished frame */
@keyframes demo-mcp-prompt {
  0%, 3% { opacity: 0; }
  4.5%, 100% { opacity: 1; }
}
@keyframes demo-mcp-word-1 { 0%, 4% { opacity: 0; } 5%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-2 { 0%, 5.5% { opacity: 0; } 6.5%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-3 { 0%, 7% { opacity: 0; } 8%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-4 { 0%, 8.5% { opacity: 0; } 9.5%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-5 { 0%, 10% { opacity: 0; } 11%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-6 { 0%, 11.5% { opacity: 0; } 12.5%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-7 { 0%, 13% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-8 { 0%, 14.5% { opacity: 0; } 15.5%, 100% { opacity: 1; } }
@keyframes demo-mcp-word-9 { 0%, 16% { opacity: 0; } 17%, 100% { opacity: 1; } }
@keyframes demo-mcp-thinking {
  0%, 19% { opacity: 0; }
  20.5%, 23% { opacity: 1; }
  24.5%, 100% { opacity: 0; }
}
@keyframes demo-mcp-chip-1 {
  0%, 23% { opacity: 0; transform: translateY(4px); }
  25%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-mcp-chip-1-run {
  0%, 24% { opacity: 0; }
  25%, 35% { opacity: 1; }
  37%, 100% { opacity: 0; }
}
@keyframes demo-mcp-chip-1-done {
  0%, 35% { opacity: 0; }
  37%, 100% { opacity: 1; }
}
@keyframes demo-mcp-chip-2 {
  0%, 37% { opacity: 0; transform: translateY(4px); }
  39%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-mcp-chip-2-run {
  0%, 38% { opacity: 0; }
  39%, 47% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes demo-mcp-chip-2-done {
  0%, 47% { opacity: 0; }
  49%, 100% { opacity: 1; }
}
@keyframes demo-mcp-reply {
  0%, 50% { opacity: 0; transform: translateY(14px); }
  55%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-mcp-cursor {
  0%, 57% { opacity: 0; transform: translate(calc(var(--demo-copy-x) - 150px), calc(var(--demo-copy-y) + 96px)); }
  59% { opacity: 1; transform: translate(calc(var(--demo-copy-x) - 150px), calc(var(--demo-copy-y) + 96px)); }
  68%, 69% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  69.8% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)) scale(0.85); }
  71%, 76% { opacity: 1; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
  80%, 100% { opacity: 0; transform: translate(var(--demo-copy-x), var(--demo-copy-y)); }
}
@keyframes demo-mcp-ring {
  0%, 69% { opacity: 0; transform: scale(0.2); }
  69.8% { opacity: 0.9; transform: scale(0.4); }
  72%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-mcp-copy-idle {
  0%, 69.5% { opacity: 1; }
  70.5%, 100% { opacity: 0; }
}
@keyframes demo-mcp-copy-done {
  0%, 69.5% { opacity: 0; }
  70.5%, 100% { opacity: 1; }
}
@keyframes demo-mcp-toast {
  0%, 70% { opacity: 0; transform: translateY(6px); }
  72%, 88% { opacity: 1; transform: none; }
  91%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Reading pages (articles and tutorials) sit on the site's dark background
   with the homepage glows. The text itself lives in a contained reading panel:
   a slightly lighter navy card (the tint the owner asked for on 25 September
   2026 because near-black tires the eyes over a long read) so the relief comes
   from the panel, not from a flat lighter page. */
/* The reading layout centres the text column TOGETHER with its rails (the
   tutorial's "Browse tutorials" sidebar on the left from lg, the "On this page"
   TOC on the right from xl) as one group. Centring the column alone left the
   TOC stranded at the far right (owner feedback, 2 October 2026). The main
   track only shrinks below 44rem when the container cannot fit the rails
   beside it; rails are hidden below their breakpoint, so the grid stays a
   single centred column on phones. */
.reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 44rem);
  justify-content: center;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
@media (min-width: 1024px) {
  .reading-layout.has-nav {
    grid-template-columns: 15rem minmax(0, 44rem);
  }
}
@media (min-width: 1280px) {
  .reading-layout.has-toc {
    grid-template-columns: minmax(0, 44rem) 14rem;
  }
  .reading-layout.has-nav.has-toc {
    grid-template-columns: 15rem minmax(0, 44rem) 14rem;
  }
}
.reading-panel {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 640px) {

  .reading-panel {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 768px) {

  .reading-panel {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.reading-panel {
  background: hsl(222 40% 12% / 0.9);
  box-shadow: 0 24px 80px -40px rgba(6, 120, 240, 0.35);
}
/* Wide media inside the panel may bleed to the panel's padding edge, never past the panel. */
.reading-panel .article-body img,
.reading-panel .article-body .kg-card,
.reading-panel .helpdesky-article img,
.reading-panel .helpdesky-article .table-wrapper,
.reading-panel .helpdesky-article pre {
  max-width: 100%;
}
.reading-panel pre {
  overflow-x: auto;
}

/* Body tables: every table arrives inside a `.table-wrapper` (added server-side
   when the CMS did not), a horizontal scroll region inside the reading column.
   The table stays a real table at every width: full width when it fits, wider
   than the column (and swipeable) when its columns need the room. */
.reading-panel .table-wrapper {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Lets the caption size itself to the visible region (100cqw) rather than the wide table. */
  container-type: inline-size;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  /* Right-edge cue: a fade that shows while there is more table to the right
     (iOS hides scrollbars). background-attachment: local scrolls the solid
     cover with the content so the fade disappears at the end. */
  background:
    linear-gradient(to left, hsl(222 40% 12%) 30%, hsl(222 40% 12% / 0)) right / 40px 100% no-repeat local,
    linear-gradient(to left, hsl(222 40% 12% / 0.85), hsl(222 40% 12% / 0)) right / 28px 100% no-repeat scroll;
}
.reading-panel .table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.reading-panel .table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
}
.article-body .table-wrapper {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.reading-panel .table-wrapper > table {
  /* Helpdesky's rounded `overflow: hidden` table must not clip its own scroll. */
  overflow: visible;
  background: transparent;
}
.reading-panel .table-wrapper > table > caption {
  text-align: left;
  /* Keep the caption's start on screen when the table is wider than the column. */
  caption-side: top;
  position: sticky;
  left: 0;
  max-width: 100cqw;
}
/* Phones: columns keep their natural width instead of compressing. Headers stay
   on one line and each column keeps a readable minimum, so three or more
   columns outgrow the column and scroll while two-column tables still fit. */
@media (max-width: 767px) {
  .reading-panel .table-wrapper th {
    white-space: nowrap;
  }
  .reading-panel .table-wrapper th,
  .reading-panel .table-wrapper td {
    min-width: 7rem;
  }
  .reading-panel .table-wrapper > table {
    /* A table's width is a floor: with nowrap headers and column minimums it
       grows past the column instead of squashing. */
    max-width: none;
  }
}
/* Sidebar / TOC rails: their own scroll region when longer than the viewport. */
.reading-rail {
  position: sticky;
  top: 8rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-width: thin;
}

/* Article bodies: HTML as Ghost renders it (server/articles/ghost.ts).
   No typography plugin is installed, so the prose styles live here. */
.article-body {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.625;
  color: hsl(var(--foreground) / 0.9);
  /* Ghost's card stylesheet colours buttons and links with this variable. */
  --ghost-accent-color: hsl(var(--primary));
}
.article-body > * + * {
  margin-top: 1.5rem;
}
.article-body h2 {
  margin-top: 3.5rem;
  scroll-margin-top: 8rem;
  font-family: Outfit, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {

  .article-body h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
.article-body h3 {
  margin-top: 2.5rem;
  scroll-margin-top: 8rem;
  font-family: Outfit, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {

  .article-body h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
.article-body h4 {
  margin-top: 2rem;
  scroll-margin-top: 8rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body a {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: hsl(var(--primary) / 0.4);
  text-underline-offset: 4px;
}
.article-body a:hover {
  text-decoration-color: hsl(var(--primary) / 1);
}
.article-body strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body ul > :not([hidden]) ~ :not([hidden]),
.article-body ol > :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));
}
.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
}
.article-body ul {
  list-style-type: disc;
}
.article-body ol {
  list-style-type: decimal;
}
.article-body li > ul,
.article-body li > ol {
  margin-top: 0.5rem;
}
/* Pull quotes. Provider blockquotes inside embed cards (X, TikTok) are
   placeholders for a widget, not quotes: the embed rules below undo this. */
.article-body blockquote {
  border-left-width: 2px;
  border-color: hsl(var(--primary) / 0.6);
  padding-left: 1.25rem;
  font-style: italic;
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.article-body code {
  border-radius: 0.25rem;
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: Outfit, sans-serif;
  font-size: 0.9em;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body pre {
  overflow-x: auto;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.04);
  padding: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.625;
}
.article-body pre code {
  background-color: transparent;
  padding: 0px;
  color: inherit;
}
.article-body img {
  height: auto;
  max-width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
}
.article-body figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.article-body hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-color: rgb(255 255 255 / 0.1);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.article-body th {
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  vertical-align: top;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body td {
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  vertical-align: top;
}

/* Ghost content cards (kg-* classes). Ghost's own cards.min.css, linked on
   article pages, lays the cards out; these rules fit them into the dark
   theme and the article column, and cover the card kinds Ghost leaves to the
   theme (images, galleries, embeds, wide and full-width variants). */
.article-body .kg-card,
.article-body .kg-image-card,
.article-body .kg-gallery-card,
.article-body .kg-embed-card {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.article-body figure.kg-card > figcaption,
.article-body .kg-card figcaption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.article-body figure.kg-card {
  margin-left: 0px;
  margin-right: 0px;
}
.article-body .kg-image-card img {
  width: 100%;
}
/* The column is the widest thing available: wide and full cards fill it instead of breaking out. */
.article-body .kg-width-wide,
.article-body .kg-width-full {
  max-width: 100%;
}
.article-body .kg-width-wide img,
.article-body .kg-width-full img {
  width: 100%;
}
.article-body .kg-gallery-container {
  width: 100%;
  max-width: 100%;
}
.article-body .kg-gallery-image img {
  border-radius: var(--radius);
  border-width: 0px;
}
/* Small images inside cards are icons or thumbnails, not pictures. */
.article-body .kg-bookmark-icon,
.article-body .kg-bookmark-thumbnail img,
.article-body .kg-product-card-image,
.article-body .kg-file-card-icon img,
.article-body .kg-audio-thumbnail,
.article-body .kg-video-thumbnail {
  border-radius: 0px;
  border-width: 0px;
}
/* Card links are blocks, not inline references. */
.article-body a.kg-bookmark-container,
.article-body a.kg-btn,
.article-body a.kg-product-card-button,
.article-body a.kg-file-card-container,
.article-body .kg-header-card a {
  text-decoration-line: none;
}
.article-body a.kg-bookmark-container {
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.03);
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
  --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);
}
.article-body a.kg-bookmark-container:hover {
  border-color: hsl(var(--primary) / 0.4);
  background-color: rgb(255 255 255 / 0.06);
}
.article-body .kg-bookmark-title {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body .kg-bookmark-description,
.article-body .kg-bookmark-metadata {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.article-body .kg-bookmark-thumbnail img {
  border-radius: 0px;
}
.article-body .kg-callout-card {
  border-radius: 0.75rem;
}
.article-body .kg-callout-card-white {
  background-color: rgb(255 255 255 / 0.06);
  --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);
}
.article-body .kg-callout-card-grey {
  background-color: rgb(255 255 255 / 0.08);
}
.article-body .kg-callout-card p {
  color: hsl(var(--foreground) / 0.9);
}
/* Accent callout: Ghost paints white text and white links on the accent
   (`.kg-callout-card-accent{color:#fff}` and `.kg-callout-card.kg-callout-card-accent a`);
   on our cyan that needs dark text, like the site's own buttons. */
.article-body .kg-callout-card.kg-callout-card-accent {
  --tw-text-opacity: 1;
  color: hsl(var(--background) / var(--tw-text-opacity, 1));
}
.article-body .kg-callout-card.kg-callout-card-accent p,
.article-body .kg-callout-card.kg-callout-card-accent strong {
  --tw-text-opacity: 1;
  color: hsl(var(--background) / var(--tw-text-opacity, 1));
}
.article-body .kg-callout-card.kg-callout-card-accent a {
  --tw-text-opacity: 1;
  color: hsl(var(--background) / var(--tw-text-opacity, 1));
  text-decoration-color: hsl(var(--background) / 0.4);
}
.article-body .kg-callout-card.kg-callout-card-accent a:hover {
  text-decoration-color: hsl(var(--background) / 1);
}
.article-body .kg-toggle-card,
.article-body .kg-product-card-container,
.article-body .kg-file-card-container,
.article-body .kg-audio-card,
.article-body .kg-signup-card {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  --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);
}
.article-body .kg-toggle-heading-text,
.article-body .kg-product-card-title,
.article-body .kg-file-card-title,
.article-body .kg-audio-title {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body .kg-toggle-content,
.article-body .kg-product-card-description,
.article-body .kg-file-card-caption,
.article-body .kg-file-card-metadata {
  color: hsl(var(--foreground) / 0.8);
}
.article-body .kg-toggle-card-icon svg {
  fill: currentColor;
}
.article-body .kg-btn {
  border-radius: var(--radius);
  font-weight: 500;
}
/* Ghost's `.kg-button-card a.kg-btn-accent{color:#fff}` loads after this
   sheet, so the dark-text override needs at least that specificity. */
.article-body .kg-button-card a.kg-btn-accent,
.article-body .kg-btn-accent,
.article-body .kg-product-card-button {
  --tw-text-opacity: 1;
  color: hsl(var(--background) / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
/* Call-to-action cards. Ghost lays them out; these make the text, button,
   image and tints work on the dark page. The accent button's text colour
   arrives as an inline style computed in the CMS against the CMS's accent
   (`style="color: #ffffff"`), so only that case is forced; custom-colour
   buttons carry the editor's own background and text colours inline and are
   left alone. */
.article-body .kg-cta-card {
  color: hsl(var(--foreground) / 0.9);
}
.article-body .kg-cta-card.kg-cta-bg-white {
  background-color: rgb(255 255 255 / 0.04);
  --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);
}
.article-body .kg-cta-card.kg-cta-bg-grey {
  background-color: rgb(255 255 255 / 0.08);
}
.article-body .kg-cta-card .kg-cta-sponsor-label-wrapper,
.article-body .kg-cta-card.kg-cta-bg-none .kg-cta-content {
  border-color: rgb(255 255 255 / 0.1);
}
.article-body .kg-cta-card .kg-cta-sponsor-label {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.article-body .kg-cta-card .kg-cta-text p {
  color: hsl(var(--foreground) / 0.9);
}
.article-body .kg-cta-card .kg-cta-text a,
.article-body .kg-cta-card .kg-cta-sponsor-label a {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: hsl(var(--foreground) / 0.4);
  text-underline-offset: 4px;
}
.article-body .kg-cta-card .kg-cta-text a:hover,
.article-body .kg-cta-card .kg-cta-sponsor-label a:hover {
  text-decoration-color: hsl(var(--foreground) / 1);
}
.article-body .kg-cta-card.kg-cta-link-accent .kg-cta-text a,
.article-body .kg-cta-card.kg-cta-link-accent .kg-cta-sponsor-label a {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
  text-decoration-color: hsl(var(--primary) / 0.4);
}
.article-body .kg-cta-card.kg-cta-link-accent .kg-cta-text a:hover,
.article-body .kg-cta-card.kg-cta-link-accent .kg-cta-sponsor-label a:hover {
  text-decoration-color: hsl(var(--primary) / 1);
}
.article-body .kg-cta-card .kg-cta-image-container img {
  border-radius: calc(var(--radius) - 2px);
  border-width: 0px;
}
.article-body .kg-cta-card a.kg-cta-button {
  font-weight: 500;
  text-decoration-line: none;
}
.article-body .kg-cta-card a.kg-cta-button.kg-style-accent {
  color: hsl(var(--background)) !important;
}
.article-body .kg-header-card {
  overflow: hidden;
  border-radius: 1rem;
}
.article-body .kg-header-card h2,
.article-body .kg-header-card h3 {
  margin-top: 0px;
}
.article-body .kg-header-card-text {
  color: inherit;
}
.article-body .kg-blockquote-alt {
  border-width: 0px;
  padding-left: 0px;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-style: normal;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {

  .article-body .kg-blockquote-alt {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
/* Embeds: iframes stay inside the column and video players keep their shape. */
.article-body .kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article-body .kg-embed-card > * {
  max-width: 100%;
}
/* Allow-listed embed iframes (shared/articles/embedProviders.ts): the sanitizer
   keeps the player's own width/height, so the box is sized here. Video players
   get a responsive 16:9 box below; audio and code embeds keep their own height. */
.article-body .kg-embed-card iframe {
  display: block;
  max-width: 100%;
  border-radius: 0.75rem;
  border-width: 0px;
}
/* X, TikTok and Instagram embeds: Ghost emits the provider's blockquote plus
   its widget script. The script is stripped and the page loads the official
   one (server/articles/router.ts). Until the script swaps the blockquote for
   the widget (or for good when scripts are blocked) the blockquote is a
   placeholder, so it gets the bookmark-card look instead of the pull-quote
   one. X's own dark theme comes from the twitter:widgets:theme meta. */
.article-body .kg-embed-card blockquote.twitter-tweet,
.article-body .kg-embed-card blockquote.tiktok-embed,
.article-body .kg-embed-card blockquote.instagram-media,
.article-body .kg-embed-card blockquote.instagram-media-registered {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  max-width: 550px;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.03);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-style: normal;
  color: hsl(var(--foreground) / 0.9);
}
.article-body .kg-embed-card blockquote.tiktok-embed {
  max-width: 605px;
}
/* Providers ship inline min-widths (325/326px) that overflow the reading panel on phones. */
.article-body .kg-embed-card blockquote.tiktok-embed,
.article-body .kg-embed-card blockquote.instagram-media,
.article-body .kg-embed-card blockquote.instagram-media-registered,
.article-body .kg-embed-card iframe {
  min-width: 0px !important;
}
/* Instagram parks its iframe absolutely (1px white border) until the post loads; keep that measuring frame invisible. */
.article-body .kg-embed-card iframe.instagram-media[style*="position: absolute"] {
  visibility: hidden;
}
/* Instagram's script renames the blockquote to .instagram-media-registered while
   its iframe loads (and leaves it so when the post cannot be shown). */
.article-body .kg-embed-card blockquote.instagram-media,
.article-body .kg-embed-card blockquote.instagram-media-registered {
  max-width: 540px;
}
/* TikTok's script keeps its blockquote and puts the player iframe inside it: the placeholder box goes. */
.article-body .kg-embed-card blockquote.tiktok-embed:has(iframe) {
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
}
.article-body .kg-embed-card blockquote.twitter-tweet a,
.article-body .kg-embed-card blockquote.tiktok-embed a,
.article-body .kg-embed-card blockquote.instagram-media a,
.article-body .kg-embed-card blockquote.instagram-media-registered a {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.article-body .kg-embed-card blockquote.twitter-tweet p {
  margin-bottom: 0.75rem;
}
.article-body .kg-embed-card blockquote.instagram-media p,
.article-body .kg-embed-card blockquote.instagram-media-registered p {
  margin-top: 0px;
  margin-bottom: 0px;
}
/* The rendered widgets (X's wrapper with inline max-width:550px; width:100%,
   Instagram's iframe replacing the blockquote) centre in the column and never
   overflow it on phones. */
.article-body .kg-embed-card .twitter-tweet-rendered,
.article-body .kg-embed-card iframe.instagram-media-rendered {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
.article-body .kg-embed-card iframe.instagram-media-rendered {
  min-width: 0px;
}
/* Video players get a responsive 16:9 box wherever they sit in the body: an
   embed card or a bare HTML card. The sanitizer keeps the player's own
   width/height attributes, so the box is sized here. */
.article-body iframe {
  max-width: 100%;
  border-width: 0px;
}
.article-body iframe[src*="youtube"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="vimeo"],
.article-body iframe[src*="vidreno"],
.article-body iframe[src*="loom.com"],
.article-body iframe[src*="wistia"] {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
  border-radius: 0.75rem;
}
.article-body .kg-video-card,
.article-body .kg-audio-card {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.article-body .kg-video-card video {
  width: 100%;
  border-radius: 0.75rem;
}
.article-body .kg-code-card pre {
  margin-top: 0px;
  margin-bottom: 0px;
}
.article-body .kg-code-card figcaption {
  text-align: left;
}
.article-body .kg-button-card {
  display: flex;
}
.article-body .kg-align-center {
  justify-content: center;
}

/* Tutorials section (the Helpdesky help center served headless at /tutorials,
   server/tutorials/). The article body is laid out by Helpdesky's own stylesheet
   (https://helpdesky.io/api/content/v1/article.css, linked on article pages),
   which reads these custom properties; the rules below only set the dark
   theme tokens and the few spacing/heading adjustments needed under the
   site's chrome. Nothing here touches .article-body (Ghost). */
.helpdesky-theme {
  --helpdesky-accent: hsl(var(--primary));
  --helpdesky-text: hsl(var(--foreground));
  --helpdesky-font: Inter, sans-serif;
  --helpdesky-code-bg: rgba(255, 255, 255, 0.08);
  --helpdesky-radius: var(--radius);
}
.helpdesky-theme .helpdesky-article {
  /* The stylesheet's 17px / 1.8 body on the site's light weight; the colour is its 67% text mix. */
  font-weight: 300;
}
.helpdesky-theme .helpdesky-article h2,
.helpdesky-theme .helpdesky-article h3,
.helpdesky-theme .helpdesky-article h4 {
  font-family: Outfit, sans-serif;
  /* Room for the fixed site header when a TOC link jumps to a heading. */
  scroll-margin-top: 8rem;
}
.helpdesky-theme .helpdesky-article > :first-child {
  margin-top: 0;
}
/* Cyan is the primary; dark text reads better on it than the stylesheet's white. */
.helpdesky-theme .helpdesky-article a.btn-block-primary,
.helpdesky-theme .helpdesky-article.numbered-headings h2::before {
  color: hsl(var(--primary-foreground));
}
.helpdesky-theme .helpdesky-article img {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
}
.helpdesky-theme .helpdesky-article .table-wrapper,
.helpdesky-theme .helpdesky-article table {
  max-width: 100%;
}

/* --- Storyboard 8: Earn (12.5 s; 1 s = 8%) --------------------------------
   1–2.4 s  the cursor switches Earn on (knob slides, status flips to On)
   3.3 s    the film starts (progress + counter); "Audience watches" lights
   4.5 s    the sponsor banner slides up; "Advertisers support", then "You earn"
   5–12.5 s hold the finished frame (Earn on, film playing, banner showing). */
@keyframes demo-ea-play {
  0%, 26% { opacity: 1; transform: none; }
  30% { opacity: 0; transform: scale(0.9); }
  31%, 100% { opacity: 0; transform: none; }
}
@keyframes demo-ea-banner {
  0%, 36% { opacity: 0; transform: translateY(-12px); }
  42%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-ea-playing {
  0%, 26% { opacity: 0; }
  31%, 100% { opacity: 1; }
}
@keyframes demo-ea-bar {
  0%, 30% { transform: scaleX(0); }
  96%, 100% { transform: scaleX(1); }
}
@keyframes demo-ea-count {
  0%, 30% { --demo-count: 0; }
  96%, 100% { --demo-count: var(--demo-final); }
}
@keyframes demo-ea-before {
  0%, 20% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
@keyframes demo-ea-after {
  0%, 20% { opacity: 0; }
  24%, 100% { opacity: 1; }
}
@keyframes demo-ea-track {
  0%, 19% { opacity: 0; }
  23%, 100% { opacity: 1; }
}
@keyframes demo-ea-knob {
  0%, 19% { transform: translateX(-16px); }
  23%, 100% { transform: none; }
}
@keyframes demo-ea-step-1 {
  0%, 30% { opacity: 0.35; }
  34%, 100% { opacity: 1; }
}
@keyframes demo-ea-step-2 {
  0%, 44% { opacity: 0.35; }
  48%, 100% { opacity: 1; }
}
@keyframes demo-ea-step-3 {
  0%, 52% { opacity: 0.35; }
  56%, 100% { opacity: 1; }
}
@keyframes demo-ea-cursor {
  0%, 5% { opacity: 0; transform: translate(calc(var(--demo-toggle-x) - 70px), calc(var(--demo-toggle-y) + 50px)); }
  9% { opacity: 1; transform: translate(calc(var(--demo-toggle-x) - 70px), calc(var(--demo-toggle-y) + 50px)); }
  17%, 19% { opacity: 1; transform: translate(var(--demo-toggle-x), var(--demo-toggle-y)); }
  20% { opacity: 1; transform: translate(var(--demo-toggle-x), var(--demo-toggle-y)) scale(0.85); }
  21.5%, 30% { opacity: 1; transform: translate(var(--demo-toggle-x), var(--demo-toggle-y)); }
  36%, 100% { opacity: 0; transform: translate(var(--demo-toggle-x), var(--demo-toggle-y)); }
}
@keyframes demo-ea-ring {
  0%, 19.4% { opacity: 0; transform: scale(0.2); }
  20.2% { opacity: 0.9; transform: scale(0.4); }
  22.5%, 100% { opacity: 0; transform: scale(1.4); }
}

/* --- Storyboard 9: Streaming quality (12.5 s; 1 s = 8%) -------------------
   0.8–4.8 s  the format outlines grow: 1080p → 4K UHD → 4K DCI → 8K UHD → 8K DCI; "8K" lights up
   5.3–7.3 s  the film strip fills while the counter runs 24 → 60 fps
   7.8–8.8 s  the smooth 10-bit bar sweeps in under the banded 8-bit bar; "10-bit" lights up
   8.8–12.5 s hold the finished frame (every outline, 60 fps, both depth bars).
   The strip and gradients are plain backgrounds in the panel's primary colour. */
.demo-sq-strip { background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 14px); opacity: 0.8; }
.demo-sq-banded { background: linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 0 12.5%, color-mix(in srgb, currentColor 20%, transparent) 12.5% 25%, color-mix(in srgb, currentColor 32%, transparent) 25% 37.5%, color-mix(in srgb, currentColor 44%, transparent) 37.5% 50%, color-mix(in srgb, currentColor 56%, transparent) 50% 62.5%, color-mix(in srgb, currentColor 68%, transparent) 62.5% 75%, color-mix(in srgb, currentColor 80%, transparent) 75% 87.5%, color-mix(in srgb, currentColor 92%, transparent) 87.5% 100%); }
.demo-sq-smooth { background: linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 92%, transparent)); }
@keyframes demo-sq-res-1 {
  0%, 6% { opacity: 0; transform: scale(0.94); }
  10%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-sq-res-2 {
  0%, 13% { opacity: 0; transform: scale(0.94); }
  17%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-sq-res-3 {
  0%, 20% { opacity: 0; transform: scale(0.94); }
  24%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-sq-res-4 {
  0%, 27% { opacity: 0; transform: scale(0.94); }
  31%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-sq-res-5 {
  0%, 34% { opacity: 0; transform: scale(0.94); }
  38%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-sq-spec-1 {
  0%, 34% { opacity: 0.3; }
  38%, 100% { opacity: 1; }
}
@keyframes demo-sq-spec-2 {
  0%, 42% { opacity: 0.3; }
  46%, 100% { opacity: 1; }
}
@keyframes demo-sq-spec-3 {
  0%, 66% { opacity: 0.3; }
  70%, 100% { opacity: 1; }
}
@keyframes demo-sq-fps-strip {
  0%, 42% { transform: translateX(-60%); }
  58%, 100% { transform: none; }
}
@keyframes demo-sq-fps-count {
  0%, 42% { --demo-count: 24; }
  58%, 100% { --demo-count: var(--demo-final); }
}
@keyframes demo-sq-tenbit-bar {
  0%, 62% { transform: translateX(-100%); }
  70%, 100% { transform: none; }
}
@keyframes demo-sq-tenbit-text {
  0%, 64% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

/* --- Storyboard 10: Projects (12.5 s; 1 s = 8%) ----------------------------
   1–2.5 s  the cursor publishes the draft project (Draft → Live); "Plan" lights
   3.5–8 s  the community-funding meter fills; "Fund" lights
   6.3 s / 7.3 s two planned roles are matched; "Find crew", then "Make the film"
   8–12.5 s hold the finished frame. */
@keyframes demo-pj-before {
  0%, 20% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
@keyframes demo-pj-after {
  0%, 20% { opacity: 0; }
  24%, 100% { opacity: 1; }
}
@keyframes demo-pj-meter {
  0%, 28% { transform: scaleX(0); }
  64%, 100% { transform: scaleX(1); }
}
@keyframes demo-pj-role-1-open {
  0%, 50% { opacity: 1; }
  54%, 100% { opacity: 0; }
}
@keyframes demo-pj-role-1 {
  0%, 50% { opacity: 0; }
  54%, 100% { opacity: 1; }
}
@keyframes demo-pj-role-2-open {
  0%, 58% { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@keyframes demo-pj-role-2 {
  0%, 58% { opacity: 0; }
  62%, 100% { opacity: 1; }
}
@keyframes demo-pj-step-1 {
  0%, 22% { opacity: 0.35; }
  26%, 100% { opacity: 1; }
}
@keyframes demo-pj-step-2 {
  0%, 32% { opacity: 0.35; }
  36%, 100% { opacity: 1; }
}
@keyframes demo-pj-step-3 {
  0%, 54% { opacity: 0.35; }
  58%, 100% { opacity: 1; }
}
@keyframes demo-pj-step-4 {
  0%, 64% { opacity: 0.35; }
  68%, 100% { opacity: 1; }
}
@keyframes demo-pj-cursor {
  0%, 5% { opacity: 0; transform: translate(calc(var(--demo-publish-x) - 60px), calc(var(--demo-publish-y) + 60px)); }
  9% { opacity: 1; transform: translate(calc(var(--demo-publish-x) - 60px), calc(var(--demo-publish-y) + 60px)); }
  17%, 19% { opacity: 1; transform: translate(var(--demo-publish-x), var(--demo-publish-y)); }
  20% { opacity: 1; transform: translate(var(--demo-publish-x), var(--demo-publish-y)) scale(0.85); }
  21.5%, 28% { opacity: 1; transform: translate(var(--demo-publish-x), var(--demo-publish-y)); }
  34%, 100% { opacity: 0; transform: translate(var(--demo-publish-x), var(--demo-publish-y)); }
}
@keyframes demo-pj-ring {
  0%, 19.4% { opacity: 0; transform: scale(0.2); }
  20.2% { opacity: 0.9; transform: scale(0.4); }
  22.5%, 100% { opacity: 0; transform: scale(1.4); }
}

/* --- Storyboard 11: Filmmaker profile (12.5 s; 1 s = 8%) ------------------
   1.3 s    "Northern Lines credited you" slides up over the filmography
   2–3.5 s  the cursor accepts the credit; the sheet leaves
   4.3 s    the film joins the filmography (brief highlight); 2 films → 3 films
   6–12.5 s hold the finished frame (the static specimen). */
@keyframes demo-pr-sheet {
  0%, 10% { opacity: 0; transform: translateY(16px); }
  14%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(16px); }
}
@keyframes demo-pr-before {
  0%, 34% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes demo-pr-after {
  0%, 34% { opacity: 0; }
  38%, 100% { opacity: 1; }
}
@keyframes demo-pr-row {
  0%, 33% { opacity: 0; transform: translateY(6px); }
  38%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-pr-row-hl {
  0%, 34% { opacity: 0; }
  40%, 48% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@keyframes demo-pr-cursor {
  0%, 13% { opacity: 0; transform: translate(calc(var(--demo-accept-x) - 90px), calc(var(--demo-accept-y) - 70px)); }
  17% { opacity: 1; transform: translate(calc(var(--demo-accept-x) - 90px), calc(var(--demo-accept-y) - 70px)); }
  25%, 27% { opacity: 1; transform: translate(var(--demo-accept-x), var(--demo-accept-y)); }
  28% { opacity: 1; transform: translate(var(--demo-accept-x), var(--demo-accept-y)) scale(0.85); }
  29.5%, 33% { opacity: 1; transform: translate(var(--demo-accept-x), var(--demo-accept-y)); }
  38%, 100% { opacity: 0; transform: translate(var(--demo-accept-x), var(--demo-accept-y)); }
}
@keyframes demo-pr-ring {
  0%, 27.4% { opacity: 0; transform: scale(0.2); }
  28.2% { opacity: 0.9; transform: scale(0.4); }
  30.5%, 100% { opacity: 0; transform: scale(1.4); }
}

/* --- Storyboard 12: Publish steps (8 s each; 1 s = 12.5%) ------------------
   upload: bar + percent 0.8–4.8 s, Uploaded at 5 s, trailer/poster/artwork tick in
   page: synopsis, information and credits fill in from 1 s to 6 s
   watch: the cursor picks Buy or rent at 2.6 s; prices appear at 3.6 s
   publish: the cursor publishes at 2.6 s; Live, link copied, share chips. */
@keyframes demo-hu-count {
  0%, 10% { --demo-count: 0; }
  60%, 100% { --demo-count: var(--demo-final); }
}
@keyframes demo-hu-bar {
  0%, 10% { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}
@keyframes demo-hu-before {
  0%, 60% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes demo-hu-after {
  0%, 60% { opacity: 0; }
  64%, 100% { opacity: 1; }
}
@keyframes demo-hu-asset-1-open {
  0%, 68% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes demo-hu-asset-1 {
  0%, 68% { opacity: 0; }
  72%, 100% { opacity: 1; }
}
@keyframes demo-hu-asset-2-open {
  0%, 76% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
@keyframes demo-hu-asset-2 {
  0%, 76% { opacity: 0; }
  80%, 100% { opacity: 1; }
}
@keyframes demo-hu-asset-3-open {
  0%, 84% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@keyframes demo-hu-asset-3 {
  0%, 84% { opacity: 0; }
  88%, 100% { opacity: 1; }
}
@keyframes demo-hp-line-1 {
  0%, 12% { opacity: 0; transform: translateY(4px); }
  18%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hp-line-2 {
  0%, 22% { opacity: 0; transform: translateY(4px); }
  28%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hp-info {
  0%, 36% { opacity: 0; transform: translateY(4px); }
  42%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hp-credit-1 {
  0%, 50% { opacity: 0; transform: translateY(4px); }
  56%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hp-credit-2 {
  0%, 60% { opacity: 0; transform: translateY(4px); }
  66%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hp-credit-3 {
  0%, 70% { opacity: 0; transform: translateY(4px); }
  76%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hw-free-on {
  0%, 34% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes demo-hw-paid-on {
  0%, 34% { opacity: 0; }
  38%, 100% { opacity: 1; }
}
@keyframes demo-hw-prices {
  0%, 42% { opacity: 0; transform: translateY(4px); }
  48%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hw-cursor {
  0%, 8% { opacity: 0; transform: translate(calc(var(--demo-paid-x) - 70px), calc(var(--demo-paid-y) + 40px)); }
  12% { opacity: 1; transform: translate(calc(var(--demo-paid-x) - 70px), calc(var(--demo-paid-y) + 40px)); }
  28%, 30% { opacity: 1; transform: translate(var(--demo-paid-x), var(--demo-paid-y)); }
  32% { opacity: 1; transform: translate(var(--demo-paid-x), var(--demo-paid-y)) scale(0.85); }
  33.5%, 40% { opacity: 1; transform: translate(var(--demo-paid-x), var(--demo-paid-y)); }
  46%, 100% { opacity: 0; transform: translate(var(--demo-paid-x), var(--demo-paid-y)); }
}
@keyframes demo-hw-ring {
  0%, 31.4% { opacity: 0; transform: scale(0.2); }
  32.2% { opacity: 0.9; transform: scale(0.4); }
  34.5%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes demo-hs-before {
  0%, 34% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes demo-hs-after {
  0%, 34% { opacity: 0; }
  38%, 100% { opacity: 1; }
}
@keyframes demo-hs-link {
  0%, 44% { opacity: 0; transform: translateY(4px); }
  50%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hs-share {
  0%, 56% { opacity: 0; transform: translateY(4px); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes demo-hs-cursor {
  0%, 8% { opacity: 0; transform: translate(calc(var(--demo-publish-x) - 70px), calc(var(--demo-publish-y) + 40px)); }
  12% { opacity: 1; transform: translate(calc(var(--demo-publish-x) - 70px), calc(var(--demo-publish-y) + 40px)); }
  28%, 30% { opacity: 1; transform: translate(var(--demo-publish-x), var(--demo-publish-y)); }
  32% { opacity: 1; transform: translate(var(--demo-publish-x), var(--demo-publish-y)) scale(0.85); }
  33.5%, 40% { opacity: 1; transform: translate(var(--demo-publish-x), var(--demo-publish-y)); }
  46%, 100% { opacity: 0; transform: translate(var(--demo-publish-x), var(--demo-publish-y)); }
}
@keyframes demo-hs-ring {
  0%, 31.4% { opacity: 0; transform: scale(0.2); }
  32.2% { opacity: 0.9; transform: scale(0.4); }
  34.5%, 100% { opacity: 0; transform: scale(1.4); }
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground *::-moz-selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.selection\:text-primary-foreground *::selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.selection\:text-primary-foreground::selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.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));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.after\:rounded-2xl::after {
  content: var(--tw-content);
  border-radius: 1rem;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.focus-within\:border-primary\/40:focus-within {
  border-color: hsl(var(--primary) / 0.4);
}
.hover\:border-primary\/20:hover {
  border-color: hsl(var(--primary) / 0.2);
}
.hover\:border-primary\/40:hover {
  border-color: hsl(var(--primary) / 0.4);
}
.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-purple-400\/40:hover {
  border-color: rgb(192 132 252 / 0.4);
}
.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\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}
.hover\:bg-purple-500\/10:hover {
  background-color: rgb(168 85 247 / 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\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}
.hover\:bg-white\/\[0\.07\]:hover {
  background-color: rgb(255 255 255 / 0.07);
}
.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\: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\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--primary) / var(--tw-ring-opacity, 1));
}
.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;
}
.group[open] .group-open\:inline {
  display: inline;
}
.group[open] .group-open\:hidden {
  display: none;
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\: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-6 {
    bottom: 1.5rem;
  }

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

  .sm\:top-\[232px\] {
    top: 232px;
  }

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

  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

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

  .sm\:table-header-group {
    display: table-header-group;
  }

  .sm\:table-row-group {
    display: table-row-group;
  }

  .sm\:table-row {
    display: table-row;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:aspect-video {
    aspect-ratio: 16 / 9;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:grid-cols-\[5\.5rem_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: 5.5rem minmax(0,1fr) auto;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:border-r {
    border-right-width: 1px;
  }

  .sm\:bg-primary\/\[0\.04\] {
    background-color: hsl(var(--primary) / 0.04);
  }

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

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

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

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

  .sm\:p-7 {
    padding: 1.75rem;
  }

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

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

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

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

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

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

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

  .sm\:text-\[15px\] {
    font-size: 15px;
  }

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

  .sm\:tracking-wider {
    letter-spacing: 0.05em;
  }
}
@media (min-width: 768px) {

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

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

  .md\:mt-20 {
    margin-top: 5rem;
  }

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

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

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

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

  .md\:grid-cols-\[1\.2fr_1fr\] {
    grid-template-columns: 1.2fr 1fr;
  }

  .md\:grid-cols-\[1fr_1\.2fr\] {
    grid-template-columns: 1fr 1.2fr;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-first {
    order: -9999;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

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

  .lg\:row-span-3 {
    grid-row: span 3 / span 3;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:row-start-3 {
    grid-row-start: 3;
  }

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

  .lg\:grid-cols-\[1\.05fr_1fr\] {
    grid-template-columns: 1.05fr 1fr;
  }

  .lg\:grid-cols-\[1\.15fr_1fr\] {
    grid-template-columns: 1.15fr 1fr;
  }

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

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

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

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

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

  .lg\:text-left {
    text-align: left;
  }
}
@media (min-width: 1280px) {

  .xl\:col-start-1 {
    grid-column-start: 1;
  }

  .xl\:col-start-2 {
    grid-column-start: 2;
  }

  .xl\:col-start-3 {
    grid-column-start: 3;
  }

  .xl\:row-start-1 {
    grid-row-start: 1;
  }

  .xl\:row-start-2 {
    grid-row-start: 2;
  }

  .xl\:block {
    display: block;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

  .\32xl\:gap-6 {
    gap: 1.5rem;
  }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}
.\[\&\>h2\:first-child\]\:mt-0>h2:first-child {
  margin-top: 0px;
}
.\[\&\>h2\:first-of-type\]\:mt-0>h2:first-of-type {
  margin-top: 0px;
}
.\[\&\>h2\]\:mb-4>h2 {
  margin-bottom: 1rem;
}
.\[\&\>h2\]\:mt-10>h2 {
  margin-top: 2.5rem;
}
.\[\&\>h2\]\:mt-8>h2 {
  margin-top: 2rem;
}
.\[\&\>h2\]\:scroll-mt-24>h2 {
  scroll-margin-top: 6rem;
}
.\[\&\>h2\]\:text-2xl>h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}
.\[\&\>h2\]\:font-bold>h2 {
  font-weight: 700;
}
.\[\&\>h3\]\:mb-3>h3 {
  margin-bottom: 0.75rem;
}
.\[\&\>h3\]\:mt-6>h3 {
  margin-top: 1.5rem;
}
.\[\&\>h3\]\:scroll-mt-24>h3 {
  scroll-margin-top: 6rem;
}
.\[\&\>h3\]\:text-xl>h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.\[\&\>h3\]\:font-semibold>h3 {
  font-weight: 600;
}
.\[\&\>ol\]\:mb-4>ol {
  margin-bottom: 1rem;
}
.\[\&\>ol\]\:list-decimal>ol {
  list-style-type: decimal;
}
.\[\&\>ol\]\:pl-6>ol {
  padding-left: 1.5rem;
}
.\[\&\>p\]\:mb-4>p {
  margin-bottom: 1rem;
}
.\[\&\>ul\>li\]\:mb-1\.5>ul>li {
  margin-bottom: 0.375rem;
}
.\[\&\>ul\]\:mb-4>ul {
  margin-bottom: 1rem;
}
.\[\&\>ul\]\:list-disc>ul {
  list-style-type: disc;
}
.\[\&\>ul\]\:pl-6>ul {
  padding-left: 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));
}