:root {
  --bg: #F4F1EA;      /* light beige; the paper texture sits on top */
  --soft: #F5F5F7;
  --soft-2: #EEEEF1;
  --line: #E6E6EA;
  --ink: #0E0E10;
  --text: #1C1C1F;
  --muted: #6B6B73;
  --faint: #9A9AA3;
  --err: #C4352B;
  --ok: #1E8E5A;
  --violet: #C2507F;
  --grad: linear-gradient(100deg, #FCD9E3 0%, #F5B3C9 55%, #EC97B7 100%);
  --blush: #FFF1F5;
  --blush-2: #FBE1EA;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(14,14,16,.04), 0 8px 28px rgba(14,14,16,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg) url("/brand/paper.jpg") repeat; background-size: 440px; color: var(--text);
  font: 16px/1.55 Inter, system-ui, -apple-system, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.02em; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20; background: rgba(244,241,234,.86); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 14px Inter, sans-serif; letter-spacing: -0.03em; }
.brand .word { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; }
.top-actions { display: flex; align-items: center; gap: 8px; }

.pill-btn {
  font: 500 15px Inter, sans-serif; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; text-decoration: none; transition: border-color .15s, background .15s;
}
.pill-btn:hover { border-color: #C9C9D0; }
.pill-btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.pill-btn.dark:hover { background: #2A2A2E; }
.pill-btn.small { padding: 7px 14px; font-size: 13px; }
.pill-btn.big { padding: 14px 24px; font-size: 16px; }
.pill-btn:disabled { opacity: .5; cursor: default; }
.pill-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon-btn:hover { border-color: #C9C9D0; }

.banner { background: var(--soft); color: var(--muted); font-size: 14px; padding: 10px 24px; border-bottom: 1px solid var(--line); text-align: center; }

/* stepper: a segmented control */
.stepper-wrap { display: flex; justify-content: center; padding: 18px 16px 0; }
.stepper { list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; background: var(--soft); border-radius: 16px; counter-reset: s; overflow-x: auto; max-width: 100%; }
.stepper li { counter-increment: s; padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.stepper li::before { content: counter(s) "  "; color: var(--faint); font-weight: 600; }
.stepper li.done { color: var(--text); }
.stepper li.done::before { content: "✓  "; color: var(--ok); }
.stepper li.now { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }

/* ---------- layout ---------- */
main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 36px 24px 80px; flex: 1; }
.screen { animation: in .35s ease; }
.screen.narrow { max-width: 520px; margin: 0 auto; text-align: center; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero { text-align: center; max-width: 820px; margin: 16px auto 34px; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 12px; }
.display { font-size: clamp(38px, 6.4vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.045em; margin: 0 0 16px; }
.display.small { font-size: clamp(32px, 5vw, 52px); }
.sub { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto 8px; }
.sub.small { font-size: 16px; margin: 0 0 18px; }
.hero .sub, .center { text-align: center; margin-left: auto; margin-right: auto; }
.title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 8px; }
.block { margin-top: 72px; }
.hint { color: var(--faint); font-size: 13px; margin: 8px 0 0; }
.err { color: var(--err); font-size: 14px; margin: 8px 0 0; }
.err:empty { display: none; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

input[type=text], input[type=password], input[type=email], textarea, select {
  width: 100%; background: var(--soft); color: var(--text); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 13px 16px; font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #C9B8FF; background: #fff; box-shadow: 0 0 0 4px rgba(214,96,140,.12); }
::placeholder { color: var(--faint); }

/* ---------- composer ---------- */
.composer { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 14px; box-shadow: var(--shadow); max-width: 860px; margin: 0 auto; }
.composer-inner { border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.composer textarea { min-height: 110px; font-size: 17px; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 4px 2px; }
.composer .err, .composer .keyline { padding: 0 6px; }
.flabel { display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.opts { display: flex; gap: 10px; flex-wrap: wrap; }
.toolchips { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.chip { font: 500 14px Inter, sans-serif; background: var(--soft); color: var(--ink); border: 0; border-radius: 12px; padding: 9px 13px; cursor: pointer; }
.chip:hover { background: var(--soft-2); }
.chip.soft { background: #FDEAF0; color: #B2436F; }
.chip.soft:hover { background: #F8D6E2; }

/* the gradient generate pill, with its cost */
.go {
  font: 700 16px Inter, sans-serif; color: #3D1424; background: var(--grad); border: 0; border-radius: 999px;
  padding: 14px 26px; cursor: pointer; box-shadow: 0 10px 28px rgba(226,120,160,.32); display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.go:hover { filter: brightness(1.05); }
.go.big { padding: 17px 30px; font-size: 17px; }
.go:disabled { opacity: .55; cursor: default; }
.cost:empty { display: none; }
.cost { font-weight: 600; opacity: .9; font-size: .9em; }
.cost::before { content: "·  "; }
.pill-btn .cost, .chip .cost { color: var(--muted); }

/* segmented controls */
.seg { display: inline-flex; background: var(--soft); border-radius: 14px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { font: 500 14px Inter, sans-serif; border: 0; background: transparent; color: var(--muted); padding: 9px 16px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.seg.small button { padding: 7px 12px; font-size: 13px; }
.badge-mini { font-size: 11px; font-weight: 600; background: #E5F6EC; color: var(--ok); padding: 2px 7px; border-radius: 999px; }

/* photo slots */
.slots { display: flex; gap: 10px; flex-wrap: wrap; }
.slot { position: relative; width: 104px; height: 132px; border-radius: 16px; overflow: hidden; background: var(--soft); flex: none; display: flex; flex-direction: column; }
.slot.empty { border: 1.5px dashed #D3D3DA; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); text-align: center; font-size: 13px; font-weight: 500; padding: 8px; background: #FAFAFB; }
.slot.empty:hover { border-color: var(--violet); color: var(--violet); }
.slot .plus { font-size: 26px; line-height: 1; font-weight: 300; }
.slot img { width: 100%; flex: 1; object-fit: cover; min-height: 0; }
.slot select { border-radius: 0; font-size: 11px; padding: 5px 6px; background: rgba(255,255,255,.95); border: 0; border-top: 1px solid var(--line); }
.slot .remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(14,14,16,.7); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.slot .tag { position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }

.keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-top: 12px; }
.keyline span::before { content: "● "; }
.keyline span.ok::before { color: var(--ok); }
.keyline span.no::before { color: var(--err); }

/* templates: big image cards with a badge */
.templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tpl { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.tpl:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tpl .art { aspect-ratio: 4/5; position: relative; display: flex; align-items: flex-end; padding: 18px; }
.tpl .art .badge { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.tpl .art .big { font-size: 44px; font-weight: 800; letter-spacing: -0.05em; color: rgba(255,255,255,.95); line-height: .95; }
.tpl .meta { padding: 18px 20px 22px; background: var(--soft); flex: 1; }
.tpl .meta h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.tpl .meta p { margin: 0; color: var(--muted); font-size: 15px; }

/* explore: tool list + preview */
.explore { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; align-items: start; }
.tools { display: flex; flex-direction: column; gap: 12px; }
.tool { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; cursor: pointer; font: inherit; color: inherit; }
.tool b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 2px; }
.tool span { color: var(--muted); font-size: 15px; }
.tool.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tool-preview { padding: 28px; min-height: 100%; }
.tool-preview .mock { background: var(--soft); border-radius: 18px; padding: 18px; margin-bottom: 22px; }
.tool-preview .mock .line { height: 10px; border-radius: 5px; background: var(--soft-2); margin: 8px 0; }
.tool-preview .mock .row { display: flex; gap: 8px; }
.tool-preview .mock .tile { flex: 1; aspect-ratio: 3/4; border-radius: 10px; }
.tool-preview h3 { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 8px; }
.tool-preview p { color: var(--muted); margin: 0; }

/* ---------- concept ---------- */
.concept { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; margin: 18px 0 28px; }
.concept .logline { font-size: 21px; line-height: 1.45; color: var(--ink); margin: 0 0 20px; font-weight: 500; letter-spacing: -0.01em; }
.say { background: #FFF0F4; color: #A33A67; padding: 14px 18px; border-radius: 16px; margin: 14px 0 18px; }
.say:empty { display: none; }
.facts { display: grid; gap: 10px; }
.fact { background: var(--soft); border-radius: 18px; padding: 14px 18px; font-size: 15px; }
.fact b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.beats { counter-reset: b; list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.beats li { counter-increment: b; display: flex; gap: 14px; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.beats li::before { content: counter(b, decimal-leading-zero); font-weight: 800; color: var(--violet); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; padding: 4px 11px; }
.refs { display: flex; gap: 8px; margin-top: 10px; }
.refs img { width: 52px; height: 66px; object-fit: cover; border-radius: 10px; }
.feedback { margin-top: 8px; max-width: none; }
.feedback textarea { min-height: 70px; font-size: 16px; }

/* ---------- references ---------- */
.refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 20px 0 22px; }
.ref { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.ref.off { opacity: .5; }
.ref .pic { background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; text-align: center; padding: 10px; position: relative; }
.ref .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ref .body { padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ref .top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ref .top-row label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.ref .kind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); font-weight: 600; }
.ref p { margin: 0; color: var(--muted); }
.ref select { font-size: 13px; padding: 9px 12px; }
.ref textarea { font-size: 12px; line-height: 1.45; }
.ref details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ref .att { display: flex; gap: 6px; align-items: center; color: var(--faint); font-size: 12px; }
.ref .att img { width: 26px; height: 34px; object-fit: cover; border-radius: 6px; }
.ref .price { font-size: 12px; color: var(--faint); }
.bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

/* ---------- storyboard ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 20px 0 24px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.frame { position: relative; background: var(--soft); display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font: 500 13px/1.35 Inter, sans-serif; color: var(--muted); }
.frame .shot { display: block; font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; }
.frame .cam { display: block; margin-top: 6px; font-size: 12px; }
.frame .no { position: absolute; top: 10px; left: 12px; font-weight: 800; color: var(--violet); font-size: 13px; }
.frame .tc { position: absolute; bottom: 10px; right: 12px; font-size: 11px; color: var(--faint); }
.panel .body { padding: 14px 16px; font-size: 14px; }
.panel .body h4 { margin: 0 0 4px; font-size: 15px; }
.panel .body p { margin: 0 0 6px; color: var(--text); }
.panel .body .snd { color: var(--faint); font-size: 12px; }
.sketch { margin: 0 0 18px; }
.sketch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sketch-head h3 { font-size: 18px; }
.sketch img { width: 100%; border-radius: 16px; margin-top: 14px; background: var(--soft); }
details.prompt { margin-bottom: 26px; }
details.prompt summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.prompt pre { white-space: pre-wrap; font: 13px/1.55 ui-monospace, Menlo, monospace; color: var(--text); max-height: 420px; overflow: auto; background: var(--soft); padding: 14px; border-radius: 14px; }
.filmbox { padding: 18px 6px 4px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.filmopts { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- film ---------- */
.film { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 28px; align-items: start; margin-top: 16px; }
.film video { width: 100%; border-radius: var(--radius); background: #000; }
.waiting { background: var(--soft); border-radius: var(--radius); padding: 40px 24px; text-align: center; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- history ---------- */
.history { display: grid; gap: 12px; margin-top: 18px; }
.hrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 12px 16px 12px 12px; background: #fff; }
.hrow .th { width: 64px; height: 64px; border-radius: 14px; background: var(--soft) center/cover no-repeat; display: grid; place-items: center; color: var(--faint); font-size: 22px; }
.hrow h4 { font-size: 15px; margin: 0 0 2px; }
.hrow .meta { color: var(--muted); font-size: 13px; }
.hrow .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hrow .usd { font-weight: 700; color: var(--ink); }
.st { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.st.completed, .st.done { background: #E5F6EC; color: var(--ok); }
.st.failed, .st.nsfw, .st.canceled { background: #FCE9E7; color: var(--err); }
.st.queued, .st.in_progress { background: #FDEAF0; color: #B2436F; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.topups { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }

/* ---------- loading ---------- */
#screen-loading { text-align: center; padding-top: 80px; }
.loader { display: inline-flex; gap: 8px; margin-bottom: 20px; }
.loader span { width: 12px; height: 12px; border-radius: 50%; background: var(--violet); animation: b 1.2s infinite ease-in-out; }
.loader span:nth-child(2) { animation-delay: .15s; }
.loader span:nth-child(3) { animation-delay: .3s; }
@keyframes b { 0%, 80%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- dialogs ---------- */
dialog.sheet {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  background: #fff; color: var(--text); border: 0; border-radius: var(--radius); padding: 24px; margin: auto;
  box-shadow: 0 30px 80px rgba(14,14,16,.25);
}
dialog.sheet::backdrop { background: rgba(14,14,16,.35); backdrop-filter: blur(3px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.sheet h3 { font-size: 17px; margin: 18px 0 6px; }
.x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.sheet-msg { background: #FFF0F4; color: #A33A67; border-radius: 14px; padding: 12px 14px; font-size: 14px; margin: 0 0 14px; }
.keybox { border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.keybox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.keybox-head h3 { margin: 0; font-size: 17px; }
.tag-soft { font-size: 12px; font-weight: 500; background: var(--soft); color: var(--muted); padding: 4px 10px; border-radius: 999px; }
.tag-soft.good { background: #E5F6EC; color: var(--ok); }
.keybox p { margin: 0; color: var(--muted); font-size: 14px; }
.keybox .saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.keybox .status { flex: 1 1 100%; font-size: 14px; font-weight: 600; color: var(--ok); }
.keybox .enter { display: flex; gap: 8px; }
.keybox .enter input { flex: 1; min-width: 0; }
.how { padding-left: 20px; margin: 0; display: grid; gap: 8px; color: var(--muted); }
.how b { color: var(--ink); font-weight: 600; }

.help-fab { position: fixed; right: 20px; bottom: 20px; z-index: 30; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 13px 20px; font: 600 15px Inter, sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 10px 30px rgba(14,14,16,.25); }

.foot { text-align: center; color: var(--faint); font-size: 12px; padding: 22px 16px 80px; border-top: 1px solid var(--line); }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .templates { grid-template-columns: 1fr; }
  .tpl .art { aspect-ratio: 16/10; }
  .explore { grid-template-columns: 1fr; }
  .concept, .film { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .top { padding: 10px 16px; }
  .brand .word { display: none; }
  .pill-btn { padding: 9px 13px; font-size: 14px; }
  #keysBtn { display: none; }
  main { padding: 24px 16px 80px; }
  .composer { padding: 10px; border-radius: 24px; }
  .composer-inner { padding: 12px; }
  .composer-foot { flex-direction: column; align-items: stretch; }
  .composer-foot .go, .composer-foot .pill-btn { justify-content: center; }
  .slot { width: calc((100% - 20px) / 3); height: auto; aspect-ratio: 3/4; }
  .block { margin-top: 56px; }
  .hrow { grid-template-columns: 52px 1fr; }
  .hrow .th { width: 52px; height: 52px; }
  .hrow .right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .go.big { width: 100%; justify-content: center; }
  .bar { justify-content: stretch; }
  .bar > * { flex: 1; justify-content: center; }
  .stepper li { padding: 8px 11px; font-size: 13px; }
  .help-fab { right: 16px; bottom: 16px; padding: 11px 16px; }
}

/* ---------- credits: wallet, packs, admin ---------- */
.balance-card { background: var(--grad); color: #fff; border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 2px; }
.balance-card .eyebrow, .balance-card .hint { color: rgba(255,255,255,.85); margin: 0; }
.balance { font-size: 20px; font-weight: 600; }
.balance b { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; margin-right: 4px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pack { border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 16px 12px; text-align: center; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.pack:hover { border-color: var(--violet); }
.pack b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.pack span { color: var(--muted); font-size: 13px; }
.pack .usd { color: var(--ink); font-weight: 600; font-size: 15px; margin-top: 6px; }
.pack .best { font-size: 11px; font-weight: 600; color: var(--violet); }
.pricelist { display: grid; gap: 6px; font-size: 14px; }
.pricelist div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.pricelist span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ledger { display: grid; gap: 4px; font-size: 14px; }
.ledger .lrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ledger .lrow .what { color: var(--text); }
.ledger .lrow .when { color: var(--faint); font-size: 12px; display: block; }
.ledger .lrow .amt { font-weight: 700; white-space: nowrap; }
.ledger .lrow .amt.plus { color: var(--ok); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.tile { background: var(--soft); border-radius: 20px; padding: 18px; }
.tile b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.tile span { color: var(--muted); font-size: 13px; }
.grant { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 8px; }
.table { display: grid; gap: 0; font-size: 14px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: 10px; }
.table .trow { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.table .trow:last-child { border-bottom: 0; }
.table .trow.head { background: var(--soft); font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.compare { font-size: 13px; color: var(--ok); font-weight: 500; }
@media (max-width: 600px) {
  .packs { grid-template-columns: 1fr; }
  .pack { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .pack .usd { margin: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .grant { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .top-actions { gap: 6px; }
  #adminBtn, #createBtn .lbl { display: none; }
  #createBtn { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 20px; }
  .icon-btn { width: 40px; height: 40px; }
  .display { font-size: 38px; }
  .display.small { font-size: 32px; }
  .hero { margin-top: 4px; }
}
body { overflow-x: hidden; }

/* ---------- v0.5: dashboard nav, references, voice, pages ---------- */
.dashnav { display: flex; gap: 2px; background: var(--soft); border-radius: 14px; padding: 4px; }
.dashnav button { border: 0; background: transparent; font: 500 14px Inter, sans-serif; color: var(--muted); padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.dashnav button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.logo-slot { overflow: hidden; }
.banner.nudge { background: #FFF0F4; color: #A33A67; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.x.small { width: 28px; height: 28px; font-size: 18px; background: rgba(255,255,255,.7); }

.modelcta { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; text-align: left; max-width: 860px; margin: 0 auto 18px; cursor: pointer; font: inherit; color: inherit; border-radius: 22px; }
.modelcta .tag-soft { justify-self: start; grid-column: 1; }
.modelcta b { font-size: 17px; color: var(--ink); grid-column: 1; }
.modelcta span:not(.tag-soft):not(.arrow) { grid-column: 1; color: var(--muted); font-size: 14px; }
.modelcta .arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-weight: 600; color: var(--violet); }
.modelcta:hover { border-color: var(--violet); }

.refhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.refhead .flabel { margin: 0; }
.refhead .hint { margin: 0; }
.slot video { width: 100%; flex: 1; object-fit: cover; min-height: 0; background: #000; }
.slot .audiotile { flex: 1; display: grid; place-items: center; align-content: center; gap: 4px; background: #FDEAF0; color: #B2436F; font-size: 11px; text-align: center; padding: 6px; }
.slot .audiotile .wave { font-size: 28px; line-height: 1; }
.slot .badge-media { position: absolute; bottom: 34px; left: 6px; background: rgba(14,14,16,.7); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; }
.slot .uploading { position: absolute; inset: 0 0 30px; display: grid; place-items: center; background: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; color: var(--muted); }
.slot .uploading.bad { color: var(--err); }

.chip.mic { display: inline-flex; align-items: center; gap: 7px; }
.chip.mic .micdot { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); }
.chip.mic.live, .chip.live { background: #FCE9E7; color: var(--err); }
.chip.mic.live .micdot { background: var(--err); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.notfinal { margin: 12px 0 0; background: #FFF6E5; color: #8A5A00; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.sketchwrap { position: relative; }
.sketchwrap .stamp { position: absolute; top: 24px; left: 12px; background: rgba(14,14,16,.75); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.tip { margin: 0; font-size: 14px; color: var(--muted); background: var(--soft); border-radius: 12px; padding: 10px 14px; }
.tip b { color: var(--ink); }
.extendbox { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px; }
.extendbox h3 { font-size: 17px; }
.versions { margin-top: 16px; }
.versions summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.vrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.gitem { margin: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.gitem img, .gitem video { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--soft); display: block; }
.gitem figcaption { padding: 10px 12px 4px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.gitem figcaption b { color: var(--ink); font-size: 14px; }
.gitem .pill-btn { margin: 6px 12px 12px; align-self: flex-start; }

.prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.pcard { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font: inherit; color: var(--muted); font-size: 14px; }
.pcard:hover { border-color: var(--violet); box-shadow: var(--shadow); }
.pcard b { color: var(--ink); font-size: 17px; letter-spacing: -0.01em; }
.pcard .tag-soft { align-self: flex-start; }
.pcard .pmeta { color: var(--violet); font-weight: 600; font-size: 13px; margin-top: auto; }
.myprompts { display: grid; gap: 10px; }
.myprompt summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.myprompt pre { white-space: pre-wrap; font: 13px/1.55 ui-monospace, Menlo, monospace; background: var(--soft); padding: 12px; border-radius: 12px; max-height: 320px; overflow: auto; }

.lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.lesson { border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.lesson h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.lesson p { margin: 0; color: var(--muted); font-size: 15px; }
.lesson .pill-btn { align-self: flex-start; }
.lesson.soon { background: var(--soft); border-style: dashed; }
.lesson.soon h3, .lesson.soon p { opacity: .7; }

.modelgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; align-items: start; }
.slot.empty.inspire { width: 100%; height: 160px; }
.slot.inspire img { width: 100%; height: 100%; object-fit: cover; }
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.mcard { margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.mcard .mpic { aspect-ratio: 3/4; background: var(--soft); display: grid; place-items: center; }
.mcard .mpic img { width: 100%; height: 100%; object-fit: cover; }
.mcard figcaption { font-size: 12px; color: var(--muted); padding: 0 12px; }
.mcard .pill-btn { margin: 0 12px; align-self: flex-start; }

.ptable { display: grid; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; font-size: 14px; margin: 12px 0; color: var(--text); font-weight: 400; }
.ptable .crow { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.ptable .crow:last-child { border-bottom: 0; }
.ptable .crow.head { background: var(--soft); font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ptable .crow span:nth-child(2) { color: var(--ok); font-weight: 600; }

@media (max-width: 900px) {
  .top { flex-wrap: wrap; }
  .dashnav { order: 3; width: 100%; overflow-x: auto; justify-content: space-between; }
  .dashnav button { flex: 1; white-space: nowrap; }
  .modelgrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dashnav button { padding: 8px 6px; font-size: 13px; }
  .ptable .crow { grid-template-columns: 1fr 1fr; }
  .ptable .crow span:first-child { grid-column: 1 / -1; font-weight: 600; color: var(--ink); }
  .modelcta { grid-template-columns: 1fr; }
  .modelcta .arrow { grid-column: 1; grid-row: auto; }
}

@media (max-width: 600px) {
  .help-fab { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .help-fab .lbl { display: none; }
}
@media (max-width: 600px) { .pack:not(.custom) > span:first-of-type:not(.paying) { display: none; } }

/* ---------- v0.5.1: pay per video, plans, model builder ---------- */
.paystrip { max-width: 1000px; margin: 64px auto 0; background: linear-gradient(135deg, #FFF4F7, #FFF5FA); border: 1px solid #F9DFE8; border-radius: 28px; padding: 32px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 32px; }
.paystrip .title { margin-bottom: 6px; }
.paystrip .eyebrow { color: var(--violet); }
.paypoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.paypoints li { background: #fff; border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.paypoints b { color: var(--ink); font-size: 15px; }
#payCtas { grid-column: 1 / -1; }
.plans { margin-top: 18px; }
.planlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.plan { border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: var(--muted); font-size: 13px; }
.plan:hover { border-color: var(--violet); }
.plan b { color: var(--ink); font-size: 16px; }
.plan .price { color: var(--ink); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.plan .price small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan.on { cursor: default; background: #FFF0F4; border-color: #DCCFFF; grid-column: 1 / -1; }
.plan.on .pill-btn { align-self: flex-start; margin-top: 6px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--violet); font-weight: 600; cursor: pointer; text-decoration: underline; }

.builder { display: grid; gap: 14px; }
.bgroup { display: flex; flex-direction: column; gap: 6px; }
.blabel { font-size: 13px; font-weight: 600; color: var(--ink); }
.bopts { display: flex; flex-wrap: wrap; gap: 6px; }
.bopt { font: 500 13px Inter, sans-serif; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bopt:hover { border-color: #C9C9D0; }
.bopt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bopt.swatch i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.looks { display: flex; flex-direction: column; gap: 8px; }
.looklist { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.look { flex: none; width: 96px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; padding: 0; cursor: pointer; font: 500 12px Inter, sans-serif; color: var(--ink); }
.look img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.look span { display: block; padding: 6px; }
@media (max-width: 760px) { .paystrip { grid-template-columns: 1fr; padding: 22px; } }

/* ---------- templates from finished films ---------- */
.blockhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.blockhead .sub.small { margin-bottom: 0; }
.vtemplates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vtemplates.all { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 16px; }
.vtpl { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.vtpl:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.vposter { position: relative; aspect-ratio: 9/14; background: #111; cursor: pointer; overflow: hidden; }
.vposter video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vposter .badge { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.vposter .playhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.88); display: grid; place-items: center; font-size: 18px; color: var(--ink); pointer-events: none; transition: opacity .2s; }
.vtpl.playing .playhint { opacity: 0; }
.vposter .noprev { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 14px; background: linear-gradient(160deg, #3D1424, #E98AAE); }
.vmeta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vmeta h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.vmeta p { margin: 0; color: var(--muted); font-size: 14px; }
.vmeta .pmeta { color: var(--violet); font-size: 13px; font-weight: 600; }
.vmeta .pill-btn { align-self: flex-start; margin-top: auto; }
.tplchip { display: flex; align-items: center; gap: 12px; background: #FFF0F4; color: #A33A67; border-radius: 16px; padding: 10px 12px; font-size: 14px; }
.tplchip img { width: 40px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.tplchip span { flex: 1; }
@media (max-width: 860px) { .vtemplates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vtemplates { grid-template-columns: 1fr 1fr; gap: 10px; } .vmeta { padding: 12px; } .vmeta h3 { font-size: 15px; } .vmeta p { display: none; } .vposter .badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 8px; } }

/* ---------- safety card, prompt editor, clickable steps ---------- */
dialog.sheet.wide { width: min(720px, calc(100% - 32px)); }
.snotes { margin: 0 0 12px; padding-left: 18px; color: #8A5A00; font-size: 14px; }
.sitem { margin-bottom: 14px; }
.sitem h3 { font-size: 15px; margin: 8px 0; }
.sline { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; display: grid; gap: 4px; }
.sline p { margin: 0; }
.sline .was { color: var(--muted); text-decoration-color: rgba(196,53,43,.5); }
.sline mark { background: #FCE9E7; color: var(--err); border-radius: 4px; padding: 0 3px; text-decoration: line-through; }
.sline .now { color: var(--ink); }
.sline ins { background: #E5F6EC; color: var(--ok); border-radius: 4px; padding: 0 3px; text-decoration: none; font-weight: 600; }
.sline .why { color: var(--faint); font-size: 12px; }
.sfull summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.sfull pre { white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; background: var(--soft); padding: 12px; border-radius: 12px; max-height: 260px; overflow: auto; }
.sactions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; position: sticky; bottom: -24px; background: #fff; padding: 12px 0 4px; }
.slinks { display: flex; gap: 8px; color: var(--faint); font-size: 14px; }
.slinks .linkbtn { color: var(--muted); font-weight: 500; }
#promptEdit { font: 13px/1.55 ui-monospace, Menlo, monospace; min-height: 260px; background: var(--soft); margin: 12px 0; }
.stepper li.reachable { cursor: pointer; }
.stepper li.reachable:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.smore summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.sline .why b { color: var(--muted); font-weight: 600; }

/* ---------- v0.6: voice notes 2 and 3 ---------- */
/* Mic and record buttons */
.chip.mic .ico { color: var(--violet); flex: none; }
.chip.mic.live .ico { color: var(--err); animation: pulse 1s infinite; }
.chip.rec { display: inline-flex; align-items: center; gap: 8px; }
.chip.rec .recdot { width: 12px; height: 12px; border-radius: 50%; background: #E5342B; box-shadow: 0 0 0 3px rgba(229,52,43,.18); flex: none; }
.chip.rec.live { background: #E5342B; color: #fff; }
.chip.rec.live .recdot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); animation: pulse 1s infinite; }

/* Things you can click look like buttons */
.linkbtn { text-decoration: none; border: 1px solid #F4CCD9; background: #FFF1F5; padding: 5px 11px; border-radius: 999px; font-size: 13px; }
.linkbtn:hover { background: #FBE1EA; }
.stepper li.reachable { color: var(--ink); text-decoration: underline; text-decoration-color: #F0BBCD; text-underline-offset: 4px; }
.pill-btn:disabled, .go:disabled { opacity: .5; cursor: not-allowed; }
.zoom { all: unset; display: block; position: relative; width: 100%; height: 100%; cursor: zoom-in; }
.zoom img, .zoom video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref .pic .zoom { position: absolute; inset: 0; }
.zoomhint { position: absolute; right: 8px; bottom: 8px; background: rgba(14,14,16,.72); color: #fff; font: 600 11px Inter, sans-serif; padding: 4px 9px; border-radius: 999px; pointer-events: none; }
.zoom:hover .zoomhint, .zoom:focus-visible .zoomhint { background: var(--violet); }
.picacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.madefor { font-size: 12px; color: var(--muted); font-weight: 500; }
.mcard figcaption .madefor { display: block; margin-top: 4px; }

/* Full-screen viewer */
.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10,10,12,.94); color: #fff; }
.viewer::backdrop { background: rgba(10,10,12,.6); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; }
.viewer-acts { display: flex; gap: 8px; align-items: center; flex: none; }
.viewer .x { color: #fff; background: rgba(255,255,255,.12); }
.viewer-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 16px 16px; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 12px; }

/* Model generator */
.modetabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.modetabs button { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: 500 12px Inter, sans-serif; color: var(--muted); }
.modetabs button b { font-size: 14px; color: var(--ink); }
.modetabs button:hover { border-color: #F0BBCD; }
.modetabs button.on { border-color: var(--violet); background: #FFF1F5; box-shadow: 0 0 0 3px rgba(214,96,140,.12); }
.inspirerow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.slot.empty.inspire, .slot.inspire { width: 150px; height: 190px; }
.slot.empty.inspire { border-color: var(--violet); color: var(--violet); background: #FFF1F5; }
.slot.inspire { cursor: pointer; }
.slot.inspire .swap { position: absolute; left: 8px; bottom: 8px; background: rgba(14,14,16,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.inspirenote { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.look { transition: transform .12s, box-shadow .12s; }
.look:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); border-color: var(--violet); }
.look.on { border: 2px solid var(--violet); box-shadow: 0 0 0 3px rgba(214,96,140,.15); }
.look span::after { content: " · Use"; color: var(--violet); font-weight: 600; }
.bmore { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.bmore summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--violet); }
.bmore[open] summary { margin-bottom: 4px; }
.madeon { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.madeon b { color: var(--ink); }
.macts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.mcard .macts .pill-btn { margin: 0; }
.mcard .mpic { position: relative; }

/* Film: status above the finished film, fix a mistake, generations row */
.waiting.slim { padding: 20px; margin: 14px 0 6px; display: grid; gap: 6px; justify-items: center; }
.waiting.slim .loader { transform: scale(.7); }
.waiting h3 { font-size: 18px; margin-bottom: 4px; }
.failbox { background: #FFF5F3; border: 1px solid #F6D3CD; }
.fixbox { margin-top: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fixbox textarea { font: 13px/1.55 ui-monospace, Menlo, monospace; }
.gens { margin-top: 28px; }
.gens-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gens-head h3 { font-size: 18px; }
.gens-row { display: flex; gap: 12px; overflow-x: auto; padding: 12px 2px 14px; scroll-snap-type: x mandatory; }
.gen { flex: none; width: 210px; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; }
.gen-pic { aspect-ratio: 9/12; background: #111; }
.gen-st { height: 100%; display: grid; place-items: center; text-align: center; padding: 12px; background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 600; }
.gen.notdone .gen-pic { background: var(--soft); }
.gen-meta { padding: 10px 12px 0; display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.gen-meta b { font-size: 14px; color: var(--ink); }
.gen-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; }
.gen-acts .pill-btn { font-size: 12px; padding: 6px 10px; }

/* Library */
.gacts { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 12px; margin-top: auto; }
.gitem .gacts .pill-btn { margin: 0; }
.gitem .zoom { aspect-ratio: 3/4; }
.gfail { aspect-ratio: 3/4; display: grid; place-content: center; gap: 6px; text-align: center; padding: 16px; background: #FFF5F3; font-size: 13px; color: var(--muted); }
.gfail b { color: var(--err); font-size: 15px; }

/* Sound picker */
.soundbox { margin: 18px 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
#soundView { display: grid; gap: 14px; }
.srow { display: grid; gap: 7px; }
.srow .sown { font-size: 13px; padding: 8px 12px; max-width: 420px; }
.srow .bopt { text-align: left; }

@media (max-width: 600px) {
  .modetabs { grid-template-columns: 1fr; }
  .modetabs button { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .inspirerow { grid-template-columns: 1fr; }
  .gen { width: 180px; }
}

/* ---------- v0.7: Round 2 ---------- */
/* Film engines, each with its price */
.engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; width: 100%; }
.engine { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 11px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: 500 12px Inter, sans-serif; color: var(--muted); }
.engine b { font-size: 14px; color: var(--ink); }
.engine .eprice { color: var(--violet); font-weight: 700; font-size: 13px; }
.engine .enote { line-height: 1.35; }
.engine:hover:not(:disabled) { border-color: #F0BBCD; }
.engine.on { border-color: var(--violet); background: #FFF1F5; box-shadow: 0 0 0 3px rgba(214,96,140,.12); }
.engine:disabled { opacity: .55; cursor: not-allowed; background: var(--soft); }
.engine:disabled .eprice { color: var(--muted); }
.filmopts > div:first-child { flex: 1 1 100%; }
#resSeg button:disabled { opacity: .35; cursor: not-allowed; }

/* Voiceover */
.voicebox { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.voice-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.voice-head h4 { font-size: 16px; }
.voice-body { display: flex; flex-direction: column; gap: 8px; }
.vlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.vcard { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; background: #fff; }
.vcard.on { border-color: var(--violet); background: #FFF1F5; }
.vtext { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--muted); }
.vtext b { color: var(--ink); font-size: 14px; }
.vplay { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--violet); color: #fff; cursor: pointer; font-size: 12px; }
.vplay:disabled { background: var(--soft-2); cursor: default; }
.vplay.playing { background: var(--ink); }
.voice-say { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.voice-say textarea { width: 100%; }
.vodone { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ok); }
.vodone audio, .voice-body audio { max-width: 100%; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text); }
.consent input { margin-top: 3px; }

/* Cut */
.cutgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; margin-top: 22px; align-items: start; }
.cutside { padding: 16px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
.cutcliplist { display: grid; gap: 8px; margin-top: 10px; }
.cutclip { all: unset; display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 6px; cursor: pointer; font-size: 12px; color: var(--muted); }
.cutclip:hover { border-color: var(--violet); background: #FFF1F5; }
.cutclip video { width: 56px; aspect-ratio: 9/16; object-fit: cover; border-radius: 9px; background: #111; }
.cutclip span { display: flex; flex-direction: column; min-width: 0; }
.cutclip b { color: var(--ink); font-size: 13px; }
.cutclip i { font-style: normal; color: var(--violet); font-weight: 700; padding-right: 6px; }
.cutmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cutmain > .card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cutpreview { align-items: center; }
.cutpreview video { width: 220px; aspect-ratio: 9/16; background: #111; border-radius: 16px; object-fit: cover; }
.cutpreview-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.tclip { display: grid; grid-template-columns: 28px 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 8px; background: #fff; }
.tnum { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.tclip video { width: 54px; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px; background: #111; }
.tbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.trim { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; align-items: center; }
.trim label, .vol, .sfxat, .aitem label { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.trim input[type=number], .aitem input[type=number], .sfxat input { width: 62px; padding: 5px 7px; font-size: 12px; }
.trim input[type=range] { width: 100%; accent-color: var(--violet); }
.vol input[type=range] { accent-color: var(--violet); }
.tacts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cutaudio input[type=text] { width: 100%; }
.cutaudio .pill-btn { align-self: flex-start; }
.aitem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.aitem audio { height: 34px; max-width: 260px; }
.aitem .sname { font-weight: 600; font-size: 13px; flex: 1 1 160px; }
.sfxadd { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sfxadd input[type=text] { flex: 1 1 220px; }
.sfxlist { display: flex; flex-direction: column; gap: 8px; }
.exportbox { align-items: flex-start; }

@media (max-width: 900px) {
  .cutgrid { grid-template-columns: 1fr; }
  .cutside { position: static; max-height: none; }
  .cutcliplist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 600px) {
  .tclip { grid-template-columns: 26px 46px minmax(0, 1fr); }
  .tacts { grid-column: 1 / -1; justify-content: flex-start; }
  .trim { grid-template-columns: 1fr 1fr; }
  .trim input[type=range] { grid-column: 1 / -1; }
  .engines { grid-template-columns: 1fr 1fr; }
}

/* ---------- v0.7: new look (blush pink, videos, gallery) ---------- */
/* Home hero: the words on the left, a film playing on the right */
.homehero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: center; background: linear-gradient(135deg, #FFF4F7 0%, #FCE3EC 55%, #F8D3E0 100%); border-radius: 32px; padding: 40px 44px; margin: 4px 0 40px; overflow: hidden; }
.homehero-text .display { margin-bottom: 14px; }
.homehero-text .sub { margin: 0 0 22px; text-align: left; }
.homehero-text .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.homehero-media { justify-self: center; width: min(320px, 100%); aspect-ratio: 9/16; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px rgba(194,80,127,.25); background: #1a1013; }
.homehero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video tiles: muted and looping, with an optional tap-for-sound */
.vtile { position: relative; aspect-ratio: 9/16; border-radius: 20px; overflow: hidden; background: #1a1013; }
.vtile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.unmute { position: absolute; left: 10px; bottom: 10px; border: 0; border-radius: 999px; padding: 7px 12px; background: rgba(14,14,16,.72); color: #fff; font: 600 12px Inter, sans-serif; cursor: pointer; }
.unmute:hover { background: rgba(14,14,16,.88); }

/* Everything you can do: the list, and a film for the one picked */
.explore-block { margin-top: 0; margin-bottom: 56px; }
.tool-preview { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 22px; align-items: center; padding: 22px; }
.tool-preview .vtile.preview { width: 100%; }
.tp-text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tool.on { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); background: var(--blush); }
.tool:hover { border-color: #F0BBCD; }

/* The models inside: a sliding row of films */
.rowarrows { display: flex; gap: 8px; }
.engrow { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.engcard { flex: none; width: 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.engtext { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.engtext b { font-size: 16px; color: var(--ink); }

/* Recent generations on the Dashboard */
.recentrow { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; }
.recent { all: unset; flex: none; width: 150px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; position: relative; }
.recent img, .recent video { width: 150px; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; background: var(--soft); display: block; }
.recent:hover img, .recent:hover video { outline: 2px solid var(--violet); outline-offset: 2px; }
.rplay { position: absolute; top: 8px; left: 8px; background: rgba(14,14,16,.7); color: #fff; font-size: 10px; border-radius: 999px; padding: 4px 7px; }
.rlabel { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Template gallery: films only, no text, in a tight grid */
.vtemplates { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vtemplates.all { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gtpl { all: unset; position: relative; aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; background: #1a1013; cursor: pointer; display: block; }
.gtpl video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gtpl:hover video { transform: scale(1.03); }
.gtpl-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s; }
.gtpl:hover .gtpl-name, .gtpl:focus-visible .gtpl-name { opacity: 1; }
.gtpl:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* Template viewer: the film on the left, the prompt on the right */
.tplview { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 28px; background: #fff; overflow: hidden; }
.tplview::backdrop { background: rgba(14,14,16,.55); }
.tplview > .x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.tplview-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); max-height: calc(100vh - 32px); }
.tplview-video { background: #0E0E10; display: grid; place-items: center; }
.tplview-video video { width: 100%; max-height: calc(100vh - 32px); aspect-ratio: 9/16; object-fit: contain; display: block; }
.tplview-side { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; align-items: flex-start; }
.tplview-side h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.tplview-side textarea { width: 100%; font: 12.5px/1.55 ui-monospace, Menlo, monospace; min-height: 220px; }
.tplmeta { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 24px; margin: 4px 0; }
.tplmeta div { display: flex; flex-direction: column; }
.tplmeta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.tplmeta dd { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); }

/* Library: tabs, folders, favourites and trash */
.libtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 14px; overflow-x: auto; }
.libtabs button { all: unset; cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.libtabs button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--violet); }
.libtabs button:hover { color: var(--ink); }
.folders { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.fchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 13px Inter, sans-serif; cursor: pointer; color: var(--text); display: inline-flex; gap: 6px; align-items: center; }
.fchip i { font-style: normal; color: var(--faint); font-size: 12px; }
.fchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fchip.on i { color: rgba(255,255,255,.7); }
.fchip.add { border-style: dashed; color: var(--violet); }
.gitem { position: relative; }
.heart { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--violet); font-size: 17px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.heart.on { background: var(--violet); color: #fff; }
.tofolder { font-size: 12px; padding: 6px 8px; border-radius: 999px; max-width: 150px; }

/* Model generator: your model so far */
.sofar { background: var(--blush); border: 1px solid #F9DFE8; border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sofar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sfchip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #F0BBCD; border-radius: 999px; padding: 4px 4px 4px 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
.sfchip button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--blush-2); color: var(--violet); cursor: pointer; font-size: 13px; line-height: 1; }
.bopt { padding: 8px 14px; }
.bopt.on { background: var(--violet); border-color: var(--violet); }

@media (max-width: 900px) {
  .homehero { grid-template-columns: 1fr; padding: 28px 22px; text-align: left; }
  .homehero-media { width: min(260px, 80%); }
  .vtemplates { grid-template-columns: repeat(3, 1fr); }
  .tplview-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .tplview-video video { max-height: 56vh; }
  .tool-preview { grid-template-columns: 140px 1fr; }
}
@media (max-width: 600px) {
  .vtemplates, .vtemplates.all { grid-template-columns: repeat(2, 1fr); }
  .tool-preview { grid-template-columns: 1fr; }
  .tool-preview .vtile.preview { width: 60%; justify-self: center; }
  .engcard { width: 190px; }
  .gtpl-name { opacity: 1; }
}
.gitem .zoom { aspect-ratio: 3/4; height: auto; overflow: hidden; }
.gitem .zoom img { aspect-ratio: auto; height: 100%; }

/* ---------- Cut: the editor (dark, with blush pink) ---------- */
body.editing main { max-width: none; padding: 12px 12px 24px; }
body.editing .foot, body.editing .help-fab { display: none; }
.ed { --e-bg: #121013; --e-panel: #1A161A; --e-raise: #241E23; --e-line: #2E272D; --e-text: #F5EEF2; --e-muted: #A99CA4; --e-pink: #F2779F; --e-pink-2: #F9A8C3;
  background: var(--e-bg); color: var(--e-text); border-radius: 20px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: calc(100vh - 110px); font-size: 14px; }
.ed h3, .ed h4 { color: var(--e-text); }
.ed button { font-family: inherit; }
.ed-ic { width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--e-text); display: grid; place-items: center; cursor: pointer; }
.ed-ic:hover:not(:disabled), .ed-ic.on { background: var(--e-raise); }
.ed-ic:disabled { opacity: .35; cursor: default; }
/* top bar */
.ed-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--e-line); }
.ed-back { justify-self: start; background: none; border: 0; color: var(--e-muted); cursor: pointer; font-size: 14px; padding: 8px; }
.ed-back:hover { color: var(--e-text); }
.ed-title { display: flex; align-items: center; gap: 6px; color: var(--e-muted); }
.ed-title input { background: transparent; border: 1px solid transparent; color: var(--e-text); font: 600 15px Inter, sans-serif; text-align: center; padding: 6px 8px; border-radius: 8px; width: 220px; }
.ed-title input:hover, .ed-title input:focus { border-color: var(--e-line); background: var(--e-panel); outline: none; }
.ed-topacts { justify-self: end; display: flex; align-items: center; gap: 4px; }
.ed-export { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 10px 18px; background: linear-gradient(100deg, var(--e-pink-2), var(--e-pink)); color: #2B0B18; font: 700 14px Inter, sans-serif; cursor: pointer; margin-left: 8px; }
.ed-export:disabled { opacity: .45; cursor: default; }
/* body: rail, panel, preview, inspector */
.ed-body { display: grid; grid-template-columns: 76px 300px minmax(0, 1fr) 300px; min-height: 0; }
.ed-rail { border-right: 1px solid var(--e-line); padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.ed-rail button { border: 0; background: transparent; color: var(--e-muted); border-radius: 12px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; }
.ed-rail button:hover { color: var(--e-text); background: var(--e-panel); }
.ed-rail button.on { color: var(--e-text); background: var(--e-raise); box-shadow: inset 2px 0 0 var(--e-pink); }
.ed-panel { background: var(--e-panel); border-right: 1px solid var(--e-line); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; max-height: 64vh; }
.ed-panel h3 { font-size: 18px; }
.ed-note { color: var(--e-muted); font-size: 12.5px; margin: 0; line-height: 1.45; }
.ed-seg { display: flex; background: var(--e-bg); border-radius: 10px; padding: 3px; gap: 2px; }
.ed-seg button { flex: 1; border: 0; background: transparent; color: var(--e-muted); padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ed-seg button.on { background: var(--e-pink-2); color: #2B0B18; font-weight: 700; }
.ed-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--e-line); background: var(--e-raise); color: var(--e-text); border-radius: 10px; padding: 10px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; text-decoration: none; }
.ed-btn:hover:not(:disabled) { border-color: #4A3E46; }
.ed-btn:disabled { opacity: .45; cursor: default; }
.ed-btn.pink { background: linear-gradient(100deg, var(--e-pink-2), var(--e-pink)); color: #2B0B18; border: 0; }
.ed-btn.small { padding: 6px 10px; font-size: 12px; }
.ed-btn.wide { width: 100%; }
.ed-btn.danger { color: #FF9C9C; }
.ed-link { background: none; border: 0; color: var(--e-pink-2); font-size: 12px; text-align: left; cursor: pointer; padding: 0; }
.ed-panel textarea { background: var(--e-bg); border: 1px solid var(--e-line); color: var(--e-text); border-radius: 10px; padding: 10px; font: 13px/1.45 Inter, sans-serif; resize: vertical; }
.ed-panel textarea::placeholder { color: #6E636A; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip { border: 1px solid var(--e-line); background: transparent; color: var(--e-muted); border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.ed-chip:hover { color: var(--e-text); border-color: var(--e-pink); }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-media { all: unset; position: relative; aspect-ratio: 9/14; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.ed-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-media:hover { outline: 2px solid var(--e-pink); }
.ed-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.ed-cap { position: absolute; left: 0; right: 0; top: 0; padding: 6px 8px 14px; background: linear-gradient(rgba(0,0,0,.6), transparent); color: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-media i { position: absolute; left: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--e-pink); color: #2B0B18; font-style: normal; font-weight: 800; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.ed-media:hover i { opacity: 1; }
.ed-list { display: flex; flex-direction: column; gap: 6px; }
.ed-li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--e-raise); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.ed-play-s { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 0; background: var(--e-pink); color: #2B0B18; font-size: 11px; cursor: pointer; }
.ed-play-s.playing { background: #fff; }
.ed-voices { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ed-voice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--e-line); border-radius: 12px; padding: 8px; cursor: pointer; }
.ed-voice span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--e-muted); min-width: 0; }
.ed-voice b { color: var(--e-text); font-size: 13px; }
.ed-voice.on { border-color: var(--e-pink); background: rgba(242,119,159,.1); }
/* preview */
.ed-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; min-width: 0; }
.ed-preview { position: relative; height: min(54vh, 560px); aspect-ratio: 9/16; background: #000; border-radius: 6px; outline: 1px solid var(--e-line); overflow: hidden; }
.ed-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--e-muted); font-size: 13px; }
.ed-transport { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 520px; justify-content: center; }
.ed-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--e-text); color: var(--e-bg); font-size: 15px; cursor: pointer; }
.ed-time { font: 500 13px ui-monospace, Menlo, monospace; color: var(--e-muted); min-width: 130px; text-align: center; }
.ed-ratio { display: inline-flex; align-items: center; gap: 4px; color: var(--e-muted); font-size: 13px; }
.ed-ratio svg { width: 16px; height: 16px; }
/* inspector */
.ed-inspector { background: var(--e-panel); border-left: 1px solid var(--e-line); overflow-y: auto; max-height: 64vh; }
.ed-tabs { display: flex; gap: 16px; padding: 14px 16px 0; border-bottom: 1px solid var(--e-line); }
.ed-tabs button { background: none; border: 0; color: var(--e-muted); padding: 0 0 10px; border-bottom: 2px solid transparent; cursor: pointer; font-size: 14px; }
.ed-tabs button.on { color: var(--e-text); border-bottom-color: var(--e-pink); font-weight: 600; }
.ed-insp { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ed-insp h4 { font-size: 13px; margin-top: 6px; }
.ed-name { margin: 0; font-weight: 600; font-size: 13px; word-break: break-word; }
.ed-field { display: grid; grid-template-columns: 70px 1fr 46px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--e-muted); }
.ed-field input[type=range] { accent-color: var(--e-pink); width: 100%; }
.ed-field input[type=number] { background: var(--e-bg); border: 1px solid var(--e-line); color: var(--e-text); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.ed-field output { text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--e-text); }
.ed-insp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ed-insp-empty { padding: 20px 16px; display: flex; flex-direction: column; gap: 8px; color: var(--e-muted); font-size: 13px; }
.ed-insp-empty b { color: var(--e-text); }
.ed-sum { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; background: var(--e-raise); padding: 10px 12px; border-radius: 10px; color: var(--e-text); }
/* timeline */
.ed-timeline { border-top: 1px solid var(--e-line); background: var(--e-panel); }
.ed-tools { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--e-line); }
.ed-hint { color: var(--e-muted); font-size: 12px; margin-left: 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-zoom { display: inline-flex; align-items: center; gap: 8px; color: var(--e-muted); }
.ed-zoom input { accent-color: var(--e-pink); width: 130px; }
.ed-tl { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.ed-heads { border-right: 1px solid var(--e-line); }
.ed-head-sp { height: 26px; }
.ed-head { height: 52px; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-top: 1px solid var(--e-line); font-size: 11.5px; color: var(--e-muted); }
.ed-head span { margin-left: 4px; }
.ed-hb { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; font-size: 12px; filter: grayscale(1); opacity: .75; }
.ed-hb:hover, .ed-hb.on { background: var(--e-raise); opacity: 1; }
.ed-scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
.ed-canvas { position: relative; min-width: 100%; }
.ed-ruler { position: relative; height: 26px; cursor: pointer; background: repeating-linear-gradient(90deg, transparent 0 13px, var(--e-line) 13px 14px) bottom / 100% 6px no-repeat; }
.ed-ruler span { position: absolute; top: 5px; font: 11px ui-monospace, Menlo, monospace; color: var(--e-muted); transform: translateX(-50%); }
.ed-ruler span:first-child { transform: none; }
.ed-lanes { position: relative; }
.ed-lane { position: relative; height: 52px; border-top: 1px solid var(--e-line); }
.ed-lane.muted { opacity: .4; }
.ed-lane-empty { position: absolute; left: 10px; top: 17px; font-size: 12px; color: #6E636A; pointer-events: none; }
.ed-block { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.ed-block.sel { outline: 2px solid var(--e-pink-2); outline-offset: 0; z-index: 2; }
.ed-block.clip { background: #000; border: 1px solid #4A3E46; }
.ed-strip { position: absolute; inset: 0; display: flex; pointer-events: none; }
.ed-strip video { height: 100%; aspect-ratio: 9/16; object-fit: cover; flex: none; opacity: .85; }
.ed-block .ed-lbl { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); pointer-events: none; }
.ed-block.aud.music { background: #C9497A; }
.ed-block.aud.voice { background: #8A5CD6; }
.ed-block.aud.sfx { background: #D9895A; }
.ed-wave { position: absolute; inset: 8px 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px); mask: linear-gradient(transparent 20%, #000 50%, transparent 80%); -webkit-mask: linear-gradient(transparent 20%, #000 50%, transparent 80%); pointer-events: none; }
.ed-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(255,255,255,.0); }
.ed-h.l { left: 0; } .ed-h.r { right: 0; }
.ed-block.sel .ed-h { background: var(--e-pink-2); }
.ed-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; z-index: 3; }
.ed-playhead i { position: absolute; top: 0; left: -6px; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: #fff; transform: rotate(-45deg); pointer-events: auto; cursor: ew-resize; }
.ed-status { margin: 0; padding: 10px 16px; min-height: 40px; color: var(--e-muted); font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--e-line); }
.ed-status:empty { display: none; }

@media (max-width: 1200px) { .ed-body { grid-template-columns: 70px 260px minmax(0, 1fr) 260px; } }
@media (max-width: 980px) {
  .ed-body { grid-template-columns: 1fr; }
  .ed-rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--e-line); order: 2; justify-content: space-around; }
  .ed-rail button { flex: 1; }
  .ed-stage { order: 1; }
  .ed-panel { order: 3; border-right: 0; max-height: none; }
  .ed-inspector { order: 4; border-left: 0; border-top: 1px solid var(--e-line); max-height: none; }
  .ed-preview { height: 46vh; }
  .ed-top { grid-template-columns: auto 1fr auto; }
  .ed-title input { width: 100%; }
  .ed-hint { display: none; }
  .ed-tl { grid-template-columns: 86px minmax(0, 1fr); }
  .ed-head span { display: none; }
}
@media (max-width: 600px) {
  body.editing main { padding: 0 0 16px; }
  .ed { border-radius: 0; min-height: auto; }
  .ed-back { font-size: 0; } .ed-back::before { content: "‹"; font-size: 22px; }
  .ed-export span { display: none; }
  .ed-zoom input { width: 80px; }
  .ed-tl { grid-template-columns: 64px minmax(0, 1fr); }
}
/* Fit the whole editor, timeline included, in one screen on a laptop. */
@media (min-width: 981px) {
  .ed-preview { height: clamp(260px, calc(100vh - 540px), 600px); }
  .ed-panel, .ed-inspector { max-height: calc(100vh - 430px); min-height: 300px; }
  .ed-lane, .ed-head { height: 44px; }
  .ed-block { top: 5px; bottom: 5px; }
  .ed-lane-empty { top: 13px; }
  .ed-stage { padding: 10px 16px; gap: 8px; }
}
/* Phone and iPad: preview, then the timeline right under it, then the tools. */
@media (max-width: 980px) {
  .ed { display: flex; flex-direction: column; }
  .ed-body { display: contents; }
  .ed-top { order: 0; } .ed-stage { order: 1; } .ed-timeline { order: 2; } .ed-status { order: 3; }
  .ed-rail { order: 4; border-top: 1px solid var(--e-line); } .ed-panel { order: 5; } .ed-inspector { order: 6; }
}
/* Dashboard: the title, then straight into making a video. The hero stays short so the idea box
   sits right under it; on phones the hero film is left out so the box is on the first screen. */
.homehero { padding: 30px 40px; margin-bottom: 18px; }
.homehero-media { width: min(230px, 100%); }
#screen-intake .modelcta { margin-top: 0; }
#screen-intake .composer + .paystrip, #recentBlock { margin-top: 48px; }
@media (max-width: 600px) {
  .homehero { padding: 22px 20px; }
  .homehero-media { display: none; }
  .homehero-text .display { font-size: 34px; }
  .homehero-text .sub { font-size: 15px; margin-bottom: 14px; }
}

/* Text in the editor: the same fonts the export burns in */
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
.ed-texts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ed-text { position: absolute; transform: translate(-50%, -50%); text-align: center; line-height: 1.05; white-space: pre-wrap; width: max-content; max-width: 92%; pointer-events: auto; cursor: move; touch-action: none; user-select: none; }
.ed-text .tk { line-height: 1; }
.ed-text small { display: block; margin-top: .5em; font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.ed-text.sel { outline: 1.5px dashed var(--e-pink-2); outline-offset: 6px; }
.ed-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-style { border: 1px solid var(--e-line); background: var(--e-bg); border-radius: 12px; padding: 0 0 8px; cursor: pointer; color: var(--e-muted); font-size: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ed-style:hover { border-color: var(--e-pink); color: var(--e-text); }
.ed-style b { font-weight: 600; }
.ed-style-prev { position: relative; height: 92px; background: linear-gradient(160deg, #3a2a30, #1c1418); display: block; }
.ed-style-prev .ed-text { pointer-events: none; cursor: default; }
.ed-seg.wrap { flex-wrap: wrap; }
.ed-seg.wrap button { flex: 1 1 45%; }
.ed-insp textarea, .ed-insp input[type=text] { background: var(--e-bg); border: 1px solid var(--e-line); color: var(--e-text); border-radius: 10px; padding: 9px 10px; font: 13px/1.45 Inter, sans-serif; width: 100%; }
.ed-swatches { display: flex; gap: 8px; }
.ed-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--e-line); cursor: pointer; background: var(--e-raise); color: var(--e-text); font-size: 12px; font-weight: 700; }
.ed-swatches button.on { border-color: var(--e-pink); box-shadow: 0 0 0 2px var(--e-bg) inset; }
.ed-block.aud.text { background: #5B6BD8; }
.modelcta.after { margin: 18px auto 0; }
@media (max-width: 600px) {
  .homehero .actions { display: none; }
  .homehero-text .sub { margin-bottom: 0; }
  .homehero { margin-bottom: 14px; }
}
@media (min-width: 601px) {
  .homehero { padding: 26px 40px; grid-template-columns: minmax(0, 1fr) auto; }
  .homehero-text .display { font-size: clamp(36px, 4.2vw, 54px); }
  .homehero-text .sub { font-size: 16px; margin-bottom: 16px; }
  .homehero-media { width: 170px; }
}
.autotop { margin: 18px 0 6px; padding: 18px; border-radius: 18px; background: var(--blush); border: 1px solid #F9DFE8; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.autotop h3 { margin: 0; }
.autopick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.achip { border: 1px solid #F0BBCD; background: #fff; border-radius: 999px; padding: 8px 16px; font: 600 14px Inter, sans-serif; cursor: pointer; color: var(--ink); }
.achip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.aother { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.aother input { width: 80px; padding: 7px 9px; border-radius: 999px; font-size: 14px; }

/* ---------- Home: Option C "Film wall" ---------- */
.brand .mark-img { width: 40px; height: 40px; object-fit: contain; }
/* The ClairX logo on its own, in the homepage title pink. */
.brand .logo-img { height: 40px; width: auto; display: block; }
@media (max-width: 600px) { .brand .logo-img { height: 32px; } }
body.landing .top, body.landing .foot, body.landing #demoBanner { display: none; }
body.landing main { max-width: none; padding: 0; }
#screen-home { --lpink: #F3A3C2; background: transparent; color: #0E0E10; }
.lnav { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 40px; background: rgba(244,241,234,.86); backdrop-filter: blur(12px); }
.lnav .brand .word { font-size: 18px; }
.lnav-links { display: flex; gap: 6px; }
.lnav-links button { background: none; border: 0; font: 500 15px Inter, sans-serif; color: #1C1C1F; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.lnav-links button:hover { background: #FFF1F5; }
.lnav-acts { justify-self: end; display: flex; gap: 10px; }
.kicker { text-transform: uppercase; letter-spacing: .26em; font-size: 13px; font-weight: 600; color: #0E0E10; margin: 0 0 16px; text-align: center; }
.kicker.left { text-align: left; font-size: 12px; }
.ltitle { color: var(--lpink); font-size: clamp(56px, 7.6vw, 124px); font-weight: 800; letter-spacing: -0.055em; line-height: .92; margin: 0; text-align: center; }
.lead { font-size: 19px; line-height: 1.5; color: #0E0E10; text-align: center; margin: 22px auto 30px; max-width: 520px; }
.lbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lbtns.left { justify-content: flex-start; }
#screen-home .pill-btn.big { padding: 14px 26px; font-size: 16px; }
/* the wall: five columns, the middle one holds the words; it fades to white at the bottom */
.wall { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.65fr 1fr 1fr; gap: 14px; padding: 0 22px; height: calc(100vh - 76px); min-height: 640px; max-height: 920px; overflow: hidden; }
.wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.wall-col { display: flex; flex-direction: column; gap: 14px; }
.wall-col.c1 { margin-top: 0; } .wall-col.c2 { margin-top: -170px; } .wall-col.c4 { margin-top: -120px; } .wall-col.c5 { margin-top: 0; }
.wtile { flex: none; aspect-ratio: 9/16; border-radius: 20px; overflow: hidden; background: #F4F1F2; }
.wtile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-mid { align-self: center; padding: 0 6px; position: relative; z-index: 2; }
.wall-phone { display: none; }
/* sections */
.lsec { max-width: 1240px; margin: 0 auto; padding: 90px 40px 0; }
.lh2 { color: var(--lpink); font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin: 0 0 14px; }
.lsub { font-size: 18px; color: #0E0E10; margin: 0 0 22px; max-width: 560px; }
/* the Cut editor section */
.cutsec { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.cut-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.cut-chips span { border: 1px solid #F3DCE5; background: #FFF6F9; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.cut-chips b { color: #D25E8E; }
.cut-demo { background: #121013; border-radius: 26px; padding: 14px; color: #F5EEF2; box-shadow: 0 40px 80px rgba(14,14,16,.18); display: flex; flex-direction: column; gap: 12px; }
.cd-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #A99CA4; padding: 2px 6px; }
.cd-top b { color: #fff; font-size: 13px; }
.cd-exp { background: linear-gradient(100deg, #F9A8C3, #F2779F); color: #2B0B18; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.cd-stage { display: grid; place-items: center; background: #0B0A0C; border-radius: 14px; padding: 16px; }
.cd-frame { position: relative; height: 330px; aspect-ratio: 9/16; border-radius: 8px; overflow: hidden; background: #000; }
.cd-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-cap { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font: 700 13px "Poppins", Inter, sans-serif; color: #fff; letter-spacing: -0.3px; }
.cd-cap em { font: 400 27px "DM Serif Display", serif; color: #F6E7A8; font-style: normal; }
.cd-cap small { display: block; margin-top: 6px; font: 700 7px "Poppins", sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.cd-tl { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 6px; }
.cd-row { position: relative; height: 22px; display: flex; align-items: center; }
.cd-row i { font-style: normal; width: 46px; font-size: 10.5px; color: #A99CA4; flex: none; }
.cd-b { position: absolute; top: 2px; bottom: 2px; margin-left: 52px; border-radius: 5px; font-size: 9.5px; font-weight: 600; color: #fff; padding: 0 7px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.cd-b.v { background: repeating-linear-gradient(90deg, #2a2226 0 34px, #3a3035 34px 35px); border: 1px solid #F9A8C3; }
.cd-b.t { background: #5B6BD8; } .cd-b.vo { background: #8A5CD6; } .cd-b.m { background: #C9497A; } .cd-b.s { background: #D9895A; }
.cd-ph { position: absolute; left: calc(52px + 24%); top: 0; bottom: 0; width: 2px; background: #fff; }
/* engines */
.lengines { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 30px; }
.lengine { border: 1px solid #F0EDEF; border-radius: 20px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.lengine .vtile { aspect-ratio: 4/5; border-radius: 0; }
.le-text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #1C1C1F; }
.le-text b { font-size: 18px; letter-spacing: -0.02em; color: #0E0E10; }
.le-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.le-tags i { font-style: normal; font-size: 12px; font-weight: 600; color: #C2507F; background: #FFF1F5; border-radius: 999px; padding: 3px 10px; }
/* pay per film */
.lprice { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; border-radius: 32px; padding: 52px; background: linear-gradient(135deg, #FFF7FA 0%, #FDEAF1 100%); }
.lp-cost { display: grid; grid-template-columns: repeat(3, auto); gap: 26px; justify-content: start; margin: 6px 0 28px; }
.lp-cost b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: #0E0E10; }
.lp-cost span { font-size: 13px; color: #55555C; }
.lp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-points li { background: #fff; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 2px rgba(14,14,16,.04); }
.lp-points b { font-size: 17px; letter-spacing: -0.01em; }
.lp-points span { font-size: 14.5px; color: #3A3A40; }
/* closing card, footer */
.lcta { display: flex; justify-content: space-between; align-items: center; gap: 30px; background: #FFF5F8; border-radius: 32px; padding: 60px 64px; }
.lcta .lbtns { flex: none; }
.lfoot { max-width: 1240px; margin: 90px auto 0; padding: 26px 40px 40px; border-top: 1px solid #F0EDEF; display: flex; justify-content: space-between; font-size: 13px; color: #55555C; }

@media (max-width: 1100px) {
  .lnav-links { display: none; } .lnav { grid-template-columns: 1fr auto; }
  .lengines { grid-template-columns: repeat(3, 1fr); }
  .cutsec, .lprice { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lnav { padding: 12px 16px; } .lnav-acts .pill-btn:not(.dark) { display: none; }
  .wall { display: block; height: auto; min-height: 0; max-height: none; padding: 34px 18px 0; }
  .wall::after, .wall-col { display: none; }
  .ltitle { font-size: 50px; letter-spacing: -0.05em; }
  .lead { font-size: 17px; margin: 18px auto 24px; }
  .wall-phone { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 30px 14px 0; position: relative; }
  .wall-phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, var(--bg)); }
  .lsec { padding: 64px 18px 0; }
  .lengines { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lprice { padding: 28px 22px; gap: 26px; border-radius: 24px; }
  .lp-cost { gap: 18px; } .lp-cost b { font-size: 26px; }
  .lcta { flex-direction: column; align-items: flex-start; padding: 32px 24px; border-radius: 24px; }
  .lfoot { padding: 22px 18px 30px; flex-direction: column; gap: 6px; }
  .cd-frame { height: 260px; }
}
#screen-home .lnav .brand .word { display: inline !important; }
.cd-cap { white-space: nowrap; } .cd-cap em { font-size: 22px; }
@media (max-width: 760px) { .cd-cap em { font-size: 17px; } .cd-cap { font-size: 10px; } }
/* Home: the New pill and the create box under the title */
.wall { grid-template-columns: 1fr 1fr 2.3fr 1fr 1fr; }
.wall-mid { display: flex; flex-direction: column; align-items: center; }
.newpill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #F0E3E9; background: #fff; border-radius: 999px; padding: 6px 14px 6px 6px; font: 500 13.5px Inter, sans-serif; color: #0E0E10; cursor: pointer; margin-bottom: 22px; }
.newpill b { background: #FFE3EE; color: #C2507F; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.newpill:hover { border-color: #F3A3C2; }
#screen-home .ltitle { font-size: clamp(52px, 6.6vw, 108px); }
#screen-home .lead { margin: 18px auto 22px; font-size: 18px; }
.hbox { width: 100%; max-width: 640px; background: #fff; border: 1px solid #F0EDEF; border-radius: 26px; box-shadow: 0 22px 60px rgba(243,163,194,.28); padding: 14px 14px 12px; text-align: left; }
.hbox textarea { width: 100%; border: 0; background: transparent; resize: none; font: 16px/1.5 Inter, sans-serif; color: #0E0E10; padding: 6px 8px 10px; min-height: 64px; outline: none; }
.hbox textarea::placeholder { color: #9A9AA3; }
.hrefs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 4px; }
.hrefs:empty { display: none; }
.href { position: relative; width: 44px; height: 54px; border-radius: 10px; overflow: hidden; background: #F4F1F2; display: grid; place-items: center; }
.href img { width: 100%; height: 100%; object-fit: cover; }
.href.up { opacity: .5; }
.href button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(14,14,16,.7); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.hbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hchip { border: 1px solid #ECECF0; background: #fff; border-radius: 999px; padding: 7px 12px; font: 500 13px Inter, sans-serif; color: #0E0E10; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; appearance: none; -webkit-appearance: none; }
select.hchip { padding-right: 26px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230E0E10' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }
.hchip.add { background: #FFF1F5; border-color: #F9DFE8; font-weight: 600; }
.hchip:hover { border-color: #F3A3C2; }
.hgo { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #0E0E10; color: #fff; font-size: 18px; cursor: pointer; }
.hgo:hover { background: #2A2A2E; }
.herr { margin: 6px 6px 0; color: #C4352B; font-size: 13px; }
.herr:empty { display: none; }
.wall-mid .lbtns { margin-top: 18px; }
@media (max-width: 760px) {
  .newpill { font-size: 12px; margin-bottom: 16px; }
  .hbox { border-radius: 22px; }
  .hgo { width: 38px; height: 38px; }
}
.hbar select.hchip { width: auto; min-width: 0; }
.hbar .hchip { margin: 0; height: 34px; }
#screen-home .ltitle { font-size: clamp(46px, 5.3vw, 84px); }
#screen-home .lead { font-size: 17px; margin: 14px auto 18px; max-width: 560px; }
.newpill { margin-bottom: 16px; }
@media (max-width: 760px) { #screen-home .ltitle { font-size: 46px; } }
@media (min-width: 761px) {
  .wall { grid-template-columns: 1fr 1fr 2.7fr 1fr 1fr; }
  .wall-mid { align-self: start; padding-top: 7vh; }
  .hbox textarea { min-height: 52px; }
  .hchip { padding: 6px 11px; font-size: 12.5px; }
}
@media (min-width: 761px) { .hbar { flex-wrap: nowrap; } }
@media (max-width: 760px) { .hbox textarea { min-height: 76px; font-size: 15px; } }
/* The create block sits at the top of the hero, right under the title; the film wall runs beside and below it. */
@media (min-width: 761px) {
  .wall-mid { padding-top: 28px; }
  #screen-home .lead { margin: 12px auto 16px; }
  .hbox { max-width: 680px; }
}
@media (max-width: 760px) {
  .wall { padding-top: 18px; }
  .newpill { margin-bottom: 12px; }
  #screen-home .lead { margin: 10px auto 14px; }
}
.hchip { white-space: nowrap; }

/* Template topics, Recreate and the Audio toggle */
.topics { display: flex; gap: 8px; margin: 14px 0 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.topics::-webkit-scrollbar { display: none; }
.topic { flex: none; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 9px 18px; font: 500 14px Inter, sans-serif; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.topic:hover { border-color: var(--ink); }
.topic.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.gtpl { cursor: default; }
.gtpl-open { all: unset; position: absolute; inset: 0; cursor: pointer; z-index: 1; }
.gtpl-open:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; border-radius: 18px; }
.gtpl-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 10px 10px; background: linear-gradient(transparent, rgba(0,0,0,.55)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 2; }
.gtpl-foot .gtpl-name { position: static; padding: 0; background: none; opacity: 0; font-size: 13px; line-height: 1.25; }
.gtpl-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gtpl-dur { background: rgba(14,14,16,.6); color: #fff; font: 600 11px Inter, sans-serif; border-radius: 6px; padding: 3px 7px; }
.gtpl-recreate { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 13px; font: 600 13px Inter, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.gtpl-recreate:hover { background: var(--blush, #FDF1F5); }
.gtpl:hover .gtpl-recreate, .gtpl:focus-within .gtpl-recreate, .gtpl:hover .gtpl-name, .gtpl:focus-within .gtpl-name { opacity: 1; transform: none; }
.tplsound { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; border: 0; background: rgba(14,14,16,.6); color: #fff; border-radius: 999px; padding: 5px 10px 5px 8px; font: 600 12px Inter, sans-serif; cursor: pointer; backdrop-filter: blur(4px); }
.tplsound[aria-pressed="true"] { background: #fff; color: var(--ink); }
.tplview-video { position: relative; }
.tplview-video .tplsound { top: 14px; left: 14px; }
@media (hover: none) {
  .gtpl-recreate, .gtpl-foot .gtpl-name { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .gtpl-foot { padding: 30px 8px 8px; gap: 6px; }
  .gtpl-foot .gtpl-name { font-size: 12px; }
  .gtpl-recreate { padding: 6px 10px; font-size: 12px; }
  .topic { padding: 8px 15px; font-size: 13px; }
}

/* The film's sound: 3 voices, voice-over takes, sound effects and music */
.voicebox { border-top: 0; padding-top: 0; gap: 14px; }
.voice-head h4 { font-size: 18px; }
.snd-part { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: #fff; }
.snd-part h5 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.snd-part > .pill-btn { align-self: flex-start; }
.ideachips { display: flex; gap: 6px; flex-wrap: wrap; }
.ideachip { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 6px 12px; font: 500 13px Inter, sans-serif; cursor: pointer; }
.ideachip:hover { border-color: var(--violet); color: var(--violet); }
.tset { display: flex; flex-direction: column; gap: 8px; }
.tset-head { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.tset-head b { color: var(--ink); }
.vlist.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vlist.three .vcard { grid-template-columns: auto 1fr; }
.vlist.three .vcard .pill-btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
.vlist.lines { grid-template-columns: 1fr; }
.tolder summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); padding: 4px 0; }
.tolder[open] summary { margin-bottom: 8px; }
.snd-auto summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.snd-note { margin: 0; }
.mixing { margin: 8px 0 0; color: var(--violet); }
@media (max-width: 600px) { .vlist.three { grid-template-columns: 1fr; } .snd-part { padding: 12px; } }

/* Sign in / Create account */
#screen-signin { max-width: 460px; }
.authcard { padding: 32px 30px 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.authmark { width: 46px; height: 46px; object-fit: contain; background: #0E0E10; border-radius: 12px; padding: 8px; }
.authtitle { color: var(--lpink); font-size: 40px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin: 0; }
.authcard .sub { margin: 0; color: var(--ink); }
.authtabs { display: grid; grid-template-columns: 1fr 1fr; background: #F4F4F6; border-radius: 999px; padding: 4px; }
.authtabs button { all: unset; text-align: center; padding: 9px 0; border-radius: 999px; font: 600 14px Inter, sans-serif; color: var(--muted); cursor: pointer; }
.authtabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 12px; font: 600 15px Inter, sans-serif; color: var(--ink); text-decoration: none; background: #fff; }
.gbtn:hover { border-color: var(--ink); }
.author { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; }
.author::before, .author::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authcard .stack { gap: 8px; }
.authcard .flabel { margin-top: 4px; }
.authcard .linkbtn { align-self: flex-start; }
.authfine { margin: 4px 0 0; font-size: 12px; }
/* The account menu */
.acctwrap { position: relative; }
.acctbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--lpink); color: #fff; font: 700 15px Inter, sans-serif; cursor: pointer; }
.acctmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 32px rgba(14,14,16,.12); padding: 10px; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.acctmenu[hidden] { display: none; }
.acct-email { margin: 4px 10px 0; font-weight: 600; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.acct-bal { margin: 0 10px 6px; color: var(--muted); font-size: 13px; }
.acctmenu button { all: unset; padding: 10px; border-radius: 10px; font: 500 14px Inter, sans-serif; color: var(--ink); cursor: pointer; }
.acctmenu button:hover { background: #F7F7F9; }
#acctSignOut { color: var(--violet); }
:root { --lpink: #F3A3C2; }

/* Homepage: what Concept Studio is, small and quiet above the footer */
.labout { max-width: 760px; margin: 8px auto 0; padding: 22px 24px 6px; border-top: 1px solid var(--line); }
.labout h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.labout p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 6px; }
.labout a { color: var(--violet); }

/* The intake's "Start new" next to the eyebrow */
.eyerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Currency switch (£ / $ / €) and the custom top-up */
.cursel { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; font: 600 13px Inter, sans-serif; color: var(--ink); cursor: pointer; width: auto; }
.pack.custom { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pack.custom input { width: 90px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font: 600 15px Inter, sans-serif; margin-left: 4px; }
.dprice { display: block; font-size: 10.5px; font-weight: 500; opacity: .7; margin-top: 1px; }
#durationChips button { line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }

/* The homepage create box's button now carries the price */
.hgo { width: auto; height: 40px; border-radius: 999px; padding: 0 18px; font: 700 14px Inter, sans-serif; white-space: nowrap; }
@media (max-width: 600px) { .hgo { width: auto; height: 38px; padding: 0 14px; } }
.modelcta[hidden], .toolchips .chip[hidden] { display: none !important; }
.testbanner { background: #FFF6DB; border: 1px solid #F3DE9A; color: #6B5200; }

/* Top up button with the balance */
.pill-btn.topup { background: var(--lpink); border-color: var(--lpink); color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.pill-btn.topup:hover { filter: brightness(.96); }
.pill-btn.topup .tb-bal { background: rgba(255,255,255,.28); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.pill-btn.topup .tb-bal[hidden] { display: none; }
@media (max-width: 600px) { .top-actions > .cursel { display: none; } .pill-btn.topup { padding: 8px 12px; font-size: 13px; } }
@media (max-width: 760px) { .lnav-acts .pill-btn.topup:not([hidden]) { display: inline-flex; padding: 8px 12px; font-size: 13px; } }

/* The account menu: header, balance card, list */
.acctbtn.anon { background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: 16px; }
.acctmenu { width: 320px; padding: 12px; border-radius: 22px; gap: 10px; }
.am-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 2px; }
.am-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--lpink); color: #fff; display: grid; place-items: center; font: 700 17px Inter, sans-serif; flex: none; box-shadow: 0 0 0 3px #FFE3EE; }
.am-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.am-who b { font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-who span { font-size: 12.5px; color: var(--muted); }
.am-signin { all: unset; cursor: pointer; background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 14px; font: 600 13px Inter, sans-serif; }
.am-card { background: #FFF5F9; border: 1px solid #F9DFE8; border-radius: 16px; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 6px; }
.am-bal { display: flex; justify-content: space-between; align-items: baseline; }
.am-bal span { font-size: 13px; font-weight: 600; color: var(--ink); }
.am-bal b { font-size: 18px; color: var(--ink); }
.am-meter { height: 6px; border-radius: 999px; background: #F6D3E0; overflow: hidden; }
.am-meter[hidden] { display: none; }
.am-meter i { display: block; height: 100%; background: var(--violet); border-radius: 999px; }
.am-spent { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.am-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F6DCE6; color: var(--ink); font-size: 14px; font-weight: 500; }
.am-row[hidden] { display: none; }
.am-row span { flex: 1; }
.am-row svg { color: var(--violet); }
.am-pill { all: unset; cursor: pointer; background: var(--lpink); color: #fff; border-radius: 999px; padding: 5px 14px; font: 700 12.5px Inter, sans-serif; }
.am-pill:hover { filter: brightness(.95); }
.am-list { display: flex; flex-direction: column; }
.am-list > button, .am-list > a, .am-cur { all: unset; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; font: 500 14px Inter, sans-serif; color: var(--ink); cursor: pointer; text-decoration: none; }
.am-list > button[hidden] { display: none; }
.am-list > button:hover, .am-list > a:hover, .am-cur:hover { background: #F7F7F9; }
.am-list svg { color: var(--muted); flex: none; }
.am-cur span { flex: 1; }
.am-cur .cursel { padding: 4px 8px; font-size: 12.5px; }
.am-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.am-list hr[hidden] { display: none; }
#acctSignOut, #acctSignOut svg { color: var(--violet); }
@media (max-width: 600px) { .acctmenu { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; } }
.acctmenu .am-pill { background: var(--lpink); color: #fff; border-radius: 999px; padding: 6px 15px; font: 700 12.5px Inter, sans-serif; }
.acctmenu .am-pill:hover { background: var(--violet); }
.acctmenu .am-signin { background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 14px; }

/* Your uploads: a gallery of past uploads and made pictures, to reuse as references */
dialog.assets-dlg { width: min(860px, calc(100% - 24px)); }
.assets-dlg .sheet-head .hint { margin: 2px 0 0; }
.assets-filter { margin: 4px 0 14px; }
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: min(60vh, 560px); overflow-y: auto; padding: 2px; }
.at { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
.at img, .at video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at.on { border-color: var(--violet); box-shadow: 0 0 0 3px var(--blush-2); }
.at:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.at-up { border: 1.5px dashed var(--line); align-items: center; gap: 8px; font: 600 14px Inter, sans-serif; color: var(--ink); background: #fff; }
.at-up:hover { background: var(--blush); }
.at-upic { width: 40px; height: 40px; border-radius: 50%; background: var(--soft-2); display: grid; place-items: center; font-size: 18px; }
.at-kind { position: absolute; top: 9px; left: 10px; font: 700 12px Inter, sans-serif; color: var(--ink); z-index: 1; }
.at.video .at-kind { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.at-wave { display: flex; align-items: center; gap: 2px; height: 34%; padding: 0 12px; margin-top: 8px; }
.at-wave i { flex: 1; background: var(--faint); border-radius: 2px; min-width: 2px; }
.at-play { position: absolute; right: 9px; bottom: 9px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 12px; box-shadow: var(--shadow); cursor: pointer; }
.at-src { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.92); color: var(--ink); font: 700 11px Inter, sans-serif; padding: 3px 8px; border-radius: 999px; }
.at-tick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 13px; font-weight: 700; display: none; place-items: center; z-index: 1; }
.at.on .at-tick { display: grid; }
.at-del { position: absolute; bottom: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(14,14,16,.6); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 2; }
.at:hover .at-del, .at:focus-within .at-del { opacity: 1; }
@media (hover: none) { .at-del { opacity: 1; width: 24px; height: 24px; font-size: 14px; } }
.at-empty { grid-column: 1 / -1; margin: 8px 2px; }
.assets-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.assets-foot .err { margin: 0; }
@media (max-width: 600px) { .assets-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 62vh; } .at-up span:last-child { font-size: 12px; } }

/* The video model picker in the create boxes */
.engpick { position: relative; }
.engbtn { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font: 600 13px Inter, sans-serif; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 100%; white-space: nowrap; }
.engbtn:hover { border-color: var(--faint); }
.engbtn:disabled { cursor: default; }
.engbtn span { font-size: 10px; color: var(--muted); }
.engmenu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 40; width: 300px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 40px rgba(14,14,16,.14); padding: 6px; display: grid; gap: 2px; }
.engmenu[hidden] { display: none; }
.engopt { text-align: left; border: 0; background: none; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; font-family: Inter, sans-serif; }
.engopt:hover { background: var(--soft); }
.engopt.on { background: var(--blush); }
.engopt b { font-size: 14px; color: var(--ink); }
.engopt span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.engopt em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--violet); margin-top: 2px; }
#durationChips button:disabled { opacity: .35; cursor: not-allowed; }

/* A short note at the bottom of the screen, e.g. after a top-up */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 90; background: var(--ink); color: #fff; font: 600 14px Inter, sans-serif; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(14,14,16,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Taps you can see: buttons press in, and a payment button fills in once it's picked */
.pack, .plan, .achip, .pill-btn, .chip, .hchip, .go, .seg button, .engbtn, .engopt, .at, .cursel { transition: transform .08s ease, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.pack:active, .plan:active, .achip:active, .pill-btn:active, .chip:active, .hchip:active, .go:active, .seg button:active, .engbtn:active, .engopt:active, .at:active { transform: scale(.96); }
.pack:active, .plan:active { background: var(--blush); border-color: var(--violet); }
.pack.picked, .plan.picked { position: relative; background: var(--lpink, #F3A3C2); border-color: var(--lpink, #F3A3C2); box-shadow: 0 0 0 3px var(--blush-2); }
.pack.picked b, .pack.picked span, .plan.picked b, .plan.picked span { color: #fff; }
.pack.picked::after, .plan.picked::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--violet); font: 800 13px/22px Inter, sans-serif; text-align: center; }
.pack .paying { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px !important; font-weight: 600; margin-top: 6px; }
.dim { opacity: .45; }
.loading { cursor: progress; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
.pack .spin { margin-right: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.go.loading, .pill-btn.loading { opacity: 1; }
@media (max-width: 600px) { .pack.picked::after { top: 50%; transform: translateY(-50%); right: 14px; } .pack .paying { margin: 0 34px 0 0; } }

/* Film settings tiles: Model · Duration · Quality · Shape */
.setrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.setrow .setnote { flex-basis: 100%; margin: 2px 2px 0; font-size: 12.5px; color: var(--violet); }
.settile { position: relative; }
.setbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 96px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 7px 12px 8px; cursor: pointer; font-family: Inter, sans-serif; text-align: left; transition: transform .08s ease, border-color .15s, box-shadow .15s, background-color .15s; -webkit-tap-highlight-color: transparent; }
.setbtn:hover { border-color: #F0BBCD; }
.setbtn:active { transform: scale(.96); }
.settile.open .setbtn { border-color: var(--violet); box-shadow: 0 0 0 3px var(--blush-2); background: var(--blush); }
.setlbl { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.setval { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.setval .chev { color: var(--muted); transition: transform .15s; }
.settile.open .chev { transform: rotate(180deg); }
.setpop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 45; width: 310px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 44px rgba(14,14,16,.16); padding: 10px; display: grid; gap: 2px; animation: popin .14s ease; }
.settile[data-k="quality"] .setpop, .settile[data-k="shape"] .setpop { width: 270px; }
@keyframes popin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.poptitle { margin: 2px 4px 6px; font: 700 13px Inter, sans-serif; color: var(--ink); }
.pophint { margin: 8px 4px 2px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.setpop .engopt { position: relative; }
.setpop .tick { font-style: normal; color: var(--violet); font-weight: 800; margin-left: 4px; }
.qopt { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; text-align: left; border: 0; background: none; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-family: Inter, sans-serif; transition: background-color .12s, transform .08s; }
.qopt:hover { background: var(--soft); }
.qopt:active { transform: scale(.98); }
.qopt.on { background: var(--blush); }
.qopt b { font-size: 14px; color: var(--ink); }
.qopt span { font-size: 12.5px; color: var(--muted); }
.qopt em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--violet); }
.qopt .tick { grid-column: 3; }
.qopt em + .tick { margin-left: 6px; }
.qopt[disabled] { opacity: .4; cursor: not-allowed; }
.qopt:has(.shapeic) { grid-template-columns: 22px auto 1fr auto; }
.shapeic { display: block; border: 2px solid var(--ink); border-radius: 3px; justify-self: center; }
.shapeic.s9x16 { width: 11px; height: 18px; } .shapeic.s1x1 { width: 15px; height: 15px; } .shapeic.s16x9 { width: 20px; height: 12px; }
.durhead { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.durval { font: 800 22px Inter, sans-serif; color: var(--ink); letter-spacing: -.02em; }
.durslider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; margin: 14px 0 6px; background: linear-gradient(90deg, var(--violet) 0 var(--p, 50%), var(--soft-2) var(--p, 50%) 100%); outline: none; }
.durslider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); box-shadow: 0 2px 8px rgba(194,80,127,.35); cursor: grab; }
.durslider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); cursor: grab; }
.durticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); padding: 0 2px; }
/* The homepage box: full-size pills in one row, the same as Add photo and Speak */
.setrow.home .setlbl { display: none; }
.setrow.home .setbtn { flex-direction: row; align-items: center; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid #ECECF0; border-radius: 999px; }
.setrow.home .setval { font-size: 13px; font-weight: 600; gap: 7px; }
.hbar .setrow { display: contents; }
.hbar .setrow .setnote { order: 9; flex-basis: 100%; margin: 2px 4px 0; font-size: 12.5px; color: var(--violet); }
@media (max-width: 600px) {
  .composer-foot .setrow { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .composer-foot .setbtn { width: 100%; }
  .setpop { position: fixed; left: 0; right: 0; bottom: 0; width: auto !important; max-width: none; border-radius: 22px 22px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(14,14,16,.2); animation: sheetin .2s ease; z-index: 95; }
  .setpop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 10px; }
  @keyframes sheetin { from { transform: translateY(100%); } to { transform: none; } }
}
.qopt { grid-template-columns: auto 1fr auto auto; }
.qopt .tick { grid-column: auto; }
.qopt:has(.shapeic) { grid-template-columns: 22px auto 1fr auto; }
.hbar:has(.setrow) .hgo { margin-left: auto; }
.hbar:has(.setnote) { flex-wrap: wrap; }
@media (min-width: 761px) { .hbox { max-width: 770px; } }
@media (max-width: 760px) { .hbar:has(.setrow) { flex-wrap: wrap; } }
/* The Create page's tiles, with room to breathe */
.composer-foot .setbtn { min-width: 116px; padding: 9px 14px 10px; border-radius: 16px; }
.composer-foot .setlbl { font-size: 12px; }
.composer-foot .setval { font-size: 15px; }
.durticks { position: relative; display: block; height: 16px; margin: 0 12px; }
.durticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* The Sound tool: downloads on every take, and the same card under a finished film */
.vcard .vacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.vcard .vacts .pill-btn { text-decoration: none; }
.vlist:not(.three) .vcard .vacts { grid-column: auto; justify-content: flex-end; }
.voice-head #soundZip { margin-top: 8px; display: inline-flex; }
#filmSoundSlot .soundbox { margin-top: 22px; }
#filmSoundSlot .snd-auto { display: none; }

/* The Sound page */
.soundfor { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; flex-wrap: wrap; }
.soundfor select { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 9px 12px; font: 600 14px Inter, sans-serif; color: var(--ink); max-width: 100%; width: auto; }
#soundPageSlot .snd-auto, #soundPageSlot .sketch-head { display: none; }
#screen-sound .sub { margin-left: 0; text-align: left; }

/* The scenes appearing as they're written, and the Fastest label */
.livescenes { max-width: 680px; margin: 18px auto 0; display: grid; gap: 8px; text-align: left; }
.livescenes[hidden] { display: none; }
.livebeat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; animation: popin .2s ease; }
.livebeat span { font-size: 12px; font-weight: 700; color: var(--violet); align-self: center; }
.livebeat b { font-size: 14px; color: var(--ink); }
.livebeat p { grid-column: 1 / -1; margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.liveprompt { margin: 4px 0 0; padding: 12px 14px; background: var(--blush); border-radius: 14px; font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap; max-height: 220px; overflow: hidden; }
.livecaret { display: inline-block; width: 7px; height: 14px; background: var(--violet); margin-left: 2px; vertical-align: -2px; animation: livepulse 1s steps(2) infinite; }
@keyframes livepulse { 50% { opacity: 0; } }
.fasttag { display: inline-block; font: 700 10.5px Inter, sans-serif; color: var(--violet); background: var(--blush-2); border-radius: 999px; padding: 2px 7px; margin-left: 5px; vertical-align: 1px; }

/* Adding sound to the finished film */
.ideasfor { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ideasfor b { color: var(--violet); }
.mixbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--blush); border: 1px solid var(--blush-2); border-radius: 16px; padding: 12px 14px; margin: 12px 0 2px; }
.mixbar > div { display: grid; gap: 2px; flex: 1 1 240px; }
.mixbar b { font-size: 15px; color: var(--ink); }
.mixbar span { font-size: 13px; color: var(--muted); }
.mixbar .go:disabled { opacity: .55; cursor: default; }

/* Two ways to create: Concept Studio (premium) or Create your own */
.modepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 980px; margin: 0 auto 14px; }
.modepick button { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 18px; padding: 14px 16px; cursor: pointer; font-family: Inter, sans-serif; transition: border-color .15s, box-shadow .15s, background-color .15s, transform .08s; -webkit-tap-highlight-color: transparent; }
.modepick button:active { transform: scale(.98); }
.modepick button.on { border-color: var(--violet); background: var(--blush); box-shadow: 0 0 0 3px var(--blush-2); }
.modepick .mpic { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-2); font-size: 16px; color: var(--ink); }
.modepick button.on .mpic { background: var(--lpink, #F3A3C2); color: #fff; }
.modepick b { font-size: 15px; color: var(--ink); }
.modepick span:not(.mpic) { font-size: 13px; color: var(--muted); line-height: 1.4; }
.modepick.home { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid #ECECF0; border-radius: 999px; margin: 0 auto 12px; max-width: none; }
.modepick.home button { display: block; border: 0; border-radius: 999px; padding: 8px 14px; box-shadow: none; background: none; }
.modepick.home button.on { background: var(--ink); }
.modepick.home button.on b { color: #fff; }
.modepick.home b { font-size: 13px; }
.modehint { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .modepick:not(.home) { grid-template-columns: 1fr; } }

/* Create your own · Video or Image */
.kindseg { display: inline-flex; width: max-content; align-self: flex-start; gap: 3px; padding: 3px; background: var(--soft, #F5F5F7); border-radius: 999px; margin: 0 0 10px; }
.kindseg[hidden] { display: none; }
.kindseg button { border: 0; background: none; border-radius: 999px; padding: 7px 18px; font: 600 13px Inter, sans-serif; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.kindseg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(14,14,16,.12); }
.kindseg.home { display: flex; width: max-content; margin: -4px auto 12px; background: #fff; border: 1px solid #ECECF0; }
.kindseg.home[hidden] { display: none; }
.kindseg.home button.on { background: var(--blush, #FCEFF4); box-shadow: none; }
.countrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.countopt { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 4px; display: grid; gap: 2px; text-align: center; cursor: pointer; font-family: Inter, sans-serif; }
.countopt b { font-size: 17px; color: var(--ink); }
.countopt em { font-style: normal; font-size: 11px; color: var(--muted); }
.countopt.on { border-color: var(--violet); background: var(--blush, #FCEFF4); }
.picsprompt { max-width: 760px; white-space: pre-wrap; }
.pics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 20px 0 22px; }
.ownpic .pic { background: var(--soft); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; text-align: center; padding: 10px; position: relative; }
.ownpic .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ownpic .pic .zoom { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: zoom-in; }
.ownpic .madefor { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .pics-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ownpic .picacts .madefor { display: none; } }
/* A tapped button that's working: it looks pressed and shows a spinner until the next thing is ready. */
button.working { cursor: progress; transform: scale(.98); opacity: .9; }
button.working:disabled { opacity: .9; }

/* References full screen, inside the app */
.slotzoom { position: absolute; right: 6px; bottom: 34px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(14,14,16,.62); color: #fff; font-size: 13px; line-height: 1; cursor: zoom-in; z-index: 2; }
.slot img, .slot video { cursor: zoom-in; }
.href img, .href i[data-view] { cursor: zoom-in; }
.at-zoom { position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(14,14,16,.6); color: #fff; font-size: 13px; line-height: 1; cursor: zoom-in; opacity: 0; transition: opacity .15s; z-index: 2; }
.at:hover .at-zoom, .at:focus-within .at-zoom { opacity: 1; }
@media (hover: none) { .at-zoom { opacity: 1; } }

/* The ⋯ menu on a finished film */
.vwrap, .gitem { position: relative; }
.vwrap video { width: 100%; display: block; }
.vmore { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(14,14,16,.62); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; transition: background-color .15s, transform .08s; }
.vmore:hover { background: rgba(14,14,16,.82); }
.vmore:active { transform: scale(.94); }
.gitem .vmore { top: 8px; right: 8px; left: auto; width: 32px; height: 32px; font-size: 18px; }
.gitem .vmore ~ .heart { right: 46px; }
.fmenu { position: fixed; z-index: 200; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(14,14,16,.18); padding: 6px; animation: popin .12s ease; }
.fmenu button { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none; border-radius: 10px; padding: 10px 12px; font: 500 14.5px Inter, sans-serif; color: var(--ink); cursor: pointer; text-align: left; }
.fmenu button:hover, .fmenu button:focus-visible { background: var(--soft); outline: none; }
.fmenu button svg { flex: none; color: var(--muted); }
.fmenu button.danger, .fmenu button.danger svg { color: #D23B3B; }
.fmenu .ftag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--violet); background: var(--blush, #FCEFF4); padding: 2px 7px; border-radius: 999px; }
.fmenu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }

/* Add sound: one page for one film */
.asback { margin-bottom: 10px; }
.aswrap { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 24px; align-items: start; }
.aspanel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px; display: grid; gap: 12px; }
.aspanel .title { margin: 0; }
.aspanel #asFor { margin: -6px 0 0; }
.astabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--soft, #F5F5F7); border-radius: 999px; }
.astabs button { border: 0; background: none; border-radius: 999px; padding: 9px 6px; font: 600 13.5px Inter, sans-serif; color: var(--muted); cursor: pointer; }
.astabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(14,14,16,.12); }
.asdot { font-style: normal; color: var(--violet); font-size: 9px; vertical-align: 2px; }
.asbody { display: grid; gap: 8px; }
.asbody textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 13px; font: 15px Inter, sans-serif; resize: vertical; }
.asbody textarea:focus { outline: none; border-color: var(--violet); }
.asbody textarea:disabled { background: var(--soft); color: var(--faint); }
.asbody .blabel { margin-top: 4px; }
.aspick summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 0; }
.aspick .vlist { max-height: 260px; overflow: auto; }
.asprice { margin: 2px 0 0; font-size: 13px; color: var(--violet); font-weight: 600; }
.asfoot { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.assum { margin: 0; font-size: 13px; color: var(--muted); }
.asfoot .go { width: 100%; justify-content: center; }
.aspreview { position: sticky; top: 90px; display: grid; gap: 14px; }
.aspreview video { width: 100%; max-height: 72vh; background: #0E0E10; border-radius: 22px; object-fit: contain; }
.asdone { display: grid; gap: 10px; }
@media (max-width: 860px) { .aswrap { grid-template-columns: 1fr; } .aspreview { position: static; } .aspreview video { max-height: 46vh; } }

/* "How it works" for sound: three small looping cards */
.asview { justify-self: start; }
.showcase { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px 20px; }
.showcase[hidden], .asfilm[hidden] { display: none; }
.sc-title { margin: 0; text-align: center; font: 800 26px/1.1 Inter, sans-serif; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.sc-sub { margin: 6px 0 18px; text-align: center; font-size: 14px; color: var(--muted); }
.sc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 4px; align-content: start; background: #FCFCFD; min-width: 0; }
.sc-card h4 { margin: 0; font-size: 15px; color: var(--ink); }
.sc-card p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.sc-stage { position: relative; height: 180px; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #FFE4EE 0%, #FBD0E0 45%, #F3A3C2 100%); }
.sc-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.sc-wave i { width: 2px; height: 40%; border-radius: 2px; background: #fff; animation: scbar .9s ease-in-out var(--d) infinite alternate; }
.sc-wave.big { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 30px; justify-content: space-between; }
.sc-wave.big i { width: 3px; background: var(--violet); opacity: .75; }
@keyframes scbar { from { height: 25%; } to { height: 100%; } }
/* voice */
.sc-chip { position: absolute; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 5px 12px 5px 5px; box-shadow: 0 8px 22px rgba(194,80,127,.22); white-space: nowrap; }
.sc-chip.main { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px 6px 6px; gap: 7px; z-index: 2; }
.play .sc-chip.main { animation: scin .6s cubic-bezier(.2,.8,.2,1); }
@keyframes scin { from { opacity: 0; transform: translate(-30%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.sc-chip.small { transform: scale(.72); opacity: .8; }
.sc-chip.tl { left: -8px; top: 8px; transform-origin: left top; }
.sc-chip.br { right: -8px; bottom: 10px; transform-origin: right bottom; }
.play .sc-chip.small { animation: scdrift 3.2s ease-in-out; }
@keyframes scdrift { 0% { opacity: 0; } 25%, 100% { opacity: .8; } }
.sc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.sc-chip.main .sc-ic { width: 34px; height: 34px; }
.sc-av { width: 30px; height: 30px; margin-left: -12px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; background: linear-gradient(135deg, #fff, var(--c)); font: 700 13px Inter, sans-serif; color: var(--ink); }
.sc-chip.main .sc-av { width: 34px; height: 34px; font-size: 15px; }
.sc-nm { display: grid; line-height: 1.1; }
.sc-nm b { font-size: 13px; color: var(--ink); }
.sc-chip.main .sc-nm b { font-size: 15px; }
.sc-nm em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.sc-pill { position: absolute; left: 10px; bottom: 10px; font: 600 10.5px Inter, sans-serif; color: var(--violet); background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 999px; }
/* music */
.sc-moods { position: absolute; inset: 12px 10px 50px; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; overflow: hidden; }
.sc-mood { font: 600 11px Inter, sans-serif; white-space: nowrap; background: rgba(255,255,255,.75); color: var(--ink); padding: 6px 10px; border-radius: 999px; transition: background-color .3s, color .3s, transform .3s; }
.sc-mood { padding: 5px 9px !important; }
.sc-mood.on { background: var(--violet); color: #fff; transform: scale(1.04); box-shadow: 0 6px 16px rgba(194,80,127,.35); }
.play .sc-mood.on { animation: scpulse 1.6s ease-in-out infinite; }
@keyframes scpulse { 50% { box-shadow: 0 0 0 6px rgba(194,80,127,.18), 0 6px 16px rgba(194,80,127,.35); } }
/* sound effects */
.sc-form { position: absolute; inset: 12px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.sc-lbl { font: 600 10.5px Inter, sans-serif; color: var(--muted); }
.sc-type { font-size: 12px; line-height: 1.35; color: var(--ink); min-height: 32px; }
.play .sc-type { animation: sctype 1.3s steps(30) both; }
@keyframes sctype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sc-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.sc-go { justify-self: stretch; text-align: center; font: 700 13px Inter, sans-serif; color: var(--ink); padding: 9px; border-radius: 999px; background: linear-gradient(90deg, #FDE3EC, #F3A3C2); }
.play .sc-go { animation: scpress 3.2s ease both; }
@keyframes scpress { 0%, 52% { transform: none; box-shadow: none; } 58% { transform: scale(.95); box-shadow: 0 0 0 6px rgba(194,80,127,.2); } 66%, 100% { transform: none; box-shadow: 0 6px 18px rgba(194,80,127,.3); } }
.sc-done { font: 600 12px Inter, sans-serif; color: #1F8A5B; text-align: center; opacity: 0; }
.play .sc-done { animation: scshow 3.2s ease both; }
@keyframes scshow { 0%, 64% { opacity: 0; transform: translateY(4px); } 72%, 100% { opacity: 1; transform: none; } }
.sc-cursor { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); left: 70%; top: 40%; opacity: 0; }
.play .sc-cursor { animation: sccursor 3.2s ease both; }
@keyframes sccursor { 0%, 38% { opacity: 0; left: 70%; top: 30%; } 45% { opacity: 1; left: 70%; top: 30%; } 56% { left: 50%; top: 66%; transform: scale(1); } 60% { transform: scale(.8); } 66% { transform: scale(1); } 85% { opacity: 1; left: 50%; top: 66%; } 100% { opacity: 0; left: 50%; top: 66%; } }
.showcase.paused *, .showcase.still * { animation-play-state: paused !important; }
.showcase.still .sc-type { max-width: 100%; }
.showcase.still .sc-done { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .showcase * { animation: none !important; } .sc-done { opacity: 1; } }
.showcase.compact { margin: 18px 0 22px; }
@media (max-width: 860px) { .sc-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; } .sc-card { scroll-snap-align: start; } .sc-stage { height: 160px; } .sc-title { font-size: 21px; } }

/* A sketch of each scene */
.skbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--blush, #FFF1F5); border-radius: 18px; padding: 14px 16px; margin: 16px 0 0; }
.skbar > div:first-child { display: grid; gap: 2px; }
.skbar b { font-size: 15px; color: var(--ink); }
.skbar span { font-size: 13px; color: var(--muted); }
.skbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.frame .scenesk { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; padding: 6px 12px; background: #fff; box-shadow: 0 4px 14px rgba(14,14,16,.1); z-index: 2; }
.frame.drawn .scenesk { bottom: 10px; left: 12px; transform: none; background: rgba(255,255,255,.92); }
.frame.drawn .tc { color: var(--ink); background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 6px; }
.frame.drawn .no { z-index: 2; background: rgba(255,255,255,.9); padding: 2px 7px; border-radius: 8px; }
.frame .scenezoom { position: absolute; inset: 0; border: 0; padding: 0; background: #fff; cursor: zoom-in; }
.frame .scenezoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame .scenebusy { position: absolute; left: 0; right: 0; bottom: 30px; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--violet); font-weight: 600; }

/* Homepage walkthrough */
.hwsec { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.hwpoints { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.hwpoints li { display: grid; gap: 2px; padding-left: 26px; position: relative; }
.hwpoints li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--violet); }
.hwpoints b { font-size: 16px; color: var(--ink); }
.hwpoints span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.hw { display: grid; gap: 12px; }
.hwwin { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(194,80,127,.18); }
.hwbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--soft); font: 600 12px Inter, sans-serif; color: var(--muted); }
.hwbar i { width: 9px; height: 9px; border-radius: 50%; background: #E2E2E8; }
.hwbar span { margin-left: 8px; }
.hwstage { position: relative; height: 340px; background: radial-gradient(120% 100% at 20% 0%, #FFF1F5 0%, #FBE1EA 55%, #F7C9DA 100%); overflow: hidden; }
.hwscene { position: absolute; inset: 0; padding: 26px; display: grid; align-content: center; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; pointer-events: none; }
.hwscene.on { opacity: 1; transform: none; }
.hwbox { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 10px 30px rgba(14,14,16,.08); display: grid; gap: 10px; }
.hwlbl { font: 700 11px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.hwtype { font-size: 16px; line-height: 1.4; color: var(--ink); min-height: 46px; }
.play .hwscene.on .hwtype { animation: hwtype 2.2s steps(40) both; }
@keyframes hwtype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hwrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hwchip { font: 600 12px Inter, sans-serif; padding: 7px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); }
.hwgo { margin-left: auto; font: 700 13px Inter, sans-serif; padding: 9px 16px; border-radius: 999px; color: var(--ink); background: linear-gradient(90deg, #FDE3EC, #F3A3C2); }
.hwgo.big { font-size: 15px; padding: 12px 20px; margin: 0; }
.hwrefs { display: flex; gap: 10px; }
.hwref { width: 92px; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 8px 20px rgba(14,14,16,.12); }
.hwref img { width: 100%; height: 100%; object-fit: cover; }
.hwref em { position: absolute; left: 6px; top: 6px; font: 700 10px Inter, sans-serif; font-style: normal; background: rgba(255,255,255,.92); padding: 2px 6px; border-radius: 999px; }
.play .hwscene.on .hwref { animation: hwpop .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--i) * .45s + .2s); }
@keyframes hwpop { from { opacity: 0; transform: scale(.7) translateY(10px); } to { opacity: 1; transform: none; } }
.hwskill { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 8px 14px 8px 8px; width: max-content; box-shadow: 0 8px 22px rgba(194,80,127,.18); }
.hwspark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; }
.hwskill b { font-size: 13px; }
.hwprog { width: 70px; height: 5px; border-radius: 9px; background: var(--soft-2); overflow: hidden; }
.hwprog i { display: block; height: 100%; width: 0; background: var(--violet); }
.play .hwscene.on .hwprog i { animation: hwprog 1.4s ease both; }
@keyframes hwprog { to { width: 100%; } }
.hwtitle { margin: 0; font: 800 22px Inter, sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.play .hwscene.on .hwtitle { animation: hwpop .5s ease 1.2s both; }
.hwbeats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hwbeat { background: #fff; border-radius: 14px; padding: 10px; height: 120px; display: grid; align-content: start; gap: 4px; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(14,14,16,.08); }
.hwbeat b { font-size: 11px; color: var(--violet); z-index: 1; }
.hwbeat em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--ink); line-height: 1.2; }
.hwbeat small { font-size: 10.5px; color: var(--muted); z-index: 1; }
.hwbeat.sk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hwbeat.sk small { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,.9); padding: 2px 6px; border-radius: 999px; color: var(--ink); font-weight: 600; }
.play .hwscene.on .hwbeat { animation: hwpop .45s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--i) * .3s + 1.6s); }
.hwscene[data-s="3"] { grid-template-columns: 150px 1fr; align-items: center; }
.hwfilm { position: relative; width: 150px; aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(14,14,16,.22); }
.hwfilm img { width: 100%; height: 100%; object-fit: cover; }
.hwmore { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(14,14,16,.62); color: #fff; display: grid; place-items: center; font-size: 14px; }
.hwmenu { position: absolute; top: 40px; right: 8px; background: #fff; border-radius: 12px; padding: 4px; display: grid; font: 500 11px Inter, sans-serif; box-shadow: 0 10px 26px rgba(14,14,16,.2); opacity: 0; }
.hwmenu span { padding: 5px 8px; border-radius: 8px; }
.hwmenu .on { background: var(--blush); color: var(--violet); font-weight: 700; }
.play .hwscene.on .hwmenu { animation: hwshow 4.2s ease both; }
@keyframes hwshow { 0%, 55% { opacity: 0; transform: translateY(-4px); } 62%, 100% { opacity: 1; transform: none; } }
.hwpay { display: grid; gap: 10px; justify-items: start; }
.play .hwscene.on .hwgo.big { animation: hwpress 4.2s ease both; }
@keyframes hwpress { 0%, 18% { transform: none; } 24% { transform: scale(.95); box-shadow: 0 0 0 7px rgba(194,80,127,.2); } 32%, 100% { transform: none; box-shadow: 0 8px 20px rgba(194,80,127,.3); } }
.hwnote { font-size: 13px; color: var(--muted); }
.hwcursor { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); opacity: 0; left: 60%; top: 60%; transition: left .8s ease, top .8s ease, opacity .3s; }
.hw[data-step="0"] .hwcursor { opacity: 1; left: 84%; top: 72%; }
.hw[data-step="1"] .hwcursor { opacity: 1; left: 30%; top: 62%; }
.hw[data-step="2"] .hwcursor { opacity: 0; }
.hw[data-step="3"] .hwcursor { opacity: 1; left: 52%; top: 52%; }
.hwcap { margin: 0; text-align: center; font: 800 20px Inter, sans-serif; letter-spacing: -0.01em; color: var(--ink); min-height: 26px; }
.hwctl { display: flex; justify-content: center; align-items: center; gap: 12px; }
.hwplay { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 11px; }
.hwdots { display: flex; gap: 6px; }
.hwdots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #E2E2E8; cursor: pointer; transition: width .3s, background-color .3s; }
.hwdots button.on { width: 24px; background: var(--violet); }
.hw.paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .hw * { animation: none !important; transition: none !important; } }
@media (max-width: 860px) { .hwsec { grid-template-columns: 1fr; gap: 22px; } .hwstage { height: 320px; } .hwscene { padding: 16px; } .hwscene[data-s="3"] { grid-template-columns: 110px 1fr; } .hwfilm { width: 110px; } .hwref { width: 78px; } .hwtype { font-size: 14px; } }
.hwvid { position: relative; border-radius: 22px; overflow: hidden; background: #FFF1F5; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(194,80,127,.18); aspect-ratio: 16/9; }
.hwvid[hidden], .hw[hidden] { display: none; }
.hwvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hwvplay { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(14,14,16,.62); color: #fff; font-size: 12px; cursor: pointer; backdrop-filter: blur(6px); }