/* One site, two studios. The footage keeps its own colours in either theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090c13;
  --panel: #111620;
  --raised: #191f2c;
  --ink: #eef1f7;
  --muted: #adb4c4;
  --line: #2c3546;
  --paper: #111620;
  --dark: #090c13;
  --acid: #ff647c;
  --violet: #b3a7ff;
}
[data-theme-intro][hidden],
html:not([data-theme="dark"]) [data-theme-intro="dark"],
html[data-theme="dark"] [data-theme-intro="light"] { display: none; }
.theme-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-moon, [data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }
.theme-toggle:hover svg { transform: rotate(-12deg); }
.theme-toggle svg { transition: transform 180ms ease-out; }

html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] ::selection { background: var(--acid); color: var(--bg); }
html[data-theme="dark"] .site-header { background: #090c13b8; border-color: #f6f4ef18; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="dark"] :is(.wordmark, .nav-trigger, .nav-link, .icon-button, .locale-trigger,
  .mega-intro, .mega-intro > a, .mega-column a, .mega-grid a, .locale-menu a,
  .light-section, .feature-copy h3, .utility-strip a, .utility-strip > a > span:first-child,
  .footer-top h3, .breadcrumbs [aria-current], .error-number,
  .plan-top h2, .plan-top h2 > span, .founder-limit, .check,
  .studio-detail, .studio-home, .studio-subnav span, .studio-context-line > span,
  .creative-faq .faq-list summary, .creative-faq .faq-list details[open] summary) { color: var(--ink); }
html[data-theme="dark"] :is(.nav-trigger.current, .nav-link.current, .nav-trigger:hover, .nav-link:hover,
  .mega-column a:hover, .mega-grid a:hover, .footer-top > div > a:hover,
  .breadcrumbs a:hover, .detail-subnav a:hover, .article-layout > aside > a:hover) { color: var(--acid); }
html[data-theme="dark"] .chevron { border-color: var(--muted); }
html[data-theme="dark"] .mobile-toggle span { background: var(--ink); }
html[data-theme="dark"] :is(.status-dot, .light-section .status-dot) { background: var(--acid); }
html[data-theme="dark"] :is(.mega-menu, .mobile-nav, .locale-menu, dialog:not(.promotion-dialog), .creative-assets) {
  background: var(--bg); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] :is(.mega-menu, .locale-menu, .plan-card.featured) { box-shadow: none; }
html[data-theme="dark"] :is(.icon-button:hover, .locale-menu a:hover, .locale-menu a[aria-current],
  .search-result:hover, .filter-tabs button:hover:not(.active)) { background: var(--raised); color: var(--ink); }
html[data-theme="dark"] :is(.nav-cta, .button.primary, .button.ink, .recommended) {
  background: var(--acid); border-color: var(--acid); color: var(--bg);
}
html[data-theme="dark"] :is(.nav-cta:hover, .button.primary:hover, .button.ink:hover) {
  background: #ff8699; border-color: #ff8699; color: var(--bg);
}
html[data-theme="dark"] :is(.button.ghost, .button.outline-dark) {
  background: transparent; border-color: #66728a; color: var(--ink);
}
html[data-theme="dark"] :is(.button.ghost:hover, .button.outline-dark:hover) { background: var(--raised); border-color: var(--muted); }
html[data-theme="dark"] .button:disabled { background: var(--raised); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] :is(.mega-intro em, .mega-intro p, .mega-column > .mono, .fineprint,
  .section-heading > p, .section-heading > div > p, .muted, .light-section .muted, .light-section .eyebrow,
  .feature-copy > .mono, .light-section .feature-copy > .mono, .feature-copy p, .light-section .feature-copy p,
  .utility-strip small, .color-meta, .workflow-panel p, .workflow-panel > div > .mono,
  .guide-card p, .light-section .guide-card p, .guide-card > .mono, .light-section .guide-card > .mono,
  .faq-list details p, .faq-list summary > span, .closing-cta h2 > span, .closing-bottom,
  .footer-top > div:first-child > p, .footer-top > div:first-child > .mono,
  .footer-top > div:not(:first-child) > a, .footer-bottom,
  .page-intro > p, .page-intro > .pricing-status, .catalog-meta, .breadcrumbs, .detail-hero p,
  .detail-category, .detail-subnav a, .benefit-number, .benefit p, .numbered-steps li > .mono,
  .numbered-steps p, .solution-card p, .article-page > header > p, .article-content p,
  .article-byline, .article-layout > aside > .mono, .article-layout > aside > a:not(.text-link),
  .article-content > section > .mono, .article-end > .mono,
  .plan-top > .mono, .plan-top > p, .price > span, .plan-credit, .plan-card > ul > li,
  .plan-table tbody th, .plan-table td, .credits-layout > div > p, .credit-examples > div > span,
  .credit-examples svg, .credit-examples p, .install-steps li > .mono, .install-steps p,
  .platform-status, .download-card > .mono, .download-card > p, .download-card > .fineprint,
  .platform-symbol, .not-found p, .search-trigger, .dialog-close:not(.promotion-close), .search-caption, .dialog-hint,
  .search-empty, .search-result span, .showcase-dialog .dialog-top .mono) { color: var(--muted); }
html[data-theme="dark"] :is(.light-section, .creators-section, .closing-cta, .article-end,
  .billing-toggle, .download-card, .plan-card.featured, .workflow-image,
  .studio-workflow, .studio-closing, .studio-tip, .creator-stories) {
  background: var(--panel); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] :is(.plan-card, .catalog-search input, .search-dialog input,
  .showcase-controls button, .studio-options, .review-ticker-card, .article-layout > aside,
  .is-pinned .asset-panel, .is-pinned .asset-panel .asset-panel-copy) {
  background: var(--panel); border-color: var(--line); color: var(--ink); box-shadow: none;
}
html[data-theme="dark"] :is(.catalog-search input, .search-dialog input)::placeholder { color: var(--muted); }
html[data-theme="dark"] :is(.search-result, .mega-grid a, .utility-strip, .creators-section,
  .faq-list, .faq-list details, .closing-bottom, .footer-bottom, .catalog-toolbar,
  .benefit, .numbered-steps li, .article-layout > aside > a, .article-content > section,
  .plan-card > ul, .comparison-table-wrap, .plan-table th, .plan-table td,
  .credit-examples > div, .platform-status, .creative-assets, .creator-stories,
  .creator-empty-note, .review-card-status, .review-card-symbol,
  .creative-faq .faq-list, .creative-faq .faq-list details, .studio-benefits article,
  .studio-step-tabs button, .studio-card-top > a) { border-color: var(--line); }
html[data-theme="dark"] :is(.search-result, .faq-list details[open] summary, .faq-list details[open] summary > span) { color: var(--ink); }
html[data-theme="dark"] :is(.filter-tabs button, .billing-toggle button, .workflow-tabs button) { color: var(--muted); }
html[data-theme="dark"] :is(.filter-tabs button.active, .billing-toggle button.active,
  .showcase-controls button.active, .studio-options button[aria-pressed="true"],
  .asset-tabs button[aria-selected="true"], .is-pinned .asset-tabs button[aria-selected="true"]) {
  background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none;
}
html[data-theme="dark"] :is(.billing-toggle button > span, .billing-toggle button.active > span) { background: var(--raised); color: var(--ink); }
html[data-theme="dark"] :is(.workflow-tabs button[aria-selected="true"], .workflow-tabs button[aria-selected="true"] span) { color: var(--acid); border-color: var(--acid); }
html[data-theme="dark"] .plan-card.featured { border-color: var(--violet); }
html[data-theme="dark"] :is(.plan-table thead th, .plan-table th:nth-child(3), .plan-table td:nth-child(3)) { background: var(--raised); color: var(--ink); }
html[data-theme="dark"] .download-card.main-download { background: var(--raised); border-color: var(--line); }
html[data-theme="dark"] .main-download > .button { background: var(--acid); color: var(--bg); }
html[data-theme="dark"] :is(.detail-subnav, .studio-subnav) { background: #111620f5; border-color: var(--line); }
html[data-theme="dark"] .footer-masthead { color: #293143; }
html[data-theme="dark"] .footer-masthead span { color: #59465f; }
html[data-theme="dark"] .ticker { background: var(--bg); border-color: var(--line); }
html[data-theme="dark"] .ticker span { color: #c7ccda; }
html[data-theme="dark"] .ticker i { color: var(--acid); }
html[data-theme="dark"] .closing-cta { border-top-color: #503044; }
html[data-theme="dark"] .closing-cta .eyebrow { color: var(--violet); }
html[data-theme="dark"] .light-section :focus-visible { outline-color: var(--acid); }

/* Feature descriptions follow the site theme; example footage and overlays stay authored. */
html[data-theme="dark"] :is(.studio-detail, .studio-home) {
  --studio-line: var(--line); --studio-muted: var(--muted); --studio-paper: var(--panel);
}
html[data-theme="dark"] :is(.studio-contexts, .studio-range, .studio-figure figcaption,
  .studio-figure figcaption > span:first-child, .studio-section-intro > .mono, .studio-benefits .mono,
  .studio-chapter-copy > .mono, .studio-chapter-copy .studio-context-line, .studio-tip > p,
  .studio-step-copy p, .studio-closing .mono, .studio-closing p, .studio-card-top > .mono,
  .studio-showcase-copy p, .studio-home-bottom > p, .asset-intro > .eyebrow, .asset-intro p,
  .asset-navigation-meta, .asset-navigation-meta i, .asset-panel-copy p, .creator-story-heading > p,
  .creator-empty-note, .creative-faq > div > p, .creative-faq .faq-list details p,
  .studio-options button, .studio-step-tabs button, .asset-tabs button) { color: var(--muted); }
html[data-theme="dark"] :is(.studio-options button:hover:not([aria-pressed="true"]),
  .studio-step-tabs button[aria-selected="true"], .studio-card-top > a:hover) {
  background: var(--raised); color: var(--ink);
}
html[data-theme="dark"] .asset-tabs button:hover:not([aria-selected="true"]) { color: var(--ink); }
html[data-theme="dark"] .asset-progress { background: var(--line); }
html[data-theme="dark"] .asset-progress > span { background: var(--violet); }
html[data-theme="dark"] :is(.review-card-status, .review-card-symbol) { background: var(--raised); color: var(--muted); }
html[data-theme="dark"] .review-media-card .review-card-status { background: #111620eb; color: var(--ink); }
/* Authored footage sits on dark demo surfaces, including transparent cutouts. */
html[data-theme="dark"] :is(.studio-canvas, .feature-art, .studio-chapter-image, .studio-step-image) {
  background: var(--panel); color: var(--ink);
}
html[data-theme="dark"] .feature-art::after { background: linear-gradient(0deg, #090c1340, transparent 60%); }
html[data-theme="dark"] .feature-art img[data-dark-src*="luxe-14-idol"] { object-fit: contain; }
html[data-theme="dark"] .feature-art img[data-dark-src*="luxe-14-idol"] { object-fit: contain; }
html[data-theme="dark"] :is(.art-tag, .studio-property, .studio-transcript, .studio-layer,
  .studio-chapter-property, .studio-sequence, .studio-audio-panel, .studio-contact-sheet) {
  background: #111620f2; border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] :is(.studio-transcript > .mono, .studio-transcript b,
  .studio-sequence-ruler, .studio-sequence-tracks > .mono, .studio-audio-panel small) { color: var(--muted); }
html[data-theme="dark"] .studio-range input { accent-color: var(--acid); }
html[data-theme="dark"] :is(.studio-transform-box, .studio-transform-box i) { border-color: #adb4c488; }
html[data-theme="dark"] .studio-diamonds span { background: var(--line); }
html[data-theme="dark"] .studio-property .studio-curve { color: var(--violet); }
html[data-theme="dark"] .studio-motion-photo > video { visibility: hidden; }
html[data-theme="dark"] .studio-motion-photo > img { visibility: visible; }
html[data-theme="dark"] .studio-motion-photo > :is(img, .studio-transform-box) {
  transform: translate(calc(var(--studio-blend, 0) * 6% - 3%), calc(1.5% - var(--studio-blend, 0) * 3%))
    scale(calc(1.04 + var(--studio-blend, 0) * .10));
}
html[data-theme="dark"] [data-studio-demo="cutout"] .studio-canvas {
  background: radial-gradient(ellipse at 68% 40%, #34244c 0, #152236 40%, #0d121d 75%);
}
html[data-theme="dark"] [data-studio-demo="cutout"][data-value="transparent"] .studio-canvas {
  background: conic-gradient(#202938 25%, #121923 0 50%, #202938 0 75%, #121923 0) 0 0 / 24px 24px;
}
html[data-theme="dark"] [data-studio-demo="shorts"] .studio-canvas {
  background: radial-gradient(ellipse at 50% 15%, #252139, #111620 70%);
}
html[data-theme="dark"] .studio-extract-arrow { color: var(--violet); }
html[data-theme="dark"] .studio-short-result.selected { outline-color: var(--violet); }
html[data-theme="dark"] .asset-screen { color: #1c1e17; }
html[data-theme="dark"] .asset-mode-template:has(> img[data-dark-src]) .asset-template-art,
html[data-theme="dark"] .studio-canvas:has(> img[data-dark-src]) .studio-type-art { color: var(--ink); }
html[data-theme="dark"] [data-value="bold"] .studio-canvas:has(> img[data-dark-src]) .studio-type-art strong,
html[data-theme="dark"] .studio-canvas:has(> img[data-dark-src]) .studio-type-art small { color: #181917; }
html[data-theme="dark"] .workflow-image > .mono { color: var(--muted); }

/* The preserved classic URL also supports dark navigation and timeline controls. */
html[data-theme="dark"] :is(.mini-timeline, .wave-track, .intro-audio-clip) { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] :is(.timeline-toolbar, .text-track > div, .video-track > div) { border-color: var(--line); }
html[data-theme="dark"] :is(.timeline-toolbar > .mono, .timeline-demo-label, .timeline-ruler,
  .track > span, .hero-footnote, .timeline-toolbar .timecode, .timeline-toolbar button) { color: var(--muted); }
html[data-theme="dark"] :is(.text-track > div, .intro-title-clip) { background: var(--raised); color: var(--ink); }
html[data-theme="dark"] .wave-track > span { color: var(--muted); text-shadow: none; }
html[data-theme="dark"] .wave-track i { background: var(--muted); }
html[data-theme="dark"] :is(.playhead i, .timeline-toolbar .status-dot) { background: var(--acid); }
html[data-theme="dark"] .playhead { border-color: var(--acid); }
html[data-theme="dark"] .video-sound { background: var(--raised); color: var(--ink); }

@media (max-width: 1040px) {
  .nav-wrap { display: flex; justify-content: space-between; gap: 12px; }
  .desktop-nav { display: none; }
  .mobile-toggle { display: flex; flex-direction: column; gap: 5px; min-width: 44px; height: 44px; }
  .mobile-toggle span { width: 18px; height: 1px; }
  .mobile-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav-actions { margin-left: auto; gap: 6px; }
}
@media (max-width: 600px) {
  .nav-actions > .nav-cta { display: none; }
  .nav-actions { gap: 3px; }
  .locale-trigger { min-width: 36px; min-height: 44px; }
  .mobile-toggle { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
  .theme-toggle:hover svg { transform: none; }
}