:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  color: #f5f5f8;
  background: #0b0c16;
  --surface: #181a2a;
  --raised: #232638;
  --border: #35364a;
  --accent: #d6b2ff;
  --muted: #bfbace;
  --violet: linear-gradient(150deg, #b447eb, #6838e7 65%, #5229d9);
}
* { box-sizing: border-box }
[hidden] { display: none !important }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 77% 0, #292654, transparent 42rem), #0b0c16 }
.site-header, main { width: min(1440px, calc(100% - 96px)); margin: auto }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.35rem; font-weight: 750; white-space: nowrap }
.mark { color: #e8b7ff; text-shadow: 0 0 18px #971cff; font-size: 1.6em }
nav, .actions, .facts, .heading, .pills { display: flex; align-items: center; flex-wrap: wrap; gap: 12px }
.desktop-nav { justify-content: center; gap: clamp(6px, 1.8vw, 24px) }
.desktop-nav a, .brand, .action, .tile, .chip, .mobile-nav a, .side-nav a, .hero-art { text-decoration: none }
.desktop-nav a { color: #eee9ff; padding: 10px 4px; font-size: .93rem }
a { color: var(--accent); text-underline-offset: 4px }
a:hover { color: #fff }
.chip { padding: 9px 14px; border: 1px solid #645383; border-radius: 32px; white-space: nowrap }
.mobile-nav { display: none }
main { padding-bottom: 32px }
.intro { padding: 28px 0 20px }
h1 { font-size: clamp(2.2rem, 4.4vw, 4rem); letter-spacing: -.05em; line-height: 1.06; margin: 0 }
h2 { font-size: clamp(1.25rem, 2.3vw, 1.9rem); margin: 0 0 14px; letter-spacing: -.03em }
h3 { margin: 0; font-size: 1.05rem }
em { font-style: normal; color: #ce8afb; background: linear-gradient(#f7a8fb, #9d65fa); background-clip: text; -webkit-text-fill-color: transparent }
p, small { color: var(--muted); line-height: 1.55 }
small { font-size: .82rem }
.badge { margin-top: 0; color: var(--accent); font-size: .74rem; font-weight: 750; letter-spacing: .12em }
.facts { gap: 10px 24px; font-size: .85rem; color: #e0d5fb; margin: 20px 0 0 }
.hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 36px; padding: 40px 0 }
.hero p { max-width: 37ch; font-size: 1.04rem }
.hero-art { position: relative; display: block; overflow: hidden; border: 1px solid #9c71d5; border-radius: 20px; box-shadow: 0 0 34px #7b49d657; background: #17132b }
.hero-art img { display: block; width: 100%; min-height: 180px; aspect-ratio: 16 / 9; object-fit: cover }
.hero-art span { position: absolute; bottom: 12px; left: 12px; padding: 7px 11px; border-radius: 24px; background: #0b0c16e6; color: #fff; font-size: .85rem }
.feature-grid, .plans, .media-grid, .prompt-grid { display: grid; gap: 14px }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.feature-grid p { margin-bottom: 0 }
.page-section { margin: 36px 0 }
.heading { justify-content: space-between }
.heading h2 { margin: 0 }
.media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px }
.prompt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.tile { color: #fff; display: block; background: #15172c; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; font-size: .91rem }
.tile:hover { border-color: #bc85f9 }
.tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover }
.tile div { padding: 10px }
.tile small { display: block }
.steps { display: grid; gap: 12px; margin-bottom: 24px }
.mountain-banner, .workspace-intro { background: linear-gradient(90deg, #0f1122, #1615316b), url('/assets/mountains.jpg') center 48% / cover; border-radius: 20px; padding: 20px 24px }
.mountain-banner { text-align: center }
.search-label { max-width: 42rem; margin: 12px auto }
.explore-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 }
.explore-bar select { width: auto; margin: 0 }
.plans { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.plan { display: flex; flex-direction: column; align-items: stretch }
.plan .action { margin-top: auto }
.plan.featured { border-color: #b075fd; box-shadow: 0 0 22px #8b38fa45 }
.price { color: #fff; margin: 0; font-weight: 750; font-size: 2rem }
.center { text-align: center; margin-bottom: 24px }
.center .pills { justify-content: center }
.checkout { width: min(100%, 550px); margin: 30px auto }
.checkout h1 { font-size: 2rem }
.checkout .intro { padding-top: 0 }
.paypal { background: #ffc439; color: #1f2e55; width: 100% }
#notice { border-left: 3px solid #af88fb; padding: 8px 14px; background: #241935 }
#notice:empty { display: none }
.layout { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: 20px; align-items: start }
.layout:has(> [hidden]) { grid-template-columns: minmax(0, 1fr) }
.workspace-intro { margin-bottom: 22px }
.panel { background: linear-gradient(145deg, #1d2033, #151625); border: 1px solid var(--border); border-radius: 18px; padding: 22px; min-width: 0 }
#creations:has(#studio-preview:not(:empty)) { padding: 0; background: transparent; border: 0 }
#studio-preview:empty { display: none }
#creations-title { margin: 18px 0 10px }
.examples-heading { margin: 16px 0 }
.examples-heading h2 { font-size: 1.15rem }
.billing { margin-top: 16px }
.quote { display: block; color: #f7eeff; background: #23263a; border: 1px solid #413955; border-radius: 12px; padding: 14px }
label { display: block; margin: 14px 0; color: #f1ebff; font-size: .95rem }
textarea, input, select, button { font: inherit }
textarea, input, select { width: 100%; min-height: 44px; margin-top: 6px; background: #111322; border: 1px solid #58536f; border-radius: 10px; padding: 10px; color: #fff }
textarea { resize: vertical }
#prompt-count { display: block; text-align: right }
#image-preview { display: block; width: min(100%, 340px); max-height: 220px; object-fit: contain; border-radius: 10px; margin-bottom: 8px }
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px }
.inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
.inline input { width: 18px; min-height: 18px; margin: 0 }
button, .action { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border: 1px solid #9869ff; border-radius: 12px; padding: 9px 16px; background: var(--violet); color: #fff; font-weight: 680; cursor: pointer }
.secondary { background: #24243b; border-color: #645478; color: #f0e6ff }
button[aria-pressed="true"] { background: var(--violet); border-color: #be86ff }
button:disabled { opacity: .6; cursor: not-allowed }
:focus-visible { outline: 2px solid #e3c7ff; outline-offset: 3px }
#generate, .wide { width: 100% }
#buy { width: 100%; margin-top: 8px }
#jobs article, #orders article, details { border-top: 1px solid var(--border); padding: 12px 0; overflow-wrap: anywhere }
#jobs article :is(a, button), #orders article :is(a, button) { margin: 4px 9px 4px 0 }
video { width: 100%; max-height: 460px; background: #0d0a12; border-radius: 12px }
summary { cursor: pointer }
#creation-controls { display: flex; gap: 12px }
.side-nav, .account-links { display: flex; gap: 12px; flex-wrap: wrap }
.side-nav a, .account-links a { padding: 10px 12px; border-radius: 10px; background: #201c34; color: #f0e5ff }
.side-nav [aria-current="page"] { background: var(--violet) }
.account-links { margin-bottom: 20px }
.admin-layout { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 20px }
.admin-layout .side-nav { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 22px }
footer { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; border-top: 1px solid var(--border); padding-top: 24px }
.reading { max-width: 780px }
.reading h2 { margin-top: 20px }
@media (max-width: 1050px) {
  .site-header, main { width: calc(100% - 48px) }
  .desktop-nav { gap: 6px }
}
@media (max-width: 767px) {
  .site-header, main { width: calc(100% - 32px) }
  .site-header { min-height: 64px }
  .desktop-nav { display: none }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: fixed; z-index: 2; bottom: 0; width: 100%; background: #13132a; border-top: 1px solid #5c467d; padding: 5px 3px max(8px, env(safe-area-inset-bottom)) }
  .mobile-nav a { text-align: center; min-height: 44px; color: #f3eaff; font-size: .72rem }
  .mobile-nav span { display: block; font-size: 1.25rem; line-height: 1.15 }
  .mobile-nav { border-radius: 20px 20px 0 0; background: linear-gradient(180deg,#17152d,#0f1023); }
  .mobile-nav a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; }
  .mobile-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav [aria-current] svg { filter: drop-shadow(0 0 5px #ba5aff); }
  main { padding-bottom: 100px }
  .hero, .layout, .admin-layout, .plans { grid-template-columns: 1fr }
  .hero { padding: 18px 0; gap: 20px }
  .hero .actions { display: grid }
  .hero-art img { min-height: 0 }
  .feature-grid { grid-template-columns: 1fr }
  .media-grid, .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mountain-banner, .workspace-intro, .panel { padding: 16px }
  .brand { font-size: 1.08rem }
  .chip { font-size: .85rem }
  .admin-layout .side-nav { flex-direction: row }
}

.hero-art video { display: block; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 }

.settings:has(#ratio-select[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)) }
#ratio-chips { margin: 8px 0 0; padding: 0; border: 0 }
#ratio-chips legend { margin-bottom: 8px; font-size: .95rem }
.ratio-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px }
.ratio-chip { display: grid; grid-template-rows: 24px auto; place-items: center; padding: 8px 3px; font-size: .78rem }
.ratio-chip span { border: 2px solid currentColor; border-radius: 3px }
@media (max-width: 390px) { .ratio-grid { grid-template-columns: repeat(3, 1fr) } }

/* Standalone desktop artboards and corresponding mobile layouts. */
:root {
  --surface: #151729;
  --border: #373853;
  --violet: linear-gradient(164deg, #cf61ef 0%, #8951f5 36%, #6237ef 76%);
}
body { background: radial-gradient(ellipse at 73% -4%, #292b60 0, #101326 37%, #090b17 74%); }
.site-header, main { width: min(1440px, calc(100% - 112px)); }
.site-header { min-height: 64px; position: relative; z-index: 3; }
.brand { color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.65rem); }
.mark { object-fit: contain; mix-blend-mode: screen; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.header-actions .chip { color: #fff; border-radius: 12px; border-color: #797391; }
.header-start { min-height: 40px; white-space: nowrap; }
.header-menu { display: none; margin: 0; padding: 0; border: 0; }
.header-menu summary { list-style: none; padding: 8px; font-size: 1.4rem; }
.header-menu div { position: absolute; top: 100%; right: 0; display: grid; gap: 5px; min-width: 190px; padding: 12px; background: #16182d; border: 1px solid #68508c; border-radius: 12px; box-shadow: 0 10px 30px #050614; }
.header-menu a { padding: 10px; }
.desktop-nav a { padding: 10px 11px; border-radius: 10px; border-bottom: 1px solid transparent; }
.desktop-nav a[aria-current], .desktop-nav a:hover { color: #fff; background: linear-gradient(#241c42, #201a37); border-bottom-color: #b86dea; }
.mobile-nav [aria-current] { color: #e5bcff; text-shadow: 0 0 12px #b23ef9; }
.panel { background: linear-gradient(150deg, #1b1d35, #101324 85%); }
.hero { position: relative; grid-template-columns: .91fr 1.09fr; padding: 24px 2.6% 38px; gap: clamp(22px, 5vw, 76px); isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0 -4vw; background: linear-gradient(90deg, #0e1026 8%, #1e184857 52%, #20225030), url('/assets/mountains.jpg') right center / cover no-repeat; mask-image: linear-gradient(transparent, black 14%, black 76%, transparent); opacity: .75; pointer-events: none; }
.hero-copy h1 { font-size: clamp(2.65rem, 4.05vw, 4.1rem); margin: 12px 0; }
.hero-copy p { max-width: 43ch; color: #eee9ff; }
.hero-tag { display: inline-block; padding: 6px 13px; border: 1px solid #493473; border-radius: 40px; color: #e2b3ff; background: #1c1838; font-size: .83rem; }
.hero .actions { gap: 12px; margin: 18px 0 0; }
.hero .actions .action { border-radius: 21px; }
.hero .facts span + span { border-left: 1px solid #626183; padding-left: 12px; }
.hero .facts b { color: #d6a5ff; font-size: 1.1rem; }
.hero-media { position: relative; min-width: 0; transform: perspective(1050px) rotateY(-8deg) skewX(-7deg); }
.hero-media .hero-art { border: 1px solid #f3b7ff; border-radius: 26px; box-shadow: 0 0 22px #b25af76e, 0 20px 56px #18156d8a; }
.hero-media video { aspect-ratio: 1.88; }
.media-caption { display: block; margin-top: 5px; font-size: .73rem; }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-card { min-height: 88px; padding: 14px 16px; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; color: #fff; text-decoration: none; }
.feature-card h3 { margin-bottom: 4px; }
.feature-card p { font-size: .83rem; margin: 0; }
.feature-icon { min-width: 40px; height: 40px; padding: 4px; display: grid; place-items: center; border: 1px solid #a47ce3; border-radius: 11px; background: radial-gradient(circle at top left, #7558aa, #302753 80%); color: #f5ddff; font-size: 1.28rem; }
.home-gallery { margin-top: 32px; }
.home-gallery .media-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.home-gallery .tile > div { display: none; }
.home-gallery .heading p { margin: 4px 0 0; }
.mobile-home { display: none; }
@media (max-width: 767px) {
  [data-route="home"] :is(.hero, .feature-grid, .home-gallery) { display: none; }
  .mobile-home { display: block; }
  .mobile-home-hero { position: relative; isolation: isolate; padding-top: clamp(124px, 38vw, 270px); text-align: center; }
  .mobile-home-hero::before {
    content: ""; position: absolute; z-index: -1; inset: 0 -16px auto; aspect-ratio: 1.85;
    background: url('/assets/mobile-home-hero.png') center 40% / cover no-repeat;
    mask-image: linear-gradient(#000 72%, transparent);
  }
  .mobile-home-hero h1 { font-size: clamp(1.85rem, 8vw, 3.25rem); line-height: 1; margin: 0; }
  .mobile-home-hero p { color: #f5eeff; font-size: clamp(.92rem, 3.8vw, 1.2rem); margin: 10px auto 14px; max-width: 34ch; }
  .mobile-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-home-actions .action { justify-content: center; text-align: center; padding-inline: 4px; border-radius: 24px; font-size: clamp(.75rem, 3.8vw, 1rem); }
  .mobile-home-actions .action:first-child { box-shadow: inset 0 1px 7px #ffd1ff80, 0 0 15px #c11df880; }
  .mobile-home-features { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 16px 0 24px; }
  .mobile-home-features li { padding: 0 5px; font-size: clamp(.64rem, 2.8vw, .9rem); color: #f5eeff; line-height: 1.2; }
  .mobile-home-features li + li { border-left: 1px solid #65548066; }
  .mobile-home-features span { display: grid; place-items: center; margin: 0 auto 4px; width: 32px; height: 32px; border-radius: 50%; background: #2a1551; font-size: .95rem; font-weight: 700; }
  .mobile-trending .heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
  .mobile-trending h2 { margin: 0; font-size: clamp(.95rem, 4.35vw, 1.35rem); }
  .mobile-trending .heading a { white-space: nowrap; font-size: .82rem; }
  .mobile-trending-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; }
  .mobile-trending-grid .tile { position: relative; min-width: 0; border-radius: 13px; }
  .mobile-trending-grid .tile:first-child { grid-row: span 2; }
  .mobile-trending-grid .tile img { aspect-ratio: 2.25; height: 100%; object-fit: cover; }
  .mobile-trending-grid .tile:first-child img { aspect-ratio: 1.25; }
  .trending-play, .trending-duration { position: absolute; border-radius: 18px; background: #101020bd; color: white; }
  .trending-play { inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: 6px 9px 6px 11px; }
  .trending-duration { inset: auto 5px 5px auto; padding: 2px 5px; font-size: .68rem; }
  .mobile-upgrade {
    display: flex; align-items: center; gap: 9px; padding: 11px; margin: 18px 0;
    border: 1px solid #a25ce6; border-radius: 14px; color: white; text-decoration: none;
    background: linear-gradient(90deg, #211341 27%, #170e3d35 76%), url('/assets/mobile-ridge.png') right center / cover no-repeat, #241346;
  }
  .mobile-upgrade strong, .mobile-upgrade small { display: block; }
  .mobile-upgrade span:first-child { color: #ffd570; font-size: 1.6rem; }
  .mobile-upgrade span:last-child { margin-left: auto; padding: 4px 8px; background: #6222bd; border-radius: 50%; }
}
.tile figure { margin: 0; position: relative; }
.tile figure > span { position: absolute; bottom: 8px; left: 8px; padding: 3px 10px; background: #090b16c9; border-radius: 20px; color: #fff; font-size: .8rem; }
.mountain-banner, .pricing-intro { position: relative; isolation: isolate; background: transparent; }
.mountain-banner::before, .pricing-intro::before {
  content: ""; position: absolute; z-index: -1; inset: -10px max(-56px, -4vw) 0; background: url('/assets/twilight.jpg') center 63% / cover no-repeat;
  mask-image: linear-gradient(transparent, black 22%, black 75%, transparent); pointer-events: none;
}
.mountain-banner { padding: 6px 0 12px; }
.mountain-banner .intro { padding: 8px 0 4px; }
.mountain-banner p { max-width: 68ch; margin: 9px auto; }
.search-label { position: relative; }
.search-label span { position: absolute; top: 12px; left: 17px; font-size: 1.35rem; }
.search-label input { border-radius: 28px; padding-left: 48px; background: #24223fcf; border-color: #8e79bd; }
.explore-intro { padding: 14px 0 12px; }
.explore-intro .intro h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.explore-mobile-title { display: none; }
.explore-intro::before, .explore-intro::after {
  content: ""; position: absolute; z-index: -1; inset: -8px auto -28px 0; width: min(44%, 630px);
  background: url('/assets/ridge-left.png') left center / cover no-repeat;
  mask-image: linear-gradient(90deg, black 36%, transparent), linear-gradient(transparent, black 20%, black 70%, transparent);
  mask-composite: intersect; pointer-events: none;
}
.explore-intro::after {
  inset-inline: auto 0; background-image: url('/assets/studio-ridge.png'); background-position: right center;
  mask-image: linear-gradient(270deg, black 44%, transparent), linear-gradient(transparent, black 20%, black 70%, transparent);
}
.explore-intro .search-label input { min-height: 50px; box-shadow: inset 0 0 18px #8159e744; }
.explore-bar .secondary { border-radius: 24px; padding-inline: 17px; white-space: nowrap; }
.explore-bar select { border-radius: 22px; }
.explore-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.explore-more { margin-top: 14px; }
.explore-featured {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(150px, 14.5vw, 224px) repeat(2, clamp(140px, 12.5vw, 192px)); gap: 14px;
}
.explore-featured .explore-card { grid-column: span 3; }
.explore-featured .explore-position-1 { grid-column: 1 / span 4; grid-row: 1; }
.explore-featured .explore-position-2 { grid-column: 5 / span 5; grid-row: 1; }
.explore-featured .explore-position-3 { grid-column: 1 / span 3; grid-row: 2; }
.explore-featured .explore-position-4 { grid-column: 4 / span 3; grid-row: 2; }
.explore-featured .explore-position-5 { grid-column: 7 / span 3; grid-row: 2; }
.explore-featured :is(.explore-position-6, .explore-position-7, .explore-position-8, .explore-position-9) { grid-row: 3; }
.explore-card { position: relative; min-width: 0; border: 1px solid #343552; border-radius: 16px; background: #15182b; overflow: hidden; }
.explore-image { display: block; position: relative; }
.explore-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.explore-featured .explore-image, .explore-featured .explore-image img { height: 100%; }
.explore-media-tag, .explore-play {
  position: absolute; display: grid; place-items: center; background: #0a0b18cf; color: #fff; border-radius: 24px;
}
.explore-media-tag { top: 8px; right: 8px; padding: 4px 8px; font-size: .68rem; }
.explore-play { bottom: 9px; left: 10px; width: 36px; aspect-ratio: 1; }
.explore-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 10px; }
.explore-card-meta :is(strong, small) { display: block; }
.explore-card-meta button { padding: 0; min-width: 38px; }
.explore-featured .explore-card-meta {
  position: absolute; inset: auto 0 0; color: white; background: linear-gradient(transparent, #090b17ee 36%);
  opacity: 0; pointer-events: none;
}
.explore-featured .explore-card:is(:hover, :focus-within) .explore-card-meta { opacity: 1; pointer-events: auto; }
.featured-scene {
  position: relative; grid-column: 10 / -1; grid-row: 1 / 3; display: flex; align-items: end;
  overflow: hidden; padding: 0; border-color: #8066b4;
}
.featured-art { position: absolute; inset: 0; }
.featured-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.featured-save { position: absolute; z-index: 1; top: 10px; right: 10px; width: 44px; padding: 0; border-radius: 50%; }
.featured-save[aria-pressed="true"] { color: #ffb3e1; }
.featured-scene > div { position: relative; width: 100%; padding: 24px 16px 16px; background: linear-gradient(transparent, #121527f2 27%, #17182c); pointer-events: none; }
.featured-scene > div .action { pointer-events: auto; }
.featured-scene p { margin: 6px 0; font-size: .87rem; }
.featured-scene h2 { font-size: 1.25rem; }
.featured-scene .action { width: 100%; border-radius: 24px; }
.explore-empty { text-align: center; }
.explore-drawer { max-height: calc(100dvh - 28px); overflow-y: auto; }
.explore-drawer-content > h2 { margin: 12px 0 4px; }
.explore-drawer-content h3, .example-detail h3 { margin: 12px 0 6px; font-size: 1rem; }
.example-prompt { overflow-wrap: anywhere; }
.example-detail .actions, .explore-drawer .actions { margin-top: 16px; }
.example-action-status:empty { display: none; }
.example-source-label { color: #cfc3e4; }
.example-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.explore-back { display: inline-block; margin-top: 14px; }
.workspace-intro { position: relative; isolation: isolate; background: none; border-radius: 0; padding: 16px 12px 14px; }
.workspace-intro::before {
  content: ""; position: absolute; z-index: -1; inset: -8px 0 -10px auto; width: min(78%, 1060px);
  background: url('/assets/studio-ridge.png') right center / 100% 100% no-repeat;
  mask-image: linear-gradient(90deg, transparent, black 30%), linear-gradient(transparent, black 15%, black 77%, transparent);
  mask-composite: intersect; pointer-events: none;
}
.workspace-intro h1 { font-size: clamp(2.6rem, 4.3vw, 4rem); }
.workspace-intro p { font-size: 1.05rem; margin: 5px 0; }
.mobile-generator-title { display: none; }
.workspace-intro .facts { margin-top: 14px; }
[data-generator="image"] .workspace-intro { background: transparent; position: relative; text-align: center; isolation: isolate; padding: 18px 0; }
[data-generator="image"] .workspace-intro::before, [data-generator="image"] .workspace-intro::after {
  content: ""; position: absolute; z-index: -1; inset: -8px auto -12px 0; width: min(39%, 520px);
  background: url('/assets/ridge-left.png') left bottom / cover no-repeat;
  mask-image: linear-gradient(90deg, black 44%, transparent), linear-gradient(transparent, black 24%, black 70%, transparent);
  mask-composite: intersect; pointer-events: none;
}
[data-generator="image"] .workspace-intro::after {
  inset-inline: auto 0; background-image: url('/assets/ridge-right.png');
  mask-image: linear-gradient(270deg, black 44%, transparent), linear-gradient(transparent, black 24%, black 70%, transparent);
}
[data-generator="image"] .workspace-intro .facts { display: none; }
.mode-tabs { gap: 0; flex-wrap: nowrap; padding: 3px; border: 1px solid #393452; border-radius: 19px; background: #17182c; }
.mode-tabs a { text-align: center; flex: 1; border-radius: 15px; padding: 11px 5px; color: #f7edff; text-decoration: none; font-size: .93rem; }
.mode-tabs [aria-current] { background: var(--violet); box-shadow: inset 0 0 8px #edbaff8c, 0 0 14px #8043ee5c; }
.prompt-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.prompt-heading label { margin: 0; font-weight: 700; font-size: 1.02rem; }
.prompt-heading small { font-size: .84rem; font-weight: 400; }
.prompt-heading button { border: 0; background: transparent; font-size: .85rem; padding-inline: 4px; }
.prompt-label { display: grid; position: relative; margin-bottom: 8px; }
.prompt-label textarea { font-weight: 400; border-color: #66588c; background: #1a1c2e; min-height: 106px; padding-bottom: 25px; }
.prompt-label small { position: absolute; bottom: 6px; right: 14px; pointer-events: none; }
.prompt-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.prompt-actions button { min-height: 36px; padding: 5px 13px; border-radius: 22px; }
.field-heading { font-size: 1.03rem; margin: 16px 0 8px; }
.required { color: #fb608e; }
.upload-box { display: grid; justify-items: center; gap: 4px; background: #1b1d30; border: 1px dashed #777093; border-radius: 14px; padding: 12px; cursor: pointer; margin: 0 0 10px; }
.upload-box span { font-size: 1.5rem; }
.upload-box input { font-size: .83rem; max-width: 100%; }
#image-name { display: block; margin: 7px 0 12px; }
.duration-chips, .resolution-chips, #ratio-chips { min-width: 0; border: 0; padding: 0; margin: 12px 0; }
.duration-chips legend, .resolution-chips legend, #ratio-chips legend { font-weight: 700; margin-bottom: 8px; }
.duration-chips legend { width: 100%; }
.duration-chips legend small, .resolution-chips legend small, #ratio-chips legend small { float: right; font-weight: 400; font-size: .74rem; }
.resolution-chips legend, #ratio-chips legend { width: 100%; }
.duration-grid, .resolution-grid { display: grid; gap: 7px; }
.duration-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.resolution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setting-chip { padding: 4px; min-height: 38px; }
.resolution-grid .setting-chip { display: grid; gap: 2px; }
.ratio-chip { grid-template-rows: 24px auto auto; gap: 2px; }
.ratio-chip small, .resolution-grid small { font-weight: 400; font-size: .7rem; }
.setting-chip[aria-pressed=true], .ratio-chip[aria-pressed=true] { background: linear-gradient(160deg, #5931a6, #4b2286); border-color: #df9aff; box-shadow: inset 0 0 9px #bd72ff99, 0 0 10px #a756fb55; }
#generator .settings { display: none; }
.audio-row { min-height: 44px; border: 1px solid #33354d; background: #1b1d30; border-radius: 12px; padding: 9px 12px; }
.audio-row input { margin-left: auto; appearance: none; width: 36px; height: 20px; border-radius: 20px; padding: 0; background: #4b4267; }
.audio-row input::after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; margin: 2px; background: #c1b6d8; }
.audio-row input:checked { background: #9044fb; }
.audio-row input:checked::after { transform: translateX(16px); background: white; }
.audio-row input:disabled { opacity: .55; }
.audio-row small { flex-basis: 100%; }
.generation-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; }
#estimate { display: grid; margin: 0; padding: 10px 12px; }
#estimated-cost { color: #dfa5ff; font-size: 1.23rem; }
#generate { min-height: 54px; }
#buy, #use-low-resolution { grid-column: 1 / -1; margin-top: 0; }
.desktop-video-settings { display: none; }
.result-preview .heading { margin-bottom: 16px; }
.result-preview .heading h2 { font-size: 1.25rem; }
.result-preview .hero-art { border-radius: 16px; box-shadow: none; }
.result-preview p { border-top: 1px solid #39374f; padding-top: 12px; }
.result-preview .heading h2 span { display: inline-grid; place-items: center; width: 32px; aspect-ratio: 1; border-radius: 50%; background: var(--violet); font-size: .9rem; }
.example-source { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #39374f; }
.example-source img { width: 80px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; }
.example-source > div { flex: 1; min-width: 125px; }
.example-source small { display: block; }
.pricing-intro { margin-bottom: 30px; }
.pricing-intro .pills { display: inline-flex; gap: 0; padding: 3px; border: 1px solid #3f395a; border-radius: 40px; background: #1a1c34; }
.pricing-intro .pills button { min-width: 120px; border-radius: 40px; border: 0; }
.pricing-intro .pills small { background: #c08bf4; color: #171228; border-radius: 20px; padding: 3px 7px; margin-left: 7px; }
.plans { width: min(100%, 1280px); margin: 0 auto; gap: 16px; }
.plan-comparison table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.plan-comparison :is(th, td) { text-align: left; padding: 12px 8px; border-bottom: 1px solid #ffffff20; overflow-wrap: anywhere; }
.plan-comparison th:first-child { width: 25%; }
.plan-comparison tbody tr:last-child > * { border-bottom: 0; }
.product-activity { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.product-activity dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .plan-comparison { padding-inline: 10px; }
  .plan-comparison :is(th, td) { padding: 9px 3px; font-size: .75rem; }
}
.plan { min-height: 270px; padding: 24px; background: linear-gradient(160deg, #181a2f, #111525); }
.plan.featured { outline: 1px solid #c882ff; background: radial-gradient(ellipse at 100% 0%, #51347a, #1b1836 54%, #111525); }
.plan .quote { background: linear-gradient(90deg, #33294e, #24263e); }
.purchase { display: grid; grid-template-columns: .84fr 1.07fr .92fr; gap: 20px; align-items: stretch; padding-top: 30px; }
.purchase-guide { background: linear-gradient(#090c1a 15%, #11132a20 69%), url('/assets/twilight.jpg') left bottom / contain no-repeat; }
.purchase-guide h1 { font-size: clamp(1.55rem, 2.3vw, 2.4rem); }
.purchase-guide .intro { padding-bottom: 5px; }
.purchase-steps { display: grid; gap: 16px; padding-left: 30px; color: #d7c7ef; }
.purchase-steps li::marker { color: #c682ff; font-weight: 750; }
.order-item, .order-line { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.order-item div { flex: 1; }
.order-item small { display: block; }
.order-line { border-bottom: 1px solid #363755; padding-bottom: 14px; }
.order-benefits { margin-top: 24px; }
.order-benefits li { margin-top: 6px; }
.payment-panel { border-color: #a86ced; box-shadow: inset 0 0 28px #652cb178; }
.pay-mark { color: #40a0ff; font-style: italic; }
.payment-panel .paypal { background: linear-gradient(#ffe581, #ffbf2b); border-color: #f4cc64; }
@media (max-width: 1100px) {
  .site-header, main { width: calc(100% - 56px); }
  .mountain-banner::before, .pricing-intro::before { inset-inline: max(-28px, -4vw); }
  .desktop-nav { gap: 3px; }
  .desktop-nav a { padding-inline: 7px; }
  .header-start { display: none; }
  .feature-card { grid-template-columns: 36px 1fr; }
  .feature-card > span:last-child { display: none; }
}
@media (max-width: 767px) {
  .site-header, main { width: calc(100% - 32px); }
  .site-header { min-height: 62px; gap: 5px; }
  .brand { font-size: 1.04rem; gap: 5px; }
  .mark { width: 27px; height: 27px; }
  .header-menu { display: block; }
  .header-actions { gap: 4px; }
  .hero { grid-template-columns: 1fr; padding: 10px 0 22px; gap: 16px; }
  .hero::before { background-size: auto 66%; opacity: .44; }
  .hero-copy h1 { font-size: clamp(2.1rem, 8vw, 3rem); }
  .hero-media { transform: none; }
  .feature-grid, .home-gallery .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { padding: 10px; gap: 6px; }
  .feature-icon { height: 33px; min-width: 33px; }
  .home-gallery { margin-top: 24px; }
  .example-layout, .purchase { grid-template-columns: minmax(0, 1fr); }
  .explore-intro { text-align: left; padding-top: 10px; }
  .explore-intro::before {
    inset: -10px 0 auto; width: auto; height: 150px;
    background: url('/assets/moonridge.jpg') right center / auto 100% no-repeat;
    mask-image: radial-gradient(ellipse at 74% 48%, black 28%, transparent 79%);
  }
  .explore-intro::after, .explore-desktop-title { display: none; }
  .explore-mobile-title { display: inline; }
  .explore-intro .intro h1 { font-size: clamp(1.65rem, 6.4vw, 2.4rem); }
  .explore-intro p { max-width: 28ch; margin: 7px 0 0; }
  .explore-intro .search-label { margin-bottom: 0; }
  .explore-bar { flex-wrap: nowrap; gap: 5px; margin: 4px 0 14px; }
  .explore-bar #categories { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 5px 4px; gap: 6px; }
  .explore-bar .secondary { padding-inline: 10px; }
  .explore-bar select { min-height: 42px; max-width: 94px; padding-inline: 6px; font-size: .78rem; }
  .explore-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .explore-card-meta { padding: 6px 8px; }
  .explore-card-meta strong { font-size: .86rem; line-height: 1.2; }
  .explore-card-meta small { font-size: .72rem; margin-top: 3px; }
  .explore-card-meta button { min-width: 30px; border: 0; background: transparent; }
  .explore-play { inset: 50% auto auto 50%; translate: -50% -50%; }
  .explore-media-tag { inset: auto 6px 6px auto; font-size: .6rem; }
  .explore-drawer { inset: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; }
  .workspace-intro, [data-generator="image"] .workspace-intro { position: relative; isolation: isolate; text-align: left; margin-bottom: 8px; padding: 14px 0 16px; background: none; }
  .workspace-intro::before, [data-generator="image"] .workspace-intro::before {
    content: ""; position: absolute; z-index: -1; inset: -10px 0 -8px; width: auto;
    background: url('/assets/mobile-ridge.png') right center / auto 100% no-repeat;
    mask-image: radial-gradient(ellipse at 78% 49%, black 24%, transparent 75%); pointer-events: none;
  }
  [data-generator="image"] .workspace-intro::after { display: none; }
  .desktop-generator-title { display: none; }
  .mobile-generator-title { display: inline; }
  .workspace-intro h1 em { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
  .workspace-intro h1 { font-size: clamp(1.65rem, 6.4vw, 2.4rem); }
  .workspace-intro p { margin: 7px 0 0; }
  .workspace-intro .facts, [data-generator] .mobile-nav { display: none; }
  [data-generator] main { padding-bottom: 28px; }
  #generator { padding: 0; background: transparent; border: 0; }
  .ratio-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .ratio-chip { font-size: clamp(.61rem, 2.8vw, .8rem); }
  .ratio-chip small { font-size: clamp(.52rem, 1.8vw, .66rem); }
  .generation-actions { grid-template-columns: 1fr; }
  #estimate { grid-template-columns: 1fr auto; align-items: center; }
  #estimate b, #estimated-cost { color: #ffd040; }
  #estimate small { grid-column: 2; text-align: right; }
  .setting-chip, .prompt-actions button { min-height: 44px; }
  .mode-tabs a { min-height: 44px; }
  #generate { min-height: 50px; border-radius: 15px; }
  .purchase { padding-top: 12px; }
  .purchase-guide { background-size: auto 70%; }
}

.dashboard-layout, .admin-layout { display: grid; grid-template-columns: minmax(185px, 19%) minmax(0, 1fr); align-items: start; gap: 22px; }
.dashboard-content { min-width: 0; }
.dashboard-content > .intro, .dashboard-title { background: linear-gradient(90deg, #0e1024 26%, transparent 74%), url('/assets/twilight.jpg') right 63% / cover no-repeat; padding: 17px 14px; margin-bottom: 14px; border-radius: 14px; }
.dashboard-content .intro h1, .admin-layout .intro h1 { font-size: clamp(1.8rem, 3vw, 2.65rem); }
.dashboard-title .intro { padding: 0; }
.dashboard-sidebar { min-height: min(740px, 85vh); padding: 16px; display: flex; flex-direction: column; border: 1px solid #333455; border-radius: 17px; background: radial-gradient(ellipse at 90% 86%, #342264, transparent 45%), #111326; }
.sidebar-profile { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #37344e; }
.sidebar-profile small { display: block; }
.sidebar-profile img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.sidebar-profile strong { overflow-wrap: anywhere; }
.dashboard-sidebar .side-nav { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 0; }
.dashboard-sidebar .side-nav a { background: transparent; border: 1px solid transparent; }
.dashboard-sidebar .side-nav a:hover { background: #292141; }
.dashboard-sidebar .side-nav [aria-current] { background: var(--violet); border-color: #b67fff; box-shadow: 0 0 14px #8958e363; }
.sidebar-plan { margin-top: auto; text-align: center; background: radial-gradient(ellipse at 70% 84%, #482785, #19172f 75%); padding: 15px; }
.sidebar-plan .action { width: 100%; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 11px; margin: 0 0 14px; }
.stat-grid:empty { display: none; }
.stat { padding: 11px 14px; }
.stat strong { display: block; font-size: 1.4rem; }
.stat span { color: #d5cae9; font-size: .85rem; }
[data-route="dashboard"] #creations { padding: 0; border: 0; background: none; }
[data-route="dashboard"] #creations-title { display: none; }
[data-route="dashboard"]:not([data-creation-detail]) #jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
[data-route="dashboard"] #jobs article { padding: 12px; background: #181a30; border: 1px solid #424162; border-radius: 13px; }
[data-route="dashboard"] #jobs article video { margin-top: 7px; aspect-ratio: 16 / 9; }
[data-creation-detail] #jobs { max-width: 920px; }
.credit-packs h2, .account-section h2 { font-size: 1.25rem; }
.pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.pack-card { display: grid; place-items: center; text-decoration: none; gap: 6px; }
.pack-card span { color: #d7a4ff; font-size: 1.45rem; }
.pack-card:hover { border-color: #d78cff; box-shadow: 0 0 18px #a94bf463; }
.credit-balance { margin: 14px 0; background: radial-gradient(ellipse at 20% 30%, #472879, #1a1d33 76%); }
.credit-balance strong { color: #e1afff; display: block; font-size: clamp(1.5rem, 3vw, 2.75rem); }
.subscription-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 16px; }
.subscription { background: linear-gradient(90deg, #1a193c 33%, transparent), url('/assets/twilight.jpg') right 63% / cover no-repeat, #171a38; }
.subscription .feature-icon { float: left; margin-right: 15px; }
.account-section + .account-section { margin-top: 12px; }
.profile-grid, .account-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.profile-grid label { flex: 1; min-width: 135px; }
.account-row { padding: 9px 0; border-top: 1px solid #333651; }
.back-site { margin-top: auto; padding: 12px 6px 0; }
.admin-locked { min-height: 180px; }
@media (max-width: 767px) {
  .dashboard-layout, .admin-layout, .subscription-grid { grid-template-columns: 1fr; }
  .dashboard-sidebar { min-height: 0; padding: 8px; }
  .dashboard-sidebar .side-nav { flex-direction: row; gap: 4px; }
  .dashboard-sidebar .side-nav a { padding: 8px; font-size: .85rem; }
  .sidebar-profile, .sidebar-plan { display: none; }
  .dashboard-content > .intro { margin: 4px 0 12px; }
  [data-route="dashboard"]:not([data-creation-detail]) #jobs, .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  [data-route="checkout"] .mobile-nav { display: none; }
  [data-route="checkout"] main { padding-bottom: 28px; }
  [data-route="checkout"] .purchase-guide { background: url('/assets/twilight.jpg') right 66% / cover no-repeat; }
  .purchase-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; text-align: center; gap: 8px; font-size: .81rem; }
  .purchase-steps li::before { content: '✓'; display: grid; place-items: center; width: 35px; height: 35px; margin: 0 auto 6px; border: 1px solid #8b69be; border-radius: 50%; background: #252142; color: #d7c2ef; font-size: 1.1rem; }
  .purchase-steps li:first-child::before { content: '▤'; background: var(--violet); box-shadow: 0 0 14px #ab54ff; color: white; }
  .purchase-steps li:nth-child(2)::before { content: 'P'; font-style: italic; }
  .payment-panel .paypal { min-height: 51px; border-radius: 16px; }
}
body { overflow-x: clip; }



[data-route="home"] .hero { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: clamp(26px, 4.8vw, 74px); }
.home-player-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(52px, 6vw, 88px); aspect-ratio: 1; padding: 0 0 0 4px; border-radius: 50%; border: 2px solid #e7d9fb; background: #100c2cb5; font-size: clamp(18px, 2vw, 30px); }
.home-player-controls { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 9px; padding: 18px 10px 5px; background: linear-gradient(transparent, #070817e8 65%); }
.home-player-controls button { min-width: 30px; min-height: 32px; padding: 4px; background: transparent; border: 0; border-radius: 6px; }
.home-player-controls button:hover, .home-player-controls button[aria-pressed="true"] { background: #ffffff26; }
.home-player-controls output { white-space: nowrap; font-size: .78rem; }
.home-player-controls input { flex: 1; min-width: 0; margin: 0; padding: 0; accent-color: #c088fa; }
.home-player-quality { padding: 1px 4px; border: 1px solid #dac9ee; border-radius: 4px; color: #fff; }
.home-player-status { position: absolute; inset: auto 8px 48px; margin: 0; padding: 6px 10px; border-radius: 6px; background: #0d0b21; }
.home-player-status:empty { display: none; }
.home-player:fullscreen video { height: 100%; width: 100%; object-fit: contain; }
@media (max-width: 767px) {
  [data-route="home"] .hero { grid-template-columns: 1fr; }
}

.home-gallery { margin-bottom: 24px; }
.home-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  min-height: 108px;
  padding: 17px 22px;
  border: 1px solid #2c3148;
  border-radius: 15px;
  background: linear-gradient(105deg, #171b2e, #191d31 65%, #15192a);
}
.home-metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 22px);
  min-height: 52px;
  padding: 4px 12px;
}
.home-metric + .home-metric { border-left: 1px solid #2d324a; }
.home-metric svg { flex: 0 0 auto; width: clamp(26px, 2.65vw, 41px); color: #c9aff7; }
.home-metric strong { display: block; color: #fff; font-size: clamp(.88rem, 1.35vw, 1.3rem); }
.home-metric small { display: block; margin-top: 2px; color: #d8cde8; }
.home-metrics-note { display: block; margin-top: 5px; text-align: right; font-size: .7rem; }
.feature-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #b9a4f028; }
.home-gallery .tile img { aspect-ratio: 1.53; }
.checkout-mobile-title { display: none; }
.payment-note p { margin: 6px 0 0; }
.subscription { position: relative; }
.subscription .chip { display: inline-block; margin-bottom: 5px; }
.subscription-status { position: absolute; top: 20px; right: 20px; margin: 0; padding: 4px 10px; border-radius: 30px; background: #252345; }
.subscription-status[data-status="active"] { background: #153c35; color: #79f7be; }
.subscription-status[data-status="past_due"] { background: #402d25; color: #ffcf9d; }
.subscription-price { font-size: 1.2rem; font-weight: 700; }
.subscription-faq { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; }
.subscription-faq h2 { font-size: 1.15rem; margin: 10px 0; }
.subscription-faq details { border: 0; }
@media (max-width: 767px) {
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .home-metric { justify-content: flex-start; gap: 8px; padding: 9px; }
  .home-metric:nth-child(3) { border-left: 0; }
  .home-metric:nth-child(n+3) { border-top: 1px solid #2d324a; }
  .feature-arrow { width: 24px; height: 24px; }
  .checkout-desktop-title { display: none; }
  .checkout-mobile-title { display: inline; }
  [data-route="checkout"] .order-summary { background: none; border: 0; padding: 0; }
  [data-route="checkout"] .order-breakdown { padding: 16px; border: 1px solid #54417d; border-radius: 16px; background: linear-gradient(130deg, #1d1b36, #141627); }
  [data-route="checkout"] .payment-panel:has(.paypal) { padding: 0; border: 0; background: none; box-shadow: none; }
  [data-route="checkout"] .payment-panel:has(.paypal) > h2 { display: none; }
  [data-route="checkout"] .payment-panel .paypal { min-height: 54px; border-radius: 18px; font-size: 1.1rem; }
  .payment-details { padding-left: 24px; color: #e1d9ef; }
  .payment-details li { margin-block: 10px; }
  .subscription-status { position: static; width: fit-content; margin: 8px 0; }
  .subscription-faq { grid-template-columns: 1fr; gap: 0; }
}

.admin-content, .admin-panels { min-width: 0; }
.admin-panels { display: grid; gap: 18px; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-overview-grid h2, .admin-table-panel h2 { font-size: 1.2rem; }
.admin-rate { display: grid; place-items: center; width: 92px; aspect-ratio: 1; border: 6px solid #8756f4; border-radius: 50%; font-size: 1.4rem; font-weight: 700; }
.admin-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-tools input, .admin-tools select { width: auto; min-height: 38px; margin: 0; max-width: 100%; }
.admin-tools button { min-height: 38px; }
.admin-table-scroll { overflow-x: auto; margin-top: 15px; }
.admin-table-scroll table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.admin-table-scroll th { background: #1c2037; font-size: .82rem; color: #c9bbeb; }
.admin-table-scroll :is(td, th) { padding: 10px 12px; border-bottom: 1px solid #30334d; }
.admin-table-scroll td { font-size: .9rem; }
.admin-table-scroll tr:hover td { background: #252040; }
.admin-table-scroll td button { min-height: 32px; padding: 3px 8px; }
.admin-pagination { justify-content: flex-end; margin-top: 14px; }
.operations-settings label { display: block; margin-block: 12px; }
.operations-settings input:not([type="checkbox"]) { display: block; width: 100%; margin-top: 6px; }
.admin-drawer, .flow-dialog {
  color: #f5f1ff;
  background: linear-gradient(150deg, #201d3b, #111424 70%);
  border: 1px solid #66538d;
  border-radius: 16px;
  box-shadow: 0 22px 80px #050714c2;
  padding: 22px;
}
.admin-drawer { position: fixed; inset: 14px 14px 14px auto; margin: 0; width: min(465px, calc(100vw - 28px)); max-height: none; }
.admin-drawer form, .flow-dialog form { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.admin-drawer form button, .flow-dialog form button { background: #28203f; border: 1px solid #534371; padding: 0 12px; min-height: 34px; }
.admin-drawer h2, .admin-drawer dd { overflow-wrap: anywhere; }
.admin-drawer dt, .receipt dt { color: #c5b1e3; }
.admin-drawer dd { margin: 3px 0 14px; }
.record-drawer dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 14px; }
.record-drawer { max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; }
.record-drawer :is(dt, dd) { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }
.record-drawer dd { white-space: pre-wrap; }
.record-drawer .actions { margin-top: 20px; }
.record-drawer .invoice-upload { display: grid; gap: 10px; margin-top: 20px; }
.invoice-upload label { display: grid; gap: 4px; }
.admin-drawer video { margin: 8px 0; }
.admin-drawer .action { margin-right: 8px; }
dialog::backdrop { background: #050619a6; }
.flow-dialog { width: min(420px, calc(100% - 28px)); text-align: center; }
.flow-dialog h2 { margin: 14px 0 0; }
.flow-dialog .wide { margin-top: 8px; }
.flow-symbol { display: grid; place-items: center; margin-inline: auto; width: 62px; aspect-ratio: 1; border: 1px solid #ba83ff; border-radius: 50%; color: #f4e3ff; background: #5926a2; font-size: 1.7rem; }
.flow-symbol[data-status="completed"], [data-status="confirmed"] > .flow-symbol { background: #143f36; border-color: #55d4a8; color: #a9ffe0; }
.flow-symbol[data-status="failed"], [data-status="canceled"] > .flow-symbol { background: #542537; border-color: #ef8197; color: #ffbfd1; }
.payment-result { text-align: center; width: min(100%, 760px); }
.payment-result .intro { padding-block: 10px; }
.payment-result[data-status="confirmed"] { border-color: #357974; background: radial-gradient(ellipse at top left, #103737, transparent 65%), #101226; }
.payment-result[data-status="failed"] { border-color: #834263; background: radial-gradient(ellipse at top left, #40182d, transparent 65%), #101226; }
.payment-result[data-status="confirmed"] .flow-symbol { box-shadow: 0 0 20px #22e69e66; }
.payment-result[data-status="failed"] .flow-symbol { background: #542537; border-color: #ef8197; color: #ffbfd1; box-shadow: 0 0 20px #f76e8f66; }
.payment-result-body.has-art { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 3fr); align-items: center; gap: 20px; }
.payment-art { position: relative; width: min(100%, 125px); height: 110px; margin: auto; }
.credit-art i { position: absolute; inset: auto 10px 12px; height: 42px; border: 2px solid #e9a6ff; border-radius: 50%; background: linear-gradient(95deg, #6330cc, #ae68ff 63%, #5122a4); box-shadow: 0 6px 14px #a853ff85; }
.credit-art i:nth-child(2) { bottom: 28px; }
.credit-art i:nth-child(3) { bottom: 45px; display: grid; place-items: center; color: white; font-style: normal; background: radial-gradient(ellipse, #f0b4ff, #8c4ce9 68%, #5c2dbf); }
.failure-art i { position: absolute; inset: 20px 8px 25px; border-radius: 11px; transform: rotate(-14deg); background: linear-gradient(#bc8cfe 25%, #3b285d 26% 42%, #7349a9 43%); box-shadow: 0 7px 22px #bc76f566; }
.failure-art b { position: absolute; bottom: 14px; right: 7px; display: grid; place-items: center; width: 32px; aspect-ratio: 1; border: 2px solid #ffafbb; border-radius: 8px; background: #a52e51; color: #fff; }
.payment-result .actions { justify-content: center; }
.receipt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; padding: 18px; background: #181a31; border: 1px solid #353652; border-radius: 12px; }
.receipt dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .payment-result-body.has-art { grid-template-columns: 1fr; gap: 0; }
  .payment-art { height: 95px; }
}
#creation-controls { display: grid; gap: 12px; margin: 10px 0 18px; }
.creation-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }
.creation-filters label { margin: 0; font-size: .78rem; }
.creation-filters :is(select, input) { font-size: .85rem; min-height: 38px; }
.creation-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.creation-search label, .creation-search :is(input, select) { margin: 0; }
#creation-filter-toggle, #creation-favorites-mobile { display: none; }
.creation-search select { width: auto; }
.creation-gallery-layout .intro { position: relative; }
.creation-new { position: absolute; right: 14px; top: 14px; }
#creation-stats .stat { display: flex; align-items: center; gap: 10px; }
.creation-stat-icon { display: grid !important; flex: 0 0 auto; place-items: center; width: 31px; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; color: #ca91ff; }
.creation-stat-icon[data-status="completed"] { color: #64f6be; }
.creation-stat-icon[data-status="failed"] { color: #ff8aab; }
.creation-gallery-layout #jobs .creation-card { padding: 0; overflow: hidden; background: linear-gradient(150deg, #1b1e37, #101226); }
.creation-card[data-selected="true"] { outline: 1px solid #d392ff; box-shadow: 0 0 12px #9f45ea82; }
.creation-media { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 75% 70%, #422379, #121528 70%); }
.creation-gallery-layout #jobs .creation-media-open {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.creation-gallery-layout #jobs .creation-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.creation-play, .creation-duration {
  position: absolute; display: grid; place-items: center; background: #070711c9; color: white; border-radius: 40px;
}
.creation-play { inset: 50% auto auto 50%; translate: -50% -50%; width: 42px; aspect-ratio: 1; }
.creation-duration { bottom: 6px; right: 7px; padding: 3px 7px; font-size: .73rem; }
.creation-gallery-layout #jobs :is(.creation-select, .creation-favorite) {
  position: absolute; top: 7px; margin: 0; border-radius: 8px;
}
.creation-select { left: 7px; width: 22px; min-height: 22px; accent-color: #9b4ff8; }
.creation-gallery-layout #jobs .creation-favorite { right: 7px; width: 36px; min-height: 36px; padding: 0; background: #17142bdf; }
.creation-card-body { padding: 10px; }
.creation-card h3 { font-size: .96rem; line-height: 1.25; margin: 0 0 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.creation-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.creation-card-meta :is(.chip, .record-status) { font-size: .69rem; padding: 3px 6px; white-space: nowrap; }
.creation-date, .creation-card-settings { color: #c4b9d9; font-size: .73rem; margin: 6px 0; }
.creation-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.creation-gallery-layout #jobs .creation-card-actions :is(a, button) { margin: 0; min-height: 44px; min-width: 40px; padding: 3px 4px; font-size: .8rem; white-space: nowrap; }
.creation-card-actions button:first-child { flex: 1; }
.creation-empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--border); border-radius: 14px; }
#creation-pages { justify-content: flex-end; margin-top: 14px; }
#creation-drawer { max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; }
#creation-drawer-content dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
#creation-drawer-content :is(dt, dd) { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--border); }
#creation-drawer-content h3 { margin: 12px 0 6px; }
.drawer-metadata { color: #d9cee9; font-size: .85rem; }
.drawer-prompt { margin: 0; overflow-wrap: anywhere; }
#creation-drawer .creation-rename { display: grid; gap: 8px; }
#creation-drawer .creation-rename label { margin: 0; }
@media (min-width: 1200px) {
  .creation-gallery-layout:has(#creation-drawer[open]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 33%); gap: 14px; align-items: start; }
  .creation-gallery-layout:has(#creation-drawer[open]) > .intro { grid-column: 1 / -1; margin-bottom: 0; }
  .creation-gallery-layout #creation-drawer { position: sticky; inset: auto; top: 16px; width: 100%; margin: 0; }
  .creation-gallery-layout #jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .admin-overview-grid { grid-template-columns: 1fr; }
  .admin-tools { width: 100%; }
  .admin-tools input { flex: 1 1 100%; }
  #creation-types button { min-height: 44px; padding: 4px 8px; font-size: .8rem; }
  #creation-types button[data-type="favorite"], .creation-new,
  .dashboard-layout:has(.creation-gallery-layout) > .dashboard-sidebar, .creation-gallery-layout #creation-stats { display: none; }
  .creation-gallery-layout > .intro { background: linear-gradient(90deg, #0d1024 10%, transparent), url('/assets/mobile-ridge.png') right center / auto 100% no-repeat; }
  #creation-filter-toggle { display: inline-flex; padding-inline: 9px; }
  #creation-favorites-mobile { display: inline-flex; align-self: end; }
  #creation-filters-advanced:not([data-open]) { display: none; }
  .creation-gallery-layout #jobs { gap: 8px; }
  .creation-card-body { padding: 8px; }
  .creation-card-settings { display: none; }
  .creation-gallery-layout #jobs .creation-card-actions :is(a, button) { min-width: 44px; }
  .creation-gallery-layout #creation-drawer { inset: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; margin: 0; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body[data-route="dashboard"] .creation-gallery-layout #jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 379px) {
  body[data-route="dashboard"] .creation-gallery-layout #jobs { grid-template-columns: minmax(0, 1fr); }
  .site-header .brand { font-size: .92rem; }
  .header-actions .chip { padding-inline: 8px; font-size: .77rem; }
  .header-menu summary { padding-inline: 5px; }
}

.plan-features { list-style: none; padding: 0; margin: 0 0 18px; color: #e0d5f5; }
.plan-features li { margin: 8px 0; }
.plan-features li::before { content: '✓'; color: #c390ff; margin-right: 8px; }
.billing-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.featured-scene .facts { margin: 12px 0; }
@media (max-width: 767px) { .billing-faq { grid-template-columns: 1fr; } }

.billing-tabs { margin: 6px 0 16px; }
.billing-dashboard > #studio-content > .billing { margin-top: 0; }
.billing-dashboard .credit-packs { margin-bottom: 14px; }
.billing-dashboard #orders { scroll-margin-top: 15px; }
.billing-dashboard #billing-subscription, .billing-dashboard #orders { margin-block: 14px; }
.billing-dashboard #orders article { padding-block: 10px; border-bottom: 1px solid var(--border); }
@media (min-width: 1050px) {
  [data-generator] #studio-content > .layout { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 24px; }
  [data-generator="text"] .output-controls { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: end; }
  [data-generator="text"] .output-controls .resolution-chips legend small { display: none; }
  [data-generator="text"] .output-controls > * { margin-bottom: 12px; }
  .billing-dashboard { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .billing-dashboard > .intro, .billing-dashboard > .billing-tabs { grid-column: 1 / -1; }
  .billing-dashboard > .intro, .billing-dashboard > .billing-tabs, .billing-dashboard > .credit-packs { margin: 0; }
  [data-generator="image"] #generator .settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-generator="image"] #generator :is(.duration-chips, #ratio-chips, .resolution-chips) { display: none; }
  [data-generator="image"] .desktop-video-settings { display: block; }
  [data-generator="image"] :is(.source-heading h2, .prompt-heading label, .desktop-video-settings)::before {
    display: inline-grid; place-items: center; width: 26px; aspect-ratio: 1; margin-right: 8px;
    border-radius: 50%; background: var(--violet); color: white; font-size: .85rem;
  }
  [data-generator="image"] .source-heading h2::before { content: '1'; }
  [data-generator="image"] .prompt-heading label::before { content: '2'; }
  [data-generator="image"] .desktop-video-settings::before { content: '3'; }
  [data-generator="image"] .settings label { margin: 0; }
  [data-generator="image"] .source-area:has(#source-preview:not([hidden])) { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  [data-generator="text"] .duration-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  [data-route="home"] main, [data-route="home"] .site-header { width: min(1440px, calc(100% - 160px)); }
  [data-route="home"] .hero { padding: 20px 3% 28px 5%; gap: 66px; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  [data-route="home"] .hero-copy h1 { font-size: clamp(48px, 3.45vw, 58px); letter-spacing: -.025em; }
  [data-route="home"] .hero-copy p { margin: 10px 0; }
  [data-route="home"] .hero-media video { aspect-ratio: 1.98; }
  [data-route="home"] .feature-card { min-height: 92px; }
  [data-route="text-to-video"] .workspace-intro { background-position: right 63%; }
  [data-generator="text"] #generator .mode-tabs { display: none; }
  [data-generator="text"] #generator .generation-actions { grid-template-columns: 1fr; }
  [data-generator="text"] #estimate { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
}
@media (max-width: 767px) {
  [data-route="checkout"] .order-benefits { display: none; }
  [data-route="checkout"] .order-summary { display: flex; flex-direction: column; }
  [data-route="checkout"] .order-item { order: -1; margin-bottom: 14px; border-color: #a362f5; box-shadow: inset 0 0 18px #8b4af533; }
  [data-route="checkout"] .purchase-guide .intro { padding: 18px 0 3px; }
  [data-route="checkout"] .purchase { gap: 12px; }
}


.record-status { display: inline-block; padding: 3px 9px; border-radius: 20px; color: #dfc7ff; background: #403063; text-transform: capitalize; }
.record-status:is([data-status="completed"], [data-status="confirmed"]) { color: #afffda; background: #1c4439; }
.record-status:is([data-status="failed"], [data-status="canceled"]) { color: #ffc3d0; background: #592c42; }
[data-route="admin"] .desktop-nav { display: none; }
[data-route="admin"] .site-header { border-bottom: 1px solid #30344e; }
[data-route="admin"] footer { display: none; }
.admin-drawer dl button { margin: 10px 0; display: block; }
@media (max-width: 767px) {
  .header-menu[open] div { position: fixed; z-index: 15; inset: 62px 0 0 auto; width: min(320px, 86vw); height: calc(100dvh - 62px); border-radius: 16px 0 0; overflow-y: auto; }
  .header-menu[open] a { padding: 14px 15px; border-bottom: 1px solid #30344e; }
}

.admin-trend { grid-column: span 2; }
.admin-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 0 6px; }
.admin-bar { display: grid; grid-template-rows: 1.2em 88px 1.2em; justify-items: center; gap: 5px; }
.admin-bar i { align-self: end; height: var(--bar-height); width: min(30px, 70%); border-radius: 5px 5px 0 0; background: var(--violet); }
.admin-bar small { font-size: .72rem; }
@media (max-width: 767px) { .admin-trend { grid-column: auto; } }

[data-route="dashboard"]:not([data-creation-detail]) #jobs article { position: relative; }
[data-route="dashboard"]:not([data-creation-detail]) #jobs article video { display: block; margin: 0 0 10px; }
#creation-drawer-content > video { display: block; margin-top: 0; }
#creation-drawer-content > h2 { margin: 14px 0 6px; font-size: 1.45rem; }

.source-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 15px 0 8px; }
.source-heading h2 { margin: 0; }
.source-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#source-preview { position: relative; }
#source-preview #image-preview { width: 100%; height: clamp(112px, 31vw, 140px); object-fit: cover; margin: 0; }
#source-preview button { position: absolute; right: 8px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: #131325e8; }
#remove-image { top: 8px; }
#preview-framing { bottom: 8px; }
#image-name { overflow-wrap: anywhere; margin-bottom: 0; }
#image-status { margin: 6px 0 0; font-size: .85rem; }
#image-status:empty { display: none; }
#image-status[data-error="true"] { color: #ffb2c4; }
#framing-image { display: block; max-width: 100%; margin: 0 auto; border-radius: 10px; background: #000; object-fit: cover; object-position: center; }
.upload-box { position: relative; min-height: 102px; align-content: center; margin: 0; }
.upload-box #upload-label { font-size: .91rem; }
.upload-box input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.upload-box:focus-within, .upload-box[data-dragging="true"] { outline: 2px solid #c895ff; outline-offset: 3px; }
@media (max-width: 767px) {
  .source-area:has(#source-preview:not([hidden])) { position: relative; }
  .source-area:has(#source-preview:not([hidden])) .upload-box {
    position: absolute; inset: auto auto 8px 8px; min-height: 44px; padding: 6px 12px;
    border-style: solid; background: #131325e8;
  }
  .source-area:has(#source-preview:not([hidden])) .upload-box > span[aria-hidden] { display: none; }
  :is(#session-dialog, #credits-dialog).flow-dialog {
    position: fixed;
    inset: auto 0 0;
    width: min(100%, 520px);
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
}
@media (max-width: 340px) {
  .ratio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ratio-chip small { font-size: .68rem; }
}

.profile-avatar { display: block; width: 66px; height: 66px; object-fit: cover; border: 1px solid #ad8fdb; border-radius: 50%; margin-bottom: 12px; }