/* Hallmark · genre: atmospheric · macrostructure: Workbench · theme: custom "Projector"
 * vibe: dark cinema, tungsten REC light, film timecode · paper oklch(15% 0.006 60) · accent oklch(71% 0.19 41) red-orange
 * display: Roboto Flex (wide) + body: Onest + mono: JetBrains Mono · nav: N5 floating pill · footer: Ft5 statement
 * axes: dark / display-wide-sans / warm
 */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --color-paper: oklch(15% 0.006 60);
  --color-paper-2: oklch(19% 0.007 60);
  --color-paper-3: oklch(24% 0.009 60);
  --color-paper-4: oklch(30% 0.01 60);
  --color-ink: oklch(96% 0.008 85);
  --color-ink-2: oklch(80% 0.012 78);
  --color-ink-3: oklch(68% 0.012 72);
  --color-rule: oklch(96% 0.008 85 / 0.1);
  --color-rule-2: oklch(96% 0.008 85 / 0.18);
  --color-accent: oklch(71% 0.19 41);
  --color-accent-hi: oklch(77% 0.17 48);
  --color-accent-soft: oklch(71% 0.19 41 / 0.14);
  --color-on-accent: oklch(17% 0.03 40);
  --color-ok: oklch(79% 0.14 155);
  --color-ok-soft: oklch(79% 0.14 155 / 0.12);
  --color-warn: oklch(84% 0.14 85);
  --color-warn-soft: oklch(84% 0.14 85 / 0.12);
  --color-err: oklch(72% 0.16 25);
  --color-err-soft: oklch(72% 0.16 25 / 0.12);
  --color-focus: oklch(87% 0.13 90);
  --color-scrim: oklch(10% 0.005 60 / 0.82);
  --color-bloom: oklch(71% 0.19 41 / 0.13);

  --font-display: 'Roboto Flex', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem;
  --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem;

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem;
  --text-display-s: clamp(2.1rem, 4.2vw + 0.6rem, 3.6rem);
  --text-display: clamp(2.5rem, 5.6vw + 0.6rem, 5rem);

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-short: 220ms; --dur-med: 420ms;
  --shadow-card: 0 24px 60px -30px oklch(0% 0 0 / 0.7);
  --shadow-lift: 0 18px 46px -18px oklch(71% 0.19 41 / 0.42);

  /* legacy aliases — SEO, locale and checkout pages read these names */
  --bg: var(--color-paper); --bg2: var(--color-paper-2);
  --panel: var(--color-paper-2); --panel2: var(--color-paper-3);
  --line: var(--color-rule); --text: var(--color-ink); --muted: var(--color-ink-2); --muted2: var(--color-ink-3);
  --vio: var(--color-accent); --mag: var(--color-accent); --cyan: var(--color-accent);
  --grad: var(--color-accent); --grad2: var(--color-accent-soft);
  --ok: var(--color-ok); --warn: var(--color-warn); --err: var(--color-err);
  --r-lg: var(--radius-lg); --r-md: var(--radius-md); --r-sm: var(--radius-sm);
  --font: var(--font-body); --shadow-glow: var(--shadow-lift);
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip; text-rendering: optimizeLegibility;
}
body::before { /* one warm bloom behind the hero — fixed, no animation */
  content: ''; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 900px; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 78% 8%, var(--color-bloom), transparent 70%);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3, h4 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ico-svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aurora, .blob { display: none; } /* retired atmosphere layers still present on older pages */

/* ---------- layout ---------- */
.wrap { width: min(1200px, calc(100% - 2 * var(--space-md))); margin: 0 auto; }
section { position: relative; padding: var(--space-3xl) 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-2xl); align-items: center; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-3); }

/* ---------- type ---------- */
h1, .display {
  font-family: var(--font-display); font-weight: 820; font-stretch: 118%;
  font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.035em; margin: 0;
}
h2 { font-family: var(--font-display); font-weight: 780; font-stretch: 112%; font-size: var(--text-display-s); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
h3 { font-family: var(--font-display); font-weight: 720; font-stretch: 108%; letter-spacing: -0.015em; }
.accent { color: var(--color-accent); }
h1 .grad { color: var(--color-accent); background: none; -webkit-text-fill-color: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 46px; padding: 0 var(--space-md); border-radius: var(--radius-pill);
  font-weight: 650; font-size: var(--text-base); white-space: nowrap; line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hi); box-shadow: var(--shadow-lift); }
.btn-ghost { border: 1px solid var(--color-rule-2); background: transparent; color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-paper-3); border-color: var(--color-ink-3); }
.btn-sm { min-height: 38px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.btn-xl { min-height: 56px; padding: 0 var(--space-lg); font-size: var(--text-md); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }
.btn.pulse { box-shadow: 0 0 0 0 var(--color-accent); animation: ring 1.6s var(--ease-out) infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 oklch(71% 0.19 41 / 0.55); } 100% { box-shadow: 0 0 0 14px oklch(71% 0.19 41 / 0); } }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--color-ink); font-weight: 600; border-bottom: 1px solid var(--color-rule-2); padding-bottom: 2px; }
.link-arrow:hover { border-color: var(--color-accent); color: var(--color-accent-hi); }

/* ---------- nav (N5 floating pill) ---------- */
header { position: sticky; top: var(--space-xs); z-index: 60; padding: 0 var(--space-xs); }
.nav {
  display: flex; align-items: center; gap: var(--space-sm); height: 58px; padding: 0 var(--space-2xs) 0 var(--space-md);
  width: min(1200px, 100%); margin: 0 auto; border-radius: var(--radius-pill);
  background: oklch(19% 0.007 60 / 0.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--color-rule);
}
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
.logo .mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--color-ink); color: var(--color-paper); font-size: 0; }
.logo .mark::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-paper); }
.logo span[style] { background: none !important; -webkit-text-fill-color: currentColor; color: var(--color-accent) !important; }
.nav-links { display: flex; gap: var(--space-md); margin-left: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.nav-links a { padding: var(--space-2xs) 0; white-space: nowrap; }
.nav-links a:hover { color: var(--color-ink); }
.spacer { flex: 1; }
.chip-balance { display: none; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.chip-balance:not([hidden]) { display: inline-flex; }
.chip-balance .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); }

/* language select (Codex i18n) */
.lang-switch { border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.lang-switch select { appearance: none; -webkit-appearance: none; background: transparent; color: var(--color-ink-2);
  font: inherit; font-size: var(--text-xs); font-weight: 600; border: 0; border-radius: var(--radius-pill);
  padding: 9px 28px 9px 13px; width: 132px; max-width: 26vw; cursor: pointer;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23b9b1a4" stroke-width="2.5"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right 10px center; }
.lang-switch select option { color: var(--color-ink); background: var(--color-paper-2); }
html[dir=rtl] .lang-switch select { background-position: left 10px center; padding: 9px 13px 9px 28px; }

/* ---------- hero ---------- */
.hero { padding: var(--space-2xl) 0 var(--space-xl); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.kicker { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); }
.kicker .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.hero h1 { margin: var(--space-md) 0 var(--space-md); max-width: 13ch; }
.hero p.sub { font-size: var(--text-md); color: var(--color-ink-2); max-width: 46ch; margin: 0 0 var(--space-lg); }
.hero-cta { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.hero-note { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-3); }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note .star { color: var(--color-warn); }

/* the reel: real render in a plain frame — no device chrome */
.hero-visual { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: var(--space-sm); align-items: end; max-width: 470px; margin-left: auto; width: 100%; }
.reel { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 9 / 15;
  background: var(--color-paper-2); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card); }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel .tc { position: absolute; top: var(--space-sm); left: var(--space-sm); right: var(--space-sm); display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; color: var(--color-ink); text-shadow: 0 1px 8px oklch(0% 0 0 / 0.6); }
.reel .tc b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.reel .cap { position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md); background: oklch(15% 0.006 60 / 0.72); font-size: var(--text-sm); font-weight: 600; }
.reel-side { display: grid; gap: var(--space-xs); }
.reel-side a { display: grid; gap: 6px; font-size: var(--text-2xs); color: var(--color-ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.reel-side img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-rule);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.reel-side a:hover img { border-color: var(--color-accent); transform: translateY(-2px); }
.reel-side a:hover { color: var(--color-ink); }
/* legacy hero bits kept invisible for older cached markup */
.phone .notch, .float-card { display: none; }

/* ---------- section heads ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-md) var(--space-xl); align-items: end; margin: 0 0 var(--space-xl); }
.sec-head > .kicker { grid-column: 1 / -1; }
.sec-head h2 { grid-column: 1; }
.sec-head p { grid-column: 2; margin: 0; color: var(--color-ink-2); font-size: var(--text-md); max-width: 44ch; }
.sec-head.solo { grid-template-columns: minmax(0, 1fr); }
.sec-head.solo p { grid-column: 1; }

/* ---------- studio (workbench) ---------- */
.studio { scroll-margin-top: 90px; padding-top: var(--space-xl); }
.studio-card { border-radius: calc(var(--radius-lg) + 6px); border: 1px solid var(--color-rule); background: var(--color-paper-2); padding: var(--space-lg); box-shadow: var(--shadow-card); }
.studio-steps { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; justify-content: space-between; padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.studio-steps ol { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.studio-steps li { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.studio-steps li b { font-family: var(--font-mono); font-size: var(--text-xs); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-rule-2); color: var(--color-ink); font-weight: 500; }
.mode-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--color-paper); border: 1px solid var(--color-rule); }
.mode-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.mode-tabs button:hover { color: var(--color-ink); }
.mode-tabs button.on { background: var(--color-ink); color: var(--color-paper); }
.studio-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-lg); }

/* upload zone */
.upload-zone { position: relative; border: 1.5px dashed var(--color-rule-2); border-radius: var(--radius-lg); min-height: 380px;
  display: grid; place-items: center; text-align: center; padding: var(--space-md); cursor: pointer; overflow: hidden; background: var(--color-paper);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.upload-zone:hover, .upload-zone.drag { border-color: var(--color-accent); background: oklch(15% 0.02 45); }
.upload-zone .inner { display: grid; gap: var(--space-2xs); justify-items: center; }
.upload-zone .big-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-3); color: var(--color-ink); font-size: 0; margin-bottom: var(--space-2xs); }
.upload-zone .big-ico svg { width: 26px; height: 26px; }
.upload-zone h4 { margin: 0; font-family: var(--font-display); font-weight: 720; font-size: var(--text-lg); letter-spacing: -0.01em; }
.upload-zone span { color: var(--color-ink-2); font-size: var(--text-sm); }
.upload-zone small { color: var(--color-ink-3); font-size: var(--text-xs); }
.upload-zone img.preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-zone .clear { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-scrim); border: 1px solid var(--color-rule-2); display: none; place-items: center; }
.upload-zone.has img.preview { display: block; }
.upload-zone.has .clear { display: grid; }
.upload-zone.has .inner { opacity: 0; }
.sample-btn { position: relative; z-index: 3; margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-hi);
  border-bottom: 1px solid currentColor; padding: 4px 0; }
.sample-btn:hover { color: var(--color-ink); }
.upload-zone.has .sample-btn { display: none; }

/* templates picker */
.field + .field { margin-top: var(--space-md); }
.field label, .field .label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); margin: 0 0 var(--space-2xs); }
.tpl-row { display: flex; gap: var(--space-xs); overflow-x: auto; padding: 2px 2px var(--space-xs); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-paper-4) transparent; }
.tpl { position: relative; flex: 0 0 108px; scroll-snap-align: start; border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  border: 2px solid transparent; aspect-ratio: 3 / 4; background: var(--color-paper-3); transition: border-color var(--dur-fast) var(--ease-out); }
.tpl img { width: 100%; height: 100%; object-fit: cover; }
.tpl:hover { border-color: var(--color-rule-2); }
.tpl.on { border-color: var(--color-accent); }
.tpl .name { position: absolute; inset: auto 0 0 0; z-index: 2; font-size: var(--text-2xs); font-weight: 600; padding: 18px 8px 7px; line-height: 1.2;
  background: linear-gradient(transparent, oklch(10% 0.005 60 / 0.88)); }
.tpl .hot { position: absolute; top: 6px; left: 6px; z-index: 2; font-family: var(--font-mono); font-size: 10px; padding: 3px 7px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent); text-transform: uppercase; letter-spacing: 0.06em; }

/* prompt + options */
.prompt-box { position: relative; }
.prompt-box textarea, .st-prompt-body textarea { width: 100%; min-height: 120px; resize: vertical; border-radius: var(--radius-md); border: 1px solid var(--color-rule-2);
  background: var(--color-paper); color: var(--color-ink); padding: var(--space-sm); font-size: var(--text-base); line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out); }
.prompt-box textarea::placeholder { color: var(--color-ink-3); }
.prompt-box textarea:focus, .st-prompt-body textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.prompt-box .count { position: absolute; right: 12px; bottom: 10px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-3); }
.ratios { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.ratios button { min-width: 58px; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-rule-2); background: transparent;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ratios button:hover { color: var(--color-ink); }
.ratios button.on { border-color: var(--color-ink); color: var(--color-ink); background: var(--color-paper-3); }
.gen-bar { display: flex; gap: var(--space-sm); align-items: center; margin-top: var(--space-lg); flex-wrap: wrap; }
.gen-bar .btn { min-width: 220px; }
.gen-bar .meta { font-size: var(--text-sm); color: var(--color-ink-3); }

/* toggles */
.wow-row { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; margin-top: var(--space-md); }
.switch-wrap { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; user-select: none; padding: 10px 14px;
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); }
.switch-wrap b { font-size: var(--text-sm); font-weight: 600; }
.switch-wrap small { color: var(--color-ink-3); font-size: var(--text-xs); display: block; }
.switch { position: relative; width: 40px; height: 24px; flex: 0 0 40px; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-paper-4); transition: background-color var(--dur-fast) var(--ease-out); }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); }
.switch input:checked + i { background: var(--color-accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.enhance-btn { padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-rule-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); }
.enhance-btn.on { border-color: var(--color-ok); color: var(--color-ink); background: var(--color-ok-soft); }

/* progress */
.progress-wrap { display: none; margin-top: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--color-rule); background: var(--color-paper); padding: var(--space-md); }
.progress-wrap.on { display: block; }
.pg-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.pg-stage { font-weight: 600; display: flex; align-items: center; gap: var(--space-2xs); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-paper-4); border-top-color: var(--color-accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pg-pct { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-hi); font-variant-numeric: tabular-nums; }
.pg-bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.pg-fill { height: 100%; width: 0%; background: var(--color-accent); transition: width 0.8s var(--ease-out); }
.pg-hint { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-3); }

/* result */
.result-wrap { display: none; margin-top: var(--space-md); border-radius: var(--radius-lg); border: 1px solid var(--color-rule-2); background: var(--color-paper); padding: var(--space-md); }
.result-wrap.on { display: block; }
.result-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.result-media { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-rule); background: oklch(8% 0 0); position: relative; }
.result-media video, .result-media img { width: 100%; display: block; }
.result-actions { display: grid; gap: var(--space-2xs); }
.result-actions h3 { margin: 0 0 4px; font-size: var(--text-xl); }
.result-actions > p { margin: 0 0 var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.result-actions .btn { width: 100%; }
.result-note { font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; margin: var(--space-2xs) 0 0; }
.wm-hint { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--color-warn); }
.err-box { display: none; margin-top: var(--space-sm); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm);
  background: var(--color-err-soft); border: 1px solid var(--color-err); color: var(--color-ink); }
.err-box.on { display: block; }

/* mobile launcher (studio opens as full-screen stories on phones) */
.studio-launch { display: none; }

/* ---------- my creations ---------- */
.creations { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-xs); }
.creation { position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; border: 1px solid var(--color-rule); background: oklch(8% 0 0); }
.creation:hover { border-color: var(--color-accent); }
.creation video, .creation img { width: 100%; height: 100%; object-fit: cover; }
.creation .ckind { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 12px; padding: 3px 7px; border-radius: 8px; background: var(--color-scrim); }

/* ---------- styles catalogue ---------- */
.gal-filters { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin: 0 0 var(--space-md); }
.gal-filters button { padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.gal-filters button:hover { color: var(--color-ink); }
.gal-filters button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(176px, 44vw), 1fr)); gap: var(--space-sm) var(--space-xs); }
.gal .item { position: relative; display: grid; gap: var(--space-2xs); cursor: pointer; }
.gal .item[hidden] { display: none; }
.gal .item .ph { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3 / 4; background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.gal .item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out); }
.gal .item:hover img { transform: scale(1.04); }
.gal .item:hover .ph, .gal .item:focus-visible .ph { border-color: var(--color-accent); }
.gal .item .use { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent);
  font-size: var(--text-xs); font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gal .item:hover .use, .gal .item:focus-visible .use { opacity: 1; transform: none; }
.gal .item .meta { display: flex; justify-content: space-between; gap: var(--space-2xs); align-items: baseline; }
.gal .item .tag { font-weight: 600; font-size: var(--text-sm); }
.gal .item .kind { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
@media (hover: none) { .gal .item .use { opacity: 1; transform: none; } }

/* ---------- how: timecode timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-rule-2); }
.timeline li { position: relative; padding: var(--space-md) var(--space-md) 0 0; }
.timeline li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--color-ink); }
.timeline li:last-child::before { background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.timeline .mono { display: block; margin-bottom: var(--space-xs); }
.timeline h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-xl); }
.timeline p { margin: 0; color: var(--color-ink-2); max-width: 36ch; }

/* ---------- spec sheet (F3) ---------- */
.spec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; }
.spec .intro p { color: var(--color-ink-2); font-size: var(--text-md); margin: var(--space-md) 0 0; max-width: 40ch; }
.spec dl { margin: 0; border-top: 1px solid var(--color-rule-2); }
.spec .row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.spec dt { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: var(--text-md); }
.spec dd { margin: 0; color: var(--color-ink-2); }

/* ---------- pricing ---------- */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; padding: var(--space-lg) var(--space-md) var(--space-md); border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.pack.best { border-color: var(--color-accent); background: linear-gradient(180deg, oklch(20% 0.03 45), var(--color-paper-2) 60%); }
.pack .ribbon { position: absolute; top: var(--space-md); right: var(--space-md); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }
.pack .ribbon-alt { background: var(--color-ink); color: var(--color-paper); }
.pack h3 { margin: 0 0 4px; font-size: var(--text-lg); }
.pack .desc { color: var(--color-ink-2); font-size: var(--text-sm); margin: 0 0 var(--space-md); min-height: 2.6em; }
.pack .price { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 3rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pack .price s { font-family: var(--font-body); font-size: var(--text-md); color: var(--color-ink-3); font-weight: 500; margin-left: 10px; letter-spacing: 0; }
.pack .per { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); margin: var(--space-xs) 0 var(--space-md); }
.pack ul { list-style: none; margin: 0 0 var(--space-lg); padding: var(--space-md) 0 0; display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); border-top: 1px solid var(--color-rule); }
.pack ul li { display: flex; gap: 10px; align-items: flex-start; }
.pack ul li::before { content: ''; flex: 0 0 14px; height: 8px; margin-top: 5px; border-left: 2px solid var(--color-ok); border-bottom: 2px solid var(--color-ok); transform: rotate(-45deg) translate(2px, -1px); }
.pack .btn { margin-top: auto; width: 100%; }
.pay-trust { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); justify-content: center; color: var(--color-ink-3); font-size: var(--text-sm); margin: var(--space-md) 0 0; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; }
.faq-wrap .side p { color: var(--color-ink-2); margin: var(--space-md) 0 var(--space-md); }
.faq { display: grid; border-top: 1px solid var(--color-rule-2); }
.qa { border-bottom: 1px solid var(--color-rule); }
.qa button { width: 100%; text-align: left; padding: var(--space-md) 0; font-size: var(--text-md); font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; }
.qa button::after { content: ''; flex: 0 0 12px; height: 12px; border-right: 2px solid var(--color-ink-3); border-bottom: 2px solid var(--color-ink-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-short) var(--ease-out); }
.qa.open button::after { transform: rotate(225deg) translateY(-3px); border-color: var(--color-accent); }
.qa .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-short) var(--ease-out); }
.qa .a > p { overflow: hidden; margin: 0; color: var(--color-ink-2); }
.qa.open .a { grid-template-rows: 1fr; }
.qa.open .a > p { padding-bottom: var(--space-md); }
html[dir=rtl] .qa button { text-align: right; }

/* ---------- use-case index ---------- */
.index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); border-top: 1px solid var(--color-rule-2); }
.index-list a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.index-list a b { font-weight: 600; }
.index-list a span { color: var(--color-ink-3); font-size: var(--text-sm); text-align: right; }
.index-list a:hover b { color: var(--color-accent-hi); }

/* ---------- closing statement + footer (Ft5) ---------- */
.closing { padding: var(--space-3xl) 0 var(--space-2xl); }
.closing h2 { font-size: var(--text-display); max-width: 14ch; }
.closing p { color: var(--color-ink-2); font-size: var(--text-md); margin: var(--space-md) 0 var(--space-lg); }
.cta-band { display: block; } /* legacy wrapper on cached pages */
footer { border-top: 1px solid var(--color-rule); padding: var(--space-xl) 0 calc(var(--space-2xl) + env(safe-area-inset-bottom)); }
.foot { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; justify-content: space-between; color: var(--color-ink-3); font-size: var(--text-sm); }
.foot .links { display: flex; gap: var(--space-2xs) var(--space-md); flex-wrap: wrap; }
.foot a:hover { color: var(--color-ink); }
.language-directory { margin-top: var(--space-md); padding: var(--space-sm) 0 0; border-top: 1px solid var(--color-rule); color: var(--color-ink-3); }
.language-directory summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-ink-2); }
.language-directory nav, .locale-directory { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); padding-top: var(--space-sm); }
.language-directory a, .locale-directory a { font-size: var(--text-sm); color: var(--color-ink-3); }
.language-directory a:hover, .locale-directory a:hover { color: var(--color-ink); }

/* ---------- overlays & modals ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: var(--color-scrim); display: none; align-items: center; justify-content: center; padding: var(--space-sm); }
.overlay.on { display: flex; animation: fade var(--dur-short) var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
.modal { position: relative; width: min(540px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); box-shadow: 0 40px 120px oklch(0% 0 0 / 0.7);
  animation: rise var(--dur-short) var(--ease-out); }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.modal h3 { margin: 0 0 6px; font-size: var(--text-xl); }
.modal .sub { color: var(--color-ink-2); margin: 0 0 var(--space-md); font-size: var(--text-sm); }
.modal .close-x { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-rule-2); color: var(--color-ink-2); }
.modal .close-x:hover { color: var(--color-ink); border-color: var(--color-ink-3); }
.modal .row2 { display: flex; gap: var(--space-2xs); margin-top: var(--space-md); }
.modal .row2 .btn { flex: 1; }
.modal .fine { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; line-height: 1.6; }

/* paywall */
.modal.pw { padding-top: var(--space-md); }
.pw-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); }
.pw-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.modal.pw h3 { margin: var(--space-xs) 48px var(--space-sm) 0; font-size: var(--text-2xl); line-height: 1.05; }
.pw-perks { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: grid; gap: 6px; font-size: var(--text-sm); color: var(--color-ink-2); }
.pw-perks li { display: flex; gap: 10px; align-items: flex-start; }
.pw-perks li::before { content: ''; flex: 0 0 12px; height: 7px; margin-top: 6px; border-left: 2px solid var(--color-ok); border-bottom: 2px solid var(--color-ok); transform: rotate(-45deg); }
.welcome-timer { display: none; align-items: center; justify-content: space-between; gap: var(--space-xs); margin: 0 0 var(--space-sm); padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md); background: var(--color-accent-soft); border: 1px solid var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
.welcome-timer.on { display: flex; }
.welcome-timer .clock { font-family: var(--font-mono); font-size: var(--text-md); font-variant-numeric: tabular-nums; color: var(--color-accent-hi); }
.mpacks { display: grid; gap: var(--space-2xs); }
.mpack { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); align-items: center; text-align: left; width: 100%;
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1.5px solid var(--color-rule-2); background: var(--color-paper);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.mpack:hover { border-color: var(--color-ink-3); }
.mpack.on { border-color: var(--color-accent); background: oklch(18% 0.025 45); }
.mpack.best:not(.on) { border-color: var(--color-rule-2); }
.mpack .mtag { position: absolute; top: -9px; left: var(--space-md); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }
.mpack .mtag.alt { background: var(--color-ink); color: var(--color-paper); }
.mpack .nm { font-weight: 700; font-size: var(--text-base); }
.mpack .save { grid-column: 1; font-size: var(--text-xs); color: var(--color-ink-2); }
.mpack .pr { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-family: var(--font-display); font-weight: 780; font-stretch: 110%; font-size: var(--text-xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mpack .pr s { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-3); font-weight: 500; letter-spacing: 0; }
.mpack .gemv { grid-column: 2; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-3); text-align: right; }
.modal.pw #payBtn { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -18px 24px var(--color-paper-2); }
.pw-trust { margin: var(--space-xs) 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-ink-3); }
.pay-note { display: none; margin: var(--space-sm) 0 0; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-sm);
  background: var(--color-err-soft); border: 1px solid var(--color-err); text-align: center; }
.pay-note.on { display: block; }

/* checkout loader + in-app handoff */
.pay-loading { position: fixed; inset: 0; z-index: 140; display: none; place-items: center; padding: var(--space-md); background: var(--color-scrim); }
.pay-loading.on { display: grid; }
.pay-loading .pl-box { display: grid; justify-items: center; gap: var(--space-xs); text-align: center; max-width: 320px; }
.pay-loading .spinner { width: 34px; height: 34px; border-width: 3px; }
.pay-loading b { font-size: var(--text-md); }
.pay-loading small { color: var(--color-ink-2); font-size: var(--text-sm); }
.modal.handoff h3 { margin-right: 44px; }
.ho-steps { margin: 0 0 var(--space-md); padding-left: 20px; color: var(--color-ink-2); font-size: var(--text-sm); display: grid; gap: var(--space-2xs); }
.modal.handoff .btn { width: 100%; margin-top: var(--space-2xs); }
.ho-here { display: block; margin: var(--space-sm) auto 0; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; padding: var(--space-2xs); }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 130;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 600;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5); transition: transform var(--dur-short) var(--ease-out); max-width: calc(100vw - 2 * var(--space-md)); text-align: center; }
.toast.on { transform: translate(-50%, 0); }
.toast.err { background: var(--color-err); color: var(--color-on-accent); }
.confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; }

/* reveal: fade only, content visible without JS */
.rv { opacity: 1; }
.js .rv:not(.in) { opacity: 0; }
.rv { transition: opacity var(--dur-med) var(--ease-out); }

/* sticky mobile CTA */
.m-cta { display: none; }

/* ---------- stories flow (mobile studio) ---------- */
.stories { position: fixed; inset: 0; z-index: 90; background: oklch(8% 0.004 60); display: none; place-items: center; }
.stories.on { display: grid; animation: fade var(--dur-short) var(--ease-out); }
.st-frame { position: relative; width: min(100vw, 430px); height: 100svh; background: var(--color-paper); overflow: hidden; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 431px) and (min-height: 700px) {
  .st-frame { height: min(900px, calc(100svh - 28px)); border-radius: var(--radius-lg); border: 1px solid var(--color-rule-2); }
}
.st-segs { display: flex; gap: 4px; padding: 10px 12px 4px; }
.st-segs i { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--color-paper-4); overflow: hidden; position: relative; }
.st-segs i b { position: absolute; inset: 0; width: 0%; background: var(--color-accent); transition: width var(--dur-med) var(--ease-out); }
.st-segs i.done b { width: 100%; }
.st-head { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); }
.st-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-rule-2); flex: 0 0 36px; }
.st-title { flex: 1; font-family: var(--font-display); font-weight: 750; font-stretch: 110%; font-size: var(--text-md); text-align: center; }
.st-step { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.st-screens { position: relative; flex: 1; min-height: 0; }
.st-screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.st-screen.on { display: flex; }
.st-cards { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.st-cards::-webkit-scrollbar { display: none; }
.st-card { position: relative; flex: 0 0 100%; scroll-snap-align: center; height: 100%; }
.st-card img { width: 100%; height: 100%; object-fit: cover; }
.st-cap { position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); z-index: 3; padding: var(--space-sm);
  border-radius: var(--radius-md); background: oklch(13% 0.005 60 / 0.84); border: 1px solid var(--color-rule); }
.st-cap h3 { margin: 6px 0 4px; font-size: var(--text-xl); }
.st-cap p { margin: 0; font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); text-transform: uppercase; }
.st-kind.photo { background: var(--color-ink); color: var(--color-paper); }
.st-own { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 3; padding: 9px 14px; border-radius: var(--radius-pill);
  background: oklch(13% 0.005 60 / 0.84); border: 1px solid var(--color-rule-2); font-size: var(--text-sm); font-weight: 600; }
.st-photo-body { flex: 1; display: grid; place-content: center; gap: var(--space-sm); padding: var(--space-md); }
.st-photo-zip { position: relative; width: min(76vw, 290px); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: var(--radius-lg); border: 1.5px dashed var(--color-rule-2);
  background: var(--color-paper-2); display: grid; place-items: center; text-align: center; overflow: hidden; cursor: pointer; }
.st-photo-zip.has { border-style: solid; border-color: var(--color-ok); }
.st-photo-zip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-photo-zip.has .st-photo-inner { opacity: 0; }
.st-photo-inner { display: grid; gap: 6px; justify-items: center; padding: var(--space-sm); }
.st-photo-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--color-paper-3); display: grid; place-items: center; font-size: 0; }
.st-photo-ico svg { width: 24px; height: 24px; }
.st-photo-inner h4 { margin: 4px 0 0; font-family: var(--font-display); font-weight: 720; font-size: var(--text-lg); }
.st-photo-inner span { color: var(--color-ink-3); font-size: var(--text-sm); }
.st-photo-hint { text-align: center; color: var(--color-ink-3); font-size: var(--text-xs); margin: 0; }
.st-photo-body .sample-btn { justify-self: center; }
.st-prompt-body { flex: 1; display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md) var(--space-md) 110px; overflow-y: auto; }
.st-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.st-prompt-body textarea { resize: none; }
.st-prompt-body .switch-wrap { width: 100%; }
.st-render-body { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-lg); text-align: center; }
.st-ring { position: relative; width: 144px; height: 144px; }
.st-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring .bg { fill: none; stroke: var(--color-paper-3); stroke-width: 6; }
.st-ring .fg { fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 0.6s var(--ease-out); }
.st-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.st-render-body h3 { margin: 0; font-size: var(--text-lg); }
.st-hint { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.st-result-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.st-media { flex: 1; min-height: 0; display: grid; place-items: center; background: oklch(6% 0 0); overflow: hidden; }
.st-media video, .st-media img { width: 100%; height: 100%; object-fit: contain; }
.st-result-actions { padding: var(--space-sm) var(--space-sm) 6px; display: grid; gap: var(--space-2xs); }
.st-result-actions h3 { margin: 0; font-size: var(--text-lg); text-align: center; }
.st-result-actions .btn { width: 100%; }
.st-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
.st-note { margin: 0; font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; }
.st-nav { display: flex; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm) var(--space-sm); }
.st-back { flex: 0 0 52px; min-height: 52px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-lg); }
.st-back[disabled] { opacity: 0.3; }
.st-next { flex: 1; min-height: 52px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-base); background: var(--color-accent); color: var(--color-on-accent); }
.st-next[disabled] { opacity: 0.45; }
.st-next:active { transform: scale(0.99); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .studio-grid { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .grid2, .spec, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero-visual { margin: 0; max-width: 520px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head p { grid-column: 1; }
  .packs { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .upload-zone { min-height: 260px; }
}
@media (max-width: 760px) {
  section { padding: var(--space-2xl) 0; }
  .wrap { width: calc(100% - 2 * var(--space-sm)); }
  header { top: var(--space-2xs); padding: 0 var(--space-2xs); }
  .nav { height: 54px; gap: var(--space-2xs); padding: 0 6px 0 var(--space-sm); }
  .logo { font-size: 17px; }
  .lang-switch select { width: 98px; max-width: 26vw; padding-left: 10px; }
  .nav > .btn { padding: 0 var(--space-xs); }
  .hero { padding: var(--space-lg) 0 var(--space-lg); }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); margin: var(--space-sm) 0; }
  .hero p.sub { font-size: var(--text-base); margin-bottom: var(--space-md); }
  .hero-cta .btn { width: 100%; }
  .hero-visual { grid-template-columns: minmax(0, 1fr); }
  .reel { aspect-ratio: 4 / 5; }
  .reel-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reel-side img { aspect-ratio: 1; }
  .studio-card { padding: var(--space-md); }
  .studio-card .studio-grid, .studio-card .mode-tabs, .studio-steps { display: none; }
  .studio-launch { display: grid; gap: var(--space-sm); padding: var(--space-xs) 0; }
  .studio-launch .thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .studio-launch .thumbs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); }
  .studio-launch h3 { margin: var(--space-2xs) 0 0; font-size: var(--text-xl); }
  .studio-launch p { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
  .studio-launch .btn { width: 100%; }
  .timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--color-rule-2); margin-left: 4px; }
  .timeline li { padding: 0 0 var(--space-lg) var(--space-md); }
  .timeline li::before { top: 4px; left: -5px; }
  .spec .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .index-list { grid-template-columns: minmax(0, 1fr); }
  .index-list a span { display: none; }
  .result-grid { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: var(--space-md); }
  .modal.pw h3 { font-size: var(--text-xl); }
  .closing h2 { font-size: var(--text-display-s); }
  .m-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--color-paper) 45%); transform: translateY(110%); transition: transform var(--dur-short) var(--ease-out); }
  .m-cta.on { transform: translateY(0); }
  .m-cta .btn { width: 100%; min-height: 54px; }
}
@media (max-width: 380px) {
  .lang-switch { display: none; }
}
html[dir=rtl] .studio-grid, html[dir=rtl] .cols { direction: rtl; }
html[dir=rtl] input, html[dir=rtl] textarea { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
.logo .mark svg { display: none; }
/* the demo clip carries the render provider's corner mark — crop it out */
.reel video { transform: scale(1.16); transform-origin: 50% 28%; }
.toast { visibility: hidden; opacity: 0; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.toast.on { visibility: visible; opacity: 1; transition-delay: 0s; }