/* UI behavior and shared template chrome. Original page styles are retained separately. */
:root {
  color-scheme: dark;
  --header-height: 108px;
  --create-tab-bar-height: 0px;
  --site-bg: #0f1314;
  --site-text: #eefbff;
  --site-muted: #a5b4b9;
  --site-cyan: #53d5f5;
  --gradient: linear-gradient(110deg, #d4ffe8 0%, #59dded 52%, #209cf6 100%);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-text);
  font-family: Poppins, system-ui, sans-serif;
}
body[data-workspace="false"] {
  --header-height: 64px;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #53d5f5;
  outline-offset: 4px;
}
a {
  text-decoration: none;
  color: inherit;
}
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  background: #defeff;
  color: #101616;
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus {
  top: 12px;
}
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 70;
}
.sale-banner {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--gradient);
  color: #071b22;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding: 0 36px;
  overflow: hidden;
}
.sale-copy {
  white-space: nowrap;
}
.sale-copy-track {
  display: flex;
  width: max-content;
}
.sale-copy-track [aria-hidden="true"] {
  display: none;
}
.sale-cta {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  background: #042733;
  border-radius: 30px;
  color: #fff;
  padding: 5px 12px;
}
.sale-cta span {
  font-size: 18px;
  line-height: 16px;
}
.sale-close {
  position: absolute;
  right: 24px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  line-height: 16px;
  color: white;
  background: #128acb66;
  border-radius: 50%;
  font-size: 16px;
}
.site-toolbar {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 46px;
  background: #0f1314ed;
  border-bottom: 1px solid #26303455;
  transition: background 0.2s;
}
body[data-page="home"] .site-toolbar {
  background: linear-gradient(#0a0c0d55, transparent);
  border-color: transparent;
}
.site-header.scrolled .site-toolbar {
  background: #0f1314f5;
  backdrop-filter: blur(14px);
}
.brand-logo {
  flex: none;
  display: flex;
  align-items: center;
}
.brand-logo > .iconify {
  font-size: 36px;
}
.logo-fallback {
  display: none;
  font-size: 25px;
  font-weight: 600;
}
.logo-fallback span {
  color: #57d9f6;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.nav-item {
  position: relative;
}
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  border: 0;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  color: #54d9f6;
}
.chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin: 0 3px;
}
.nav-panel {
  position: absolute;
  top: 48px;
  left: 0;
  display: flex;
  gap: 24px;
  min-width: 340px;
  max-height: min(70vh, 650px);
  overflow: auto;
  padding: 24px;
  background: #1b2022f8;
  border: 1px solid #354043;
  border-radius: 16px;
  box-shadow: 0 20px 70px #0006;
  max-width: calc(100vw - 240px);
}
.nav-group {
  min-width: 165px;
}
.nav-group p {
  font-size: 13px;
  color: #93a7ad;
  margin-bottom: 12px;
}
.nav-group a {
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-group a:hover {
  background: #2e373a;
  color: #53d7f3;
}
.toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.toolbar-actions > button {
  display: flex;
  align-items: center;
  gap: 3px;
}
.toolbar-actions .iconify {
  font-size: 20px;
}
.login-trigger {
  color: #6ae4ff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-generate {
  border: 1px solid #c5ebee;
  border-radius: 32px;
  padding: 7px 15px;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 1201px) {
  .header-generate {
    margin-left: 32px;
  }
}
.scrolled .header-generate {
  background: var(--gradient);
  border-color: transparent;
  color: #07181d;
}
.mobile-menu-trigger {
  display: none !important;
}
.user-actions {
  position: relative;
}
.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar-circle {
  display: grid;
  place-items: center;
  background: #53bfd8;
  color: #13262b;
  border: 1px solid #bcf7ff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
}
.user-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}
.credits-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
}
.subscribe-chip {
  padding: 4px 10px;
  border: 1px solid #c8bb85;
  border-radius: 6px;
  color: #fff2bb;
  font-size: 12px;
}
.header-credit {
  color: #5bdefa;
}
.account-popover {
  position: absolute;
  right: 0;
  top: 48px;
  width: 284px;
  background: #23292b;
  border: 1px solid #364144;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 45px #0009;
}
.account-popover p {
  font-size: 12px;
  color: #93a7af;
  margin: 6px 0 16px;
  white-space: normal;
}
.account-popover button,
.account-popover a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
}
.workspace-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: 82px;
  border-right: 1px solid #2a343766;
  z-index: 50;
  padding: 12px 8px 16px;
  background: #0f1314;
  display: flex;
  flex-direction: column;
}
.workspace-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workspace-sidebar nav a {
  height: 60px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}
.workspace-sidebar nav a > span:first-child {
  font-size: 24px;
  line-height: 26px;
}
.workspace-sidebar nav a:hover,
.workspace-sidebar nav a.active {
  background: #1c2224;
  color: #54dafa;
}
.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.sidebar-bottom .iconify {
  font-size: 23px;
}
.workspace-content {
  margin-left: 90px;
  padding-top: var(--header-height);
  min-height: 100vh;
}
.workspace-content > div {
  min-height: calc(100vh - var(--header-height));
}
.workspace-content .md\:h-without-header {
  height: auto;
  min-height: calc(100vh - var(--header-height));
}
.workspace-content > .md\:h-without-header {
  overflow: visible;
}
.workspace-content > div > div.w-full.md\:flex {
  height: calc(100vh - var(--header-height));
  min-height: 660px;
}
.workspace-content #create-form-panel-host form {
  min-height: 0;
}
.workspace-content #create-form-panel-host {
  padding-right: 16px;
}
.workspace-home {
  height: calc(100vh - var(--header-height));
  min-height: 660px;
  overflow: auto;
}
.workspace-home > div {
  min-height: 100%;
  padding: 32px 16px;
}
.workspace-home form {
  width: 100%;
}
.workspace-content :where([contenteditable="true"]) {
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 80px;
}
.workspace-content [contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: #697277;
  pointer-events: none;
}
.workspace-content [data-prompt] {
  outline: none;
}
.workspace-content video {
  max-width: 100%;
}
.workspace-content swiper-container,
.workspace-content swiper-slide {
  display: block;
  width: 100%;
  height: 100%;
}
.workspace-content swiper-slide:not(:first-child) {
  display: none;
}
.workspace-content swiper-slide {
  width: 100% !important;
}
.workspace-content [data-generation] button[data-action="generate"] {
  background: var(--gradient);
  color: #061c24;
}
.workspace-content [data-generation] button[data-action="generate"]:disabled {
  background: #4b585c;
  color: #081c22;
  opacity: 1;
}
.preview-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.preview-chip {
  position: relative;
  max-width: 92px;
}
.preview-chip img,
.preview-chip video {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #5ccfe3;
}
.preview-chip button {
  position: absolute;
  right: -4px;
  top: -4px;
  background: #162024;
  border: 1px solid #7ba2aa;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.preview-chip small {
  display: block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.hero-scroll {
  position: absolute !important;
}
.home-hero swiper-container,
.home-hero swiper-slide {
  display: block;
}
.home-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero > img[data-hero-poster] {
  z-index: 0;
  transition: opacity 0.5s;
}
.home-hero.video-ready > img[data-hero-poster] {
  opacity: 0;
}
.feature-item {
  opacity: 1 !important;
  transform: none !important;
}
.model-marquee {
  animation: model-scroll 35s linear infinite;
  will-change: transform;
}
.template-row > div {
  will-change: transform;
}
.template-row {
  overflow: hidden;
}
.template-row .animate-scroll,
.template-row > .flex {
  animation: template-scroll 70s linear infinite;
}
.template-row:nth-child(2) > .flex {
  animation-direction: reverse;
}
.template-row:hover > .flex {
  animation-play-state: paused;
}
.testimonial-row > .flex {
  animation: template-scroll 90s linear infinite;
}
.testimonial-row:nth-child(2) > .flex {
  animation-direction: reverse;
}
@keyframes model-scroll {
  to {
    transform: translateX(-50%);
  }
}
@keyframes template-scroll {
  to {
    transform: translateX(-50%);
  }
}
[role="region"][data-collapsed="true"] {
  display: none;
}
.public-content .h-header {
  height: var(--header-height);
}
.public-content > main > section,
.public-content > section:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
.public-content > main > section:first-child {
  content-visibility: visible;
}
.public-content video {
  background: #131a1d;
}
.public-content video[data-src$=".jpg"],
.public-content video[data-src$=".png"],
.public-content video[data-src$=".webp"] {
  display: none;
}
dialog {
  color: var(--site-text);
  padding: 0;
  border: 1px solid #3a4549;
  background: #1b2022;
  border-radius: 20px;
  max-height: 90dvh;
  overflow: auto;
}
dialog::backdrop {
  background: #000b;
  backdrop-filter: blur(3px);
}
body:has(dialog[open]) {
  overflow: hidden;
}
.dialog-close,
.dialog-heading > button {
  width: 34px;
  height: 34px;
  font-size: 25px;
  display: grid;
  place-items: center;
  line-height: 1;
  background: #ffffff08;
  border-radius: 8px;
}
.dialog-close {
  position: absolute;
  right: 16px;
  top: 16px;
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid #3b444755;
}
.dialog-heading h2 {
  font-size: 19px;
  font-weight: 600;
}
.ui-dialog {
  width: min(700px, calc(100vw - 32px));
}
.ui-dialog [data-dialog-content] {
  padding: 24px;
}
.ui-dialog.wide {
  width: min(1024px, calc(100vw - 32px));
}
.login-dialog {
  width: 1024px;
  max-width: calc(100vw - 32px);
  height: 724px;
  max-height: 90dvh;
  overflow: hidden;
}
.login-dialog[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-visual {
  position: relative;
  overflow: hidden;
  background: #14242a;
}
.login-visual video,
.login-visual > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login-visual.video-ready > img {
  opacity: 0;
}
.login-content {
  position: relative;
  background: radial-gradient(ellipse at top right, #265e72 0%, #22292b 70%);
  padding: 98px 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-mark {
  width: 84px;
  height: 84px;
  background: #171b1c;
  border-radius: 24px;
  position: relative;
  display: grid;
  place-items: center;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}
.login-mark > span {
  position: absolute;
  right: 9px;
  top: 12px;
  font-size: 10px;
  letter-spacing: -1px;
  background: #fff;
  color: #202728;
  border-radius: 4px;
  padding: 0 2px;
  line-height: 13px;
}
.login-content h2 {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 18px 0 42px;
}
.social-login {
  width: 100%;
  height: 46px;
  background: #fff;
  border-radius: 12px;
  color: #182024;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.google-letter {
  font: 700 26px Arial;
  color: #4285f4;
}
.line-letter {
  color: #05c655;
  font-size: 12px;
  font-weight: 800;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  color: #a1afb3;
  font-size: 12px;
  margin: 24px 0 32px;
  white-space: nowrap;
}
.login-divider:before,
.login-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: #3a4143;
}
.social-icons {
  display: flex;
  gap: 20px;
}
.social-icons button {
  width: 56px;
  height: 56px;
  background: #ffffff05;
  border-radius: 18px;
  font-size: 25px;
  font-weight: 700;
}
.backup-email {
  font-size: 13px;
  color: #b1c0c5;
  text-align: center;
  margin-top: 40px;
}
.backup-email button {
  color: #e4f8ff;
  text-decoration: underline;
  font-weight: 600;
}
.login-terms {
  font-size: 11px;
  line-height: 20px;
  color: #687377;
  text-align: center;
  margin-top: auto;
  padding-top: 40px;
}
.login-terms a {
  text-decoration: underline;
  color: #a5b3b7;
}
.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
}
.primary-button {
  background: var(--gradient);
  color: #082128;
}
.secondary-button {
  background: #2a3437;
  color: #eefbff;
  border: 1px solid #435154;
}
.form-field {
  display: block;
  margin-bottom: 18px;
}
.form-field > span {
  display: block;
  font-size: 13px;
  color: #b3c5cd;
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: #121a1d;
  border: 1px solid #425257;
  border-radius: 10px;
  padding: 12px;
  outline: none;
  font-size: 14px;
  color: #eefbff;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: #57d8ef;
}
.dialog-copy {
  color: #a7b8be;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.demo-label {
  display: inline-flex;
  align-items: center;
  color: #91e5f7;
  background: #143c484f;
  border: 1px solid #387482;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  margin-bottom: 14px;
}
.toast-region {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(90vw, 520px);
  pointer-events: none;
}
.toast {
  padding: 13px 18px;
  background: #25363b;
  border: 1px solid #527581;
  box-shadow: 0 4px 25px #0007;
  border-radius: 12px;
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}
.mobile-navigation {
  margin: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(380px, 100vw);
  border-radius: 0;
  padding: 24px;
}
.mobile-navigation a,
.mobile-navigation > button {
  display: block;
  padding: 14px 0;
  font-size: 14px;
}
.mobile-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  margin-bottom: 24px;
}
.mobile-nav-top button {
  font-size: 28px;
}
.mobile-navigation details {
  border-bottom: 1px solid #2f393c;
}
.mobile-navigation summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
}
.mobile-navigation details strong {
  display: block;
  font-size: 12px;
  color: #758d96;
  padding: 10px 6px;
}
.mobile-navigation details a {
  padding: 9px 14px;
  font-size: 13px;
}
.mobile-navigation .primary-button {
  padding: 12px;
  margin-top: 20px;
}
.pricing-section {
  padding: calc(var(--header-height) + 85px) 24px 70px;
  text-align: center;
}
.pricing-section h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}
.pricing-section > .subtitle {
  font-size: 16px;
  color: #9eaeb3;
  margin: 0 0 70px;
}
.billing-toggle {
  display: inline-flex;
  background: #202628;
  border-radius: 16px;
  padding: 4px;
  gap: 0;
  margin-bottom: 32px;
}
.billing-toggle button {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  color: #9aabad;
}
.billing-toggle button.active {
  background: #2e383b;
  color: #eefbff;
}
.billing-toggle small {
  background: #f5e8b6;
  color: #111;
  padding: 0 4px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  border-radius: 2px;
}
.plan-grid {
  max-width: 1066px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: auto;
  text-align: left;
}
.plan-card {
  background: #1c2223;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan-card.pro {
  background: linear-gradient(#29414b, #1c2223 60%);
  border-color: #c2f1fe;
}
.plan-card.ultra {
  background: linear-gradient(#46422a, #242522 60%);
}
.plan-card h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.plan-card.pro h2 {
  color: #94ecff;
}
.plan-card.ultra h2 {
  color: #fff0b5;
}
.plan-card .plan-desc {
  font-size: 12px;
  color: #b3c1c4;
  margin: 3px 0 12px;
  min-height: 18px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}
.plan-price strong {
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.plan-price span {
  font-size: 14px;
}
.plan-price del {
  font-size: 14px;
  color: #7b898e;
}
.billed-annually {
  font-size: 12px;
  color: #82969e;
  min-height: 24px;
}
.plan-credits {
  font-size: 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  margin: 20px 0 8px;
}
.plan-progress {
  height: 6px;
  border-radius: 20px;
  background: #65747c55;
  margin: 0 0 14px 18px;
  overflow: hidden;
}
.plan-progress span {
  display: block;
  height: 100%;
  background: #c1f2ff;
  border-radius: inherit;
}
.plan-card.pro .plan-progress span {
  background: #56d4f4;
}
.plan-card.ultra .plan-progress span {
  background: #ffd42b;
}
.plan-buy {
  height: 48px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #09181c;
  border-radius: 12px;
  background: #ecfcff;
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  margin-bottom: 20px;
}
.pro .plan-buy {
  background: #55d3f3;
}
.ultra .plan-buy {
  background: linear-gradient(100deg, #ffedb1, #ffd12a);
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.plan-features li {
  display: flex;
  gap: 10px;
  align-items: start;
}
.plan-features li:before {
  content: "✓";
  font-size: 18px;
  color: #d1f1fa;
}
.plan-unlimited {
  border-top: 1px solid #c7dce522;
  padding-top: 18px;
  margin-top: 18px;
}
.plan-unlimited h3 {
  font-size: 14px;
  font-weight: 600;
  color: #79898f;
  margin-bottom: 10px;
}
.plan-unlimited p {
  font-size: 13px;
  color: #8b9b9f;
  line-height: 2.2;
}
.ultra .plan-unlimited h3,
.ultra .plan-unlimited p {
  color: #f9ebc1;
}
.popular-label {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  background: #c0f3ff;
  color: #182931;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 6px;
}
.pricing-compact {
  padding: 20px 0;
}
.pricing-compact h1,
.pricing-compact > .subtitle {
  display: none;
}
.pricing-compact .plan-card {
  padding: 24px 18px;
}
.parameter-groups {
  display: grid;
  gap: 22px;
}
.parameter-group h3 {
  font-size: 14px;
  color: #a6b9c2;
  margin-bottom: 10px;
}
.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.option-buttons button {
  border: 1px solid #3d4b50;
  background: #232d31;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.option-buttons button.active {
  color: #69e2fd;
  border-color: #60d3ec;
  background: #223d47;
}
.model-picker {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  min-height: 360px;
  max-height: 60vh;
}
.model-vendors {
  overflow: auto;
  border-right: 1px solid #354247;
  padding-right: 12px;
}
.model-vendors button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  width: 100%;
  text-align: left;
  border-radius: 8px;
  font-size: 13px;
}
.model-vendors button.active {
  background: #29414a;
  color: #65dcf8;
}
.model-options {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.model-option {
  border: 1px solid #38484d;
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: center;
}
.model-option:hover,
.model-option.active {
  border-color: #5ed9ef;
  background: #21353d;
}
.model-option img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
}
.model-option strong {
  display: block;
  font-size: 14px;
}
.model-option p {
  font-size: 11px;
  color: #9fb2bc;
  margin-top: 4px;
}
.model-option small {
  margin-left: auto;
  color: #a9cbd5;
  font-size: 11px;
  white-space: nowrap;
}
.model-icon {
  width: 21px;
  height: 21px;
  object-fit: contain;
}
.result-preview img,
.result-preview video {
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: 12px;
  background: #101517;
}
.result-meta {
  font-size: 12px;
  color: #9cafb8;
  line-height: 1.8;
  margin-top: 16px;
  overflow-wrap: anywhere;
}
.asset-library {
  padding: 16px 24px 40px;
}
.library-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #2e393e;
  padding-bottom: 14px;
  margin-bottom: 20px;
  font-size: 17px;
  font-weight: 500;
}
.library-tabs a.active {
  color: #67d7f0;
}
.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.filter-tabs {
  display: flex;
  gap: 10px;
}
.filter-tabs button {
  padding: 8px 18px;
  border-radius: 8px;
  color: #a6b8c2;
  background: #1e282d;
  font-size: 13px;
}
.filter-tabs button.active {
  color: #72dafa;
  background: #2c4149;
}
.library-toolbar input {
  border: 1px solid #38494e;
  background: #202a2e;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  min-width: 260px;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.empty-library {
  grid-column: 1/-1;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #899fa9;
  font-size: 14px;
  text-align: center;
  gap: 20px;
}
.empty-symbol {
  font-size: 70px;
  color: #50636b;
  margin-bottom: 4px;
}
.asset-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid #34454c;
  background: #1b252a;
  overflow: hidden;
  cursor: pointer;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.asset-card img,
.asset-card video {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.asset-card .asset-text {
  flex: 1;
  min-height: 180px;
  padding: 28px 16px 12px;
  font-size: 14px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: linear-gradient(150deg, #253541, #151c24);
}
.asset-card-footer {
  padding: 12px 14px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.asset-card-footer button {
  margin-left: auto;
  color: #95b7c7;
}
.asset-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #18272bc9;
  z-index: 1;
}
.add-element-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  flex-direction: column;
  gap: 16px;
  border: 1px dashed #4b6c7b;
  border-radius: 12px;
  background: #1a262d;
  font-size: 16px;
}
.add-element-card > span:first-child {
  font-size: 44px;
  color: #6acae4;
}
.upload-drop {
  border: 1px dashed #597985;
  min-height: 155px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  margin-bottom: 18px;
  cursor: pointer;
  color: #8ec7db;
  text-align: center;
  gap: 8px;
  font-size: 14px;
}
.upload-drop.dragging {
  border-color: #67dbf5;
  background: #234550;
}
.upload-drop small {
  font-size: 11px;
  color: #849ba7;
}
.effect-generator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 34px;
  text-align: left;
}
.generator-box {
  background: #1c2428;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #35444a;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.generator-model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #415258;
  border-radius: 12px;
  font-size: 14px;
}
.generator-model img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}
.generator-model strong {
  margin-right: auto;
  font-weight: 500;
}
.generator-prompt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.generator-prompt label {
  font-size: 13px;
  color: #c4d5dc;
}
.generator-prompt textarea {
  resize: vertical;
  min-height: 120px;
  border: 1px solid #394a52;
  background: #151e22;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  outline: none;
  color: #edfaff;
  line-height: 1.5;
}
.prompt-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #a9c3d0;
}
.prompt-tools button {
  padding: 4px 9px;
  border: 1px solid #3d5865;
  border-radius: 8px;
}
.prompt-count {
  margin-left: auto;
  color: #6b8999;
}
.generator-params {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #344b58;
  border-radius: 10px;
  background: #263238;
  font-size: 13px;
  cursor: pointer;
}
.generator-box > button[data-action="generate"] {
  margin-top: auto;
  min-height: 48px;
  width: 100%;
  border-radius: 12px;
  background: var(--gradient);
  color: #0e272e;
  font-weight: 600;
}
.effect-preview {
  border-radius: 16px;
  overflow: hidden;
  background: #0c1013;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.effect-preview > img,
.effect-preview > video {
  width: 100%;
  height: 100%;
  max-height: 580px;
  object-fit: contain;
}
.effect-preview > button {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: #142735b3;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.compact-generator {
  max-width: 1000px;
  margin: 32px auto;
}
.effects-library {
  padding: 24px;
}
.effects-library h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
}
.effect-categories {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.effect-categories button {
  font-size: 13px;
  border: 1px solid #344953;
  border-radius: 8px;
  padding: 8px 15px;
}
.effect-categories button.active {
  background: #5cd5ee;
  color: #0b2630;
}
.effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 20px;
}
.effect-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
}
.effect-tile > div {
  aspect-ratio: 3/4;
  background: #1d2b33;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.effect-tile img,
.effect-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.effect-tile video {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.effect-tile:hover video.is-playing {
  opacity: 1;
}
.no-script-note {
  padding: 20px;
  text-align: center;
  color: #86b2c6;
  font-size: 13px;
}
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.not-found h1 {
  font-size: 38px;
}
.not-found a {
  color: #52d5f4;
}
@media (max-width: 1250px) {
  .site-toolbar {
    gap: 24px;
  }
  .toolbar-actions {
    gap: 18px;
  }
  .desktop-nav {
    gap: 0;
  }
  .nav-trigger {
    padding: 8px;
  }
  .toolbar-actions .desktop-only[data-action="download-app"] {
    display: none;
  }
}
@media (max-width: 1000px) {
  .site-toolbar {
    gap: 16px;
  }
  .toolbar-actions {
    gap: 16px;
  }
  .desktop-nav .nav-trigger {
    font-size: 12px;
    padding: 8px 6px;
  }
  .workspace-content #create-form-panel-host {
    width: 390px;
  }
  .nav-panel {
    max-width: calc(100vw - 160px);
  }
  .plan-grid {
    gap: 16px;
  }
  .plan-card {
    padding: 22px 18px;
  }
  .plan-price strong {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  :root {
    --header-height: 108px;
    --create-tab-bar-height: 64px;
  }
  .sale-banner {
    font-size: 13px;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 32px 0 8px;
  }
  .sale-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    flex: 1;
  }
  .sale-copy-track {
    animation: announcement-scroll 15s linear infinite;
  }
  .sale-copy-track > span {
    padding-right: 48px;
    font-size: 14px;
  }
  .sale-copy-track [aria-hidden="true"] {
    display: block;
  }
  .sale-close {
    right: 8px;
  }
  .sale-cta {
    font-size: 11px;
    padding: 4px 10px;
  }
  .site-toolbar {
    padding: 0 20px;
    height: 64px;
    background: #0f1314;
  }
  .brand-logo > .iconify {
    font-size: 36px;
  }
  .desktop-nav,
  .desktop-only {
    display: none !important;
  }
  .toolbar-actions {
    gap: 18px;
    font-size: 14px;
  }
  .mobile-menu-trigger {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    width: 24px;
    padding: 4px;
  }
  .mobile-menu-trigger span {
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: #d9f0f8;
  }
  .mobile-menu-trigger span:nth-child(2) {
    width: 12px;
  }
  .workspace-sidebar {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 64px;
    padding: 0 6px;
    border: 0;
    border-top: 1px solid #34434a;
    background: #11191bf5;
    backdrop-filter: blur(12px);
  }
  .workspace-sidebar nav {
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
  }
  .workspace-sidebar nav a {
    height: 63px;
    flex: 1;
    border-radius: 0;
    font-size: 10px;
    gap: 2px;
  }
  .workspace-sidebar nav a > span:first-child {
    font-size: 21px;
  }
  .sidebar-bottom {
    display: none;
  }
  .workspace-content {
    margin-left: 0;
    padding-top: var(--header-height);
    padding-bottom: 64px;
  }
  .workspace-home {
    height: auto;
    min-height: calc(100dvh - 172px);
  }
  .workspace-home > div {
    padding: 28px 16px;
  }
  .workspace-home h1 {
    font-size: 24px;
    line-height: 1.35;
  }
  .workspace-content #create-form-panel-host {
    width: 100%;
    padding: 0 16px 20px;
  }
  .workspace-content > div > div.w-full.md\:flex {
    height: auto;
    min-height: 0;
  }
  .workspace-content .md\:h-without-header {
    min-height: 0;
  }
  .account-popover {
    right: -44px;
  }
  .user-controls {
    gap: 9px;
  }
  .subscribe-chip {
    display: none;
  }
  .header-credit {
    font-size: 12px;
  }
  .login-dialog {
    height: auto;
    min-height: 600px;
    max-width: calc(100vw - 24px);
    max-height: 94dvh;
  }
  .login-dialog[open] {
    display: block;
  }
  .login-visual {
    display: none;
  }
  .login-content {
    padding: 52px 24px 26px;
    min-height: 600px;
  }
  .login-mark {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    font-size: 46px;
  }
  .login-content h2 {
    font-size: 17px;
    margin: 18px 0 30px;
  }
  .backup-email {
    margin-top: 26px;
    font-size: 12px;
  }
  .login-terms {
    padding-top: 32px;
  }
  .pricing-section {
    padding: calc(var(--header-height) + 40px) 18px 40px;
  }
  .pricing-section h1 {
    font-size: 30px;
  }
  .pricing-section > .subtitle {
    font-size: 13px;
    margin-bottom: 30px;
  }
  .billing-toggle {
    margin-bottom: 24px;
  }
  .plan-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 430px;
  }
  .plan-card {
    padding: 24px;
  }
  .plan-price strong {
    font-size: 36px;
  }
  .model-picker {
    grid-template-columns: 105px 1fr;
    gap: 10px;
  }
  .model-vendors {
    padding-right: 6px;
  }
  .model-vendors button {
    font-size: 12px;
    padding: 10px 5px;
  }
  .model-option {
    padding: 10px;
    gap: 8px;
  }
  .model-option img {
    display: none;
  }
  .model-option strong {
    font-size: 13px;
  }
  .model-option small {
    display: none;
  }
  .ui-dialog [data-dialog-content] {
    padding: 18px;
  }
  .dialog-heading {
    padding: 16px 18px;
  }
  .asset-library {
    padding: 16px 16px 35px;
  }
  .library-toolbar {
    flex-wrap: wrap;
  }
  .library-toolbar input {
    min-width: 0;
    width: 100%;
    order: -1;
  }
  .filter-tabs {
    gap: 8px;
    flex-wrap: wrap;
  }
  .filter-tabs button {
    font-size: 12px;
    padding: 7px 14px;
  }
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .asset-card img,
  .asset-card video {
    height: 180px;
  }
  .asset-card .asset-text {
    font-size: 12px;
    padding: 36px 12px 12px;
  }
  .empty-library {
    min-height: 55vh;
    font-size: 13px;
  }
  .library-tabs {
    font-size: 16px;
    gap: 26px;
  }
  .effect-generator {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .effect-preview {
    min-height: 320px;
  }
  .generator-box {
    padding: 16px;
  }
  .effects-library {
    padding: 20px 16px;
  }
  .effects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .effect-categories {
    flex-wrap: nowrap;
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 8px;
  }
  .effect-categories button {
    padding: 7px 12px;
    flex: none;
    font-size: 12px;
  }
  .toast-region {
    bottom: 80px;
  }
  .dialog-actions {
    flex-wrap: wrap;
  }
  .feature-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
  }
  .public-content .hero-scroll {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .model-marquee,
  .template-row > .flex,
  .testimonial-row > .flex {
    animation: none;
    transform: none;
  }
}

.nav-flat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 2px 16px;
  min-width: 520px;
}
.nav-flat-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  font-size: 13px;
  border-radius: 8px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.nav-flat-list .nav-label { min-width: 0; }
.nav-model-list { min-width: 680px; }
.nav-flat-list a:hover {
  background: #2e373a;
  color: #53d7f3;
}
.nav-flat-list img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
}
.native-effect-form [data-action="generate"]:disabled {
  opacity: 0.5;
}
.native-effect-form [data-action="generate"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.public-content [contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: #697277;
  pointer-events: none;
}
.public-content [contenteditable] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.public-content form button[data-action="generate"].has-input {
  background: var(--gradient);
}
.public-content form[data-generation] {
  min-width: 0;
}
.native-effect-form .preview-chips {
  justify-content: center;
}
.native-effect-form [data-action="upload"] {
  min-height: 180px;
}
.public-content [data-effect-surface] {
  content-visibility: visible;
}
.sidebar-mask {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.workspace-sidebar .iconify {
  font-size: 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.public-content > article {
  padding-top: calc(var(--header-height) + 32px);
  padding-bottom: 64px;
}

.inline-works {
  width: 100%;
  min-height: 500px;
  padding: 24px;
  background: #191e20;
  border-radius: 12px;
}
.prompt-expanded [class*="line-clamp"] {
  -webkit-line-clamp: unset;
  max-height: 220px;
  overflow: auto;
}
.workspace-content [data-action="upload"][role="button"]:focus-visible {
  outline: 2px solid #5bddf3;
  outline-offset: 2px;
}

:where(.i-i\:logo-txt) {
  display: inline-block;
  width: 4.06em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 77 19' width='77' height='19'%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_550_6269' x1='22.5123' y1='9.92584' x2='74.7203' y2='9.92584' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='white'/%3E %3Cstop offset='1' stop-color='%2346D6FE'/%3E %3C/linearGradient%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath d='M48.1282 5.6377C49.9771 5.63776 51.5025 6.27723 52.7043 7.55469C53.9061 8.8322 54.5071 10.4123 54.5071 12.2949C54.5071 12.6394 54.4777 13.0009 54.4231 13.3789C54.402 13.5216 54.2761 13.6308 54.1292 13.6309H45.2874C45.0774 13.631 44.9341 13.8455 45.0139 14.043C45.535 15.3498 46.6745 16.0009 48.4309 16.001C49.5778 16.0009 50.4644 15.6435 51.0989 14.9336C51.1955 14.8286 51.3472 14.7949 51.469 14.8662L53.5911 16.0898C53.7422 16.1781 53.7887 16.3838 53.6838 16.5225C52.4442 18.1444 50.6787 18.9511 48.3801 18.9512C46.296 18.9511 44.6232 18.3211 43.3625 17.0605C42.1019 15.7999 41.471 14.211 41.4709 12.2949C41.4709 10.3788 42.0935 8.81107 43.3372 7.54199C44.581 6.27292 46.1784 5.63776 48.1282 5.6377ZM63.1555 5.6377C65.0044 5.63778 66.5299 6.27724 67.7317 7.55469C68.9335 8.83219 69.5344 10.4123 69.5344 12.2949C69.5344 12.6394 69.505 13.0009 69.4504 13.3789C69.4293 13.5216 69.3034 13.6307 69.1565 13.6309H60.3147C60.1047 13.631 59.9614 13.8455 60.0413 14.043C60.5623 15.3496 61.7012 16.0008 63.4573 16.001C64.6044 16.001 65.4917 15.6436 66.1262 14.9336C66.2229 14.8287 66.3745 14.7949 66.4963 14.8662L68.6184 16.0898C68.7695 16.1781 68.8161 16.3838 68.7112 16.5225C67.4715 18.1444 65.706 18.9511 63.4075 18.9512C61.3233 18.9511 59.6505 18.321 58.3899 17.0605C57.1293 15.7999 56.4984 14.211 56.4983 12.2949C56.4983 10.3788 57.1208 8.81107 58.3645 7.54199C59.6084 6.27292 61.2057 5.63776 63.1555 5.6377ZM34.1877 0.948242C36.419 0.948353 38.1964 2.02003 39.5159 4.16309C39.5285 4.18408 39.5368 4.20557 39.5452 4.22656C40.6922 7.23528 39.9279 9.74407 37.2512 11.7695C37.1882 11.8156 37.108 11.841 37.0325 11.8242C36.81 11.7824 36.6881 11.9878 36.7717 12.1348L40.3059 18.1572C40.4193 18.3547 40.2809 18.5986 40.054 18.5986H36.9817C36.8769 18.5984 36.7801 18.5434 36.7297 18.4512H36.7258L33.3254 12.6182C33.2708 12.5259 33.1742 12.4717 33.0735 12.4717H30.9006C30.7371 12.4721 30.6067 12.602 30.6067 12.7656V18.3047C30.6063 18.4683 30.4764 18.5986 30.3127 18.5986H27.4211C27.2578 18.5983 27.1275 18.4681 27.1272 18.3047V1.24219C27.1273 1.07861 27.2576 0.948575 27.4211 0.948242H34.1877ZM10.1614 0.948242C10.2874 0.948242 10.3967 1.02787 10.4387 1.14551L16.4573 18.207C16.5245 18.4003 16.3815 18.5975 16.1799 18.5977H13.2756C13.1496 18.5976 13.0403 18.518 12.9983 18.4004L12.0149 15.6143C11.9728 15.4967 11.8636 15.417 11.7375 15.417H4.90845C4.7826 15.4171 4.66898 15.4966 4.6311 15.6182L3.70728 18.3926C3.66524 18.5142 3.55575 18.5936 3.42993 18.5938H0.294189C0.0926929 18.5935 -0.0502316 18.3921 0.0168457 18.2031L5.98853 1.14551C6.03052 1.02793 6.13992 0.948363 6.26587 0.948242H10.1614ZM74.8752 1.16309C75.039 1.16328 75.1692 1.28635 75.1692 1.44141V18.3115C75.1691 18.4665 75.0389 18.5906 74.8752 18.5908H72.2102C72.0467 18.5905 71.9164 18.4664 71.9163 18.3115V1.44141C71.9163 1.28641 72.0466 1.16338 72.2102 1.16309H74.8752ZM22.7151 1.16211C22.8895 1.16211 23.0282 1.29413 23.0286 1.45898V18.293C23.0284 18.458 22.8896 18.5898 22.7151 18.5898H19.634C19.4598 18.5895 19.3207 18.4578 19.3206 18.293V1.45898C19.3209 1.29432 19.4599 1.16241 19.634 1.16211H22.7151ZM8.5354 5.76367C8.44282 5.49913 8.06894 5.50387 7.98071 5.76855L5.96313 11.7822C5.90061 11.971 6.0434 12.1677 6.24048 12.168H10.3801C10.5818 12.168 10.7247 11.9665 10.6575 11.7773L8.5354 5.76367ZM48.1282 8.5625C47.2542 8.56255 46.5307 8.78604 45.9592 9.23145C45.4847 9.60116 45.1436 10.0926 44.9377 10.71C44.8708 10.9031 45.0104 11.1092 45.2161 11.1094H50.8723C51.0738 11.1092 51.2123 10.9119 51.1536 10.7188C50.9435 10.0549 50.5992 9.54634 50.1077 9.19336C49.5278 8.77321 48.8676 8.56256 48.1282 8.5625ZM63.1555 8.5625C62.2815 8.56255 61.558 8.78604 60.9866 9.23145C60.512 9.60116 60.1709 10.0926 59.9651 10.71C59.8982 10.903 60.037 11.1089 60.2424 11.1094H65.8997C66.1012 11.1092 66.2396 10.9119 66.1809 10.7188C65.9708 10.0548 65.6257 9.54635 65.134 9.19336C64.5543 8.77336 63.8948 8.56257 63.1555 8.5625ZM30.9006 4.20117C30.7371 4.20157 30.6067 4.33147 30.6067 4.49512V9.12598C30.6068 9.28951 30.7372 9.41953 30.9006 9.41992H34.1877C34.8431 9.41983 35.4067 9.16379 35.8772 8.65137C36.3477 8.13876 36.5832 7.52049 36.5833 6.79785C36.5832 6.07512 36.3478 5.46128 35.8772 4.95703C35.4066 4.45284 34.8432 4.20126 34.1877 4.20117H30.9006Z' fill='url(%23paint0_linear_550_6269)'/%3E%3C/g%3E%3C/svg%3E");
}
:where(.i-i\:logo-ico) {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' width='84' height='84'%3E%3Cdefs%3E%3CclipPath id='clip0_223_3425'%3E %3Crect width='48.2808' height='53.4844' fill='white' transform='translate(20.3438 15.2578)'/%3E %3C/clipPath%3E%3C/defs%3E%3Cg fill='none'%3E%3Crect width='84' height='84' rx='20' fill='%23191B1C'/%3E %3Cg clip-path='url(%23clip0_223_3425)'%3E %3Cpath d='M27.5892 68.3136C25.1521 68.3136 23.209 66.3376 23.209 63.9335V37.2571C23.209 34.82 25.185 32.877 27.5892 32.877H43.1998C45.6369 32.877 47.5799 34.853 47.5799 37.2571C47.5799 39.6613 45.6039 41.6373 43.1998 41.6373H31.9694V63.9335C31.9694 66.3376 29.9933 68.3136 27.5892 68.3136Z' fill='white'/%3E %3Cpath d='M60.2265 67.129C59.3702 68.2158 58.0858 68.7757 56.8014 68.7757C55.8463 68.7757 54.8583 68.4463 54.035 67.7877L38.2268 55.0423C36.7777 53.8896 36.2178 51.9136 36.8435 50.1681C37.4693 48.4226 39.116 47.237 40.9932 47.237H42.7387C48.0739 47.237 52.3883 42.8898 52.3883 37.5874C52.3883 32.2522 48.041 27.9378 42.7387 27.9378H24.7239C22.3198 27.9049 20.3438 25.9618 20.3438 23.5247C20.3438 21.0876 22.3198 19.1445 24.7239 19.1445H42.7387C44.8135 19.1445 46.8225 19.4739 48.6668 20.1325V23.1624C48.6668 27.7732 52.3883 31.4947 56.999 31.4947H60.1277C60.7864 33.4048 61.1486 35.4467 61.1486 37.5874C61.1486 44.7999 56.999 51.0244 50.9721 54.0543L59.502 60.9374C61.445 62.4524 61.7414 65.2188 60.2265 67.129Z' fill='white'/%3E %3Cpath d='M58.9091 21.4827C58.9421 21.5815 58.9091 21.6145 58.8433 21.6474C58.6786 21.6474 58.0858 21.6803 57.9541 21.6474C57.9211 21.6145 57.8882 21.5815 57.8882 21.4827C57.9541 21.2522 58.1517 20.7911 58.3493 20.4947C58.3822 20.4288 58.481 20.4288 58.5139 20.4947C58.6457 20.7252 58.8433 21.2851 58.9091 21.4827Z' fill='white'/%3E %3Cpath d='M64.2443 15.2578H57.0318C54.5947 15.2578 52.6187 17.2338 52.6187 19.638V23.129C52.6187 25.5661 54.5947 27.5092 56.9988 27.5092H64.2113C66.6484 27.5092 68.5915 25.5331 68.5915 23.129V19.638C68.6244 17.2338 66.6484 15.2578 64.2443 15.2578ZM61.412 25.3026C61.3132 25.3685 61.1485 25.4014 61.0168 25.4014C60.2922 25.4014 59.9958 24.7757 59.6006 23.9853C59.5677 23.9523 59.5347 23.7876 59.4359 23.7876C59.2054 23.8206 58.8102 23.8206 58.415 23.8206C57.9868 23.8206 57.5258 23.8206 57.394 23.7876C57.3282 23.7876 57.2623 23.9523 57.2294 23.9853C56.9659 24.5122 56.7354 24.9733 56.406 25.2038C56.2414 25.3355 56.0438 25.4014 55.7803 25.4014C55.6486 25.4014 55.5168 25.3685 55.3851 25.3026C55.1216 25.2038 54.5947 24.8415 54.8252 23.8864C54.8252 23.8206 54.8581 23.7547 54.8581 23.6888C54.8911 23.5242 54.9569 23.3266 55.0228 23.096C55.2534 22.4703 55.5498 21.647 55.912 20.7907C56.2743 19.9673 56.6366 19.2099 56.933 18.5841C57.3611 17.7608 57.6904 17.168 58.3491 17.168C59.0407 17.168 59.403 17.7937 59.8311 18.5841C60.0946 19.1769 60.4569 19.9673 60.8192 20.7907C61.1814 21.647 61.5108 22.4703 61.7413 23.096C61.8401 23.4254 61.9389 23.6888 61.9718 23.8864C62.2024 24.8415 61.6754 25.2038 61.412 25.3026ZM65.8251 23.5571C65.7921 23.8864 65.7592 24.1499 65.7263 24.3146C65.5616 25.2697 64.9029 25.3685 64.6395 25.3685C64.376 25.3685 63.7503 25.2697 63.5526 24.3146C63.5197 24.1499 63.4868 23.8535 63.4538 23.5571C63.4209 22.9314 63.388 22.141 63.388 21.2847C63.388 20.4284 63.4209 19.638 63.4538 19.0123C63.4868 18.6829 63.5197 18.4195 63.5526 18.2548C63.7503 17.2997 64.376 17.2009 64.6395 17.2009C64.9029 17.2009 65.5616 17.2997 65.7263 18.2548C65.7592 18.4195 65.7921 18.7159 65.8251 19.0123C65.8909 19.638 65.8909 20.4284 65.8909 21.2847C65.8909 22.141 65.858 22.9314 65.8251 23.5571Z' fill='white'/%3E %3C/g%3E%3C/g%3E%3C/svg%3E");
}
.login-dialog.native-login[open] {
  display: block;
  height: min(85dvh, 725px);
  border: 0;
  background: #222729;
  min-height: 0;
}
.native-login > div {
  height: 100%;
}
.native-login video {
  object-fit: cover;
}

.effects-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.effects-toolbar h1 {
  margin: 0;
}
.effects-toolbar input {
  width: min(320px, 55%);
  padding: 10px 14px;
  border: 1px solid #344953;
  border-radius: 10px;
  background: #1d2528;
  color: #d9eef4;
  font-size: 13px;
}
.recovered-thumbnails {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.recovered-thumbnails img {
  width: 100px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}
.reference-media-shell {
  max-width: 100%;
}
.reference-media-frame {
  max-width: 100%;
}
.editor-reference-thumbnails {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  width: 100%;
}
.editor-reference-thumbnails button {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  position: relative;
}
.editor-reference-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.editor-reference-thumbnails button.selected {
  outline: 2px solid #92ecff;
  outline-offset: -2px;
}

/* Editor controls follow the reference site's field-anchored interaction. */
.editor-icon {
  width: 18px;
  height: 18px;
  flex: none;
  vertical-align: middle;
}
.editor-popover {
  position: fixed;
  z-index: 95;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  color: #edf5f7;
  font-size: 14px;
  outline: none;
  animation: editor-popover-in 150ms ease-out;
  transform-origin: left center;
}
@keyframes editor-popover-in {
  from {
    opacity: 0;
    transform: translateX(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.editor-model-picker {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 16px);
}
.editor-model-vendors {
  width: 270px;
  flex: none;
  padding: 8px;
  border: 1px solid #3a4244;
  border-radius: 12px;
  background: #1a1e1f;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.editor-model-vendors button {
  width: 100%;
  text-align: left;
  border-radius: 12px;
}
.editor-routing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid #292f30;
  border-radius: 0 !important;
}
.editor-routing > svg {
  width: 24px;
  height: 24px;
  color: #51dcfa;
}
.editor-routing strong {
  color: #b7f5f6;
  font-size: 14px;
  font-weight: 500;
}
.editor-routing small {
  display: block;
  margin-top: 4px;
  color: #c4cdcf;
  font-size: 12px;
  line-height: 16px;
}
.editor-routing:hover {
  background: #25292a;
}
.editor-vendor {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 8px;
  font-weight: 500;
}
.editor-vendor.active,
.editor-vendor:hover {
  background: #25292a;
}
.editor-vendor img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.editor-vendor .editor-icon {
  width: 18px;
  margin-left: auto;
  color: #637074;
}
.model-sale,
.model-hot {
  flex: none;
  white-space: nowrap;
  border-radius: 3px;
  background: linear-gradient(100deg, #fff0ae, #ffd527);
  color: #0b1314;
  padding: 1px 3px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
}
.model-hot {
  background: linear-gradient(100deg, #c7fff2, #1fa2ff);
}
.editor-model-list {
  width: 408px;
  flex: none;
  padding: 8px;
  border: 1px solid #3a4244;
  border-radius: 12px;
  background: #1a1e1f;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  animation: editor-popover-in 150ms ease-out;
}
.editor-model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  gap: 8px;
  text-align: left;
}
.editor-model-option:hover,
.editor-model-option.selected {
  background: #252c2e;
}
.editor-model-option.selected .editor-model-name {
  color: #54dcfa;
}
.editor-model-description {
  min-width: 0;
  flex: 1;
}
.editor-model-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
}
.editor-model-name img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.editor-model-name strong {
  font-weight: 500;
}
.editor-model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.editor-model-tags span {
  padding: 2px 4px;
  border-radius: 2px;
  background: #2d3436;
  color: #a2adb1;
  font-size: 10px;
  line-height: 12px;
}
.editor-model-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 700;
  white-space: nowrap;
}
.editor-model-cost del {
  color: #646d70;
}
.model-current-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  background-size: contain;
}
[data-action="model"][aria-expanded="true"] {
  outline: 1px solid #52d9ff;
  outline-offset: -1px;
}
.editor-parameters {
  width: 400px;
  padding: 12px;
  border: 1px solid #3a4244;
  border-radius: 12px;
  background: #1a1e1f;
  overflow: auto;
}
.editor-parameter-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.editor-inline-field {
  border-radius: 6px;
  background: #25292a;
  padding: 6px 12px 12px;
}
.editor-inline-field label {
  display: block;
  margin-bottom: 6px;
  color: #a2adb1;
  font-size: 12px;
  line-height: 16px;
}
.editor-inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.editor-inline-options button {
  flex: 1;
  min-width: 48px;
  padding: 6px;
  border-radius: 6px;
  color: #a2adb1;
  font-size: 14px;
  line-height: 20px;
}
.editor-inline-options button:hover {
  background: #303738;
}
.editor-inline-options button[aria-checked="true"] {
  background: #3d484d;
  color: #53d5f5;
  font-weight: 600;
}
.editor-parameter-group {
  background: #25292a;
  border-radius: 6px;
  padding: 6px 12px 12px;
}
.editor-parameter-group h3 {
  color: #acb5b7;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 0 0 6px;
}
.editor-parameter-options {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: 4px;
}
.editor-parameter-options button {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  min-height: 32px;
  padding: 6px;
  color: #aab4b7;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 150ms;
}
.editor-parameter-options button:hover {
  background: #303637;
}
.editor-parameter-options button.active {
  background: #3b4345;
  color: #cef4ff;
  font-weight: 600;
}
.ratio-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}
.ratio-outline {
  display: inline-block;
  width: 13px;
  max-height: 13px;
  aspect-ratio: var(--ratio, 16/9);
  border: 1.3px solid currentColor;
  border-radius: 2px;
}
.editor-parameter-trigger {
  display: flex;
  align-items: center;
  padding-right: 28px !important;
}
.editor-parameter-trigger > .editor-icon {
  position: absolute;
  right: 4px;
  width: 20px;
  color: #697477;
}
.editor-parameter-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
  color: #c6d0d3;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}
.editor-parameter-summary + .editor-parameter-summary {
  border-left: 1px solid #3b4345;
}
.prompt-history-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.prompt-history-tools button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #a9b3b7;
  font-size: 12px;
}
.prompt-history-tools svg {
  width: 13px;
  height: 13px;
}
.prompt-clear {
  display: inline-flex;
  margin-left: 5px;
  color: #788388;
  vertical-align: middle;
}
.prompt-clear svg {
  width: 14px;
  height: 14px;
}
.editor-upload-slot {
  position: relative;
}
.editor-upload-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 100px;
}
.editor-upload-file {
  position: relative;
  flex: 0 0 calc(25% - 6px);
  min-width: 72px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #25292a;
  cursor: pointer;
}
.editor-upload-file > img,
.editor-upload-file > video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.editor-upload-file audio {
  max-width: 100%;
}
.editor-upload-file .upload-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  color: #182023;
  opacity: 0;
  transition: opacity 150ms;
}
.editor-upload-file .upload-remove svg {
  width: 15px;
  height: 15px;
}
.upload-file-hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: #0009;
  opacity: 0;
  transition: opacity 150ms;
}
.editor-upload-file:hover .upload-file-hover,
.editor-upload-file:hover .upload-remove,
.editor-upload-file:focus-within .upload-remove {
  opacity: 1;
}
.upload-more {
  display: grid;
  place-items: center;
  background: #101617d9;
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.upload-add {
  border: 1px dashed #475154;
  display: grid;
  place-items: center;
  color: #acb6b8;
}
.editor-upload-slot.is-dragging {
  outline: 1px dashed #54dafa;
  outline-offset: 3px;
  border-radius: 12px;
}
.upload-preview-open {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.upload-preview-open > img,
.upload-preview-open > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.prompt-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prompt-optional {
  color: #697478;
}
[data-action="inspire"] .editor-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
}
.editor-elements {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 0;
  background: #1a1e1f;
  animation: editor-popover-in 180ms ease-out;
}
.editor-elements-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.editor-elements-heading h2 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}
.editor-elements-heading > button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #25292a;
}
.editor-elements-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.editor-elements-filters {
  display: flex;
  gap: 8px;
}
.editor-elements-filters button {
  border-radius: 999px;
  padding: 4px 10px;
  color: #a7b0b3;
  font-size: 14px;
  line-height: 20px;
}
.editor-elements-filters button:hover {
  background: #303738;
}
.editor-elements-filters button.active {
  background: #cef4ff;
  color: #0b171e;
  font-weight: 700;
}
.editor-elements-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  height: 36px;
  padding: 4px 10px;
  border: 1px solid #333c3e;
  border-radius: 12px;
  background: #25292a;
  color: #657175;
}
.editor-elements-search:focus-within {
  border-color: #57d9ff;
}
.editor-elements-search input {
  width: 100%;
  min-width: 0;
  outline: none;
  background: transparent;
  color: #edf5f7;
  font-size: 14px;
}
.editor-elements-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
}
.editor-elements-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 24px;
}
.editor-element-card,
.editor-element-create {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #25292a;
  overflow: hidden;
  text-align: left;
}
.editor-element-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editor-element-create {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #a0acae;
  font-size: 14px;
  font-weight: 600;
}
.editor-element-create svg {
  width: 28px;
  height: 28px;
  stroke-width: 4;
}
.element-kind,
.element-example {
  position: absolute;
  top: 6px;
  z-index: 1;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.element-kind {
  left: 6px;
  background: #101617;
}
.element-example {
  right: 6px;
  background: #cef4ff;
  color: #142027;
}
.element-prompt {
  position: absolute;
  inset: 40px 12px 48px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  color: #d2dde0;
  overflow: hidden;
  word-break: break-word;
}
.editor-element-card strong {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 24px 12px 10px;
  background: linear-gradient(transparent, #111a1db0);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.element-use {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 6px;
  text-align: center;
  color: #071a20;
  font-size: 14px;
  font-weight: 600;
  background: var(--gradient);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 150ms;
}
.editor-element-card:hover .element-use,
.editor-element-card:focus-visible .element-use {
  opacity: 1;
}
.elements-empty {
  padding: 32px 12px;
  color: #9da9ad;
}
.editor-popover button:focus-visible {
  outline-offset: -2px;
}
@media (max-width: 767px) {
  .editor-elements {
    left: 0 !important;
    padding: 16px 16px 0;
    z-index: 90;
  }
  .editor-elements-toolbar {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .editor-elements-search {
    width: 100%;
  }
  .editor-elements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editor-upload-file {
    flex-basis: calc(33.333% - 6px);
  }
  .editor-upload-file .upload-remove {
    opacity: 1;
  }
  .editor-parameters {
    width: 400px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .editor-popover,
  .editor-model-list {
    animation: none;
  }
}
.parameter-premium {
  position: absolute;
  top: -2px;
  width: 12px;
  height: 12px;
  right: 3px;
  font-size: 10px;
  color: #e9cc90;
  line-height: 12px;
}
.editor-frame-slot .editor-upload-files {
  min-height: 0;
}
.editor-frame-slot .editor-upload-file {
  flex-basis: 100%;
  min-width: 0;
  width: 100%;
}
.editor-slot-disabled {
  display: none !important;
}
[data-original-cost] {
  margin-left: 4px;
  color: #6d7c80;
  text-decoration: line-through;
}
.editor-upload-files .upload-audio-icon {
  font-size: 28px;
}
@media (hover: none) {
  .editor-upload-file .upload-remove {
    opacity: 1;
  }
}
.workspace-content [data-action="generate"]:disabled .generation-cost {
  color: #a2adb1;
}
.element-editor-dialog {
  width: 480px;
  max-width: calc(100vw - 32px);
  background: #25292a;
  border: 1px solid #3b4345;
  border-radius: 24px;
  padding: 24px;
}
.element-editor-dialog::backdrop {
  backdrop-filter: blur(6px);
  background: #0006;
}
.element-editor-dialog .dialog-heading {
  justify-content: center;
  padding: 0;
  margin: 0 0 18px;
  border: 0;
  position: relative;
}
.element-editor-dialog .dialog-heading h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.element-editor-dialog .dialog-heading button {
  position: absolute;
  right: 0;
  top: -4px;
}
.element-editor-dialog [data-dialog-content] {
  padding: 0;
}
.element-type-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2px;
  background: #1a1e1f;
  border-radius: 8px;
}
.element-type-tabs button {
  padding: 5px;
  font-size: 12px;
  line-height: 16px;
  color: #788185;
  border-radius: 6px;
}
.element-type-tabs [aria-selected="true"] {
  background: #25292a;
  color: #effbff;
}
.element-input-area {
  margin-top: 24px;
}
.element-input-area > label:not(.element-file-drop),
.element-name-field > span:first-child {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #a3aeb2;
  margin-bottom: 6px;
}
.element-prompt-box {
  position: relative;
  padding: 12px;
  border-radius: 12px;
  background: #303739;
}
.element-prompt-box textarea {
  display: block;
  width: 100%;
  height: 62px;
  min-height: 62px;
  max-height: 180px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: vertical;
  font-size: 14px;
  line-height: 20px;
}
.element-prompt-box textarea::placeholder,
.element-name-input input::placeholder {
  color: #a3aeb2;
}
.element-prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 12px;
  line-height: 20px;
  color: #758185;
}
.element-prompt-toolbar button {
  padding: 2px 8px;
  border-radius: 20px;
  background: #3b4345;
  color: #effbff;
  font-size: 10px;
}
.element-name-field {
  display: block;
  margin-top: 16px;
}
.element-name-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #303739;
  border-radius: 12px;
  padding: 12px;
  height: 48px;
}
.element-name-input input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
}
.element-name-input > span {
  color: #758185;
  font-size: 12px;
  white-space: nowrap;
}
.element-save {
  display: block;
  width: 224px;
  height: 40px;
  margin: 24px auto 0;
  border-radius: 12px;
  background: var(--gradient);
  color: #081c22;
  font-weight: 700;
  font-size: 14px;
}
.element-save:disabled {
  background: #4b585c;
  cursor: not-allowed;
}
.element-limit {
  text-align: center;
  margin-top: 28px;
  color: #a3aeb2;
  font-size: 12px;
  line-height: 20px;
}
.element-limit a {
  margin-left: 4px;
  color: #4fdfff;
  font-weight: 500;
}
.element-file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 156px;
  border-radius: 12px;
  border: 1px dashed #59676c;
  background: #303739;
  cursor: pointer;
  overflow: hidden;
  font-size: 14px;
  color: #a3aeb2;
}
.element-file-drop > .iconify {
  font-size: 32px;
}
.element-file-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.element-file-drop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #303739;
}
.element-history-list {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 100%;
  max-height: 200px;
  overflow: auto;
  background: #1a1e1f;
  border: 1px solid #465055;
  border-radius: 10px;
  z-index: 1;
  padding: 8px;
  font-size: 12px;
}
.element-history-list button {
  display: block;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  text-align: left;
}
.element-history-list button:hover {
  background: #303739;
}
.user-controls {
  gap: 12px;
}
.credits-trigger {
  background: #25292a;
  border-radius: 999px;
  height: 32px;
  padding: 4px;
  padding-right: 14px;
  gap: 8px;
}
.subscribe-chip {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient);
  color: #071a20;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.header-credit {
  border-left: 1px solid #3b4345;
  padding-left: 10px;
  color: #effbff;
  font-size: 16px;
  font-weight: 700;
  line-height: 14px;
}
.account-trigger {
  height: 32px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: #25292a;
  gap: 10px;
}
.avatar-circle {
  width: 24px;
  height: 24px;
  border: 0;
  font-size: 12px;
}
@media (min-width: 768px) {
  .workspace-sidebar nav a {
    height: 58px;
  }
}
@media (max-width: 767px) {
  .workspace-sidebar {
    display: none;
  }
  .workspace-content {
    padding-bottom: 0;
  }
  .workspace-content #create-form-panel-host {
    padding: 0 0 20px;
  }
  .create-form-submit-dock {
    bottom: 0;
    --create-tab-bar-height: 0px;
  }
  .account-trigger {
    display: none;
  }
  .subscribe-chip {
    display: inline-block;
  }
  .header-credit {
    font-size: 16px;
  }
  .credits-trigger {
    padding-right: 12px;
  }
  .credits-trigger > .chevron {
    display: none;
  }
  .toolbar-actions {
    gap: 16px;
  }
  .sale-cta {
    font-size: 12px;
    padding: 4px 12px;
  }
}
.editor-sheet {
  width: 100%;
  max-width: 100%;
  max-height: 85dvh;
  height: 85dvh;
  margin: 0;
  padding: 0;
  background: #1a1e1f;
  border: 1px solid #3b4345;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  animation: editor-sheet-in 200ms ease-out;
}
.editor-sheet::backdrop {
  background: #000b;
  backdrop-filter: none;
}
.editor-sheet-heading {
  position: relative;
  padding: 22px 50px 16px;
  text-align: center;
}
.editor-sheet-heading h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.editor-sheet-heading > button {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #25292a;
  border-radius: 8px;
}
.editor-sheet-content {
  padding: 0 16px 24px;
  height: calc(100% - 62px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.editor-sheet .editor-routing {
  width: 100%;
  padding: 8px 12px 16px;
}
.editor-sheet .editor-routing strong {
  font-weight: 500;
}
.editor-sheet .editor-routing small {
  font-size: 12px;
}
.editor-mobile-vendor > .editor-vendor {
  width: 100%;
  height: 48px;
  text-align: left;
}
.editor-mobile-vendor {
  margin-top: 8px;
}
.editor-mobile-vendor > .editor-vendor .editor-icon {
  transform: rotate(90deg);
}
.editor-mobile-vendor > .editor-vendor[aria-expanded="true"] .editor-icon {
  transform: rotate(-90deg);
}
.editor-mobile-models {
  border-radius: 12px;
  background: #25292a;
  padding: 8px;
  margin: 8px 0;
}
.editor-mobile-models .editor-model-name {
  color: #effbff;
}
.editor-mobile-models .editor-model-option.selected {
  background: #303739;
}
.editor-mobile-models .editor-model-option {
  padding: 8px;
}
@keyframes editor-sheet-in {
  from {
    transform: translateY(30%);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.editor-parameters.editor-sheet {
  width: 100%;
  height: auto;
  padding: 0;
}
.editor-parameters.editor-sheet .editor-sheet-heading {
  height: 52px;
  padding: 0;
}
.editor-parameters.editor-sheet .editor-sheet-heading h2 {
  display: none;
}
.editor-parameters.editor-sheet .editor-sheet-heading > button {
  top: 12px;
  right: 12px;
  background: transparent;
}
.editor-parameters.editor-sheet .editor-sheet-content {
  height: auto;
  max-height: calc(85dvh - 52px);
  padding: 0 12px 12px;
}
.editor-sheet .editor-routing {
  text-align: left;
  gap: 12px;
}
.editor-sheet .editor-vendor {
  font-size: 14px;
  gap: 8px;
}
.editor-sheet .editor-vendor img {
  width: 32px;
  height: 32px;
}
.editor-mobile-models .editor-model-option {
  flex-direction: row;
  align-items: center;
}
.editor-mobile-models .editor-model-name {
  font-size: 14px;
}
.editor-mobile-models .editor-model-cost {
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
}
.editor-model-option.selected .editor-model-name {
  color: #effbff;
}
.editor-example-sheet .editor-sheet-heading {
  padding-top: 16px;
  padding-bottom: 16px;
}
.editor-example-sheet .editor-sheet-content {
  padding: 0 20px 12px;
  height: calc(100% - 56px);
  overflow: hidden;
}
.mobile-reference-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mobile-reference-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #0f1314;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}
.mobile-reference-canvas > video,
.mobile-reference-canvas > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mobile-reference-canvas > button {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: #0d141ac9;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.mobile-reference-prompt {
  min-height: 0;
  flex: 1;
  background: #25292a;
  padding: 12px;
  margin-top: 16px;
  border-radius: 12px;
  overflow: auto;
  scrollbar-width: none;
}
.mobile-reference-prompt strong {
  display: block;
  font-size: 12px;
  color: #c4fff6;
  margin-bottom: 4px;
}
.mobile-reference-prompt p {
  font-size: 14px;
  line-height: 18px;
}
.mobile-example-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 20px;
}
.mobile-example-dots button {
  width: 8px;
  height: 8px;
  border-radius: 20px;
  background: #465055;
}
.mobile-example-dots [aria-pressed="true"] {
  width: 24px;
  background: #c2f2ff;
}
.mobile-use-template {
  flex: none;
  width: calc(100% + 8px);
  margin-left: -4px;
  height: 48px;
  border-radius: 12px;
  background: var(--gradient);
  color: #031c26;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}
@media (max-height: 700px) {
  .mobile-reference-canvas {
    max-height: 34dvh;
    aspect-ratio: auto;
  }
}
@keyframes announcement-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sale-copy-track {
    animation: none;
  }
}

.billing-confirm{width:min(440px,calc(100vw - 32px));padding:28px;border:1px solid #435157;border-radius:18px;background:#20292c;color:#eefbff;font-family:inherit}.billing-confirm::backdrop{background:#000b;backdrop-filter:blur(6px)}.billing-confirm h2{font-size:24px;margin:0 0 20px}.billing-confirm p{font-size:14px;line-height:1.65;color:#b6cbd3;margin:12px 0}.billing-confirm-actions{display:flex;gap:12px;margin-top:24px}.billing-confirm-actions button{flex:1;min-height:44px;border:1px solid #4d6269;border-radius:10px;font:inherit;cursor:pointer}.billing-confirm-actions [data-dismiss]{background:transparent;color:inherit}.billing-consent{display:flex;gap:10px;font-size:12px;line-height:1.6}.billing-consent input{flex:none;align-self:flex-start;width:18px;height:18px;margin:2px 0 0;accent-color:#4be1f6}.billing-consent a{text-decoration:underline}.billing-status,.billing-test-notice{max-width:992px;margin:20px auto;padding:16px;border:1px solid #455b64;border-radius:12px;color:#bbedf5}.billing-status[hidden]{display:none}