/*
 * 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. */
/* Opt-in cinema layout. SSR templates and React may consume the same recipes.
   No global tokens or player styles are overridden. */
.ds-cinema-page {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: clip;
}
.ds-cinema-gutter {
padding-inline: clamp(24px,4.5vw,88px);
}
.ds-cinema-hero {
position: relative;
  isolation: isolate;
  min-height: clamp(560px,68vh,720px);
  background: hsl(var(--background));
}
.ds-cinema-art {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 37%;
     object-position: center 37%;
  z-index: -3;
}
.ds-cinema-shade {
position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg,hsl(var(--background)/.91) 0%,hsl(var(--background)/.68) 25%,hsl(var(--background)/.14) 63%,transparent 85%),linear-gradient(0deg,hsl(var(--background)) 0%,hsl(var(--background)/.83) 10%,transparent 42%);
}
.ds-cinema-content {
width: 100%;
  padding-block: clamp(180px,calc(34vh - 70px),220px) 70px;
}
.ds-cinema-title {
font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(56px,5.9vw,92px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 600px;
  margin: 0;
}
.ds-cinema-eyebrow {
font-size: 10px;
  letter-spacing: .18em;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(var(--foreground)/.75);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ds-cinema-eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--primary));
}
.ds-cinema-synopsis {
max-width: 400px;
  font-size: 14px;
  line-height: 1.75;
  color: hsl(var(--foreground)/.7);
  margin-block: 18px 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.ds-cinema-actions {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.ds-cinema-action {
box-shadow: none!important;
  transform: none!important;
  height: 46px!important;
  min-height: 46px!important;
  padding: 0 24px!important;
  font-size: 13px!important;
  border-radius: 8px!important;
}
.ds-cinema-action.ds-cinema-action-secondary {
  color: hsl(var(--foreground));
  background: hsl(var(--foreground)/.11);
  border-color: hsl(var(--foreground)/.28);
}
.ds-cinema-action.ds-cinema-action-secondary:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--foreground)/.17);
  border-color: hsl(var(--foreground)/.42);
}
.ds-cinema-shelf {
padding-block: 0 26px;
}
.ds-cinema-shelf-heading {
display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.ds-cinema-shelf-heading h2 {
font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.ds-cinema-rail {
display: flex;
  align-items: start;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * clamp(24px,4.5vw,88px));
  padding: 5px clamp(24px,4.5vw,88px) 8px;
  scroll-padding-inline: clamp(24px,4.5vw,88px);
}
.ds-cinema-card {
position: relative;
  flex: 0 0 171px;
  width: 171px;
  min-width: 0;
  transform-origin: left center;
}
.ds-cinema-card[data-expanded] {
flex-basis: 456px;
  width: 456px;
}
.ds-cinema-poster {
display: block;
  position: relative;
  height: 256.5px;
  border-radius: 10px;
  outline: none;
  overflow: hidden;
  background: var(--surface-frame);
}
.ds-cinema-poster>img,.ds-cinema-card video {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.ds-cinema-landscape {
  opacity: 0;
}
.ds-cinema-card[data-expanded] .ds-cinema-landscape {
  opacity: 1;
}
.ds-cinema-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,hsl(var(--background)/.95),transparent 65%);
  pointer-events: none;
}
.ds-cinema-poster-title {
position: absolute;
  z-index: 2;
  left: 17px;
  right: 17px;
  bottom: 24px;
  color: hsl(var(--foreground));
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.02;
  pointer-events: none;
}
.ds-cinema-card[data-expanded] .ds-cinema-poster-title {
font-size: 38px;
  left: 24px;
  bottom: 25px;
}
.ds-cinema-poster-title small {
display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.6;
  margin-top: 12px;
  color: hsl(var(--ink-secondary));
}
.ds-cinema-card:not([data-expanded]) .ds-cinema-poster-title small {
  display: none;
}
.ds-cinema-card video {
  opacity: 0;
  pointer-events: none;
}
.ds-cinema-card video[data-playing] {
  opacity: 1;
}
.ds-cinema-sound,.ds-cinema-preview-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid hsl(var(--foreground)/.4);
  border-radius: 50%;
  color: hsl(var(--foreground));
  background: hsl(var(--background)/.7);
}
.ds-cinema-sound[hidden],.ds-cinema-preview-play[hidden] {
  display: none;
}
.ds-cinema-card:not([data-expanded]) .ds-cinema-preview-play {
  display: none;
}
.ds-cinema-description {
padding-block: 18px 24px;
  min-height: 112px;
  color: hsl(var(--ink-secondary));
  font-size: 12px;
  line-height: 1.7;
}
.ds-cinema-description h3 {
display: inline;
  font-size: 16px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-right: 18px;
}
.ds-cinema-description p {
margin-top: 8px;
  max-width: 780px;
}
.ds-cinema-description [data-cinema-facts] {
display: flex;
  font-size: 11px;
}
.ds-cinema-description a {
color: inherit;
}
.ds-cinema-page .ds-cinema-arrow {
width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
}
.ds-cinema-arrow:disabled {
  opacity: .35;
}
.ds-cinema-header {
position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 13px;
  color: hsl(var(--foreground)/.7);
  background: linear-gradient(hsl(var(--background)/.7),transparent);
}
.ds-cinema-header img {
  height: 32px;
  width: 32px;
}
.ds-cinema-header nav {
display: flex;
  align-items: center;
  gap: 32px;
}
.ds-cinema-film-hero {
min-height: clamp(660px,85vh,860px);
}
.ds-cinema-film-hero .ds-cinema-content {
padding-top: clamp(230px,calc(42.5vh - 100px),330px);
  padding-bottom: 88px;
}
.ds-cinema-film-hero .ds-cinema-title {
max-width: 600px;
  font-size: clamp(56px,5.9vw,88px);
}
.ds-cinema-film-copy {
max-width: 750px;
}
.ds-cinema-film-copy .paywall>div {
display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.ds-cinema-film-copy .paywall {
  max-width: 680px;
}
.ds-cinema-film-copy .paywall [data-checkout-open] {
  display: block;
}
.ds-cinema-offer-note {
max-width: 450px;
  margin-top: 14px;
  font-size: 10px;
  line-height: 1.6;
  color: hsl(var(--foreground)/.45);
}
.ds-cinema-creator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.ds-cinema-creator>[data-subscribe] {
  flex-shrink: 0;
}
.ds-cinema-info {
padding-block: 0 70px;
  min-height: 328px;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr);
  gap: 100px;
}
.ds-cinema-info>aside {
  border-left: 1px solid var(--hairline);
  padding-left: 36px; min-width:0;
}
.ds-cinema-story {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.ds-cinema-story>section { flex:1; min-width:0; }
.ds-cinema-story-poster {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  flex: none;
  border-radius: var(--radius-card);
  box-shadow: 0 12px 28px hsl(var(--background)/.4);
}
.ds-cinema-info #film-details { margin-top:32px; }
.ds-cinema-info #film-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
.ds-cinema-info #film-details dd { overflow-wrap:anywhere; }
.ds-cinema-info h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.ds-cinema-info [data-testid="text-synopsis"] {
font-size: 13px;
  line-height: 1.9;
  max-width: 630px;
  color: hsl(var(--ink-secondary));
}
.ds-cinema-tabs {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
}
.ds-cinema-tabs>a,
.ds-cinema-section-heading>span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 59px;
  white-space: nowrap;
  font-size: 12px;
  color: hsl(var(--ink-tertiary));
}
.ds-cinema-tabs>a[aria-selected=true],
.ds-cinema-section-heading>span {
  color: hsl(var(--foreground));
}
.ds-cinema-tabs>a[aria-selected=true]::after,
.ds-cinema-section-heading>span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: hsl(var(--primary));
}
.ds-cinema-panel {
  padding-block: 42px 60px;
}
[data-cinema-panel][hidden] {
  display: none;
}
.ds-cinema-panel dl {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 28px;
}
.ds-cinema-panel .ds-cinema-credit-groups {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 30px;
}
.ds-cinema-trailer-dialog {
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  width: min(960px,calc(100vw - 32px));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.ds-cinema-trailer-dialog::backdrop {
  background: hsl(var(--background)/.85);
}
.ds-cinema-trailer-dialog iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: hsl(var(--background));
}
.ds-cinema-trailer-dialog>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
/* The approved cinema composition, shared by the two SSR surfaces. */
.ds-cinema-meta { display:flex; flex-wrap:wrap; align-items:center; gap:11px; color:hsl(var(--foreground)/.63); font-size:12px; line-height:1.8; margin-top:24px; }
.ds-cinema-meta>span:not(:last-child)::after { content:'·'; margin-left:11px; opacity:.65; }
.ds-cinema-meta>.ds-cinema-age { border:1px solid hsl(var(--foreground)/.3); border-radius:3px; padding:0 5px; font-size:10px; line-height:1.55; }
.ds-cinema-formats { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 25px; }
.ds-cinema-meta > .ds-cinema-formats { margin:0; }
.ds-cinema-formats span { font-size:9px; color:hsl(var(--foreground)/.8); border:1px solid hsl(var(--foreground)/.22); border-radius:4px; padding:2px 6px; line-height:1.4; background:transparent; }
.ds-cinema-purchase { margin-top:24px; }
.ds-cinema-film-hero .ds-cinema-synopsis { max-width:430px; margin-bottom:16px; }
.ds-cinema-round { width:42px; height:42px; display:grid; place-items:center; border:1px solid hsl(var(--foreground)/.25); border-radius:50%; background:hsl(var(--background)/.2); color:hsl(var(--foreground)); }
.ds-cinema-round:hover { color:hsl(var(--primary)); border-color:hsl(var(--primary)); }
.ds-cinema-back { position:absolute; top:112px; left:clamp(24px,4.5vw,88px); display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:11px; color:hsl(var(--foreground)/.65); }
.ds-cinema-trailer-tile { position:absolute; right:clamp(24px,4.5vw,88px); bottom:65px; width:230px; height:130px; border:1px solid hsl(var(--foreground)/.3); border-radius:10px; overflow:hidden; text-align:left; }
.ds-cinema-trailer-tile>img { position:absolute; inset:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }
.ds-cinema-trailer-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,hsl(var(--background)/.8),hsl(var(--background)/.15)); }
.ds-cinema-trailer-play { position:absolute; z-index:1; top:20px; left:16px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:hsl(var(--foreground)/.15); border:1px solid hsl(var(--foreground)/.4); }
.ds-cinema-trailer-caption { position:absolute; z-index:1; bottom:15px; left:16px; font-size:12px; }
.ds-cinema-trailer-caption small { display:block; font-size:9px; color:hsl(var(--foreground)/.6); margin-top:3px; }
.ds-cinema-trailer-tile:hover { border-color:hsl(var(--foreground)/.8); }
.ds-cinema-header>a { justify-self:start; }
.ds-cinema-header a:hover { color:hsl(var(--foreground)); }
.ds-cinema-header nav a[aria-current=page] { color:hsl(var(--foreground)); }
.ds-cinema-header-tools { justify-self:end; display:flex; align-items:center; gap:20px; }
.ds-cinema-header summary { cursor:pointer; list-style:none; }
.ds-cinema-header summary::-webkit-details-marker { display:none; }
.ds-cinema-search>summary { width:44px; height:44px; display:grid; place-items:center; }
.ds-cinema-search-tray { position:absolute; top:88px; left:clamp(24px,4.5vw,88px); right:clamp(24px,4.5vw,88px); display:flex; gap:16px; align-items:center; padding:16px 24px; border:1px solid var(--hairline); border-radius:12px; background:hsl(var(--background)/.98); }
.ds-cinema-search-tray input[type="search"] { min-width:0; flex:1; }
.ds-cinema-search[open] .ds-cinema-search-tray { animation:cinema-search-reveal var(--duration-base,180ms) ease-out; }
@keyframes cinema-search-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .ds-cinema-search[open] .ds-cinema-search-tray { animation:none; } }
.ds-cinema-avatar { width:34px; height:34px; display:grid; place-items:center; border:1px solid hsl(var(--foreground)/.22); border-radius:50%; }
.ds-cinema-header .ds-cinema-account-menu { position:absolute; right:clamp(24px,4.5vw,88px); top:72px; display:grid; gap:16px; padding:24px; background:hsl(var(--background)); border:1px solid var(--hairline); border-radius:12px; }
.ds-cinema-browse { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:32px; padding-top:5px; padding-bottom:44px; }
/* Move the filters to another line before they squeeze the heading. */
.ds-cinema-browse>div { flex:0 0 auto; max-width:100%; }
.ds-cinema-browse-top { padding-top:180px; }
.ds-cinema-small-caps { font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:hsl(var(--ink-tertiary)); }
.ds-cinema-browse h1 { font-family:var(--font-heading); font-size:20px; font-weight:500; letter-spacing:-.02em; margin-top:6px; }
.ds-cinema-filters { display:flex; flex-wrap:wrap; min-width:0; max-width:100%; align-items:center; gap:6px; font-size:11px; }
.ds-cinema-filters>a,.ds-cinema-genres summary { display:inline-flex; align-items:center; gap:8px; padding:0 16px; min-height:36px; border-radius:999px; white-space:nowrap; }
.ds-cinema-filter-active { background:hsl(var(--foreground)/.1); }
.ds-cinema-genres { position:relative; }
.ds-cinema-genres summary { cursor:pointer; list-style:none; }
.ds-cinema-genres>div { position:absolute; z-index:5; right:0; min-width:180px; display:grid; gap:12px; padding:20px; background:hsl(var(--background)); border:1px solid var(--hairline); border-radius:12px; }
.ds-cinema-creator-line { font-size:11px; color:hsl(var(--foreground)/.45); margin-top:25px; }
.ds-cinema-history { display:inline-flex; align-items:center; gap:8px; font-size:10px; color:hsl(var(--ink-tertiary)); margin-top:16px; }
.ds-cinema-shelf-heading p { font-size:12px; }
.ds-cinema-shelf-heading [data-testid=link-shelf-see-all] { font-size:10px; }
.ds-cinema-poster:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:3px; }
.ds-cinema-creator-profile { display:flex; align-items:center; gap:14px; }
.ds-cinema-creator-name { display:block; font-family:var(--font-heading); font-size:19px; font-weight:500; color:hsl(var(--foreground)); }
.ds-cinema-creator-role { display:block; font-size:10px; color:hsl(var(--ink-tertiary)); margin-top:4px; }
.ds-cinema-creator [data-subscribe-button] { height:32px; min-height:32px; padding:0 13px; font-size:10px; color:hsl(var(--foreground)); border:1px solid hsl(var(--foreground)/.28); background:hsl(var(--foreground)/.11); box-shadow:none; }
/* Keep the cinema control still: the standard button lift and inset highlight
   look like a second edge on this translucent surface. Retain the outer glow. */
.ds-cinema-creator [data-subscribe-button]:hover,
.ds-cinema-creator [data-subscribe-button]:active { transform:none; }
.ds-cinema-creator [data-subscribe-button]:hover,
.ds-cinema-creator [data-subscribe-button]:focus-visible { box-shadow:0 0 32px hsl(var(--primary)/.4); }
.ds-cinema-creator [data-subscribe-button]:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:2px; }
.ds-cinema-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:36px 48px; border-top:1px solid var(--hairline); color:hsl(var(--ink-tertiary)); font-size:11px; background:hsl(var(--background)); }
.ds-cinema-footer-brand { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-size:20px; color:hsl(var(--foreground)); }
.ds-cinema-footer nav { display:flex; gap:20px; }
@media(min-width:1700px) {
  .ds-cinema-title { font-size:104px; }
  .ds-cinema-synopsis { font-size:16px; max-width:470px; }
}
@media(max-width:1000px) {
  .ds-cinema-header { grid-template-columns:1fr auto auto; gap:30px; }
  .ds-cinema-header nav { gap:24px; }
  .ds-cinema-browse { align-items:flex-start; flex-direction:column; gap:22px; }
  .ds-cinema-info { gap:40px; grid-template-columns:1.3fr 1fr; }
  .ds-cinema-story { flex-direction:column; gap:20px; }
  .ds-cinema-story-poster { width:140px; }
  .ds-cinema-trailer-tile { width:180px; height:110px; bottom:46px; }
}
@media(max-width:639px) {
  .ds-cinema-gutter { padding-inline:22px; }
  .ds-cinema-header { height:76px; grid-template-columns:1fr auto; gap:16px; }
  .ds-cinema-header>nav { position:absolute; top:76px; left:22px; right:22px; height:43px; justify-content:flex-start; gap:25px; font-size:12px; }
  .ds-cinema-header-tools { gap:12px; }
  .ds-cinema-search-tray { top:123px; left:16px; right:16px; padding:12px; gap:10px; }
  .ds-cinema-search-tray input { font-size:13px; }
  .ds-cinema-hero { min-height:720px; }
  .ds-cinema-art { height:510px; -o-object-position:66% 30%; object-position:66% 30%; -webkit-mask-image:linear-gradient(hsl(var(--background)) 55%,transparent 100%); mask-image:linear-gradient(hsl(var(--background)) 55%,transparent 100%); }
  .ds-cinema-shade { background:linear-gradient(0deg,hsl(var(--background)) 10%,hsl(var(--background)/.96) 26%,hsl(var(--background)/.6) 43%,transparent 72%),linear-gradient(180deg,hsl(var(--background)/.4),transparent 45%); }
  .ds-cinema-content { padding-block:355px 35px; }
  .ds-cinema-title,.ds-cinema-film-hero .ds-cinema-title { font-size:55px; max-width:340px; }
  .ds-cinema-eyebrow { font-size:9px; letter-spacing:.13em; margin-bottom:16px; }
  .ds-cinema-meta { font-size:10px; gap:8px; margin-top:18px; }
  .ds-cinema-meta>span:not(:last-child)::after { margin-left:8px; }
  .ds-cinema-synopsis { font-size:12px; max-width:330px; margin-block:14px 21px; line-height:1.7; }
  .ds-cinema-actions { gap:12px; }
  .ds-cinema-action { height:44px!important; min-height:44px; padding:0 19px!important; font-size:12px!important; }
  .ds-cinema-round { height:38px; width:38px; }
  .ds-cinema-creator-line { font-size:10px; margin-top:20px; }
  .ds-cinema-browse { padding-top:3px; padding-bottom:32px; gap:20px; }
  .ds-cinema-browse-top { padding-top:180px; }
  .ds-cinema-filters { flex-wrap:wrap; gap:2px; }
  .ds-cinema-filters>a,.ds-cinema-genres summary { font-size:10px; padding-inline:12px; min-height:34px; }
  .ds-cinema-shelf { padding-bottom:8px; }
  .ds-cinema-shelf-heading { margin-bottom:17px; gap:10px; }
  .ds-cinema-shelf-heading h2 { font-size:22px; line-height:1.2; }
  .ds-cinema-shelf-heading p { font-size:11px; max-width:250px; line-height:1.7; }
  .ds-cinema-shelf-heading [data-testid=link-shelf-see-all] { display:none; }
  .ds-cinema-page .ds-cinema-arrow { width:30px; height:30px; min-width:30px; min-height:30px; }
  .ds-cinema-rail { margin-inline:-22px; padding-inline:22px; gap:12px; scroll-padding-inline:22px; }
  .ds-cinema-card { width:126px; flex-basis:126px; }
  .ds-cinema-card[data-expanded] { width:336px; flex-basis:336px; }
  .ds-cinema-poster { height:189px; border-radius:8px; }
  .ds-cinema-poster-title { left:12px; right:12px; bottom:18px; font-size:25px; }
  .ds-cinema-card[data-expanded] .ds-cinema-poster-title { left:18px; bottom:20px; font-size:33px; max-width:210px; }
  .ds-cinema-poster-title small { font-size:8px; }
  .ds-cinema-description { min-height:145px; padding-block:16px 28px; font-size:11px; }
  .ds-cinema-description h3 { font-size:14px; }
  .ds-cinema-description [data-cinema-facts] { font-size:9px; }
  .ds-cinema-back { top:137px; left:22px; font-size:10px; }
  .ds-cinema-film-hero { min-height:790px; }
  .ds-cinema-film-hero .ds-cinema-content { padding-block:355px 36px; }
  .ds-cinema-film-hero .ds-cinema-synopsis { max-width:340px; }
  .ds-cinema-formats { margin-bottom:20px; gap:7px; }
  .ds-cinema-formats span { font-size:8px; }
  .ds-cinema-trailer-tile { top:206px; right:22px; bottom:auto; width:118px; height:72px; }
  .ds-cinema-trailer-play { width:25px; height:25px; left:10px; top:10px; }
  .ds-cinema-trailer-play svg { width:11px; }
  .ds-cinema-trailer-caption { font-size:9px; left:10px; bottom:10px; }
  .ds-cinema-trailer-caption small { display:none; }
  .ds-cinema-info { grid-template-columns:1fr; gap:32px; padding-block:30px 44px; min-height:0; }
  .ds-cinema-info>aside { border-left:0; border-top:1px solid var(--hairline); padding:25px 0 0; }
  .ds-cinema-info [data-testid=text-synopsis] { font-size:12px; }
  .ds-cinema-panel dl,.ds-cinema-panel .ds-cinema-credit-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ds-cinema-tabs { gap:26px; }
  .ds-cinema-tabs>a { font-size:11px; min-height:54px; }
  .ds-cinema-footer { flex-wrap:wrap; gap:20px; padding-block:30px 44px; }
}
@media(prefers-reduced-motion:reduce) {
  .ds-cinema-card { animation:none!important; }
  .ds-cinema-rail { scroll-behavior:auto; }
}

.ds-cinema-poster-category { position:absolute; z-index:2; top:14px; left:14px; font-size:7px; letter-spacing:.17em; text-transform:uppercase; color:hsl(var(--foreground)/.8); }
.ds-cinema-card-save { position:absolute; top:14px; right:14px; width:32px; height:32px; z-index:3; }
.ds-cinema-card:not([data-expanded]) .ds-cinema-card-save { visibility:hidden; }
.ds-cinema-card:focus-within .ds-cinema-card-save { visibility:visible; }
@media(max-width:639px) { .ds-cinema-action { min-height:44px!important; } }

/* Overview keeps the filmmaker's public details visible in one reading flow. */
.ds-cinema-details { padding-top:0; padding-bottom:36px; }
.ds-cinema-details>section { padding-block:28px; border-top:1px solid var(--hairline); }
.ds-cinema-details .ds-cinema-formats { margin:8px 0 0; }

.ds-cinema-description { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.ds-cinema-description-main { flex:1; min-width:0; }
.ds-cinema-facts-row { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.ds-cinema-facts-row h3 { margin:0; }
.ds-cinema-facts-row .ds-cinema-meta { margin:0; }
.ds-cinema-meta>span.ds-cinema-age::after { content:none; }
.ds-cinema-description .ds-cinema-price { color:hsl(var(--primary)); font-size:12px; white-space:nowrap; }
.ds-cinema-region { color:hsl(var(--ink-secondary)); font-size:12px; }
.ds-cinema-description .ds-cinema-formats { margin:12px 0 0; }
.ds-cinema-description p { margin-top:12px; }
.ds-cinema-description .ds-cinema-view { display:inline-flex; align-items:center; gap:12px; white-space:nowrap; margin-top:3px; font-size:13px; }
.ds-cinema-catalogue-row { padding-top:8px; }
.ds-cinema-catalogue-arrows { display:flex; gap:8px; justify-content:flex-end; margin-bottom:16px; }
@media(max-width:639px){ .ds-cinema-description { flex-direction:column; gap:12px; } .ds-cinema-facts-row { gap:9px; } .ds-cinema-description .ds-cinema-price { font-size:10px; } }

.ds-cinema-trailer-dialog iframe { width:100%; aspect-ratio:16/9; border:0; display:block; background:#000; }

/* Fixed homepage introduction over rotating, full-bleed film artwork. */
.ds-cinema-home-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr); align-items:center; gap:clamp(48px,8vw,140px); min-height:clamp(680px,82svh,900px); padding-block:176px 72px; }
.ds-cinema-home-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,hsl(var(--background)/.88),hsl(var(--background)/.56) 38%,hsl(var(--background)/.08) 76%),linear-gradient(0deg,hsl(var(--background)) 0%,hsl(var(--background)/.8) 16%,transparent 65%),linear-gradient(180deg,hsl(var(--background)/.4),transparent 24%); }
.ds-cinema-home-intro { min-width:0; }
.ds-cinema-home-heading { font-family:var(--font-heading); font-size:clamp(42px,4.4vw,72px); font-weight:500; line-height:1.06; letter-spacing:-.04em; text-wrap:balance; max-width:560px; margin:0; }
.ds-cinema-home-lead { font-size:clamp(16px,1.3vw,20px); line-height:1.6; color:hsl(var(--foreground)/.8); max-width:350px; margin-block:24px 32px; text-wrap:pretty; }
.ds-cinema-home-intro .ds-cinema-actions { gap:12px; }
.ds-cinema-home-carousel { min-width:0; width:100%; max-width:460px; justify-self:end; align-self:end; }
.ds-cinema-home-feature { min-width:0; }
.ds-cinema-home-backdrop { position:absolute; inset:0; z-index:-2; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center 37%; object-position:center 37%; pointer-events:none; }
.ds-cinema-home-feature-info { min-width:0; }
.ds-cinema-home-feature-info>.ds-cinema-eyebrow { margin-bottom:16px; }
.ds-cinema-home-feature-info>.ds-cinema-title { font-size:clamp(32px,3.4vw,50px); line-height:1.08; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.ds-cinema-home-feature-info>.ds-cinema-title a:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:4px; }
.ds-cinema-home-feature-creator { color:hsl(var(--foreground)/.75); font-size:12px; margin-block:12px 20px; }
.ds-cinema-home-feature-facts { min-width:0; }
.ds-cinema-home-feature-info .ds-cinema-meta { margin:0 0 8px; font-size:12px; color:hsl(var(--foreground)/.75); }
.ds-cinema-home-feature-info .ds-cinema-price { font-size:12px; color:hsl(var(--primary)); }
.ds-cinema-home-feature-info .ds-cinema-formats { margin:12px 0 0; }
.ds-cinema-home-feature-info .ds-cinema-actions { margin-top:24px; gap:12px; }
.ds-cinema-home-feature-info .ds-cinema-action { padding-inline:16px!important; }
@media(max-width:900px) {
  .ds-cinema-home-hero { grid-template-columns:minmax(0,1fr); gap:64px; padding-block:144px 40px; }
  .ds-cinema-home-heading { max-width:590px; font-size:clamp(42px,7vw,64px); }
  .ds-cinema-home-lead { max-width:none; margin-block:20px 24px; }
  .ds-cinema-home-carousel { max-width:none; }
  .ds-cinema-home-feature-info { max-width:460px; }
}
@media(max-width:639px) {
  .ds-cinema-home-hero { padding-block:144px 32px; gap:56px; }
  .ds-cinema-home-backdrop { -o-object-position:82% center; object-position:82% center; }
  .ds-cinema-home-hero::before { background:linear-gradient(90deg,hsl(var(--background)/.64),hsl(var(--background)/.26)),linear-gradient(0deg,hsl(var(--background)),hsl(var(--background)/.65) 36%,hsl(var(--background)/.12) 85%); }
  .ds-cinema-home-heading { font-size:clamp(38px,10vw,52px); }
  .ds-cinema-home-intro .ds-cinema-actions { gap:10px; }
  .ds-cinema-home-intro .ds-cinema-action { padding-inline:16px!important; }
  .ds-cinema-home-feature-info>.ds-cinema-title { font-size:32px; }
}
.ds-cinema-home-row { padding-block:16px 24px; }
.ds-cinema-home-row [data-cinema-prev][hidden],.ds-cinema-home-row [data-cinema-next][hidden] { display:none; }
.ds-cinema-home-row .ds-cinema-shelf-heading { align-items:center; flex-wrap:wrap; margin-bottom:16px; gap:12px; }
.ds-cinema-home-row .ds-cinema-shelf-heading h2 { font-size:20px; }
.ds-cinema-home-row .ds-cinema-card { width:132px; flex-basis:132px; }
.ds-cinema-home-row .ds-cinema-card[data-expanded] { width:352px; flex-basis:352px; }
.ds-cinema-home-row .ds-cinema-poster { height:198px; }
.ds-cinema-home-row .ds-cinema-poster-title { font-size:23px; left:14px; right:14px; bottom:20px; }
.ds-cinema-home-row .ds-cinema-card[data-expanded] .ds-cinema-poster-title { font-size:30px; left:20px; bottom:24px; max-width:240px; }
.ds-cinema-home-row .ds-cinema-description { min-height:0; padding-block:12px 0; }
@media(max-width:639px){
  .ds-cinema-home-row .ds-cinema-card { width:112px; flex-basis:112px; }
  .ds-cinema-home-row .ds-cinema-card[data-expanded] { width:298.67px; flex-basis:298.67px; }
  .ds-cinema-home-row .ds-cinema-poster { height:168px; }
  .ds-cinema-home-row .ds-cinema-card[data-expanded] .ds-cinema-poster-title { font-size:26px; left:16px; max-width:210px; }
}
.ds-cinema-home-carousel [data-cinema-slide][hidden],.ds-cinema-carousel-controls[hidden] { display:none; }
.ds-cinema-home-carousel [data-cinema-slide]:not([hidden]) .ds-cinema-home-backdrop,.ds-cinema-home-carousel [data-cinema-slide]:not([hidden]) .ds-cinema-home-feature-info { animation:cinema-appear 220ms ease-out; }
@keyframes cinema-appear { from{opacity:.65}to{opacity:1} }
.ds-cinema-carousel-controls { display:flex; gap:12px; align-items:center; justify-content:flex-end; padding-top:16px; font-size:12px; color:hsl(var(--ink-secondary)); }
.ds-cinema-carousel-controls button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:40px; min-height:40px; background:hsl(var(--background)/.6); border:1px solid var(--hairline); border-radius:999px; padding:0 12px; }
.ds-cinema-carousel-controls button:hover { color:hsl(var(--foreground)); background:hsl(var(--foreground)/.06); }
.ds-cinema-carousel-controls button:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){.ds-cinema-home-carousel .ds-cinema-home-backdrop,.ds-cinema-home-carousel .ds-cinema-home-feature-info{animation:none!important}}

/* Static section headings share the Overview tab's type and underline. */
.ds-cinema-section-heading { border-bottom:1px solid var(--hairline); margin:0 0 24px; font-weight:400; }
.ds-cinema-section-heading>span { display:inline-flex; }

.ds-cinema-details>.ds-cinema-section { border-top:0; padding-top:0; }
.ds-cinema-utility-actions { display:flex; align-items:center; gap:12px; }
.ds-cinema-utility-actions .ds-cinema-round svg { display:block; width:1.25rem; height:1.25rem; stroke-width:2; }
.ds-cinema-favourited { color:hsl(var(--primary)); }
.ds-cinema-favourited>svg { fill:currentColor; }
.ds-cinema-round:focus-visible,.ds-cinema-avatar:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:3px; }
.ds-cinema-report { padding-block:0 40px; display:flex; justify-content:flex-end; }
@media(max-width:639px) {
  .ds-cinema-section-heading>span { font-size:11px; min-height:54px; }
  .ds-cinema-utility-actions { flex-basis:100%; }
}

.ds-cinema-fact-link { text-decoration:underline; text-decoration-color:hsl(var(--foreground)/.25); text-underline-offset:4px; }
.ds-cinema-fact-link:hover { color:hsl(var(--primary)); text-decoration-color:currentColor; }
.ds-cinema-fact-link:focus-visible,.ds-cinema-credits-toggle:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:4px; }
/* One SSR list, progressively clipped only when it is taller than the preview. */
.ds-cinema-credits { --credits-preview-height:240px; }
.ds-cinema-credits [data-credits-viewport] { transition:height 320ms cubic-bezier(.2,.7,.2,1); }
.ds-cinema-credits[data-enhanced] [data-credits-viewport] { overflow:hidden; }
.ds-cinema-credits[data-collapsed] [data-credits-viewport] { -webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent); mask-image:linear-gradient(#000 calc(100% - 72px),transparent); }
.ds-cinema-credits-toggle { display:flex; justify-content:center; align-items:center; gap:10px; margin:12px auto 0; padding:12px 24px; min-height:44px; color:hsl(var(--primary)); font-size:13px; }
.ds-cinema-credits-toggle[hidden] { display:none; }
.ds-cinema-credits-toggle:hover { text-decoration:underline; text-underline-offset:4px; }
.ds-cinema-credits-toggle[aria-expanded=true]>svg { transform:rotate(180deg); }
@media(prefers-reduced-motion:reduce) { .ds-cinema-credits [data-credits-viewport] { transition:none; } }

/* Series use the same page gutters and section headings as the film details. */
.ds-cinema-film-hero.ds-cinema-series-hero { min-height:clamp(560px,72vh,740px); }
.ds-cinema-series-hero .ds-cinema-content { padding-bottom:48px; }
.ds-cinema-episodes { padding-block:0 24px; }
.ds-cinema-episodes-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; border-bottom:1px solid var(--hairline); margin-bottom:24px; }
.ds-cinema-episodes-heading .ds-cinema-section-heading { border:0; margin:0; flex-shrink:0; }
.ds-cinema-season-picker { min-width:0; max-width:100%; margin-left:auto; }
.ds-cinema-season-tabs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding-block:8px; }
.ds-cinema-season-tab { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; min-height:40px; max-width:100%; padding:8px 16px; border-radius:999px; color:hsl(var(--ink-secondary)); font-size:12px; overflow-wrap:anywhere; }
.ds-cinema-season-tab:hover { background:hsl(var(--foreground)/.05); color:hsl(var(--foreground)); }
.ds-cinema-season-active { background:hsl(var(--foreground)/.1); color:hsl(var(--foreground)); }
.ds-cinema-season-tab:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:2px; }
.ds-cinema-season-select-wrap { display:none; }
.ds-cinema-season-select { max-width:100%; font-size:12px; }
.ds-cinema-episode-list { border-top:1px solid var(--hairline); }
.ds-cinema-episode-row { display:grid; grid-template-columns:clamp(180px,18vw,280px) minmax(0,1fr) auto; gap:24px; align-items:center; padding-block:24px; border-bottom:1px solid var(--hairline); }
.ds-cinema-episode-media { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:hsl(var(--foreground)/.04); }
.ds-cinema-episode-title { font-family:var(--font-heading); font-size:20px; font-weight:500; line-height:1.35; color:hsl(var(--foreground)); overflow-wrap:anywhere; }
.ds-cinema-episode-synopsis { margin-top:10px; max-width:680px; font-size:13px; line-height:1.75; color:hsl(var(--ink-secondary)); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
.ds-cinema-episode-action { display:flex; justify-content:flex-end; align-items:center; gap:8px; max-width:280px; }
@media(max-width:1000px) {
  .ds-cinema-episode-row { grid-template-columns:180px minmax(0,1fr) auto; gap:18px; }
  .ds-cinema-episode-action { max-width:180px; }
  .ds-cinema-episode-title { font-size:18px; }
}
@media(max-width:639px) {
  .ds-cinema-film-hero.ds-cinema-series-hero { min-height:0; }
  .ds-cinema-series-hero .ds-cinema-content { padding-bottom:32px; }
  .ds-cinema-episodes-heading { gap:8px 12px; }
  .ds-cinema-season-picker { max-width:calc(100% - 76px); }
  .ds-cinema-season-tabs { display:none; }
  .ds-cinema-season-select-wrap { display:block; }
  .ds-cinema-episode-row { grid-template-columns:112px minmax(0,1fr); gap:14px; padding-block:20px; align-items:start; }
  .ds-cinema-episode-media { border-radius:8px; }
  .ds-cinema-episode-title { font-size:16px; }
  .ds-cinema-episode-synopsis { font-size:12px; margin-top:6px; -webkit-line-clamp:2; }
  .ds-cinema-episode-action { grid-column:1/-1; max-width:100%; }
}

/* The expanded card owns its details; no detached caption beneath the rail. */
.ds-cinema-card-info { position:absolute; z-index:2; inset:auto 24px 18px; display:flex; flex-direction:column; gap:8px; color:hsl(var(--foreground)); pointer-events:none; }
.ds-cinema-card-info a { pointer-events:auto; }
.ds-cinema-card-info h3 { font-family:var(--font-heading); font-size:28px; font-weight:500; line-height:1.1; letter-spacing:-.025em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ds-cinema-card-info .ds-cinema-card-creator { font-size:10px; color:hsl(var(--foreground)/.7); }
.ds-cinema-card-info .ds-cinema-card-facts { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.ds-cinema-card-info .ds-cinema-meta { margin:0; gap:7px; font-size:10px; color:hsl(var(--foreground)/.8); }
.ds-cinema-card-info .ds-cinema-meta>span:not(:last-child)::after { margin-left:7px; }
.ds-cinema-card-info .ds-cinema-meta>span:first-child { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-cinema-card-info .ds-cinema-price { color:hsl(var(--primary)); font-size:11px; }
.ds-cinema-card-info .ds-cinema-region { font-size:11px; }
.ds-cinema-card-info .ds-cinema-formats { margin:0; gap:6px; }
.ds-cinema-card-info .ds-cinema-formats span { font-size:9px; background:hsl(var(--background)/.35); }
.ds-cinema-card-info .ds-cinema-card-synopsis { font-size:11px; line-height:1.5; color:hsl(var(--foreground)/.75); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ds-cinema-card-info .ds-cinema-view { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:11px; }
.ds-cinema-card-info a:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:3px; }
.ds-cinema-card:not([data-expanded]) .ds-cinema-card-info,
.ds-cinema-card:not([data-expanded]) .ds-cinema-expand,
.ds-cinema-card[data-expanded] .ds-cinema-poster-title,
.ds-cinema-card[data-expanded] .ds-cinema-poster-category { display:none; }
.ds-cinema-card[data-expanded] .ds-cinema-poster::after { background:linear-gradient(0deg,hsl(var(--background)/.98),hsl(var(--background)/.8) 35%,hsl(var(--background)/.1) 85%); }
.ds-cinema-expand { position:absolute; z-index:3; top:14px; right:54px; width:32px; height:32px; background:hsl(var(--background)/.65); }
.ds-cinema-card .ds-cinema-sound,.ds-cinema-card .ds-cinema-preview-play { top:14px; right:94px; bottom:auto; width:32px; height:32px; }
.ds-cinema-card .ds-cinema-poster-category { max-width:calc(100% - 28px); }
.ds-cinema-home-row .ds-cinema-card-info { inset:auto 16px 14px; gap:6px; }
.ds-cinema-home-row .ds-cinema-card-info h3 { font-size:23px; }
.ds-cinema-home-row .ds-cinema-card-creator,.ds-cinema-home-row .ds-cinema-card-synopsis,.ds-cinema-home-row .ds-cinema-view { display:none; }
.ds-cinema-catalogue-row { margin-bottom:28px; }
@media(max-width:639px) {
  .ds-cinema-card-info { inset:auto 16px 14px; gap:6px; }
  .ds-cinema-card-info h3 { font-size:23px; -webkit-line-clamp:1; }
  .ds-cinema-card-info .ds-cinema-card-creator,.ds-cinema-card-info .ds-cinema-card-synopsis { display:none; }
  .ds-cinema-card-info .ds-cinema-meta { font-size:9px; gap:5px; }
  .ds-cinema-card-info .ds-cinema-meta>span:first-child { max-width:150px; }
  .ds-cinema-card-info .ds-cinema-price { font-size:10px; }
  .ds-cinema-card-info .ds-cinema-formats span { font-size:8px; }
  .ds-cinema-home-row .ds-cinema-card-info h3 { font-size:20px; -webkit-line-clamp:1; }
}

/* Utility controls have their own breathing room beneath the region notice. */
.ds-cinema-film-copy [data-testid="notice-region-blocked"] { margin-bottom:24px; }

/* Public profiles use the existing film artwork; no separate cover upload. */
.ds-cinema-profile-hero { position:relative; isolation:isolate; background:radial-gradient(ellipse at 75% 0,hsl(var(--primary)/.12),transparent 65%); }
.ds-cinema-profile-art { position:absolute; z-index:-2; inset:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center 35%; object-position:center 35%; opacity:.4; -webkit-mask-image:linear-gradient(90deg,transparent,#000 75%),linear-gradient(#000,transparent); mask-image:linear-gradient(90deg,transparent,#000 75%),linear-gradient(#000,transparent); -webkit-mask-composite:source-in, xor; mask-composite:intersect; }
.ds-cinema-profile-intro { display:flex; align-items:center; gap:36px; padding-block:90px 60px; }
.ds-cinema-profile-intro>[data-testid=profile-avatar] { flex-shrink:0; width:144px; height:144px; box-shadow:0 12px 48px hsl(var(--background)/.4); }
.ds-cinema-profile-identity { min-width:0; max-width:850px; }
.ds-cinema-profile-identity h1 { font-family:var(--font-heading); font-size:clamp(36px,5vw,76px); line-height:1.08; font-weight:500; letter-spacing:-.035em; overflow-wrap:anywhere; }
.ds-cinema-profile-identity .ds-cinema-eyebrow { margin-bottom:18px; }
.ds-cinema-profile-roles { font-size:16px; line-height:1.8; color:hsl(var(--ink-secondary)); margin-top:20px; }
.ds-cinema-profile-meta { display:flex; flex-wrap:wrap; gap:10px 24px; font-size:13px; color:hsl(var(--ink-tertiary)); margin-top:16px; }
.ds-cinema-profile-meta>span { display:flex; align-items:center; gap:8px; }
.ds-cinema-profile-about { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:100px; padding-bottom:64px; }
.ds-cinema-profile-bio { white-space:pre-line; color:hsl(var(--ink-secondary)); font-size:15px; line-height:1.9; max-width:720px; overflow-wrap:anywhere; }
.ds-cinema-profile-links { display:flex; flex-direction:column; align-items:flex-start; gap:16px; color:hsl(var(--ink-secondary)); font-size:14px; }
.ds-cinema-profile-links a { display:flex; align-items:center; gap:12px; min-height:28px; overflow-wrap:anywhere; }
.ds-cinema-profile-links svg { flex-shrink:0; }
.ds-cinema-profile-links a:hover { color:hsl(var(--primary)); }
.ds-cinema-profile-links a:focus-visible { outline:2px solid hsl(var(--primary)); outline-offset:4px; }
.ds-cinema-profile-films { padding-bottom:64px; }
.ds-cinema-profile-films .ds-cinema-shelf { padding-bottom:48px; }
.ds-cinema-card-views { font-size:11px; color:hsl(var(--ink-secondary)); }
@media(max-width:1000px) { .ds-cinema-profile-about { gap:40px; } }
@media(max-width:639px) {
  .ds-cinema-profile-intro { flex-direction:column; align-items:flex-start; gap:24px; padding-block:150px 36px; }
  .ds-cinema-profile-intro>[data-testid=profile-avatar] { width:88px; height:88px; }
  .ds-cinema-profile-roles { font-size:13px; margin-top:16px; }
  .ds-cinema-profile-meta { font-size:12px; }
  .ds-cinema-profile-about { grid-template-columns:minmax(0,1fr); gap:24px; padding-bottom:40px; }
  .ds-cinema-profile-bio { font-size:13px; }
}
/*
 * Component layer: shared surfaces, edges and media frames. Recipes in
 * recipes.ts attach these classes; nothing else should.
 *
 * Panels use a flat tonal fill and quiet hairline. Showcase media keeps its
 * thick blue gradient frame. No resting drop shadows on panels and no backdrop blur.
 */

*, ::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: quiet cinema surface ────────────────────────────────────
     A flat navy tint separates sections without the old glossy top edge.
     Keep the masked ring so padding and layout do not change. Existing
     emphasis and semantic edge colours still work through the same knobs. */
  .ds-panel {
    background: hsl(var(--foreground) / 0.025);
    box-shadow: none;
  }
  .ds-panel::before {
    background: rgb(var(--edge-accent) / calc(var(--edge-line) * 0.4));
  }

  /* 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);
    }
  }

  /* ── Grow: the whole card scales up (Netflix style) ─────────────────
     Poster and video cards grow as one piece — frame and picture together,
     never the picture inside a still frame: scale 1.04 with a 4px lift over
     the slow duration, while the card rises above its neighbours (z-index
     steps up at once and steps back down only after the shrink, so a card on
     its way back is never painted under the next one). On a panel the shadow
     deepens and a 1px white ring joins the lit edge (both under the overlay
     brightening `.ds-interactive` already gives). Reduced motion: no
     transform, the brightening and shadow still change. Hover and keyboard
     focus inside the card behave the same. Declared after `.ds-interactive`
     on purpose: at equal specificity the later rule wins the transform. */
  .ds-grow,
  .ds-panel.ds-grow {
    position: relative;
    z-index: 0;
    transition:
      box-shadow var(--duration-slow) var(--ease-out),
      z-index 0s linear var(--duration-slow);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ds-grow,
    .ds-panel.ds-grow {
      transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out),
        z-index 0s linear var(--duration-slow);
    }
    .ds-grow:hover,
    .ds-grow:focus-within {
      transform: translateY(-4px) scale(1.04);
    }
  }
  .ds-panel.ds-grow:hover,
  .ds-panel.ds-grow:focus-within {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.05),
      0 24px 48px -20px rgb(0 0 0 / 0.45);
  }
  /* Last on purpose: the raised stacking and its zero delay must beat the resting transition above. */
  .ds-grow:hover,
  .ds-grow:focus-within,
  .ds-panel.ds-grow:hover,
  .ds-panel.ds-grow:focus-within {
    z-index: 1;
    transition-delay: 0s;
  }

  .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: the original blue gradient media frame ──────────────
     Kept separate from .ds-panel so section/card refinements never remove
     these surrounds. 10px on phones, 14px from sm; concentric 20px windows.
     Both accent and wash bands are restored from the approved design. */
  .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);
  }

  /* ── Header menu panel (the marketing groups' dropdowns): the bar's grade
     over the same near-opaque page tint, hairline all round. No blur. */
  .ds-menu {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.03)),
      hsl(var(--background) / 0.96);
    border: 1px solid var(--hairline);
  }

  /* ── 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;
}
.invisible {
  visibility: hidden;
}
.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-10 {
  bottom: 2.5rem;
}
.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-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-\[12\] {
  order: 12;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.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;
}
.row-start-2 {
  grid-row-start: 2;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.mx-\[6\%\] {
  margin-left: 6%;
  margin-right: 6%;
}
.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;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.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;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-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-7 {
  margin-top: 1.75rem;
}
.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;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.line-clamp-\[12\] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
}
.\!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\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}
.aspect-\[21\/9\] {
  aspect-ratio: 21/9;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[9\/19\] {
  aspect-ratio: 9/19;
}
.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-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.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-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.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-\[calc\(100dvh-100\%\)\] {
  height: calc(100dvh - 100%);
}
.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-0 {
  min-height: 0px;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-64 {
  min-height: 16rem;
}
.min-h-\[1\.25rem\] {
  min-height: 1.25rem;
}
.min-h-\[1\.75rem\] {
  min-height: 1.75rem;
}
.min-h-\[1rem\] {
  min-height: 1rem;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}
.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-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-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-72 {
  width: 18rem;
}
.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-\[32rem\] {
  width: 32rem;
}
.w-\[39\%\] {
  width: 39%;
}
.w-\[46\%\] {
  width: 46%;
}
.w-\[640px\] {
  width: 640px;
}
.w-\[720px\] {
  width: 720px;
}
.w-\[800px\] {
  width: 800px;
}
.w-\[900px\] {
  width: 900px;
}
.w-\[min\(36rem\2c 80vw\)\] {
  width: min(36rem, 80vw);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[36rem\] {
  min-width: 36rem;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[40rem\] {
  min-width: 40rem;
}
.min-w-\[48rem\] {
  min-width: 48rem;
}
.min-w-\[4ch\] {
  min-width: 4ch;
}
.min-w-\[9rem\] {
  min-width: 9rem;
}
.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-\[10rem\] {
  max-width: 10rem;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[4\.5rem\] {
  max-width: 4.5rem;
}
.max-w-\[60vw\] {
  max-width: 60vw;
}
.max-w-\[70\%\] {
  max-width: 70%;
}
.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-prose {
  max-width: 65ch;
}
.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 {
  flex-shrink: 1;
}
.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));
}
.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.scroll-mt-28 {
  scroll-margin-top: 7rem;
}
.scroll-px-6 {
  scroll-padding-left: 1.5rem;
  scroll-padding-right: 1.5rem;
}
.list-outside {
  list-style-position: outside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.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;
}
.grid-cols-\[minmax\(0\2c 1fr\)_7\.5rem\] {
  grid-template-columns: minmax(0,1fr) 7.5rem;
}
.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: 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-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.justify-items-end {
  justify-items: end;
}
.justify-items-center {
  justify-items: center;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-16 {
  gap: 4rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-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-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.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;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.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-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-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-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-x-clip {
  overflow-x: clip;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.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-\[10px\] {
  border-radius: 10px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.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-b-md {
  border-bottom-right-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-b-sm {
  border-bottom-right-radius: calc(var(--radius) - 4px);
  border-bottom-left-radius: calc(var(--radius) - 4px);
}
.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-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.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-t-0 {
  border-top-width: 0px;
}
.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-background\/95 {
  background-color: hsl(var(--background) / 0.95);
}
.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-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-foreground {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary-foreground) / 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-panel {
  background-color: var(--surface-panel);
}
.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-\[\#1c1a17\] {
  --tw-gradient-from: #1c1a17 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(28 26 23 / 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\/35 {
  --tw-gradient-from: hsl(var(--primary) / 0.35) 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-secondary\/50 {
  --tw-gradient-from: hsl(var(--secondary) / 0.5) 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-\[\#2a2622\] {
  --tw-gradient-to: rgb(42 38 34 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2a2622 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/40 {
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.4) 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-secondary\/20 {
  --tw-gradient-to: hsl(var(--secondary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--secondary) / 0.2) 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-\[\#0f0e0c\] {
  --tw-gradient-to: #0f0e0c 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-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-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-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-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-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.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-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.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-24 {
  padding-right: 6rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.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-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.align-\[-2px\] {
  vertical-align: -2px;
}
.align-\[-3px\] {
  vertical-align: -3px;
}
.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-sm\/none {
  font-size: 0.875rem;
  line-height: 1;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.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-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 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-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.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\/40 {
  color: rgb(255 255 255 / 0.4);
}
.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;
}
.decoration-hairline {
  text-decoration-color: var(--hairline);
}
.decoration-primary\/40 {
  text-decoration-color: hsl(var(--primary) / 0.4);
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.caret-primary {
  caret-color: hsl(var(--primary) / 1);
}
.accent-foreground {
  accent-color: hsl(var(--foreground) / 1);
}
.accent-primary {
  accent-color: hsl(var(--primary) / 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);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary\/40 {
  --tw-ring-color: hsl(var(--primary) / 0.4);
}
.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}
.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 {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-\[background-color\2c border-color\2c box-shadow\] {
  transition-property: background-color,border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\2c box-shadow\2c transform\2c opacity\] {
  transition-property: background-color,border-color,color,box-shadow,transform,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\] {
  transition-property: background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\] {
  transition-property: background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c padding\2c border-color\] {
  transition-property: background-color,padding,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\] {
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\] {
  transition-property: border-color,box-shadow;
  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-\[opacity\2c transform\2c visibility\] {
  transition-property: opacity,transform,visibility;
  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;
}
.\[scrollbar-width\:thin\] {
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------------------
   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); }
}

/* ---------------------------------------------------------------------------
   /report form. The inline script marks the form [data-report-js] before the
   three branch panels are parsed, so with JavaScript only the chosen branch
   shows; without it all three render stacked. */
[data-report-js] [data-report-panel]:not([data-report-active]) { display: none; }

/* ---------------------------------------------------------------------------
   /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));
}

/* ---------------------------------------------------------------------------
   Film quick look (views/marketing/partials/film-card-slot.ejs and
   film-quick-look-panel.ejs; client/marketing/homepage-film-row.ts) on the
   homepage film row (film-row.ejs) and Discover's card groups. The row itself
   is the plain scroll-snap row of poster cards; the prev/next arrows stay
   hidden until the script finds the row wider than its box (the button
   recipe's inline-flex would otherwise beat the hidden attribute). The panel
   is ONE fixed element per page the script moves to <body>, sizes
   (--quick-look-width) and places per card;
   it grows in from the card over the slow duration (no transform under
   reduced motion) and the trailer fades in over the still once it is actually
   playing, so a failed or absent trailer leaves the still exactly as it was. */
.film-row-arrow[hidden] { display: none; }
.film-quick-look {
  position: fixed;
  z-index: 60;
  width: var(--quick-look-width, 22rem);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.film-quick-look[hidden] { display: none; }
.film-quick-look[data-open] { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .film-quick-look { transition: none; transform: none; }
}
.film-quick-look-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: hsl(var(--background)); }
.film-quick-look-still { position: absolute; inset: 0; display: block; }
.film-quick-look-still img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* A poster standing in for a missing backdrop: keep the top of the artwork (titles sit there). */
.film-quick-look-still img.film-quick-look-poster { -o-object-position: center 20%; object-position: center 20%; }
.film-quick-look-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: hsl(var(--ink-muted)); }
.film-quick-look-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.film-quick-look-video[data-playing] { opacity: 1; }
/* Over a moving picture the tinted tag needs a solid backing (same scrim as the mute button, no blur). */
.film-quick-look-tag { position: absolute; left: 0.75rem; top: 0.75rem; border-color: rgb(255 255 255 / 0.3); background: rgb(0 0 0 / 0.6); color: #fff; }
.film-quick-look-tag[hidden], .film-quick-look-mute[hidden] { display: none; }
.film-quick-look-mute {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.3);
  background-color: rgb(0 0 0 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  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-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}
.film-quick-look-mute:hover {
  background-color: rgb(0 0 0 / 0.8);
}
.film-quick-look-mute:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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);
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.film-quick-look-mute [hidden] { display: none; }
.film-quick-look-body { padding: 1rem 1.25rem 1.25rem; }

/* ---------------------------------------------------------------------------
   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-delay: var(--demo-delay, 0s);
    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; }
/* Stagger the homepage's three access stories left to right. Other placements
   of these shared demos keep their immediate start. */
#on-demand-films [data-access-demo="rent"] { --demo-delay: 3s; }
#on-demand-films [data-access-demo="buy"] { --demo-delay: 6s; }

/* --- 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-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;
}
/* Ghost video/audio cards reach the page with the browser's native player
   (the sanitizer removes Ghost's button/range player and renames the card
   hooks so cards.min.css/js leave them alone), so the layout lives here. */
.article-body .article-video-card,
.article-body .article-audio-card {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.article-body .article-video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.article-body .article-video-card video {
  display: block;
  height: auto;
  width: 100%;
  border-radius: 0.75rem;
}
.article-body .article-audio-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  padding: 0.75rem;
}
.article-body .article-audio-card .kg-audio-thumbnail {
  margin: 0px;
  height: 5rem;
  width: 5rem;
  min-width: 5rem;
  border-radius: var(--radius);
  -o-object-fit: cover;
     object-fit: cover;
}
.article-body .article-audio-card .kg-audio-player-container {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
}
.article-body .article-audio-card .kg-audio-title {
  order: -9999;
  margin: 0px;
  padding: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.article-body .article-audio-card audio {
  display: block;
  width: 100%;
}
.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); }
}
.marker\:text-ink-tertiary *::marker {
  color: hsl(var(--ink-tertiary) );
}
.marker\:text-ink-tertiary::marker {
  color: hsl(var(--ink-tertiary) );
}
.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;
}
.after\:rounded-\[inherit\]::after {
  content: var(--tw-content);
  border-radius: inherit;
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
.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-primary\/\[0\.12\]:hover {
  background-color: hsl(var(--primary) / 0.12);
}
.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\:decoration-primary:hover {
  text-decoration-color: hsl(var(--primary) / 1);
}
.hover\:shadow-glow-hover:hover {
  --tw-shadow: var(--glow-primary-hover);
  --tw-shadow-colored: var(--glow-primary-hover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\: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\:underline:focus-visible {
  text-decoration-line: underline;
}
.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-inset:focus-visible {
  --tw-ring-inset: inset;
}
.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;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.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\/nav:focus-within .group-focus-within\/nav\:visible {
  visibility: visible;
}
.group\/nav:focus-within .group-focus-within\/nav\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/nav:focus-within .group-focus-within\/nav\: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\:border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.group\/nav:focus-within .group-focus-within\/nav\:opacity-100 {
  opacity: 1;
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}
.group:focus-within .group-focus-within\: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);
}
.group\/nav:hover .group-hover\/nav\:visible {
  visibility: visible;
}
.group\/nav:hover .group-hover\/nav\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\: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\/nav:hover .group-hover\/nav\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-primary\/60 {
  border-color: hsl(var(--primary) / 0.6);
}
.group:hover .group-hover\:border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.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\/nav:hover .group-hover\/nav\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\: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);
}
.has-\[\:checked\]\:border-primary\/40:has(:checked) {
  border-color: hsl(var(--primary) / 0.4);
}
.has-\[\:checked\]\:bg-primary\/\[0\.08\]:has(:checked) {
  background-color: hsl(var(--primary) / 0.08);
}
.has-\[\:focus-visible\]\:ring-2:has(: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);
}
.has-\[\:focus-visible\]\:ring-ring:has(:focus-visible) {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-40[aria-disabled="true"] {
  opacity: 0.4;
}
.aria-pressed\:bg-white\/10[aria-pressed="true"] {
  background-color: rgb(255 255 255 / 0.1);
}
.aria-pressed\:text-ink[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--ink) / var(--tw-text-opacity, 1));
}
.aria-pressed\:shadow-\[inset_0_1px_0_rgb\(255_255_255_\/_0\.08\)\][aria-pressed="true"] {
  --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);
}
@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));
  }
}
@media not all and (min-width: 640px) {
  .max-sm\:grid {
    display: grid;
  }
  .max-sm\:w-full {
    width: 100%;
  }
  .max-sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .max-sm\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .max-sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
@media (min-width: 640px) {
  .sm\:not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }
  .sm\:bottom-16 {
    bottom: 4rem;
  }
  .sm\:bottom-6 {
    bottom: 1.5rem;
  }
  .sm\:right-6 {
    right: 1.5rem;
  }
  .sm\:top-\[232px\] {
    top: 232px;
  }
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:col-start-auto {
    grid-column-start: auto;
  }
  .sm\:row-start-auto {
    grid-row-start: auto;
  }
  .sm\:mb-0 {
    margin-bottom: 0px;
  }
  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }
  .sm\:mb-4 {
    margin-bottom: 1rem;
  }
  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:mt-2 {
    margin-top: 0.5rem;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex {
    display: flex;
  }
  .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\:h-16 {
    height: 4rem;
  }
  .sm\:h-20 {
    height: 5rem;
  }
  .sm\:h-64 {
    height: 16rem;
  }
  .sm\:w-16 {
    width: 4rem;
  }
  .sm\:w-36 {
    width: 9rem;
  }
  .sm\:w-44 {
    width: 11rem;
  }
  .sm\:w-48 {
    width: 12rem;
  }
  .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-none {
    max-width: none;
  }
  .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-\[1\.2fr_1fr\] {
    grid-template-columns: 1.2fr 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\:grid-cols-\[max-content_1fr\] {
    grid-template-columns: max-content 1fr;
  }
  .sm\:grid-cols-\[minmax\(0\2c 14rem\)_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,14rem) minmax(0,1fr) auto;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-wrap {
    flex-wrap: wrap;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-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-6 {
    gap: 1.5rem;
  }
  .sm\:gap-7 {
    gap: 1.75rem;
  }
  .sm\:self-auto {
    align-self: auto;
  }
  .sm\:whitespace-normal {
    white-space: normal;
  }
  .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-5 {
    padding: 1.25rem;
  }
  .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\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .sm\:pr-12 {
    padding-right: 3rem;
  }
  .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-\[1\.75rem\] {
    font-size: 1.75rem;
  }
  .sm\:text-\[15px\] {
    font-size: 15px;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .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\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
  .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-32 {
    padding-top: 8rem;
  }
  .md\:pt-40 {
    padding-top: 10rem;
  }
  .md\:text-right {
    text-align: right;
  }
  .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-lg\/none {
    font-size: 1.125rem;
    line-height: 1;
  }
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }
  .lg\:top-24 {
    top: 6rem;
  }
  .lg\:top-28 {
    top: 7rem;
  }
  .lg\:order-1 {
    order: 1;
  }
  .lg\:order-2 {
    order: 2;
  }
  .lg\:order-first {
    order: -9999;
  }
  .lg\:order-last {
    order: 9999;
  }
  .lg\:col-start-1 {
    grid-column-start: 1;
  }
  .lg\:col-start-2 {
    grid-column-start: 2;
  }
  .lg\:row-span-2 {
    grid-row: span 2 / span 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\:h-72 {
    height: 18rem;
  }
  .lg\:h-\[26rem\] {
    height: 26rem;
  }
  .lg\:w-48 {
    width: 12rem;
  }
  .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-5 {
    grid-template-columns: repeat(5, 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-\[1\.1fr_1fr\] {
    grid-template-columns: 1.1fr 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\:grid-cols-\[280px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 280px minmax(0,1fr);
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\] {
    grid-template-columns: minmax(0,1fr) 320px;
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_380px\] {
    grid-template-columns: minmax(0,1fr) 380px;
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.3fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 26rem\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,26rem);
  }
  .lg\:grid-cols-\[minmax\(0\2c 5fr\)_minmax\(0\2c 6fr\)\] {
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  }
  .lg\:grid-rows-\[auto_1fr_auto\] {
    grid-template-rows: auto 1fr auto;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:items-end {
    align-items: flex-end;
  }
  .lg\:justify-start {
    justify-content: flex-start;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:gap-14 {
    gap: 3.5rem;
  }
  .lg\:gap-16 {
    gap: 4rem;
  }
  .lg\:gap-8 {
    gap: 2rem;
  }
  .lg\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }
  .lg\:space-y-28 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(7rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(7rem * var(--tw-space-y-reverse));
  }
  .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\:grid-cols-6 {
    grid-template-columns: repeat(6, 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\>li\]\:mb-1\.5>ol>li {
  margin-bottom: 0.375rem;
}
.\[\&\>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;
}
.\[\&\[hidden\]\]\:hidden[hidden] {
  display: none;
}
.\[\&_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\]\:fill-current svg {
  fill: currentColor;
}
.\[\&_svg\]\:text-primary svg {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.js .\[\.js_\&\]\:block {
  display: block;
}