/* 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}
#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 */
@media(max-width:1023px){#p1 .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#p1 .flow .arw{display:none}}
@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)}
.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}
.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-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}
#p5 .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}
.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}
.scene-card.ghost{opacity:.42}
.scene-card.ghost:hover{opacity:.85}
.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)}
@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. */
#p6 .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. */
#p6 .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])) #p5{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) */
#p8 .moviepage{margin:0 0 26px}
#p8 .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){#p8 #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)}}
/* 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:Georgia,"Times New Roman",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:Georgia,"Times New Roman",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:Georgia,"Times New Roman",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:Georgia,"Times New Roman",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 */
#p7 #resolveBody .btn{max-width:100%;white-space:normal;text-align:center}
#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}
#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(#p8: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 */
#p5 .own-prompt{border-top:1px solid var(--line);padding-top:12px}
#p5 .own-prompt>summary{cursor:pointer;color:var(--txt)}
#p5 .own-prompt[open]>summary{margin-bottom:8px}
#p5 .own-prompt>p.small{margin:0 0 10px;line-height:1.5}
#p5 .own-prompt>.btn{margin:0 0 12px}
#p5 .pb-from{display:flex;align-items:center;gap:10px;margin:0 0 10px}
#p5 .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}}
#p5 .scene-notes{border:1px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px}
#p5 .scene-notes>summary{cursor:pointer;color:var(--txt-2)}
#p5 .scene-notes[open]>summary{margin-bottom:10px}
#p5 .scene-notes>.field,#p5 .scene-notes>.grid{margin-top:10px}
#p5 .motion-undo{margin-top:-6px}
#p5 .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 */
#p5 .cap-assist{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;margin:-6px 0 4px}
#p5 .cap-live{flex:1 1 260px;min-width:0}
#p5 .cap-meta{font-size:13px;color:var(--txt-3);margin-bottom:6px}
#p5 .cap-over{color:var(--warn);font-weight:600}
#p5 .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)}
#p5 .cap-prev .l1{font:200 19px/1.15 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}
#p5 .cap-prev .l2{font:700 19px/1.15 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}
#p5 .cap-prev.three{align-items:center}
#p5 .cap-prev.three .l2{font:italic 700 21px/1.15 Times,"Times New Roman",serif;text-transform:none;letter-spacing:.04em}
#p5 .cap-prev.three .l3{font:700 16px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;color:#e0262b}
#p5 .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/) */
#p9 .remakes{border-color:var(--line-2)}
#p9 .remake{display:flex;flex-direction:column;gap:6px;min-width:0}
#p9 .remake b{color:var(--txt);font-size:18px}
#p9 .remake-frame{aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#000;border:1px solid var(--line);margin-bottom:6px}
#p9 .remake-frame video{width:100%;height:100%;object-fit:cover;display:block}
#p9 .remake-frame.no-example{display:grid;place-items:center;color:var(--txt-3,#8e97a8);font-size:14px}
#p9 .remake-frame.no-example::after{content:"Example coming soon"}
#p9 .remake-status{color:var(--gold)}
#p9 .remake-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#p9 .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) */
#p9 .p9-tile{cursor:pointer;transition:border-color .15s,background-color .15s}
#p9 .card.p9-tile:hover,#p9 .card.p9-tile:focus-visible{border-color:var(--gold);outline:none}
#p9 .remake.p9-tile:hover .remake-frame,#p9 .remake.p9-tile:focus-within .remake-frame{border-color:var(--gold)}
#p9 .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}}