/* BetaCreator legacy component geometry. The canonical semantic palette,
   typography, compact density and appearance modes live in studio.css. */

:root{
  --bg:#F2F2F7; --surface:#FFFFFF;
  --label:#1D1D1F;
  /* Measured, not eyeballed. The old values were .62 and .34, which give 3.6:1 and
     1.9:1 against these surfaces - the hint text under every field was at less than
     half the contrast a person needs to read it comfortably, which is a large part of
     why the interface felt hard. WCAG AA wants 4.5:1 for text this size. */
  --label2:rgba(60,60,67,.78);   /* 5.2:1 - body, lede */
  --label3:rgba(60,60,67,.76);   /* readable hints without looking like primary copy */
  --sep:rgba(60,60,67,.14); --hair:rgba(0,0,0,.055);
  --fill:rgba(120,120,128,.12); --fill2:rgba(120,120,128,.08);
  --blue:var(--accent); --green:var(--success); --orange:#FF9500; --red:#FF3B30; --indigo:var(--accent);
  --sans:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Helvetica Neue",Helvetica,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --motion-out:cubic-bezier(.16,1,.3,1);

  /* Type scale. Six sizes, ~1.2 ratio, and nothing else. The page had grown to
     thirteen sizes (10.5, 12, 12.5, 13, 13.33, 14, 14.5, 15, 15.5, 16, 19, 26, 38)
     because every patch picked a fresh number - which is what makes an interface feel
     unconsidered even when each screen looks fine on its own. */
  --t-xs:12px;     /* meta labels - 12px is the floor for readable type */
  --t-sm:13px;     /* hints, secondary */
  --t-md:15px;     /* body, inputs, buttons */
  --t-lg:17px;     /* lede */
  --t-xl:21px;     /* section heading */
  --t-2xl:26px;    /* a number worth reading across the room */
  --t-3xl:34px;    /* page title */
  --t-hero:44px;   /* sign-in only */
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--label);
  font-family:var(--sans);font-size:var(--t-md);line-height:1.55;
  min-height:100vh;position:relative;
}
/* one soft depth wash, fixed so it never rides the scroll */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(52rem 30rem at 80% -14%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 62%),
    radial-gradient(40rem 26rem at 4% 2%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 60%);
}

/* ---------- translucent chrome; content scrolls beneath it ---------- */
header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 28px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--sep);
}
.brand{display:flex;align-items:center;gap:9px;font-size:var(--t-md);font-weight:600;
  letter-spacing:-.01em;color:var(--label);text-decoration:none}
.mark{width:22px;height:22px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--accent),var(--accent));
  box-shadow:0 0 0 .5px rgba(0,0,0,.06) inset,0 3px 10px color-mix(in srgb,var(--accent) 32%,transparent)}
nav{display:flex;gap:4px;align-items:center}
nav a{font-size:var(--t-sm);color:var(--label2);text-decoration:none;
  padding:9px 12px;min-height:38px;display:inline-flex;align-items:center;
  border-radius:7px;transition:background .2s var(--motion-out),color .2s var(--motion-out)}
nav a:hover{color:var(--label);background:var(--fill2)}
nav a.on{color:var(--label);font-weight:500;background:var(--fill)}

main{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:44px 28px 96px}
main.narrow{max-width:640px}

/* ---------- type: tracking tightens as size grows ---------- */
h1{font-size:var(--t-3xl);font-weight:600;line-height:1.06;letter-spacing:-.028em;margin:0 0 10px}
h2{font-size:var(--t-xl);font-weight:600;line-height:1.2;letter-spacing:-.015em;margin:36px 0 14px}
.lede{font-size:var(--t-lg);color:var(--label2);margin:0 0 34px;max-width:60ch;letter-spacing:-.003em}
.hint{font-size:var(--t-sm);color:var(--label3);margin:6px 0 0;line-height:1.5}
.meta{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--label3);margin:0}

/* ---------- steps ---------- */
.steps{display:flex;align-items:center;gap:9px;margin:0 0 32px;flex-wrap:wrap;counter-reset:st}
.steps s{text-decoration:none;font-size:var(--t-sm);color:var(--label3);letter-spacing:-.005em;
  display:flex;align-items:center;gap:7px;counter-increment:st}
/* the number lives in CSS so the markup only has to say which step you are on */
.steps s::before{content:counter(st);width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--fill);color:var(--label3);
  transition:background .25s ease,color .25s ease}
.steps s.on{color:var(--label);font-weight:590}
.steps s.on::before{background:var(--blue);color:#fff}
.steps s.done{color:var(--label2)}
.steps s.done::before{content:"\2713";background:var(--green);color:#fff;font-size:12px}
.steps i{width:18px;height:2px;border-radius:1px;background:var(--sep);display:block;
  transition:background .25s ease}
.steps i.done{background:var(--green)}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  padding:26px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05)}
.card.flush{padding:6px 22px}

/* ---------- forms ---------- */
.field{margin-bottom:24px}
.field:last-child{margin-bottom:0}
label{display:block;font-size:var(--t-sm);font-weight:590;color:var(--label);margin:0 0 8px;
  letter-spacing:-.005em}
/* every input, not just the ones we happened to name - an unlisted type falls back to
   the browser's own 13.3333px, which is where an off-scale size was coming from */
input,textarea,select,button{font-family:var(--sans)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],
textarea,select{
  width:100%;padding:11px 13px;font-family:var(--sans);font-size:var(--t-md);
  color:var(--label);background:var(--surface);letter-spacing:-.005em;
  border:1px solid rgba(60,60,67,.18);border-radius:11px;
  transition:border-color .2s var(--motion-out),box-shadow .2s var(--motion-out);
}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--label3)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 16%,transparent)}
input[type=file]{font-size:var(--t-sm);color:var(--label2);border:0;padding:0}

/* drop zone */
.drop{border:1px dashed rgba(60,60,67,.22);border-radius:14px;padding:40px 24px;
  text-align:center;background:rgba(120,120,128,.05);cursor:pointer;
  transition:border-color .2s var(--motion-out),background .2s var(--motion-out)}
.drop:hover{border-color:var(--blue);background:color-mix(in srgb,var(--accent) 4%,transparent)}

/* chosen files. Phone exports and AI tools produce absurdly long filenames, so
   every part of this row is allowed to shrink and the name truncates rather than
   pushing the card open. */
.filelist{display:grid;gap:8px;margin-top:16px}
.file{display:flex;align-items:center;gap:10px;min-width:0;
  background:rgba(120,120,128,.08);border-radius:11px;padding:10px 12px}
.file svg{flex:0 0 auto}
.file .nm{flex:1;min-width:0;font-size:var(--t-sm);color:var(--label);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .sz{flex:0 0 auto;font-family:var(--mono);font-size:var(--t-xs);color:var(--label3)}

/* pick-one cards */
.choices{display:grid;gap:10px}
.choices.two{grid-template-columns:1fr 1fr}
.choice{display:block;border:1px solid rgba(60,60,67,.18);border-radius:13px;
  padding:14px 16px;cursor:pointer;background:var(--surface);
  transition:border-color .2s var(--motion-out),background .2s var(--motion-out)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice strong{display:block;font-size:var(--t-md);font-weight:500;color:var(--label)}
.choice em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--label3);margin-top:2px}
.choice:has(input:checked){border-color:color-mix(in srgb,var(--accent) 55.00000000000001%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.admin-grid{margin-top:20px}
.admin-grid .choice{text-decoration:none;min-height:116px;display:flex;flex-direction:column;justify-content:center}
.admin-grid .choice:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.admin-grid .choice strong{font-weight:650}
.admin-grid .choice em{margin-top:6px;line-height:1.45}

/* segmented control */
.seg{display:flex;background:var(--fill2);border-radius:10px;padding:2px;gap:2px}
.seg label{flex:1;margin:0;text-align:center;padding:7px 10px;border-radius:8px;
  font-size:var(--t-sm);font-weight:500;color:var(--label2);cursor:pointer;
  transition:background .2s var(--motion-out),color .2s var(--motion-out)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--surface);color:var(--label);
  box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)}

/* ---------- buttons: feedback on press, not release ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  background:var(--blue);color:#fff;border:0;border-radius:11px;
  padding:12px 20px;font-family:var(--sans);font-size:var(--t-md);font-weight:590;
  letter-spacing:-.01em;cursor:pointer;text-decoration:none;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 28.000000000000004%,transparent);
  transition:transform .1s var(--motion-out),background .2s var(--motion-out)}
.btn:hover{background:var(--accent)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn.g{background:var(--fill);color:var(--label);box-shadow:none}
.btn.g:hover{background:rgba(120,120,128,.18)}
.btn.lg{padding:14px 26px;font-size:var(--t-lg)}
.actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.actions.end{justify-content:flex-end}

/* ---------- status ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:590;
  padding:4px 10px;border-radius:9999px;background:var(--fill);color:var(--label2);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill.done{background:rgba(97,81,163,.14);color:var(--success)}
.pill.running,.pill.studying{background:rgba(255,149,0,.15);color:#B25E00}
.pill.queued,.pill.draft{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.pill.failed{background:rgba(255,59,48,.12);color:#C7302A}

/* ---------- lists ---------- */
.row{display:flex;align-items:center;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--sep);text-decoration:none;color:var(--label)}
.row:last-child{border-bottom:0}
.row .thumb{width:42px;height:42px;object-fit:cover;border-radius:9px;flex:0 0 auto;
  background:var(--fill)}
.row .t{font-size:var(--t-md);font-weight:500;letter-spacing:-.008em}
.track{height:3px;border-radius:3px;background:rgba(60,60,67,.13);overflow:hidden}
.track i{display:block;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent))}

/* ---------- scene review ---------- */
.scene{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--sep)}
.scene:last-child{border-bottom:0}
.scenebody{min-width:0}
.mtime{font-weight:400;color:var(--label3);margin-left:8px}
/* A small phone. The frame of the moment with the caption on it, in the exact face
   and outline the video is burned with, so the words can be judged before any
   rendering - "we can feel how the font and the words will actually look". */
.phone{position:relative;width:150px;height:267px;border-radius:16px;overflow:hidden;
  background:#111;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.capline{position:absolute;left:8px;right:8px;bottom:26%;text-align:center;
  pointer-events:none}
.capline .capcard{font-size:12.8px;line-height:1.2}
@font-face{font-family:"CapFace";src:local("Arial Black"),url(/font/caption) format("truetype");
  font-display:swap}
.capcard{display:inline-block;font-family:"CapFace","Arial Black","Arial Bold",Arial,sans-serif;
  font-weight:900;color:var(--caption-color,#fff);font-size:19px;line-height:1.25;letter-spacing:-.005em;
  text-align:center;max-width:100%;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,
    0 -2px 0 #000,0 2px 0 #000,-2px 0 0 #000,2px 0 0 #000,0 3px 4px rgba(0,0,0,.55)}
.cjk .capcard{font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;font-weight:700}
.capcard.pop{animation:cappop .12s ease-out}
@keyframes cappop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
#rf[data-caption-outline="none"] .capcard{text-shadow:0 2px 7px rgba(0,0,0,.62)}
#rf[data-caption-outline="thin"] .capcard{text-shadow:-1px -1px 0 var(--caption-outline-color,#111),1px -1px 0 var(--caption-outline-color,#111),-1px 1px 0 var(--caption-outline-color,#111),1px 1px 0 var(--caption-outline-color,#111),0 2px 5px rgba(0,0,0,.5)}
#rf[data-caption-outline="bold"] .capcard{text-shadow:-2px -2px 0 var(--caption-outline-color,#111),2px -2px 0 var(--caption-outline-color,#111),-2px 2px 0 var(--caption-outline-color,#111),2px 2px 0 var(--caption-outline-color,#111),0 3px 5px rgba(0,0,0,.56)}
#rf[data-caption-background="soft"] .capcard,#rf[data-caption-background="solid"] .capcard{padding:.22em .48em;border-radius:.32em;background:rgba(11,16,32,.66)}
#rf[data-caption-background="solid"] .capcard{background:rgba(11,16,32,.92)}
#rf[data-caption-position="top"] .capline{top:15%;bottom:auto}
#rf[data-caption-position="middle"] .capline{top:46%;bottom:auto;transform:translateY(-50%)}
.capcard.fade,.caption-demo.fade{animation:captionFade .3s ease-out}
.capcard.slide,.caption-demo.slide{animation:captionSlide .28s ease-out}
.capcard.bounce,.caption-demo.bounce{animation:captionBounce .42s cubic-bezier(.2,.85,.35,1.35)}
.capcard.typewriter,.caption-demo.typewriter{animation:captionType .45s steps(7,end)}
@keyframes captionFade{from{opacity:0}to{opacity:1}}
@keyframes captionSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes captionBounce{0%{opacity:0;transform:scale(.76)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes captionType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
/* the strip: every card of the moment, on the dark the video will have */
.capprev{margin-top:10px}
.capprev .lead{display:block;margin-bottom:6px}
.capstrip{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 16px;
  border-radius:12px;background:linear-gradient(rgba(20,22,30,.34),rgba(20,22,30,.34)),
  var(--capbg,linear-gradient(180deg,#9aa3b5,#66708a)) center/cover no-repeat}
.story{background:linear-gradient(135deg,#F5F3FF,#EEF6FF)}
.storytext{margin:0;font-size:var(--t-lg,17px);line-height:1.55;letter-spacing:-.01em}
/* the bar that stays put: saved state, length, and the one button that matters */
.makebar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:18px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.10)}
.mkleft{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mkright{display:flex;align-items:center;gap:14px}
.rwall{display:flex;gap:10px;flex:0 0 100%}
.rwall input{flex:1;min-width:0}
.review-titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.review-titlebar h1{margin-bottom:8px}
.review-titlebar .lede{margin:0}
.review-titlebar>.btn{flex:0 0 auto}
.script-rewrite{align-items:end;margin:0;padding:16px 0;border-bottom:1px solid var(--sep);flex-wrap:wrap}
.script-rewrite>div{flex:1 1 100%}
.script-rewrite .hint{margin:3px 0 0}
.script-rewrite input{flex:1 1 320px}
.script-rewrite>.btn{flex:0 0 auto}
.saved{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);font-weight:500;
  color:var(--label2)}
.saved .tickmark{width:16px;height:16px;border-radius:50%;background:var(--green);position:relative;
  flex:0 0 auto}
.saved .tickmark::after{content:"";position:absolute;left:5px;top:2.5px;width:4px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.saved.saving .tickmark{background:color-mix(in srgb,var(--accent) 25%,transparent);animation:wspin .8s linear infinite;
  border:1.6px solid transparent;border-top-color:var(--blue)}
.saved.saving .tickmark::after{display:none}
.saved.failed .tickmark{background:var(--orange)}
.saved.failed .tickmark::after{display:none}
/* Grows with its content. A fixed height meant a three-line script sat behind a
   scrollbar, so you could not read the line you were being asked to approve. */
.scene textarea{min-height:72px;overflow:hidden;resize:none}
.capedit textarea{overflow:hidden;resize:none;font-size:var(--t-md)}
.over{color:var(--orange)}
/* says "you can skip this" without a sentence */
.opt{display:inline-block;vertical-align:middle;margin-left:9px;padding:3px 9px;border-radius:999px;
  background:var(--fill);color:var(--label2);font-size:var(--t-xs);font-weight:590;
  letter-spacing:.01em;text-transform:none}

.namerow{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.namerow .nm{width:150px;flex:0 0 auto;font-size:var(--t-md);font-weight:500}
.namerow input{padding:9px 12px}


/* ---------- "we are working" ----------
   A static label reads as a hang. Anything that takes more than a moment gets three
   things: motion that cannot stall, a count of how long it has been going, and a bar
   that keeps sweeping. The timer is the honest part - it says nothing about how much
   is left, only that time is passing and the work is still ours. */
.working{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-sm);
  color:var(--label2);font-weight:500}
.working .spin{width:13px;height:13px;flex:0 0 auto;border-radius:50%;
  border:1.6px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--blue);
  animation:wspin .7s linear infinite}
@keyframes wspin{to{transform:rotate(360deg)}}
.working .t{font-family:var(--mono);font-size:var(--t-xs);color:var(--label3);
  font-variant-numeric:tabular-nums}
.working .dots::after{content:"";animation:wdots 1.4s steps(4,end) infinite}
@keyframes wdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* a bar that sweeps rather than pretending to know progress */
.sweep{height:3px;border-radius:3px;background:color-mix(in srgb,var(--accent) 13%,transparent);overflow:hidden;
  position:relative}
.sweep::after{content:"";position:absolute;top:0;bottom:0;width:38%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent),transparent);
  animation:sweepmove 1.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweepmove{0%{left:-40%}100%{left:100%}}

@media (prefers-reduced-motion:reduce){
  .working .spin{animation:none;border-top-color:color-mix(in srgb,var(--accent) 25%,transparent)}
  .working .dots::after{content:"..."; animation:none}
  .sweep::after{animation:none;left:0;width:100%;opacity:.45}
}

.momentbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.linky{background:none;border:0;padding:8px 0;min-height:38px;font:inherit;font-size:var(--t-sm);
  color:var(--label3);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(60,60,67,.25)}
.linky:hover{color:var(--blue);text-decoration-color:currentColor}
.music-preview{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:max-content;min-height:36px;margin-top:10px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-radius:10px;background:color-mix(in srgb,var(--accent) 7.000000000000001%,transparent);color:var(--accent);font:inherit;font-size:var(--t-xs);
  font-weight:650;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.music-preview svg{width:14px;height:14px;fill:currentColor}
.music-preview:hover{background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:color-mix(in srgb,var(--accent) 55.00000000000001%,transparent)}
.music-preview:active{transform:scale(.98)}
.music-preview.playing{background:var(--label);border-color:var(--label);color:#fff}
.music-preview:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* The direction box gets a row to itself. Sharing one with the Rewrite button left
   it about 160px wide on a phone, so its own placeholder was cut off mid-word. */
/* the hidden attribute must beat every display rule, or a box that is opened by
   a tap shows up open on every moment before anyone tapped anything */
[hidden]{display:none!important}
.rwnote{display:flex;align-items:center;gap:8px;flex:0 0 100%;min-width:0}
.rwnote input{flex:1;min-width:0;padding:8px 12px;font-size:var(--t-sm)}
.stkedit{margin-top:4px}
.stkedit input{margin-top:4px}
.capedit{margin-top:4px}
.capedit textarea{min-height:52px;margin-top:4px;font-size:var(--t-md)}

/* ---------- progress: one compact row of steps ---------- */
/* The step flow. Vertical, one per line, with a rail joining them - so it reads as
   "here is the road, here is where we are on it" rather than six labels in a row. */
.flow{list-style:none;padding:0;margin:0}
.flow li{position:relative;display:flex;align-items:flex-start;gap:13px;
  padding:11px 0 11px 0;min-height:44px}
.flow li::before{content:"";position:absolute;left:13px;top:32px;bottom:-11px;width:2px;
  background:var(--sep)}
.flow li:last-child::before{display:none}
.flow li.done::before{background:var(--green)}
.flow .mark{width:28px;height:28px;border-radius:50%;flex:0 0 auto;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--fill);color:var(--label3);border:2px solid transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.flow .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.flow .lbl{font-size:var(--t-sm);color:var(--label3);transition:color .25s ease}
.flow .desc{font-size:var(--t-xs);color:var(--label3);display:none}
.flow .tm{font-size:var(--t-xs);padding-top:5px;white-space:nowrap;
  text-transform:none;letter-spacing:0}

/* done: filled green circle with a tick, drawn in CSS so there is no icon to load */
.flow li.done .mark{background:var(--green);color:transparent;border-color:var(--green)}
.flow li.done .mark::after{content:"";position:absolute;left:50%;top:50%;
  width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:translate(-50%,-62%) rotate(45deg)}
.flow li.done .lbl{color:var(--label2)}

/* the step being worked on: bigger, darker, its explanation showing, and a ring
   that keeps turning so the page never looks frozen */
.flow li.on{padding:15px 0}
.flow li.on .lbl{color:var(--label);font-weight:590;font-size:var(--t-md)}
.flow li.on .desc{display:block;color:var(--label2)}
.flow li.on .mark{background:transparent;color:transparent;
  border-color:var(--orange);border-right-color:transparent;
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .flow li.on .mark{animation:none;border-right-color:var(--orange);background:var(--orange)}
}

/* ---------- progress ---------- */
.steplist{list-style:none;padding:0;margin:0}
.steplist li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--sep);
  align-items:flex-start}
.steplist li:last-child{border-bottom:0}
.steplist .lbl{font-size:var(--t-md);font-weight:500;color:var(--label3)}
.steplist li.on .lbl,.steplist li.done .lbl{color:var(--label)}
.mark-dot{width:17px;flex:0 0 auto;display:flex;justify-content:center;margin-top:6px}
.mark-dot span{width:7px;height:7px;border-radius:50%;background:rgba(60,60,67,.2)}
li.on .mark-dot span{background:var(--orange);animation:breathe 1.8s ease-in-out infinite}
li.done .mark-dot span{background:var(--green)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}

/* One live line, big enough to read at a glance. */
.latest{display:flex;align-items:center;gap:10px;font-size:var(--t-md);color:var(--label)}
.latest .tickmark{width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:var(--fill);color:var(--label2)}
.latest.ok .tickmark{background:rgba(97,81,163,.16);color:var(--success)}
.latest.bad .tickmark{background:rgba(255,59,48,.14);color:#C7302A}
#showall{margin-top:12px}
/* no scrollbar until someone asks for the detail */
.logwrap{margin-top:10px;border-top:1px solid var(--sep)}
.log div{padding:9px 0;border-bottom:1px solid var(--sep);font-size:var(--t-sm);color:var(--label2)}
.log div:last-child{border-bottom:0}
.log div.ok{color:var(--success)}
.log div.bad{color:#C7302A}

/* ---------- notices ---------- */
.notice{background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:20px 22px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05)}
.notice strong{color:var(--label);font-weight:590}
.notice.bad{border-color:rgba(255,59,48,.28)}
.notice.good{border-color:rgba(97,81,163,.32)}
.empty{background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  padding:64px 32px;text-align:center;color:var(--label3);font-size:var(--t-md)}

/* A vertical reel is 1080x1920, so at full column width it is over 900px tall and
   pushes everything else off the screen. Cap it and centre it - the point here is to
   check the video, not to watch it full size. */
video{width:100%;max-width:340px;max-height:56vh;border-radius:14px;background:#000;
  display:block;margin:0 auto}
audio{width:100%}

/* ---------- voice setup ---------- */
.recorder{text-align:center;padding:30px 0 6px}
.timer{font-family:var(--mono);font-size:44px;font-weight:500;letter-spacing:-.02em;
  color:var(--label);margin:0 0 4px;font-variant-numeric:tabular-nums}
.wave{display:flex;align-items:center;justify-content:center;gap:3px;height:34px;margin:18px 0 22px}
.wave span{width:3px;border-radius:2px;background:var(--blue);opacity:.65}
.rec{width:64px;height:64px;border-radius:50%;border:0;background:var(--red);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(255,59,48,.35);transition:transform .1s var(--motion-out)}
.rec:active{transform:scale(.95)}
.rec i{width:22px;height:22px;background:#fff;border-radius:50%;display:block}
.rec.stop i{border-radius:4px;width:20px;height:20px}
.prompts{display:grid;gap:8px;margin-top:4px}
.prompts div{background:rgba(120,120,128,.08);border-radius:11px;padding:12px 14px;font-size:var(--t-md)}
.pick{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--sep)}
.pick:last-of-type{border-bottom:0}
.pick .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--label3);width:52px;flex:0 0 auto;
  text-transform:uppercase;letter-spacing:.06em}

/* On a phone, a finger needs about 44px. Every control gets there, without making the
   desktop layout look chunky - padding grows, type does not. */
@media (pointer:coarse){
  .btn{min-height:44px}
  nav a,.linky{min-height:44px}
  .capbtn{padding:12px 0}
}

/* ---------- entry motion ----------
   Content is visible by default and only hides once JS has confirmed it will
   animate it back in (body.anim). Starting at opacity:0 in CSS means a slow or
   broken script leaves the page blank - the animation must never be load-bearing
   for legibility. */
body.anim .reveal,body.anim .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  body.anim .reveal,body.anim .reveal.in{opacity:1;transform:none;transition:none}
  li.on .mark-dot span{animation:none}
  .btn:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  header{background:#fff;backdrop-filter:none}
}
@media (max-width:640px){
  header{padding:12px 18px}
  main{padding:32px 18px 72px}
  h1{font-size:30px}
  .scene{grid-template-columns:108px 1fr;gap:14px}
  .phone{width:108px;height:192px;border-radius:13px}
  .capline .capcard{font-size:9.2px}
  .capcard{font-size:17px}
  .makebar{bottom:8px;padding:12px 14px}
  .mkright{width:100%;justify-content:space-between}
  .review-titlebar{align-items:flex-start;flex-direction:column;margin-bottom:14px}
  .review-titlebar>.btn{width:100%}
  .script-rewrite{align-items:stretch}
  .script-rewrite>.btn{width:100%}
  .choices.two{grid-template-columns:1fr}
  .namerow{flex-wrap:wrap;gap:8px}
  .namerow .nm{width:100%}
}

/* the short answers above the story box: two or three small fields in a row */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 16px;margin-bottom:8px}
.facts .field{margin:0}
.optlbl{font-weight:400;color:var(--label3)}

/* the clip you are writing about, above the story box */
.batchhead{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.batchhead img{width:54px;height:96px;object-fit:cover;border-radius:10px;background:var(--fill);flex:0 0 auto}

/* ---------- your plan ---------- */
/* the "n videos left" pill in the nav: a pill, not a tab */
nav a.pill{font-size:var(--t-xs);font-weight:590;padding:4px 10px;min-height:0;
  border-radius:9999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);margin-left:6px}
nav a.pill:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.bignum{margin:0;font-size:var(--t-3xl);font-weight:600;letter-spacing:-.028em;line-height:1.1}
/* plan cards: one column first, two when there is room */
.plans{display:grid;gap:12px}
.plans .card{margin:0}
.plan.mine{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
@media (min-width:700px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  /* the pill drops to its own line rather than pushing the header wider than the phone */
  nav{flex-wrap:wrap;justify-content:flex-end}
}

/* ---------- UAT fixes, 5 September ---------- */
/* one row of header on a phone: the pill loses its words, Sign out moves to the You page */
nav a{min-height:40px}
nav a.pill{min-height:40px;display:inline-flex;align-items:center}
.seg label{min-height:40px}
.linky{min-height:40px}
.hometitle{min-width:0}
.btn{white-space:nowrap}
.flow li.fail .mark{background:var(--red);color:#fff}
.flow li.fail .mark::after{content:"!";font-weight:700}
.flow li.fail::before{background:var(--red)}
.row{flex-wrap:wrap}
@media (max-width:640px){
  nav{gap:2px}
  nav a{padding:7px 8px;font-size:12.5px}
  nav a .pw{display:none}
  nav a.signout{display:none}
  header{padding:10px 12px}
}
@media (max-width:640px){
  .row audio{flex:1 1 100%;max-width:none;order:9}
}

/* ---------- compact pass, 5 September ----------
   "It takes too big space." Same faces, same colours, same components; every gap,
   pad and title is pulled in so a phone screen shows a whole step at once. */
:root{--t-lg:15.5px;--t-xl:19px;--t-2xl:22px;--t-3xl:27px;--t-hero:34px}
header{padding:9px 20px}
main{padding:22px 22px 60px}
h1{margin:0 0 5px}
h2{margin:20px 0 9px}
.lede{margin:0 0 16px;line-height:1.45}
.hint{margin:4px 0 0;line-height:1.4}
.steps{margin:0 0 14px}
.card{padding:15px 16px;margin-bottom:10px;border-radius:14px}
.card.flush{padding:2px 16px}
.notice{padding:12px 15px;margin-bottom:10px;border-radius:13px}
.empty{padding:34px 20px;border-radius:14px}
.field{margin-bottom:13px}
label{margin:0 0 5px}
textarea{min-height:104px;line-height:1.5}
.choices{gap:7px}
.choice{padding:9px 12px;border-radius:11px}
.choice em{line-height:1.35}
.btn.lg{padding:11px 20px;font-size:var(--t-md)}
.actions{margin-top:14px;gap:12px}
.row{padding:9px 0;gap:12px}
.row .thumb{width:36px;height:36px;border-radius:8px}
.scene{grid-template-columns:118px 1fr;gap:14px;padding:12px 0}
.phone{width:118px;height:210px;border-radius:13px}
.capline .capcard{font-size:10.1px}
.capcard{font-size:16.5px}
.capstrip{padding:9px 12px;gap:5px;border-radius:10px}
.capprev{margin-top:7px}
.scene textarea{min-height:56px}
.momentbar{margin-top:6px;gap:8px 12px}
.storytext{font-size:var(--t-md);line-height:1.5}
.story{padding:12px 16px}
.flow li{padding:6px 0;min-height:36px}
.flow li::before{top:28px;bottom:-6px}
.makebar{padding:9px 14px;border-radius:14px}
.facts{gap:10px 12px}
.batchhead{margin:0 0 12px}
.batchhead img{width:44px;height:78px}
.namerow{margin-bottom:7px}
.plans{gap:8px}
.plan{padding:12px}
@media (max-width:640px){
  main{padding:14px 14px 52px}
  header{padding:8px 12px}
  .card{padding:13px 14px}
  .scene{grid-template-columns:92px 1fr;gap:10px}
  .phone{width:92px;height:164px;border-radius:11px}
  .capline .capcard{font-size:7.9px}
  .capcard{font-size:15px}
  .makebar{padding:8px 12px}
}
/* a video row is one line: picture, title, state, and the touch up button at the end */
.vrow{padding:0;gap:0;flex-wrap:nowrap}
.rowlink{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:9px 0;
  text-decoration:none;color:var(--label)}
.rowact{margin:0 0 0 10px;flex:0 0 auto}
.rowact .btn{padding:6px 11px;font-size:var(--t-sm)}
/* choice cards sit two abreast when there is room */
@media (min-width:700px){
  .choices{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* ---------- fits a 14 inch laptop ----------
   Above 980px wide the step pages, the review page, the job page and the video list
   use two columns, so a whole step is on screen without scrolling. */
@media (min-width:980px){
  main.narrow{max-width:1080px}
  main.home{max-width:1180px}
  main.review{max-width:1240px}
  form.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  form.twocol > .actions{grid-column:1/-1}
  form.twocol.story > .card:first-of-type{grid-row:1/span 2}
  main.home .card.flush{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;padding:2px 20px}
  main.home .vrow:nth-last-child(2){border-bottom:0}
  main.job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}
  main.job > .reveal:first-child, main.job > #sub{grid-column:1/-1}
  main.job > #stepscard{grid-column:1;grid-row:3/span 2}
  main.job > #result{grid-column:2}
  main.job > #latestcard{grid-column:2}
  main.review form#rf{display:block}
  .scenebody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;align-items:start}
  .scenebody > .meta, .scenebody > .momentbar, .scenebody > .stkedit, .scenebody > .capedit{grid-column:1/-1}
  .scenebody > .say{grid-column:1;margin:0}
  .scenebody > .capprev{grid-column:2;margin-top:0}
  .capprev .lead{margin-bottom:4px}
}
@media (min-width:980px){
  form.twocol .choices{grid-template-columns:repeat(2,1fr)}
  form.twocol .card:has(input[name=music]){grid-column:1/-1}
  form.twocol .card:has(input[name=music]) .choices{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:980px){
  /* flowing columns instead of aligned rows: no holes beside a short card */
  form.twocol{display:block;columns:2;column-gap:14px}
  form.twocol > .card{break-inside:avoid;page-break-inside:avoid;margin-bottom:12px}
  form.twocol > .actions,form.twocol .card:has(input[name=music]){column-span:all}
  form.twocol.story > .card:first-of-type{grid-row:auto}
}
@media (min-width:980px){
  main{padding-bottom:28px}
  .card{padding:12px 16px}
  h1{margin:0 0 4px}
  .lede{margin:0 0 12px}
  .steps{margin:0 0 10px}
  .actions{margin-top:8px}
  .batchhead{margin:0 0 8px}
  .batchhead img{width:40px;height:70px}
  form.twocol.story .card:last-of-type .field{margin-bottom:0}
}
@media (min-width:980px){
  /* review: smaller phone preview so three moments and the bar fit one screen */
  .scene{grid-template-columns:96px 1fr;gap:12px;padding:8px 0}
  .phone{width:96px;height:171px;border-radius:11px}
  .capline .capcard{font-size:8.2px}
  .capcard{font-size:14.5px}
  .capstrip{padding:7px 10px;gap:4px}
  .scene textarea{min-height:50px}
  /* job: the finished video never taller than the steps beside it */
  #result video{max-height:400px;width:auto;max-width:100%;display:block;margin:0 auto}
  /* account: plans three abreast */
  .plans{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:980px){
  /* the buttons sit under the line, the captions run down the right: one moment, one row */
  .scenebody > .momentbar{grid-column:1;margin-top:4px}
  .scenebody > .capprev{grid-row:2/span 2}
  .scenebody > .stkedit, .scenebody > .capedit{grid-column:1}
}
@media (min-width:980px){
  .scenebody > .momentbar{grid-column:1/-1}
  .scenebody > .capprev{grid-row:auto}
  .phone{width:86px;height:153px;border-radius:10px}
  .capline .capcard{font-size:7.4px}
  main.review .lede{max-width:none}
}
@media (max-width:640px){
  /* on a phone a row with a button drops its pill: the words under the title
     already say Ready or Needs a look, and the title needs the room */
  .vrow:has(.rowact) .pill{display:none}
  .rowact .btn{padding:6px 10px}
}

/* ---------- app scale, 5 September ----------
   The scale Notion, Linear and Canva run at: 13.5px body, 12px secondary, 32px
   inputs and buttons, 8 to 10px corners, hairline borders instead of shadows, and a
   sidebar on a laptop. Same components, same words; the page stops shouting. */
:root{--t-xs:11px;--t-sm:12px;--t-md:13.5px;--t-lg:14.5px;--t-xl:16px;--t-2xl:19px;--t-3xl:21px;--t-hero:30px}
body{line-height:1.45}
main{padding:20px 28px 40px}
h1{font-size:var(--t-3xl);margin:0 0 2px;letter-spacing:-.02em}
h2{font-size:var(--t-xl);margin:16px 0 8px}
.lede{font-size:var(--t-md);margin:0 0 12px;line-height:1.45}
.hint{font-size:var(--t-sm);margin:3px 0 0;line-height:1.4}
.meta{font-size:10.5px;letter-spacing:.05em}
.steps{margin:0 0 12px;gap:7px}
.steps s{font-size:var(--t-sm)}
.steps s::before{width:18px;height:18px;font-size:10px}
.steps i{width:14px}
.card{padding:12px 14px;margin-bottom:8px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card.flush{padding:0 14px}
.notice{padding:10px 12px;margin-bottom:8px;border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.empty{padding:28px 16px;border-radius:10px}
.field{margin-bottom:10px}
label{font-size:var(--t-sm);font-weight:600;margin:0 0 4px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],
textarea,select{padding:7px 10px;font-size:var(--t-md);border-radius:8px;border-color:rgba(60,60,67,.2)}
textarea{min-height:80px;line-height:1.45}
.scene textarea{min-height:44px}
.btn{min-height:32px;padding:6px 12px;font-size:var(--t-md);border-radius:8px;box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.btn.g{box-shadow:none}
.btn.lg{min-height:36px;padding:8px 16px;font-size:var(--t-md)}
.actions{margin-top:10px;gap:10px}
.choices{gap:6px}
.choice{padding:8px 10px;border-radius:8px}
.choice strong{font-size:var(--t-md)}
.choice em{font-size:var(--t-sm);margin-top:1px}
.seg{border-radius:8px;padding:2px}
.seg label{min-height:30px;font-size:var(--t-sm)}
.pill{font-size:var(--t-xs);padding:2px 8px}
.row{padding:7px 0;gap:10px}
.rowlink{padding:7px 0;gap:10px}
.row .thumb{width:30px;height:30px;border-radius:6px}
.row .t{font-size:var(--t-md)}
.rowact .btn{min-height:28px;padding:4px 9px;font-size:var(--t-sm)}
.opt{font-size:10.5px;padding:2px 7px}
.linky{font-size:var(--t-sm);min-height:32px;padding:6px 0}
.momentbar{gap:6px 10px;margin-top:4px}
.momentbar .btn{min-height:28px}
.capstrip{padding:7px 10px;gap:4px;border-radius:8px}
.capcard{font-size:14px}
.phone{width:84px;height:150px;border-radius:9px}
.capline .capcard{font-size:7.2px}
.scene{grid-template-columns:84px 1fr;gap:10px;padding:8px 0}
.mtime{font-size:10.5px}
.flow li{padding:3px 0;min-height:32px;gap:10px}
.flow li::before{left:11px;top:26px;bottom:-3px}
.flow .mark{width:22px;height:22px;font-size:11px}
.flow .lbl{font-size:var(--t-md)}
.flow .tm{font-size:10.5px}
.latest{font-size:var(--t-md)}
.makebar{padding:8px 12px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.08)}
.saved{font-size:var(--t-sm)}
.batchhead img{width:36px;height:64px;border-radius:7px}
.storytext{font-size:var(--t-md)}
.drop{padding:26px 16px;border-radius:10px}
.plan{padding:10px 12px;border-radius:9px}
.plan h4{font-size:var(--t-md)}
.namerow .nm{font-size:var(--t-md);width:130px}
.stat b,.bignum{font-size:var(--t-2xl)}
header{padding:6px 16px;gap:12px}
.brand{font-size:var(--t-md)}
.mark{width:18px;height:18px;border-radius:5px}
nav a{padding:6px 9px;min-height:32px;font-size:var(--t-sm);border-radius:6px}
nav a.pill{min-height:26px}

/* the sidebar: a laptop gets the app frame every cloud tool has */
@media (min-width:980px){
  body{display:grid;grid-template-columns:196px minmax(0,1fr);align-items:start}
  header{position:sticky;top:0;height:100vh;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:2px;padding:14px 10px;border-bottom:0;
    border-right:1px solid var(--sep);background:rgba(255,255,255,.55);
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
  .brand{padding:6px 10px;margin-bottom:12px}
  nav{flex-direction:column;align-items:stretch;gap:1px;flex:1}
  nav a{padding:7px 10px;border-radius:7px;font-size:var(--t-md);min-height:34px}
  nav a.pill{margin-top:auto;justify-content:flex-start;padding:7px 10px;min-height:34px;
    background:var(--fill);color:var(--label)}
  nav a.signout{color:var(--label3)}
  main,main.narrow,main.home,main.review,main.job{max-width:1160px;margin:0;padding:22px 30px 40px}
  .scene{grid-template-columns:84px 1fr}
}
@media (max-width:640px){
  main{padding:12px 12px 44px}
  header{padding:5px 10px}
  nav a{padding:6px 7px;font-size:var(--t-sm)}
  .card{padding:11px 12px}
  h1{font-size:20px}
}

/* ---------- caption fonts and uploads ---------- */
.caption-studio{--caption-color:#fff;--caption-accent:#FFE16B;--caption-outline-color:#111}
.caption-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:154px;
  margin:12px 0;padding:18px;border-radius:12px;overflow:hidden;background:var(--caption-frame,#26233f) center 42%/cover no-repeat;
  box-shadow:inset 0 0 0 999px rgba(7,9,20,.24)}
.caption-demo{max-width:min(92%,680px);font-family:var(--capface,"CapFace"),sans-serif;font-size:clamp(19px,2.2vw,30px);
  font-weight:850;line-height:1.08;text-align:center;color:var(--caption-color);text-shadow:-2px -2px 0 var(--caption-outline-color),2px -2px 0 var(--caption-outline-color),-2px 2px 0 var(--caption-outline-color),2px 2px 0 var(--caption-outline-color),0 3px 7px rgba(0,0,0,.55)}
.caption-active{color:var(--caption-accent,#FFE16B)}
#rf[data-caption-outline="none"] .caption-demo{text-shadow:0 3px 8px rgba(0,0,0,.7)}
#rf[data-caption-outline="thin"] .caption-demo{text-shadow:-1px -1px 0 var(--caption-outline-color),1px -1px 0 var(--caption-outline-color),-1px 1px 0 var(--caption-outline-color),1px 1px 0 var(--caption-outline-color),0 3px 7px rgba(0,0,0,.55)}
#rf[data-caption-background="soft"] .caption-demo,#rf[data-caption-background="solid"] .caption-demo{padding:.32em .58em;border-radius:.36em;background:rgba(11,16,32,.66)}
#rf[data-caption-background="solid"] .caption-demo{background:rgba(11,16,32,.92)}
#rf[data-caption-position="top"] .caption-stage{align-items:flex-start}
#rf[data-caption-position="middle"] .caption-stage{align-items:center}
.caption-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0 0 12px;padding:0;border:0}
.caption-presets legend,.caption-label{margin:0 0 7px;font-size:var(--t-sm);font-weight:650;color:var(--label)}
.caption-preset{position:relative;display:block;margin:0;cursor:pointer}
.caption-preset input{position:absolute;opacity:0;pointer-events:none}
.caption-preset>span{display:block;height:100%;min-height:67px;padding:8px 9px;border:1px solid var(--sep);border-radius:10px;background:var(--surface)}
.caption-preset strong,.caption-preset small{display:block}.caption-preset strong{font-size:var(--t-sm);line-height:1.2}
.caption-preset small{margin-top:3px;color:var(--label3);font-size:11px;line-height:1.28}
.caption-preset:has(input:checked)>span{border-color:var(--blue);background:color-mix(in srgb,var(--accent) 5.5%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 11%,transparent)}
.caption-safe-note{display:inline-flex;margin:-1px 0 8px;padding:5px 8px;border-radius:7px;background:rgba(97,81,163,.09);color:var(--success);font-size:var(--t-xs);font-weight:580}
.caption-advanced{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--sep)}
.caption-advanced label{margin:0;font-size:var(--t-xs);color:var(--label2)}
.caption-advanced select,.caption-advanced input[type="color"]{width:100%;height:38px;margin-top:4px}
.caption-advanced input[type="color"]{padding:3px 5px;cursor:pointer}
.fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin-bottom:6px}
.more-fonts-toggle{margin:0 0 7px}.more-fonts{margin:0 0 7px}
.fontcard{position:relative;display:block;border-radius:8px;
  background:linear-gradient(rgba(20,22,30,.34),rgba(20,22,30,.34)),
  var(--fontbg,linear-gradient(180deg,#9aa3b5,#66708a)) center/cover no-repeat;
  padding:9px 6px;text-align:center;cursor:pointer;border:2px solid transparent;min-height:40px}
.fontcard input{position:absolute;opacity:0;pointer-events:none}
.fontcard .fs{display:block;color:#fff;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000}
.fontcard:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.uprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.capcard{font-family:var(--capface,"CapFace"),"Arial Black","Arial Bold",Arial,sans-serif}
@media (max-width:800px){.caption-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.caption-advanced{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.caption-stage{min-height:132px}.caption-presets,.caption-advanced{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.capcard,.caption-demo{animation:none!important}}
.font-upload-admin{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.font-upload-admin h2{margin:0 0 2px}
.font-upload-admin form{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.font-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.font-admin-card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,16,60,.04),0 8px 24px -18px rgba(20,16,60,.25)}
.font-admin-card.off{opacity:.62}
.font-admin-preview{display:flex;align-items:center;justify-content:center;min-height:88px;padding:16px;
  color:#fff;background:linear-gradient(135deg,#17134b,#574fd3);font-size:25px;text-align:center;
  text-shadow:0 2px 9px rgba(0,0,0,.28)}
.font-admin-copy{padding:12px 14px 8px}
.font-admin-copy>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.font-admin-copy strong{font-size:var(--t-md)}
.font-admin-copy>span{display:block;margin-top:3px;color:var(--label3);font-size:var(--t-sm)}
.font-admin-actions{display:flex;gap:7px;flex-wrap:wrap;padding:6px 14px 14px}
@media (max-width:640px){.font-upload-admin{align-items:stretch;flex-direction:column}.font-upload-admin form{justify-content:flex-start}}

/* ---------- redo a photo shot ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.shot{position:relative;display:flex;flex-direction:column;gap:6px;border:2px solid var(--sep);border-radius:10px;padding:6px;cursor:pointer;background:var(--surface)}
.shot input{position:absolute;top:10px;left:10px;width:20px;height:20px;margin:0;accent-color:var(--blue);z-index:1}
.shot img,.shot .noframe{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:#111;display:block;max-height:200px}
.shot .cap{font-size:var(--t-xs);color:var(--label2);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shot .cap b{color:var(--label);font-weight:600}
.shot:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ---------- finished video page: video, then what you can change, then how it was made ---------- */
.tabs{display:flex;gap:4px;background:var(--fill);border-radius:9px;padding:3px;margin-bottom:14px;width:max-content;max-width:100%}
.tabs button{border:0;background:transparent;font:inherit;font-size:var(--t-sm);font-weight:560;color:var(--label2);padding:6px 14px;border-radius:7px;cursor:pointer}
.tabs button.on{background:var(--surface);color:var(--label);box-shadow:0 1px 2px rgba(0,0,0,.08)}
#stepscard.folded #steps,#stepscard.folded #trackbar{display:none}
#stepscard.folded{padding-bottom:12px}
#stepscard.folded > div:first-child{margin-bottom:0}
body.done #latestcard .latest{display:none}
.shot{display:flex;flex-direction:column;gap:6px;border:2px solid var(--sep);border-radius:10px;padding:6px;background:var(--surface);cursor:default}
.shot .tick{position:absolute;top:10px;left:10px;z-index:2;cursor:pointer}
.shot .tick input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.shot .tick span{display:block;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.92);border:1.5px solid rgba(0,0,0,.25);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.shot .tick input:checked + span{background:var(--blue);border-color:var(--blue)}
.shot .tick input:checked + span::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.shot .media{position:relative;cursor:pointer;border-radius:6px;overflow:hidden;background:var(--fill)}
.shot .media video,.shot .media img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block;background:var(--fill)}
.shot .media .play{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(0,0,0,.45);pointer-events:none}
.shot .media .play::after{content:"";position:absolute;left:15px;top:11px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent #fff}
.shot .media.playing .play{display:none}
.shot:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
@media (min-width:980px){
  body.done main.job > #result{grid-column:1;grid-row:3}
  body.done main.job > #tune{grid-column:2;grid-row:3/span 3}
  body.done main.job > #stepscard{grid-column:1;grid-row:4}
  body.done main.job > #latestcard{grid-column:1;grid-row:5}
  main.job > #tune{grid-column:2}
}
/* the tune card is tall; the small cards under the video must not be spread down its height */
@media (min-width:980px){
  body.done main.job{grid-template-rows:auto auto auto auto auto 1fr}
  body.done main.job > #tune{grid-row:3/span 4}
  body.done main.job > #stepscard{grid-row:4;margin-top:0}
  body.done main.job > #latestcard{grid-row:5}
}

/* ---------- the video library ---------- */
.libhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.toolbar .seg{display:flex;gap:2px;background:var(--fill);border-radius:9px;padding:3px;width:max-content;max-width:100%;overflow-x:auto}
.toolbar .seg a{padding:5px 11px;border-radius:7px;font-size:var(--t-sm);color:var(--label2);text-decoration:none;white-space:nowrap;font-weight:500}
.toolbar .seg a b{font-weight:500;color:var(--label3);margin-left:5px}
.toolbar .seg a.on{background:var(--surface);color:var(--label);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.toolbar .seg a.on b{color:var(--label2)}
.toolbar .search{flex:1;min-width:150px;max-width:300px;height:32px;margin:0}
.sortlab{font-size:var(--t-sm);color:var(--label2);display:flex;align-items:center;gap:6px;margin-left:auto}
.sortlab select{height:32px;width:auto;margin:0;padding:0 28px 0 10px}
.lib{padding:0 16px}
.libhd,.librow{display:grid;grid-template-columns:minmax(0,1fr) 124px 118px 60px auto;gap:12px;align-items:center}
.libhd{padding:9px 0 7px;border-bottom:1px solid var(--sep);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--label3)}
.librow{padding:8px 0;border-bottom:1px solid var(--sep)}
.lib > .librow:last-child,.vers > .librow:last-child{border-bottom:0}
.librow .main{display:block;min-width:0;color:inherit}
.librow .row-open{display:flex;gap:12px;align-items:center;min-width:0;text-decoration:none;color:inherit}
.librow .thumb{width:38px;height:50px;border-radius:7px;object-fit:cover;flex:0 0 auto;background:var(--fill);display:block}
.librow .thumb.empty{background:linear-gradient(180deg,var(--fill),rgba(60,60,67,.12))}
.librow .t{display:block;font-weight:560;font-size:var(--t-md);color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.librow .n{display:block;font-size:var(--t-sm);color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.librow .inline-meta{display:none}
.librow .when,.librow .len{font-size:var(--t-sm);color:var(--label2);font-variant-numeric:tabular-nums;white-space:nowrap}
.librow .acts{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.btn.sm{padding:5px 10px;font-size:var(--t-sm);min-height:28px}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--fill);color:var(--label2);font-weight:700;font-size:16px;line-height:1}
.menu summary::-webkit-details-marker{display:none}
.menu .pop{position:absolute;right:0;top:34px;z-index:20;background:var(--surface);border:1px solid var(--sep);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:160px;display:flex;flex-direction:column}
.menu .pop button,.menu .pop a{text-align:left;padding:7px 10px;border-radius:7px;background:none;border:0;font:inherit;font-size:var(--t-sm);color:var(--label);cursor:pointer;width:100%;text-decoration:none;display:block}
.menu .pop button:hover,.menu .pop a:hover{background:var(--fill)}
.menu .pop .red{color:var(--red)}
.rename{grid-column:1/-1;display:flex;gap:8px;align-items:center;padding:4px 0 2px}
.rename input{flex:1;height:32px;margin:0}
.versbar{padding:0 0 8px 50px;margin-top:-4px}
.verslink{display:block;margin:2px 0 0 50px;font-size:var(--t-xs);color:var(--blue);background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.vers{padding-left:50px;border-bottom:1px solid var(--sep)}
.vers .librow{padding:6px 0}
.librow.sub .thumb{width:28px;height:37px}
.librow.sub .t{font-weight:500;font-size:var(--t-sm)}
@media (max-width:979px){
  .libhd{display:none}
  .librow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main pill" "acts acts";row-gap:6px}
  .librow .main{grid-area:main}
  .librow .pillc{grid-area:pill}
  .librow .when,.librow .len{display:none}
  .librow .inline-meta{display:inline}
  .librow .acts{grid-area:acts;justify-content:flex-end}
  .vers,.versbar{padding-left:0}
  .toolbar .search{max-width:none;order:3;flex-basis:100%}
  .sortlab{margin-left:0}
}
/* the library is one list, never split into two columns like the old Recent list */
@media (min-width:980px){
  main.home .card.flush.lib{display:block;grid-template-columns:none;padding:0 18px}
}
.librow .main:hover .t{color:var(--blue)}
.btn.sm:active,.menu summary:active{transform:scale(.97)}
.librow .n .verslink{margin-left:8px}
.vers{background:var(--fill2,rgba(120,120,128,.06));border-radius:10px;padding:2px 12px;margin:0 0 8px;border-bottom:0}
.vers .librow{border-bottom:1px solid var(--sep)}
.vers .librow:last-child{border-bottom:0}
.delbar{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;margin:2px 0 4px;border-radius:9px;background:rgba(255,59,48,.08);font-size:var(--t-sm);color:var(--label)}
.delbar span{flex:1;min-width:200px}
.btn.danger{background:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(.95)}

/* ==========================================================================
   Studio look. One bold element: the deep indigo rail. Everything else is a calm
   light workspace where the video frames are the colour. Accent is indigo, used for
   the primary action and progress only; status colours stay semantic.
   ========================================================================== */
:root{
  --blue:var(--accent); --blue-deep:var(--accent); --rail:var(--label); --rail2:var(--label); --railtext:rgba(255,255,255,.72);
  --bg:#EEF0F6; --surface:#FFFFFF; --hair:rgba(20,16,60,.07); --sep:rgba(20,16,60,.11);
}
body{background:var(--bg)}
.btn{background:var(--blue)}
.btn:hover{background:var(--blue-deep)}
.btn.g{background:var(--fill);color:var(--label)}
.btn.g:hover{background:rgba(120,120,128,.2)}
a{color:var(--blue)}
.pill.queued,.pill.draft{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.card{border:1px solid var(--hair);box-shadow:0 1px 2px rgba(20,16,60,.04),0 8px 24px -18px rgba(20,16,60,.25)}
/* the rail */
header.rail{background:linear-gradient(180deg,var(--rail),var(--rail2));color:#fff;border:0}
header.rail .brand{color:#fff;font-size:var(--t-lg);font-weight:650;letter-spacing:-.01em}
header.rail .brand .mark{background:linear-gradient(135deg,#8B5CF6,#EC4899 60%,#F59E0B);box-shadow:0 2px 8px rgba(0,0,0,.25)}
header.rail .btn.new{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--rail);font-weight:600;padding:9px 14px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18);margin:14px 0 8px;justify-content:center}
header.rail .btn.new:hover{background:#F4F2FF}
header.rail nav a{color:var(--railtext);display:flex;align-items:center;gap:10px;font-size:var(--t-md);font-weight:500;padding:8px 10px;border-radius:9px}
header.rail nav a svg{width:18px;height:18px;flex:0 0 auto;opacity:.9}
header.rail nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
header.rail nav a.on{color:#fff;background:rgba(255,255,255,.14);font-weight:600}
header.rail nav a.pill{background:rgba(255,255,255,.12);color:#fff;font-weight:600;padding:8px 12px;border-radius:999px;display:inline-flex;gap:6px}
header.rail nav a.pill:hover{background:rgba(255,255,255,.2)}
header.rail nav a.signout{color:var(--railtext);font-size:var(--t-sm);padding:6px 10px}
@media (min-width:980px){
  header.rail{width:220px;padding:22px 16px}
  header.rail nav{gap:2px;flex-direction:column;align-items:stretch;flex:1}
  header.rail nav a.pill{margin-top:auto;justify-content:center}
  body{grid-template-columns:220px minmax(0,1fr)}
  main,main.narrow,main.home,main.review,main.job{padding:26px 34px 48px}
}
@media (max-width:979px){
  header.rail{padding:10px 14px}
  header.rail .btn.new{margin:0;padding:7px 11px;font-size:var(--t-sm)}
  header.rail nav a{padding:6px 8px;font-size:var(--t-sm)}
  header.rail nav a svg{display:none}
  header.rail nav a.signout{display:none}
}
/* page titles carry more weight; small labels are sentence case, not shouted */
h1{font-size:var(--t-3xl);font-weight:700;letter-spacing:-.02em}
h2{font-weight:650;letter-spacing:-.01em}
.meta{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:var(--t-xs);color:var(--label3);font-weight:500}
.libhd{text-transform:none;letter-spacing:0;font-weight:500}
#clock{font-family:var(--sans)!important;font-variant-numeric:tabular-nums}
/* the storyboard that keeps a rendering page alive */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.moment{margin:0;min-width:0}
.moment img,.moment .noframe{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;display:block;background:var(--fill)}
.moment figcaption{font-size:var(--t-xs);color:var(--label2);margin-top:5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.moment figcaption b{color:var(--label);font-weight:600;margin-right:3px}
@media (min-width:980px){
  main.job > #boardcard{grid-column:2}
}
/* the rail on a phone: one row, brand and nav, the page keeps its own New video */
@media (max-width:979px){
  header.rail{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:nowrap}
  header.rail .brand{flex:0 0 auto}
  header.rail .btn.new{display:none}
  header.rail nav{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;justify-content:flex-end}
  header.rail nav::-webkit-scrollbar{display:none}
  header.rail nav a{white-space:nowrap;padding:6px 8px}
  header.rail nav a.pill{padding:5px 10px}
}
/* the voice library */
.vlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vcard{position:relative;display:flex;flex-direction:column;gap:3px;border:1px solid rgba(60,60,67,.18);border-radius:11px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.vcard input{position:absolute;opacity:0;pointer-events:none}
.vcard .vname{font-weight:600;font-size:var(--t-md);color:var(--label)}
.vcard .vdesc{font-size:var(--t-sm);color:var(--label2);line-height:1.3}
.vcard .vtags{font-size:var(--t-xs);color:var(--label3)}
.vcard .linky{align-self:flex-start;font-size:var(--t-xs);margin-top:4px}
.voice-preview{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;margin-top:10px;padding:8px 13px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font:inherit;
  font-size:var(--t-sm);font-weight:650;line-height:1;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .1s ease}
.voice-preview:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 57.99999999999999%,transparent)}
.voice-preview:active{transform:scale(.98)}
.voice-preview:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28.000000000000004%,transparent);outline-offset:2px}
.voice-preview.playing{background:var(--label);border-color:var(--label);color:#fff}
.voice-preview.failed{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.3);color:#b42318}
.voice-preview:disabled{cursor:wait;opacity:.72}
.preview-spinner{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite}
.vcard .voice-preview{margin-top:8px;font-size:var(--t-xs)}
.vcard:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.vpeople{margin-bottom:4px}

/* Delivery is a small sound desk: expressive choices in plain language, with one
   obvious place to hear the result before spending a render. */
.delivery-panel{overflow:hidden}
.delivery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.delivery-head h2{margin:0 0 3px}
.delivery-head .hint{margin:0}
.identity-lock{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 9px;
  border-radius:999px;background:rgba(97,81,163,.10);color:var(--success);font-size:var(--t-xs);font-weight:600}
.identity-lock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.delivery-grid{display:grid;grid-template-columns:1.35fr .8fr 1.35fr;gap:14px}
.delivery-panel fieldset{min-width:0;margin:0;padding:0;border:0}
.delivery-panel legend{margin:0 0 7px;padding:0;font-size:var(--t-sm);font-weight:650;color:var(--label)}
.delivery-options{display:grid;gap:6px}
.delivery-options label{position:relative;display:block;margin:0;cursor:pointer}
.delivery-options input{position:absolute;opacity:0;pointer-events:none}
.delivery-options label>span{display:block;min-height:52px;padding:8px 10px;border:1px solid var(--sep);
  border-radius:10px;background:var(--surface);transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.delivery-options strong,.delivery-options small{display:block}
.delivery-options strong{font-size:var(--t-sm);font-weight:620;color:var(--label)}
.delivery-options small{font-size:var(--t-xs);line-height:1.3;color:var(--label3)}
.delivery-options label:hover>span{border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.delivery-options label:has(input:checked)>span{border-color:var(--blue);background:color-mix(in srgb,var(--accent) 6%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent)}
.pace-control{padding:0 4px!important}
.pace-readout{display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--label3);font-size:var(--t-xs)}
.pace-readout output{font-size:var(--t-xl);font-weight:680;color:var(--label);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pace-control input[type=range]{width:100%;height:28px;margin:8px 0 5px;padding:0;accent-color:var(--blue);cursor:pointer}
.pace-control .hint{margin:0}
.delivery-preview{display:flex;align-items:center;gap:12px;margin:16px -16px -12px;padding:13px 16px;
  border-top:1px solid var(--sep);background:color-mix(in srgb,var(--accent) 4.5%,transparent)}
.delivery-preview-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.delivery-preview-copy strong{font-size:var(--t-sm);font-weight:650}
.delivery-preview-copy>.preview-note{font-size:var(--t-xs);line-height:1.4;color:var(--label3)}
.delivery-preview-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:3px}
.delivery-preview-actions .linky{min-height:28px;padding:2px 0;font-size:var(--t-xs)}
.delivery-preview-btn{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.delivery-preview-btn svg{width:15px;height:15px;fill:currentColor}
.delivery-preview-btn.playing{background:var(--label)}
.stop-square{width:11px;height:11px;border-radius:2px;background:currentColor}
.voice-wave{display:flex;align-items:center;justify-content:center;gap:2px;width:36px;height:34px;flex:0 0 auto;color:var(--indigo)}
.voice-wave i{display:block;width:3px;height:9px;border-radius:3px;background:currentColor}
.voice-wave i:nth-child(2),.voice-wave i:nth-child(6){height:16px}.voice-wave i:nth-child(3),.voice-wave i:nth-child(5){height:23px}.voice-wave i:nth-child(4){height:29px}
.delivery-preview:has(.playing) .voice-wave i{animation:voicepulse .75s ease-in-out infinite alternate}
.delivery-preview:has(.playing) .voice-wave i:nth-child(2){animation-delay:-.15s}.delivery-preview:has(.playing) .voice-wave i:nth-child(4){animation-delay:-.35s}.delivery-preview:has(.playing) .voice-wave i:nth-child(6){animation-delay:-.25s}
@keyframes voicepulse{to{transform:scaleY(.45);opacity:.58}}
@media (min-width:980px){form.twocol>.delivery-panel{column-span:all}}
@media (min-width:980px){
  main.review .delivery-grid{grid-template-columns:1fr}
  main.review .delivery-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  main.review .delivery-options label>span{height:100%}
  main.review .delivery-preview{flex-wrap:wrap}
  main.review .delivery-preview-btn{width:100%;justify-content:center}
}
@media (max-width:760px){
  .delivery-head{display:block}.identity-lock{margin-top:10px}
  .delivery-grid{grid-template-columns:1fr}.pause-options{grid-template-columns:repeat(3,1fr)}
  .delivery-preview{align-items:flex-start;flex-wrap:wrap}.delivery-preview-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.delivery-preview:has(.playing) .voice-wave i{animation:none}}
#result:empty{display:none}
.download-picks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:620px){
  .download-actions{align-items:stretch;flex-direction:column}
  .download-picks{display:grid;grid-template-columns:1fr}
  .download-picks .btn,.download-actions>#sharebtn{justify-content:center;text-align:center;width:100%}
  .download-actions>.linky{margin-left:0!important;text-align:center}
}
.revoice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.revoice label{margin:0;font-weight:500}
.revoice select{width:auto;max-width:320px;margin:0;height:34px}
.revoice .hint{margin:0;flex-basis:100%}
.revoice{display:block}
.revoice .vhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.revoice .vhead .hint{margin:0;flex:1;min-width:160px}
.vsec h3{font-size:var(--t-sm);font-weight:600;color:var(--label2);margin:14px 0 6px}
/* the voice library admin page */
.vrow2{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--sep)}
.vrow2:last-child{border-bottom:0}
.vrow2.off{opacity:.55}
.vrename{display:flex;gap:6px;margin:0;align-items:center}
.vrename input{height:30px;margin:0;font-size:var(--t-sm)}
.vrename input[name=name]{width:150px;flex:0 0 auto}
.vrename input[name=desc]{flex:1;min-width:120px}
.vacts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.voice-discover h2{margin:0 0 3px}
.voice-discover .hint{margin:0}
.discover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.discover-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(140px,.6fr) auto;
  align-items:end;gap:10px;margin:18px 0 0}
.discover-filters label{margin:0}
.discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:18px}
.discover-voice{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:13px;
  border:1px solid var(--sep);border-radius:12px;background:var(--surface)}
.discover-voice strong{display:block;color:var(--label)}
.discover-voice span,.discover-voice p{display:block;margin:3px 0 0;color:var(--label3);font-size:var(--t-xs);line-height:1.35}
.discover-voice audio{width:100%;height:34px}
.discover-voice form{margin:0}
.discover-pages{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media (max-width:620px){
  .discover-head{display:block}.discover-head .pill{margin-top:10px}
  .discover-filters{grid-template-columns:1fr}.discover-filters .btn{width:100%}
}
@media (max-width:979px){.vrow2{grid-template-columns:1fr}.vacts{justify-content:flex-start}}

/* ========================================================================== 
   Public homepage. A product story, not a preview of the private studio.
   ========================================================================== */
header.rail .public-nav{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px}
header.rail .public-nav a{color:rgba(255,255,255,.82);padding:9px 13px}
header.rail .public-nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
header.rail .public-nav .public-create{color:var(--rail);background:#fff;font-weight:700;padding:9px 15px}
header.rail .public-nav .public-create:hover{color:var(--rail);background:#F2F0FF}

body.public-landing,body.public-auth{display:block;background:#F5F6FA}
body.public-landing::before,body.public-auth::before{background:radial-gradient(46rem 26rem at 10% 5%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%),radial-gradient(42rem 26rem at 92% 15%,rgba(236,72,153,.07),transparent 64%)}
body.public-landing header.rail,body.public-auth header.rail{position:relative;width:100%;height:auto;min-height:72px;padding:14px max(24px,calc((100vw - 1200px)/2));flex-direction:row;align-items:center;justify-content:space-between;background:var(--rail);border:0}
body.public-landing header.rail .brand,body.public-auth header.rail .brand{margin:0;padding:6px 0}
body.public-landing header.rail nav,body.public-auth header.rail nav{flex:0 0 auto}
body.public-landing main.landing{max-width:1200px;margin:0 auto;padding:72px 28px 52px}
body.public-auth main.narrow{max-width:640px;margin:0 auto;padding:64px 28px 96px}

.landing-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:72px;align-items:center;min-height:570px}
.landing-copy{padding:22px 0}
.landing-kicker{margin:0 0 14px;color:#5147D7;font-size:var(--t-sm);font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.landing-copy h1{font-size:clamp(48px,6.2vw,76px);line-height:.94;letter-spacing:-.055em;max-width:760px;margin:0 0 26px;font-weight:780}
.landing-intro{max-width:630px;margin:0;font-size:clamp(18px,2vw,22px);line-height:1.5;letter-spacing:-.015em;color:var(--label2)}
.landing-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px}
.landing-primary{min-height:50px;padding:13px 21px;border-radius:12px;font-weight:720;text-decoration:none}
.landing-signin{font-weight:650;text-underline-offset:4px}
.landing-private{display:flex;align-items:center;gap:9px;margin:20px 0 0;color:var(--label3);font-size:var(--t-sm)}
.landing-private span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(97,81,163,.14);color:var(--success);font-size:12px;font-weight:800}

.edit-story{position:relative;overflow:hidden;padding:20px;border-radius:24px;background:#191447;color:#fff;box-shadow:0 36px 70px -36px rgba(27,22,80,.72),0 8px 24px rgba(27,22,80,.16)}
.edit-story::after{content:"";position:absolute;width:240px;height:240px;right:-120px;top:-130px;border-radius:50%;background:rgba(236,72,153,.18);filter:blur(4px)}
.edit-story-head{position:relative;z-index:1;display:flex;justify-content:space-between;gap:15px;margin-bottom:14px;font-size:var(--t-xs);font-weight:700;color:rgba(255,255,255,.62)}
.clip-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;height:150px;margin-bottom:9px}
.clip-strip span{display:block;border-radius:12px;background-color:#7A6E82;background-position:center;background-size:cover}
.clip-one{background-image:linear-gradient(160deg,transparent 42%,rgba(20,12,40,.65)),linear-gradient(135deg,#F4A261 0 34%,#aa918b 35% 63%,#273B4A 64%)}
.clip-two{background-image:linear-gradient(180deg,rgba(255,255,255,.04),rgba(15,10,32,.56)),radial-gradient(circle at 52% 39%,#FFE0B2 0 8%,transparent 9%),linear-gradient(155deg,#82B8C9 0 48%,#E9C46A 49% 65%,#75513D 66%)}
.clip-three{background-image:linear-gradient(170deg,transparent 35%,rgba(18,12,38,.68)),radial-gradient(circle at 66% 34%,#F6BD60 0 11%,transparent 12%),linear-gradient(145deg,#577590 0 52%,#705453 53%)}
.story-track{position:relative;background:#fff;color:var(--label);border-radius:15px;padding:5px 16px}
.story-track::before{content:"";position:absolute;left:35px;top:29px;bottom:29px;width:2px;background:#E2E0F6}
.story-step{position:relative;display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;min-height:55px;border-bottom:1px solid #ECEBF3;font-size:var(--t-sm)}
.story-step:last-child{border-bottom:0}
.story-step::before{content:"";position:absolute;left:14px;width:9px;height:9px;border-radius:50%;background:#665CE0;box-shadow:0 0 0 4px #EFEEFF}
.story-step b{padding-left:31px;font-size:var(--t-xs);color:#4C43C7}
.story-step > span{color:var(--label2);line-height:1.35}
.wave{height:22px;display:flex;align-items:center;gap:4px}
.wave i{display:block;width:3px;border-radius:3px;background:#6B61E4;height:8px}
.wave i:nth-child(2),.wave i:nth-child(8){height:13px}.wave i:nth-child(3),.wave i:nth-child(7){height:18px}.wave i:nth-child(4),.wave i:nth-child(6){height:11px}.wave i:nth-child(5){height:21px}
.ready-line strong,.ready-line small{display:block}.ready-line strong{color:var(--success)}.ready-line small{margin-top:2px;color:var(--label3)}

.landing-process{padding:76px 0;border-top:1px solid rgba(27,22,80,.12)}
.process-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px}
.process-heading .landing-kicker{margin-bottom:6px}
.process-heading h2{font-size:clamp(30px,4vw,48px);max-width:650px;margin:0;line-height:1.02;letter-spacing:-.04em}
.landing-process ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:0;border-top:2px solid var(--rail)}
.landing-process li{padding:22px 24px 0 0;min-height:190px}
.landing-process li+li{border-left:1px solid rgba(27,22,80,.12);padding-left:24px}
.landing-process li span{display:block;color:#665CE0;font-family:var(--mono);font-size:var(--t-xs);margin-bottom:28px}
.landing-process li strong{display:block;font-size:var(--t-lg);line-height:1.2;margin-bottom:10px}
.landing-process li p{margin:0;color:var(--label2);font-size:var(--t-sm);line-height:1.55}

.landing-close{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px 46px;border-radius:24px;background:var(--rail);color:#fff}
.landing-close .landing-kicker{color:#B7B2FF;margin-bottom:9px}
.landing-close h2{font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.035em;margin:0;max-width:650px}
.landing-close .landing-primary{flex:0 0 auto;background:#fff;color:var(--rail)}
.landing-close .landing-primary:hover{background:#F2F0FF}
.owner-setup{text-align:center;margin:22px 0 0;font-size:var(--t-sm);color:var(--label3)}

@media (max-width:850px){
  body.public-landing main.landing{padding-top:44px}
  .landing-hero{grid-template-columns:1fr;gap:40px;min-height:0}
  .edit-story{max-width:590px}
  .landing-process ol{grid-template-columns:1fr 1fr}
  .landing-process li:nth-child(3){border-left:0}
  .landing-process li:nth-child(n+3){border-top:1px solid rgba(27,22,80,.12);padding-top:22px}
}
@media (max-width:600px){
  body.public-landing header.rail,body.public-auth header.rail{padding:9px 14px;min-height:58px}
  body.public-landing header.rail .brand,body.public-auth header.rail .brand{font-size:var(--t-md)}
  header.rail .public-nav{overflow:visible}
  header.rail .public-nav a{font-size:var(--t-xs);padding:6px 8px}
  header.rail .public-nav .public-create{padding:7px 10px}
  body.public-landing main.landing{padding:38px 16px 32px}
  body.public-auth main.narrow{padding:38px 16px 64px}
  .landing-copy{padding:0}.landing-copy h1{font-size:43px;margin-bottom:20px}
  .landing-intro{font-size:17px}.landing-actions{align-items:flex-start;flex-direction:column;gap:14px;margin-top:28px}
  .landing-primary{text-align:center;width:100%}.edit-story{padding:12px;border-radius:18px}.clip-strip{height:110px}
  .story-step{grid-template-columns:56px 1fr;font-size:var(--t-xs)}
  .landing-process{padding:58px 0}.process-heading{display:block}.process-heading h2{font-size:34px}
  .landing-process ol{grid-template-columns:1fr}.landing-process li{min-height:0;padding:18px 0 24px!important;border-left:0!important;border-top:1px solid rgba(27,22,80,.12)}
  .landing-process li:first-child{border-top:0}.landing-process li span{margin-bottom:12px}
  .landing-close{display:block;padding:32px 24px;border-radius:18px}.landing-close .landing-primary{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){.public-landing *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Master account desk: dense enough to scan, calm enough to make risky changes. */
main.adminwide{max-width:1420px}
.admin-titleline{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.account-create{position:relative;flex:0 0 auto}.account-create summary{list-style:none;cursor:pointer}.account-create summary::-webkit-details-marker{display:none}
.account-create-form{position:absolute;right:0;top:48px;z-index:12;width:340px;padding:18px;background:#fff;border:1px solid var(--sep);border-radius:14px;box-shadow:0 18px 50px rgba(20,16,60,.2)}
.account-create-form label{margin-bottom:10px}.account-create-form input{margin-top:4px}
.account-shell{display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);min-height:600px;background:#fff;border:1px solid var(--hair);border-radius:18px;overflow:hidden;box-shadow:0 8px 26px -20px rgba(20,16,60,.3)}
.account-list{border-right:1px solid var(--sep);background:#F8F8FC}
.account-list-head{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--sep);font-size:var(--t-xs);font-weight:650;color:var(--label3)}
.account-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;padding:15px 16px;color:var(--label);text-decoration:none;border-bottom:1px solid var(--sep)}
.account-row:hover{background:#fff}.account-row.selected{background:#fff;box-shadow:inset 3px 0 0 var(--blue)}
.account-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--rail);color:#fff;font-weight:750}
.account-avatar.large{width:46px;height:46px}
.account-who strong,.account-who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-who small{font-size:var(--t-xs);color:var(--label3)}
.account-tags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.account-tags i{font-style:normal;font-size:10px;line-height:1;padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)}.account-tags i.active{background:rgba(97,81,163,.12);color:var(--success)}.account-tags i.paused{background:rgba(255,59,48,.11);color:#B3261E}
.account-glance{text-align:right}.account-glance b,.account-glance small{display:block}.account-glance b{font-size:var(--t-lg)}.account-glance small{font-size:10px;color:var(--label3)}
.account-detail{padding:26px;min-width:0}.account-detail-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--sep)}
.account-detail-head h2{margin:0 0 2px}.account-detail-head p{margin:0;color:var(--label3);font-size:var(--t-sm)}
.account-controls{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--sep)}
.control-panel{padding:22px 22px 22px 0;margin:0;min-width:0}.control-panel:nth-child(even){padding-left:22px;border-left:1px solid var(--sep)}.control-panel:nth-child(n+3){border-top:1px solid var(--sep)}
.control-panel h3,.account-subsection h3{margin:0 0 14px;font-size:var(--t-md)}.control-panel label{margin-bottom:10px}.control-panel input,.control-panel select{margin-top:4px}.control-panel audio{width:100%;height:36px;margin:8px 0 12px}
.control-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.control-state{margin:0 0 14px;font-size:var(--t-xl);font-weight:700;line-height:1.15}.control-state small{display:block;margin-top:4px;font-size:var(--t-xs);font-weight:400;color:var(--label3)}
.inline-control{display:grid;grid-template-columns:78px minmax(0,1fr);gap:7px;align-items:center}.inline-control input,.inline-control select{margin:0;height:34px}.inline-control .btn{grid-column:1/-1}.plan-control{grid-template-columns:minmax(120px,1fr) auto;margin-top:8px}.plan-control .btn{grid-column:auto}
.account-subsection{padding-top:20px}.subsection-head{display:flex;justify-content:space-between;align-items:center}.subsection-head span{font-size:var(--t-xs);color:var(--label3)}
.account-videos a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--sep);color:var(--label);text-decoration:none}.account-videos a:hover strong{color:var(--blue)}.account-videos strong,.account-videos small{display:block}.account-videos small{font-size:var(--t-xs);color:var(--label3)}.account-videos i{font-style:normal}
.account-empty{display:flex;min-height:520px;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--label2)}.account-empty strong{font-size:var(--t-xl);color:var(--label)}.account-empty p{max-width:38ch}
@media(max-width:980px){.account-shell{grid-template-columns:1fr}.account-list{border-right:0;border-bottom:1px solid var(--sep);max-height:430px;overflow:auto}.account-controls{grid-template-columns:1fr}.control-panel,.control-panel:nth-child(even){padding:20px 0;border-left:0}.control-panel:nth-child(n+2){border-top:1px solid var(--sep)}}
@media(max-width:600px){.admin-titleline{align-items:flex-start}.account-create-form{position:fixed;left:12px;right:12px;top:70px;width:auto}.account-detail{padding:18px 14px}.inline-control{grid-template-columns:70px 1fr}.inline-control .btn{grid-column:1/-1}.plan-control{grid-template-columns:1fr auto}}
.writer-control{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);gap:32px;align-items:end;margin-top:18px}.writer-control h2{margin:5px 0 7px}.writer-control form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.writer-control label{margin:0}.writer-control select{margin-top:4px}.saved-inline{grid-column:1/-1;color:var(--success);font-size:var(--t-sm);font-weight:650}@media(max-width:900px){.writer-control{grid-template-columns:1fr}.writer-control form{grid-template-columns:1fr 1fr}}@media(max-width:600px){.writer-control form{grid-template-columns:1fr}.writer-control .btn{width:100%}}

/* Master provider vault: operational status is visible, credentials never are. */
.provider-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.provider-heading h1{margin:5px 0 6px}.provider-heading .lede{margin:0}
.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.provider-card{margin:0;padding:23px;display:flex;flex-direction:column}
.provider-card header{display:flex;position:static;inset:auto;z-index:auto;height:auto;padding:0;
  flex-direction:row;align-items:flex-start;justify-content:space-between;gap:14px;
  background:none;backdrop-filter:none;border:0}
.provider-card h2{margin:4px 0 0}.provider-card>p{margin:12px 0 0;color:var(--label2)}
.provider-state{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:rgba(255,149,0,.12);color:#8A5300;font-size:var(--t-xs);font-weight:700}
.provider-state.ready{background:rgba(97,81,163,.13);color:var(--success)}
.provider-runtime{display:flex;align-items:center;gap:8px!important;font-size:var(--t-xs)!important}
.provider-runtime span{width:7px;height:7px;border-radius:50%;background:#8E8E93}
.provider-card form{display:grid;gap:13px;margin-top:20px;padding-top:18px;border-top:1px solid var(--sep)}
.provider-card label{margin:0}.provider-card input,.provider-card select{margin-top:5px}
.provider-secret{display:grid;gap:7px}.provider-source{display:flex;justify-content:space-between;gap:14px;color:var(--label3);font-size:var(--t-xs)}
.checkline{display:flex;align-items:center;gap:6px!important;font-size:var(--t-xs)!important;font-weight:500!important;color:#B3261E!important;cursor:pointer}
.checkline input{width:auto;height:auto;margin:0}
.provider-card .btn{justify-self:start}.provider-warning{margin-top:14px}.provider-warning p{margin:6px 0 0;color:var(--label2)}
@media(max-width:850px){.provider-grid{grid-template-columns:1fr}}
@media(max-width:600px){.provider-heading{display:block}.provider-heading .linky{display:inline-block;margin-top:12px}.provider-source{display:block}.checkline{margin-top:7px!important}}

/* ========================================================================== 
   Creator polish: a stronger editorial frame without changing the workflow.
   ========================================================================== */
::selection{background:var(--accent-soft);color:var(--label)}
html{scrollbar-color:color-mix(in srgb,var(--accent) 42%,transparent) transparent;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 34%,transparent);border:3px solid transparent;border-radius:999px;background-clip:padding-box}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Brand and sidebar information architecture. */
.brand-copy{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-copy strong{font:inherit;font-weight:700;white-space:nowrap}
.brand-copy small{margin-top:5px;color:rgba(255,255,255,.48);font-size:10px;font-weight:560;letter-spacing:.025em}
.app-nav .nav-group,.app-nav .nav-footer{display:flex;flex-direction:column;gap:2px}
.app-nav .nav-group+.nav-group{margin-top:17px}
.app-nav .nav-label{padding:0 10px 5px;color:rgba(255,255,255,.42);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.app-nav .nav-footer{margin-top:auto}
header.rail .app-nav a.on{position:relative;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.11))}
header.rail .app-nav a.on::after{content:"";position:absolute;right:9px;width:5px;height:5px;border-radius:50%;background:#F8A84B;box-shadow:0 0 0 4px rgba(248,168,75,.13)}

/* The landing visual now performs the actual product sequence. */
.landing-capabilities{display:flex;align-items:center;gap:0;margin-top:25px;color:var(--accent);font-size:var(--t-xs);font-weight:700}
.landing-capabilities span{display:flex;align-items:center;white-space:nowrap}
.landing-capabilities span+span::before{content:"";width:22px;height:1px;margin:0 9px;background:color-mix(in srgb,var(--accent) 28.000000000000004%,transparent)}
.edit-story{transform:perspective(1200px) rotateY(-1.5deg);transform-origin:center left}
.clip-strip span{animation:clipSequence 8s cubic-bezier(.16,1,.3,1) infinite;will-change:transform,filter}
.clip-strip span:nth-child(2){animation-delay:.18s}.clip-strip span:nth-child(3){animation-delay:.36s}
.story-step::before{animation:nodeSequence 8s var(--motion-out) infinite}
.story-step:nth-child(2)::before{animation-delay:.75s}.story-step:nth-child(3)::before{animation-delay:1.5s}.story-step:nth-child(4)::before{animation-delay:2.25s}
.edit-story .wave i{animation:voiceSignal 1.2s ease-in-out infinite alternate;transform-origin:center}
.edit-story .wave i:nth-child(2n){animation-delay:.14s}.edit-story .wave i:nth-child(3n){animation-delay:.27s}
@keyframes clipSequence{0%,68%,100%{transform:translateY(0);filter:saturate(.92)}6%,14%{transform:translateY(-5px);filter:saturate(1.18)}}
@keyframes nodeSequence{0%,8%,100%{transform:scale(1);box-shadow:0 0 0 4px #EFEEFF}12%,22%{transform:scale(1.2);box-shadow:0 0 0 7px rgba(102,92,224,.15)}}
@keyframes voiceSignal{from{transform:scaleY(.58);opacity:.68}to{transform:scaleY(1.08);opacity:1}}
.process-heading p{max-width:54ch;margin:12px 0 0;color:var(--label2);font-size:var(--t-md)}
.landing-close p{max-width:56ch;margin:12px 0 0;color:rgba(255,255,255,.66);font-size:var(--t-sm)}

/* Auth is a product entry point, not an oversized generic form. */
body.public-auth main.auth{max-width:1120px;margin:0 auto;padding:72px 28px 96px}
.auth-layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);gap:78px;align-items:center;min-height:590px}
.auth-intro{position:relative;padding:48px 0;color:var(--rail)}
.auth-intro::before{content:"";position:absolute;left:-34px;top:16px;width:84px;height:84px;border-radius:26px;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(236,72,153,.13),rgba(245,158,11,.12));transform:rotate(-9deg);z-index:-1}
.auth-intro h1{max-width:560px;margin:0 0 22px;font-size:clamp(42px,5.4vw,70px);font-weight:780;line-height:.96;letter-spacing:-.04em}
.auth-intro>p{max-width:520px;margin:0;color:var(--label2);font-size:clamp(17px,1.8vw,21px);line-height:1.5;letter-spacing:-.01em}
.auth-flow{display:flex;align-items:center;margin-top:42px;max-width:500px;color:#5147D7;font-size:var(--t-xs);font-weight:720}
.auth-flow span{display:flex;align-items:center;flex:1;min-width:0}
.auth-flow span i{height:2px;flex:1;margin:0 10px;background:#D9D6F4;overflow:hidden;position:relative}
.auth-flow span i::after{content:"";position:absolute;inset:0;background:#665CE0;transform:translateX(-100%);animation:flowLine 5s cubic-bezier(.16,1,.3,1) infinite}
.auth-flow span:nth-child(2) i::after{animation-delay:.45s}.auth-flow span:nth-child(3) i::after{animation-delay:.9s}
.auth-flow .ready{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:rgba(97,81,163,.13);color:var(--success)}
@keyframes flowLine{0%,8%{transform:translateX(-100%)}35%,72%{transform:translateX(0)}100%{transform:translateX(100%)}}
.auth-card{margin:0;padding:34px 36px;border:0;border-radius:16px;box-shadow:0 24px 60px -28px rgba(27,22,80,.32)}
.auth-card h2{margin:0 0 7px;font-size:var(--t-2xl);letter-spacing:-.025em}
.auth-card-intro{margin:0 0 28px;color:var(--label2);font-size:var(--t-md)}
.auth-card .field{margin-bottom:18px}
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password]{min-height:46px;padding:11px 13px}
.auth-card .btn.lg{min-height:48px;margin-top:10px!important}

/* Story composition: one primary brief and a quiet supporting column. */
.story-form{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);gap:14px 18px;align-items:start;padding:0;background:none}
.story-form>.story-brief{grid-column:1;grid-row:1}
.story-side{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:12px}
.story-side .card{margin:0}
.story-form>.actions{grid-column:1/-1;margin-top:0;padding-top:13px;border-top:1px solid var(--sep)}
.story-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px;padding-bottom:15px;border-bottom:1px solid var(--sep)}
.story-section-head h2,.story-side h2{margin:0;font-size:var(--t-lg);letter-spacing:-.015em}
.story-section-head p{max-width:31ch;margin:0;color:var(--label3);font-size:var(--t-xs);text-align:right}
.story-brief{padding:22px 24px;border:0;box-shadow:0 16px 38px -26px rgba(27,22,80,.34)}
.story-brief textarea{min-height:164px}
.story-side .card{padding:20px;border:1px solid var(--sep);box-shadow:none}
.story-side .story-name{background:rgba(255,255,255,.62)}
#refbtn.is-busy{pointer-events:none;opacity:.6}

/* The video index gets one confident branded moment; the table remains the work. */
.workspace-banner{position:relative;overflow:hidden;min-height:118px;margin:-2px 0 16px;padding:24px 26px;align-items:center;border-radius:16px;background:var(--rail);color:#fff;box-shadow:0 20px 42px -28px rgba(27,22,80,.65)}
.workspace-banner::after{content:"";position:absolute;right:132px;top:-68px;width:210px;height:210px;border-radius:50%;background:rgba(236,72,153,.14)}
.workspace-banner .hometitle{position:relative;z-index:1}
.workspace-banner h1{color:#fff;font-size:var(--t-2xl);margin-bottom:7px}
.workspace-banner .lede{color:rgba(255,255,255,.65);max-width:58ch}
.workspace-action{position:relative;z-index:1;display:flex;align-items:center;gap:22px}
.workspace-banner .btn{background:#fff;color:var(--rail);box-shadow:0 9px 24px rgba(0,0,0,.18)}
.workspace-banner .btn svg{stroke:currentColor}
.workspace-banner .btn:hover{background:#F2F0FF}
.workspace-signal{height:30px;display:flex;align-items:center;gap:4px;color:#C4BFFF}
.workspace-signal i{width:3px;height:9px;border-radius:3px;background:currentColor;animation:voiceSignal 1.25s ease-in-out infinite alternate}
.workspace-signal i:nth-child(2),.workspace-signal i:nth-child(4){height:20px;animation-delay:.17s}.workspace-signal i:nth-child(3){height:28px;animation-delay:.3s}.workspace-signal i:nth-child(5){height:14px;animation-delay:.08s}
.lib{overflow:visible}
.librow{transition:background .2s var(--motion-out),transform .2s var(--motion-out),box-shadow .2s var(--motion-out)}
.librow:hover{position:relative;z-index:1;background:#FAFAFE;box-shadow:0 0 0 7px #FAFAFE;transform:translateY(-1px)}

@media (min-width:980px){
  header.rail .app-nav{gap:0}
  header.rail .app-nav a.pill{margin-top:0}
}
@media (max-width:979px){
  .brand-copy small,.app-nav .nav-label{display:none}
  .app-nav .nav-group,.app-nav .nav-footer{display:contents}
  header.rail .app-nav{flex-wrap:nowrap!important}
  .app-nav .nav-group+.nav-group{margin-top:0}
  header.rail .app-nav a.on::after{display:none}
  .story-form{grid-template-columns:1fr}
  .story-form>.story-brief,.story-side,.story-form>.actions{grid-column:1;grid-row:auto}
  .auth-layout{grid-template-columns:1fr;gap:28px;min-height:0}
  .auth-intro{padding:16px 0}.auth-intro h1{max-width:720px}.auth-intro>p{max-width:680px}
}
@media (max-width:650px){
  header.rail:has(.app-nav){display:grid;grid-template-columns:1fr;align-items:center;gap:5px;padding:9px 12px 7px}
  header.rail:has(.app-nav) .brand{width:max-content;margin:0;padding:2px 0}
  header.rail:has(.app-nav) .app-nav{grid-column:1/-1;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
  header.rail:has(.app-nav) .app-nav a{flex:0 0 auto}
}
@media (max-width:650px){
  body.public-auth main.auth{padding:38px 16px 64px}
  .auth-layout{gap:22px}.auth-card{order:-1}.auth-intro{padding:4px 0}.auth-intro::before{left:-18px;top:-9px;width:58px;height:58px;border-radius:18px}
  .auth-intro h1{font-size:40px;margin-bottom:16px}.auth-intro>p{font-size:16px}.auth-flow{margin-top:26px}
  .auth-card{padding:24px 20px}.auth-card-intro{margin-bottom:22px}
  .landing-capabilities{overflow-x:auto;padding-bottom:4px}.landing-capabilities span+span::before{width:13px;margin:0 7px}
  .edit-story{transform:none}
  .workspace-banner{display:block;min-height:0;padding:21px 20px}.workspace-banner::after{right:-80px}.workspace-action{justify-content:space-between;margin-top:20px}.workspace-signal{display:none}
  .story-section-head{display:block}.story-section-head p{margin-top:5px;text-align:left}.story-brief{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){
  .clip-strip span,.story-step::before,.edit-story .wave i,.auth-flow span i::after,.workspace-signal i{animation:none!important}
  .edit-story{transform:none}.librow:hover{transform:none}
}

/* ========================================================================== 
   Launch refinement — clearer entry, roomier workspace, dependable mobile nav.
   ========================================================================== */
.skip-link{position:fixed;left:14px;top:12px;z-index:1000;transform:translateY(-150%);
  padding:9px 13px;border-radius:8px;background:#fff;color:var(--rail);font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.22)}
.skip-link:focus{transform:translateY(0)}
.nav-toggle{display:none}

/* Account identity is visible even while the mobile navigation is closed. */
header.rail .session-identity{display:block;color:#fff;text-decoration:none;min-width:0;
  padding:12px 10px;margin:0 0 18px;border:1px solid #595483;border-radius:10px;line-height:1.45}
.session-identity span,.session-identity small{display:block;overflow-wrap:anywhere}
.session-identity span{font-size:var(--t-sm);color:#DBD8F4}
.session-identity strong{display:block;color:#fff;font-size:var(--t-lg)}
.session-identity small{margin-top:3px;font-size:var(--t-xs);color:#DBD8F4}
.session-identity:hover{background:#302962}
.account-context{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 24px;padding:14px 0;border-bottom:1px solid var(--sep);font-size:var(--t-sm)}
.account-context a{flex-shrink:0;min-height:44px;display:inline-flex;align-items:center}
.recording-owner{margin:0 0 24px;padding:16px 20px;background:#E5E3F7;border-radius:12px;color:#28204F}
.recording-owner p{margin:4px 0 0;max-width:80ch;font-size:var(--t-sm)}
.recording-owner a,.account-context a{text-underline-offset:3px}
.editing-account{font-size:var(--t-sm);margin:18px 0}
.account-tags i{font-size:12px;line-height:1.35}
.account-detail-head .pill{white-space:normal;text-align:center}
.app-nav .nav-label{text-transform:none;letter-spacing:0;color:#C7C3E5}
@media (min-width:651px) and (max-width:979px){
  header.rail:has(.app-nav){flex-wrap:wrap}
  header.rail .session-identity{margin:0;padding:6px 10px;max-width:270px}
  .session-identity strong{display:inline}
  header.rail .app-nav{width:100%;flex-wrap:wrap!important}
}
@media (max-width:650px){
  header.rail:has(.app-nav) .session-identity{grid-column:1/-1;grid-row:2;margin:0;padding:7px 10px}
  .session-identity strong{display:inline;font-size:var(--t-md)}
  .session-identity small{margin:0}
  .account-context{align-items:flex-start;flex-direction:column;gap:4px}
  .account-detail-head{grid-template-columns:auto minmax(0,1fr)}
  .account-detail-head .pill{grid-column:1/-1;justify-self:start}
}

.landing-copy h1{max-width:720px}
.landing-support{max-width:620px;margin:12px 0 0;color:var(--label3);font-size:var(--t-xs);line-height:1.5}
.auth-benefits{display:grid;gap:11px;list-style:none;margin:28px 0 0;padding:0;max-width:500px}
.auth-benefits li,.auth-private{position:relative;margin:0;padding-left:27px;color:var(--label2);font-size:var(--t-sm)}
.auth-benefits li::before,.auth-private span{position:absolute;left:0;top:1px;display:inline-flex;
  align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:rgba(97,81,163,.13);color:var(--success);font-size:11px;font-weight:800}
.auth-benefits li::before{content:"\2713"}
.auth-private{margin:25px 0 0}.auth-private span{top:0}
.password-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.password-grid label{margin:0}.password-grid input{margin-top:5px}.password-grid .btn{align-self:end}

.first-video{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);background:rgba(255,255,255,.58);text-align:center}
.first-video h2{margin:20px 0 7px;font-size:var(--t-xl)}
.first-video p{max-width:48ch;margin:0 0 20px;color:var(--label2)}
.empty-wave{display:flex;align-items:center;gap:4px;height:34px;color:var(--blue)}
.empty-wave i{display:block;width:4px;height:12px;border-radius:99px;background:currentColor;animation:voiceSignal 1.2s ease-in-out infinite alternate}
.empty-wave i:nth-child(2),.empty-wave i:nth-child(4){height:25px;animation-delay:.16s}.empty-wave i:nth-child(3){height:34px;animation-delay:.28s}.empty-wave i:nth-child(5){height:18px;animation-delay:.08s}

@media (min-width:980px){
  body:not(.public-landing):not(.public-auth){grid-template-columns:232px minmax(0,1fr)}
  body:not(.public-landing):not(.public-auth) header.rail{width:232px;padding:24px 17px}
  body:not(.public-landing):not(.public-auth) main,
  body:not(.public-landing):not(.public-auth) main.narrow,
  body:not(.public-landing):not(.public-auth) main.home,
  body:not(.public-landing):not(.public-auth) main.review,
  body:not(.public-landing):not(.public-auth) main.job{max-width:1320px;padding:32px 40px 60px}
  .workspace-banner{min-height:132px;padding:28px 31px}
  .workspace-banner h1{font-size:26px}
  .workspace-banner .lede{font-size:14px}
  .librow{padding:12px 0}.librow .thumb{width:43px;height:57px}.libhd{padding-top:12px}
}

@media (max-width:650px){
  :root{--t-xs:12px;--t-sm:14px;--t-md:16px;--t-lg:17px;--t-xl:20px;--t-2xl:24px;--t-3xl:28px}
  header.rail:has(.app-nav){position:sticky;display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:8px;padding:10px 13px;overflow:visible}
  header.rail:has(.app-nav) .brand{grid-column:1;margin:0;padding:2px 0}
  .nav-toggle{grid-column:2;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 10px;
    border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.09);
    color:#fff;font:inherit;font-size:var(--t-sm);font-weight:650;cursor:pointer}
  .nav-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  header.rail:has(.app-nav) .app-nav{display:none;position:absolute;left:10px;right:10px;top:calc(100% + 7px);
    z-index:50;width:auto;max-height:calc(100vh - 82px);padding:10px;overflow:auto;flex-direction:column;
    align-items:stretch;border:1px solid rgba(255,255,255,.13);border-radius:12px;
    background:linear-gradient(180deg,#211A5B,#171344);box-shadow:0 20px 50px rgba(17,13,55,.32)}
  header.rail:has(.app-nav) .app-nav.open{display:flex}
  .app-nav .nav-group,.app-nav .nav-footer{display:flex!important;flex-direction:column}
  .app-nav .nav-group+.nav-group{margin-top:9px}
  .app-nav .nav-label{display:block;padding:6px 9px 3px}
  header.rail .app-nav a{min-height:42px;padding:9px 10px;font-size:14px}
  header.rail .app-nav a svg{display:block;width:19px;height:19px}
  header.rail .app-nav a.signout{display:flex;margin-top:8px;border-top:1px solid rgba(255,255,255,.12);border-radius:0;padding-top:13px}
  .app-nav .nav-footer{margin-top:8px}
  header.rail .app-nav a.pill{justify-content:flex-start}
  .toolbar{gap:8px}
  .toolbar .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;overflow:visible}
  .toolbar .seg a{display:flex;justify-content:center;align-items:center;padding:7px 6px;text-align:center}
  .toolbar .search{order:2;flex-basis:100%;height:40px}
  .sortlab{order:3;width:100%;justify-content:space-between}.sortlab select{height:40px;flex:1}
  .librow{padding:13px 0}.librow .thumb{width:43px;height:57px}
  .workspace-banner h1{font-size:23px}.workspace-banner .lede{font-size:13px}
  .auth-benefits{margin-top:20px}.auth-private{margin-top:18px}
  .landing-support{font-size:11px}
  .password-grid{grid-template-columns:1fr}.password-grid .btn{width:100%}
}

/* ---------- compact review workspace ----------
   Explicit stacks replace the old implicit grid. Optional cards can appear or vanish
   without being dropped into a random hole beside the script. */
.review-titlebar{align-items:flex-start;margin-bottom:10px}
.section-heading,.script-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.section-heading h2,.section-heading h3,.script-section-head h2{margin:0}
.section-heading>div:first-child,.script-section-head>div:first-child{min-width:0}
.section-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.section-heading .opt{margin:0;align-self:center}

.review-brief{padding:14px 16px;margin-bottom:12px}
.brief-summary{padding-top:9px}
.brief-summary>p{max-width:75ch;margin:0;color:var(--label);white-space:pre-wrap}
.brief-facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.brief-facts span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;
  background:var(--fill2);color:var(--label2);font-size:var(--t-xs)}
.brief-facts b{color:var(--label);font-weight:650}
.brief-editor{margin-top:10px;padding-top:12px;border-top:1px solid var(--sep);
  animation:reviewPanelIn .22s var(--motion-out) both}
.brief-editor textarea{min-height:76px;margin-bottom:4px}
.brief-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:9px}
.brief-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.brief-fields label{margin:0}.brief-fields input{margin-top:4px}
.brief-regenerate{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.brief-regenerate .hint{max-width:72ch;margin:0}
.brief-regenerate .btn{flex:0 0 auto}
.form-error{margin:3px 0 0;color:#b42318;font-size:var(--t-sm);font-weight:600}
@keyframes reviewPanelIn{from{opacity:.55;transform:translateY(-5px);clip-path:inset(0 0 12% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}

.review-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,420px);
  gap:12px 16px;align-items:start}
.review-primary,.review-sidebar,.review-finishing{display:flex;flex-direction:column;gap:10px;min-width:0}
.review-primary{grid-column:1;grid-row:1}
.review-sidebar{grid-column:2;grid-row:1/span 2}
.review-finishing{grid-column:1;grid-row:2}
.review-primary>.card,.review-sidebar>.card,.review-finishing>.card{margin:0}
.script-section-head{align-items:center;padding:12px 0;border-bottom:1px solid var(--sep)}
.script-rewrite{display:flex;align-items:flex-end;gap:8px;margin:0;padding:10px 0;border-bottom:1px solid var(--sep);flex-wrap:wrap}
.script-rewrite>div{flex:1 1 100%}.script-rewrite input{flex:1 1 280px}.script-rewrite>.btn{flex:0 0 auto}

.review-sidebar .delivery-panel{padding:14px 16px}
.review-sidebar .delivery-head{margin-bottom:10px}
.voice-pickers{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px;margin-bottom:0}
.voice-select{min-width:0;margin:0 0 12px}.voice-select select{margin-top:4px;padding-right:34px}
.voice-pickers .voice-select{margin-bottom:0}
.voice-language-control{margin:0 0 13px;padding:0 0 13px;border-bottom:1px solid var(--sep)}
.voice-language-control .section-heading{margin-bottom:8px}
.voice-language-control .voice-select{display:block;max-width:520px;margin-bottom:0}
.voice-choice-heading{margin:0 0 9px}
.voice-choice-heading h2{margin:0 0 3px;font-size:var(--t-lg);letter-spacing:-.015em}
.voice-choice-heading .hint{margin:0}
.language-help{display:flex;align-items:flex-start;gap:7px;margin:7px 0 12px;color:var(--label3);
  font-size:var(--t-xs);line-height:1.42}
.language-experimental{display:inline-flex;align-items:center;flex:0 0 auto;min-height:21px;padding:2px 7px;
  border-radius:999px;background:rgba(255,149,0,.12);color:#9a5800;font-size:11px;font-weight:680;letter-spacing:.01em}
.language-experimental[hidden]{display:none}
.language-rewrite{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:9px 10px;
  border:1px solid rgba(255,149,0,.22);border-radius:10px;background:rgba(255,149,0,.07)}
.language-rewrite[hidden]{display:none}
.language-rewrite p{min-width:0;margin:0;color:var(--label2);font-size:var(--t-xs);line-height:1.42}
.language-rewrite strong{color:var(--label)}
.language-rewrite .btn{flex:0 0 auto}
.review-sidebar .delivery-grid{grid-template-columns:1fr;gap:11px}
.review-sidebar .delivery-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.review-sidebar .delivery-options label>span{height:100%;min-height:66px}
.pronunciation-box{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--sep)}
.pronunciation-box .section-heading{justify-content:flex-start;align-items:center;margin-bottom:4px}
.pronunciation-box h3{font-size:var(--t-md);font-weight:680;letter-spacing:-.01em}
.pronunciation-box .namerow{display:grid;grid-template-columns:minmax(82px,.55fr) minmax(0,1fr);
  align-items:center;gap:8px;margin:8px 0 0}
.pronunciation-box .namerow .nm{width:auto;font-size:var(--t-sm);overflow-wrap:anywhere}
.pronunciation-box .namerow input{padding:7px 9px}
.review-sidebar .delivery-preview{align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.review-sidebar .delivery-preview-btn{width:100%;justify-content:center}
.another-version{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.another-version .hint{margin:0}

.review-finishing .fonts{grid-template-columns:repeat(4,minmax(0,1fr))}
.review-finishing .fontcard{min-height:48px;display:flex;align-items:center;justify-content:center}
.review-finishing .fontcard .fs{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.review-finishing .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.review-finishing .choice{min-height:82px}
.makebar{bottom:max(10px,env(safe-area-inset-bottom));margin-top:12px}
.mkright{margin-left:auto}.make-preview-hint{max-width:210px;text-align:right}

@media (max-width:1179px){
  .review-workspace{grid-template-columns:1fr}
  .review-primary,.review-sidebar,.review-finishing{grid-column:1;grid-row:auto}
  .review-sidebar .delivery-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .section-heading,.script-section-head,.brief-regenerate{align-items:stretch;flex-direction:column}
  .pronunciation-box .section-heading,.review-finishing .section-heading{align-items:center;flex-direction:row}
  .section-actions{justify-content:flex-start}
  .brief-fields,.brief-fields.two{grid-template-columns:1fr}
  .brief-regenerate .btn,.script-section-head>.btn{width:100%}
  .review-finishing .fonts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-finishing .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-sidebar .delivery-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .review-sidebar .delivery-options label>span{padding:8px;min-height:0}
  .voice-pickers{grid-template-columns:1fr}
  .language-rewrite{align-items:stretch;flex-direction:column}
  .language-rewrite .btn{width:100%}
  .momentbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .momentbar>.rw,.momentbar>.rwnote,.momentbar>.over{grid-column:1/-1}
  .momentbar>.btn{width:100%;white-space:normal;text-align:center}
  .identity-lock{margin-top:8px}
  .makebar{position:static;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .mkright{width:100%;margin-left:0}.make-preview-hint{max-width:none;text-align:left;flex:1}
}

@media (prefers-reduced-motion:reduce){.empty-wave i{animation:none!important}}
@media (prefers-reduced-motion:reduce){.brief-editor{animation:none}}

/* Final mobile tap and reading floor. These rules intentionally come after the
   compact desktop scale so later component selectors cannot shrink phone controls. */
@media (pointer:coarse), (max-width:650px){
  input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],textarea,select{font-size:16px}
  .btn,.btn.sm,.menu summary,.nav-toggle,.app-nav a,.public-nav a,.toolbar .seg a,.search,.sortlab select{min-height:44px}
  .menu summary{width:44px}
}