/* ============================================================
   Veyron Studio — Cinematic Web System
   The native iOS app is the visual source of truth. This layer is
   intentionally loaded after main.css so legacy DOM contracts remain
   stable while every page inherits the same brand geometry and depth.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  --bg: #080706;
  --bg-2: #100d0b;
  --bg-3: #1a130f;
  --card: rgba(24, 19, 15, 0.78);
  --card-2: rgba(34, 27, 22, 0.72);
  --card-strong: #17120f;
  --input-bg: rgba(10, 8, 7, 0.74);
  --sidebar: rgba(11, 9, 8, 0.84);
  --glass: rgba(255, 255, 255, 0.065);
  --glass-2: rgba(255, 255, 255, 0.105);
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --border: rgba(255, 242, 229, 0.15);
  --border-2: rgba(255, 242, 229, 0.085);
  --border-strong: rgba(255, 177, 118, 0.34);
  --brand: #fd6a01;
  --brand-hover: #ff7a1d;
  --primary: #fd6a01;
  --primary-2: #ffad72;
  --primary-soft: rgba(253, 106, 1, 0.15);
  --accent: #ff8b3d;
  --accent-text: #ffc095;
  --accent-soft: rgba(255, 139, 61, 0.13);
  --radius-xs: 9px;
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --s1: 6px;
  --s2: 10px;
  --s3: 16px;
  --s4: 20px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 56px;
  --s9: 72px;
  --rail-w: 106px;
  --topbar-h: 72px;
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.32);
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
  --shadow-pop: 0 34px 100px rgba(0, 0, 0, 0.62);
  --ease: cubic-bezier(0.2, 0.72, 0.28, 1);
  --t: 0.24s var(--ease);
  --cinematic: 0.42s cubic-bezier(0.18, 0.82, 0.24, 1);
}

:root[data-theme="light"] {
  --bg: #f5f0e9;
  --bg-2: #fffaf4;
  --bg-3: #e9dfd4;
  --card: rgba(255, 252, 248, 0.86);
  --card-2: rgba(250, 244, 237, 0.88);
  --card-strong: #fffaf4;
  --input-bg: rgba(255, 253, 250, 0.9);
  --sidebar: rgba(255, 250, 244, 0.88);
  --glass: rgba(52, 35, 22, 0.055);
  --glass-2: rgba(52, 35, 22, 0.09);
  --text: #24160e;
  --text-2: #65574c;
  --text-3: #8a7b6f;
  --border: rgba(62, 38, 23, 0.15);
  --border-2: rgba(62, 38, 23, 0.085);
  --border-strong: rgba(194, 75, 0, 0.34);
  --primary: #c64d00;
  --primary-2: #9d3900;
  --primary-soft: rgba(253, 106, 1, 0.11);
  --accent: #b84700;
  --accent-text: #9b3700;
  --accent-soft: rgba(184, 71, 0, 0.1);
  --shadow-soft: 0 12px 30px rgba(67, 42, 23, 0.11);
  --shadow: 0 24px 64px rgba(67, 42, 23, 0.16);
  --shadow-pop: 0 32px 90px rgba(67, 42, 23, 0.22);
}

[dir="ltr"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body {
  background-color: var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: min(1180px, 92vw) auto;
  background-position: 82% 8%;
  background-repeat: no-repeat;
  opacity: 0.16;
}

:root[data-theme="light"] body::before {
  background-image: url("../img/cinematic/veyron-card-background.png");
  opacity: 0.055;
}

/* Shared surfaces ------------------------------------------------------- */
.card,
.prompt-console,
.public-info-card,
.studio-sheet,
.modal,
.menu,
.empty {
  border-color: var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}

.card {
  border-radius: var(--radius);
}

.btn {
  border-radius: var(--radius-sm);
  min-height: 46px;
  transition-duration: 0.24s;
}

.btn-primary {
  border-color: rgba(255, 195, 151, 0.36);
  background: var(--brand);
  color: #271004;
  box-shadow: 0 12px 30px rgba(253, 106, 1, 0.22);
}

.btn-primary:hover {
  background: var(--brand-hover);
  color: #271004;
  box-shadow: 0 16px 38px rgba(253, 106, 1, 0.3);
}

.input,
select.input,
textarea.input,
.studio-command,
.prompt-input-wrap {
  border-radius: var(--radius-sm);
  background-color: var(--input-bg);
  border-color: var(--border);
}

.input:focus,
.studio-command:focus-within,
.prompt-input-wrap:focus-within {
  border-color: var(--brand);
  outline: 2px solid rgba(253, 106, 1, 0.28);
  outline-offset: 2px;
  box-shadow: none;
}

.page-title,
.workspace-panel-head h1,
.cinema-copy h1 {
  letter-spacing: -0.035em;
}

[dir="rtl"] .page-title,
[dir="rtl"] .workspace-panel-head h1,
[dir="rtl"] .cinema-copy h1 {
  letter-spacing: 0;
}

.section-kicker,
.lp-kicker {
  border-color: rgba(253, 106, 1, 0.28);
  background: rgba(253, 106, 1, 0.12);
  color: var(--primary-2);
  letter-spacing: 0.06em;
}

.empty {
  min-height: 320px;
  border-style: solid;
}

.empty .e-icon,
.result-idle-icon,
.idle-icon {
  border-radius: 22px;
  background-color: var(--primary-soft);
  border-color: rgba(253, 106, 1, 0.24);
}

/* App shell ------------------------------------------------------------- */
.app-rail {
  inset-block: 14px;
  inset-inline-start: 14px;
  height: calc(100svh - 28px);
  border: 1px solid var(--border);
  border-radius: 30px;
  background-color: var(--sidebar);
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  padding: 14px 10px;
  overflow: visible;
}

.app-rail > a,
.app-rail > button,
.rail-create {
  min-height: 56px;
  border-radius: 18px;
  color: var(--text-2);
}

.app-rail > a:hover,
.app-rail > button:hover,
.rail-create:hover {
  background-color: var(--glass-2);
  color: var(--text);
}

.app-rail > a.active,
.app-rail .rail-create.active {
  color: var(--text);
  background-color: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(253, 106, 1, 0.22);
}

.app-rail > a.active::before {
  inset-inline-start: -11px;
  height: 30px;
  width: 4px;
}

.rail-brand {
  padding-block: 6px;
  margin-block-end: 8px;
}

.rail-create-wrap {
  position: relative;
  width: 100%;
}

.rail-create {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.rail-create > svg {
  width: 24px;
  height: 24px;
}

.create-menu {
  position: absolute;
  inset-inline-start: calc(100% + 16px);
  inset-block-start: 50%;
  width: 250px;
  transform: translateY(-38%);
  padding: 10px;
  border-radius: 22px;
}

.create-menu a {
  min-height: 48px;
  border-radius: 14px;
}

.topbar {
  min-height: var(--topbar-h);
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
  border-block-end-color: var(--border-2);
  backdrop-filter: blur(26px) saturate(1.16);
  -webkit-backdrop-filter: blur(26px) saturate(1.16);
}

.topbar-context {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-context span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--brand);
  box-shadow: 0 0 18px rgba(253, 106, 1, 0.72);
}

.sidebar {
  background-color: var(--card-strong);
  border-inline-end-color: var(--border);
}

.sidebar.open {
  box-shadow: var(--shadow-pop);
}

.sidebar-user-strip,
.upgrade-card {
  background-color: var(--card-2);
  border-radius: 20px;
}

.mobile-dock {
  display: none;
}

@media (min-width: 1025px) {
  .main {
    margin-inline-start: calc(var(--rail-w) + 28px);
    --main-pad: clamp(22px, 3.2vw, 46px);
  }
}

@media (max-width: 1024px) {
  .main {
    padding-block-end: 116px;
  }

  .topbar {
    margin-block-end: 22px;
  }

  .mobile-dock {
    position: fixed;
    z-index: var(--z-rail);
    inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    inset-block-end: max(12px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    min-height: 72px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background-color: var(--sidebar);
    box-shadow: var(--shadow-pop);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
  }

  .mobile-dock > a {
    min-width: 0;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-3);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.1;
  }

  .mobile-dock > a > svg {
    width: 21px;
    height: 21px;
  }

  .mobile-dock > a.active {
    color: var(--primary-2);
  }

  .mobile-dock-create {
    transform: translateY(-13px);
  }

  .mobile-create-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--brand);
    color: #2b1103;
    box-shadow: 0 14px 34px rgba(253, 106, 1, 0.34);
  }

  .mobile-create-icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 560px) {
  .main {
    --main-pad: 14px;
  }

  .topbar-context,
  .topbar > .icon-btn:not(.hamburger):not(.theme-toggle),
  .topbar .pill.credits {
    display: none;
  }

  .mobile-dock {
    inset-inline: 8px;
    inset-block-end: max(8px, env(safe-area-inset-bottom));
  }
}

/* Landing and public pages --------------------------------------------- */
.cinema-hero {
  min-height: min(880px, 94svh);
  border-block-end: 0;
  background-color: #090706;
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --input-bg: rgba(10, 8, 7, 0.78);
  --card: rgba(24, 19, 15, 0.82);
  --card-2: rgba(34, 27, 22, 0.76);
  --border: rgba(255, 242, 229, 0.15);
  --border-2: rgba(255, 242, 229, 0.085);
  --primary-2: #ffad72;
  --accent-text: #ffc095;
}

.cinema-bg-video,
.cinema-hero .chroma-video-canvas {
  opacity: 0.66;
}

.cinema-bg-fallback {
  background-color: rgba(8, 6, 5, 0.46);
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
  opacity: 0.56;
}

.cinema-nav {
  position: sticky;
  inset-block-start: 0;
  background-color: rgba(9, 7, 6, 0.62);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.cinema-nav.scrolled {
  background-color: rgba(9, 7, 6, 0.88);
}

.cinema-command {
  width: min(980px, 100%);
  padding-block: clamp(72px, 13vh, 150px) clamp(60px, 12vh, 130px);
}

.cinema-copy h1 {
  font-size: clamp(44px, 7vw, 82px);
  max-width: 14ch;
  margin-inline: auto;
}

.cinema-copy p {
  font-size: clamp(16px, 2vw, 21px);
}

.cinema-command .prompt-console {
  padding: 18px;
  border-radius: 26px;
  background-color: rgba(19, 15, 12, 0.82);
}

.cinema-main {
  max-width: 1480px;
}

.launch-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.launch-tile,
.tool-dock-item {
  min-height: 178px;
  justify-content: flex-end;
  border-radius: 24px;
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
}

.launch-tile > span,
.tool-dock-item > span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.cinematic-split {
  min-height: 440px;
  border-radius: 30px;
  background-color: var(--card);
  box-shadow: var(--shadow);
}

.split-media {
  min-height: 330px;
  border-radius: 24px;
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
}

.public-info-shell,
.auth-wrap,
.error-page {
  position: relative;
  isolation: isolate;
}

.public-info-shell::before,
.auth-wrap::before,
.error-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}

.auth-card {
  width: min(490px, 100%);
  border-radius: 30px;
  background-color: rgba(19, 15, 12, 0.86);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

:root[data-theme="light"] .auth-card {
  background-color: rgba(255, 250, 244, 0.92);
}

.public-info-nav {
  background-color: var(--sidebar);
}

.public-info-card,
.public-info-contact {
  border-radius: 26px;
}

@media (max-width: 1100px) {
  .launch-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cinema-hero {
    min-height: auto;
  }

  .cinema-nav-links {
    display: none;
  }

  .cinema-nav-actions .btn-ghost,
  .cinema-nav-actions .theme-toggle {
    display: none;
  }

  .cinema-command {
    padding-block: 64px 74px;
  }

  .cinema-copy h1 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .launch-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .launch-tile {
    scroll-snap-align: start;
  }

  .cinematic-split {
    grid-template-columns: 1fr;
  }
}

/* Home and media cards -------------------------------------------------- */
.creator-console {
  min-height: 610px;
  border-radius: 30px;
  border-color: rgba(255, 180, 120, 0.2);
  background-color: rgba(10, 8, 7, 0.72);
  box-shadow: var(--shadow);
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --input-bg: rgba(10, 8, 7, 0.78);
  --card: rgba(24, 19, 15, 0.82);
  --card-2: rgba(34, 27, 22, 0.76);
  --border: rgba(255, 242, 229, 0.15);
  --border-2: rgba(255, 242, 229, 0.085);
  --primary-2: #ffad72;
  --accent-text: #ffc095;
}

.console-bg-fallback {
  background-color: rgba(10, 8, 7, 0.54);
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
}

.workspace-panel,
.workspace-stage {
  padding: clamp(18px, 2.5vw, 30px);
  border-radius: 24px;
  background-color: rgba(13, 10, 8, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.workspace-panel-head h1 {
  font-size: clamp(38px, 5vw, 64px);
  max-width: 11ch;
}

.workspace-panel .prompt-console {
  background-color: rgba(8, 7, 6, 0.72);
}

.stage-media-card {
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.stage-media-card::after,
.t-card .shade {
  background: rgba(5, 4, 3, 0.2);
}

.stage-media-card strong,
.t-card .meta {
  padding: 8px 10px;
  border-radius: 12px;
  background-color: rgba(7, 5, 4, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.t-grid,
.kit-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.t-card {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-soft);
  transition: transform var(--cinematic), border-color var(--t), box-shadow var(--t);
}

.t-card:hover {
  transform: translateY(-7px) scale(1.012);
  border-color: rgba(253, 106, 1, 0.42);
  box-shadow: var(--shadow);
}

.t-card .thumb-placeholder {
  background-color: var(--card-strong);
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
}

.t-card .meta {
  inset-inline-start: 10px;
  inset-inline-end: auto;
  max-width: calc(100% - 72px);
}

.t-card .cost-tag,
.t-card .badge-type,
.t-card .fav-btn {
  background-color: rgba(8, 6, 5, 0.68);
  border-color: rgba(255, 255, 255, 0.16);
}

.studio-feed {
  margin-block-end: 68px;
}

/* Studios and generators ------------------------------------------------ */
.studio-page-head,
.catalog-head {
  padding: 18px 0 10px;
}

.gen-layout,
.image-studio-workspace,
.tts-shell,
.song-shell {
  gap: 22px;
}

.gen-config-card,
.image-compose-panel,
.tts-compose,
.song-compose {
  background-color: rgba(19, 15, 12, 0.84);
}

:root[data-theme="light"] .gen-config-card,
:root[data-theme="light"] .image-compose-panel,
:root[data-theme="light"] .tts-compose,
:root[data-theme="light"] .song-compose {
  background-color: rgba(255, 252, 248, 0.92);
}

.result-panel,
.image-result-canvas,
.tts-result-panel,
.song-result-panel {
  position: sticky;
  overflow: hidden;
  isolation: isolate;
  background-color: rgba(10, 8, 7, 0.8);
  border-color: rgba(255, 169, 105, 0.2);
  box-shadow: var(--shadow);
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --input-bg: rgba(10, 8, 7, 0.78);
  --card: rgba(24, 19, 15, 0.82);
  --card-2: rgba(34, 27, 22, 0.76);
  --border: rgba(255, 242, 229, 0.15);
  --border-2: rgba(255, 242, 229, 0.085);
  --primary-2: #ffad72;
  --accent-text: #ffc095;
}

.result-panel::before,
.image-result-canvas::before,
.tts-result-panel::before,
.song-result-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0.24;
}

.result-panel::before {
  background-image: url("../img/cinematic/studio-video-background.png");
}

.image-result-canvas::before {
  background-image: url("../img/cinematic/studio-image-background.png");
}

.tts-result-panel::before {
  background-image: url("../img/cinematic/studio-voice-background.png");
}

.song-result-panel::before {
  background-image: url("../img/cinematic/studio-song-background.png");
}

.studio-banner {
  min-height: 250px;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.studio-pill,
.image-model-choice,
.tts-model-choice,
.tts-experience-switch,
.song-choice,
.resolution-pick,
.aspect-pick {
  border-radius: 16px;
  background-color: var(--card-2);
}

.studio-generate,
#image-submit,
#tts-submit,
#song-submit {
  min-height: 54px;
  border-radius: 18px;
}

.studio-sheet {
  border-radius: 28px;
}

.studio-model-card {
  border-radius: 18px;
}

.song-disc {
  background-color: #100b08;
  background-image: url("../img/cinematic/studio-song-background.png");
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}

.song-disc::before {
  display: none;
}

.tts-wave {
  background-color: rgba(12, 9, 7, 0.72);
  background-image: url("../img/cinematic/studio-voice-background.png");
  background-size: cover;
  background-position: center;
}

.tts-wave i {
  background-color: rgba(255, 255, 255, 0.74);
}

@media (max-width: 1024px) {
  .result-panel,
  .image-result-canvas,
  .tts-result-panel,
  .song-result-panel {
    position: static;
  }
}

@media (max-width: 560px) {
  .studio-page-head,
  .catalog-head {
    padding-block-start: 4px;
  }

  .page-title {
    font-size: 28px;
  }

  .card,
  .gen-config-card,
  .image-compose-panel,
  .image-result-canvas,
  .tts-compose,
  .tts-result-panel,
  .song-compose,
  .song-result-panel {
    border-radius: 20px;
  }

  .t-grid,
  .kit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .t-card {
    border-radius: 18px;
  }
}

/* Account, pricing, history, movie ------------------------------------- */
.price-card,
.job-card,
.profile-card,
.movie-card {
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.price-card.featured {
  border-color: var(--brand);
  box-shadow: 0 24px 60px rgba(253, 106, 1, 0.18);
}

.pricing-hero,
.profile-grid .account-card:first-child,
.movie-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pricing-hero::before,
.profile-grid .account-card:first-child::before,
.movie-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}

.pricing-hero,
.movie-head {
  min-height: 220px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255, 169, 105, 0.24);
  border-radius: 30px;
  background-color: rgba(13, 10, 8, 0.82);
  box-shadow: var(--shadow);
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --border: rgba(255, 242, 229, 0.15);
  --primary-2: #ffad72;
  --accent-text: #ffc095;
}

.profile-grid .account-card:first-child {
  background-color: rgba(13, 10, 8, 0.88);
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --input-bg: rgba(10, 8, 7, 0.78);
  --border: rgba(255, 242, 229, 0.15);
  --primary-2: #ffad72;
  --accent-text: #ffc095;
}

.profile-grid .account-card:first-child::before {
  opacity: 0.28;
}

.movie-empty {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  background-color: rgba(13, 10, 8, 0.88);
  --text: #fffaf3;
  --text-2: #d2c7bc;
  --text-3: #968b81;
  --border: rgba(255, 242, 229, 0.15);
  --primary-2: #ffad72;
}

.movie-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
  opacity: 0.24;
}

.table-wrap {
  border-radius: 22px;
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
}

.movie-card,
.movie-wizard,
.wizard-sidebar,
.wizard-main {
  border-color: var(--border);
}

.movie-hero,
.wizard-hero {
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
}

.movie-preview-screen {
  background-image: url("../img/cinematic/veyron-card-background.png");
  background-size: cover;
  background-position: center;
  color: #fffaf3;
}

@media (max-width: 560px) {
  .pricing-hero,
  .movie-head {
    min-height: 190px;
    padding: 22px;
    border-radius: 24px;
  }
}

/* Accessibility and restrained fallbacks ------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .card,
  .prompt-console,
  .app-rail,
  .mobile-dock,
  .topbar,
  .sidebar,
  .menu,
  .modal,
  .auth-card,
  .workspace-panel,
  .workspace-stage {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--card-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-dock-create,
  .t-card:hover,
  .launch-tile:hover,
  .tool-dock-item:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .app-rail,
  .mobile-dock,
  .card,
  .btn,
  .input {
    border: 1px solid CanvasText;
  }
}