/*
 * Stylesheet for the server-rendered public film page (views/films/**) and
 * the OAuth consent pages (views/oauth/**). Compiled separately from the SPA
 * bundle by script/marketingCss.ts with tailwind.films.config.ts. Tokens, the
 * page base and the component layer come from the shared design system
 * (shared/design); the preset injects the :root variables, so nothing here
 * redeclares a colour or radius. What remains is film-page-only: the page's
 * own heading type, the native <dialog> backdrop and the pin that keeps the
 * locked trailer overlay exactly as it was. Imports must come first (CSS
 * rule), the Tailwind directives follow.
 */
/* Base layer: the page itself. Tokens come from the preset's :root block. */
/* 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;
    }
  }
  /* The film page's type is kept as the owner approved it: Outfit at 600 with
     regular tracking and natural wrapping, not the display tweaks the shared
     base gives marketing and app headings. (The OAuth screens set their type
     through recipe classes, which take precedence over this rule.) */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: normal;
    text-wrap: wrap;
  }

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

  /* The Report dialog (views/films/partials/report-dialog.ejs) also opens
     without JavaScript: its id is the Report link's hash, so :target shows it
     in place, tinted like the modal backdrop would be. */
  dialog[data-report-dialog]:target {
    display: grid;
    background-color: hsl(222 47% 6% / 0.8);
  }

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

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

  /* ── Panel: 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-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.m-0 {
  margin: 0px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.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-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[2\/3\] {
  aspect-ratio: 2/3;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-24 {
  width: 6rem;
  height: 6rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-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-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[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;
}
.max-h-none {
  max-height: none;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-6 {
  width: 1.5rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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 spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.list-outside {
  list-style-position: outside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.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-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-y-1 {
  row-gap: 0.25rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.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-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hairline);
}
.self-stretch {
  align-self: stretch;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[calc\(var\(--radius-control\)-4px\)\] {
  border-radius: calc(var(--radius-control) - 4px);
}
.rounded-card {
  border-radius: var(--radius-card);
}
.rounded-control {
  border-radius: var(--radius-control);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-panel {
  border-radius: var(--radius-panel);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4);
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-hairline {
  border-color: var(--hairline);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}
.border-purple-400\/30 {
  border-color: rgb(192 132 252 / 0.3);
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-background {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}
.bg-background\/80 {
  background-color: hsl(var(--background) / 0.8);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/\[0\.08\] {
  background-color: rgb(16 185 129 / 0.08);
}
.bg-hairline {
  background-color: var(--hairline);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.15);
}
.bg-primary\/\[0\.08\] {
  background-color: hsl(var(--primary) / 0.08);
}
.bg-purple-500\/10 {
  background-color: rgb(168 85 247 / 0.1);
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-surface-frame {
  background-color: var(--surface-frame);
}
.bg-surface-well {
  background-color: var(--surface-well);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-brand {
  background-image: var(--gradient-brand);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-primary\/\[0\.16\] {
  --tw-gradient-from: hsl(var(--primary) / 0.16) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/\[0\.18\] {
  --tw-gradient-from: rgb(255 255 255 / 0.18) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary\/\[0\.07\] {
  --tw-gradient-to: hsl(var(--primary) / 0.07) var(--tw-gradient-to-position);
}
.to-white\/0 {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
}
.bg-\[right_0\.75rem_center\] {
  background-position: right 0.75rem center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentColor;
}
.stroke-current {
  stroke: currentColor;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-\[family-name\:ui-monospace\2c SFMono-Regular\2c Menlo\2c Consolas\2c monospace\] {
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.font-display {
  font-family: Outfit, sans-serif;
}
.font-heading {
  font-family: Outfit, sans-serif;
}
.font-mono {
  font-family: Outfit, sans-serif;
}
.font-sans {
  font-family: Inter, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-ink {
  --tw-text-opacity: 1;
  color: hsl(var(--ink) / var(--tw-text-opacity, 1));
}
.text-ink-muted {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-muted) / var(--tw-text-opacity, 1));
}
.text-ink-secondary {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-secondary) / var(--tw-text-opacity, 1));
}
.text-ink-tertiary {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-tertiary) / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.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-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.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-\[inset_0_1px_0_rgb\(255_255_255_\/_0\.08\)\] {
  --tw-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-field {
  --tw-shadow: var(--shadow-field);
  --tw-shadow-colored: var(--shadow-field);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-field-focus {
  --tw-shadow: var(--glow-field);
  --tw-shadow-colored: var(--glow-field);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-float {
  --tw-shadow: var(--shadow-float);
  --tw-shadow-colored: var(--shadow-float);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-frame {
  --tw-shadow: var(--shadow-frame);
  --tw-shadow-colored: var(--shadow-frame);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow {
  --tw-shadow: var(--glow-primary);
  --tw-shadow-colored: var(--glow-primary);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-hover {
  --tw-shadow: var(--glow-primary-hover);
  --tw-shadow-colored: var(--glow-primary-hover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-well {
  --tw-shadow: var(--shadow-well);
  --tw-shadow-colored: var(--shadow-well);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_28px_rgba\(63\2c 212\2c 253\2c 0\.25\)\] {
  --tw-drop-shadow: drop-shadow(0 0 28px rgba(63,212,253,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-\[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-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-base {
  transition-duration: var(--duration-base);
}
.duration-fast {
  transition-duration: var(--duration-fast);
}
.duration-slow {
  transition-duration: var(--duration-slow);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-out-soft {
  transition-timing-function: var(--ease-out);
}
  /* The hero heading's gradient (pinned brand element): the brand gradient token. */
  .text-gradient {
    background-image: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Scroll/load reveals: the existing CSS approach, movement dropped under reduced motion. */
  @keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  .reveal {
  animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      animation: none;
    }
  }
.\[--edge-accent\:248_113_113\] {
  --edge-accent: 248 113 113;
}
.\[--edge-accent\:251_191_36\] {
  --edge-accent: 251 191 36;
}
.\[--edge-accent\:52_211_153\] {
  --edge-accent: 52 211 153;
}
.\[--frame-inner\:var\(--radius-card\)\] {
  --frame-inner: var(--radius-card);
}
.marker\:text-ink-tertiary *::marker {
  color: hsl(var(--ink-tertiary) );
}
.marker\:text-ink-tertiary::marker {
  color: hsl(var(--ink-tertiary) );
}
.placeholder\:text-ink-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-muted) / var(--tw-text-opacity, 1));
}
.placeholder\:text-ink-muted::placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--ink-muted) / var(--tw-text-opacity, 1));
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.open\:grid[open] {
  display: grid;
}
.hover\:border-primary\/50:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.hover\:border-primary\/60:hover {
  border-color: hsl(var(--primary) / 0.6);
}
.hover\:border-red-400\/30:hover {
  border-color: rgb(248 113 113 / 0.3);
}
.hover\:border-white\/15:hover {
  border-color: rgb(255 255 255 / 0.15);
}
.hover\: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-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\.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\:opacity-100:hover {
  opacity: 1;
}
.hover\:shadow-glow-hover:hover {
  --tw-shadow: var(--glow-primary-hover);
  --tw-shadow-colored: var(--glow-primary-hover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:border-primary\/60:focus-visible {
  border-color: hsl(var(--primary) / 0.6);
}
.focus-visible\:shadow-field-focus:focus-visible {
  --tw-shadow: var(--glow-field);
  --tw-shadow-colored: var(--glow-field);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.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\/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\: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\/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);
}
@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 (min-width: 640px) {
  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }
  .sm\:bottom-0 {
    bottom: 0px;
  }
  .sm\:bottom-6 {
    bottom: 1.5rem;
  }
  .sm\:right-0 {
    right: 0px;
  }
  .sm\:right-6 {
    right: 1.5rem;
  }
  .sm\:top-auto {
    top: auto;
  }
  .sm\:block {
    display: block;
  }
  .sm\:size-32 {
    width: 8rem;
    height: 8rem;
  }
  .sm\:w-16 {
    width: 4rem;
  }
  .sm\:w-36 {
    width: 9rem;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:max-w-sm {
    max-width: 24rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-col {
    flex-direction: column;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-start {
    justify-content: flex-start;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-center {
    justify-content: center;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-7 {
    gap: 1.75rem;
  }
  .sm\:p-10 {
    padding: 2.5rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:p-6 {
    padding: 1.5rem;
  }
  .sm\:p-8 {
    padding: 2rem;
  }
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .sm\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }
}
@media (min-width: 768px) {
  .md\:w-\[26rem\] {
    width: 26rem;
  }
  .md\:max-w-2xl {
    max-width: 42rem;
  }
  .md\:max-w-\[420px\] {
    max-width: 420px;
  }
  .md\:shrink-0 {
    flex-shrink: 0;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}
@media (min-width: 1280px) {
  .xl\:grid {
    display: grid;
  }
  .xl\:hidden {
    display: none;
  }
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
}
@media (min-width: 1536px) {
  .\32xl\:gap-6 {
    gap: 1.5rem;
  }
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:mt-0\.5 svg {
  margin-top: 0.125rem;
}
.\[\&_svg\]\:size-10 svg {
  width: 2.5rem;
  height: 2.5rem;
}
.\[\&_svg\]\:size-3\.5 svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:size-5 svg {
  width: 1.25rem;
  height: 1.25rem;
}
.\[\&_svg\]\:size-6 svg {
  width: 1.5rem;
  height: 1.5rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_svg\]\:translate-x-px svg {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_svg\]\:fill-current svg {
  fill: currentColor;
}
.\[\&_svg\]\:text-primary svg {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}