/* ═══════════════════════════════════════════════════════════════════════════
   Distribute in Slush — an override skin, the same trick as Ideate's slush.css.
   The engine is token-driven (--bg/--card/--border/--ink/--accent…), so most
   of the reskin is retokening: pale-peach ground (Distribute's own colour),
   paper cards with 1px black outlines, Anton display type, pill buttons,
   black CTAs. No shadows, no glows. Tool panes keep their working layouts.
   ═══════════════════════════════════════════════════════════════════════════ */
html:root{
  --bg:#ffe9dc; --card:#ffffff; --card2:#fff4ec; --border:#000000; --border2:#000000;
  --ink:#000000; --ink2:#111111; --muted:#444444; --faint:#5a5a5a;
  --white:#ffffff; --accent:#000000; --accent-dim:rgba(0,0,0,.06);
  --good:#55db9c; --warn:#ffd731; --bad:#fb4903;
  --serif:'Anton',Impact,'Arial Narrow',sans-serif;
  --r:16px; --r-lg:24px;
  --blue:#4da2ff; --mint:#55db9c; --lav:#e9ccff; --ember:#fb4903; --sun:#ffd731; --violet:#5c4ade; --sky:#dceeff; --paper:#fff;
  --disp:'Anton',Impact,'Arial Narrow',sans-serif; --ui:Inter,system-ui,sans-serif; --pill:1600px;
}
html,body{background:var(--bg)!important;color:var(--ink)!important;font-family:var(--ui)!important;font-weight:500;letter-spacing:-.01em}
::selection{background:var(--sun);color:#000}
*{box-shadow:none!important;text-shadow:none!important}

/* ── top bar: sky, outlined, no blur. Framed by the shell the brand goes quiet. ── */
header{background:var(--sky)!important;backdrop-filter:none!important;border-bottom:1px solid #000!important;padding:12px 28px!important}
.brand{font-family:var(--disp)!important;font-weight:400!important;font-size:22px!important;letter-spacing:0!important;text-transform:uppercase}
.brand b{color:#000!important} .brand span{color:#000!important;font-family:var(--ui);font-weight:700!important;font-size:12px;letter-spacing:.04em;background:var(--sun);border:1px solid #000;border-radius:var(--pill);padding:3px 10px}
.brand .dot{display:none}
html.framed .brand{visibility:hidden}
.stagestep{color:#000!important;font-weight:700!important;font-size:12px!important;letter-spacing:.03em;text-transform:uppercase}
.stagestep .idx{border:1px solid #000!important;background:#fff;color:#000!important}
.stagestep.on .idx{background:var(--sun)!important;border-color:#000!important;color:#000!important}
.stagestep.done .idx{background:var(--mint)!important;color:#000!important}
.stagesep{background:#000!important}
.appchip{background:#fff!important;border:1px solid #000!important;border-radius:var(--pill)!important;color:#000!important;font-weight:700!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.03em}
.appchip .tt{background:var(--lav)!important;color:#000!important;border:1px solid #000;border-radius:var(--pill)!important}
.appchip .sw{color:#000!important;border-left:1px solid #000!important}
#lpchip{border-color:#000!important;background:var(--mint)!important}
.appmenu{background:#fff!important;border:1px solid #000!important;border-radius:20px!important}
.appmenu .ai2.cur{background:var(--sun)!important}
.appmenu .ai2:hover{background:var(--lav)!important}
.appmenu .mt,.appmenu .ai2 .tp{color:#000!important}

/* ── type ── */
h1.big{font-family:var(--disp)!important;font-weight:400!important;text-transform:uppercase;font-size:clamp(48px,7vw,104px)!important;line-height:.9!important;letter-spacing:-.005em!important;margin:0 0 14px!important}
h1.big em{font-style:italic;font-synthesis:style;color:var(--sun)!important;-webkit-text-stroke:2px #000}
.kick{display:inline-block;color:#000!important;background:var(--lav);border:1px solid #000;border-radius:var(--pill);padding:6px 12px;font-size:11px!important;letter-spacing:.04em!important;font-weight:700!important;margin-bottom:16px!important}
.lede{color:#000!important;font-size:16px!important;line-height:1.5!important}
h2,h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:0}

/* ── cards, steps, buttons, tabs ── */
.card,.appcard,.step,.angle,.aa-card,.rxbatchbanner,.intel,.srcgrid>*,.ctx{background:#fff!important;border:1px solid #000!important;border-radius:20px!important}
.appcard:hover{transform:translateY(-3px);border-color:#000!important}
.appcard .thumb.live{background:#e9e9e9!important}
.appcard .thumb{border-bottom:1px solid #000}
.appcard .tbadge{background:var(--sun)!important;color:#000!important;border:1px solid #000;border-radius:var(--pill)!important}
.appcard .sm,.appcard .ft{color:#000!important;opacity:.75}
.appcard.addcard{border-style:dashed!important;background:transparent!important}
.appcard.addcard:hover{background:var(--sun)!important}
.addcard .plus,.addcard .adds{color:#000!important}
.step .sl{font-family:var(--disp)!important;font-weight:400!important;font-size:26px!important;text-transform:uppercase;letter-spacing:0!important;color:#000!important}
.step .sl .n{background:var(--sun)!important;border:1px solid #000!important;color:#000!important;font-family:var(--disp)!important;border-radius:50%!important}
.btn{border:1px solid #000!important;border-radius:var(--pill)!important;background:#fff!important;color:#000!important;font-weight:700!important;font-size:12px!important;letter-spacing:.03em!important;text-transform:uppercase;transition:transform .12s,background .12s}
.btn:hover{background:var(--sun)!important;border-color:#000!important}
.btn.primary,.btn.accent{background:#000!important;color:#fff!important;border-color:#000!important}
.btn.primary:hover,.btn.accent:hover{background:#1a1a1a!important}
.btn.ghost{background:transparent!important}
.btn:disabled{opacity:.35!important}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border:0!important}
.tab{border:1px solid #000!important;border-radius:var(--pill)!important;background:#fff!important;color:#000!important;font-weight:700!important;font-size:12px!important;letter-spacing:.03em;text-transform:uppercase;padding:9px 14px!important}
.tab.on{background:#000!important;color:#fff!important}
.tab:hover:not(.on){background:var(--sun)!important}
input,textarea,select{background:#fff!important;color:#000!important;border:1px solid #000!important;border-radius:14px!important;font-family:var(--ui)!important}
input:focus,textarea:focus,select:focus{outline:2px solid var(--sun)!important;outline-offset:1px}
.ctabar{background:#fff!important;border-top:1px solid #000!important;backdrop-filter:none!important}
.rxbatchbanner{background:var(--sun)!important}
.rxbatchbanner .bt b{color:#000!important} .rxbatchbanner .bgo{color:#000!important;border-bottom:1px solid #000}
.angle:hover{border-color:#000!important;background:var(--lav)!important}
.angle.on,.angle.kept{background:var(--mint)!important}
#addapp{background:rgba(0,0,0,.45)!important;backdrop-filter:none!important}

/* status colours as sticker chips */
.good,.ok{color:#000!important;background:var(--mint)}
.warn{color:#000!important;background:var(--sun)}
.bad,.err{color:#000!important;background:var(--ember)}

/* schedule + steps sheets inherit the paper look */
.lv-card,.sc-card,.sched-card,.slot,.queue-item{background:#fff!important;border:1px solid #000!important;border-radius:20px!important;color:#000!important}

/* ── the top bar wraps instead of clipping; nothing gets cut off at narrow widths ── */
header{flex-wrap:wrap;row-gap:8px;gap:12px!important}
header>*{min-width:0}
.stagebar{margin-left:0!important;flex-wrap:wrap}
.appchip{max-width:100%}
.appchip #chipname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28vw}
main{padding-left:24px!important;padding-right:24px!important}
.tabs .tab{white-space:nowrap}
.ctabar{flex-wrap:wrap;row-gap:8px}

/* pills stay on one line; framed by the shell the bar disappears when it has nothing to show */
.brand span,#lpchip,.appchip{white-space:nowrap}
html.framed .brand{display:none}
html.framed header:not(:has(.appchip.show)):not(:has(.stagebar.show)){display:none}
html.framed header{padding:10px 20px!important}
/* under ~900px the bar's three groups wrap as whole units instead of squeezing into one row */
@media (max-width:900px){
  header>div{flex:0 0 auto!important;flex-basis:auto!important}
  header>div:last-child{margin-left:auto}
}

/* the content-plan board reads as paper, not a dark overlay */
#tboard .tb-top{background:#fff!important;border-bottom:1px solid #000!important;color:#000!important}
.tb-scroll{background:var(--bg)!important;background-image:none!important}
.tb-focus,.tb-item{background:#fff!important;border:1px solid #000!important;border-radius:16px!important;color:#000!important}
.tb-focus .k,.tb-item .k{color:#000!important;opacity:.7}
.tb-use{background:#000!important;color:#fff!important;border:1px solid #000!important;border-radius:1600px!important;font-weight:700!important}
.tb-chipk{border:1px solid #000!important;color:#000!important;background:#fff!important}

/* schedule: the numbers strip */
.sd-numbers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 18px}
.sd-num{background:#fff;border:1px solid #000;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.sd-num b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:30px;line-height:.95;text-transform:uppercase}
.sd-num span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.sd-num em{font-style:normal;font-size:11px;color:#fb4903;font-weight:700}
.sd-note{grid-column:1/-1;font-size:12px;opacity:.7}
@media(max-width:900px){.sd-numbers{grid-template-columns:repeat(2,1fr)}}

/* the content-plan embed and board read as paper */
.bc-embed{background:#fff!important;border:1px solid #000!important;border-radius:20px!important;overflow:hidden;margin-bottom:14px}
.bc-embed .ev{background:var(--bg)!important;background-image:none!important}
.bc-embed .ebar{background:#fff!important;border-top:1px solid #000!important;color:#000!important}
.bc-embed .ebar .sub{color:#000!important;opacity:.7} .bc-embed .ebar .ex{background:#000!important;color:#fff!important;border-radius:1600px!important;padding:6px 12px!important;border:1px solid #000!important;font-weight:700!important}
.bc-mini{background:#fff!important;border:1px solid #000!important;border-radius:12px!important;color:#000!important}
.bc-mini .mk{color:#000!important;opacity:.6}
#tboard{background:var(--bg)!important}
#pane-yap .bc-embed{margin-bottom:16px}
.bc-embed .ev::after{background:linear-gradient(transparent 70%,var(--bg))!important}


/* ═══ ONE MAKER PER SCREEN — the Higgsfield Video shape ═══
   Rail on the left: the app · the content plan · the inputs · the one-liners · Render.
   Middle: what you make. Wrappers are display:contents so a maker can repaint itself freely. */
html.framed header{display:none!important}
main{max-width:1440px!important;padding-top:22px!important}
.rxbatchbanner{display:none!important}
.mapp{background:#fff;border:1px solid #000;border-radius:20px;padding:12px 14px;margin-bottom:12px}
.mapp-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.mapp-row{display:flex;align-items:center;gap:8px} .mapp-row b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:22px;text-transform:uppercase;line-height:1}
#v-stage2 > .mapp{display:none}
/* the grid */
#pane-react.rail,#pane-memes.rail,#pane-faceless.rail{display:grid;grid-template-columns:400px minmax(0,1fr);gap:22px;align-items:start}
#pane-react.rail .rxwrap,#pane-react.rail .rxtop,#pane-memes.rail .mmwrap,#pane-memes.rail #mm-body,#pane-faceless.rail .lvwrap,#pane-faceless.rail #fc-body{display:contents}
/* column 1: the rail */
.rail > .mapp,.rail .bc-embed,.rail .rxsec,.rail .mmstep,.rail .lvstep,.rail .mmlede,.rail .lede,.rail .lvmodebar,.rail #rexport{grid-column:1}
.rail .rxsec,.rail .mmstep,.rail .lvstep{background:#fff!important;border:1px solid #000!important;border-radius:20px!important;padding:14px 16px!important;margin:0 0 12px!important}
.rail .rxh,.rail .sh{font-size:13px!important;margin-bottom:10px!important}
.rail .rxh .n,.rail .sh .idx{background:var(--sun)!important;border:1px solid #000!important;color:#000!important}
.rail .bc-embed{margin-bottom:12px!important} .rail .bc-embed .ev{height:120px!important}
.rail .rxgrid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))!important;max-height:236px!important}
.rail .srcrow{flex-direction:column} .rail .srcbtn{max-width:none!important;min-width:0!important}
.rail .mmlede,.rail .lede{display:none!important}
/* column 2: what you make */
#pane-react.rail .ed-inline{grid-column:2;grid-row:1/span 8;position:sticky;top:20px;margin:0!important}
#pane-react.rail #mhist{grid-column:2}
#pane-memes.rail .mmstep:last-of-type,#pane-faceless.rail .lvstep:last-of-type{grid-column:2;grid-row:1/span 12;background:transparent!important;border:0!important;padding:0!important}
#pane-memes.rail .mmstep:last-of-type .sh,#pane-faceless.rail .lvstep:last-of-type .sh{font-family:'Anton',Impact,sans-serif;font-size:26px!important;text-transform:uppercase}
#pane-memes.rail .mmstep:last-of-type .sh .idx,#pane-faceless.rail .lvstep:last-of-type .sh .idx{display:none}
/* the reaction maker renders from its editor: the export row is the rail's Render */
.rail #rexport{background:#000!important;border-radius:20px!important;padding:12px 14px!important;border:0!important;color:#fff!important}
.rail #rexport .btn.primary{background:var(--sun)!important;color:#000!important;border-color:transparent!important}
/* the middle: renders by day */
#mhist{margin-top:14px} #v-stage2 > #mhist{display:none}
.mh-head{display:flex;align-items:baseline;gap:12px;margin:0 0 6px} .mh-head h2{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:26px;text-transform:uppercase;margin:0;line-height:1}
.mh-day{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:12px 0 8px}
.mh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mh-tile{position:relative;border:1px solid #000;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:9/16}
.mh-tile video{width:100%;height:100%;object-fit:cover;display:block}
.mh-tile .mh-acts{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.mh-tile:hover .mh-acts{opacity:1}
.mh-tile .mh-meta{position:absolute;left:8px;top:8px;background:#fff;border:1px solid #000;border-radius:1600px;padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mh-empty{border:1px dashed #000;border-radius:16px;padding:20px;font-size:13px;font-weight:600;opacity:.8}
/* carousel: the Image bar — composer on top, your carousels as the grid */
#pane-carousel.bar .rxsec{background:#fff!important;border:1px solid #000!important;border-radius:20px!important;padding:14px 16px!important;margin:0 0 12px!important}
@media(max-width:1000px){#pane-react.rail,#pane-memes.rail,#pane-faceless.rail{grid-template-columns:1fr}#pane-react.rail .ed-inline,#pane-memes.rail .mmstep:last-of-type,#pane-faceless.rail .lvstep:last-of-type{grid-column:1;grid-row:auto;position:static}#pane-react.rail #mhist{grid-column:1}}

/* the middle is a preview; the timeline and tools only when you ask */
.ed-inline .ed-transport .edtool,.ed-inline .ed-tl,.ed-inline .ed-props,.ed-inline #rexport{display:none!important}
.ed-inline.manual .ed-transport .edtool,.ed-inline.manual .ed-tl{display:flex!important}
.ed-inline.manual .ed-tl{display:block!important} .ed-inline.manual .ed-props{display:block!important}
.ed-inline .ed-inrow{justify-content:center}
.ed-inline .ed-stage2{margin:0 auto}
.mrender{grid-column:1;background:#000;color:#fff;border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mrender .btn.primary{background:var(--sun)!important;color:#000!important;border-color:transparent!important;justify-content:center;font-size:14px;padding:13px 20px}
.mrender .dim{font-size:12px;opacity:.75}
#v-stage2 > .mrender{display:none}

/* one maker at a time: the tab strip never shows */
.tabs[hidden]{display:none!important}
/* rail order: app · plan · steps · render */
.rail > .mapp{order:-2} .rail .bc-embed{order:-1}

/* ═══ REACTION UGC — the rail as ONE control panel, the middle as History ═══ */
#pane-react.rail{grid-template-columns:430px minmax(0,1fr);gap:26px}
#pane-react.rail .rxtop{display:flex!important;flex-direction:column;gap:0;grid-column:1;background:#fff;border:1px solid #000;border-radius:26px;padding:6px 0 0;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;margin:0!important}
#pane-react.rail .rxtop > *{border-top:1px solid rgba(0,0,0,.14)!important;padding:14px 16px!important;margin:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important;background:transparent!important}
#pane-react.rail .rxtop > :first-child{border-top:0!important}
#pane-react.rail .rxtop > .mapp .mapp-k{margin-bottom:4px}
#pane-react.rail .rxtop > .bc-embed{padding:0!important;overflow:hidden}
#pane-react.rail .rxtop > .bc-embed .ev{height:96px!important}
#pane-react.rail .rxtop > .bc-embed .ebar{border-top:1px solid rgba(0,0,0,.14)!important;padding:10px 16px!important}
#pane-react.rail .rxh{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:10px!important;display:flex;align-items:center;gap:8px}
#pane-react.rail .rxh .n{width:18px;height:18px;font-size:10px;background:var(--sun)!important;border:1px solid #000!important;color:#000!important;border-radius:50%;display:grid;place-items:center}
#pane-react.rail .rxh .dim{display:none}
/* footage: two reference slots */
#pane-react.rail .srcrow{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
#pane-react.rail .srcbtn{aspect-ratio:1.1;min-width:0!important;max-width:none!important;justify-content:center;align-items:center;text-align:center;gap:6px;border:1px dashed #000!important;border-radius:16px!important;background:var(--bg)!important}
#pane-react.rail .srcbtn .i{font-size:22px} #pane-react.rail .srcbtn .t{font-size:12.5px} #pane-react.rail .srcbtn .d{font-size:10.5px;opacity:.7}
/* the reaction wall, compact */
#pane-react.rail .rxgrid{grid-template-columns:repeat(5,1fr)!important;gap:6px!important;max-height:212px!important}
#pane-react.rail .rxclip{border-radius:10px!important}
/* the lines: the prompt */
#pane-react.rail #txstyles .txcards{display:flex;gap:6px;flex-wrap:wrap}
#pane-react.rail .txcard{border:1px solid #000!important;border-radius:1600px!important;padding:4px 10px!important;font-size:11px!important;background:#fff!important}
#pane-react.rail .txcard.on{background:var(--sun)!important}
#pane-react.rail .txtchips{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto;padding:2px 0}
#pane-react.rail .txtchip{border:1px solid #000!important;border-radius:14px!important;padding:9px 12px!important;font-size:13px!important;line-height:1.35;background:#fff!important;cursor:pointer;color:#000!important}
#pane-react.rail .txtchip.on{background:var(--sun)!important}
#pane-react.rail .txtchip::before{content:'+ ';opacity:.5} #pane-react.rail .txtchip.on::before{content:'✓ ';opacity:1}
#pane-react.rail #regenbtn{margin-left:auto}
/* render: pinned at the bottom of the rail */
#pane-react.rail .rxtop > .mrender{position:sticky;bottom:0;background:#fff!important;border-top:1px solid rgba(0,0,0,.14)!important;padding:12px 16px 14px!important;color:#000!important;border-radius:0 0 26px 26px!important}
#pane-react.rail .mrender .btn.primary{width:100%}
#pane-react.rail .mrender .dim{color:#000;opacity:.6}
/* the middle: preview first, then history */
#pane-react.rail .ed-inline{grid-column:2;grid-row:auto;position:static;border-radius:24px!important;border:1px solid #000!important;background:#fff!important;overflow:hidden}
#pane-react.rail .ed-bar{padding:12px 16px!important;border-bottom:1px solid #000!important;background:#fff!important}
#pane-react.rail .ed-label{font-family:'Anton',Impact,sans-serif;font-size:18px;text-transform:uppercase}
#pane-react.rail .ed-inrow{padding:16px;background:var(--bg)}
#pane-react.rail .ed-phone2{border-radius:18px;overflow:hidden;border:1px solid #000}
#pane-react.rail .ed-transport{padding:10px 16px!important;border-top:1px solid #000!important;background:#fff!important}
#pane-react.rail #mhist{grid-column:2;margin-top:18px}
.mh-head{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.mh-tab{border:1px solid #000;border-radius:12px;padding:8px 12px;font-weight:700;font-size:13px;background:#fff}
.mh-seg{display:inline-flex;border:1px solid #000;border-radius:12px;overflow:hidden} .mh-seg button{border:0;background:#fff;padding:8px 12px;font:inherit;font-weight:700;font-size:12px;cursor:pointer} .mh-seg button.on{background:#000;color:#fff}
.mh-list{display:flex;flex-direction:column;gap:14px}
.mh-row{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
.mh-row .mh-vid{border:1px solid #000;border-radius:20px;overflow:hidden;background:#000;display:grid;place-items:center;min-height:320px}
.mh-row .mh-vid video{width:100%;max-height:560px;display:block;object-fit:contain}
.mh-det{background:#fff;border:1px solid #000;border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:320px}
.mh-det .mh-app{font-family:'Anton',Impact,sans-serif;font-size:22px;text-transform:uppercase;line-height:1}
.mh-det .mh-chips{display:flex;gap:6px;flex-wrap:wrap}
.mh-det .mh-acts2{display:flex;gap:6px;flex-wrap:wrap}
.mh-det .mh-date{margin-top:auto;font-size:12px;opacity:.6}
@media(max-width:1000px){#pane-react.rail .rxtop{position:static;max-height:none}.mh-row{grid-template-columns:1fr}}

/* ═══ MEMES + FACELESS — the same rail panel ═══ */
#pane-memes.rail,#pane-faceless.rail{grid-template-columns:430px minmax(0,1fr);gap:26px}
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp,#pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed,#pane-memes.rail .mmstep:not(:last-of-type),#pane-faceless.rail .lvstep:not(:last-of-type),#pane-faceless.rail .lvmodebar{grid-column:1;margin:0!important;border-radius:0!important;background:#fff!important;border:1px solid #000!important;border-top:0!important;padding:14px 16px!important}
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp{border-top:1px solid #000!important;border-radius:26px 26px 0 0!important}
#pane-memes.rail .mmstep:nth-last-of-type(2),#pane-faceless.rail .lvstep:nth-last-of-type(2){border-radius:0 0 26px 26px!important;padding-bottom:18px!important}
#pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed{padding:0!important;overflow:hidden} #pane-memes.rail .bc-embed .ev,#pane-faceless.rail .bc-embed .ev{height:96px!important}
#pane-memes.rail .sh,#pane-faceless.rail .sh{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
#pane-memes.rail .sh .idx,#pane-faceless.rail .sh .idx{width:18px!important;height:18px!important;font-size:10px!important;background:var(--sun)!important;border:1px solid #000!important;color:#000!important}
#pane-memes.rail .sh .sd,#pane-faceless.rail .sh .sd{display:none}
#pane-memes.rail .mmstep:last-of-type,#pane-faceless.rail .lvstep:last-of-type{grid-column:2;grid-row:1/span 12}
#pane-faceless.rail .lvmodebar{order:-1}
@media(max-width:1000px){#pane-memes.rail,#pane-faceless.rail{grid-template-columns:1fr}}
/* rail order inside the reaction panel: app · plan · footage · reaction · lines · render */
#pane-react.rail .rxtop > .mapp{order:-2} #pane-react.rail .rxtop > .bc-embed{order:-1} #pane-react.rail .rxtop > .mrender{order:9}

/* ═══ CAROUSEL — the Image bar: one composer on top, your carousels as the grid ═══ */
#pane-carousel.bar .rxwrap{display:flex;flex-direction:column;gap:0}
#pane-carousel.bar .rxsec:not(:last-of-type){margin:0!important;border-radius:0!important;border-top:0!important;background:#fff!important;border-left:1px solid #000!important;border-right:1px solid #000!important;border-bottom:0!important;padding:14px 18px!important}
#pane-carousel.bar .bc-embed{margin-bottom:14px!important}
#pane-carousel.bar .rxsec:first-of-type{border-top:1px solid #000!important;border-radius:26px 26px 0 0!important}
#pane-carousel.bar .rxsec:nth-last-of-type(2){border-bottom:1px solid #000!important;border-radius:0 0 26px 26px!important;padding-bottom:18px!important}
#pane-carousel.bar .rxsec:last-of-type{background:transparent!important;border:0!important;padding:22px 0 0!important;margin:0!important}
#pane-carousel.bar .rxsec:last-of-type .rxh{font-family:'Anton',Impact,sans-serif;font-size:26px!important;text-transform:uppercase}
#pane-carousel.bar .rxsec:last-of-type .rxh .n{display:none}
#pane-carousel.bar .rxh{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
#pane-carousel.bar .rxh .n{width:18px;height:18px;font-size:10px;background:var(--sun)!important;border:1px solid #000!important;color:#000!important;border-radius:50%;display:grid;place-items:center}
/* ═══ BATCH — its own page ═══ */
.bt-wrap{max-width:1100px}
.bt-head .kick{display:inline-block}
.bt-head h1.big{margin:8px 0 6px!important}
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:18px}
.bt-card{background:#fff;border:1px solid #000;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;min-height:200px;transition:transform .15s}
.bt-card:hover{transform:translateY(-3px)} .bt-card.soon{opacity:.6;cursor:default} .bt-card.soon:hover{transform:none}
.bt-ic{font-size:26px} .bt-nm{font-family:'Anton',Impact,sans-serif;font-size:26px;text-transform:uppercase;line-height:.95}
.bt-line{font-size:13px;line-height:1.45;opacity:.8} .bt-act{margin-top:auto}

/* ═══ THE MAKER HEADER ═══ */
.mhead{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.mhead h1{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:28px;text-transform:uppercase;margin:0;line-height:1}
.mhead .dim{font-size:12.5px;opacity:.7}
/* ═══ THE REACTION RAIL, COMPACT ═══ */
#pane-react.rail{grid-template-columns:380px minmax(0,1fr);gap:22px}
#pane-react.rail .rxtop{padding:0!important;gap:0}
#pane-react.rail .rxtop > *{padding:10px 14px!important}
#pane-react.rail .rxtop > .mapp .mapp-k{display:none}
#pane-react.rail .rxtop > .mapp .mapp-row b{font-size:16px} #pane-react.rail .rxtop > .mapp .btn.sm{padding:5px 10px}
#pane-react.rail .rxtop > .bc-embed{padding:0!important} #pane-react.rail .rxtop > .bc-embed .ev{display:none!important}
#pane-react.rail .rxtop > .bc-embed .ebar{border-top:0!important;padding:10px 14px!important} #pane-react.rail .rxtop > .bc-embed .ebar .sub{display:none}
#pane-react.rail .rxtop > .bc-embed .ebar b{font-size:12.5px} #pane-react.rail .rxtop > .bc-embed .ebar .ex{padding:4px 10px!important;font-size:11px!important}
.rc-block{display:flex;flex-direction:column;gap:8px}
.rc-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;align-items:baseline} .rc-k .dim{text-transform:none;letter-spacing:0;font-weight:500;opacity:.6}
.rc-slots{display:flex;gap:8px}
.rc-slot{width:72px;height:72px;border:1px dashed #000;border-radius:14px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;color:#000;position:relative;overflow:hidden;padding:0}
.rc-slot .ic{font-size:18px} .rc-slot:hover{background:var(--sun)}
.rc-slot.has{border-style:solid} .rc-slot.has video{width:100%;height:100%;object-fit:cover} .rc-slot .rc-rep{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:2px}
.rc-preset{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #000;border-radius:14px;background:#fff;padding:8px 10px;font:inherit;text-align:left;cursor:pointer;color:#000}
.rc-preset:hover{background:var(--sun)}
.rc-thumb{width:34px;height:52px;border-radius:8px;background:#000;overflow:hidden;display:grid;place-items:center;font-size:16px;flex:0 0 auto;color:#fff} .rc-thumb img{width:100%;height:100%;object-fit:cover}
.rc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .rc-body b{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rc-body span{font-size:11px;opacity:.65}
.rc-change{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid #000;border-radius:1600px;padding:4px 9px;flex:0 0 auto}
.rc-row{display:flex;align-items:center;gap:8px} .rc-k2{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
#pane-react.rail .rxtop > .mrender{padding:10px 14px 12px!important}
#pane-react.rail .mrender .btn.primary{font-size:14px;padding:12px 18px}
.rc-modal{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:22px}
.rc-modal.on{display:flex}
.rc-box{width:min(1240px,96vw);max-height:92vh;overflow:auto;background:#fff;border:1px solid #000;border-radius:26px;padding:16px 20px 22px;color:#000}
.rc-mh{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:sticky;top:-16px;background:#fff;padding:6px 0 8px;z-index:2}
.rc-mh h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:26px;text-transform:uppercase;margin:0} .rc-mh .dim{font-size:12.5px;opacity:.65}
#mReaction .rxgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))!important;gap:10px!important;max-height:none!important;overflow:visible!important;padding:0!important}
#mReaction .rxclip{border-radius:14px!important;border:2px solid transparent!important;background:#000!important}
#mReaction .rxclip.on{border-color:var(--sun)!important;outline:2px solid var(--sun)}
#mReaction .cplbl{font-size:11px!important;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:3px 7px;border-radius:8px}
.rc-tgrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.rc-pv{position:relative;aspect-ratio:9/16;border-radius:18px;background:#111 center/cover;overflow:hidden;border:1px solid #000;display:flex;align-items:flex-start;justify-content:center;padding:18px 14px}
.rc-pvt{color:#fff;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.7);line-height:1.15;max-width:100%;word-wrap:break-word} .rc-pvt.bot{align-self:flex-end}
.rc-pvn{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#fff;font-size:11px;opacity:.8}
#mText .txcards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#mText .txcard{border:1px solid #000!important;border-radius:12px!important;padding:8px 10px!important;font-size:12px!important;background:#fff!important;cursor:pointer}
#mText .txcard.on{background:var(--sun)!important}
#mText #txstyles > div:first-child{display:none!important}
.rc-own{display:flex;gap:8px;margin-bottom:10px} .rc-own input{flex:1;border:1px solid #000!important;border-radius:1600px!important;padding:10px 14px!important;font:inherit;font-size:14px}
#mText .txtchips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#mText .txtchip{border:1px solid #000!important;border-radius:14px!important;padding:10px 12px!important;font-size:13.5px!important;line-height:1.35;background:#fff!important;cursor:pointer;color:#000!important}
#mText .txtchip.on{background:var(--sun)!important} #mText .txtchip::before{content:'+ ';opacity:.5} #mText .txtchip.on::before{content:'✓ ';opacity:1}
.rc-mfoot{margin-top:12px}
@media(max-width:900px){.rc-tgrid{grid-template-columns:1fr}}
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp{padding:10px 14px!important} #pane-memes.rail .mapp-k,#pane-faceless.rail .mapp-k{display:none}
#pane-memes.rail .bc-embed .ev,#pane-faceless.rail .bc-embed .ev{display:none!important} #pane-memes.rail .bc-embed .ebar .sub,#pane-faceless.rail .bc-embed .ebar .sub{display:none}
#pane-memes.rail .mmstep:not(:last-of-type),#pane-faceless.rail .lvstep:not(:last-of-type){padding:10px 14px!important}
#pane-memes.rail .mmbtn,#pane-faceless.rail .lvbtn{padding:7px 12px!important;font-size:12px!important}
#pane-memes.rail .mmchip,#pane-faceless.rail .lvchip{padding:5px 10px!important;font-size:11.5px!important}
/* the plan card takes the room it needs, no more */
.rail .bc-embed,#pane-react.rail .rxtop > .bc-embed,#pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed{min-height:0!important}
#pane-carousel.bar .bc-embed{min-height:0!important} #pane-carousel.bar .bc-embed .ev{height:110px!important}

/* the engine has no header of its own any more: the Launchpad bar is the navigation */
header{display:none!important}
main{padding-top:18px!important}
/* the style pop-up */
.rc-box.sm{width:min(880px,96vw)}
.rc-sgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}
#mStyle .txcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
#mStyle .txcard{border:1px solid #000!important;border-radius:12px!important;padding:8px 10px!important;font-size:12px!important;background:#fff!important;cursor:pointer}
#mStyle .txcard.on{background:var(--sun)!important}
#mStyle #txstyles > div:first-child{display:none!important}
/* the preview mimics the overlay */
.rc-pv{align-items:center}.rc-pv.top{align-items:flex-start}.rc-pv.bottom{align-items:flex-end}
.rc-pvt.s-snap{background:rgba(0,0,0,.46);width:calc(100% + 28px);margin:0 -14px;padding:10px 14px;text-shadow:none}
.rc-pvt.s-ig,.rc-pvt.s-box{background:rgba(0,0,0,.5);padding:8px 12px;border-radius:10px;text-shadow:none}
.rc-pvt.s-imsg{background:#0B93F6;padding:8px 14px;border-radius:16px;text-shadow:none}
.rc-pvt.s-note{background:#FEF3A8;color:#3A2F0B;padding:8px 12px;border-radius:4px;text-shadow:none}
.rc-pvt.s-hormozi{color:#FFE12B;-webkit-text-stroke:1px #000}
.rc-pvt.s-tiktok{-webkit-text-stroke:.6px #000}
.rc-pvt.s-subtitle{background:rgba(0,0,0,.6);padding:5px 12px;border-radius:999px;text-shadow:none}
/* yap: rail + what you make */
#pane-yap.rail{display:grid;grid-template-columns:380px minmax(0,1fr);gap:22px;align-items:start}
#pane-yap.rail > .mapp{grid-column:1;margin:0!important;border-radius:26px 26px 0 0!important}
#pane-yap.rail .ysteps{grid-column:1;display:flex!important;flex-direction:column;gap:4px;background:#fff;border:1px solid #000;border-top:0;border-radius:0 0 26px 26px;padding:12px 14px!important;margin:0!important}
#pane-yap.rail .ysteps .ystep-sep{display:none} #pane-yap.rail .ysteps .ymodes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
#pane-yap.rail .ysteps .ystep{padding:8px 10px!important;border-radius:12px!important;margin:0!important}
#pane-yap.rail{grid-template-rows:auto auto auto 1fr auto}
#pane-yap.rail > .mapp{grid-row:1} #pane-yap.rail .ysteps{grid-row:2;border-radius:0!important} #pane-yap.rail .bc-embed{grid-column:1;grid-row:3;margin:0!important;border:1px solid #000!important;border-top:0!important;border-radius:0 0 26px 26px!important;padding:0!important;overflow:hidden;min-height:0!important}
#pane-yap.rail .bc-embed .ev{display:none!important} #pane-yap.rail .bc-embed .ebar{border-top:0!important;padding:10px 14px!important} #pane-yap.rail .bc-embed .ebar .sub{display:none} #pane-yap.rail .bc-embed .ebar b{font-size:12.5px} #pane-yap.rail .bc-embed .ebar .ex{padding:4px 10px!important;font-size:11px!important}
#pane-yap.rail #ybody{grid-column:2;grid-row:1/span 4} #pane-yap.rail #mhist{grid-column:2;grid-row:5}
#pane-memes.rail .bc-embed .ebar,#pane-faceless.rail .bc-embed .ebar{border-top:0!important;padding:10px 14px!important} #pane-memes.rail .bc-embed .ebar b,#pane-faceless.rail .bc-embed .ebar b{font-size:12.5px} #pane-memes.rail .bc-embed .ebar .ex,#pane-faceless.rail .bc-embed .ebar .ex{padding:4px 10px!important;font-size:11px!important}
#pane-yap.rail #ybody > div[style*="grid-template-columns"]{display:block!important}
#pane-yap.rail .ymode{width:auto!important;max-width:none!important}
/* memes + faceless + carousel: smaller everything */
#pane-memes.rail .mmstep .mmrow,#pane-faceless.rail .lvrow{gap:6px!important}
#pane-memes.rail .mmstep textarea,#pane-faceless.rail .lvstep textarea,#pane-faceless.rail .lvstep input{font-size:12.5px!important;padding:8px 10px!important}
#pane-faceless.rail .lvscene{padding:8px 10px!important} #pane-faceless.rail .lvscenes{max-height:280px;overflow:auto}
#pane-faceless.rail .lvstep .sh .st,#pane-memes.rail .mmstep .sh .st{font-size:12px!important}
#pane-memes.rail .mmstep:last-of-type .mmgrid,#pane-faceless.rail .lvstep:last-of-type .lvgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important}
#mMemesBody .mmgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;max-height:none!important}
#pane-carousel.bar #caes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:8px!important}
#pane-carousel.bar .angles{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:8px!important}
#pane-carousel.bar .angle{padding:10px 12px!important} #pane-carousel.bar .angle b,#pane-carousel.bar .angle .ah{font-size:13px!important}
#pane-carousel.bar .angle p,#pane-carousel.bar .angle .ad{font-size:11.5px!important}
#pane-carousel.bar .bc-embed .ev{display:none!important}

/* ── Carousel = the Image bar: your carousels by day fill the page, the composer floats at the bottom ── */
#pane-carousel.bar > .mapp{display:none!important}
#pane-carousel.bar .cimg-hist{padding-bottom:230px;min-height:55vh}
.cg-day{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:14px 0 8px;display:flex;gap:8px;align-items:baseline}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cg-tile{position:relative;border:1px solid #000;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/5;cursor:pointer}
.cg-tile.sq{aspect-ratio:1}
.cg-tile img{width:100%;height:100%;object-fit:cover;display:block}
.cg-tile .gph{display:grid;place-items:center;height:100%;color:#fff;font-size:30px}
.cg-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;opacity:0;transition:opacity .15s}
.cg-cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.25}
.cg-cap span{display:block;font-size:10.5px;opacity:.75;margin-top:2px}
.cg-acts{position:absolute;top:8px;right:8px;display:flex;gap:5px;opacity:0;transition:opacity .15s}
.cg-acts button{border:0;background:#fff;color:#000;border-radius:999px;padding:4px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.cg-tile:hover .cg-cap,.cg-tile:hover .cg-acts{opacity:1}
.cg-empty{display:grid;place-items:center;gap:12px;padding:90px 20px 60px;text-align:center}
.cg-empty .ge1{font-family:'Anton',Impact,sans-serif;font-size:32px;text-transform:uppercase}
.cc{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:min(960px,calc(100% - 40px));z-index:60;background:#fff;border:1px solid #000;border-radius:22px;padding:12px 14px;box-shadow:0 18px 50px rgba(0,0,0,.35);color:#000}
.cc-top{display:flex;gap:10px;align-items:flex-start}
.cc-app{display:flex;align-items:center;gap:7px;border:1px solid #000;background:#fff;color:inherit;border-radius:14px;padding:8px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;flex:none;max-width:170px;margin-top:2px}
.cc-app b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-dot{width:10px;height:10px;border-radius:50%;background:#000;flex:none}
.cc-caret{opacity:.5;font-size:10px}
.cc-in{flex:1;border:0;background:transparent;font:inherit;font-size:14px;line-height:1.35;resize:none;padding:8px 4px;outline:none;color:inherit;min-height:46px}
.cc-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.28);background:transparent;border-radius:999px;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;color:inherit;max-width:280px}
.cc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-chip:hover{border-color:#000}
.cc-sw{width:16px;height:16px;border-radius:5px;overflow:hidden;flex:none;background:#222}
.cc-sw img{width:100%;height:100%;object-fit:cover;display:block}
.cc .btn.mini2{font-size:11.5px}
.cc-gen{margin-left:auto;flex:none;background:var(--sun)!important;color:#000!important;border:1px solid #000!important;border-radius:999px;padding:0 30px;height:50px;font:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 0 #000}
.cc-gen:hover{transform:translateY(-1px);box-shadow:0 5px 0 #000} .cc-gen:active{transform:translateY(2px);box-shadow:0 2px 0 #000} .cc-gen:disabled{opacity:.6;cursor:wait;transform:none}
.cc-cost{opacity:.7;font-weight:700;font-size:12px}
.rc-box.cview{width:min(1100px,96vw)}
#cView #cworkbench{display:block!important}
#cAngle .angles{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:10px!important;max-height:none!important}
#cAngle .angle{padding:12px 14px!important}
#cLook #caes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:8px!important}
#cAngle .rc-mh .btn,#cLook .rc-mh .btn,#cBrand .rc-mh .btn{flex:none}

/* ── Memes + Faceless in the rail shape: rail · stage · history ── */
#pane-memes.rail,#pane-faceless.rail{grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;gap:22px}
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp{grid-row:1} #pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed{grid-row:2;border-radius:0!important}
.mkrail{grid-column:1;grid-row:3;background:#fff;border:1px solid #000;border-top:0;border-radius:0 0 26px 26px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
.mkrail .rc-block+.rc-block{border-top:1px solid rgba(0,0,0,.1);padding-top:12px}
.mkrail .rc-note{font-size:11px;opacity:.6;align-self:center;flex:1;line-height:1.3}
.mkrail .mrender{background:transparent;color:#000;padding:12px 0 0;margin:0;border-top:1px solid rgba(0,0,0,.1);border-radius:0}
.mkrail .mrender .btn.primary{width:100%} .mkrail .mrender .mr-row{display:flex;gap:8px;align-items:center} .mkrail .mrender .dim{opacity:.6;color:#000}
.mkrail .mmchip,.mkrail .lvchip{padding:5px 10px!important;font-size:11.5px!important}
.mkstage{grid-column:2;grid-row:1/span 4;background:#fff;border:1px solid #000;border-radius:26px;padding:14px 16px 16px;min-height:420px}
.mks-head{display:flex;gap:10px;align-items:baseline;margin-bottom:12px} .mks-head b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.01em} .mks-head .dim{font-size:12px;opacity:.6}
.mks-empty{display:grid;place-items:center;gap:12px;padding:70px 20px;text-align:center;font-size:14px;font-weight:600;border:1px dashed rgba(0,0,0,.35);border-radius:18px}
.mkhist{grid-column:2;grid-row:5}
.mh-grid.mm .mh-tile{aspect-ratio:4/5} .mh-grid.fc .mh-tile{aspect-ratio:9/16}
.mh-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;opacity:0;transition:opacity .15s;pointer-events:none}
.mh-cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.25} .mh-cap span{display:block;font-size:10.5px;opacity:.75}
.mh-tile:hover .mh-cap{opacity:1}
#mMemes .mmgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
#mMemes .mmzone{margin-top:22px} #mHook .mmvariants{margin-top:12px}
#pane-memes.rail .mmstage .mm-edinline{margin:0}
@media(max-width:1000px){.mkrail,.mkstage,.mkhist{grid-column:1;grid-row:auto;position:static}}
.fc-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fc-look{border:1px solid #000;border-radius:16px;padding:14px;cursor:pointer;background:#fff;display:flex;flex-direction:column;gap:4px}
.fc-look .e{font-size:26px;line-height:1} .fc-look b{font-size:14px} .fc-look span{font-size:11.5px;opacity:.65;line-height:1.35}
.fc-look.on{background:var(--sun);border-color:#000}
.fcstage .lvscenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.fcstage .lvscene{margin:0}
.fcstage .lvprog:not(.show){display:none}
/* Yap rail: mode pills as a segmented pair, steps as a left-aligned list */
#pane-yap.rail .ysteps{gap:6px;padding:12px 14px 14px!important}
#pane-yap.rail .ysteps .ymodes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
#pane-yap.rail .ysteps .ymode-pill{justify-content:center;text-align:center;width:100%;padding:9px 10px!important;border-radius:12px!important;font-size:12.5px!important}
#pane-yap.rail .ysteps .ystep{display:flex!important;align-items:center;gap:9px;text-align:left;width:100%;justify-content:flex-start;padding:9px 10px!important;font-size:13px!important}
#pane-yap.rail .ysteps .ystep .yn{flex:none}
/* one Generate everywhere: big, sun, black offset — Reaction, Memes, Faceless rails */
.mrender .btn.primary,#pane-react.rail .mrender .btn.primary,.mkrail .mrender .btn.primary{width:100%;height:54px;padding:0 24px!important;font-size:17px!important;font-weight:800!important;letter-spacing:.01em;border-radius:999px!important;background:var(--sun)!important;color:#000!important;border:1px solid #000!important;box-shadow:0 4px 0 #000;transition:transform .08s,box-shadow .08s}
.mrender .btn.primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 #000} .mrender .btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #000}
.mrender .btn.primary:disabled{opacity:.55;transform:none;box-shadow:0 4px 0 #000;cursor:not-allowed}
.mrender .btn.primary:disabled{opacity:.7!important;background:var(--sun)!important;color:#000!important}

/* ── the carousel viewer: slide big on the left, the words + the chat on the right ── */
.rc-box.cview{width:min(1180px,96vw);padding:0!important;overflow:hidden}
.cv-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:min(80vh,780px)}
.cv-stage{background:#0e0e11;color:#fff;padding:14px 18px 16px;display:flex;flex-direction:column;min-width:0}
.cv-stagehead{display:flex;align-items:center;gap:10px;margin-bottom:10px} .cv-num{font-family:'Anton',Impact,sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:.01em} .cv-stage .dim{opacity:.6;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-stage .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.cv-stage .preview-wrap{background:transparent!important;border:0!important;padding:0!important;flex:1;display:flex;flex-direction:column;justify-content:center}
.cv-stage .carframe{max-width:none!important;width:auto;height:min(60vh,580px);aspect-ratio:4/5;margin:0 auto;border-color:rgba(255,255,255,.15)!important;cursor:pointer;border-radius:12px}
.cv-stage .carframe:hover{border-color:var(--sun)!important}
.cv-stage .slidestrip{justify-content:center;margin:14px 0 0;padding-bottom:4px} .cv-stage .sthumb.on{border-color:var(--sun)!important}
.cv-stage .pvh{display:none}
.cv-side{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:min(80vh,780px);background:#fff;color:#000}
.cv-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .cv-k .dim{text-transform:none;letter-spacing:0;font-weight:500;opacity:.6}
.cv-fields{display:flex;flex-direction:column;gap:6px}
.cvf{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} .cvf span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.55}
.cvf input,.cvf textarea{width:100%;border:1px solid rgba(0,0,0,.25);border-radius:10px;padding:7px 9px;font:inherit;font-size:12.5px;line-height:1.35;background:transparent;color:inherit;resize:vertical;box-sizing:border-box}
.cvf input:focus,.cvf textarea:focus{outline:2px solid var(--sun);border-color:transparent}
.cvf2{display:flex;gap:6px} .cvf-k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.55;margin-top:4px} .cvf-hint{font-size:11px;opacity:.55;margin-top:2px}
.cv-ref{margin-bottom:6px} .cv-refchip{display:inline-flex;align-items:center;gap:6px;background:var(--sun);color:#000;border:1px solid #000;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700} .cv-refchip b{cursor:pointer;opacity:.6} .cv-refchip b:hover{opacity:1}
.cv-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
#cView .cchat{max-height:150px} #cView .cprompt{margin-bottom:0}
.cv-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(0,0,0,.12);display:flex;gap:6px;align-items:center}
.cv-dl{flex:1;background:var(--sun)!important;color:#000!important;border:1px solid #000!important;border-radius:999px!important;height:44px;font-weight:800;font-size:14px;justify-content:center}
#carimg:not([src]){display:none!important}
/* picked states you can actually see */
.cstyle.on .csw{outline:3px solid var(--sun)!important;outline-offset:2px;border-color:#000!important}
.cstyle.on .csw::after{content:'✓';position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:var(--sun);color:#000;border:1px solid #000;display:grid;place-items:center;font-size:13px;font-weight:800;z-index:3}
.angle.acc{outline:3px solid var(--sun)!important;outline-offset:1px;border-color:#000!important;position:relative}
.angle.acc::before{content:'✓ Picked';position:absolute;top:-10px;right:12px;background:var(--sun);color:#000;border:1px solid #000;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.04em}
@media(max-width:900px){.cv-grid{grid-template-columns:1fr}.cv-side{max-height:none}}

/* the viewer's right side: prominent actions, one Apply, live fields */
.cv-quick{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.cv-quick .qa{border:1px solid #000;background:#fff;color:#000;border-radius:999px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1}
.cv-quick .qa:hover{background:var(--sun)}
.cv-prompt{display:flex;gap:8px;align-items:stretch}
.cv-prompt textarea{flex:1;min-width:0;border:1px solid #000;border-radius:14px;padding:10px 12px;font:inherit;font-size:13px;line-height:1.35;resize:none;background:transparent;color:inherit}
.cv-prompt textarea:focus{outline:2px solid var(--sun);border-color:transparent}
.cv-apply{flex:none;background:var(--sun);color:#000;border:1px solid #000;border-radius:14px;padding:0 18px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #000}
.cv-apply:disabled{opacity:.7;cursor:wait} .cv-apply:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
#cView .cchat{margin:8px 0 0;max-height:120px} #cView .cchat:empty{display:none}
.cv-stat{margin-left:auto;font-size:10.5px;font-weight:700;text-transform:none;letter-spacing:0;color:#000;background:var(--sun);border-radius:999px;padding:2px 8px} .cv-stat:empty{display:none}
/* generating: pulsating pixels, one label */
.cv-stage .carover{background:#0b0b0e!important;backdrop-filter:none!important;gap:10px!important;overflow:hidden}
.carover .px{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(15,1fr);gap:3px;padding:6px;opacity:.9}
.carover .px i{display:block;background:var(--sun);border-radius:2px;opacity:.08;animation:pxpulse 1.4s ease-in-out infinite}
@keyframes pxpulse{0%,100%{opacity:.06;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}
.carover .ring{display:none!important}
.carover .lbl{position:relative;z-index:2;font-family:'Anton',Impact,sans-serif;font-size:30px;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.9);animation:glitch 2.2s steps(1) infinite}
.carover .sub{position:relative;z-index:2;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sun);text-shadow:0 0 10px #000}
@keyframes glitch{0%,88%,100%{transform:none;clip-path:none}90%{transform:translate(-3px,1px);clip-path:inset(10% 0 55% 0)}93%{transform:translate(3px,-1px);clip-path:inset(50% 0 5% 0)}96%{transform:translate(-1px,0);clip-path:none}}
.cv-num{white-space:nowrap;flex:none}
/* picked states drawn INSIDE the card, so scrolling containers can't clip them */
.angle.acc{outline:0!important;border:3px solid var(--sun)!important;padding:10px 12px!important}
.angle.acc::before{top:8px;right:8px;position:absolute}
#cAngle .angles{padding:2px;overflow:visible!important}
.cstyle.on .csw{outline:0!important;border:3px solid var(--sun)!important}
.angle.acc .hl{padding-right:80px}

/* generating pixels v2: white, tight, a diagonal wave with hot flickers and a scanline */
.carover .px{grid-template-columns:repeat(24,1fr)!important;grid-template-rows:repeat(30,1fr)!important;gap:1px!important;padding:2px!important;opacity:1!important}
.carover .px i{background:#fff!important;border-radius:1px!important;opacity:.05;animation:pxwave 1.8s cubic-bezier(.6,0,.3,1) infinite!important}
.carover .px i.hot{animation:pxhot .9s steps(2) infinite!important}
@keyframes pxwave{0%{opacity:.04;transform:scale(.55)}18%{opacity:1;transform:scale(1)}40%{opacity:.18;transform:scale(.85)}100%{opacity:.04;transform:scale(.55)}}
@keyframes pxhot{0%{opacity:1;background:#fff}50%{opacity:.1}100%{opacity:1;background:var(--sun)}}
.carover::after{content:'';position:absolute;left:0;right:0;top:-20%;height:18%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent);animation:pxscan 2.6s linear infinite;z-index:1;pointer-events:none}
@keyframes pxscan{0%{top:-20%}100%{top:110%}}
.carover .lbl{mix-blend-mode:difference}
@keyframes pxwave{0%{opacity:.1;transform:scale(.6)}18%{opacity:1;transform:scale(1)}45%{opacity:.32;transform:scale(.88)}100%{opacity:.1;transform:scale(.6)}}
.carover .lbl:empty{display:none}
/* generating: the ripple loader (Uiverse, alexruix) in yellows */
.carover .px{display:none!important} .carover::after{display:none!important}
.carover .loader{--cell-size:52px;--cell-spacing:1px;--cells:3;--total-size:calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));display:flex;flex-wrap:wrap;width:var(--total-size);height:var(--total-size);position:relative;z-index:2;margin-bottom:6px}
.carover .cell{flex:0 0 var(--cell-size);margin:var(--cell-spacing);background-color:transparent;box-sizing:border-box;border-radius:4px;animation:1.5s ripple ease infinite;display:block;opacity:1;transform:none}
.carover .cell.d-1{animation-delay:100ms} .carover .cell.d-2{animation-delay:200ms} .carover .cell.d-3{animation-delay:300ms} .carover .cell.d-4{animation-delay:400ms}
.carover .cell:nth-child(1){--cell-color:#FFB300} .carover .cell:nth-child(2){--cell-color:#FFBD0F} .carover .cell:nth-child(3){--cell-color:#FFC71E}
.carover .cell:nth-child(4){--cell-color:#FFD02C} .carover .cell:nth-child(5){--cell-color:#FFD731} .carover .cell:nth-child(6){--cell-color:#FFDF55}
.carover .cell:nth-child(7){--cell-color:#FFE778} .carover .cell:nth-child(8){--cell-color:#FFEE9A} .carover .cell:nth-child(9){--cell-color:#FFF5BC}
@keyframes ripple{0%{background-color:transparent}30%{background-color:var(--cell-color)}60%{background-color:transparent}100%{background-color:transparent}}
.carover .sub{color:#fff;opacity:.8}
.carover .loader{--cell-size:64px}
.cg-tag{position:absolute;left:8px;top:8px;background:#fff;color:#000;border:1px solid #000;border-radius:999px;padding:2px 7px;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* ── Carousel composer, Cinema Studio shape: parameter pills above, the box with a mode column, chips at the bottom, Generate at the right ── */
.cc{width:min(1000px,calc(100% - 40px));padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.cc-pills{display:flex;gap:8px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.cc-pill{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #000;border-radius:14px;padding:6px 12px 6px 8px;font:inherit;color:inherit;cursor:pointer;min-width:150px;text-align:left}
.cc-pill:hover{background:var(--sun)}
.cc-pill .pi{width:30px;height:30px;border-radius:9px;background:rgba(0,0,0,.06);display:grid;place-items:center;font-size:15px;flex:none;overflow:hidden}
.cc-pill .pi.sw img{width:100%;height:100%;object-fit:cover;display:block}
.cc-pill .pt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.cc-pill small{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.55}
.cc-pill b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.cc-box{display:flex;gap:10px;align-items:stretch;background:#fff;border:1px solid #000;border-radius:22px;padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.35);color:#000}
.cc-modes{display:flex;flex-direction:column;gap:6px;flex:none}
.cc-mode{width:58px;flex:1;border:1px solid rgba(0,0,0,.18);background:rgba(0,0,0,.04);border-radius:12px;font:inherit;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:inherit}
.cc-mode span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.cc-mode.on{background:var(--sun);border-color:#000}
.cc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cc-in{min-height:52px;padding:8px 6px 2px}
.cc-bottom{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cc-bottom .cc-app{margin:0;padding:5px 9px;border-radius:999px;font-size:12px}
.cc-chip.static{cursor:default;opacity:.7}
.cc-recent{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-left:4px}
.cc-recent .rk{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.5}
.cc-rc{border:1px dashed rgba(0,0,0,.35);background:transparent;border-radius:999px;padding:4px 9px;font:inherit;font-size:11px;cursor:pointer;color:inherit;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-rc:hover{background:var(--sun);border-style:solid;border-color:#000}
.cc-go{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:none}
.cc-go .cc-gen{margin:0;height:100%;min-height:64px;padding:0 26px;font-size:17px;border-radius:16px}
/* content plan card: one clean row */
.bc-embed .ebar{display:flex;align-items:center;gap:12px;padding:12px 14px!important}
.bc-embed .ebar .ic{width:34px;height:34px;border-radius:50%;background:var(--sun);border:1px solid #000;display:grid;place-items:center;font-size:16px;flex:none}
.bc-embed .ebar .et{flex:1;min-width:0} .bc-embed .ebar .et b{font-size:13.5px;display:block} .bc-embed .ebar .sub{font-size:11.5px;line-height:1.3;opacity:.65!important}
.bc-embed .ebar .ex{background:#000!important;color:#fff!important;border-radius:999px!important;padding:6px 12px!important;font-size:11.5px!important;font-weight:800!important;flex:none}
.bc-embed .ev{display:none!important} .bc-embed{min-height:0!important;cursor:pointer}
@media(max-width:900px){.cc-modes{display:none}.cc-go .cc-gen{min-height:48px}}

/* ── Yap Studio · the Edit step: template cards, the template pop-up, one big button ── */
.ybig{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:420px;height:54px;padding:0 24px;font:inherit;font-size:17px;font-weight:800;letter-spacing:.01em;border-radius:999px;background:var(--sun)!important;color:#000!important;border:1px solid #000;box-shadow:0 4px 0 #000;cursor:pointer;transition:transform .08s,box-shadow .08s}
.ybig:hover{transform:translateY(-1px);box-shadow:0 5px 0 #000} .ybig:active{transform:translateY(2px);box-shadow:0 2px 0 #000} .ybig:disabled{opacity:.7;cursor:wait;transform:none}
.ytgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.ytcard:hover{transform:translateY(-2px)} .ytcard{transition:transform .12s}
.ytpick{position:absolute;top:8px;left:8px;z-index:2;background:var(--sun);color:#000;border:1px solid #000;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.04em}
.ytsum{display:flex;gap:10px;align-items:center;margin:14px 0 8px;padding:10px 14px;border:1px solid rgba(0,0,0,.25);border-radius:14px;font-size:13px} .ytsum .dim{opacity:.65;font-size:12px}
.ytacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.rc-box.ytpl{width:min(900px,96vw)}
.ytpl-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
.ytpl-left img{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:14px;border:1px solid #000;display:block}
.ytpl-status{margin-top:8px;font-size:11.5px;font-weight:700;opacity:.7} .ytpl-status.ok{color:#1b7f3b;opacity:1}
.ytpl-right{display:flex;flex-direction:column;gap:6px}
.ytpl-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;display:flex;gap:8px;align-items:baseline} .ytpl-k .dim{text-transform:none;letter-spacing:0;font-weight:500;opacity:.6}
.ytpl-right textarea,.ytpl-right input[type=text]{width:100%;border:1px solid rgba(0,0,0,.3);border-radius:12px;padding:9px 11px;font:inherit;font-size:13px;background:transparent;color:inherit;resize:vertical;box-sizing:border-box}
.ytpl-right textarea:focus,.ytpl-right input:focus{outline:2px solid var(--sun);border-color:transparent}
.ytpl-right .ychips{display:flex;gap:6px;flex-wrap:wrap} .ytpl-right .ychip{padding:6px 11px!important;font-size:12px!important} .ytpl-right .ychip.static{cursor:default;opacity:.7}
.ytpl-right .ybig{margin-top:12px;max-width:none}
@media(max-width:760px){.ytpl-grid{grid-template-columns:1fr}.ytpl-left img{max-width:200px}}
/* composer without the mode column: fuller box, taller text area, bigger chips */
.cc-box{padding:12px 12px 12px 16px;gap:14px}
.cc-in{min-height:64px;font-size:15px;padding:8px 4px 4px}
.cc-bottom{gap:8px} .cc-bottom .cc-app{font-size:12.5px;padding:6px 11px} .cc-chip{font-size:12px;padding:6px 12px}
.cc-go .cc-gen{min-height:74px;padding:0 34px;font-size:18px}
/* composer pills: one full-width row, soft tiles, no extra outlines */
.cc-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:8px;justify-content:stretch}
.cc-pill{min-width:0;width:100%;border:0!important;background:rgba(0,0,0,.06);border-radius:16px;padding:10px 14px 10px 10px}
.cc-pill b{max-width:none}
.cc-pill .pi{width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.08)}
.cc-in,.cc-in:focus{border:0!important;box-shadow:none!important;background:transparent!important;outline:none!important;border-radius:0!important}
.cc-main{border:0}

/* ── Memes: no lines between the app row, the plan and the rail; one soft panel ── */
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp{border-bottom:0!important;border-radius:26px 26px 0 0!important}
#pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed{border-top:0!important;border-bottom:0!important;border-radius:0!important} #pane-memes.rail .bc-embed .ebar,#pane-faceless.rail .bc-embed .ebar{border-top:0!important;padding-top:4px!important}
.mkrail{border-top:0!important} .mkrail .rc-block+.rc-block{border-top:0;padding-top:6px} .mkrail .mrender{border-top:0;padding-top:8px}
.mkrail .rc-note{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .rc-adj{border:1px solid #000;background:#fff;color:#000;border-radius:999px;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer} .rc-adj:hover{background:var(--sun)}
/* History fills the right side when there is no stage */
#pane-memes.rail .mkhist{grid-column:2;grid-row:1/span 5}
/* the Generating tile */
.mh-tile.mh-gen{background:#0b0b0e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid var(--sun)}
.mh-gen .loader{--cell-size:26px;--cell-spacing:1px;--cells:3;--total-size:calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));display:flex;flex-wrap:wrap;width:var(--total-size);height:var(--total-size)}
.mh-gen .cell{flex:0 0 var(--cell-size);margin:var(--cell-spacing);border-radius:3px;background:transparent;animation:1.5s ripple ease infinite}
.mh-gen .cell.d-1{animation-delay:100ms}.mh-gen .cell.d-2{animation-delay:200ms}.mh-gen .cell.d-3{animation-delay:300ms}.mh-gen .cell.d-4{animation-delay:400ms}
.mh-gen .cell:nth-child(1){--cell-color:#FFB300}.mh-gen .cell:nth-child(2){--cell-color:#FFBD0F}.mh-gen .cell:nth-child(3){--cell-color:#FFC71E}.mh-gen .cell:nth-child(4){--cell-color:#FFD02C}.mh-gen .cell:nth-child(5){--cell-color:#FFD731}.mh-gen .cell:nth-child(6){--cell-color:#FFDF55}.mh-gen .cell:nth-child(7){--cell-color:#FFE778}.mh-gen .cell:nth-child(8){--cell-color:#FFEE9A}.mh-gen .cell:nth-child(9){--cell-color:#FFF5BC}
.mh-genlbl{text-align:center;color:#fff;padding:0 12px} .mh-genlbl b{display:block;font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .mh-genlbl span{display:block;font-size:10.5px;color:var(--sun);margin-top:4px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* the demo editor */
.rc-box.md{width:min(1040px,96vw)}
.md-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.md-stage{position:relative;height:min(58vh,520px);background:#000;border-radius:14px;overflow:hidden;user-select:none}
.md-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.md-shade{position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events:none}
.md-crop{position:absolute;border:2px solid var(--sun);box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:grab;touch-action:none;border-radius:4px} .md-crop:active{cursor:grabbing}
.md-crop span{position:absolute;inset:0;background:linear-gradient(to right,transparent 33.3%,rgba(255,255,255,.25) 33.3%,rgba(255,255,255,.25) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.25) 66.6%,rgba(255,255,255,.25) calc(66.6% + 1px),transparent calc(66.6% + 1px)),linear-gradient(to bottom,transparent 33.3%,rgba(255,255,255,.25) 33.3%,rgba(255,255,255,.25) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.25) 66.6%,rgba(255,255,255,.25) calc(66.6% + 1px),transparent calc(66.6% + 1px));pointer-events:none}
.md-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.md-play{width:36px;height:36px;border-radius:50%;border:1px solid #000;background:var(--sun);color:#000;font:inherit;font-size:13px;cursor:pointer;flex:none}
.md-seek{flex:1;height:14px;border-radius:7px;background:rgba(0,0,0,.15);position:relative;cursor:pointer;overflow:hidden}
.md-seek i#md-fill{position:absolute;left:0;top:0;bottom:0;background:#000;opacity:.55;width:0}
.md-cuts i{position:absolute;top:0;bottom:0;background:#ff5a5a;opacity:.8} .md-cuts b{position:absolute;top:0;bottom:0;width:2px;background:var(--sun)}
.md-clock{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.md-right{display:flex;flex-direction:column;gap:8px}
.md-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:6px;display:flex;gap:8px;align-items:baseline} .md-k .dim{text-transform:none;letter-spacing:0;font-weight:500;opacity:.6}
.md-row{display:flex;gap:8px;align-items:center;font-size:12px} .md-row input[type=range]{flex:1;accent-color:#ffd731}
.md-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .md-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #000;border-radius:999px;padding:4px 9px;font-size:11.5px;font-weight:700} .md-chip b{cursor:pointer;opacity:.6}
.md-sum{font-size:12.5px;margin-top:6px;padding:10px 12px;border:1px dashed rgba(0,0,0,.35);border-radius:12px}
.md-right .ybig{margin-top:10px;max-width:none}
@media(max-width:860px){.md-grid{grid-template-columns:1fr}}

/* Reaction UGC: no lines between rail rows; History fills the right; editor in a pop-up */
#pane-react.rail .rxtop > *{border-top:0!important}
#pane-react.rail .rxtop > .mrender{border-top:0!important}
#pane-react.rail #mhist{grid-column:2;grid-row:1/span 8;margin-top:0}
.rc-box.redit{width:min(1200px,96vw)} #reditHost .ed-inline{border:0!important;border-radius:0!important;background:transparent!important} #reditHost .ed-bar{display:none}
#reditHost #rexport{display:flex!important;border-top:0!important}

/* History: one render per row, actions beside it */
.mh-list{display:flex;flex-direction:column;gap:16px}
.mh-row{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start;border:1px solid rgba(0,0,0,.18);border-radius:22px;padding:12px;background:#fff}
.mh-row .mh-vid{border:0;border-radius:16px;overflow:hidden;background:#000;display:grid;place-items:center;min-height:280px}
.mh-row .mh-vid video{width:100%;max-height:640px;display:block;object-fit:contain}
.mh-row .mh-det{display:flex;flex-direction:column;gap:8px;padding:6px 4px}
.mh-hook{font-size:15px;font-weight:700;line-height:1.3}
.mh-chips{display:flex;gap:6px;flex-wrap:wrap}
.mh-acts2{display:flex;flex-direction:column;gap:6px;margin-top:6px} .mh-acts2 .btn{justify-content:center}
.mh-vid.mh-gen{border:1px solid var(--sun);background:#0b0b0e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:280px}
/* the left column is ONE panel: no ground showing between the app row, the plan and the rail */
#pane-memes.rail,#pane-faceless.rail{row-gap:0!important;column-gap:22px}
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp{border-bottom:0!important;padding-bottom:6px!important}
#pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed{margin:0!important;border-top:0!important;border-bottom:0!important}
.mkrail{border-top:0!important;padding-top:6px}
#pane-memes.rail .mkhist,#pane-faceless.rail .mkhist{grid-column:2;grid-row:1/span 5;margin-top:0}
.mkhist .mh-head{margin-top:0}

/* History rows: no outline · video at a fixed height on the left · details, buttons and facts fill the right */
.mh-row{border:0!important;background:transparent!important;padding:0!important;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:stretch}
.mh-row .mh-vid{height:560px;min-height:0;width:auto;border-radius:18px;background:#000;display:flex;align-items:center;justify-content:center}
.mh-row .mh-vid video{height:100%;width:auto;max-width:none;max-height:none;display:block}
.mh-vid.mh-gen{width:315px}
.mh-row .mh-det{padding:4px 0;gap:10px;justify-content:flex-start}
.mh-hook{font-size:18px;line-height:1.3}
.mh-acts2{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:2px} .mh-acts2 .btn{padding:8px 14px;font-size:12.5px}
.mh-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px;margin:10px 0 0;padding:14px 0 0;border-top:1px solid rgba(0,0,0,.1)}
.mh-facts div{display:flex;flex-direction:column;gap:2px;min-width:0} .mh-facts dt{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.5} .mh-facts dd{margin:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.mh-list{gap:26px}
/* the rail reaches the bottom of the screen */
.mkrail,#pane-react.rail .rxtop{min-height:calc(100vh - 118px)}
.mkrail .mrender,#pane-react.rail .rxtop > .mrender{margin-top:auto}
.mh-row .mh-det{background:transparent!important;border:0!important;padding:4px 0!important}
.mkrail .mrender,#pane-react.rail .rxtop > .mrender{margin-top:0}
.rc-pv.upper .rc-pvt{top:30%;transform:translate(-50%,-50%)}
#rc-multi.on{background:var(--sun)!important;color:#000!important}
.rc-pv.upper{align-items:flex-start;padding-top:12%}

/* the rail ends after Generate, with one thin outline around the whole panel */
.mkrail,#pane-react.rail .rxtop{min-height:0!important;height:auto;align-self:start}
#pane-memes.rail > .mapp,#pane-faceless.rail > .mapp{padding:14px 16px 8px!important}
#pane-memes.rail .mkrail,#pane-faceless.rail .mkrail{border-radius:0 0 26px 26px!important;padding-top:4px}
.cc-slidewrap{position:relative;display:inline-block}
.cc-pop{display:none;position:absolute;left:0;bottom:calc(100% + 6px);background:#fff;border:1px solid #000;border-radius:14px;padding:6px;min-width:150px;z-index:5;flex-direction:column;gap:2px}
.cc-pop.on{display:flex} .cc-pop button{border:0;background:transparent;text-align:left;font:inherit;font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:9px;cursor:pointer;color:inherit} .cc-pop button:hover{background:var(--sun);color:#000}
.cc-pill .pi .cc-dot{width:12px;height:12px}
/* pop-ups own the scroll: the page behind stays put, the box scrolls to the end */
body:has(.rc-modal.on){overflow:hidden}
.rc-box{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#cAngle .rc-box{max-height:92vh;overflow-y:auto;padding-bottom:28px}
/* ── Narrow screens (tablet, a half window): one column, rows stack, nothing runs off the edge ── */
@media(max-width:1100px){
  #pane-react.rail,#pane-memes.rail,#pane-faceless.rail,#pane-yap.rail{grid-template-columns:1fr!important;grid-template-rows:none!important;row-gap:0!important}
  #pane-memes.rail > .mapp,#pane-faceless.rail > .mapp,#pane-memes.rail .bc-embed,#pane-faceless.rail .bc-embed,.mkrail,.mkstage,.mkhist,#pane-react.rail .rxtop,#pane-react.rail #mhist,#pane-yap.rail > .mapp,#pane-yap.rail .ysteps,#pane-yap.rail .bc-embed,#pane-yap.rail #ybody,#pane-yap.rail #mhist{grid-column:1!important;grid-row:auto!important;position:static!important;max-width:none}
  .mkstage,.mkhist,#pane-react.rail #mhist,#pane-yap.rail #ybody,#pane-yap.rail #mhist{margin-top:18px!important}
  .mh-row{grid-template-columns:1fr!important;gap:12px!important}
  .mh-row .mh-vid{height:auto!important;max-height:70vh;width:100%!important;aspect-ratio:auto}
  .mh-row .mh-vid video{height:auto!important;max-height:70vh;width:auto;max-width:100%!important}
  .mh-vid.mh-gen{width:100%!important;min-height:220px!important}
  .mh-row .mh-det{padding:0 2px!important}
  .mh-facts{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important}
  .cc{width:calc(100% - 24px)!important;bottom:10px!important}
  .cc-pills{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cc-box{flex-wrap:wrap} .cc-go{width:100%} .cc-go .cc-gen{min-height:52px!important;width:100%}
  .rc-box{width:96vw!important;padding:12px 14px 18px!important} .rc-mh{flex-wrap:wrap;gap:8px} .rc-mh .btn{flex:none}
  .cv-grid,.md-grid,.ytpl-grid{grid-template-columns:1fr!important} .cv-side{max-height:none!important}
}
/* ── Yap Studio: one panel on the left (no gaps), Upload choice, Take step, Preview loader ── */
#pane-yap.rail{row-gap:0!important;column-gap:22px}
#pane-yap.rail > .mapp{border-bottom:0!important;padding-bottom:6px!important}
#pane-yap.rail .ysteps{border-top:0!important;border-bottom:0!important;border-radius:0!important}
#pane-yap.rail .bc-embed{border-top:0!important;border-radius:0 0 26px 26px!important}
.yup-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.yup-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px;border:1px solid rgba(0,0,0,.25);border-radius:20px;background:#fff;color:inherit;font:inherit;cursor:pointer}
.yup-card .ic{font-size:26px;line-height:1} .yup-card b{font-size:16px} .yup-card span{font-size:12.5px;opacity:.65;line-height:1.4}
.yup-card.on{border:2px solid var(--sun);padding:17px}
.yup-drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:38px 20px;border:2px dashed rgba(0,0,0,.35);border-radius:20px;cursor:pointer}
.yup-drop:hover{border-color:var(--sun)} .yup-drop .ic{font-size:30px;line-height:1} .yup-drop b{font-size:16px} .yup-drop span{font-size:12.5px;opacity:.65;max-width:420px;line-height:1.4}
.yup-have{display:flex;gap:16px;align-items:flex-start;margin-top:14px;padding:14px;border-radius:18px;border:1px solid rgba(0,0,0,.18)}
#yupwrap .ymode:first-child{display:none}
.ytk-grid{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:22px;align-items:start}
.ytk-bar{position:relative;height:8px;border-radius:4px;background:rgba(0,0,0,.15);margin-top:8px;overflow:hidden} .ytk-bar i{position:absolute;top:0;bottom:0;background:#ff5a5a;opacity:.85} .ytk-bar i.pause{background:#999}
.ytk-sum{font-size:12.5px;margin-top:8px;line-height:1.5} .ytk-sum .lnk{text-decoration:underline;cursor:pointer;opacity:.75}
.ytk-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;align-items:baseline;margin-bottom:8px} .ytk-k .dim{text-transform:none;letter-spacing:0;font-weight:500;opacity:.6}
.ytk-lines{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow:auto;padding-right:4px}
.ytk-line{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:10px} .ytk-line:hover{background:rgba(0,0,0,.05)}
.ytk-line .t{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;opacity:.55;cursor:pointer;width:44px;flex:none}
.ytk-line input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:inherit;padding:4px 6px;border-radius:8px} .ytk-line input:focus{outline:2px solid var(--sun)}
.ytk-line .x{border:0;background:transparent;font:inherit;font-size:13px;cursor:pointer;opacity:.5;padding:2px 6px} .ytk-line .x:hover{opacity:1}
.ytk-line.off input{text-decoration:line-through;opacity:.45} .ytk-line.off .t{opacity:.3}
.yload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:40px 20px;border:1px dashed rgba(0,0,0,.3);border-radius:22px;min-height:320px}
.yload.big{min-height:min(60vh,520px)}
.yload .loader{--cell-size:30px;--cell-spacing:1px;--cells:3;--total-size:calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));display:flex;flex-wrap:wrap;width:var(--total-size);height:var(--total-size);margin-bottom:6px}
.yload .cell{flex:0 0 var(--cell-size);margin:var(--cell-spacing);border-radius:3px;background:transparent;animation:1.5s ripple ease infinite}
.yload .cell.d-1{animation-delay:100ms}.yload .cell.d-2{animation-delay:200ms}.yload .cell.d-3{animation-delay:300ms}.yload .cell.d-4{animation-delay:400ms}
.yload .cell:nth-child(1){--cell-color:#FFB300}.yload .cell:nth-child(2){--cell-color:#FFBD0F}.yload .cell:nth-child(3){--cell-color:#FFC71E}.yload .cell:nth-child(4){--cell-color:#FFD02C}.yload .cell:nth-child(5){--cell-color:#FFD731}.yload .cell:nth-child(6){--cell-color:#FFDF55}.yload .cell:nth-child(7){--cell-color:#FFE778}.yload .cell:nth-child(8){--cell-color:#FFEE9A}.yload .cell:nth-child(9){--cell-color:#FFF5BC}
.yload b{font-size:17px} .yload > span{font-size:12.5px;opacity:.7}
.ypv-head{display:flex;gap:10px;align-items:center;margin-bottom:12px} .ypv-head b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:22px;text-transform:uppercase} .ypv-head .dim{font-size:12px;opacity:.6}
.ypv-tweaks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
@media(max-width:900px){.ytk-grid{grid-template-columns:1fr}.yup-choice{grid-template-columns:1fr}}
/* Upload boxes the size of the rail */
.yup-choice{grid-template-columns:repeat(2,minmax(0,380px));gap:16px;justify-content:start}
.yup-card{min-height:290px;padding:22px;gap:8px;position:relative} .yup-card.drag{border-color:var(--sun)!important;background:rgba(255,215,49,.08)}
.yup-card .ic{font-size:36px} .yup-card b{font-size:19px} .yup-card > span:not(.ic):not(.yup-cta){font-size:13px;opacity:.65;line-height:1.45}
.yup-cta{margin-top:auto;display:inline-flex;align-items:center;border:1px solid #000;border-radius:999px;padding:9px 14px;font-size:12.5px;font-weight:800;background:var(--sun);color:#000}
.yup-thumb{width:100%;max-width:150px;border-radius:12px;overflow:hidden;background:#000} .yup-thumb video{width:100%;display:block;max-height:110px;object-fit:cover}
/* Take: karaoke transcript */
.ytk{display:grid;gap:22px;align-items:start} .ytk.port{grid-template-columns:minmax(260px,360px) minmax(0,1fr)} .ytk.land{grid-template-columns:1fr} .ytk.land .ytk-video{max-width:820px;margin:0 auto;width:100%}
.ytk-lines{max-height:56vh;font-size:15px;line-height:1.7} .ytk.land .ytk-lines{max-height:40vh}
.ytk-line{align-items:flex-start} .ytk-line .ww{flex:1;min-width:0;padding:2px 4px} .ytk-line.now{background:rgba(255,215,49,.06)}
.w{cursor:pointer;padding:1px 3px;border-radius:5px;transition:background .08s} .w:hover{background:rgba(255,215,49,.25)} .w.on{background:var(--sun);color:#000} .w.editing{outline:2px solid var(--sun);background:#fff;color:#000}
.ytk-line.off .ww{text-decoration:line-through;opacity:.4}
.ytk-selbar{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;padding:8px 10px;margin-top:6px;border-radius:12px;background:var(--sun);color:#000;font-size:12.5px;font-weight:700} .ytk-selbar .btn{margin-left:auto;background:#000;color:#fff;border-color:#000}
@media(max-width:900px){.yup-choice{grid-template-columns:1fr}.ytk.port{grid-template-columns:1fr}}
.rc-box.yav{width:min(1100px,96vw)} #yavwrap .ymode:first-child{display:none} #yavwrap{padding-top:4px}
/* ── Yap · Take and Preview in subtle panels; layouts follow the footage ── */
.yup-choice{grid-template-columns:repeat(2,380px)} .yup-card{align-self:stretch}
.ytk-video,.ytk-tx{background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:22px;padding:14px 16px 16px}
.ytk.port .yvidwrap{width:100%;max-width:360px;aspect-ratio:9/16;height:auto;margin:0 auto}
.ytk.land .yvidwrap{width:100%;max-width:none;aspect-ratio:16/9;height:auto} .ytk.land .ytk-video{max-width:900px;margin:0 auto}
.ytk .yvidwrap video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.ytk-sum{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.ytk-sum .pill{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.06)} .ytk-sum .pill.ok{background:rgba(60,200,120,.18)} .ytk-sum .pill.dim{opacity:.6} .ytk-sum .pill.lnk{cursor:pointer;text-decoration:none;background:var(--sun);color:#000;opacity:1}
.ytk-k b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.ytk-lines{padding:4px 2px} .ytk-line{padding:5px 8px;border-radius:12px} .ytk-line .t{background:rgba(0,0,0,.06);border-radius:999px;padding:2px 7px;width:auto;font-size:10.5px;margin-top:3px}
.ytk-line .x{opacity:0} .ytk-line:hover .x{opacity:.6}
.ytk-tx .ybig{margin-top:14px}
.ypv{display:grid;gap:22px;align-items:start} .ypv.port{grid-template-columns:minmax(0,1fr) 360px} .ypv.land{grid-template-columns:1fr}
.ypv-main{min-width:0} .ypv.port #utdraftwrap{margin:0 auto;display:block!important;width:fit-content}
.ypv-side{background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:8px;position:sticky;top:12px}
.ypv.land .ypv-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-end} .ypv.land .ypv-side > *{flex:1 1 260px}
.ypv-side .ytk-k{margin-top:6px} .ypv-side .ychips{display:flex;gap:6px;flex-wrap:wrap} .ypv-side .ychip{padding:6px 11px!important;font-size:12px!important}
.ypv-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ypv-side > div[style*="border-radius:999px"]{margin-top:0!important}
#utmarks{margin-top:10px!important}
@media(max-width:1100px){.ypv.port{grid-template-columns:1fr}.ypv-side{position:static}}
/* narrow Yap: app row, steps, plan, then the stage · the panel stays closed at the bottom */
@media(max-width:1100px){
  #pane-yap.rail > .mapp{grid-row:1!important} #pane-yap.rail .ysteps{grid-row:2!important} #pane-yap.rail .bc-embed{grid-row:3!important;margin-bottom:18px!important} #pane-yap.rail #ybody{grid-row:4!important} #pane-yap.rail #mhist{grid-row:5!important}
  #pane-yap.rail .ysteps .ystep{padding:9px 12px!important}
  .yup-choice{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ytk-lines{max-height:none!important}
}
@media(max-width:700px){.yup-choice{grid-template-columns:1fr!important}}
.ytk-selbar[hidden]{display:none!important}
/* Take: one layout for both aspects · the video column is the rail's width, the transcript beside it · no visible scrollbars */
.ytk,.ytk.port,.ytk.land{grid-template-columns:380px minmax(0,1fr)!important}
.ytk.land .ytk-video{max-width:none;margin:0} .ytk.land .yvidwrap{aspect-ratio:16/9;width:100%;max-width:none}
.ytk.port .yvidwrap{max-width:none;width:100%}
.ytk-lines{max-height:calc(100vh - 340px);min-height:240px;scrollbar-width:none;scroll-behavior:smooth} .ytk-lines::-webkit-scrollbar{display:none}
.ytk.land .ytk-lines{max-height:calc(100vh - 340px)}
.rc-box,.cv-side,.mh-list,.mmedits{scrollbar-width:thin}
@media(max-width:1100px){.ytk,.ytk.port,.ytk.land{grid-template-columns:1fr!important}}
.ytk-k .dim{white-space:nowrap} .ytk-k .dim:last-child{white-space:normal;text-align:right;max-width:52%}
/* Take layouts, final: vertical = rail-width column · horizontal = a wide 16:9 frame (about 56% of the stage) with the transcript beside it */
.ytk.port{grid-template-columns:380px minmax(0,1fr)!important}
.ytk.land{grid-template-columns:clamp(420px,56%,720px) minmax(280px,1fr)!important;align-items:start}
.ytk.land .yvidwrap{aspect-ratio:16/9;width:100%} .ytk.land .ytk-lines{max-height:calc(100vh - 300px)}
.ytk.land .ytk-k .dim:last-child{display:none}
@media(max-width:1100px){.ytk.port,.ytk.land{grid-template-columns:1fr!important}}
.w{user-select:none} .w.sel{background:#fff;color:#000;box-shadow:0 0 0 2px #fff} .w.sel.on{background:var(--sun);box-shadow:0 0 0 2px #fff}
.ytk-line .t{cursor:pointer} .ytk-line .t:hover{background:var(--sun);color:#000}
/* ── Take, paragraph transcript ── */
.ytk-para{font-size:16.5px;line-height:1.85;max-height:calc(100vh - 360px);min-height:240px;overflow:auto;scrollbar-width:none;padding:6px 8px 40px;word-spacing:.08em}
.ytk-para::-webkit-scrollbar{display:none}
.ytk-para .sent{position:relative;display:inline}
.ytk-para .sm{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin:0 6px 0 2px}
.ytk-para .sm .t{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;opacity:.45;background:rgba(0,0,0,.06);border-radius:999px;padding:2px 6px;cursor:pointer} .ytk-para .sm .t:hover{background:var(--sun);color:#000;opacity:1}
.ytk-para .sm .menu{display:none;gap:2px} .ytk-para .sent:hover .sm .menu{display:inline-flex}
.ytk-para .sm .menu button{border:0;background:rgba(0,0,0,.08);border-radius:6px;width:20px;height:20px;font:inherit;font-size:11px;cursor:pointer;color:inherit;line-height:1} .ytk-para .sm .menu button:hover{background:var(--sun);color:#000} .ytk-para .sm .menu button:disabled{opacity:.25;cursor:default}
.ytk-para .w{display:inline;cursor:pointer;padding:1px 3px;border-radius:5px;user-select:none;transition:background .08s,color .08s}
.ytk-para .w.st-kept:hover{background:rgba(255,215,49,.25)}
.ytk-para .w.st-ai{opacity:.38;text-decoration:line-through;text-decoration-color:rgba(255,120,110,.8)} .ytk-para .w.st-ai:hover{opacity:.8}
.ytk-para .w.st-user{opacity:.38;text-decoration:line-through;text-decoration-color:#fff} .ytk-para .w.st-user:hover{opacity:.8}
.ytk-para .w.st-drop{opacity:.3;text-decoration:line-through} .ytk-para .sent.drop .sm .t{opacity:.25}
.ytk-para .w.on{background:var(--sun);color:#000} .ytk-para .w.sel{background:#fff;color:#000;box-shadow:0 0 0 2px #fff} .ytk-para .w.editing{outline:2px solid var(--sun);background:#fff;color:#000}
.ytk-verdict{margin-top:10px;font-size:13.5px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .ytk-verdict .lnk{font-weight:600;opacity:.7;cursor:pointer;text-decoration:underline}
.ytk-tight{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap} .ytk-tight .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-right:4px} .ytk-tight .ychip{padding:5px 11px!important;font-size:12px!important}
.ytk-k .legend{display:inline-flex;gap:10px;align-items:center;font-size:10.5px;opacity:.7;white-space:nowrap} .ytk-k .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px} .l-kept{background:var(--sun)} .l-ai{background:rgba(255,120,110,.8)} .l-user{background:#fff;border:1px solid rgba(0,0,0,.3)}
.ytk-foot{margin-top:8px;font-size:11.5px;opacity:.6;line-height:1.5}
.ystep .yl{display:flex;flex-direction:column;line-height:1.15;text-align:left} .ystep .yl small{font-size:10px;opacity:.55;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.ytk.land .ytk-para{max-height:calc(100vh - 320px)}
.yfind[hidden]{display:none!important} .ytk-k{flex-wrap:wrap;row-gap:4px}
/* ── Edit: template rows ── */
.ytrow{margin-bottom:18px} .ytrow-h{display:flex;gap:10px;align-items:baseline;margin:0 0 8px} .ytrow-h b{font-size:13px;font-weight:800} .ytrow-h .dim{font-size:12px;opacity:.6}
.ytgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ytcard{border:2px solid transparent!important;border-radius:16px!important;overflow:hidden;background:rgba(0,0,0,.04)!important;position:relative;cursor:pointer;transition:transform .12s}
.ytcard.on{border-color:var(--sun)!important} .ytcard.locked{cursor:not-allowed;opacity:.55}
.ytmedia{position:relative;aspect-ratio:9/14;background:#000;overflow:hidden} .ytmedia img,.ytmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ytmedia video{opacity:0;transition:opacity .2s} .ytcard:hover .ytmedia video{opacity:1}
.ytmedia.mgm{display:grid;place-items:center;background:rgba(0,0,0,.35)} .mge{font-size:44px}
.ytlock{position:absolute;top:8px;right:8px;font-size:14px}
.ytmeta{padding:9px 10px 11px} .ytmeta b{font-size:12.5px;display:block} .ytmeta > div:first-of-type{font-size:10.5px;opacity:.65;line-height:1.35;margin-top:2px}
.yttags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px} .yttag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.08)} .yttag.ok{background:var(--sun);color:#000}
/* ── Preview: prompt first, timeline, suggestions ── */
.ypv-prompt{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(0,0,0,.1)}
.ypv-prompt textarea{width:100%;border:1px solid rgba(0,0,0,.3);border-radius:14px;padding:11px 12px;font:inherit;font-size:14px;line-height:1.4;resize:vertical;background:transparent;color:inherit;box-sizing:border-box;min-height:84px} .ypv-prompt textarea:focus{outline:2px solid var(--sun);border-color:transparent}
.ytl{position:relative;height:34px;margin:12px 0 4px;border-radius:10px;background:rgba(0,0,0,.06);cursor:pointer;overflow:visible}
.ytl-beats{position:absolute;left:0;right:0;top:8px;height:18px} .ytl-beats .beat{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.18);border-radius:4px;margin-left:1px} .ytl-beats .beat:hover{background:var(--sun)}
.ytl-marks{position:absolute;left:0;right:0;top:-10px;height:0} .ytl-marks .mark{position:absolute;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #000;display:grid;place-items:center;font-size:13px;cursor:grab;touch-action:none;box-shadow:0 2px 0 #000} .ytl-marks .mark:active{cursor:grabbing}
.ytl-head{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--sun);left:0;pointer-events:none}
.ybs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px} .ybs-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-right:4px}
.ybs-chip{border:1px dashed rgba(0,0,0,.35);background:transparent;border-radius:999px;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;color:inherit;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ybs-chip:hover{background:var(--sun);color:#000;border-style:solid;border-color:#000}

/* ── Export ── */
.yxp{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
.yxp-video .mh-vid{height:560px;width:auto;margin:0 auto;border-radius:18px;background:#000;display:flex;align-items:center;justify-content:center} .yxp-video .mh-vid video{height:100%;width:auto;display:block}
.yxp-side{background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:8px}
.yxp-dl{display:flex;flex-direction:column;gap:8px} .yxp-alt{display:flex;gap:6px;flex-wrap:wrap}
.yxp-ch{display:flex;gap:6px;flex-wrap:wrap} .yxp-ch .ychip{padding:6px 11px!important;font-size:12px!important}
.yxp-side textarea{width:100%;border:1px solid rgba(0,0,0,.3);border-radius:12px;padding:9px 11px;font:inherit;font-size:13px;line-height:1.4;resize:vertical;background:transparent;color:inherit;box-sizing:border-box} .yxp-side textarea:focus{outline:2px solid var(--sun);border-color:transparent}
.yxp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .yxp-row input[type=datetime-local]{border:1px solid rgba(0,0,0,.3);border-radius:10px;padding:6px 9px;font:inherit;font-size:12px;background:transparent;color:inherit}
.yxp-var{display:flex;gap:6px;flex-wrap:wrap} .yxp-var .ychip{padding:6px 11px!important;font-size:12px!important}
@media(max-width:1100px){.yxp{grid-template-columns:1fr}.yxp-video .mh-vid{height:auto;max-height:70vh}}
/* narrow Yap: the take and the export video stay inside their panels */
@media(max-width:1100px){
  .ytk.port .yvidwrap{max-width:360px!important;margin:0 auto}
  .yxp-video .mh-vid{height:auto!important;width:100%!important;max-height:70vh} .yxp-video .mh-vid video{height:auto!important;width:auto;max-width:100%!important;max-height:70vh}
  .ypv.port #utdraftwrap{width:auto!important;max-width:100%} #utdraftvid{max-height:60vh!important}
}

/* the write-your-own row: impossible to miss */
.rc-own.hot input{border:2px solid var(--sun)!important;background:rgba(255,215,49,.08)!important;font-size:14px;font-weight:600}
.rc-own.hot input::placeholder{color:inherit;opacity:.65;font-weight:600}
.rc-own.hot input:focus{outline:0;box-shadow:0 0 0 3px rgba(255,215,49,.35)}
.rc-send{flex:none;background:var(--sun);color:#000;border:1px solid #000;border-radius:1600px;padding:0 18px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.rc-send:hover{transform:translateY(-1px)}
/* the generating tile: the loader alone, centred */
.mh-vid.mh-gen{justify-content:center}
/* ── the footage editor, filmstrip edition ── */
.md-film{position:relative;height:64px;margin-top:12px;border-radius:12px;background:rgba(0,0,0,.25);overflow:hidden;cursor:pointer;touch-action:none;user-select:none}
.md-film.cutting{cursor:crosshair}
.md-thumbs{position:absolute;inset:0;display:flex} .md-thumbs i{flex:1;background-size:cover;background-position:center;background-color:rgba(0,0,0,.3)}
.md-dim{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.72);pointer-events:none;z-index:2} .md-dim.l{left:0} .md-dim.r{right:0}
.md-cut{position:absolute;top:0;bottom:0;background:rgba(255,90,90,.45);border-left:2px solid #ff5a5a;border-right:2px solid #ff5a5a;z-index:3}
.md-cut.tmp{background:rgba(255,90,90,.3);border-style:dashed}
.md-cut .md-cutx{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#000;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;cursor:pointer;font-style:normal}
.md-handle{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;z-index:4;cursor:ew-resize;display:grid;place-items:center}
.md-handle i{width:6px;height:70%;border-radius:4px;background:var(--sun);border:1px solid #000}
.md-play2{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:5;pointer-events:none}
.md-ctl{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.md-cutbtn{border:1px solid rgba(0,0,0,.3);background:transparent;border-radius:999px;padding:7px 13px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;color:inherit}
.md-cutbtn.on{background:#ff5a5a;color:#fff;border-color:transparent}
.md-hint{font-size:11.5px;opacity:.6}
.md-stage{height:min(48vh,430px)}
/* ── Yap Preview, one column: header with Render final, a slightly smaller player, toggles, one big prompt ── */
.ypv.one{display:flex;flex-direction:column;gap:12px;max-width:980px}
.ypv-head .ybig.hd{width:auto;max-width:none;height:46px;font-size:14.5px;padding:0 20px;flex:none}
.ypv-stagewrap{display:flex;justify-content:center}
.ypv-stagewrap #utdraftvid{max-height:46vh!important}
.ypv-toggles{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .ypv-toggles .ychip{padding:6px 11px!important;font-size:12px!important}
.ypv-sep{width:1px;height:20px;background:rgba(0,0,0,.15);margin:0 4px}
.ypv-prompt.one{display:flex;gap:10px;align-items:stretch;border:0;padding:0;margin:0}
.ypv-prompt.one textarea{flex:1;min-height:64px;font-size:14.5px}
.ypv-prompt.one .ybig.pb{width:auto;max-width:none;height:auto;min-height:64px;padding:0 26px;flex:none;font-size:15px}
.ypv-more{display:flex;gap:16px;align-items:center;font-size:12px;opacity:.7} .ypv-more .lnk{cursor:pointer;text-decoration:underline}
@media(max-width:900px){.ypv-head{flex-wrap:wrap}.ypv-head .ybig.hd{width:100%}.ypv-prompt.one{flex-direction:column}.ypv-prompt.one .ybig.pb{width:100%;min-height:52px}}
.ypv-prompt.one{flex-direction:row;border-bottom:0;padding-bottom:0}
.ypv-prompt.one textarea{width:auto}
@media(max-width:900px){.ypv-prompt.one{flex-direction:column}}
.ypv.one{align-items:stretch}
/* text pop-up polish: the own-line box is yellow always; the preview text sits right, never half-cut */
.rc-own.hot input{border:2px solid var(--sun)!important;background:rgba(255,215,49,.08)!important}
.rc-pv.upper .rc-pvt{top:auto;transform:none}
.rc-pv.upper{align-items:flex-start;padding-top:24%}
.rc-pv{width:100%;max-width:280px;margin:0 auto;background-color:#26222e;box-shadow:none}
.rc-pv:not([style*="background-image"])::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#3b3050,#241f33 55%,#151221)}
.rc-pvt{position:relative;z-index:1;max-width:88%}
.rc-tleft{display:flex;flex-direction:column;gap:8px}
/* Tella-style pieces on the strip: bordered blocks, deleted = low brightness, selected = white outline */
.md-film{height:72px;background:#2b2740}
#md-segs{position:absolute;inset:0;z-index:3}
.md-seg{position:absolute;top:2px;bottom:2px;border:1px solid rgba(255,255,255,.28);border-radius:10px;box-sizing:border-box;cursor:pointer}
.md-seg+.md-seg{border-left-width:2px}
.md-seg.off{background:rgba(10,8,18,.72)}
.md-seg.sel{border:2px solid #fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.md-cutbtn:disabled{opacity:.4;cursor:default}
.md-play2{background:#ff4d67;width:2px} .md-play2::before{content:'';position:absolute;top:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#ff4d67}
/* footage editor visibility: clean inside the crop, dark translucent outside, real grips */
.md-shade{display:none!important}
.md-crop{border:2.5px solid var(--sun);box-shadow:0 0 0 9999px rgba(4,3,8,.66);border-radius:6px}
.md-crop::after{content:'';position:absolute;inset:-2.5px;pointer-events:none;border-radius:6px;
  background:
    linear-gradient(var(--sun),var(--sun)) left top/18px 4px no-repeat, linear-gradient(var(--sun),var(--sun)) left top/4px 18px no-repeat,
    linear-gradient(var(--sun),var(--sun)) right top/18px 4px no-repeat, linear-gradient(var(--sun),var(--sun)) right top/4px 18px no-repeat,
    linear-gradient(var(--sun),var(--sun)) left bottom/18px 4px no-repeat, linear-gradient(var(--sun),var(--sun)) left bottom/4px 18px no-repeat,
    linear-gradient(var(--sun),var(--sun)) right bottom/18px 4px no-repeat, linear-gradient(var(--sun),var(--sun)) right bottom/4px 18px no-repeat}
.md-dim{background:rgba(4,3,8,.8)}
.md-handle{width:18px;margin-left:-9px}
.md-handle i{width:9px;height:78%;border-radius:5px;background:var(--sun);border:1px solid rgba(0,0,0,.85);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.md-handle i::after{content:'⋮';display:grid;place-items:center;height:100%;color:#000;font-size:10px;font-weight:800}
.md-seg{border-color:rgba(255,255,255,.38)}
.md-seg.off{background:rgba(4,3,8,.8)}
/* cutter visibility pass 2 + per-piece edge grips */
.md-film{height:80px}
.md-seg{border-color:rgba(255,255,255,.55);border-width:1.5px}
.md-seg.off{background:rgba(4,3,8,.85)} .md-seg.off::after{content:'deleted';position:absolute;inset:0;display:grid;place-items:center;font:800 9px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.md-seg.sel{border:2px solid var(--sun);box-shadow:0 0 0 2px rgba(255,215,49,.3)}
.md-eg{position:absolute;top:8%;bottom:8%;width:10px;margin-left:-5px;border-radius:5px;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.8);z-index:6;cursor:ew-resize}
.md-eg::after{content:'';position:absolute;left:3.5px;top:22%;bottom:22%;width:2px;background:rgba(0,0,0,.5);border-radius:2px}
.md-eg:hover{background:var(--sun)}
.md-play2{width:3px}
/* ── Yap Studio: the top sliver (mock build) ── */
#pane-yap.rail{display:flex!important;flex-direction:column;gap:12px}
#ytopbar{order:0;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #000;border-radius:18px;padding:8px 16px;flex-wrap:wrap}
#ytopbar .mapp{background:transparent!important;border:0!important;padding:0!important;margin:0!important;display:flex;align-items:center;gap:10px;border-radius:0!important;flex:none;grid-row:auto!important}
#ytopbar .mapp .mapp-k{display:none}
#ytopbar .ysteps{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;background:transparent!important;border:0!important;padding:0!important;margin:0!important;border-radius:0!important;flex:1;min-width:0;flex-wrap:wrap}
#ytopbar .ymodes{display:flex!important;grid-template-columns:none!important;gap:4px;margin:0!important}
#ytopbar .ymode-pill{width:auto!important;padding:6px 12px!important;font-size:11.5px!important;border-radius:999px!important}
#ytopbar .ystep{width:auto!important;padding:5px 10px!important;font-size:11.5px!important;border-radius:11px!important;display:inline-flex!important}
#ytopbar .ystep .yl small{max-width:140px}
#ytopbar .ystep-sep{display:inline!important;opacity:.35;font-size:10px}
#pane-yap.rail .bc-embed{order:1;margin:0!important;border:1px solid #000!important;border-radius:14px!important;grid-row:auto!important}
#pane-yap.rail #ybody{order:2;grid-row:auto!important;grid-column:auto!important}
#pane-yap.rail #mhist{order:3;grid-row:auto!important;grid-column:auto!important}
.yup-choice{justify-content:center;margin:34px 0 10px} .yup-card{min-height:250px}
#pane-yap.rail + * {clear:both}
/* the harmonious Take box */
.ytk2{background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:22px;padding:16px}
.ytknote{display:flex;align-items:center;gap:10px;background:rgba(255,215,49,.1);border:1px solid rgba(255,215,49,.45);border-radius:14px;padding:10px 14px;font-size:12.5px;flex-wrap:wrap;margin-bottom:16px}
.ytknote .lnk{text-decoration:underline;cursor:pointer;opacity:.7}
.ytknote .pills{margin-left:auto;display:flex;gap:5px;align-items:center}
.ytknote .pk{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.5;margin-right:2px}
.ytknote .tp{font:700 10.5px Inter,sans-serif;border:1px solid rgba(0,0,0,.25);border-radius:999px;padding:4px 10px;background:transparent;color:inherit;cursor:pointer}
.ytknote .tp.on{background:var(--sun);color:#000;border-color:transparent}
.ytk2 .ytk-video,.ytk2 .ytk-tx{background:transparent;border:0;padding:0}
#ytkstrip{position:relative;height:80px;border-radius:10px;background:#2b2740;overflow:hidden;margin-top:12px;cursor:pointer;touch-action:none;user-select:none}
.ytk-transport{display:flex;gap:9px;align-items:center;margin-top:10px;font-size:12px}
.tbtn2{font:800 11px Inter,sans-serif;border:1px solid rgba(0,0,0,.3);border-radius:999px;padding:6px 12px;background:transparent;color:inherit;cursor:pointer}
.tbtn2:disabled{opacity:.4;cursor:default} .tbtn2:not(:disabled):hover{background:var(--sun);color:#000}
/* keep the strip in view: cap the take video so footage + strip + transport fit one screen */
.ytk2 .ytk.port .yvidwrap{max-width:none;width:auto;height:min(46vh,420px);aspect-ratio:9/16;margin:0 auto}
.ytk2 .ytk.port{grid-template-columns:minmax(0,340px) minmax(0,1fr)!important;align-items:start}
.ytk2 .ytk.land .yvidwrap{height:auto;aspect-ratio:16/9;width:100%}
.ytk2 .ytk-video{position:sticky;top:12px}
/* cutter legibility: unmistakable pieces, per-piece edge grips */
.md-seg{border:1.5px solid rgba(255,255,255,.5)}
.md-seg+.md-seg{border-left-width:2.5px}
.md-seg.sel{border:3px solid #fff;box-shadow:0 0 0 3px rgba(255,215,49,.55),inset 0 0 0 1px rgba(0,0,0,.5)}
.md-seg.off{background:rgba(4,3,8,.82)}
.md-eg{position:absolute;top:10%;bottom:10%;width:10px;margin-left:-5px;border-radius:5px;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.7);cursor:ew-resize;opacity:.65;z-index:5;display:block}
.md-eg::after{content:'';position:absolute;left:3.5px;top:20%;bottom:20%;border-left:1.5px dotted rgba(0,0,0,.55)}
.md-eg:hover{opacity:1;background:var(--sun)}
.md-seg em{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-style:normal;opacity:.85;pointer-events:none;text-shadow:0 1px 4px #000}
/* ── Yap Studio: the top sliver (app chip + horizontal steps), plan sliver, full-width stage ── */
#pane-yap.rail{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto auto auto!important;row-gap:0!important;column-gap:0!important}
#pane-yap.rail > .mapp{grid-row:1!important;grid-column:1!important;display:flex;align-items:center;gap:10px;border:0!important;border-radius:18px 0 0 0!important;padding:8px 16px!important;margin:0!important;min-height:0}
#pane-yap.rail > .mapp .mapp-k{display:none}
#pane-yap.rail .ysteps{grid-row:1!important;grid-column:2!important;display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;border-radius:0 18px 0 0!important;padding:8px 16px 8px 4px!important;margin:0!important;overflow-x:auto;scrollbar-width:none}
#pane-yap.rail .ysteps::-webkit-scrollbar{display:none}
#pane-yap.rail .ysteps .ymodes{display:flex!important;grid-template-columns:none!important;gap:4px;margin:0 8px 0 0!important;flex:none}
#pane-yap.rail .ysteps .ymode-pill{width:auto!important;padding:6px 11px!important;font-size:11.5px!important;border-radius:999px!important}
#pane-yap.rail .ysteps .ystep{width:auto!important;flex:none;padding:5px 10px!important;font-size:12px!important;border-radius:10px!important}
#pane-yap.rail .ysteps .ystep .yl small{max-width:150px}
#pane-yap.rail .ysteps .ystep-sep{display:inline!important;opacity:.25;font-size:9px}
#pane-yap.rail .bc-embed{grid-row:2!important;grid-column:1/span 2!important;border-radius:0 0 18px 18px!important;margin:0!important}
#pane-yap.rail .bc-embed .ebar{padding:6px 16px!important} #pane-yap.rail .bc-embed .ebar .ic{width:24px;height:24px;font-size:12px}
#pane-yap.rail .bc-embed .ebar .et b{font-size:12px;display:inline;margin-right:8px} #pane-yap.rail .bc-embed .ebar .sub{display:inline;font-size:11px}
#pane-yap.rail #ybody{grid-row:3!important;grid-column:1/span 2!important;margin-top:20px}
#pane-yap.rail #mhist{grid-row:4!important;grid-column:1/span 2!important}
/* upload: the two choices, centered */
.yup-choice{grid-template-columns:repeat(2,minmax(280px,360px))!important;justify-content:center!important;margin:44px auto 10px;max-width:760px}
.yup-card{min-height:280px}
#pane-yap.rail .hint{text-align:center}
#pane-yap.rail .ytk-foot .dim,#pane-yap.rail .ytk-tx .hint{text-align:left}
/* the Take box: notice + strip + transport */
.ytk2{display:flex;flex-direction:column;gap:14px}
.ytknote{display:flex;align-items:center;gap:10px;background:rgba(255,215,49,.09);border:1px solid rgba(255,215,49,.35);border-radius:14px;padding:10px 14px;font-size:12.5px;flex-wrap:wrap;text-align:left}
.ytknote b{color:var(--sun)}
.ytknote .lnk{text-decoration:underline;cursor:pointer;opacity:.75}
.ytknote .pills{margin-left:auto;display:flex;gap:5px;align-items:center}
.ytknote .pk{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.5;margin-right:2px}
.tp{font-size:10.5px;font-weight:700;border:1px solid rgba(0,0,0,.25);border-radius:999px;padding:4px 10px;background:transparent;color:inherit;cursor:pointer}
.tp.on{background:var(--sun);color:#000;border-color:transparent}
.tbtn2{font-size:11px;font-weight:800;border:1px solid rgba(0,0,0,.3);border-radius:999px;padding:6px 12px;background:transparent;color:inherit;cursor:pointer}
.tbtn2:disabled{opacity:.4;cursor:default}
.ytk.land{grid-template-columns:1.25fr 1fr!important}
.ytk.land .yvidwrap{aspect-ratio:16/9;max-width:none}
#ytkstrip .md-seg em{font-size:13px}
@media(max-width:900px){#pane-yap.rail{grid-template-columns:1fr!important}#pane-yap.rail > .mapp{grid-column:1!important;border-radius:18px 18px 0 0!important}#pane-yap.rail .ysteps{grid-column:1!important;grid-row:2!important;border-radius:0!important}#pane-yap.rail .bc-embed{grid-row:3!important}#pane-yap.rail #ybody{grid-row:4!important}#pane-yap.rail #mhist{grid-row:5!important}.yup-choice{grid-template-columns:1fr!important}}
/* take proportions + a bar that never wraps */
#pane-yap.rail .ysteps{flex-wrap:nowrap!important;white-space:nowrap}
#pane-yap.rail .ysteps .ystep .yl small{display:block}
.ytk.port{grid-template-columns:340px minmax(0,1fr)!important}
.ytk-video .yvidwrap{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:9/16}
.ytk.land .ytk-video .yvidwrap{aspect-ratio:16/9}
#ytkstrip{height:64px}
#ytkstrip .md-seg em{display:none}
#ytkstrip .md-seg.off::after{content:'🗑';position:absolute;inset:0;display:grid;place-items:center;font-size:13px;opacity:.85;text-shadow:0 1px 4px #000}
/* Edit step: three hero picks centered, the rest full width */
.ytk-k.hero{justify-content:center;text-align:center}
.ythero{display:grid;grid-template-columns:repeat(3,minmax(220px,340px));justify-content:center;gap:16px;width:100%;margin:4px 0 8px}
.ytgrid.all{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;width:100%}
@media(max-width:860px){.ythero{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Preview: one centered box · stage and controls boxed inside · big prompt · no tube */
.ypv.one{max-width:1080px;margin:0 auto;background:rgba(127,127,127,.06);border:1px solid rgba(0,0,0,.12);border-radius:22px;padding:16px 18px 18px;box-sizing:border-box}
.ypv-stage{display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(127,127,127,.05);border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:14px}
.ypv-stage .ybs{justify-content:center;margin:0}
.ypv-stage #utmarks{justify-content:center;margin:0!important}
#utdraftvid{max-height:44vh!important}
.ypv-toggles{background:rgba(127,127,127,.05);border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:12px 14px}
.ypv-prompt.one textarea{min-height:80px;font-size:15px;padding:14px 16px}
.ypv-prompt.one .ybig.pb{min-height:80px;font-size:16px;padding:0 32px}
.ypv-more{justify-content:center}
/* Take: footage sized off the viewport so the page never grows a scrollbar */
.ytk.port{grid-template-columns:auto minmax(0,1fr)!important}
.ytk.port .ytk-video{width:clamp(210px,25vh,340px)}
/* meme + hook: two big choices, then the five lines as editable rows */
.mmrow.big2{gap:10px;margin:2px 0 12px}
.mmbtn.big{flex:1;padding:16px 18px;font-size:14.5px;border-radius:14px;font-weight:800}
.mmbtn.big.onl{outline:2px solid var(--sun)}
.mmown{display:flex;gap:8px;margin:0 0 12px}
.mmown input{flex:1;padding:12px 14px;border-radius:12px;border:1.5px solid var(--sun);background:transparent;color:inherit;font:inherit;outline:0}
.mmvlist{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.mmvrow{display:flex;gap:12px;align-items:center;border:1px solid rgba(127,127,127,.28);border-radius:14px;padding:10px}
.mmvrow.sel{border-color:var(--sun);box-shadow:0 0 0 2px rgba(255,215,49,.3)}
.mmvrow .bthumb{width:64px;height:64px;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;flex:none;background:#000;display:grid;place-items:center;color:#888}
.mmvrow .bthumb video{width:100%;height:100%;object-fit:cover}
.mmvrow .bthumb .pin{position:absolute;bottom:3px;right:4px;font-size:9px;background:rgba(0,0,0,.65);color:#fff;border-radius:6px;padding:1px 5px}
.mmvrow .bmain{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.mmvrow .bmain input{width:100%;background:transparent;border:1px solid rgba(127,127,127,.3);border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;color:inherit;box-sizing:border-box}
.mmvrow .bmain input.vhook{font-weight:700;font-size:13.5px}
.mmvrow .vact{display:flex;flex-direction:column;gap:6px;flex:none}
#pane-yap.rail .ysteps{min-width:0}
#pane-yap.rail > .mapp{min-width:0}
/* bigger canvas everywhere the video is vertical */
.ytk.port .ytk-video{width:clamp(260px,30vh,380px)}
.tbtn2{padding:10px 18px!important;font-size:13px!important}
#ytkdel{padding:10px 18px!important;font-size:13px!important}
#utdraftvid{max-height:58vh!important}
.ypv-srow{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%}
.ypv-side{flex:0 1 340px;min-width:260px;text-align:left}
.ypv-toggles .ychip.on{background:var(--sun)!important;border-color:var(--sun)!important;color:#141318!important;font-weight:800}
#pane-yap.rail .bc-embed{min-width:0;overflow:hidden}
#pane-yap.rail .bc-embed *{min-width:0}
#pane-yap.rail .bc-embed .ex,#pane-yap.rail .bc-embed span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the rail can never widen the page: sliver text ellipsizes, the steps bar scrolls inside itself */
#pane-yap.rail{max-width:100%;overflow-x:clip}
#pane-yap.rail>*{min-width:0}
#ytopbar{min-width:0;max-width:100%}
#ytopbar>*{min-width:0}
#pane-yap.rail .bc-embed .et{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ypv.one>*{min-width:0;max-width:100%}
/* sun is the only action color · the meme maker's accent buttons fall in line */
.mmbtn.accent{background:var(--sun)!important;border-color:var(--sun)!important;color:#141318!important}
/* memes Generate = the same sun as every other big action */
#mm-body .mrender .btn.primary{background:var(--sun)!important;border-color:var(--sun)!important;color:#141318!important;font-weight:800}
#mm-body .mrender .btn.primary:disabled{opacity:.55}
/* ══ Distribute home: app slider on top, flow strip, tool boxes ══ */
.dh-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.dh-slider{margin-left:auto;position:relative;display:flex;background:rgba(127,127,127,.12);border-radius:999px;padding:5px}
.dh-slider button{position:relative;z-index:1;border:0;background:transparent;color:inherit;opacity:.65;font:700 13px inherit;font-family:inherit;padding:9px 20px;border-radius:999px;cursor:pointer}
.dh-slider button.on{opacity:1;color:#141318}
.dh-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:52px;border-radius:999px;background:var(--sun);transition:.22s cubic-bezier(.5,1.4,.4,1)}
.appslide{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:none}
.appslide::-webkit-scrollbar{display:none}
.appslide .slidecard{flex:0 0 232px;scroll-snap-align:start;text-align:left;cursor:pointer}
.appslide .slidecard .thumb{height:104px}
.appslide .slidecard .meta .sm{min-height:0;max-height:34px;overflow:hidden}
.appslide .slidecard.sel{outline:3px solid var(--sun);outline-offset:2px;border-radius:16px}
.appslide .addcard{min-height:0}
.flowstrip{display:flex;align-items:center;gap:12px;background:rgba(127,127,127,.07);border-radius:18px;padding:13px 16px;margin:2px 0 22px;flex-wrap:wrap}
.fs-app{display:flex;flex-direction:column;min-width:110px}
.fs-app b{font-size:15px}
.fs-step{display:flex;flex-direction:column;gap:3px;background:rgba(127,127,127,.09);border-radius:12px;padding:8px 14px;cursor:pointer;opacity:.6;min-width:150px}
.fs-step.on{opacity:1}
.fs-step.ok{outline:1.5px solid rgba(91,209,122,.6)}
.fs-k{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.6;font-weight:800}
.fs-v{font-size:12px;font-weight:700}
.fs-step .meter{height:4px;border-radius:2px;background:rgba(127,127,127,.25);overflow:hidden;margin-top:2px}
.fs-step .meter i{display:block;height:100%;background:var(--sun)}
.fs-arrow{opacity:.35;font-weight:800}
.ybig.fsgo{width:auto;padding:13px 24px;font-size:14px}
.dh-k{font-weight:800;font-size:13px;letter-spacing:.02em;margin:0 0 10px;display:flex;gap:10px;align-items:baseline}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.toolcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;border:0;border-radius:18px;background:rgba(127,127,127,.08);padding:16px 17px;cursor:pointer;font-family:inherit;color:inherit;transition:.15s}
.toolcard:hover{transform:translateY(-2px);background:rgba(127,127,127,.14)}
.tc-ic{font-size:24px}
.tc-nm{font-weight:800;font-size:15px}
.tc-line{font-size:11.5px;opacity:.65;line-height:1.4}
.tc-plan{font-size:10.5px;font-weight:700;opacity:.5;margin-top:4px}
.tc-plan.ok{opacity:1;color:#3f9e5c}
/* launch plan approve */
#lpboard .lp-appr{background:var(--sun)!important;border-color:var(--sun)!important;color:#141318!important}
#lpboard .lp-appr.on{background:rgba(91,209,122,.16)!important;border-color:rgba(91,209,122,.6)!important;color:#5BD17A!important}
/* ══ App context sheet · dark-committed, matching the launch-plan board ══ */
#ctxsheet{position:fixed;inset:0;z-index:288;display:none;flex-direction:column;background:#0d0d12;color:#f2f0ea}
#ctxsheet.show{display:flex}
.cx-top{display:flex;align-items:center;gap:14px;padding:13px 22px;background:#15151a;flex:none}
.cx-top b{font-size:15px}
.cx-back{color:#9a97a3;font-size:13px;cursor:pointer}
.cx-idm{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:17px;color:#141318}
.cx-sub{color:#9a97a3;font-size:11.5px}
.ybig.cx-lp{width:auto;padding:13px 22px;font-size:14px;background:var(--sun);color:#141318;border:0;border-radius:13px;font-weight:800;cursor:pointer;font-family:inherit}
.cx-scroll{flex:1;overflow:auto}
.cx-frame{max-width:1060px;margin:0 auto;padding:22px 24px 60px}
.cx-seed{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#15151a;border-radius:12px;padding:11px 14px;font-size:12px;color:#9a97a3;margin-bottom:16px}
.cx-seed i{font-style:normal;background:#1f1f25;border-radius:8px;padding:3px 10px;color:#f2f0ea;font-weight:700;font-size:11px}
.cx-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.cx-stack{display:flex;flex-direction:column;gap:16px}
.cx-blk{background:#15151a;border-radius:18px;padding:16px 18px}
.cx-blk h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a97a3;display:flex;align-items:center;gap:8px}
.cx-hint{letter-spacing:0;text-transform:none;color:#5d5b66;font-weight:600}
.cx-re{margin-left:auto;letter-spacing:0;text-transform:none;color:#5d5b66;cursor:pointer;font-weight:700}
.cx-re:hover{color:var(--sun)}
.cx-ta{width:100%;box-sizing:border-box;background:#1f1f25;border:0;border-radius:11px;color:#f2f0ea;font:inherit;font-size:13px;line-height:1.5;padding:10px 12px;resize:vertical;outline:0}
.cx-ta:focus{outline:2px solid var(--sun)}
.cx-feats{display:flex;flex-direction:column;gap:7px}
.cx-feat{display:flex;gap:8px;align-items:center}
.cx-feat input{flex:1;background:#1f1f25;border:0;border-radius:9px;color:#f2f0ea;font:inherit;font-size:12.5px;padding:9px 11px;outline:0}
.cx-feat input:focus{outline:2px solid var(--sun)}
.cx-feat b{cursor:pointer;color:#5d5b66;font-weight:700}
.cx-feat b:hover{color:#ff9d94}
.cx-empty{color:#5d5b66;font-size:12px;padding:6px 0}
.cx-icps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-icp{background:#1f1f25;border-radius:13px;padding:11px 13px;display:flex;flex-direction:column;gap:5px;position:relative}
.cx-icp b{font-size:13px;cursor:pointer}
.cx-icp span{font-size:11.5px;color:#9a97a3;line-height:1.45}
.cx-icp .tg{display:flex;gap:6px;margin-top:6px}
.cx-icp .tg i{font-style:normal;font-size:10.5px;font-weight:800;border-radius:8px;padding:4px 9px;cursor:pointer;background:#0d0d12;color:#5d5b66}
.cx-icp .tg i.yes{background:var(--sun);color:#141318}
.cx-icp .tg i.no.on{background:#3a2226;color:#ff9d94}
.cx-icp.dead{opacity:.45}
.cx-icp.dead b{text-decoration:line-through}
.cx-icp.yours::after{content:'yours';position:absolute;top:8px;right:9px;font-size:9px;font-weight:800;background:var(--sun);color:#141318;border-radius:6px;padding:2px 6px}
.cx-atype{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5d5b66;font-weight:800;margin:10px 0 6px}
.cx-angles{display:flex;flex-direction:column;gap:7px}
.cx-ang{display:flex;align-items:center;gap:10px;background:#1f1f25;border-radius:11px;padding:9px 12px}
.cx-ang .t{flex:1;font-size:12.5px;font-weight:600}
.cx-ang .why{color:#5d5b66;font-size:11px;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-ang .keep{font-size:10.5px;font-weight:800;border-radius:8px;padding:4px 9px;background:var(--sun);color:#141318;cursor:pointer}
.cx-ang.off{opacity:.4}
.cx-ang.off .t{text-decoration:line-through}
.cx-ang.off .keep{background:#0d0d12;color:#5d5b66}
.cx-feeds{margin-top:16px;background:#15151a;border-radius:12px;padding:11px 14px;font-size:12px;color:#9a97a3;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cx-feeds i{font-style:normal;background:#1f1f25;border-radius:8px;padding:3px 10px;color:#f2f0ea;font-weight:700;font-size:11px}
@media(max-width:860px){.cx-grid{grid-template-columns:1fr}.cx-icps{grid-template-columns:1fr}.flowstrip .fs-step{min-width:0;flex:1}}
/* Distribute home wears the same Slush grammar as Ideate/Build: paper, 1px black outlines */
.toolcard{background:#fff;border:1px solid #000;border-radius:20px}
.toolcard:hover{background:#fff;border-color:#000}
.flowstrip{background:#fff;border:1px solid #000}
.fs-step{background:var(--sky,#dceeff);border:1px solid #000;opacity:.55}
.fs-step.on{opacity:1}
.dh-slider{background:#fff;border:1px solid #000}
.appslide .slidecard .meta .nm{color:#000}
.appslide .slidecard .meta .sm{color:#333}
.tc-line{opacity:.8}
.tc-plan{opacity:.6}
/* context sheet: full and big, nothing crushed */
.cx-frame{max-width:1280px;padding:26px 28px 70px}
.cx-grid{gap:18px}
.cx-blk{padding:20px 24px;border-radius:20px}
.cx-blk h4{font-size:12.5px;margin-bottom:10px}
.cx-hint{font-size:11.5px}
.cx-ta{font-size:14.5px;line-height:1.6;padding:13px 15px}
.cx-feat input{font-size:13.5px;padding:11px 13px}
.cx-icp b{font-size:14px}
.cx-icp span{font-size:12.5px}
.cx-ang .t{font-size:13.5px}
.cx-mine{outline:2px solid var(--sun)}
.cx-top{padding:16px 24px}
.cx-top b{font-size:17px}
/* flow strip: the context button is a real button */
.ybig.ctx2{background:transparent;color:inherit;outline:2px solid rgba(127,127,127,.5);outline-offset:-2px}
.ybig.ctx2.warn{outline-color:var(--sun);color:inherit}
.cx-pulse{display:inline-flex;gap:3px}
.cx-pulse i{width:7px;height:7px;border-radius:2px;background:var(--sun);animation:cxpp 1.1s infinite}
.cx-pulse i:nth-child(2){animation-delay:.2s}.cx-pulse i:nth-child(3){animation-delay:.4s}
@keyframes cxpp{50%{opacity:.15}}

/* no visible scrollbars anywhere · people who want to scroll just scroll */
*{scrollbar-width:none!important;-ms-overflow-style:none!important}
*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* context sheet: narratives + the per-tool angle band */
.cx-narrs{display:flex;flex-direction:column;gap:9px}
.cx-narr{background:#1f1f25;border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;cursor:pointer;outline:1.5px solid transparent}
.cx-narr:hover{outline-color:rgba(255,215,49,.4)}
.cx-narr.on{outline-color:var(--sun)}
.cx-narr b{font-size:13.5px}
.cx-narr span{font-size:12px;color:#9a97a3;line-height:1.5}
.cx-narr i{font-style:normal;font-size:10.5px;color:#5d5b66}
.cx-narr em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5d5b66;margin-top:3px}
.cx-narr.on em{color:var(--sun)}
.cx-tools{margin-top:16px}
.cx-toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.cx-toolcol .cx-atype{margin-top:0}
.cx-toolcol .cx-ang{padding:8px 10px}
.cx-toolcol .cx-ang .t{font-size:12px}
.dh-title{font-size:clamp(38px,4.6vw,58px)!important;line-height:.9!important}
/* Distribute home: calmer title + it actually collapses right */
.dh-title{font-size:clamp(30px,3.8vw,46px)!important}
.dh-head .lede{font-size:14px;max-width:60ch}
@media(max-width:1020px){
  .dh-head{flex-direction:column;align-items:flex-start;gap:12px}
  .dh-slider{margin-left:0}
}
@media(max-width:760px){
  .appslide{gap:10px}
  .appslide .slidecard{flex:0 0 180px}
  .appslide .slidecard .thumb{height:84px}
  .appslide .addcard{flex:0 0 150px}
  .flowstrip{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
  .flowstrip .fs-app{flex-direction:row;align-items:baseline;gap:8px;min-width:0}
  .fs-arrow{display:none}
  .fs-step{min-width:0}
  .ybig.fsgo{width:100%;box-sizing:border-box;text-align:center}
  .dh-slider{width:100%;box-sizing:border-box}
  .dh-slider button{flex:1;padding:9px 6px;font-size:12px}
  .toolgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .toolcard{padding:13px 14px}
  .tc-line{display:none}
}
.dh-title{font-size:40px!important;line-height:.95!important;letter-spacing:.012em}
@media(max-width:760px){.dh-title{font-size:32px!important}}
@media(max-width:760px){.dh-title{font-size:32px!important}}
/* ══ Batch Studio boards wear the house dark-Slush: tonal cards, Anton heads, sun goes ══ */
#rboard,#mboard,#cboard{background:#0e0e11!important}
#rboard .rb-top,#mboard .rb-top,#cboard .rb-top{background:#15151a!important;border-bottom:0!important}
#rboard .rb-top b,#mboard .rb-top b,#cboard .rb-top b{font-family:'Anton',Impact,sans-serif!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.02em;font-size:16px!important}
.rb-node{background:#15151a!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:20px!important;box-shadow:none!important}
.rb-node .nh{font-family:'Anton',Impact,sans-serif!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.07)!important}
.rb-node .nh .dot{box-shadow:none!important;border:1px solid #000}
.rb-btn.go,#mboard .rb-btn.go,#cboard .rb-btn.go{background:var(--sun)!important;border-color:var(--sun)!important;color:#141318!important}
.rb-wire{background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 9px,transparent 9px 18px)!important;height:2.5px!important;animation:lphdash 1.2s linear infinite}
@keyframes lphdash{to{background-position:18px 0}}
#rboard .rb-canvas,#mboard .rb-canvas,#cboard .rb-canvas{background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px)!important}
/* the Batch Studio picker page */
.bt-card{border-radius:20px}
.bt-card .btn.primary{background:var(--sun)!important;color:#141318!important;border-color:var(--sun)!important}
/* ══ Batch Studio boards · the full house skin (react / memes / carousel) ══
   tonal layers, no hairlines, sun for the go moves, sticker color per board */
#rboard,#mboard,#cboard{--bd:#15151a;--bd2:#1f1f25;--bd3:#2a2a32}
#rboard .rb-canvas,#mboard .rb-canvas,#cboard .rb-canvas{padding:28px 34px 40px!important}
:is(#rboard,#mboard,#cboard) .rb-node .nb{gap:11px!important;font-size:12.5px!important}
:is(#rboard,#mboard,#cboard) .rb-tab{background:var(--bd2)!important;border:0!important;color:#9a97a3!important;border-radius:11px!important;padding:9px 6px!important}
:is(#rboard,#mboard,#cboard) .rb-tab.on{background:var(--sun)!important;color:#141318!important}
:is(#rboard,#mboard,#cboard) .rb-chip{background:var(--bd2)!important;border:0!important;color:#c9c7d1!important;padding:7px 12px!important}
:is(#rboard,#mboard,#cboard) .rb-chip.on{background:var(--sun)!important;color:#141318!important}
:is(#rboard,#mboard,#cboard) :is(textarea,input[type=text],select){background:var(--bd2)!important;border:0!important;border-radius:11px!important;color:#f2f0ea!important;padding:10px 12px!important;outline:0}
:is(#rboard,#mboard,#cboard) :is(textarea,input[type=text],select):focus{outline:1.5px solid var(--sun)!important}
:is(#rboard,#mboard,#cboard) .rb-note{background:var(--bd2)!important;border:0!important;border-left:3px solid var(--sun)!important;border-radius:12px!important;padding:9px 10px!important}
:is(#rboard,#mboard,#cboard) .rb-note textarea{background:transparent!important;padding:2px!important}
:is(#rboard,#mboard,#cboard) .rb-note .nr .num{color:#5d5b66!important}
:is(#rboard,#mboard,#cboard) .rb-btn{background:var(--bd2)!important;border:0!important;color:#f2f0ea!important;border-radius:11px!important;padding:10px 14px!important}
:is(#rboard,#mboard,#cboard) .rb-btn:hover{background:var(--bd3)!important}
:is(#rboard,#mboard,#cboard) .rb-btn.go{background:var(--sun)!important;color:#141318!important}
:is(#rboard,#mboard,#cboard) .rb-res{background:var(--bd2)!important;border:0!important;border-radius:11px!important;padding:8px 10px!important}
:is(#rboard,#mboard,#cboard) .rb-thumb{background:var(--bd3)!important}
:is(#rboard,#mboard,#cboard) .rb-stylecard{background:var(--bd2)!important;border:1.5px solid transparent!important;border-radius:12px!important}
:is(#rboard,#mboard,#cboard) .rb-stylecard.on{border-color:var(--sun)!important;box-shadow:none!important}
:is(#rboard,#mboard,#cboard) .rb-stylecard.on span{color:var(--sun)!important}
:is(#rboard,#mboard,#cboard) .rb-wire i::after{background:var(--sun)!important;box-shadow:0 0 8px var(--sun)!important}
:is(#rboard,#mboard,#cboard) .hint{color:#5d5b66!important}
#rboard .rb-node .nh .dot{background:#fb4903!important} #mboard .rb-node .nh .dot{background:#ffd731!important} #cboard .rb-node .nh .dot{background:#55db9c!important}
#mboard .mb-cell{border-radius:11px!important}
#mboard .mb-cell.on{border-color:var(--sun)!important}
#mboard .mb-cell .badge{background:var(--sun)!important;color:#141318!important}
#cboard .cb-aes{background:var(--bd2)!important;border:1.5px solid transparent!important;border-radius:12px!important}
#cboard .cb-aes.on{border-color:#55db9c!important;box-shadow:none!important}

.mhead.off{display:none!important}

/* page-shaped makers (Schedule, Batch Studio, Yap Studio) live in one centred column · rail makers keep the full width */
body.centerstage #v-stage2{max-width:1280px;margin-left:auto;margin-right:auto}
body.centerstage #v-stage2 .sdwrap{max-width:none}
body.centerstage #v-stage2 .bt-wrap{max-width:none}

/* Faceless Bangers and Yap Studio: the full width, like the Launchpad shell's pages (its 28 px gutter, 16 px on a
   phone). Each names itself in its own slim bar (title · app · what it does · actions), so the title row steps aside. */
body.slimbar main{max-width:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:14px!important}
@media (max-width:760px){body.slimbar main{padding-left:16px!important;padding-right:16px!important}}
#v-stage2:has(> #pane-faceless:not([style*="none"]) .fv-bar) > .mhead,#v-stage2:has(> #pane-yap:not([style*="none"]) .ybar-title) > .mhead{display:none!important}
main:has(> #v-stage2.on > #pane-yap:not([style*="none"]) #ysx){padding-bottom:0!important}

/* Yap top bar: edge to edge across the column · modes left, steps spread across the middle, My edits pinned right */
#pane-yap #ytopbar{width:100%;box-sizing:border-box;justify-content:space-between}
#pane-yap #ytopbar .ysteps{flex:1 1 auto;justify-content:space-between;gap:8px}
#pane-yap #ytopbar .ysteps .ystep-sep{flex:1 1 8px;text-align:center;overflow:hidden;white-space:nowrap}
#pane-yap #ytopbar .ysteps .ystep-sep:first-of-type{flex:0 0 auto}
#pane-yap.rail #ytopbar{grid-column:1 / -1!important}

/* ── Catfish · third card + the one-screen modal ── */
.yup-choice{grid-template-columns:repeat(3,minmax(0,380px))}
.rc-box.cfbox{width:min(1180px,96vw)}
.cf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;padding-top:4px}
.cf-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.cf-h{font-weight:800;font-size:13.5px;line-height:1.2} .cf-h small{display:block;font-weight:600;font-size:11.5px;opacity:.6;margin-top:3px}
.cf-drop{aspect-ratio:9/12;max-height:330px;border:1.5px dashed rgba(0,0,0,.3);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;cursor:pointer;background:rgba(0,0,0,.03);overflow:hidden}
.cf-drop.drag{border-color:var(--sun);background:rgba(255,215,49,.1)} .cf-drop.has{border-style:solid;padding:0;background:#000} .cf-drop video{width:100%;height:100%;object-fit:cover;display:block}
.cf-drop .ic{font-size:34px;line-height:1} .cf-drop b{font-size:15px} .cf-drop span{font-size:12px;opacity:.65}
.cf-meta{font-size:12px;opacity:.8} .cf-meta .bad{color:#d33} .lnk{cursor:pointer;text-decoration:underline;font-weight:700}
.cf-face{position:relative;width:100%;aspect-ratio:1;max-height:230px;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;font-size:12px;opacity:.95}
.cf-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cf-face .ic{font-size:34px;line-height:1} .cf-face em{position:absolute;bottom:8px;left:8px;background:#000;color:#fff;font-style:normal;font-size:11px;padding:3px 8px;border-radius:99px}
.cf-tabs{display:flex;gap:4px} .cf-tabs span{padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:800;cursor:pointer;border:1px solid rgba(0,0,0,.25)} .cf-tabs span.on{background:#000;color:#fff;border-color:#000}
.cf-chips{display:flex;gap:6px} .cf-chip{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;border:1px solid rgba(0,0,0,.2);opacity:.75} .cf-chip.on{opacity:1;background:var(--sun);border-color:#000}
.cf-lib{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:172px;overflow:auto;scrollbar-width:none} .cf-lib::-webkit-scrollbar{display:none}
.cf-lib img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;display:block} .cf-lib img.on{border-color:var(--sun)}
.cf-input,.cf-select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.3);font:inherit;font-size:13px;box-sizing:border-box}
.cf-audio{width:100%;height:34px}
.cf-est{font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:12px;background:rgba(255,215,49,.22);border:1px solid rgba(0,0,0,.15)}
.cf-hint{font-size:11.5px;opacity:.65;line-height:1.5} .cf-err{color:#d33;font-size:12.5px;font-weight:700}
.cf-col .ybig{max-width:none}
.cf-prog{max-width:680px;margin:14px auto 8px;text-align:center} .cf-prog h2{margin:0 0 4px;font-size:22px}
.cf-bar{height:10px;border-radius:99px;background:rgba(0,0,0,.1);overflow:hidden;margin-top:14px} .cf-bar i{display:block;height:100%;background:var(--sun);transition:width .6s}
.cf-pct{font-weight:800;font-size:13px;margin-top:6px}
.cf-pieces{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px} .cf-pc{font-size:11px;font-weight:700;padding:6px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.2)} .cf-pc.done{background:#55db9c;border-color:#000}
.cf-log{margin-top:12px;font-size:11px;opacity:.6;text-align:left;font-family:ui-monospace,monospace}
.cf-readyhead{text-align:center;max-width:720px;margin:6px auto 14px} .cf-readyhead h2{font-size:21px;margin:4px 0 4px}
.cf-ready{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:0 auto;align-items:start} .cf-ready video{width:100%;border-radius:16px;background:#000;display:block;margin-top:6px}
.cf-acts{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
@media(max-width:980px){.cf-grid{grid-template-columns:1fr}.cf-ready{grid-template-columns:1fr}.yup-choice{grid-template-columns:1fr}}
#pane-yap .yup-choice{grid-template-columns:repeat(3,minmax(0,380px))!important}
@media(max-width:1100px){#pane-yap .yup-choice{grid-template-columns:repeat(2,minmax(0,380px))!important}}
@media(max-width:760px){#pane-yap .yup-choice{grid-template-columns:1fr!important}}
.cf-ready{align-items:end} .cf-ready video{height:min(50vh,520px);width:auto;max-width:100%;margin:6px auto 0}
.cf-ready>div{text-align:center}
#pane-yap .yup-choice{max-width:1180px!important}
/* two-column range: the third card sits centred on its own row instead of hugging the left */
@media(max-width:1100px) and (min-width:761px){#pane-yap .yup-choice .yup-card:nth-child(3){grid-column:1 / -1;justify-self:center;width:380px;max-width:100%}}

/* Faceless · character + background pickers */
.fc-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.fc-char{border:1px solid rgba(243,239,230,.16);border-radius:14px;padding:8px;cursor:pointer;text-align:center;background:var(--l2,#1f1f25)}
.fc-char img{width:100%;height:150px;object-fit:contain;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.fc-char span{display:block;font-size:11px;font-weight:700;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-char.on{outline:2px solid var(--sun)}
.fc-bgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fc-bg{border:1px solid rgba(243,239,230,.16);border-radius:14px;overflow:hidden;cursor:pointer;background:#000}
.fc-bg video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.fc-bg span{display:block;font-size:11px;font-weight:700;padding:7px 9px;background:var(--l2,#1f1f25)}
.fc-bg.on{outline:2px solid var(--sun)}

/* ── Faceless presets: Rick / Peter / your own, one tap sets the whole film ── */
.fc-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.fc-preset{border:1px solid rgba(243,239,230,.16);border-radius:16px;padding:10px 8px 9px;cursor:pointer;text-align:center;background:var(--l2,#1f1f25);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;transition:transform .08s}
.fc-preset:hover{transform:translateY(-1px)}
.fc-preset .pfig{width:100%;height:104px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.fc-preset .pfig img{max-height:100%;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.fc-preset .pfig .e{font-size:38px;line-height:1;padding-bottom:6px}
.fc-preset b{font-size:13px;display:block;line-height:1.1}
.fc-preset span{font-size:10.5px;opacity:.6;line-height:1.3;display:block}
.fc-preset.on{outline:2px solid var(--sun);background:#2a2a32}
.fc-preset.off{opacity:.5}
.fc-baked{font-size:11.5px;line-height:1.45;opacity:.75;margin-top:8px}
.fc-baked b{opacity:1}
.fc-baked .vlink{cursor:pointer;text-decoration:underline}

/* voice-design auditions */
.fc-takes{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.fc-take{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(243,239,230,.16);border-radius:12px;background:var(--l2,#1f1f25)}
.fc-take b{font-size:12px;min-width:56px}

/* Faceless (fv2) sizes its frame to end at the bottom of the window, so while it is the open tab the page keeps
   no room below it (main's 120 px is for the stage-1 CTA bar). Scoped to the Faceless pane being shown. */
main:has(> #v-stage2.on > #pane-faceless:not([style*="none"]) > #fv2-root){padding-bottom:0!important}

/* ══ Clipped sides, round 2 (map2-app-sandbox §3 rows 1 and 6) ══
   The selected app card's ring (3px outline + 2px offset, lifted 3px on hover) sits inside the slider's own
   padding, so it is never cut on the left or the top; snapping keeps the same inset. */
.appslide{padding:9px 8px 14px;scroll-padding-inline:8px}
/* Sideways carousels outside Faceless fade at an edge only while there is more to scroll that way: a
   scroll-driven animation moves two registered lengths the mask reads. A strip that does not overflow has no
   active timeline, so nothing fades; a browser without scroll timelines keeps the hard edge it had. */
@property --fx-l{syntax:'<length>';inherits:false;initial-value:0px}
@property --fx-r{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes fx-edges{0%{--fx-l:0px;--fx-r:28px}4%{--fx-l:22px}96%{--fx-r:28px}100%{--fx-l:22px;--fx-r:0px}}
@supports (animation-timeline:scroll()){
  .appslide,.sdstrip,#pane-yap.rail .ysteps{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fx-l),#000 calc(100% - var(--fx-r)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--fx-l),#000 calc(100% - var(--fx-r)),transparent 100%);
    animation:fx-edges linear both;animation-timeline:scroll(self inline)}
}

/* "+ Add your app" in the paper look (the night look below) */
.appcard.dh-add .plus{font-size:34px}
.aa-seg{border-color:#000}
.aa-seg button{color:#000}
.aa-seg button.on{background:#000;color:#fff}
.aa-tile,.aa-add{border-color:#000}
.aa-add{color:#000}
.aa-add:hover,.aa-add:focus-within{background:var(--sun);border-style:solid}
.aa-status b{color:#000}
.aa-err,.aa-status.err{color:#b42318}
.aa-hint,.aa-note{color:#444}
.appmenu .brow.addrow{color:#000}
html[data-theme="dark"] .aa-seg{border-color:var(--border)}
html[data-theme="dark"] .aa-seg button{color:var(--muted)}
html[data-theme="dark"] .aa-seg button.on{background:var(--sun);color:#000}
html[data-theme="dark"] .aa-tile{border-color:var(--border);background:var(--l1,#15151a)}
html[data-theme="dark"] .aa-add{border-color:var(--border2);color:var(--muted)}
html[data-theme="dark"] .aa-add:hover,html[data-theme="dark"] .aa-add:focus-within{background:var(--l2,#1f1f25);border-color:var(--sun);color:var(--sun)}
html[data-theme="dark"] .aa-status b{color:var(--ink)}
html[data-theme="dark"] .aa-err,html[data-theme="dark"] .aa-status.err{color:#ff8a7a}
html[data-theme="dark"] .aa-hint,html[data-theme="dark"] .aa-note{color:var(--faint)}
html[data-theme="dark"] .aa-more summary{color:var(--muted)}
html[data-theme="dark"] .appmenu .brow.addrow{color:var(--ink)}