@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/inter-regular.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/inter-medium.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/inter-semibold.ttf') format('truetype'); }
:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --surface: #151517;
  --surface-hover: #202023;
  --text: #f5f5f6;
  --muted: #9a9a9f;
  --line: #2b2b30;
  --accent: #ff641f;
  --accent-hover: #ff7d42;
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; border: 0; }
button, a, select, label { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, .upload-button:has(+ input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
.icon-defs { width: 0; height: 0; position: absolute; overflow: hidden; }
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only, .file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; background: var(--accent); color: #090909; padding: 12px 16px; }
.skip-link:focus { top: 12px; }
.header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(11, 11, 13, .96); }
.header-inner { max-width: 1600px; min-height: 68px; padding: 0 36px; margin: auto; display: flex; align-items: center; gap: 44px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 24px; font-weight: 600; }
.brand svg { width: 27px; height: 29px; color: var(--accent); }
.primary-nav { display: flex; align-self: stretch; gap: 30px; font-size: 14px; font-weight: 500; }
.primary-nav a { display: flex; align-items: center; color: var(--muted); position: relative; }
.primary-nav a:hover, .primary-nav a.selected { color: var(--text); }
.primary-nav a.selected::after { content: ''; position: absolute; height: 2px; background: var(--accent); bottom: 0; inset-inline: 0; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 500; background: var(--surface); white-space: nowrap; transition: background .15s; }
.button:hover { background: var(--surface-hover); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #100b08; }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.quiet { background: none; border-color: transparent; color: #b9b9bf; }
.button.quiet:hover { color: white; background: var(--surface); }
.page { max-width: 1600px; margin: 0 auto; padding: 0 36px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 0 20px; }
.page-heading h1 { font-size: 24px; line-height: 32px; font-weight: 500; }
.page-heading > span { color: var(--muted); font-size: 13px; }
.showcase { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: 16px; }
.feature { position: relative; height: 374px; min-width: 0; overflow: hidden; background: #19191c; border-radius: 8px; isolation: isolate; }
.feature::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.24) 0%, transparent 25%, transparent 50%, rgba(0,0,0,.7) 100%); }
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.feature-motion .feature-video { object-position: 50% 32%; }
.feature-top { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.media-tag { font-size: 12px; font-weight: 600; }
.sample-tag { font-size: 12px; color: #e9e9ed; background: rgba(0,0,0,.4); padding: 5px 8px; border-radius: 4px; }
.feature-bottom { position: absolute; bottom: 24px; left: 26px; right: 26px; display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.feature-title h2 { font-size: 32px; line-height: 1.15; font-weight: 500; margin-bottom: 12px; }
.text-action { background: none; padding: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; cursor: pointer; }
.text-action:hover { color: var(--accent-hover); }
.icon-button { width: 38px; height: 38px; flex-shrink: 0; border-radius: 6px; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.icon-button:hover { background: rgba(255,255,255,.12); }
.playback { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.25); }
.playback .icon { width: 17px; height: 17px; }
.creator { margin: 20px 0 42px; border: 1px solid #39393e; border-radius: 8px; background: var(--surface); scroll-margin-top: 88px; }
.creator:focus-within { border-color: #74747b; }
.creator-top { padding: 12px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mode-switch { display: flex; gap: 4px; }
.mode { display: flex; gap: 7px; align-items: center; min-height: 34px; padding: 6px 10px; background: none; color: var(--muted); font-size: 14px; border-radius: 4px; }
.mode.active { background: #2a2a2e; color: #fff; }
.mode:hover { color: #fff; }
.creator-status { color: var(--muted); font-size: 12px; }
textarea { display: block; width: 100%; min-height: 88px; resize: vertical; background: none; border: 0; outline: none; padding: 18px 24px 12px; color: var(--text); font-size: 16px; line-height: 1.55; max-height: 260px; }
textarea::placeholder { color: #9a9a9f; opacity: 1; }
textarea:focus-visible { outline: none; }
.creator-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 16px 14px; }
.settings { display: flex; align-items: center; gap: 6px; min-width: 0; }
.upload-button { cursor: pointer; background: none; border-color: #3a3a40; min-height: 34px; padding: 6px 10px; font-size: 13px; }
.setting-divider { display: block; width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.select-wrap { display: flex; }
select { background: var(--surface); color: #c2c2c7; border: 0; padding: 6px; min-height: 36px; font-size: 13px; }
.generate { min-width: 145px; }
.reference-preview { margin: 0 24px 16px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.reference-preview img { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; }
.reference-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-preview button { margin-left: auto; }
.form-message { padding: 12px 20px; color: #d5d5da; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.form-message.error { color: #ffa78b; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-heading h2 { font-size: 22px; line-height: 30px; font-weight: 500; }
.section-heading > span { color: var(--muted); font-size: 13px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 20px 0; }
.filter { background: none; min-height: 34px; border-radius: 5px; padding: 7px 14px; color: #a7a7ad; font-size: 14px; }
.filter.active { background: #29292e; color: #fff; }
.filter:hover { color: #fff; background: #1a1a1e; }
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.reference-card { display: block; background: transparent; padding: 0; text-align: left; min-width: 0; border-radius: 6px; }
.reference-media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background-color: #202023; }
.reference-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.reference-card:hover .reference-media > img { transform: scale(1.03); }
.reference-card:hover .preview-action, .reference-card:focus-visible .preview-action { opacity: 1; }
.media-type { position: absolute; left: 9px; top: 9px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.6); border-radius: 4px; padding: 4px 6px; font-size: 12px; }
.media-type .icon { width: 12px; height: 12px; }
.preview-action { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: white; color: #161619; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.card-caption { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; }
.card-caption strong { font-size: 14px; line-height: 1.4; font-weight: 500; }
.card-caption > span { color: var(--muted); font-size: 12px; }
.sheet { background-image: url('assets/vidai-media-sheet.jpg'); background-size: auto 202%; background-repeat: no-repeat; }
.shot-product { background-position: 0% 100%; }
.shot-creator { background-position: 50% 0%; }
.shot-fashion { background-position: 100% 0%; }
.shot-landscape { background-position: 100% 100%; }
footer { margin-top: 50px; border-top: 1px solid var(--line); padding: 22px 0 28px; display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 13px; }
.footer-brand { color: #dedee3; font-size: 16px; font-weight: 600; }
footer > button { margin-left: auto; font-size: 13px; color: var(--muted); }
dialog { padding: 0; background: var(--surface); color: var(--text); border: 1px solid #38383e; border-radius: 8px; max-height: calc(100dvh - 40px); max-width: calc(100% - 32px); width: 740px; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,.8); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { font-size: 18px; font-weight: 500; }
.preview-media { height: 350px; background: #080808; }
.preview-media video { width: 100%; height: 100%; object-fit: contain; }
.preview-media .sheet { height: 100%; aspect-ratio: 1; margin: 0 auto; }
.preview-details { padding: 24px; }
.detail-label { font-size: 12px; color: var(--muted); }
.preview-details p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
.preview-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; }
.preview-footer > span { font-size: 12px; color: var(--muted); }
.drafts-dialog, .credits-dialog { width: 620px; }
.drafts-note, .credits-content { padding: 20px; font-size: 14px; line-height: 1.6; color: #b6b6bd; }
.credits-content a { display: block; color: #f5f5f6; text-decoration: underline; text-underline-offset: 3px; margin-top: 12px; }
.credits-content p + p, .credits-content a + p { margin-top: 20px; }
#drafts-list { padding: 0 20px 20px; }
.draft-row { padding: 18px 0; border-top: 1px solid var(--line); }
.draft-row p { font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-row small { display: block; color: var(--muted); margin: 12px 0; font-size: 12px; }
.draft-actions { display: flex; gap: 8px; }
.empty-drafts { padding: 28px 0 40px; color: var(--muted); text-align: center; font-size: 15px; }
@media (min-width: 1500px) { .feature { height: 440px; } }
@media (max-width: 1050px) {
  .header-inner { padding-inline: 24px; gap: 30px; }
  .page { padding-inline: 24px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  .feature { height: 340px; }
  .feature-bottom { left: 20px; right: 20px; }
  .feature-title h2 { font-size: 28px; }
}
@media (max-width: 700px) {
  .header-inner { padding: 12px 16px 0; min-height: 60px; gap: 8px 24px; flex-wrap: wrap; }
  .header-actions { gap: 6px; }
  .drafts-trigger { padding-inline: 8px; }
  .drafts-trigger span { display: none; }
  .brand { font-size: 22px; }
  .primary-nav { order: 3; width: 100%; height: 40px; gap: 26px; }
  .page { padding-inline: 16px; }
  .page-heading { padding: 22px 0 16px; }
  .page-heading h1 { font-size: 22px; }
  .page-heading > span { font-size: 12px; }
  .showcase { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
  .feature { height: 300px; }
  .feature-top { top: 12px; left: 12px; right: 12px; }
  .sample-tag { display: none; }
  .media-tag { font-size: 12px; }
  .feature-bottom { left: 14px; right: 14px; bottom: 16px; display: block; }
  .feature-title { min-width: 0; }
  .feature-title h2 { font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
  .feature-title .text-action { font-size: 12px; line-height: 1.4; }
  .feature-title .text-action .icon { display: none; }
  .playback { position: absolute; right: 0; bottom: 82px; width: 30px; height: 30px; }
  .playback .icon { width: 13px; height: 13px; }
  .creator { margin-top: 16px; margin-bottom: 32px; scroll-margin-top: 120px; }
  .creator-top { padding: 10px 12px 0; }
  textarea { min-height: 100px; padding: 16px; }
  .creator-bottom { flex-wrap: wrap; padding: 0 12px 12px; gap: 12px; }
  .settings { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
  .generate { width: 100%; }
  .section-heading h2 { font-size: 20px; }
  .filters { gap: 4px; padding: 16px 0; }
  .filter { font-size: 13px; padding-inline: 10px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-caption { gap: 4px; }
  .preview-media { height: 280px; }
  .preview-details { padding: 20px; }
  footer { flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  footer > span { display: none; }
  html { scroll-padding-top: 124px; }
}
@media (max-width: 360px) { .feature { height: 270px; } .creator-status { display: none; } .setting-divider { display: none; } .upload-button { padding-inline: 7px; } select { padding-inline: 3px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Live private-beta auth + generation result */
.auth-dialog{width:min(92vw,520px);background:#111114;color:#f5f5f7;border:1px solid #35353b;border-radius:20px;padding:0}
.auth-form{display:grid;gap:16px;padding:22px}
.auth-form p{margin:0;color:#aaaab2;line-height:1.5}
.auth-form label{display:grid;gap:8px;font-weight:600}
.auth-form input{width:100%;box-sizing:border-box;background:#18181c;color:#fff;border:1px solid #3c3c43;border-radius:12px;padding:13px 14px;font:inherit}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap}
.generation-result{margin-top:16px;border:1px solid #35353b;border-radius:18px;overflow:hidden;background:#111114}
.generation-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.generation-result video{display:block;width:100%;max-height:70vh;background:#000}
#account-button{white-space:nowrap}
.admin-diagnostics{margin:0 16px 16px;padding:16px;border:1px solid #3b3b42;border-radius:12px;background:#0e0e11}
.admin-diagnostics-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.admin-diagnostics-head>div:first-child{display:grid;gap:4px}
.admin-kicker{font-size:10px;letter-spacing:.12em;color:var(--accent);font-weight:700}
.admin-state{font-size:12px;color:#b9b9bf;border:1px solid #34343a;border-radius:999px;padding:5px 8px}
.admin-runtime-actions{display:flex;align-items:center;gap:8px}
.button.danger{background:#2a1111;border-color:#6b2d2d;color:#ffb4b4}
.button.danger:hover{background:#3a1717;border-color:#8a3939}
.diag-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.diag-stage{border:1px solid #29292f;border-radius:8px;padding:12px;background:#141418}
.diag-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:8px}
.diag-label span{color:#c9c9cf}.diag-label strong{font-variant-numeric:tabular-nums}
.diag-track{height:6px;background:#27272d;border-radius:999px;overflow:hidden}
.diag-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .2s ease}
.diag-stage small{display:block;margin-top:8px;color:#85858e;font-size:11px;line-height:1.4}
.diag-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.diag-metrics>div{display:grid;gap:4px;padding:10px;border:1px solid #29292f;border-radius:8px}
.diag-metrics span{font-size:10px;color:#777781;text-transform:uppercase;letter-spacing:.06em}.diag-metrics strong{font-size:13px;font-variant-numeric:tabular-nums}
.diag-note{margin-top:12px;color:#8f8f98;font-size:11px;line-height:1.5}
@media (max-width:720px){#account-button{padding-inline:12px}.generation-result-head{align-items:flex-start;flex-direction:column}.admin-diagnostics{margin-inline:12px}.diag-stages{grid-template-columns:1fr}.diag-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.diag-error{margin-top:12px;border:1px solid #3a2626;border-radius:10px;background:#171111;padding:10px 12px}
.diag-error summary{cursor:pointer;color:#ffb4b4;font-size:11px;font-weight:700}
.diag-error pre{white-space:pre-wrap;word-break:break-word;margin:10px 0 0;color:#c8a1a1;font-size:10px;line-height:1.45}

.diag-restored-preview{display:grid;gap:8px;margin-top:12px;padding:10px;border:1px solid #29292f;border-radius:8px;background:#141418}
.diag-restored-preview span{font-size:11px;color:#9a9aa3}
.diag-restored-preview img{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:6px;background:#09090b}


.pricing-section{margin:72px 0 24px;padding:32px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(255,255,255,.025)}
.pricing-heading{align-items:flex-end}.eyebrow,.plan-name{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#aaa}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.pricing-card{position:relative;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:#111113}.pricing-card.featured{border-color:rgba(255,100,31,.55)}.plan-price{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px}.plan-price strong{font-size:38px;line-height:1}.plan-price span,.pricing-card p,.pricing-note{color:#aaa}.pricing-card .button{width:100%;margin-top:18px}.plan-badge{position:absolute;right:18px;top:18px;font-size:11px;color:#ff7a3c}.billing-account{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05)}.pricing-note{font-size:12px;margin:14px 0 0}@media(max-width:700px){.pricing-section{padding:20px}.pricing-grid{grid-template-columns:1fr}.billing-account{align-items:flex-start;flex-direction:column}}