/**
 * Coji design system — token-based CSS.
 *
 * Layer 1: design tokens (palette, typography, spacing, radii, shadows) as
 * CSS custom properties. Layer 2: reusable components (Card, Button, Badge,
 * NavBar, Skeleton, EmptyState, gallery grid). Components reference tokens
 * only — no hard-coded colors/sizes — so the whole UI re-themes from :root.
 */

.native-composer {
  /* ---- Palette ---- */
  --color-bg: #0d0d10;
  --color-bg-2: #111116;
  --color-surface: #18181f;
  --color-surface-2: #212129;
  --color-surface-3: #2a2a34;
  --color-border: #2e2e3a;
  --color-border-strong: #3c3c4a;
  --color-text: #f2f2f7;
  --color-text-muted: #9292a8;
  --color-text-faint: #6a6a80;
  --color-accent: #7c6ff7;
  --color-accent-hover: #9d93ff;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --color-danger: #e0605f;
  --color-success: #46c78a;
  --color-warning: #f0a830;
  --color-info: #5aa9f0;

  /* ---- Typography ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.95rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;

  /* ---- Spacing ---- */
  --gap: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2.5rem;
  --gap-sm: 0.5rem;
  --gap-xs: 0.25rem;

  /* ---- Radii ---- */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.15s;

  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

.native-composer *,
.native-composer *::before,
.native-composer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.native-composer body {
  min-height: 100dvh;
  background: var(--color-bg);
}

/* ---- Layout ---- */

.native-composer .page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.native-composer .card {
  width: 100%;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.native-composer .card-title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.native-composer .card-subtitle {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---- Inputs ---- */

.native-composer textarea,
.native-composer input[type="text"] {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  padding: 0.75rem 1rem;
  resize: vertical;
  transition: border-color 0.15s;
}

.native-composer textarea:focus,
.native-composer input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
}

.native-composer textarea::placeholder,
.native-composer input[type="text"]::placeholder {
  color: var(--color-text-muted);
}

/* ---- Buttons ---- */

.native-composer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.native-composer .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.native-composer .btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.native-composer .btn-primary:not(:disabled):hover {
  background: var(--color-accent-hover);
}

.native-composer .btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.native-composer .btn-ghost:not(:disabled):hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.native-composer .btn-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.native-composer .btn-danger:not(:disabled):hover {
  background: var(--color-danger);
  color: #fff;
}

.native-composer .btn-row {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

/* ---- Credit hint ---- */

.native-composer .credit-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.native-composer .credit-hint strong {
  color: var(--color-text);
}

/* ---- Status / error banners ---- */

.native-composer .banner {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.native-composer .banner-error {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  color: var(--color-danger);
}

.native-composer .banner-info {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent-hover);
}

.native-composer .banner-warn {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
  color: var(--color-warning);
}

/* ---- Failed-clip notice (editor) ---- */

.native-composer .editor-failed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.native-composer .editor-failed__head {
  font-size: 0.85rem;
}
.native-composer .editor-failed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.native-composer .editor-failed__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.native-composer .editor-failed__btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.8rem;
}

/* ---- Spinner ---- */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.native-composer .spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ---- Frame grid ---- */

.native-composer .frame-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

@media (max-width: 480px) {
  .native-composer .frame-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
  }
}

.native-composer .frame-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.native-composer .frame-card__img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.native-composer .frame-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.native-composer .frame-card__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
}

.native-composer .frame-card__caption {
  padding: var(--gap-xs) var(--gap-sm);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  line-height: 1.3;
}

/* ---- Progress bar ---- */

.native-composer .progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.native-composer .progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ---- Elapsed / ETA (wait screens) ---- */

.native-composer .eta {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.native-composer .eta__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ---- Retry prompt field ---- */

.native-composer .retry-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: 1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.native-composer .retry-field label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---- Editor layout ---- */

.native-composer .editor-page {
  min-height: 100dvh;
  padding: 1rem;
  align-items: stretch;
  justify-content: flex-start;
}

.native-composer .editor-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--gap);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .native-composer .editor-layout {
    grid-template-columns: 1fr;
  }
}

.native-composer .editor-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.native-composer .editor-header {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* ---- Player wrapper ---- */

.native-composer .player-wrap {
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* ---- Timeline ---- */

.native-composer .timeline {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem var(--gap-sm);
}

.native-composer .timeline__play-btn {
  padding: 0.3rem 0.6rem;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.native-composer .timeline__scrubber {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.native-composer .timeline__scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}

.native-composer .timeline__scrubber::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  cursor: pointer;
}

.native-composer .timeline__frame-count {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Export row ---- */

.native-composer .editor-export {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* ---- Clip sidebar ---- */

.native-composer .editor-clips {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.native-composer .editor-clips__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: var(--gap-xs);
}

/* ---- Clip card (editor sidebar) ---- */

.native-composer .clip-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--gap-sm);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.native-composer .clip-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.native-composer .clip-card__label {
  font-size: 0.85rem;
  font-weight: 500;
}

.native-composer .clip-card__trim {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* ---- Trim sliders ---- */

.native-composer .trim-label {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.native-composer .trim-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.native-composer .trim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}

.native-composer .trim-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  cursor: pointer;
}

.native-composer .trim-value {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-width: 2.5rem;
  text-align: right;
  flex-shrink: 0;
}

/* =========================================================================
   Design-system components (redesign)
   ========================================================================= */

/* ---- NavBar ---- */

.native-composer .navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.75rem 1.5rem;
  background: color-mix(in srgb, var(--color-bg-2) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.native-composer .navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.native-composer .navbar__brand-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
}

.native-composer .navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.native-composer .navbar__email {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Badge (status) ---- */

.native-composer .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

.native-composer .badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

.native-composer .badge--neutral {
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.native-composer .badge--info {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 35%, transparent);
}

.native-composer .badge--accent {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.native-composer .badge--success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.native-composer .badge--danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

/* ---- Skeleton ---- */

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.native-composer .skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

.native-composer .skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-surface-3) 70%, transparent),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

/* ---- EmptyState ---- */

.native-composer .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  text-align: center;
  padding: var(--gap-xl) var(--gap);
  color: var(--color-text-muted);
}

.native-composer .empty-state__icon {
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.7;
}

.native-composer .empty-state__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.native-composer .empty-state__body {
  font-size: var(--fs-sm);
  max-width: 360px;
}

/* ---- Content wrapper (non-centered pages: gallery) ---- */

.native-composer .content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.native-composer .content__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}

.native-composer .content__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.native-composer .content__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--gap-xs);
}

/* ---- Gallery grid ---- */

.native-composer .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap-lg);
}

.native-composer .gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow
    var(--dur) var(--ease);
}

.native-composer .gallery-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.native-composer .gallery-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.native-composer .gallery-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.native-composer .gallery-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.native-composer .gallery-card__placeholder {
  font-size: 2rem;
  opacity: 0.4;
}

.native-composer .gallery-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap);
}

.native-composer .gallery-card__prompt {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.native-composer .gallery-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.native-composer .gallery-card__date {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

/* ---- Back link ---- */

.native-composer .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--gap);
  transition: color var(--dur) var(--ease);
}

.native-composer .back-link:hover {
  color: var(--color-text);
}

/* Storyboard editor (PromptScreen / review) */
.native-composer .storyboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--color-border, #2a2a35);
  border-radius: var(--radius-md, 12px);
  padding: 0.9rem 1rem;
  background: var(--color-surface-2, rgba(255, 255, 255, 0.02));
}
.native-composer .storyboard__toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm, 0.875rem);
  cursor: pointer;
}
.native-composer .storyboard__toggle input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-accent, #7c5cff);
}
.native-composer .storyboard__frames {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.native-composer .storyboard__frame {
  border: 1px solid var(--color-border, #2a2a35);
  border-radius: var(--radius-sm, 8px);
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.native-composer .storyboard__frame-head {
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted, #8a8a99);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.native-composer .storyboard__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted, #8a8a99);
}
.native-composer .storyboard__field select,
.native-composer .storyboard__field textarea {
  background: var(--color-surface, #16161d);
  color: var(--color-text, #e8e8ef);
  border: 1px solid var(--color-border, #2a2a35);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: var(--fs-sm, 0.85rem);
}
.native-composer .storyboard__field textarea {
  resize: vertical;
  font-family: inherit;
}
/* Style / locale / presenter row on /new (avatars-voices phase). */
.native-composer .style-locale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
/* Voice picker row on /new — select + a preview button. */
.native-composer .voice-picker {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.native-composer .voice-picker__preview {
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .native-composer .style-locale {
    grid-template-columns: 1fr;
  }
}
.native-composer .storyboard__camera summary {
  cursor: pointer;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted, #8a8a99);
}
.native-composer .storyboard__camera-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin-top: 0.4rem;
}
@media (max-width: 560px) {
  .native-composer .storyboard__frames {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Timeline editor (Remotion player + NLE-style timeline)
   ========================================================================= */

.native-composer .editor-page {
  justify-content: flex-start;
  gap: var(--gap);
}

.native-composer .editor-stage {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Toolbar (back / title / export) */
.native-composer .editor-toolbar {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.native-composer .editor-toolbar__spacer {
  flex: 1;
}
.native-composer .editor-back {
  font-size: 0.85rem;
}
.native-composer .editor-title {
  margin: 0;
}

/* Transport bar (skip / nudge / play + timecode) */
.native-composer .transport {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.native-composer .transport__btn {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color
    var(--dur) var(--ease);
}
.native-composer .transport__btn:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.native-composer .transport__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.native-composer .transport__btn--nudge {
  font-size: 0.95rem;
}
.native-composer .transport__play {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow
    var(--dur) var(--ease);
}
.native-composer .transport__play:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.native-composer .transport__play:active {
  transform: scale(0.94);
}
.native-composer .transport__time {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.native-composer .transport__time-now {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.native-composer .transport__time-total {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.native-composer .transport__time-sep {
  color: var(--color-text-faint);
  margin: 0 0.15rem;
}
.native-composer .transport__meta {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

/* Timeline panel */
.native-composer .timeline2 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.native-composer .timeline2__ruler {
  position: relative;
  height: 1.05rem;
  margin: 0 1px;
}
.native-composer .timeline2__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  user-select: none;
  white-space: nowrap;
}
.native-composer .timeline2__tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 4px;
  background: var(--color-border);
}
.native-composer .timeline2__tick--major::after {
  height: 7px;
  background: var(--color-border-strong);
}

.native-composer .timeline2__track {
  position: relative;
  display: flex;
  height: 68px;
  background: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(10% - 1px),
      color-mix(in srgb, var(--color-border) 55%, transparent) calc(10% - 1px),
      color-mix(in srgb, var(--color-border) 55%, transparent) 10%
    ), var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: text;
  touch-action: none;
}
.native-composer .timeline2__track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.native-composer .tl-clip {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  min-width: 26px;
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  /* Vivid left spine so adjacent clips read as distinct segments. */
  border-left: 2px solid var(--clip-color, var(--color-accent));
  transition: filter var(--dur) var(--ease);
}
.native-composer .tl-clip:first-child {
  border-left: none;
}
.native-composer .tl-clip:hover {
  filter: brightness(1.12);
}
.native-composer .tl-clip--active {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 1;
}

/* Poster frame (first frame of the clip), softly faded behind the label. */
.native-composer .tl-clip__poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}
.native-composer .tl-clip__poster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}
.native-composer .tl-clip::after {
  /* Legibility scrim over the poster. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.native-composer .tl-clip__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  padding: 0 4px;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.native-composer .tl-clip__name {
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.native-composer .tl-clip__label small {
  font-size: 0.62rem;
  font-weight: var(--fw-normal);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Reorder / delete controls on a timeline clip — revealed on hover/focus. */
.native-composer .tl-clip__controls {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.native-composer .tl-clip:hover .tl-clip__controls,
.native-composer .tl-clip:focus-within .tl-clip__controls {
  opacity: 1;
}
.native-composer .tl-clip__ctl {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}
.native-composer .tl-clip__ctl:not(:disabled):hover {
  background: rgba(0, 0, 0, 0.8);
}
.native-composer .tl-clip__ctl:disabled {
  opacity: 0.35;
  cursor: default;
}
.native-composer .tl-clip__ctl--del:not(:disabled):hover {
  background: var(--color-danger);
}

.native-composer .tl-trim {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  background: color-mix(in srgb, var(--color-accent) 70%, #fff 30%);
  opacity: 0;
  transition: opacity 0.12s var(--ease);
  z-index: 3;
  /* The handle owns the gesture — don't let touch scroll/zoom the page. */
  touch-action: none;
}
/* Coarse pointers (touch): bigger handles + always-visible so they're tappable. */
@media (pointer: coarse) {
  .native-composer .tl-trim {
    width: 18px;
    opacity: 0.9;
  }
  .native-composer .tl-clip__controls {
    opacity: 1; /* no hover on touch — keep reorder/delete reachable */
  }
}
.native-composer .tl-trim::before {
  /* Subtle grip lines on the handle. */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.45);
  border-right: 1px solid rgba(0, 0, 0, 0.45);
}
.native-composer .tl-clip:hover .tl-trim,
.native-composer .tl-clip--active .tl-trim {
  opacity: 0.95;
}
.native-composer .tl-trim:hover {
  background: #fff;
}
.native-composer .tl-trim--start {
  left: 0;
  border-radius: 4px 0 0 4px;
}
.native-composer .tl-trim--end {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.native-composer .timeline2__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 4;
}
.native-composer .timeline2__playhead-grab {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.native-composer .timeline2__playhead-grab::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}

.native-composer .timeline2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: 0.5rem;
}
.native-composer .timeline2__action {
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
}
.native-composer .timeline2__save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.native-composer .timeline2__downloads {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  margin-top: 0.1rem;
}
.native-composer .timeline2__downloads-label {
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-right: 0.2rem;
}
.native-composer .timeline2__download {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

/* Responsive: stack toolbar and shrink the track on narrow screens. */
@media (max-width: 640px) {
  .native-composer .editor-toolbar {
    flex-wrap: wrap;
  }
  .native-composer .editor-toolbar__spacer {
    flex-basis: 100%;
    height: 0;
  }
  .native-composer .transport {
    flex-wrap: wrap;
  }
  .native-composer .transport__meta {
    margin-left: 0;
    flex-basis: 100%;
    order: 5;
  }
  .native-composer .timeline2__track {
    height: 56px;
  }
  .native-composer .tl-clip__label small {
    display: none;
  }
}

/* ---- Composer screen (clip-composer / WS6) ---- */

.native-composer .composer-beat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.native-composer .composer-beat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: grab;
}
.native-composer .composer-beat:active {
  cursor: grabbing;
}

.native-composer .composer-beat__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.native-composer .composer-beat__drag {
  color: var(--color-text-faint);
  cursor: grab;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.native-composer .composer-beat__index {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  min-width: 1.2em;
  text-align: center;
}

.native-composer .composer-beat__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--fs-xs);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.native-composer .composer-beat__chip--completed {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}
.native-composer .composer-beat__chip--animating {
  background: color-mix(in srgb, var(--color-info) 18%, transparent);
  color: var(--color-info);
}
.native-composer .composer-beat__chip--failed {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
  color: var(--color-danger);
}

.native-composer .composer-beat__reanimate {
  font-size: var(--fs-xs);
  padding: 0.2rem 0.5rem;
}

.native-composer .composer-beat__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-faint);
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  flex-shrink: 0;
}
.native-composer .composer-beat__remove:hover:not(:disabled) {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.native-composer .composer-beat__remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Frame picker — 4 thumbnails in a row */
.native-composer .composer-frame-picker {
  display: flex;
  gap: 0.4rem;
}

.native-composer .composer-frame-thumb {
  flex: 1;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-3);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Unselected shots are dimmed so the chosen one is unmistakable. */
  opacity: 0.4;
  filter: grayscale(0.4);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), border-color var(--dur)
    var(--ease), box-shadow var(--dur) var(--ease);
}
.native-composer .composer-frame-thumb:hover:not(:disabled) {
  opacity: 0.8;
  filter: none;
  border-color: var(--color-accent);
}
.native-composer .composer-frame-thumb--active {
  opacity: 1;
  filter: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
/* Bright check badge on the selected shot (top-left). */
.native-composer .composer-frame-thumb__check {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--color-accent);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.native-composer .composer-frame-thumb:disabled {
  cursor: not-allowed;
}
/* Small field label above the shot picker / spoken line. */
.native-composer .composer-beat__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0.35rem 0 0.2rem;
}
.native-composer .composer-frame-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "×N used" reuse badge */
.native-composer .composer-frame-thumb__badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  background: color-mix(in srgb, var(--color-accent) 80%, #000);
  color: #fff;
  padding: 0 0.3em;
  border-radius: var(--radius-pill);
  line-height: 1.6;
  pointer-events: none;
}

.native-composer .composer-beat__script {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  padding: 0.5rem 0.65rem;
  resize: vertical;
  transition: border-color var(--dur) var(--ease);
  line-height: 1.5;
}
.native-composer .composer-beat__script:focus {
  outline: none;
  border-color: var(--color-accent);
}
.native-composer .composer-beat__script:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.native-composer .composer-add-beat {
  align-self: flex-start;
}

@media (max-width: 560px) {
  .native-composer .composer-frame-picker {
    gap: 0.25rem;
  }
  .native-composer .composer-beat {
    padding: 0.6rem;
  }
}

/* ---- Mode tabs (Simple / Storyboard on /new) ---- */
.native-composer .mode-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--color-surface, #16161d);
  border: 1px solid var(--color-border, #2a2a35);
  border-radius: 8px;
  padding: 0.2rem;
}
.native-composer .mode-tab {
  flex: 1;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted, #8a8a99);
  font-size: var(--fs-sm, 0.85rem);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.native-composer .mode-tab--active {
  background: var(--color-accent, #6c63ff);
  color: #fff;
}
.native-composer .mode-tab:hover:not(.mode-tab--active):not(:disabled) {
  background: var(--color-surface-raised, #1e1e2a);
  color: var(--color-text, #e8e8ef);
}
/* ---- Quality toggle (Draft / Max on /new) ---- */
.native-composer .quality-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.native-composer .quality-toggle__label {
  padding: 0;
  font-size: var(--fs-sm, 0.85rem);
  color: var(--color-text-muted, #8a8a99);
  font-weight: var(--fw-medium, 500);
  white-space: nowrap;
}
/* ---- Cost pill (gallery card) ---- */
.native-composer .cost-pill {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted, #8a8a99);
  background: var(--color-surface, #16161d);
  border: 1px solid var(--color-border, #2a2a35);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  letter-spacing: 0.01em;
}
/* ---- Cost breakdown chart (done screen) ---- */
.native-composer .cost-breakdown {
  width: 100%;
  padding: 1rem;
  background: var(--color-surface, #16161d);
  border: 1px solid var(--color-border, #2a2a35);
  border-radius: var(--radius, 8px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.native-composer .cost-breakdown__title {
  font-size: var(--fs-sm, 0.85rem);
  color: var(--color-text-muted, #8a8a99);
}
.native-composer .cost-breakdown__title strong {
  color: var(--color-text, #e8e8ef);
}
.native-composer .cost-breakdown__bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
}
.native-composer .cost-breakdown__segment {
  border-radius: 999px;
  min-width: 6px;
}
.native-composer .cost-breakdown__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.native-composer .cost-breakdown__legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted, #8a8a99);
}
.native-composer .cost-breakdown__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#native-film .native-timeline .pointer-events-none {
    pointer-events: none
}
#native-film .native-timeline .visible {
    visibility: visible
}
#native-film .native-timeline .static {
    position: static
}
#native-film .native-timeline .fixed {
    position: fixed
}
#native-film .native-timeline .absolute {
    position: absolute
}
#native-film .native-timeline .relative {
    position: relative
}
#native-film .native-timeline .sticky {
    position: sticky
}
#native-film .native-timeline .inset-0 {
    inset: 0px
}
#native-film .native-timeline .bottom-0 {
    bottom: 0px
}
#native-film .native-timeline .left-0 {
    left: 0px
}
#native-film .native-timeline .left-1\/2 {
    left: 50%
}
#native-film .native-timeline .right-0 {
    right: 0px
}
#native-film .native-timeline .right-4 {
    right: 1rem
}
#native-film .native-timeline .top-0 {
    top: 0px
}
#native-film .native-timeline .top-2 {
    top: 0.5rem
}
#native-film .native-timeline .top-3 {
    top: 0.75rem
}
#native-film .native-timeline .top-4 {
    top: 1rem
}
#native-film .native-timeline .top-8 {
    top: 2rem
}
#native-film .native-timeline .z-10 {
    z-index: 10
}
#native-film .native-timeline .z-20 {
    z-index: 20
}
#native-film .native-timeline .z-30 {
    z-index: 30
}
#native-film .native-timeline .z-40 {
    z-index: 40
}
#native-film .native-timeline .z-50 {
    z-index: 50
}
#native-film .native-timeline .mx-1\.5 {
    margin-left: 0.375rem;
    margin-right: 0.375rem
}
#native-film .native-timeline .mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}
#native-film .native-timeline .my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem
}
#native-film .native-timeline .mb-1 {
    margin-bottom: 0.25rem
}
#native-film .native-timeline .mb-2 {
    margin-bottom: 0.5rem
}
#native-film .native-timeline .mb-5 {
    margin-bottom: 1.25rem
}
#native-film .native-timeline .ml-0\.5 {
    margin-left: 0.125rem
}
#native-film .native-timeline .ml-1 {
    margin-left: 0.25rem
}
#native-film .native-timeline .ml-auto {
    margin-left: auto
}
#native-film .native-timeline .mt-0\.5 {
    margin-top: 0.125rem
}
#native-film .native-timeline .mt-4 {
    margin-top: 1rem
}
#native-film .native-timeline .block {
    display: block
}
#native-film .native-timeline .inline {
    display: inline
}
#native-film .native-timeline .flex {
    display: flex
}
#native-film .native-timeline .inline-flex {
    display: inline-flex
}
#native-film .native-timeline .grid {
    display: grid
}
#native-film .native-timeline .hidden {
    display: none
}
#native-film .native-timeline .h-1 {
    height: 0.25rem
}
#native-film .native-timeline .h-10 {
    height: 2.5rem
}
#native-film .native-timeline .h-11 {
    height: 2.75rem
}
#native-film .native-timeline .h-12 {
    height: 3rem
}
#native-film .native-timeline .h-16 {
    height: 4rem
}
#native-film .native-timeline .h-2 {
    height: 0.5rem
}
#native-film .native-timeline .h-2\.5 {
    height: 0.625rem
}
#native-film .native-timeline .h-3 {
    height: 0.75rem
}
#native-film .native-timeline .h-3\.5 {
    height: 0.875rem
}
#native-film .native-timeline .h-4 {
    height: 1rem
}
#native-film .native-timeline .h-5 {
    height: 1.25rem
}
#native-film .native-timeline .h-6 {
    height: 1.5rem
}
#native-film .native-timeline .h-7 {
    height: 1.75rem
}
#native-film .native-timeline .h-8 {
    height: 2rem
}
#native-film .native-timeline .h-9 {
    height: 2.25rem
}
#native-film .native-timeline .h-full {
    height: 100%
}
#native-film .native-timeline .max-h-full {
    max-height: 100%
}
#native-film .native-timeline .min-h-0 {
    min-height: 0px
}
#native-film .native-timeline .w-1 {
    width: 0.25rem
}
#native-film .native-timeline .w-10 {
    width: 2.5rem
}
#native-film .native-timeline .w-11 {
    width: 2.75rem
}
#native-film .native-timeline .w-14 {
    width: 3.5rem
}
#native-film .native-timeline .w-16 {
    width: 4rem
}
#native-film .native-timeline .w-2 {
    width: 0.5rem
}
#native-film .native-timeline .w-2\.5 {
    width: 0.625rem
}
#native-film .native-timeline .w-3 {
    width: 0.75rem
}
#native-film .native-timeline .w-3\.5 {
    width: 0.875rem
}
#native-film .native-timeline .w-4 {
    width: 1rem
}
#native-film .native-timeline .w-5 {
    width: 1.25rem
}
#native-film .native-timeline .w-6 {
    width: 1.5rem
}
#native-film .native-timeline .w-7 {
    width: 1.75rem
}
#native-film .native-timeline .w-72 {
    width: 18rem
}
#native-film .native-timeline .w-8 {
    width: 2rem
}
#native-film .native-timeline .w-9 {
    width: 2.25rem
}
#native-film .native-timeline .w-full {
    width: 100%
}
#native-film .native-timeline .w-px {
    width: 1px
}
#native-film .native-timeline .min-w-0 {
    min-width: 0px
}
#native-film .native-timeline .min-w-\[160px\] {
    min-width: 160px
}
#native-film .native-timeline .min-w-\[200px\] {
    min-width: 200px
}
#native-film .native-timeline .min-w-max {
    min-width: max-content
}
#native-film .native-timeline .max-w-\[180px\] {
    max-width: 180px
}
#native-film .native-timeline .max-w-\[200px\] {
    max-width: 200px
}
#native-film .native-timeline .max-w-\[80px\] {
    max-width: 80px
}
#native-film .native-timeline .max-w-\[960px\] {
    max-width: 960px
}
#native-film .native-timeline .max-w-full {
    max-width: 100%
}
#native-film .native-timeline .max-w-md {
    max-width: 28rem
}
#native-film .native-timeline .flex-1 {
    flex: 1 1 0%
}
#native-film .native-timeline .flex-shrink-0 {
    flex-shrink: 0
}
#native-film .native-timeline .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
#native-film .native-timeline .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes pulse {
    50% {
        opacity: .5
    }
}
#native-film .native-timeline .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
#native-film .native-timeline .animate-spin {
    animation: spin 1s linear infinite
}
#native-film .native-timeline .cursor-ew-resize {
    cursor: ew-resize
}
#native-film .native-timeline .cursor-grab {
    cursor: grab
}
#native-film .native-timeline .cursor-help {
    cursor: help
}
#native-film .native-timeline .cursor-move {
    cursor: move
}
#native-film .native-timeline .cursor-pointer {
    cursor: pointer
}
#native-film .native-timeline .select-none {
    user-select: none
}
#native-film .native-timeline .resize {
    resize: both
}
#native-film .native-timeline .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
#native-film .native-timeline .flex-col {
    flex-direction: column
}
#native-film .native-timeline .items-end {
    align-items: flex-end
}
#native-film .native-timeline .items-center {
    align-items: center
}
#native-film .native-timeline .justify-center {
    justify-content: center
}
#native-film .native-timeline .justify-between {
    justify-content: space-between
}
#native-film .native-timeline .gap-0\.5 {
    gap: 0.125rem
}
#native-film .native-timeline .gap-1 {
    gap: 0.25rem
}
#native-film .native-timeline .gap-1\.5 {
    gap: 0.375rem
}
#native-film .native-timeline .gap-2 {
    gap: 0.5rem
}
#native-film .native-timeline .gap-2\.5 {
    gap: 0.625rem
}
#native-film .native-timeline .gap-3 {
    gap: 0.75rem
}
#native-film .native-timeline .gap-4 {
    gap: 1rem
}
#native-film .native-timeline :is(.space-y-1\.5 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
}
#native-film .native-timeline :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}
#native-film .native-timeline :is(.space-y-2\.5 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
}
#native-film .native-timeline :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
#native-film .native-timeline .overflow-auto {
    overflow: auto
}
#native-film .native-timeline .overflow-hidden {
    overflow: hidden
}
#native-film .native-timeline .overflow-y-auto {
    overflow-y: auto
}
#native-film .native-timeline .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
#native-film .native-timeline .whitespace-nowrap {
    white-space: nowrap
}
#native-film .native-timeline .rounded {
    border-radius: 0.25rem
}
#native-film .native-timeline .rounded-full {
    border-radius: 9999px
}
#native-film .native-timeline .rounded-lg {
    border-radius: 0.5rem
}
#native-film .native-timeline .rounded-md {
    border-radius: 0.375rem
}
#native-film .native-timeline .rounded-sm {
    border-radius: 0.125rem
}
#native-film .native-timeline .border {
    border-width: 1px
}
#native-film .native-timeline .border-2 {
    border-width: 2px
}
#native-film .native-timeline .border-b {
    border-bottom-width: 1px
}
#native-film .native-timeline .border-l {
    border-left-width: 1px
}
#native-film .native-timeline .border-r {
    border-right-width: 1px
}
#native-film .native-timeline .border-t {
    border-top-width: 1px
}
#native-film .native-timeline .border-dashed {
    border-style: dashed
}
#native-film .native-timeline .border-blue-300 {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-emerald-500\/60 {
    border-color: rgb(16 185 129 / 0.6)
}
#native-film .native-timeline .border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-green-500\/20 {
    border-color: rgb(34 197 94 / 0.2)
}
#native-film .native-timeline .border-green-600\/30 {
    border-color: rgb(22 163 74 / 0.3)
}
#native-film .native-timeline .border-orange-300 {
    --tw-border-opacity: 1;
    border-color: rgb(253 186 116 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-purple-300 {
    --tw-border-opacity: 1;
    border-color: rgb(216 180 254 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-purple-400 {
    --tw-border-opacity: 1;
    border-color: rgb(192 132 252 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-purple-400\/60 {
    border-color: rgb(192 132 252 / 0.6)
}
#native-film .native-timeline .border-sky-400\/60 {
    border-color: rgb(56 189 248 / 0.6)
}
#native-film .native-timeline .border-studio-accent {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-studio-accent\/60 {
    border-color: rgb(99 102 241 / 0.6)
}
#native-film .native-timeline .border-studio-border {
    --tw-border-opacity: 1;
    border-color: rgb(30 30 46 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-studio-border\/30 {
    border-color: rgb(30 30 46 / 0.3)
}
#native-film .native-timeline .border-studio-border\/50 {
    border-color: rgb(30 30 46 / 0.5)
}
#native-film .native-timeline .border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}
#native-film .native-timeline .border-yellow-500\/60 {
    border-color: rgb(234 179 8 / 0.6)
}
#native-film .native-timeline .bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4)
}
#native-film .native-timeline .bg-black\/70 {
    background-color: rgb(0 0 0 / 0.7)
}
#native-film .native-timeline .bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-cyan-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-cyan-500\/30 {
    background-color: rgb(6 182 212 / 0.3)
}
#native-film .native-timeline .bg-emerald-400\/80 {
    background-color: rgb(52 211 153 / 0.8)
}
#native-film .native-timeline .bg-emerald-500\/20 {
    background-color: rgb(16 185 129 / 0.2)
}
#native-film .native-timeline .bg-emerald-500\/30 {
    background-color: rgb(16 185 129 / 0.3)
}
#native-film .native-timeline .bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-green-400\/60 {
    background-color: rgb(74 222 128 / 0.6)
}
#native-film .native-timeline .bg-green-500\/10 {
    background-color: rgb(34 197 94 / 0.1)
}
#native-film .native-timeline .bg-green-600\/15 {
    background-color: rgb(22 163 74 / 0.15)
}
#native-film .native-timeline .bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-purple-400\/60 {
    background-color: rgb(192 132 252 / 0.6)
}
#native-film .native-timeline .bg-purple-500\/30 {
    background-color: rgb(168 85 247 / 0.3)
}
#native-film .native-timeline .bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-sky-500\/30 {
    background-color: rgb(14 165 233 / 0.3)
}
#native-film .native-timeline .bg-studio-accent {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-studio-accent\/10 {
    background-color: rgb(99 102 241 / 0.1)
}
#native-film .native-timeline .bg-studio-accent\/15 {
    background-color: rgb(99 102 241 / 0.15)
}
#native-film .native-timeline .bg-studio-accent\/50 {
    background-color: rgb(99 102 241 / 0.5)
}
#native-film .native-timeline .bg-studio-accent\/80 {
    background-color: rgb(99 102 241 / 0.8)
}
#native-film .native-timeline .bg-studio-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 15 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-studio-bg\/50 {
    background-color: rgb(10 10 15 / 0.5)
}
#native-film .native-timeline .bg-studio-bg\/60 {
    background-color: rgb(10 10 15 / 0.6)
}
#native-film .native-timeline .bg-studio-border {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 46 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-studio-border\/20 {
    background-color: rgb(30 30 46 / 0.2)
}
#native-film .native-timeline .bg-studio-border\/60 {
    background-color: rgb(30 30 46 / 0.6)
}
#native-film .native-timeline .bg-studio-border\/80 {
    background-color: rgb(30 30 46 / 0.8)
}
#native-film .native-timeline .bg-studio-muted\/60 {
    background-color: rgb(141 141 154 / 0.6)
}
#native-film .native-timeline .bg-studio-panel {
    --tw-bg-opacity: 1;
    background-color: rgb(19 19 26 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-transparent {
    background-color: transparent
}
#native-film .native-timeline .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-white\/60 {
    background-color: rgb(255 255 255 / 0.6)
}
#native-film .native-timeline .bg-yellow-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .bg-yellow-500\/30 {
    background-color: rgb(234 179 8 / 0.3)
}
#native-film .native-timeline .bg-yellow-600\/30 {
    background-color: rgb(202 138 4 / 0.3)
}
#native-film .native-timeline .bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops))
}
#native-film .native-timeline .from-black\/80 {
    --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
#native-film .native-timeline .to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
}
#native-film .native-timeline .object-contain {
    object-fit: contain
}
#native-film .native-timeline .object-cover {
    object-fit: cover
}
#native-film .native-timeline .p-0\.5 {
    padding: 0.125rem
}
#native-film .native-timeline .p-3 {
    padding: 0.75rem
}
#native-film .native-timeline .p-4 {
    padding: 1rem
}
#native-film .native-timeline .p-6 {
    padding: 1.5rem
}
#native-film .native-timeline .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem
}
#native-film .native-timeline .px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem
}
#native-film .native-timeline .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
#native-film .native-timeline .px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem
}
#native-film .native-timeline .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
#native-film .native-timeline .px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
#native-film .native-timeline .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
#native-film .native-timeline .py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem
}
#native-film .native-timeline .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
#native-film .native-timeline .py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}
#native-film .native-timeline .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
#native-film .native-timeline .py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
#native-film .native-timeline .pb-4 {
    padding-bottom: 1rem
}
#native-film .native-timeline .pt-1 {
    padding-top: 0.25rem
}
#native-film .native-timeline .pt-8 {
    padding-top: 2rem
}
#native-film .native-timeline .text-left {
    text-align: left
}
#native-film .native-timeline .text-right {
    text-align: right
}
#native-film .native-timeline .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
#native-film .native-timeline .text-\[10px\] {
    font-size: 10px
}
#native-film .native-timeline .text-\[11px\] {
    font-size: 11px
}
#native-film .native-timeline .text-\[7px\] {
    font-size: 7px
}
#native-film .native-timeline .text-\[8px\] {
    font-size: 8px
}
#native-film .native-timeline .text-\[9px\] {
    font-size: 9px
}
#native-film .native-timeline .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
#native-film .native-timeline .text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
#native-film .native-timeline .font-bold {
    font-weight: 700
}
#native-film .native-timeline .font-medium {
    font-weight: 500
}
#native-film .native-timeline .uppercase {
    text-transform: uppercase
}
#native-film .native-timeline .capitalize {
    text-transform: capitalize
}
#native-film .native-timeline .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
#native-film .native-timeline .leading-none {
    line-height: 1
}
#native-film .native-timeline .leading-tight {
    line-height: 1.25
}
#native-film .native-timeline .tracking-tight {
    letter-spacing: -0.025em
}
#native-film .native-timeline .tracking-wider {
    letter-spacing: 0.05em
}
#native-film .native-timeline .text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-green-400\/80 {
    color: rgb(74 222 128 / 0.8)
}
#native-film .native-timeline .text-purple-300 {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-sky-300 {
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-studio-accent {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-studio-muted {
    --tw-text-opacity: 1;
    color: rgb(141 141 154 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-studio-muted\/50 {
    color: rgb(141 141 154 / 0.5)
}
#native-film .native-timeline .text-studio-muted\/80 {
    color: rgb(141 141 154 / 0.8)
}
#native-film .native-timeline .text-studio-text {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .text-white\/50 {
    color: rgb(255 255 255 / 0.5)
}
#native-film .native-timeline .text-white\/70 {
    color: rgb(255 255 255 / 0.7)
}
#native-film .native-timeline .text-white\/80 {
    color: rgb(255 255 255 / 0.8)
}
#native-film .native-timeline .text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .accent-studio-accent {
    accent-color: #6366f1
}
#native-film .native-timeline .accent-white {
    accent-color: #fff
}
#native-film .native-timeline .opacity-0 {
    opacity: 0
}
#native-film .native-timeline .opacity-100 {
    opacity: 1
}
#native-film .native-timeline .opacity-20 {
    opacity: 0.2
}
#native-film .native-timeline .opacity-40 {
    opacity: 0.4
}
#native-film .native-timeline .opacity-50 {
    opacity: 0.5
}
#native-film .native-timeline .opacity-60 {
    opacity: 0.6
}
#native-film .native-timeline .opacity-70 {
    opacity: 0.7
}
#native-film .native-timeline .opacity-80 {
    opacity: 0.8
}
#native-film .native-timeline .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#native-film .native-timeline .shadow-\[0_0_0_2px_rgba\(99\2c 102\2c 241\2c 0\.3\)\] {
    --tw-shadow: 0 0 0 2px rgba(99,102,241,0.3);
    --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#native-film .native-timeline .shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#native-film .native-timeline .shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#native-film .native-timeline .shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#native-film .native-timeline .shadow-studio-accent\/20 {
    --tw-shadow-color: rgb(99 102 241 / 0.2);
    --tw-shadow: var(--tw-shadow-colored)
}
#native-film .native-timeline .outline {
    outline-style: solid
}
#native-film .native-timeline .ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
#native-film .native-timeline .ring-studio-accent\/30 {
    --tw-ring-color: rgb(99 102 241 / 0.3)
}
#native-film .native-timeline .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
#native-film .native-timeline .backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
#native-film .native-timeline .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
#native-film .native-timeline .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
#native-film .native-timeline .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
#native-film .native-timeline .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
#native-film .native-timeline .duration-75 {
    transition-duration: 75ms
}
#native-film .native-timeline .last\:border-b-0:last-child {
    border-bottom-width: 0px
}
#native-film .native-timeline .hover\:border-green-600\/40:hover {
    border-color: rgb(22 163 74 / 0.4)
}
#native-film .native-timeline .hover\:border-studio-accent\/40:hover {
    border-color: rgb(99 102 241 / 0.4)
}
#native-film .native-timeline .hover\:border-studio-accent\/50:hover {
    border-color: rgb(99 102 241 / 0.5)
}
#native-film .native-timeline .hover\:bg-cyan-500\/30:hover {
    background-color: rgb(6 182 212 / 0.3)
}
#native-film .native-timeline .hover\:bg-green-600\/25:hover {
    background-color: rgb(22 163 74 / 0.25)
}
#native-film .native-timeline .hover\:bg-purple-300\/80:hover {
    background-color: rgb(216 180 254 / 0.8)
}
#native-film .native-timeline .hover\:bg-studio-accent\/90:hover {
    background-color: rgb(99 102 241 / 0.9)
}
#native-film .native-timeline .hover\:bg-studio-border\/40:hover {
    background-color: rgb(30 30 46 / 0.4)
}
#native-film .native-timeline .hover\:bg-studio-border\/50:hover {
    background-color: rgb(30 30 46 / 0.5)
}
#native-film .native-timeline .hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1)
}
#native-film .native-timeline .hover\:bg-white\/90:hover {
    background-color: rgb(255 255 255 / 0.9)
}
#native-film .native-timeline .hover\:bg-yellow-500\/30:hover {
    background-color: rgb(234 179 8 / 0.3)
}
#native-film .native-timeline .hover\:bg-opacity-50:hover {
    --tw-bg-opacity: 0.5
}
#native-film .native-timeline .hover\:text-red-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .hover\:text-red-400:hover {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .hover\:text-studio-accent:hover {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .hover\:text-studio-text:hover {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .hover\:text-yellow-400:hover {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline .hover\:opacity-100:hover {
    opacity: 1
}
#native-film .native-timeline .focus\:border-studio-accent\/50:focus {
    border-color: rgb(99 102 241 / 0.5)
}
#native-film .native-timeline .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}
#native-film .native-timeline .active\:cursor-grabbing:active {
    cursor: grabbing
}
#native-film .native-timeline .disabled\:opacity-20:disabled {
    opacity: 0.2
}
#native-film .native-timeline .disabled\:opacity-30:disabled {
    opacity: 0.3
}
#native-film .native-timeline .disabled\:opacity-40:disabled {
    opacity: 0.4
}
#native-film .native-timeline .disabled\:hover\:bg-studio-accent:hover:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1))
}
#native-film .native-timeline .disabled\:hover\:bg-transparent:hover:disabled {
    background-color: transparent
}
#native-film .native-timeline .disabled\:hover\:text-studio-muted:hover:disabled {
    --tw-text-opacity: 1;
    color: rgb(141 141 154 / var(--tw-text-opacity, 1))
}
#native-film .native-timeline :is(.group:hover .group-hover\:block) {
    display: block
}
#native-film .native-timeline :is(.group:hover .group-hover\:opacity-100) {
    opacity: 1
}
#native-film{min-height:0;flex:1;overflow:hidden;position:relative;font-size:14px}
.native-timeline-layout{height:100%;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr);background:#0a0a0f;color:#e4e4e7}
.native-timeline{min-width:0;min-height:0;overflow:auto;height:100%}
.native-timeline button,.native-timeline input,.native-timeline select{font:inherit}
.native-editor-tools{flex-wrap:nowrap;gap:10px!important;font-size:12px;overflow-x:auto;flex-shrink:0}.native-editor-tools>div{flex-wrap:nowrap;flex-shrink:0}.native-editor-tools .w-px{margin-inline:2px}.native-timeline [title="导出真实 MP4"]{white-space:nowrap}
.native-media-shelf{border-right:1px solid #1e1e2e;display:flex;flex-direction:column;overflow:hidden;padding:18px 12px;background:#13131a}
.native-shelf-title{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}.native-shelf-title strong{font-size:15px}.native-shelf-title span{font-size:12px;color:#8d8d9a}
.native-shelf-filters{display:flex;gap:3px;margin-bottom:12px}.native-shelf-filters button{flex:1;border:1px solid transparent;border-radius:5px;padding:6px 2px;color:#8d8d9a;background:transparent;font-size:12px;cursor:pointer}.native-shelf-filters button[aria-pressed=true]{background:#1e1e2e;color:#e4e4e7}
.native-import{border:1px dashed #2a2a3a;background:none;border-radius:6px;color:#d4d4d8;padding:9px;font-size:12px;cursor:pointer;margin-bottom:15px}.native-import:hover{border-color:#6366f1}
.native-shelf-items{overflow:auto;display:flex;flex-direction:column;gap:14px}.native-shelf-item{text-align:left;padding:0 0 7px;display:flex;flex-direction:column;gap:5px;background:#0a0a0f;border:1px solid #1e1e2e;border-radius:7px;overflow:hidden;color:#e4e4e7;cursor:pointer}.native-shelf-item:hover{border-color:#6366f1}.native-shelf-item img,.native-shelf-item video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}.native-shelf-item strong{font-size:12px;font-weight:500;padding:0 9px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}.native-shelf-item>span{font-size:11px;color:#8d8d9a;padding:0 9px}.native-shelf-item .native-audio-icon{display:grid;place-items:center;min-height:60px;font-size:27px;color:#6366f1}
.native-shelf-empty{font-size:12px;line-height:1.8;color:#8d8d9a}.native-shelf-error{color:#ffa89a;font-size:12px;line-height:1.6}.native-loading,.native-error{padding:40px;line-height:1.9;color:#8d8d9a}.native-error button{padding:9px 16px;border:1px solid #2a2a3a;background:#fff;cursor:pointer;margin-top:20px}
.native-composer{height:100%;overflow:auto;--color-bg:#0a0a0f;--color-bg-2:#101016;--color-surface:#13131a;--color-surface-2:#1a1a24;--color-surface-3:#242430;--color-border:#1e1e2e;--color-border-strong:#2a2a3a;--color-text:#e4e4e7;--color-text-muted:#8d8d9a;--color-text-faint:#71717a;--color-accent:#6366f1;--color-accent-hover:#818cf8;--color-accent-soft:#6366f129;--font-sans:ui-sans-serif,system-ui,"PingFang SC",sans-serif}
.native-composer .page{min-height:0;padding:25px 28px 40px}.native-composer .card{max-width:880px!important;padding:26px 28px;box-shadow:var(--shadow-md)}.native-composer .composer-frame-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.native-composer .composer-beat{padding:17px 18px;cursor:default}.native-composer .composer-beat__script{font-size:14px;padding:10px 12px}.native-composer .composer-beat__label{font-size:12px;letter-spacing:0;text-transform:none}.native-composer .composer-frame-thumb__badge{font-size:11px}.native-composer .composer-beat__index{font-size:13px;font-weight:600}.native-composer .composer-frame-thumb{opacity:.65}
.native-composer-top{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 30px;border-bottom:1px solid #1e1e2e;font-size:13px;color:#8d8d9a;background:#13131a}.native-composer-top button{border:1px solid #2a2a3a;border-radius:6px;background:#13131a;color:#e4e4e7;font:inherit;padding:7px 12px;cursor:pointer}
.native-timeline .text-\[10px\]{font-size:11px}.native-timeline .text-\[9px\]{font-size:11px}
@media(max-width:900px){.native-timeline-layout{grid-template-columns:148px minmax(0,1fr)}.native-media-shelf{padding:12px 8px}.native-composer .page{padding:18px 16px}.native-composer .card{padding:20px}.native-composer-top{padding:12px 18px}}
@media(max-width:600px){.native-timeline-layout{display:flex;flex-direction:column}.native-media-shelf{max-height:145px;padding:8px;border-right:0;border-bottom:1px solid #1e1e2e}.native-shelf-title{display:none}.native-shelf-filters{margin-bottom:4px;max-width:190px}.native-import{position:absolute;right:10px;top:7px;margin:0}.native-shelf-items{flex-direction:row;gap:8px;overflow:auto}.native-shelf-item{min-width:110px;max-width:110px;gap:2px}.native-shelf-item img,.native-shelf-item video{max-height:55px}.native-shelf-item strong,.native-shelf-item>span{font-size:10px}.native-timeline{flex:1}.native-composer .card{padding:16px}.native-composer .composer-beat{padding:12px}.native-composer-top span{display:none}}

.native-timeline-layout{grid-template-columns:168px minmax(0,1fr)}
.native-media-shelf{padding:14px 10px}
.native-timeline [title="导出真实 MP4"]{min-height:30px}
.native-composer-top button:hover{border-color:#6366f1}
.native-timeline::-webkit-scrollbar{width:6px;height:6px}.native-timeline::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:3px}
/* The editor receives pointer focus for its native shortcuts; focus belongs to
   its controls rather than a ring around the whole timeline surface. */
.native-timeline:focus{outline:none}