/* The ten-page carousel (nine steps + the æntenna page) */
html,body{height:100%}
body.app{display:flex;flex-direction:column;min-height:100dvh}

/* ---- top bar ---- */
.appbar{position:sticky;top:0;z-index:50;background:rgba(11,13,18,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex;align-items:center;gap:14px;height:66px}
.appbar .brand{font-size:29px}
.appbar .brand .mark{height:38px}
.appbar .save-note{font-size:14.5px;color:var(--txt-3);min-width:90px;text-align:right}
.appbar .save-note.warn{color:var(--warn)}

/* ---- progress dots ---- */
.dots{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:#2c3242;border:0;padding:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease,width .18s ease}
.dot:hover{background:#414a5e;transform:scale(1.25)}
.dot.done{background:var(--teal)}
.dot.now{background:var(--gold);width:22px;border-radius:999px}
.dot[disabled]{cursor:default;opacity:.55}

/* ---- the stage ---- */
/* overflow-x:clip, not hidden: the page-transition keyframes start 26px off to the side,
   which otherwise leaves the whole app horizontally scrollable by 26px on a phone. clip
   contains it without making .stage a scroll container (hidden would force overflow-y:auto). */
.stage{flex:0 0 auto;padding:clamp(24px,4vw,44px) 0 28px;overflow-x:clip}   /* O2: no forced fill — the nav sits right under short pages */
.page{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.page-head{margin-bottom:26px}
.page-head .caps{display:block;margin-bottom:9px}
.page-head p{color:var(--txt-2);max-width:62ch}
.page[hidden]{display:none}
.page.enter{animation:slideIn .34s cubic-bezier(.22,.8,.3,1) both}
.page.enter-back{animation:slideInBack .34s cubic-bezier(.22,.8,.3,1) both}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page.enter,.page.enter-back{animation:none}}

/* ---- bottom navigation ---- */
.navbar{position:sticky;left:0;right:0;bottom:0;z-index:50;
  background:linear-gradient(to top,rgba(11,13,18,.97) 60%,rgba(11,13,18,0));
  padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.navbar .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px}
.navbar .mid{flex:1;display:flex;flex-direction:column;gap:7px;align-items:center;min-width:0}
.navbar .step-label{font-size:14px;color:var(--txt-3);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.arrow{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--line-2);background:var(--ink-3);color:var(--txt);cursor:pointer;font-size:22px;line-height:1}
.arrow:hover{background:#20252f}
/* the Help "?" in the bottom bar (Mal 2026-09-30) — gold so it can be seen; phones: at the end of the dots row */
.navbar .dots-row,.navbar .label-row{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-width:0}
.navbar .label-row .step-label{min-width:0}
.help-q{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--gold);
  color:var(--gold);background:rgba(232,181,103,.10);font-size:15px;font-weight:700;line-height:1;text-decoration:none}
.help-q:hover,.help-q:focus-visible{background:var(--gold);color:#14110b}
.help-q-phone{display:none}
@media(max-width:600px){.help-q-phone{display:grid;width:28px;height:28px}.help-q-wide{display:none}}
.arrow[disabled]{opacity:.3;cursor:not-allowed}

/* ---- flow diagram (page 1) ---- */
.flow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:22px 0 4px}
.flow .node{flex:1 1 150px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px;font-size:15.5px;color:var(--txt-2);position:relative}
.flow .node b{display:block;color:var(--txt);font-size:16.5px;margin-bottom:3px;font-weight:600}
.flow .arw{align-self:center;color:var(--gold);font-size:19.5px;flex:none}
@media(max-width:720px){.flow .arw{display:none}}
/* Hedley's movie at the top of page 1: 9:16, never taller than 70 % of the screen */
#p1 .p1-creator{text-align:center;margin:4px 0 30px}
#p1 .p1-creator h2{margin:0 0 14px}
#p1 .p1-movie{width:min(360px,100%,calc(70vh * 9 / 16));aspect-ratio:9/16;margin:0 auto;border-radius:var(--r-sm);
  overflow:hidden;background:#000;border:1px solid var(--line)}
#p1 .p1-movie video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* Desktop (Mal, 2026-10-05): the widescreen film. p1-wide.js puts the 16:9 film on screens 861px and wider and adds
   p1-wide ONLY while the film that is loaded is the wide one, so the frame always has the shape of the film in it.
   Phones keep the 9:16 film and frame above. Same limit: never taller than 70 % of the screen. */
#p1 .p1-movie.p1-wide{width:min(100%,calc(70vh * 16 / 9));aspect-ratio:16/9}
#p1 .flow .node .pic{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:calc(var(--r-sm) - 4px);background:#000;margin:0 0 12px}
/* below one-row width, an even grid keeps every card (and picture) the same size */
/* Six step cards since 2026-10-07 (Mal: "Refine your goals"): they never fit one row, so every width above phones is an even
   3-across grid (two rows of three, no arrows); phones 2 across. Titles full bold (Mal, 2026-10-07). */
#p1 .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#p1 .flow .arw{display:none}
#p1 .flow .node b{font-weight:700}
/* the gold statement centred under the six cards (Mal, 2026-10-07); gold written out because --gold is blue on VM pages 1-2 */
#p1 .p1-statement{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.35;color:#e8b567;text-align:center;max-width:30em;margin:40px auto;text-wrap:balance}
@media(max-width:720px){#p1 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- music (page 2) ---- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--txt-2);
  padding:10px 14px;font:600 16.5px/1 var(--sans);cursor:pointer;margin-bottom:-1px}
.tabs button:hover{color:var(--txt)}
.tabs button[aria-selected=true]{color:var(--gold);border-bottom-color:var(--gold)}
/* phones: the three music tabs share one row as equal columns; long labels wrap inside their own column */
@media(max-width:600px){#p2 .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  #p2 .tabs button{padding:10px 4px;font-size:14.5px;line-height:1.25;text-align:center}}
.track{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ink-2);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.track:hover{border-color:var(--line-2);background:#161a23}
.track.chosen{border-color:var(--gold);background:rgba(232,181,103,.07)}
.track .play{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#232838;border:1px solid var(--line-2);color:var(--gold);font-size:15px;cursor:pointer;padding:0}
.track .t-name{font-weight:600;font-size:17px}
.track .t-meta{font-size:14.5px;color:var(--txt-3)}
.track .t-body{flex:1;min-width:0}
.mood-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.chip{border:1px solid var(--line-2);background:var(--ink-3);color:var(--txt-2);border-radius:999px;
  padding:6px 13px;font:500 15px/1 var(--sans);cursor:pointer}
.chip[aria-pressed=true]{background:rgba(232,181,103,.14);border-color:rgba(232,181,103,.4);color:var(--gold)}

/* ---- drop zone (pages 2, 3, 5) ---- */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:30px 22px;text-align:center;
  color:var(--txt-2);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.drop:hover,.drop.over{border-color:var(--gold-dim);background:rgba(232,181,103,.05)}
.drop b{display:block;color:var(--txt);margin-bottom:5px}

/* ---- photo / candidate tiles ---- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.tile{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#05070b;
  border:2px solid transparent;cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.sel{border-color:var(--ok)}
/* page 5: the magnifier that opens a picture full size (2026-10-10). Bottom right, clear of the shot badge (top left). */
.tile .zm{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.66);color:#fff;display:grid;place-items:center;padding:0;cursor:zoom-in;z-index:2}
.tile .zm:hover,.tile .zm:focus-visible{background:rgba(0,0,0,.88);border-color:var(--gold)}
@media(min-width:761px){.tiles .tile .zm{width:26px;height:26px;right:4px;bottom:4px}}   /* desktop option thumbnails can be 55 px wide */
.tile .badge{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.66);color:#fff;font-size:12px;
  padding:3px 7px;border-radius:7px;letter-spacing:.06em;text-transform:uppercase}
.tile .x{position:absolute;right:5px;top:5px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(0,0,0,.66);color:#fff;font-size:16px;cursor:pointer;line-height:1;padding:0}
.tile .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--txt-3);font-size:13px;
  text-align:center;padding:10px;line-height:1.35}

/* ---- questions (page 4) ---- */
.q{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);padding:18px;margin-bottom:14px}
.q .qh{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px}
.q .qn{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:14.5px;
  font-weight:700;background:rgba(232,181,103,.13);color:var(--gold);border:1px solid rgba(232,181,103,.3)}
.q .qt{font-weight:600;font-size:19.5px;line-height:1.3;letter-spacing:-.01em}
/* The questions are briefs, not one-liners: heading, kicker, then a reading-width body. */
.q .qk{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-top:4px}
.q .qb{margin:14px 0 16px;color:var(--txt-2);font-size:17px;line-height:1.62}
/* One reading column. The bodies are long enough that a full-width card would run to
   ~100 characters a line; 620px holds them near 76ch, and the textarea shares the column
   so the card reads as one thing rather than prose floating in a wide band. */
.q{padding:22px;max-width:620px}
#questions + .row{max-width:620px}
.q .qh{margin-bottom:0;align-items:center}
@media(max-width:600px){.q{padding:18px}.q .qb{font-size:16.5px;line-height:1.58}}
.mic{display:inline-flex;align-items:center;gap:7px}
.mic.live{color:var(--red);border-color:var(--red)}
.mic.live .blob{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
/* page 5: change it in your own words (Mal, 2026-10-01) */
.gen-panel{border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.025)}
.gen-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gen-head h3{margin:0;font-family:inherit;font-size:22px;font-weight:600;letter-spacing:0}
.gen-row,.gen-go{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gen-row .btn,.gen-go .btn{min-height:44px}
/* the video panel's own button: big, blue, "Generate new preview" (Mal, 2026-10-10). Blue on purpose, not --gold: the
   brand packs turn --gold blue on some pages, and this one must look the same everywhere. */
.gen-go .btn-go-big{background:#2f6fed;border-color:#2f6fed;color:#fff;padding:16px 30px;font-size:19px;font-weight:700;min-height:58px;border-radius:14px}
.gen-go .btn-go-big:hover,.gen-go .btn-go-big:focus-visible{background:#4a82ff;border-color:#4a82ff;color:#fff}
.gen-go .btn-go-big:disabled{opacity:.55}
/* the picture buttons "Make 3 new pictures" and step 4's "Create 3 images": blue, a little bigger than the small buttons (Mal, 2026-10-10) */
.btn.btn-go-mid{background:#2f6fed;border-color:#2f6fed;color:#fff;padding:12px 22px;font-size:17px;font-weight:700;min-height:50px;border-radius:12px}
.btn.btn-go-mid:hover,.btn.btn-go-mid:focus-visible{background:#4a82ff;border-color:#4a82ff;color:#fff}
.btn.btn-go-mid:disabled{opacity:.55}
/* page 8 "Make the preview" and "↻ Try again - same movement" are blue too (Mal, 2026-10-12; LOCKED by Mal 2026-10-12,
   iPhone-tested - change only on request), the same blue as "Generate new preview"; the gold "Making the preview…" busy state
   (busy-gold) is untouched. The scene editor's copies share the class. */
.btn.gen-video:not(.busy-gold){background:#2f6fed;border-color:#2f6fed;color:#fff;font-weight:700}
.btn.gen-video:not(.busy-gold):hover,.btn.gen-video:not(.busy-gold):focus-visible{background:#4a82ff;border-color:#4a82ff;color:#fff}
.btn.gen-video:not(.busy-gold):disabled{opacity:.55}
/* a button that is WORKING (Mal, 2026-10-10: the faded "Making your pictures…" was too weak): the page-3 banner's gold,
   black bold text, full size, a slow pulse - so it is unmissable that something is happening */
.btn.busy-gold,.btn.busy-gold[disabled],.btn.busy-gold[aria-disabled=true]{background:#e8b567;border-color:#e8b567;color:#000;font-weight:700;font-size:18px;
  min-height:56px;padding:14px 26px;border-radius:14px;opacity:1;cursor:progress;animation:busyGold 1.6s ease-in-out infinite}
@keyframes busyGold{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.gen-box{display:flex;flex-direction:column;gap:12px}
.gen-box textarea{min-height:84px}
.gen-ideas{display:flex;flex-direction:column;gap:8px}
.gen-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:transparent;color:inherit;border-radius:999px;padding:9px 14px;font:inherit;font-size:15px;min-height:40px;cursor:pointer}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1a1408}
.gen-ask{border:1px solid var(--line);border-radius:10px;padding:10px 12px;line-height:1.5;background:rgba(0,0,0,.2)}
.gen-ask b,.gen-undo b{color:var(--gold)}
.gen-undo{font-size:18px;line-height:1.4;margin-top:6px}   /* bigger (Mal, 2026-10-10) */
.gen-from{display:flex;flex-direction:column;gap:8px}
.seg{display:flex;flex-wrap:wrap;gap:4px;border:1px solid var(--line);border-radius:22px;padding:3px;width:fit-content;max-width:100%}
.seg-btn{border:0;background:transparent;color:inherit;border-radius:18px;padding:10px 16px;font:inherit;font-size:15px;min-height:40px;cursor:pointer}
.seg-btn.on{background:var(--gold);color:#1a1408;font-weight:600}
.gen-takes{display:flex;flex-direction:column;gap:8px}
.take{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.take.on{border-color:rgba(127,212,156,.5)}
.take-name{flex-grow:1}
.take-in{color:#7fd49c}
/* each scene card is four numbered steps, each on its own pane (Mal, 2026-10-01) */
.sc-body>.stack.steps{gap:24px}
.step-pane{border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:rgba(0,0,0,.18)}
.step-pane .gen-head h3{display:flex;align-items:center}
.step-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;margin-right:12px;border-radius:50%;
  background:var(--gold);color:#1a1408;font-size:16px;font-weight:700;letter-spacing:0}
.step-pane>.field>span:first-child{font-size:14px}
#pedit .step-pane .own-prompt{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.fine-tune{display:block}
.fine-tune>summary{cursor:pointer;min-height:32px;display:flex;align-items:center;flex-wrap:wrap;font-size:22px;font-weight:600;line-height:1.4}
.fine-tune>summary{list-style:none}
.fine-tune>summary::-webkit-details-marker{display:none}
.fine-tune>summary{flex-wrap:wrap;font-family:var(--serif)}   /* like the step headers above it (polish.css sets .gen-head h3 serif) */
.fine-tune>summary .dim{font-family:var(--sans,inherit)}
.fine-tune>summary .dim{order:2;flex-basis:100%;padding-left:42px;font-weight:400}
/* The scene editor's four step headers are bold Times, one size up (Mal, 2026-10-12; LOCKED by Mal 2026-10-12,
   iPhone-tested - change only on request). Gold since 2026-10-16 (Mal, was white; gold LOCKED by Mal 2026-10-16). 27px, because Times draws
   smaller than Playfair: bold Times at 25px has exactly the letter height of the old 22px, so 27px is the first size that
   reads bigger. The editor only (#pedit). The gold number badge, the "images left" counters and step 4's subtitle keep
   their own look. #stage is in the selector so step 4 beats polish.css section 14, which forces every <summary> to 20-23px. */
#stage #pedit .step-pane .gen-head h3,#stage #pedit .fine-tune>summary{font-family:"Times New Roman",Times,serif;font-weight:700;font-size:27px!important;color:var(--gold);letter-spacing:0}
.fine-tune>summary::after{content:'\25B8';order:1;margin-left:auto;flex:none;padding-left:12px;font-size:24px;line-height:1;color:var(--gold);transition:transform .15s ease}
.fine-tune[open]>summary::after{transform:rotate(90deg)}
.fine-tune[open]{display:flex;flex-direction:column;gap:14px}
/* 0027: the image / video cap pane drops down from the top (Mal, 2026-09-29) */
.cap-pane{position:fixed;left:0;right:0;top:0;z-index:90;display:flex;justify-content:center;padding:0 16px;
  transform:translateY(-110%);transition:transform .3s ease}
.cap-pane.show{transform:none}
.cap-pane-in{max-width:620px;width:100%;margin-top:12px;padding:18px 20px;border:1px solid rgba(232,181,103,.6);border-radius:14px;
  background:#1a1f2b;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.cap-pane h3{margin:0 0 8px;color:var(--gold);font-size:20px}
.cap-pane p{margin:0 0 14px;line-height:1.5}
.cap-pane .row{display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.cap-pane{transition:none}}
/* page 5: images / video being made for this scene (Mal, 2026-09-28). See-through, so the faded figure behind still reads. */
.job-note{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:10px 12px;border:1px solid rgba(232,181,103,.5);
  border-radius:10px;background:rgba(18,21,29,.55);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.job-note b{color:var(--gold);font-weight:600}
.job-note .dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}
.job-note .job-clock{opacity:.7;white-space:nowrap}
.job-note.slow .job-clock::after{content:" This is taking longer than usual \2014 if nothing changes soon, press Report bug.";white-space:normal;display:block;margin-top:4px}
@media (prefers-reduced-motion:reduce){.job-note .dot{animation:none}}

/* ---- scene table (page 5) ---- */
.scene-card{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);margin-bottom:16px;
  overflow:hidden;transition:opacity .2s ease}
/* an approved card is NOT dimmed (Mal, 2026-10-11: "screens being dark until selected is not a good experience"): a green
   edge and its chip say approved; the card being worked on gets the gold outline and lighter ground (.open below) */
.scene-card.ghost{border-left:3px solid var(--ok)}
.scene-card>.sc-head{display:flex;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);
  background:#141822}
.scene-card>.sc-head .pos{font-size:14px;color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase;flex:none}
.scene-card>.sc-head .cap-preview{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Reordering (2026-09-26): the scene number is a box you can type into, plus up/down arrows. 16px text in the box
   so iOS does not zoom when it is tapped. .moved flashes the card that just moved. */
.scene-card>.sc-head .pos{display:flex;align-items:center;gap:8px}
.scene-card .sc-head input.sc-num{width:44px;min-width:0;height:34px;padding:0;text-align:center;font:600 16px/1 var(--sans);letter-spacing:0;color:var(--txt);
  background:var(--ink);border:1px solid var(--line-2);border-radius:8px;flex:none}
.scene-card .sc-head input.sc-num:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,181,103,.25)}
.scene-card .sc-head input.sc-num[readonly]{color:var(--txt-3);cursor:not-allowed}
.sc-move{display:flex;gap:6px;flex:none}
.sc-move button{width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--line-2);background:transparent;
  color:var(--txt-2);font-size:17px;line-height:1;cursor:pointer}
.sc-move button:hover:not([disabled]){border-color:var(--gold);color:var(--gold)}
.sc-move button[disabled]{opacity:.28;cursor:default}
.scene-card.moved{box-shadow:0 0 0 2px var(--gold);transition:box-shadow 1.2s ease}
/* the scene being worked on stands apart (Mal, 2026-10-01: "difficult to see where each scene starts") - its own warm
   panel, a gold edge and room above and below; an approved scene is shown at full strength while it is open */
.scene-card.open{margin:36px 0;background:#1c2130;border:1.5px solid rgba(232,181,103,.6);
  box-shadow:0 0 0 4px rgba(232,181,103,.08),0 18px 44px rgba(0,0,0,.5)}
.scene-card.open>.sc-head{background:rgba(232,181,103,.1);border-bottom-color:rgba(232,181,103,.35)}
.scene-card.ghost.open{opacity:1}
.scene-card.open .step-pane{background:rgba(0,0,0,.2)}
/* step 1, "Start with a bold caption": a shade lighter than the other panes (Mal, 2026-10-10) */
.step-pane.step-1,.scene-card.open .step-pane.step-1{background:rgba(255,255,255,.05)}   /* LOCKED by Mal 2026-10-10: every card, every site */
@media(max-width:600px){
  .scene-card>.sc-head{gap:8px;padding:11px 12px}
  .scene-card>.sc-head .pos-word{display:none}
  .scene-card .sc-head input.sc-num{width:40px}
  /* the green "approved" pill becomes a tick on phones so the caption keeps its room (the word stays for screen readers) */
  .scene-card>.sc-head .pill-ok{font-size:0;padding:4px 9px;flex:none}
  .scene-card>.sc-head .pill-ok::before{content:'\2713';font-size:14px}
  .sc-move{gap:4px}
  .sc-move button{width:32px;height:32px}
}
.sc-body{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 190px;padding:16px}
@media(max-width:760px){.sc-body{grid-template-columns:1fr}}
.sc-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px}

/* ---- storyboard (page 6) ---- */
.mosaic{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.mos{position:relative;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:#0a0d13;
  border:1px solid var(--line);display:grid;place-items:center}
.mos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mos.done{opacity:.4}
/* Once every scene is approved there is nothing left to pick out, so the storyboard shows at full brightness
   (Mal, 2026-09-28: all 20 faded to .4 looked drab). renderBoard sets .all-done. */
#p7 .mosaic.all-done .mos.done{opacity:1}
.mos .mc{position:relative;z-index:2;text-align:center;padding:8px;font-size:12px;line-height:1.25;
  text-transform:uppercase;letter-spacing:.05em;text-shadow:0 2px 3px rgba(0,0,0,.8)}
.mos .tick{position:absolute;right:5px;top:5px;z-index:3;width:19px;height:19px;border-radius:50%;
  background:var(--ok);color:#06210f;display:grid;place-items:center;font-size:12.5px;font-weight:700}
/* a tile with a picture: caption at the foot on a dark fade, not across the middle (Mal, 2026-09-28 — it fought
   the figure on the white opening shot). Tiles with no picture yet keep it centred. */
#p7 .mos img~.mc{align-self:end;justify-self:stretch;padding:34px 8px 10px;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.82) 55%)}

/* "← Back to storyboard" on page 5 (app.js paintBoardBack): floats just above the navbar, at the right edge of the column */
.board-back{position:fixed;z-index:60;bottom:calc(94px + env(safe-area-inset-bottom));
  right:max(16px,calc((100vw - var(--maxw)) / 2 + 16px));box-shadow:var(--shadow);background:#232838}
.board-back[hidden]{display:none}
body:has(#boardBack:not([hidden])) #pedit{padding-bottom:56px}   /* so it never sits over the last card's buttons */

/* ---- share (page 8) ---- */
.share-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.share-btn{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--ink-3);color:var(--txt);font:600 16px/1 var(--sans);cursor:pointer}
.share-btn:hover{background:#20252f;text-decoration:none}
/* page 8: the button to the movie's own page (2026-09-28) */
#p10 .moviepage{margin:0 0 26px}
#p10 .moviepage .small{margin:0}
/* "View your Customised Webpage" (Mal 2026-09-29) is wider than a 375 px phone at .btn-lg padding: full width there, tighter sides, may wrap */
@media (max-width:480px){#p10 #moviePageBtn{display:flex;width:100%;justify-content:center;text-align:center;padding-left:14px;padding-right:14px;white-space:normal}}

/* The big gold buttons sit in the middle of every app page (Mal, 2026-10-01): pay & start, pages 2-3 "Next:", page 8's movie page.
   :not([hidden]) so a button that is waiting to appear stays hidden. */
.page .btn.btn-primary.btn-lg:not([hidden]),.page .btn.btn-red.btn-lg:not([hidden]){display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;justify-content:center;text-align:center}
#payStartNote{text-align:center}

/* ---- misc ---- */
.notice{border:1px solid rgba(232,181,103,.3);background:rgba(232,181,103,.07);border-radius:var(--r-sm);
  padding:13px 15px;font-size:16px;color:var(--txt-2);margin:16px 0}
.notice b{color:var(--gold)}
.notice.plain{border-color:var(--line);background:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:80;background:#232838;
  border:1px solid var(--line-2);border-radius:999px;padding:10px 20px;font-size:16px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* ---- responsive corrections ---- */
/* The brand wraps on narrow phones and pushes the bar past its 60px height. */
.appbar .brand{white-space:nowrap;flex:none}
.appbar .wrap{gap:10px}
@media(max-width:520px){
  .appbar .brand span,.appbar .brand{font-size:24px}
  .appbar .brand .mark{height:32px}
  .appbar .btn-sm{padding:7px 10px;font-size:14px}
  .appbar .save-note{display:none}
  .appbar .wrap{padding-left:16px;padding-right:16px}
}
/* Narrow phones: the mark alone stands for the brand so Save-for-later and Sign-in always fit. */
@media(max-width:400px){.appbar .brand{font-size:0;gap:0}}
/* Signed in (auth.js adds #acctLink): Save for later + Account + Sign out beside the mark ran 3px past a 375px
   screen (sideways scroll on every page). Tighter gaps and buttons, signed-in only; the signed-out bar is unchanged. */
@media(max-width:400px){
  .appbar .wrap:has(#acctLink){gap:6px}
  .appbar .wrap:has(#acctLink) .btn-sm{padding:7px 8px;font-size:13px}   /* same height as before, narrower */
}
/* Mid widths (2026-09-28): signed in at ~520–1180px the bar ran up to ~130px past the window — the email and the save note
   kept their full text (it spilled past their 90px boxes) and the full brand never gave way. The notes now truncate and
   drop out as the window narrows (Account / Sign out already say you are signed in); signed in below 700px the mark
   alone stands for the brand, as on narrow phones. Buttons never shrink. */
.appbar .btn-sm,.appbar #acctLink{flex:none}
.appbar .save-note{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.appbar #authWho{display:none}}
@media(max-width:860px){.appbar .save-note{display:none}}
@media(max-width:700px){.appbar .wrap:has(#acctLink) .brand{font-size:0;gap:0}}
/* Signed out, 521–560px: the full-size brand ran 5px past the edge just above the 520px phone rules. */
@media(min-width:521px) and (max-width:560px){.appbar .brand{font-size:24px}.appbar .brand .mark{height:32px}}
/* Signed out, 401–450px: the name came back 1px above the 400px mark-only rule and ran up to 43px past the edge. */
@media(min-width:401px) and (max-width:450px){.appbar .brand{font-size:0;gap:0}}
/* Page 7's two-column layout has to collapse or it forces a horizontal page scroll. */
#refineGrid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
@media(max-width:760px){#refineGrid{grid-template-columns:minmax(0,1fr)}}
/* Page 9's pane headers - Drafts, Your final clips, Need more drafts?, Take it into DaVinci Resolve, Your movie with its
   new soundtrack - are Times New Roman bold, white, one size up (Mal, 2026-10-12). 30px, because Times draws smaller than
   Playfair: bold Times at 28px has exactly the letter height of the old 25px, so 30px is the first size that reads bigger
   (the same step as the scene editor's headers, 22px to 27px). Page 9 only. The admin's red "Final video model" card has its
   own title and is not a pane header. */
/* Gold since 2026-10-16 (Mal), to match the scene editor's step headers. LOCKED by Mal 2026-10-16 - change only on request. */
#p9 .card>h3{font-family:"Times New Roman",Times,serif;font-weight:700;font-size:30px;color:var(--gold);letter-spacing:0}
/* The draft frame is a preview, not a hero — cap it so it doesn't dominate the phone view. */
#draftFrame{width:min(260px,72vw)}

/* ---- sign-in dialog ---- */
dialog.auth{background:var(--ink-3);color:var(--txt);border:1px solid var(--line-2);border-radius:var(--r);
  padding:26px 24px 22px;width:min(420px,calc(100vw - 32px));box-shadow:var(--shadow);position:relative}
dialog.auth::backdrop{background:rgba(5,7,11,.72);backdrop-filter:blur(3px)}
dialog.auth h2{margin-bottom:6px}
dialog.auth .x{position:absolute;right:12px;top:10px;width:32px;height:32px;border-radius:50%;border:0;
  background:transparent;color:var(--txt-3);font-size:25.5px;cursor:pointer}
dialog.auth .x:hover{color:var(--txt);background:#20252f}
dialog.auth .or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--txt-3);font-size:14px;
  text-transform:uppercase;letter-spacing:.14em}
dialog.auth .or::before,dialog.auth .or::after{content:"";flex:1;border-top:1px solid var(--line)}
dialog.auth .google{background:#fff;color:#000;border-color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
dialog.auth .google:hover{background:#ececec;border-color:#ececec}
dialog.auth a{color:var(--gold);text-decoration:none}
dialog.auth a:hover{text-decoration:underline}

/* ---- page 2: catalogue search, artwork, preview states ---- */
.search-row{position:relative;margin-bottom:12px}
.search-row input[type=search]{width:100%;-webkit-appearance:none;appearance:none;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font:400 17px/1.4 var(--sans);padding:11px 38px 11px 14px}
.search-row input[type=search]::-webkit-search-cancel-button{display:none}
.search-row input:focus{border-color:var(--gold-dim);outline:none}
.search-row button{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;background:transparent;
  color:var(--txt-3);font-size:22px;line-height:1;cursor:pointer}
.search-row button:hover{color:var(--txt)}

.track .art{width:44px;height:44px;flex:none;border-radius:6px;object-fit:cover;background:#05070b}
.track .play[data-state=busy]{opacity:.5}
.track .play[data-state=playing]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.track .t-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.track .t-artist{font-weight:400;font-size:15px;color:var(--txt-3)}

.track-note{padding:16px 15px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  color:var(--txt-2);font-size:16px;text-align:center}
.track-note b{display:block;color:var(--txt);margin-bottom:4px;font-weight:600}
.track-skel{height:70px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);
  position:relative;overflow:hidden}
.track-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  animation:skel 1.15s ease-in-out infinite}
@keyframes skel{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.track-skel::after{animation:none}}
#trackMore{margin-top:12px;text-align:center}

/* ── account (account.html + the after-payment dialog) ── */
.acct-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.acct-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;background:#161a22;border:1px solid var(--line-2);flex:none;display:grid;place-items:center}
.acct-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.acct-avatar-ph{font-size:30px;font-weight:600;color:var(--txt-3)}
.acct-head h3{margin:0 0 2px}
.acct-tick{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--txt-2);margin:4px 0 14px;cursor:pointer}
.acct-tick input{margin-top:3px;flex:none}
.acct-actions{display:flex;align-items:center;gap:12px}
.acct-movie{padding:14px 0;border-top:1px solid var(--line)}
.acct-movie:first-child{border-top:0;padding-top:0}
.acct-movie-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.acct-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* the Upgrades card on /account and the "bought" lines under a movie (Mal, 2026-10-01) */
.acct-upgrades{margin-top:16px}
.acct-upgrade{display:flex;justify-content:space-between;gap:12px 24px;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.acct-upgrade>div:first-child{flex:1 1 320px;min-width:0}
.acct-upgrade>div:first-child b{display:block;margin-bottom:4px}
.acct-upgrade-buy{display:flex;align-items:center;gap:12px;flex:0 1 auto;flex-wrap:wrap}
.acct-upgrade-buy .price{font-weight:600;min-width:72px}
.acct-upgrade-buy .btn[disabled]{opacity:.45}
.acct-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.acct-pick select{width:auto;max-width:100%;padding:8px 12px;border-radius:10px}
.acct-paid{background:rgba(232,181,103,.13);border:1px solid rgba(232,181,103,.32);color:var(--gold);border-radius:var(--r);padding:12px 16px;margin-bottom:16px}
.acct-bought{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.acct-bought-line .acct-links{display:inline-flex;margin-left:8px;vertical-align:middle}
dialog.auth .acct-tick{margin-top:2px}

/* ── page 5 on phones: one scene card open, the rest are one-line rows (O3 / mobile) ── */
@media(max-width:760px){
  .scene-card>.sc-head{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .scene-card:not(.open)>.sc-body,.scene-card:not(.open)>.sc-actions{display:none}
  .scene-card:not(.open)>.sc-head{border-bottom:0}
  .sc-chev{flex:none;color:var(--txt-3);font-size:23px;line-height:1;transition:transform .15s}
  .scene-card.open .sc-chev{transform:rotate(90deg)}
  .sc-state{flex:none;font-size:12.5px;letter-spacing:.04em;color:var(--txt-3);white-space:nowrap}
}
@media(min-width:761px){.sc-chev,.sc-state{display:none}}

/* ---- the æntenna page (page 10) ----
   Layout mirrors the æ coin landing page in the æntenna app (ae.html): centred hero,
   hairline rules with roman numerals, a four-element grid, stacked steps, a store card.
   Set in this site's own tokens; the æ ligature is a serif italic, as on the original. */
.ae-page{max-width:820px}
.ae-page .page-head{margin-bottom:10px}
.ae{font-family:var(--serif);font-style:italic;font-weight:400}
.ae-hero{text-align:center;padding-top:4px}
.ae-logo{position:relative;margin:0 auto;max-width:460px;background:#000;border-radius:var(--r);overflow:hidden}
.ae-logo img{width:100%;height:auto}
.ae-logo::after{content:"";position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(ellipse 60% 56% at 50% 46%,rgba(11,13,18,0) 42%,var(--ink) 84%)}
.ae-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--txt-2);
  margin:14px 0 14px;text-indent:.42em}
.ae-tagline{font-size:clamp(25.5px,4vw,37px);font-weight:300;letter-spacing:-.01em;line-height:1.28;
  margin:0 auto 6px;max-width:26ch;text-shadow:0 0 34px rgba(232,181,103,.18)}
.ae-lede{font-size:clamp(18.5px,2.5vw,22px);color:var(--txt-2);max-width:46ch;margin:18px auto 0}
.ae-lede em,.ae-prose em{color:var(--txt);font-style:italic}
.ae-cta{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ae-rule{width:1px;height:56px;margin:52px auto 0;background:linear-gradient(to bottom,transparent,var(--line-2),transparent)}
.ae-num{display:block;text-align:center;font-family:var(--serif);font-size:17px;color:var(--gold);
  letter-spacing:.1em;margin:36px 0 8px;text-shadow:0 0 20px rgba(232,181,103,.35)}
.ae-section-h{font-size:14px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--txt-2);
  text-align:center;margin:0 0 18px}
.ae-h2{text-align:center;margin:0 auto 20px;max-width:26ch;font-weight:500;line-height:1.3}
.ae-prose{max-width:58ch;margin:0 auto;color:var(--txt-2);font-size:19px;line-height:1.7}
.ae-prose p{margin:0 0 16px}
.ae-pull{font-family:var(--serif);font-style:italic;font-size:clamp(20.5px,3vw,25.5px);line-height:1.5;
  text-align:center;max-width:32ch;margin:28px auto 0;color:var(--txt)}
.ae-four{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;margin:24px 0 0}
.ae-four div{background:var(--ink-2);padding:20px 14px;text-align:center}
.ae-four b{display:block;font-size:18.5px;font-weight:600;color:var(--txt);margin-bottom:5px}
.ae-four span{display:block;font-size:16px;color:var(--txt-2);line-height:1.5}
@media(max-width:640px){.ae-four{grid-template-columns:repeat(2,1fr)}}
.ae-steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;margin-top:24px}
.ae-step{background:var(--ink-2);padding:22px 24px}
.ae-step .n{font-family:var(--serif);font-size:16px;color:var(--gold);letter-spacing:.06em}
.ae-step h4{font-size:19.5px;font-weight:600;margin:8px 0 5px}
.ae-step p{margin:0;color:var(--txt-2);font-size:17px;line-height:1.65}
.ae-fineprint{text-align:center;color:var(--txt-3);font-size:16px;margin:22px auto 0;max-width:54ch;line-height:1.65}
.ae-fineprint b{color:var(--txt-2);font-weight:400}
.ae-get{background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r);padding:28px 22px;margin-top:24px;
  text-align:center;box-shadow:var(--shadow)}
.ae-get .icon{width:72px;height:72px;border-radius:18px;margin:0 auto 12px;box-shadow:0 0 30px rgba(232,181,103,.22)}
.ae-get h3{font-size:25.5px;margin:0 0 6px}
.ae-get p{color:var(--txt-2);font-size:18px;margin:0 auto 18px;max-width:44ch}
.ae-stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ae-store{font-weight:600;font-size:18.5px;color:var(--gold-ink);background:var(--gold);border:1px solid var(--gold);
  border-radius:12px;padding:12px 20px;min-width:172px;display:inline-block;line-height:1.25;
  transition:background .16s ease,box-shadow .16s ease}
.ae-store small{display:block;font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.ae-store:hover{background:#f0c37d;text-decoration:none;box-shadow:0 0 28px rgba(232,181,103,.28)}
.ae-store.ghost{background:transparent;color:var(--txt);border-color:var(--line-2)}
.ae-store.ghost:hover{background:#20252f;box-shadow:none}
.ae-then{margin:22px 0 0;font-size:16px;color:var(--txt-3);line-height:1.7}

/* page 7 — the DaVinci Resolve package */
.bar{height:8px;border:1px solid var(--line);border-radius:999px;background:var(--ink-2);overflow:hidden;margin:10px 0 6px}
.bar>i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s}
.pkg-meta{font-size:14.5px;color:var(--txt-3);margin:8px 0 0}
.pkg-meta b{color:var(--txt)}
/* page 7: "Download for DaVinci Resolve · 412 MB" ran past its card on a 375 px phone (2026-09-30) — let the long buttons wrap */
#p9 #resolveBody .btn{max-width:100%;white-space:normal;text-align:center}
/* page 7: Export Final Movie is a blue button on every site (Mal, 2026-10-07; Vision Movie also sets it in vm-brand.css) */
#p9 #exportVideo{background:#4f8cff;border-color:#4f8cff;color:#fff;box-shadow:none}
#p9 #exportVideo:hover{background:#6a9dff;border-color:#6a9dff;color:#fff}
#resolveCard code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;color:var(--gold)}

/* ---- page 2: Find on YouTube ---- */
.yt-search{display:flex;gap:8px;margin-bottom:8px}
.yt-search input[type=search]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font:400 17px/1.4 var(--sans);padding:11px 14px}
.yt-search input[type=search]::-webkit-search-cancel-button{display:none}
.yt-search input:focus{border-color:var(--gold-dim);outline:none}
#ytStatus{min-height:1.3em;margin:0 0 12px}
#ytStatus.err{color:#e08a8a}
.yt-player{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--ink-2);margin-bottom:14px}
.yt-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.yt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-meta{padding:12px 15px 0}
.yt-player .check{margin:12px 15px 0}
.yt-use{padding:12px 15px 15px;display:grid;gap:10px}
.yt-use .small{margin:0;min-height:1.3em}
.yt-bar{height:8px;background:var(--ink-3);border-radius:999px;overflow:hidden}
.yt-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease}
.yt-bar.indeterminate i{width:40%;animation:ytslide 1.1s ease-in-out infinite}
@keyframes ytslide{0%{margin-left:-40%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.yt-bar.indeterminate i{animation:none;width:100%}}
.yt-row{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ink-2);cursor:pointer;transition:border-color .15s ease}
.yt-row:hover{border-color:var(--line-2)}
.yt-row[aria-selected=true]{border-color:var(--gold)}
.yt-row.too-long{opacity:.55}
.yt-thumb{position:relative;width:128px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#05070b}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-thumb .dur{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.8);color:#fff;font-size:13px;padding:1px 5px;border-radius:4px}
.yt-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
.yt-info .t{font-weight:600;font-size:16.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-info .c{color:var(--txt-3);font-size:14.5px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.yt-row{grid-template-columns:104px 1fr}.yt-thumb{width:104px}}

/* pages 1 + 2: text inside the cards matches the page's body text (18.5px) — Mal, 2026-09-25 */
#p1 .flow .node,#p1 .flow .node b,#p1 .card .small,#p1 .card .check,
#p2 .notice,#p2 .track .t-name,#p2 .track .t-artist,#p2 .track .t-meta,#p2 .track-note,
#p2 .yt-info .t,#p2 .yt-info .c,#p2 .yt-player .check,#p2 .drop .small{font-size:18.5px}
/* page 2: the sign-in prompt in the YouTube notice is a real button, styled as gold link text */
#p2 .notice .yt-signin{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--gold);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#p2 .notice .yt-signin:hover{color:var(--txt)}
/* phones: the track's length · bpm · mood line steps down so the cards stay compact */
@media(max-width:600px){#p2 .track .t-meta{font-size:16.5px}}
/* page 3: the red-dress photo sits centred above the upload box. Same edge fade as the cellist, so its
   black background melts into the page. Phones: full column width. */
#p3 .p3-art{height:380px;width:auto;margin:6px auto 22px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);
  mask-composite:intersect}
@media(max-width:600px){#p3 .p3-art{height:auto;width:100%}}
/* page 3: rounds of base images (newest first, older ones folded) and "3 · Refine with Claude" */
#p3 .avatar-mode{color:var(--gold);margin:-4px 0 14px}
#p3 .refine-exact p{white-space:pre-line}
/* page 3: bigger pictures — hover preview (mouse) and full-screen viewer (touch). Children of <body>, above the
   bars (50) and below the toast (80). */
.zoom-peek{position:fixed;z-index:60;pointer-events:none;border-radius:12px;overflow:hidden;background:#05070b;
  border:1px solid var(--line-2);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.zoom-peek[hidden]{display:none}
.zoom-peek img{width:100%;height:100%;object-fit:contain;display:block;max-width:none}
.zoom-box{position:fixed;inset:0;z-index:75;background:rgba(5,7,11,.95);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:16px}
.zoom-box[hidden]{display:none}
.zoom-box img{max-width:100%;max-height:calc(100% - 84px);object-fit:contain;border-radius:10px}
.zoom-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.zoom-bar [hidden]{display:none}
#p3 .avatar-mode[hidden]{display:none}
#p3 .round{margin-bottom:16px}
#p3 .round-head{margin:6px 0 10px;font-size:16.5px}
/* page 3: the wait while a draft is being made - black on gold, big (Mal, 2026-10-10). The gold is written out, not
   var(--gold): a brand pack may recolour its accent (Vision Movie does on pages 1 and 2) and this must stay gold. */
.gen-banner{display:flex;flex-direction:column;gap:8px;margin:8px 0 20px;padding:20px 24px;border-radius:14px;
  background:#e8b567;color:#000}
.gen-banner strong{font-size:27px;line-height:1.25;font-weight:700;color:#000}
.gen-banner span{font-size:19px;line-height:1.4;color:#000}
@media(max-width:600px){.gen-banner{padding:16px 18px}.gen-banner strong{font-size:22px}.gen-banner span{font-size:17.5px}}
#p3 .round-refused{color:var(--gold);margin:-4px 0 10px}
#p3 .round-older{margin:4px 0 12px}
#p3 .round-older>summary{cursor:pointer;margin-bottom:12px}
#p3 .refine-chat{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;margin:14px 0;
  padding:14px;border:1px solid var(--line);border-radius:12px;background:#0e1118}
#p3 .refine-example{text-transform:uppercase;letter-spacing:.08em;font-size:12.5px}
#p3 .bubble{max-width:85%;padding:9px 13px;border-radius:14px;font-size:16.5px;line-height:1.45;overflow-wrap:anywhere}
#p3 .bubble.you{align-self:flex-end;background:rgba(232,181,103,.14);color:var(--txt);border-bottom-right-radius:4px}
#p3 .bubble.claude{align-self:flex-start;background:var(--ink-3);color:var(--txt-2);border:1px solid var(--line);border-bottom-left-radius:4px}
#p3 .bubble.note,#p3 .bubble.thinking{font-style:italic;color:var(--txt-3)}
#p3 .refine-ask{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px}
#p3 .refine-ask textarea{min-height:0;flex:1}
#p3 .refine-look{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
#p3 .look-chip{display:inline-flex;align-items:center;gap:2px}
#p3 .look-x{border:0;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 0 0 4px}
#p3 .look-x:disabled{opacity:.4;cursor:default}
#p3 .refine-links{margin-left:auto;display:flex;gap:8px}
#p3 .refine-exact{margin-bottom:18px}
#p3 .refine-exact>summary{cursor:pointer}
#p3 .refine-exact p{margin:8px 0 0;color:var(--txt-2)}
#p3 .refine-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-4px 0 14px;color:var(--gold);font-size:16.5px}
#p3 .refine-status[hidden],#p3 .refine-status [hidden]{display:none}
#p3 .refine-how{margin:-4px 0 10px}
#p3 .refine-options{margin-bottom:12px}
#p3 .refine-options>summary{cursor:pointer;margin-bottom:10px}
#p3 .refine-buildon{display:flex;gap:8px;align-items:center;margin:0 0 14px}
@media(max-width:600px){
  #p3 .refine-ask{flex-direction:column;align-items:stretch}
  #p3 .refine-ask textarea{min-height:108px}
  #p3 .refine-links{margin-left:0}
  #p3 .bubble{max-width:92%}
}

/* ---- page 4 background portrait (experiment, 2026-09-25) ----
   Only while #p4 is the page on screen. A fixed ::before layer, not background-attachment:fixed,
   which iOS Safari ignores. z-index:-1 is safe: body's ground colour paints on the canvas, below it.
   The question cards go part-transparent on this page only, so the face reads through the words. */
body.app:not([data-selfbg]):has(#p4:not([hidden]))::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(/assets/p4/portrait-bg.jpg) center 35%/cover no-repeat;opacity:.34}
#p4 .q{background:rgba(18,21,29,.55)}
/* v3 questions (2026-09-26): a "Part two" prompt with its own answer box, under its question */
#p4 .q .qpart{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
#p4 .q .qpart .qk{margin:4px 0 0}
#p4 .q .qpt{font-size:18px}

/* ---- pages 4–9: the person's own picked shot on black (2026-09-25) ----
   paintSelfBg() in app.js sets data-selfbg + --self-bg: close-up 4/7, medium 5/8, wide 9 (not pages 6 or 10) (worker/black-bg.mjs
   makes the black copies). Same treatment as the page-4 portrait above, which stays as page 4's fallback. The 3:4
   image is fitted to the window height so a wide shot keeps its head and feet; the layer itself is black, so no
   edge shows beside it on a wide screen. The big surfaces on these pages go part-transparent so the figure reads through. */
body.app[data-selfbg]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#000 var(--self-bg) center/auto 100% no-repeat;opacity:.34}
body.app[data-selfbg] .page .scene-card,body.app[data-selfbg] .page .track{background:rgba(18,21,29,.55)}
body.app[data-selfbg] .page .card{background:rgba(25,29,39,.6)}
/* page 2 (the cellist, a fixed picture via FIXED_BG in app.js): the YouTube result rows read through too */
body.app[data-selfbg] #p2 .yt-row{background:rgba(18,21,29,.55)}
/* page 1 (Judy's Angel, Scene 07 on black, via FIXED_BG): the five flow cards read through too (2026-09-30) */
body.app[data-selfbg] #p1 .flow .node{background:rgba(18,21,29,.55)}
/* page 1 only: fainter than the .34 the other pages use (Mal: the picture was too strong, 2026-09-30) */
body.app[data-selfbg="fixed"]:has(#p1:not([hidden]))::before{opacity:.22}

/* "Report bug" footer on the app pages (site pages carry it in .foot). Sits below the sticky
   navbar in normal flow, so it only shows once you scroll to the very end. */
.bugfoot{padding:14px 0 calc(18px + env(safe-area-inset-bottom));font-size:14px;color:var(--txt-3)}
.bugfoot .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
/* page 8 carries the full link row (.linkfoot, which already has the ©), so the © here would say it twice */
body.app:has(#p10:not([hidden])) .bugfoot .copy{display:none}
/* page 8 and the movie page: the site's link row, in Mal's order (2026-09-28) */
.linkfoot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:44px 0 0;padding:24px 0 0;
  border-top:1px solid var(--line);font-size:15.5px;color:var(--txt-3);text-align:center}
.linkfoot a{color:var(--txt-2)}
.bugfoot a{color:var(--txt-3)}
.bugfoot a:hover{color:var(--txt-2)}

/* page 5 "Use an image from our database" (2026-09-27/28): a fold-out box on each normal scene card */
.page .own-prompt{border-top:1px solid var(--line);padding-top:12px}
.page .own-prompt>summary{cursor:pointer;color:var(--txt)}
.page .own-prompt[open]>summary{margin-bottom:8px}
.page .own-prompt>p.small{margin:0 0 10px;line-height:1.5}
.page .own-prompt>.btn{margin:0 0 12px}
.page .pb-from{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.page .pb-from img{height:56px;width:auto;border-radius:4px;display:block}

/* the image database panel (Prompt Bank, 2026-09-28) — appended to <body>, so its classes are global and prefixed pb- */
.pb-overlay{position:fixed;inset:0;z-index:1000;background:rgba(5,7,10,.72);display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
.pb-panel{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);width:min(1200px,100%);
  height:94vh;display:flex;flex-direction:column;overflow:hidden;position:relative}
.pb-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pb-head b{color:var(--txt);white-space:nowrap}
.pb-search{flex:1;min-width:0;font-size:16px}
.pb-close{background:none;border:0;color:var(--txt-2);font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.pb-body{flex:1;overflow-y:auto;padding:10px 10px 24px}
.pb-label{margin:6px 2px 8px}
.pb-rows{width:100%}
.pb-row{display:flex;width:100%}
.pb-tile{padding:0;margin:0;border:0;background:var(--ink-2);cursor:pointer;min-width:0;overflow:hidden;position:relative}
.pb-hard{position:absolute;left:4px;right:4px;bottom:4px;background:rgba(5,7,10,.78);color:var(--txt-2);font-size:11px;line-height:1.3;
  padding:3px 5px;border-radius:3px;text-align:center}
.pb-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s}
.pb-tile:hover img,.pb-tile:focus-visible img{opacity:.8}
@media (max-width:600px){.pb-overlay{padding:0}.pb-panel{height:100%;border-radius:0;border:0}.pb-head b{display:none}}
#pedit .scene-notes{border:1px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px}
#pedit .scene-notes>summary{cursor:pointer;color:var(--txt-2)}
#pedit .scene-notes[open]>summary{margin-bottom:10px}
#pedit .scene-notes>.field,#pedit .scene-notes>.grid{margin-top:10px}
.page .motion-undo{margin-top:-6px}
.page .motion-undo .linkish{background:none;border:0;padding:0;color:var(--gold);cursor:pointer;font:inherit;text-decoration:underline}
/* the big view inside the panel (2026-09-28): tap a tile to see it large */
.pb-view{position:absolute;inset:0;z-index:2;background:rgba(5,7,10,.94);display:flex;flex-direction:column}
.pb-view[hidden]{display:none}
.pb-view-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px 6px}
.pb-view-img img{max-width:calc(100% - 96px);max-height:100%;object-fit:contain;border-radius:4px;display:block}
.pb-nav{flex:0 0 40px;height:56px;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font-size:30px;line-height:1;cursor:pointer}
.pb-nav:disabled{opacity:.25;cursor:default}
.pb-view-foot{padding:10px 16px 16px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.pb-view-title{color:var(--txt)}
@media (max-width:600px){.pb-view-img{padding:10px 4px 4px;gap:4px}.pb-nav{flex-basis:32px;height:48px;font-size:26px}
  .pb-view-img img{max-width:calc(100% - 72px)}}

/* page 5 caption assist (2026-09-28): word count, a preview of how the caption sets, Auto / Two / Three */
.page .cap-assist{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;margin:-6px 0 4px}
.page .cap-live{flex:1 1 260px;min-width:0}
.page .cap-meta{font-size:13px;color:var(--txt-3);margin-bottom:6px}
.page .cap-over{color:var(--warn);font-weight:600}
.page .cap-prev{background:#000;border-radius:var(--r-sm);padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;color:#fff;line-height:1.15;letter-spacing:.06em;text-shadow:0 2px 3px rgba(0,0,0,.9)}
.page .cap-prev .l1{font:200 19px/1.15 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}
.page .cap-prev .l2{font:700 19px/1.15 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}
.page .cap-prev.three{align-items:center}
.page .cap-prev.three .l2{font:italic 700 21px/1.15 Times,"Times New Roman",serif;text-transform:none;letter-spacing:.04em}
.page .cap-prev.three .l3{font:700 16px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;color:#e0262b}
.page .cap-choice{flex:0 0 auto;font-size:14px;padding:6px 8px;max-width:100%}
/* page 2: "Where should the music start?" — shown under the tabs once an upload or YouTube track is in the movie */
#p2 .music-start{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(18,21,29,.72)}
#p2 .music-start .ms-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px;font-size:18.5px}
#p2 .music-start .ms-head b{color:var(--txt)}
#p2 .music-start .ms-row{display:flex;align-items:center;gap:12px}
#p2 .music-start .play{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);background:#232838;color:var(--gold);cursor:pointer;font-size:15px;padding:0}
#p2 .music-start .play[data-state=playing]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
#p2 .music-start input[type=range]{flex:1;min-width:0;accent-color:var(--gold);height:28px}
#p2 .music-start .ms-time{flex:none;font-variant-numeric:tabular-nums;color:var(--txt-2);font-size:16.5px}
#p2 .music-start #msNote{margin:10px 0 14px;font-size:16.5px}
#p2 .music-start .ms-actions{display:flex;flex-wrap:wrap;gap:10px}
#p2 .music-start .notice{margin:16px 0 0;font-size:18.5px;color:var(--txt)}
#p2 .music-start [hidden]{display:none}
/* page 9: the remakes (0026) — landscape 1080p and 4K, each with a 16:9 example clip (Mal's picks, /assets/p9/) */
#p11 .remakes{border-color:var(--line-2)}
#p11 .remake{display:flex;flex-direction:column;gap:6px;min-width:0}
#p11 .remake b{color:var(--txt);font-size:18px}
#p11 .remake-frame{aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#000;border:1px solid var(--line);margin-bottom:6px}
#p11 .remake-frame video,#p11 .remake-frame img{width:100%;height:100%;object-fit:cover;display:block}
#p11 .remake-frame.no-example{display:grid;place-items:center;color:var(--txt-3,#8e97a8);font-size:14px}
#p11 .remake-frame.no-example::after{content:"Example coming soon"}
#p11 .remake-status{color:var(--gold)}
#p11 .remake-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#p11 .remake [hidden]{display:none}
/* page 9 tiles (Mal, 2026-09-30): every tile opens what it is about; a gold edge says so. Class p9-tile, NOT .tile
   (.tile is page 5's 9:16 image thumbnail: it made these cards tall and black) */
#p11 .p9-tile{cursor:pointer;transition:border-color .15s,background-color .15s}
#p11 .card.p9-tile:hover,#p11 .card.p9-tile:focus-visible{border-color:var(--gold);outline:none}
#p11 .remake.p9-tile:hover .remake-frame,#p11 .remake.p9-tile:focus-within .remake-frame{border-color:var(--gold)}
#p11 .tile-go{display:inline-block;margin-top:12px;color:var(--gold);font-size:15px;font-weight:600}
/* the interim pages: Review your Vision, Give one away */
dialog.sheet{width:min(480px,calc(100vw - 32px))}
dialog.sheet .sheet-list{margin:12px 0 18px;padding-left:20px;line-height:1.55;color:var(--txt-2)}
dialog.sheet .sheet-list li{margin:6px 0}
dialog.sheet .sheet-list b{color:var(--txt)}
dialog.sheet textarea{width:100%;resize:vertical;min-height:84px;font:inherit}
dialog.sheet #giftLink{font-size:14px}

/* Video budget chip on page 5 (Mal, 2026-09-30): quiet until 10 left, amber at 10, warmer at 5 */
.vmeter{position:relative;margin-left:auto}
.vm-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--txt-3);font:inherit;font-size:13px;cursor:pointer}
.vm-chip:hover,.vm-chip:focus-visible{color:var(--txt-2);border-color:var(--txt-3)}
.vm-bar{width:46px;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.vm-bar i{display:block;height:100%;width:0;background:currentColor;transition:width .3s}
.vmeter.warn .vm-chip{color:var(--gold);border-color:var(--gold-dim)}
.vmeter.low .vm-chip{color:#f2a48c;border-color:#b5604a}
.vm-pane{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(340px,calc(100vw - 32px));padding:14px 16px;
  border:1px solid var(--line-2);border-radius:12px;background:#1a1f2b;box-shadow:0 14px 40px rgba(0,0,0,.5);font-size:14px;line-height:1.5}
.vm-pane[hidden]{display:none}
.vm-pane p{margin:8px 0 12px;color:var(--txt-2)}
.vm-pane .vm-nudge{color:var(--gold)}
.vmeter.low .vm-pane .vm-nudge{color:#f2a48c}
@media (max-width:560px){.vmeter{margin-left:0;width:100%}.vm-pane{left:0;right:auto}}

/* Hedley's question videos (2026-10-03). Poster first, player on tap; 16:9; scoped to page 4. */
#p4 .qvid{margin:14px 0 6px}
#p4 .qvid-btn{position:relative;display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;cursor:pointer;color:#fff;font:inherit;text-align:left}
#p4 .qvid-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s}
#p4 .qvid-btn:hover img,#p4 .qvid-btn:focus-visible img{opacity:1}
#p4 .qvid-btn:focus-visible{outline:2px solid var(--gold,#d9b36c);outline-offset:3px}
#p4 .qvid-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.9)}
#p4 .qvid-play::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
#p4 .qvid-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;font-size:13.5px;letter-spacing:.02em;background:linear-gradient(transparent,rgba(0,0,0,.78))}
#p4 .qvid.live .qvid-player{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000}
#p4 #p4intro .qvid{margin:4px 0 20px}
#p4 #p4outro .qvid{margin:22px 0 4px}
@media(max-width:600px){#p4 .qvid-play{width:54px;height:54px;margin:-27px 0 0 -27px}#p4 .qvid-play::after{left:21px;top:15px;border-width:11px 0 11px 18px}}
#p4 .p4next{margin:34px 0 4px;font-family:var(--serif,"Playfair Display",serif);font-weight:600;font-size:clamp(30px,5.4vw,46px);line-height:1.15;letter-spacing:-.01em}

/* New soundtrack (0052, Mal 2026-10-08): page 8's offer, page 2's banner, page 7's preview over the finished movie */
.swap-offer { margin-top: 22px; }
.swap-banner { margin: 0 0 18px; }
.swap-player { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.swap-player [hidden] { display: none !important; }
.swap-player video { width: 100%; max-width: 240px; aspect-ratio: 9 / 16; background: #000; border-radius: 12px; object-fit: cover; }
.swap-player .swap-empty { width: 100%; max-width: 240px; aspect-ratio: 9 / 16; border-radius: 12px; border: 1px dashed var(--line, rgba(255,255,255,.2));
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; box-sizing: border-box; font-size: 13px; opacity: .8; }


/* ---- the page split (Mal, 2026-10-11): pages 5, 6 and 8, and the page map ---- */
.navbar button.step-label{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;border-radius:6px}
.navbar button.step-label:hover,.navbar button.step-label:focus-visible{color:var(--gold);outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.back-link{color:var(--gold);border-color:rgba(232,181,103,.4)}
.back-link:hover{background:rgba(232,181,103,.1)}
.btn.btn-red.btn-wait{background:#4a2a2a;border-color:#4a2a2a;color:#f0b4b4}
.lbl,.page p.lbl,.rw-card p.lbl{font-size:13.5px;line-height:1.3;color:var(--txt-3);letter-spacing:.08em;text-transform:uppercase;margin:0}
.rw-full{background:none;border:0;padding:0;color:var(--gold);cursor:pointer;font:inherit;font-weight:600}
.rw-full:hover{text-decoration:underline}
/* the shared row head: number, caption, state chip */
.rw-head{display:flex;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);background:#141822}
.rw-num{display:inline-grid;place-items:center;width:44px;height:34px;border:1px solid var(--line-2);border-radius:8px;background:var(--ink);font:600 16px/1 var(--sans);flex:none}
.rw-num.lock{color:var(--txt-3);border-style:dashed}
.rw-cap{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-chip{flex:none;border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line-2);color:var(--txt-2);background:var(--ink-2);white-space:nowrap}
.rw-chip.ok{color:#9af0b3;border-color:rgba(87,208,122,.45);background:rgba(87,208,122,.1)}
.rw-chip.gold{color:var(--gold);border-color:rgba(232,181,103,.5);background:rgba(232,181,103,.1)}
.rw-chip.busy{color:#14110b;background:var(--gold);border-color:var(--gold)}
.rw-chip.dim{color:var(--txt-3)}
@media(max-width:600px){.rw-chip{font-size:11.5px;padding:3px 8px}.rw-head{gap:8px;padding:11px 12px}}
/* a card on pages 6 and 8 */
.rw-card{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);margin:0 0 16px;overflow:hidden;transition:opacity .2s ease}
/* no dimming (Mal, 2026-10-11): approved = a green edge; the card being worked on (.now) = gold outline + lighter ground */
.rw-card.ghost{border-left:3px solid var(--ok)}
.rw-card.now{border-color:rgba(232,181,103,.65);background:#1c2130;box-shadow:0 0 0 4px rgba(232,181,103,.08),0 18px 44px rgba(0,0,0,.45)}
.rw-card.now .rw-head{background:rgba(232,181,103,.1);border-bottom-color:rgba(232,181,103,.35)}
.rw-card.now .rw-opts .tile,.rw-card.now .rw-col .tile{border-color:var(--line-2)}
.rw-body{display:grid;gap:18px;padding:16px}
.rw-actions{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center}
.rw-card .gen-panel{padding:0;border:0;background:none;gap:12px}
.rw-card .gen-panel .own-prompt{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
/* page 5: one row per caption */
.cap-row{display:grid;grid-template-columns:56px minmax(0,1fr) 300px auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);margin-bottom:10px}
.cap-row.lock{background:var(--ink)}
.cap-row.moved{box-shadow:0 0 0 2px var(--gold);transition:box-shadow 1.2s ease}
.cap-row .pos input.sc-num{width:44px;min-width:0;height:34px;padding:0;text-align:center;font:600 16px/1 var(--sans);color:var(--txt);border:1px solid var(--line-2);border-radius:8px;background:var(--ink)}
.cap-row .pos input.sc-num:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,181,103,.25)}
.cap-row .pos input.sc-num[readonly]{color:var(--txt-3);cursor:not-allowed;border-style:dashed}
.cap-row .field{margin:0}
.cap-row .field input{font-size:17px}
.cap-row .cap-fixed{color:var(--txt-2);font-size:16px;line-height:1.45}
.cap-row .cap-fixed b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
.cap-row .cap-right .cap-assist{margin:0;flex-direction:column;gap:8px;align-items:stretch}
.cap-row .cap-right .cap-live{flex:0 0 auto;min-width:0}
.cap-row .cap-right .cap-meta{margin-bottom:4px}
.cap-row .cap-right .cap-prev{min-height:70px;justify-content:center}
.cap-row .cap-right .cap-choice{align-self:flex-start}
.cap-row .cap-tools{display:flex;gap:6px;align-items:center;flex:none}
.cap-row .cap-tools .sc-up,.cap-row .cap-tools .sc-down{width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--txt-2);font-size:17px;line-height:1;cursor:pointer}
.cap-row .cap-tools button:hover:not([disabled]){border-color:var(--gold);color:var(--gold)}
.cap-row .cap-tools button[disabled]{opacity:.28;cursor:default}
@media(max-width:860px){.cap-row{grid-template-columns:48px minmax(0,1fr) auto}.cap-row .cap-right{grid-column:2/-1}}
/* page 6: the chosen picture large on the left, the three takes and the controls on the right */
.img-card .rw-body{grid-template-columns:250px minmax(0,1fr)}
.img-card .rw-big .tile{width:250px;max-width:100%;cursor:default}
.img-card .rw-big .tile.sel{border-color:var(--ok);box-shadow:0 0 0 3px rgba(87,208,122,.2)}
.img-card .rw-big .tile.empty{border:1.5px dashed var(--line-2);background:var(--ink)}
.img-card .rw-big .tile .badge.ok{background:var(--ok);color:#06210f;font-weight:700}
.rw-opts{display:grid;grid-template-columns:repeat(3,104px);gap:10px}
.rw-opts .tile{width:104px}
@media(max-width:760px){.img-card .rw-body{grid-template-columns:1fr}.img-card .rw-big .tile{width:min(250px,100%)}.rw-opts{grid-template-columns:repeat(3,minmax(0,1fr))}.rw-opts .tile{width:auto}}
/* a 16:9 movie's pick is wider - but only beside its takes on a wide screen; phones stack (seen on Mal's own movie, 2026-10-11) */
@media(min-width:761px){body.frame-wide .img-card .rw-body{grid-template-columns:320px minmax(0,1fr)}body.frame-wide .img-card .rw-big .tile{width:320px}}
body.frame-wide .img-card .rw-big .tile{max-width:100%}
/* page 8: picture, preview, and how it moves */
.rw-body.vid{grid-template-columns:150px 200px minmax(0,1fr)}
.rw-col h4{margin:0 0 8px;font:600 13.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.rw-col .tile{width:100%;cursor:default}
.rw-col .tile.empty{border:1.5px dashed var(--line-2);background:var(--ink)}
.rw-col .back-link{margin-top:10px;font-size:13.5px;padding:5px 10px;white-space:normal;text-align:left;line-height:1.3}
.rw-col.ctl{gap:12px}
.rw-card .field>span:first-child,.rw-card label.field>span:first-child{font-size:14px;line-height:1.35}
.cap-row .field>span.sr-only{font-size:1px}
.cam-moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cam-move{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ink);padding:9px 10px;cursor:pointer;display:flex;gap:9px;align-items:center;font:500 14.5px/1.2 var(--sans);color:var(--txt-2);text-align:left}
.cam-move b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--gold-dim);color:var(--gold);font-size:13px;flex:none}
.cam-move:hover:not([disabled]){border-color:var(--gold)}
.cam-move.on{border-color:var(--gold);background:rgba(232,181,103,.1);color:var(--txt)}
.cam-move.on b{background:var(--gold);color:#14110b;border-color:var(--gold)}
.cam-move[disabled]{opacity:.5;cursor:default}
@media(max-width:860px){.rw-body.vid{grid-template-columns:150px minmax(0,1fr)}.rw-col.ctl{grid-column:1/-1}}
@media(max-width:520px){.rw-body.vid{grid-template-columns:1fr 1fr}.cam-moves{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the page map: one colour per page, the spectrum of the wordmark */
:root{--map-1:#ff5d5d;--map-2:#ff7a4d;--map-3:#ff9f43;--map-4:#e8b567;--map-5:#d9d05a;--map-6:#9ad85c;--map-7:#57d07a;--map-8:#5fd1c4;--map-9:#5bb8ff;--map-10:#8aa0ff;--map-11:#b48aff;--map-12:#d08aff}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.map-tile{position:relative;text-align:left;min-height:150px;padding:14px;border-radius:var(--r-sm);cursor:pointer;font:inherit;color:var(--txt);
  background:color-mix(in srgb,var(--tile) 14%,var(--ink-2));border:1px solid color-mix(in srgb,var(--tile) 55%,var(--line));display:flex;flex-direction:column;gap:4px;transition:transform .15s,border-color .15s}
.map-tile:hover,.map-tile:focus-visible{transform:translateY(-2px);border-color:var(--tile);outline:none}
.map-tile i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tile);margin-bottom:4px}
.map-tile b{display:block;font-size:16px;line-height:1.25;margin-bottom:2px}
.map-tile span{font-size:14px;color:var(--txt-2);line-height:1.4}
.map-tile.now{box-shadow:0 0 0 3px var(--gold);border-color:var(--gold)}
.map-tile.done{opacity:.72}
.map-tile.off{--tile:var(--gold-dim);border-style:dashed;background:transparent;grid-column:1/-1;min-height:0}
@supports not (background:color-mix(in srgb,red 10%,blue)){.map-tile{background:var(--ink-2);border-color:var(--tile)}}

/* page 5 "Already written your vision?" (Mal, 2026-10-12, 0065): a fold-out above the caption rows */
#docPanel{margin:0 0 22px}
.page .doc-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);padding:0;overflow:hidden}
.page .doc-panel[open]{border-color:rgba(232,181,103,.5)}
.page .doc-panel>summary{display:flex;gap:14px;align-items:center;padding:16px 20px;list-style:none;margin:0}
.page .doc-panel>summary::-webkit-details-marker{display:none}
.page .doc-panel>summary::after{content:'\25B8';margin-left:auto;flex:none;font-size:24px;line-height:1;color:var(--gold);transition:transform .15s ease}
.page .doc-panel[open]>summary::after{transform:rotate(90deg)}
.page .doc-panel .doc-ic{flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--gold-dim);display:grid;place-items:center;color:var(--gold);font-size:22px;background:rgba(232,181,103,.07)}
.page .doc-panel .doc-sum{flex:1;min-width:0}
.page .doc-panel .doc-sum b{display:block;font:600 21px/1.25 var(--serif);color:var(--txt)}
.page .doc-panel .doc-sum span{display:block;color:var(--txt-2);font-size:15.5px;margin-top:2px}
.page .doc-panel .doc-box{padding:4px 20px 22px;display:grid;gap:16px;border-top:1px solid var(--line)}
.page .doc-panel .doc-box>p.small{margin:14px 0 0;max-width:70ch;line-height:1.5}
.page .doc-panel .doc-box>.notice{margin:14px 0 0}
.page .doc-panel .doc-drop b{font-size:18px}
.page .doc-panel .doc-types{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.page .doc-panel .doc-types span{border:1px solid var(--line-2);border-radius:6px;padding:2px 8px;font-size:12.5px;color:var(--txt-3);letter-spacing:.04em}
.page .doc-panel .doc-field{margin:0}
.page .doc-panel .doc-field>.small{display:block;margin:0 0 8px}
.page .doc-panel .doc-text{width:100%;min-height:120px;resize:vertical;font-size:15.5px;line-height:1.5}
.page .doc-panel .doc-count{margin:6px 0 0}
.page .doc-panel .doc-wait{margin:14px 0 0;color:var(--gold);font-weight:600}
.page .doc-panel .doc-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.page .doc-panel .doc-opt{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ink);padding:14px 16px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;text-align:left;color:var(--txt-2);font:inherit;font-size:14.5px;line-height:1.4}
.page .doc-panel .doc-opt.on{border-color:var(--gold);background:rgba(232,181,103,.08)}
.page .doc-panel .doc-opt i{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);margin-top:3px;display:grid;place-items:center}
.page .doc-panel .doc-opt.on i{border-color:var(--gold)}
.page .doc-panel .doc-opt.on i::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--gold)}
.page .doc-panel .doc-opt b{display:block;color:var(--txt);font-size:16px}
.page .doc-panel .doc-go{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.page .doc-panel .doc-after{max-width:46ch}
.page .doc-panel .doc-privacy{margin:0}
@media(max-width:600px){.page .doc-panel .doc-pick{grid-template-columns:1fr}.page .doc-panel .doc-box{padding:4px 16px 18px}.page .doc-panel>summary{padding:14px 16px}.page .doc-panel .doc-sum b{font-size:19px}}

/* small pictures (Mal, 2026-10-11): a tile says it is loading until its picture has arrived, then the picture fades in */
.tile:has(img.lz:not(.ready)),.mos:has(img.lz:not(.ready)){background:#161b26}   /* a waiting tile is dark grey, not black */
.tile img.lz,.mos img.lz{opacity:0;transition:opacity .25s ease}
.tile img.lz.ready,.mos img.lz.ready{opacity:1}
.tile:has(img.lz:not(.ready))::after,.mos:has(img.lz:not(.ready))::after{content:"Loading your picture\2026";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--txt-3);font-size:12.5px;line-height:1.3;text-align:center;padding:10px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tile img.lz,.mos img.lz{transition:none}}

/* "Loading your pictures… N still coming" (Mal, 2026-10-11): a pill above the bottom bar, at the left of the column */
.pic-load{position:fixed;z-index:60;bottom:calc(94px + env(safe-area-inset-bottom));left:max(16px,calc((100vw - var(--maxw)) / 2 + 16px));
  display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;border:1px solid rgba(232,181,103,.55);background:#232838;
  color:var(--txt);font-size:14.5px;box-shadow:var(--shadow);pointer-events:none}
.pic-load b{color:var(--gold);font-weight:700}
.pic-load .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}
.pic-load[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.pic-load .dot{animation:none}}
@media(max-width:600px){.pic-load{font-size:13.5px;padding:7px 12px;bottom:calc(100px + env(safe-area-inset-bottom))}}

/* "Use a picture of your own" (Mal, 2026-10-11): the second drop-down under the image database */
.own-photo{margin-top:10px}
.own-photo .photo-box{display:grid;gap:12px;margin-top:8px}
.own-photo .photo-box>p{margin:0}
.photo-drop{padding:22px 18px}
.photo-drop .photo-choose{display:block;margin-top:12px}
.photo-drop.over{border-color:var(--gold);background:rgba(232,181,103,.08)}
.photo-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:start}
.photo-row .photo-tile{width:110px;cursor:default}
.photo-row .photo-tile img{object-fit:cover}
.photo-side{gap:8px}
.photo-side .field{margin:0}
.busy-line{display:flex;gap:10px;align-items:center;color:var(--txt-2);font-size:15px}
.busy-line .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}
@media(prefers-reduced-motion:reduce){.busy-line .dot{animation:none}}
@media(max-width:520px){.photo-row{grid-template-columns:90px minmax(0,1fr)}.photo-row .photo-tile{width:90px}}