#scroll { height: 1510vh; }
#stage { position: fixed; inset: 0; overflow: hidden; } /* always the whole screen: the film opens full screen */
#world { position: absolute; left: 50%; top: 50%; width: 1780px; height: 1160px; transform-origin: 0 0; transform-style: preserve-3d; }
#surface { position: absolute; left: -40px; top: -40px; width: 1860px; height: 1240px; border-radius: var(--r-surface); transform: translateZ(-40px);
  background: radial-gradient(ellipse at 50% 42%, var(--surface-a) 0%, var(--surface-b) 72%); border: 1px solid var(--surface-line); opacity: 0; }
#film { position: absolute; object-fit: cover; background: #000; }
#stage:not(.placed) #film { visibility: hidden; }
.card.pend, .card.pend * { background-image: none !important; }

/* ---------- the features' play buttons (his pick 10-14, A4, mockup KsDagbCMat5urYNvvcK5RL): once a visit has seen the features, after the
   title the app holds a beat with a button on each of the four parts; a click plays that feature the way a card opens. They come in on the
   site's spring, a slow amber ring going out; hover fills one amber and the feature's name rises under it ---------- */
#plays { position: absolute; inset: 0; pointer-events: none; }
.pb { position: absolute; left: 0; top: 0; text-align: center; opacity: 0; transform-origin: 50% 32px; }
.pb i { position: relative; display: grid; place-items: center; width: calc(64px * var(--zt)); height: calc(64px * var(--zt)); margin: 0 auto; border-radius: var(--r-pill); background: color-mix(in srgb, var(--site-bg) 72%, transparent);
  border: 1px solid rgba(242, 242, 244, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: background .3s, border-color .3s; }
#plays.live .pb i { pointer-events: auto; }
.pb i::before { content: ""; margin-left: 5px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--site-txt); transition: border-color .3s; }
.pb i::after { content: ""; position: absolute; inset: -1px; border-radius: var(--r-pill); border: 1px solid var(--amber); animation: pbring 2.6s ease-out infinite; }
@keyframes pbring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.pb .rise { margin-top: 10px; }
.pb .m > span { font: 700 var(--t-brand)/1 var(--site-font); font-stretch: var(--ttl-stretch); text-transform: uppercase; --ls: -.01em; color: var(--site-txt); text-shadow: 0 2px 16px #000; white-space: nowrap; }
.pb.hot i { background: var(--amber); border-color: var(--amber); }
.pb.hot i::before { border-left-color: var(--on-accent); }
.panel.can { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pb i::after { animation: none; } }
.pb i:focus-visible, .ci:focus-visible, .cx:focus-visible { outline: var(--ring); outline-offset: 4px; }

/* ---------- front layer: feature titles + dropdown fans, in screen space ---------- */
#front { position: fixed; left: var(--bx, 0px); top: 0; width: var(--bw, 100vw); height: 100vh; z-index: 5; pointer-events: none; } /* the content's width (the size cap), the full height */
#front .lay { position: absolute; inset: 0; transform-style: preserve-3d; }

/* ---------- the features' map (his pick 10-14, mockup 9): bottom right, only where you are; click it and the page racks soft behind
   while the whole run comes forward as the open card's list; skip under it goes to the cards ---------- */
#fmap { position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .8s, transform .9s var(--ease-out); }
#fmap.on { opacity: 1; transform: none; }
#fmap.on .fm-here, #fmap.on .fm-skip { pointer-events: auto; }
.fm-veil { position: absolute; inset: 0; backdrop-filter: blur(9px) brightness(.5); -webkit-backdrop-filter: blur(9px) brightness(.5); opacity: 0; transition: opacity .6s; }
#fmap.open .fm-veil { opacity: 1; pointer-events: auto; }
.fm-here { position: absolute; right: calc(var(--bx, 0px) + var(--site-pad)); bottom: calc(var(--site-pad) + 46px); text-align: right; cursor: pointer; text-shadow: 0 1px 16px #000; transition: opacity .4s; }
#fmap.open .fm-here { opacity: 0; pointer-events: none; }
.fm-here b { font: 700 var(--t-brand)/1 var(--site-font); font-stretch: var(--ttl-stretch); text-transform: uppercase; --ls: -.01em; color: var(--site-txt); }
.fm-here small { display: block; margin-top: 6px; }
.fm-bars { display: flex; gap: 4px; justify-content: flex-end; margin-top: 10px; }
.fm-bars i { width: 22px; height: 2px; background: rgba(238, 232, 218, .25); }
.fm-bars i.on { background: var(--amber); }
.fm-here small em, .fm-all p em { font-style: normal; color: var(--amber); margin-right: 8px; }
.fm-all { position: absolute; right: calc(var(--bx, 0px) + var(--site-pad)); bottom: calc(var(--site-pad) + 46px); display: flex; gap: 40px; opacity: 0; transform: translateY(10px);
  transition: opacity .5s, transform .6s var(--ease-out); }
#fmap.open .fm-all { opacity: 1; transform: none; pointer-events: auto; }
.fm-all h4 { margin-bottom: 14px; opacity: var(--cl-others); }
.fm-all .cur h4 { opacity: 1; }
.fm-all p { font: var(--cl-line)/1.2 var(--site-font); color: var(--site-line); margin-bottom: 9px; opacity: var(--cl-others); cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.fm-all p em { color: var(--site-mark); }
.fm-all p.cur { opacity: 1; }
.fm-all p.cur em { color: var(--amber); }
.fm-all p:hover { opacity: .85; }
.fm-skip { position: absolute; right: calc(var(--bx, 0px) + var(--site-pad)); bottom: var(--site-pad); } /* a .pill.line */
@media (prefers-reduced-motion: reduce) { #fmap, .fm-veil, .fm-all, .fm-here { transition: none; } }
.ttl { position: absolute; left: var(--ttl-x); top: 50%; transform-style: preserve-3d; }
.ttl.right { left: calc(100% - var(--ttl-x) - var(--ttl-w)); }
.ttl.top { top: 0; left: calc(var(--bw, 100vw) * .17); } /* its height is set in frame(), just above the timeline */
.ttl.top .p { width: calc(var(--bw, 100vw) * .46); }
.ttl.mid { left: 50%; }
.ttl.mid .p { width: calc(var(--bw, 100vw) * .84); left: calc(var(--bw, 100vw) * -.42); text-align: center; }
.ttl.mid .big { font-size: var(--ttl-hero); }
.ttl.mid .idx .num { color: var(--amber); }
.ttl .p { position: absolute; left: 0; width: var(--ttl-w); }
.ttl .p.head { bottom: 10px; }
.ttl .p.lines { top: 10px; }
.ttl.on .m.l2 > span { opacity: 0; filter: blur(var(--fp-blur)); transform: scale(var(--fp-zoom)); --sp: var(--fp-spread); }
.ttl.on.on2 .m.l2 > span { opacity: 1; filter: none; transform: none; --sp: 0; }
.ttl.out .m.l2 > span { opacity: 0; filter: blur(var(--fp-blur)); transform: none; }
/* the title text, one copy for every title: its index, the title, its lines */
:is(.ttl, .shead, .clist) .idx { white-space: nowrap; }
:is(.ttl, .clist) .line { text-shadow: 0 1px 16px #000; }
.ttl .m + .m { margin-top: 8px; }
/* an open card's chapters, all at once down its side (his pick, mockup A1): the card's title heads it, always on; the rows are all sharp, the
   one the animation shows full white with an amber index, the rest at --cl-others; built in from behind masks one after another (--d), out together */
.clist { position: absolute; left: 0; top: 0; width: var(--ttl-w); transform-origin: 0 0; }
.clist .crow + .crow { margin-top: var(--cl-gap); }
.clist .head + .crow { margin-top: calc(var(--cl-gap) * 1.8); }
.clist .crow:not(.head) :is(.t, .line) { transition: opacity .45s; }
.clist .crow:not(.head):not(.cur) .t { opacity: var(--cl-others); }
.clist .crow:not(.head):not(.cur) .line { opacity: 0; }
.clist .idx .rule { width: 28px; }
.clist .line { display: block; margin-top: 4px; font-size: var(--cl-line); line-height: 1.35; }
.clist .head .line { font-size: var(--ttl-line); margin-top: 10px; }
.clist .m:first-child { margin-bottom: 4px; }
.opt { position: absolute; left: 0; top: 0; opacity: 0; font: var(--a-l)/1 var(--sans); color: var(--txt); background: var(--panel); border: 1px solid var(--line2);
  border-radius: var(--r-btn); padding: 8px 13px; white-space: nowrap; box-shadow: var(--shadow-pop); }
.opt.cur { border-color: var(--amber); color: var(--amber); }

/* ---------- sub feature cards: a normal page section after the app ---------- */
/* the cards sit on the app's tilted surface, below it (in the world); the header is title text, so it floats in the foreground facing the camera */
#cards { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; pointer-events: none; }
.shead { position: absolute; left: 0; top: 0; max-width: calc(var(--bw, 100vw) * .62); pointer-events: none; }
.shead .m + .m > span { transition-delay: .12s; }
.shead .line { margin-top: 10px; }
/* Connections: below the cards on the same page, a 1600 x 900 frame in --u (set in layoutCards: the cards' width / 1600); the title faces the
   camera in the front layer like the cards' header; the rows and the Bridge card sit on the surface */
#conn { position: relative; height: calc(900 * var(--u)); overflow: hidden; } /* flat and clipped like the mockup's frame: the card runs off its foot, the rows pass in front */
#conn-anchor { position: absolute; left: calc(112 * var(--u)); top: calc(150 * var(--u)); }
#conn-head .line { max-width: var(--ttl-w); }
#cards-head .line { max-width: 560px; }
.cn-row { position: absolute; z-index: 2; left: 0; right: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cn-row > div { display: flex; width: max-content; will-change: transform; }
.cn-it { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-right: calc(96 * var(--u)); white-space: nowrap; font: 600 calc(var(--cn-name) * var(--kt)) / 1 var(--site-font); letter-spacing: -.015em; color: var(--site-txt); }
.cn-it img { width: calc(var(--cn-mark) * var(--kt)); height: calc(var(--cn-mark) * var(--kt)); object-fit: contain; flex: none; }
.cn-models .cn-it { gap: calc(10 * var(--u)); margin-right: calc(48 * var(--u)); font: 500 calc(var(--b-cl-line) * var(--kt)) / 1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cn-models .cn-it img { width: calc(var(--cn-mark-s) * var(--kt)); height: calc(var(--cn-mark-s) * var(--kt)); opacity: .8; }
.cn-card { position: absolute; width: 442px; transform-origin: 0 0; -webkit-mask: linear-gradient(100deg, #000 35%, rgba(0, 0, 0, .2) 100%); mask: linear-gradient(100deg, #000 35%, rgba(0, 0, 0, .2) 100%); }
.cn-soon { position: absolute; left: calc(112 * var(--u)); bottom: calc(52 * var(--u)); transition: opacity .5s; }
.cn-soon.gone { opacity: 0; } /* gone once Connections has gone up past the screen's top third */
/* Download (his seven points 10-14, design C): below Connections, a frame in --u like it (1600 x 900; a phone-size screen takes the 390 x 844
   frame); each piece sits where LAYOUT.download puts it, its top left at x, y, its type the scale's times --k and --s. The key line is the section title, facing the
   camera; the rest sit on the surface. Sizes are the design's (artifact QHZpP1qyuxcH3bxR7R3EX7) */
#dl { position: relative; pointer-events: none; }
#dl-anchor, .dl-pc { position: absolute; }
.dl-pc { white-space: nowrap; }
.dl-pc a { pointer-events: auto; }
.dl-btn { display: inline-flex; align-items: center; gap: .5em; width: var(--dl-w, 17.3em); padding: .68em .9em; border-radius: 3px; background: var(--amber); color: var(--dl-ink); text-decoration: none;
  font: 700 calc(var(--dl-cta) * var(--kt) * var(--s)) / 1 var(--site-font); font-stretch: var(--ttl-stretch); text-transform: uppercase; --ls: -.01em; transition: background .2s; }
.dl-btn:hover { background: var(--amber-hi); }
.dl-btn svg { width: .9em; height: .9em; flex: none; fill: currentColor; }
.dl-meta, .dl-lk { font: 400 var(--t-label) / 1.5 var(--site-mono); --ls: .14em; text-transform: uppercase; color: var(--site-mark); }
.dl-lk { display: block; padding: .6em 0 .6em 1.07em; border-left: 1px solid var(--amber); color: var(--site-txt); text-decoration: none; }
.dl-lk small { font: inherit; color: var(--site-mark); }
.dl-lk svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -.14em; }
.dl-lk:hover .num { color: var(--site-txt); }
.dl-minor { font: 400 var(--cl-line) / 1.4 var(--site-font); color: var(--site-line); }
@media (max-width: 700px) { .dl-btn { --dl-w: 14.6em; }
  .dl-pc[data-k="minor"] { white-space: normal; width: calc(350px * var(--k)); } /* the minor line wraps inside the phone's gutters */
  .dl-lk { padding: .4em 0; border-left: 0; } .dl-lk small { display: block; } }
/* Updates (his ask 10-15, design 1 Log, mockup Kys7R7wXCH4v1jUkt6FGsv): between Download and the footer, a frame in --u like Download's
   (1600 x 900; a phone-size screen takes 390 x 844); each piece where LAYOUT.updates puts it, its type the scale's times --k and --s. The
   title faces the camera like the others; the version tags and the open version sit on the surface. The lines keep the app's amber ◆ and
   bold lead; a long version pages sideways in columns, so nothing scrolls inside the page's scroll (the phone's tags swipe sideways) */
#upd { position: relative; pointer-events: none; }
#upd-anchor, .upd-pc { position: absolute; }
#upd-head .line { max-width: var(--ttl-w); }
.upd-meta .rule { width: 28px; }
:where(.upd-pc) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.upd-pc button { pointer-events: auto; }
.upd-mo { display: grid; gap: calc(10px * var(--k)); width: calc(560px * var(--k)); }
.upd-mr { display: grid; grid-template-columns: calc(56px * var(--k)) minmax(0, 1fr); gap: calc(10px * var(--k)); align-items: start; }
.upd-tags { display: flex; flex-wrap: wrap; gap: calc(5px * var(--k)); }
.upd-ml, .upd-tag { font: 400 var(--t-label) / 1.2 var(--site-mono); --ls: .14em; text-transform: uppercase; color: var(--site-mark); white-space: nowrap; }
.upd-ml { padding-top: .45em; }
.upd-tag { --ls: .02em; padding: .26em .45em; border: 1px solid rgba(238, 232, 218, .14); border-radius: 2px; color: var(--site-line); transition: color .2s, border-color .2s, background .2s; }
.upd-tag:hover { color: var(--site-txt); border-color: rgba(238, 232, 218, .32); }
.upd-tag.on { color: var(--amber); border-color: var(--amber); background: var(--amber-tint); }
.upd-rt { white-space: nowrap; } /* a .row-title */
.upd-meta, .upd-pn { font: 400 var(--t-label) / 1.3 var(--site-mono); --ls: .14em; text-transform: uppercase; color: var(--site-mark); }
.upd-meta { margin-top: calc(14px * var(--k)); }
.upd-meta a { color: var(--site-txt); pointer-events: auto; }
.upd-n, .upd-new { display: inline-block; white-space: nowrap; }
.upd-new { margin-left: 1em; padding: .1em .6em; border: 1px solid var(--amber); border-radius: 2px; color: var(--amber); }
.upd-c { width: calc(640px * var(--k)); height: calc(590px * var(--k)); columns: 2; column-gap: calc(40px * var(--k)); column-fill: auto; overflow: hidden; }
.upd-li { display: flex; gap: .65em; margin-bottom: .75em; break-inside: avoid; font: 400 var(--cl-line) / 1.45 var(--site-font); --ls: -.005em; color: var(--site-line); }
.upd-li > i { flex: none; font-style: normal; font-size: .62em; line-height: 2.35; color: var(--amber); }
.upd-li b { font-weight: 600; color: var(--site-txt); }
.upd-pg { display: flex; align-items: center; gap: calc(14px * var(--k)); margin-top: calc(14px * var(--k)); --pill-py: .32em; --pill-px: .8em; }
.upd-pg .pill[disabled] { opacity: .3; cursor: default; }
/* Footer (his points, SPEC 7; his pick 10-14, A2 "the mark at depth", artifact Uj9iCUTxe9ePgqHQ5udE2L): under Download, a frame in --u
   (1600 x 200; a phone-size screen takes 390 x 160); the SHDW mark big in the corner, sunk into the surface, soft and dim from its depth;
   the credit, Terms and Privacy and the socials stacked beside it, floating just above. Each piece where LAYOUT.footer puts it. Its text is
   the nav's (his call 10-14): the credit at the brand's size, Terms and Privacy at the links', the icons at the mark's, fixed on every screen
   like the nav; only the SHDW mark grows with the frame (--k) */
#ft { position: relative; pointer-events: none; transform-style: preserve-3d; }
.ft-pc { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ft-pc a { pointer-events: auto; }
#card-grid { transform-style: preserve-3d; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--card-gap); }
.card { position: relative; aspect-ratio: 3 / 2; transform-style: preserve-3d; }
/* a card: the grey rounded surface from the main features, a thin border, the title on top */
/* --k = how much bigger the window shows once it lifts toward the camera (1 on the page): its border and corners hold their size on screen */
.ci { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; /* in 3D the section's empty boxes can sit in front of a card; only cards take the mouse */ border-radius: calc(var(--r-surface) / var(--k, 1)); border: calc(1px / var(--k, 1)) solid var(--surface-line); box-shadow: var(--shadow-panel);
  background: radial-gradient(ellipse at 50% 42%, var(--surface-a) 0%, var(--surface-b) 72%); opacity: 0; cursor: pointer; transform-origin: 50% 50%; }
/* the example: the feature's own UI, heavily cropped, on an angle, sitting in the back layer under the card's window: pushed back (translateZ),
   soft, and darker since its only light is the window. left/top allow for the pull toward the middle that the depth gives (it lands near 13% / 16%).
   10-12, his values from the angles mockup: tilt 7, turn -7.5, roll 5 deg, perspective 2400 there (1100 in the card's own px), the same at rest
   and open; the scale keeps its size in the card (it was 32 / -20 / 14 deg at 800px) */
.cex { position: absolute; inset: 0; perspective: 1100px; }
.cex .cpanel { position: absolute; left: 10%; top: 13%; transform-origin: 0 0; transform: translateZ(-140px) rotateX(7deg) rotateY(-7.5deg) rotateZ(5deg) scale(.785);
  filter: blur(3px) brightness(.65); opacity: .9; }
/* the app's panel look, drop shadow and all, as the features' windows have it; a bare card UI (card 5) is a stage for separate windows (.pw)
   that each have it */
.cex .cpanel:not(.bare), .pw { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-panel); }
.cin { position: absolute; inset: 0; transform-origin: 0 0; }
/* the open card's close: a tiny X drawn with lines as thin as the window's border */
.cx { position: absolute; z-index: 4; top: calc(12px / var(--k, 1)); right: calc(12px / var(--k, 1)); width: calc(22px / var(--k, 1)); height: calc(22px / var(--k, 1)); opacity: 0; pointer-events: none; cursor: pointer; }
.cx::before, .cx::after { content: ""; position: absolute; left: 25%; top: 50%; width: 50%; height: calc(1px / var(--k, 1)); background: var(--site-txt); opacity: .75; transform: rotate(45deg); }
.cx::after { transform: rotate(-45deg); }
.cx:hover::before, .cx:hover::after { opacity: 1; }
.ci.mir::after { background: linear-gradient(192deg, var(--surface-b) 20%, color-mix(in srgb, var(--surface-b) 55%, transparent) 42%, transparent 66%); }
.ci::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(168deg, var(--surface-b) 20%, color-mix(in srgb, var(--surface-b) 55%, transparent) 42%, transparent 66%); }
.ctx { position: absolute; z-index: 2; left: var(--card-pad); top: var(--card-pad); right: var(--card-pad); }
.ctx b { display: block; }
.ctx em { display: block; margin-bottom: 7px; font-style: normal; }
.ctx > span { display: block; margin-top: 8px; font: 400 var(--cl-line)/1.3 var(--site-font); color: var(--site-line); }

/* card 1's UI: the Video Editor (his 10-11 redesign: the Image Gen frame, the take tree in a 230px sidebar, takes as Clip Gen cards under "from original") */
.ve { display: flex; height: calc(100% - 34px); }
.ve-l { flex: 1; min-width: 0; padding: 12px; }
.ve-r { width: 230px; flex-shrink: 0; padding: 12px 10px; border-left: 1px solid var(--line); background: var(--bg2); }
.ve-prev { position: relative; height: 196px; border-radius: var(--r-field); overflow: hidden; background: #000 center / cover no-repeat; }
/* an image's caption, top left (the Video and Image Editors) */
:is(.ve-prev, .ie-canvas) .vcap { position: absolute; left: 8px; top: 8px; }
.ve-prev .v2v { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: var(--r-sm); background: var(--amber); font: 700 var(--a-s) var(--mono); letter-spacing: .06em; color: var(--on-accent); }
.vstrip { border-color: transparent; }
.vstrip .vwin { position: absolute; top: -3px; bottom: -3px; right: 0; border: 2px solid var(--amber); border-radius: var(--r-sm); } /* the window that's sent */
.vstrip .vdim { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .55); }
.vprompt .ph { color: var(--dim); }
/* as wide as its column, as in the app (flex: 1, centred); just "Generate" (his call: a mockup, the UI kept thin) */
.btn.vgen { display: flex; justify-content: center; text-align: center; white-space: normal; margin-top: 12px; }
.vnode { width: 92px; padding: 4px; border: 2px solid var(--line2); border-radius: var(--r-tile); background: var(--bg2); display: flex; flex-direction: column; gap: 2px; transition: border-color .3s; }
.vnode.cur { border-color: var(--amber); }
.vnode .thumb { height: 50px; }
.vnode .vh { display: flex; align-items: baseline; gap: 4px; font-size: var(--a-m); color: var(--txt-hi); }
.vnode .vh em { margin-left: auto; font: var(--a-xs) var(--mono); color: var(--dim); }
.vnode small { font-size: var(--a-xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vnode p { font-size: var(--a-xs); line-height: 1.3; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vorig { margin-top: 10px; }
.vfrom { margin: 8px 0 5px 4px; font: var(--a-xs) var(--mono); color: var(--dim); }
.vkids { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); transition: border-color .4s; }
.vkids.lit { border-left-color: var(--amber); }
.ve-r .field { transition: border-color .4s; }
.ve-r .field.lit { border-color: var(--amber); }
.vrow { display: flex; flex-wrap: wrap; gap: 8px; }
/* card 2's UI: the Image Editor (its frame shared with the Video Editor): the canvas keeps the image's shape, its caption top left, its toolbar
   top right; compare = the take it came from in the left half, the result in the right; the lasso marks the selection */
.ie-canvas { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-field); overflow: hidden; background: #000; } /* taller than the image, as in the app: its caption and toolbar sit in the band above it */
.ie-canvas .ie-img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #000 center / contain no-repeat; transition: left .45s, right .45s, opacity .35s; }
.ie-canvas .ie-base { right: 50%; opacity: 0; border-right: 1px solid var(--line2); }
.ie-canvas.cmp .ie-base { opacity: 1; }
.ie-canvas.cmp .ie-cur { left: 50%; }
.ie-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
.ie-canvas.cmp svg { opacity: 0; }
.ie-canvas .vcap { max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-lasso { fill: none; stroke: var(--amber); stroke-width: 13; stroke-linejoin: round; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.ie-lasso.done { stroke-dasharray: 34 22; animation: ants 1.2s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -56; } }
.ie-tools { position: absolute; top: 6px; right: 8px; }

.ie-refs { display: flex; gap: 8px; margin-top: 6px; }
.ie-drop { width: 46px; height: 46px; border-radius: var(--r-btn); border: 1px dashed var(--line2); background: var(--field); display: inline-flex; align-items: center; justify-content: center; color: var(--dim); }
.ie-foot { display: flex; gap: 6px; margin-top: 12px; }
.ie-foot .vgen { flex: 1; margin: 0; }
/* a mirrored card (its chapters on the right once open): the UI's angle mirrored too, at rest and open alike (on the window itself, which
   leaves its slot when it opens) */
.ci.mirror .cex .cpanel { transform: translateZ(-140px) rotateX(7deg) rotateY(7.5deg) rotateZ(-5deg) scale(.785); }
/* card 3's UI: the Models card (vidancer-ui ModelsCard.tsx, koan-shared Section + LoraShelf): legends over bordered bodies that fold, rows with
   the model's mark, its name with link and licence chips, its blurb and the state slot on the right; the LoRA shelf, the LoRA block as Clip Gen
   has it, and the download wizard over it all. A card whose sections fold is measured with them open (.measure), as its chapters show them */
.lc { position: relative; padding: 12px; font-size: var(--a-l); }

.lc-folder { display: flex; align-items: center; gap: 8px; min-height: 26px; margin: 8px 0; font: var(--a-s) var(--mono); color: var(--dim); }
.lc-folder > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lc-sec { margin-bottom: 10px; }
.lc-leg { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.lc-leg > span { width: 10px; }
.lc-leg em { margin-left: auto; font: normal var(--a-s) var(--mono); text-transform: none; letter-spacing: 0; color: var(--dim); }
.lc-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s ease; }
.lc-body > div { overflow: hidden; min-height: 0; }
.lc-sec.fold .lc-body { grid-template-rows: 0fr; }
.ci.measure .lc-sec.fold .lc-body { grid-template-rows: 1fr; transition: none; }
.ci.still .lc-body { transition: none; }
.lc-in { margin-top: 6px; padding: 2px 12px; background: var(--panel); }
.lc-row { display: flex; align-items: center; gap: 4px 8px; min-height: 46px; padding: 4px 0; border-bottom: 1px solid var(--line); transition: background 1s; }
.lc-row:last-child { border-bottom: 0; }
.lc-row.sub { padding-left: 30px; min-height: 40px; }
.lc-row.lit { background: var(--amber-tint); transition: background .3s; }
.lc-logo { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-field); color: var(--muted); background: center / cover no-repeat; }
.lc-txt { flex: 1; min-width: 0; }
.lc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lc-name b { max-width: 260px; overflow: hidden; text-overflow: ellipsis; font: var(--a-l) var(--mono); color: var(--txt-hi); white-space: nowrap; }
.lc-name i { font: normal var(--a-m) var(--mono); color: var(--dim); }
.lc-chip { color: var(--muted); }
.lc-chip.am { color: var(--amber); }
.lc-chip.on { color: var(--amber); border-color: var(--amber); }
.lc-blurb { margin-top: 2px; line-height: 1.35; }
.lc-slot { width: 200px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: var(--a-s) var(--mono); color: var(--dim); }
.lc-ok { font-size: var(--a-m); color: var(--ok); }
.lc-rend { color: var(--amber); }
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lc-bar { flex: 1; height: 4px; border-radius: var(--r-sm); background: var(--field); border: 1px solid var(--line); overflow: hidden; }
.lc-bar i { display: block; height: 100%; background: var(--amber); }
.lc-tabs { display: flex; gap: 6px; align-items: center; margin: 8px 0 4px; }
.lc-tabs.big .lc-chip { font-size: var(--a-m); padding: 3px 10px; }
.lc-search { margin: 4px 0; padding: 5px 8px; font: var(--a-m) var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sub { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; }
.lc-sub em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--dim); }
.lc-sub b { margin-left: auto; font-weight: 400; letter-spacing: 0; color: var(--dim); }
.lc-star { color: var(--dim); font-size: var(--a-l); }
.lc-cg { margin-top: 12px; padding: 10px 12px; }
.lc-chk { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; }
.lc-chk i { width: 12px; height: 12px; border-radius: var(--r-sm); background: var(--amber); color: var(--on-accent); font: 700 var(--a-xs)/12px var(--sans); text-align: center; font-style: normal; }
.lc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lc-lchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: var(--r-field); padding: 3px 6px; font: var(--a-s) var(--mono); color: var(--txt-hi); opacity: 0; transition: opacity .45s; }
.lc-lchip.on { opacity: 1; }
.lc-lchip > span:first-child { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-rng { position: relative; width: 60px; height: 4px; border-radius: var(--r-sm); background: var(--line2); }
.lc-rng i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm); background: var(--amber); }
.lc-rng b { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--amber); }
.lc-w { min-width: 26px; text-align: right; color: var(--muted); }
.lc-wiz { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s; }
.lc-wiz.on { opacity: 1; }
.lc-wiz > div { position: absolute; left: 50%; width: 320px; margin-left: -160px; padding: 16px; background: var(--raised); border: 1px solid var(--line2); border-radius: var(--r-win); box-shadow: var(--shadow-float); font-size: var(--a-l); line-height: 1.5; color: var(--txt); }
.lc-wh { margin-bottom: 8px; font-size: var(--a-xl); color: var(--txt-hi); }
.lc-wh span { font-size: var(--a-m); color: var(--dim); }
.lc-wl { display: flex; gap: 8px; font-size: var(--a-l); line-height: 1.6; }
.lc-wl > span:first-child { width: 86px; flex: none; padding-top: 2px; }
.lc-wl .ok { color: var(--ok); }
.lc-wb { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* card 4's UI: the Watched panel (panels/Watch.tsx, its civit tab: the images he liked on Civitai) docked over Image Gen with its LoRA
   sidebar (vidancer-ui ImageGen.tsx, ImageGenSidebar.tsx); a like dragged onto Image Gen's drop box opens the settings menu under the box
   (lib/settingsMenu.tsx in the shared ContextMenu's look) */
.cw-ig { position: relative; display: flex; height: 380px; } /* held: its lists change through the chapters */
.cw-l { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; }
.cw-l > .sec:first-child { margin-top: 0; }
.cw-png { align-self: flex-end; width: 148px; height: 50px; margin-top: 6px; border: 1px dashed var(--line2); border-radius: var(--r-btn); background: var(--field);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--dim); font-size: var(--a-title); line-height: 1; }
.cw-png span { font-size: var(--a-xs); }
.cw-png.on { border-color: var(--amber); color: var(--amber); }
.cw-ghost { position: absolute; z-index: 4; border-radius: var(--r-field); background: center / cover no-repeat; box-shadow: var(--shadow-pop); opacity: 0; transform-origin: 50% 50%; pointer-events: none; }
.cw-prompt { height: 100px; overflow: hidden; margin-top: 4px; font: var(--a-s)/1.5 var(--mono); } /* the app's box keeps its height; a long prompt scrolls */
.cw-side { width: 250px; flex-shrink: 0; overflow: hidden; padding: 10px 10px 8px; border-left: 1px solid var(--line); background: var(--bg2); }
.cw-tabs { display: flex; gap: 6px; margin: 6px 0; }
.cw-tabs .btn { flex: 1; justify-content: center; }
.cw-list { margin-top: 4px; }
.cw-row { display: flex; gap: 8px; padding: 6px 2px 6px 4px; border-bottom: 1px solid var(--line); }
.cw-row .lc-logo { width: 24px; height: 24px; }
.cw-b { flex: 1; min-width: 0; }
.cw-nm { font-size: var(--a-m); color: var(--txt-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font: var(--a-xs) var(--mono); color: var(--dim); }
.cw-go { color: var(--amber); }
.cw-words { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.cw-words span { color: var(--muted); }
.cw-act { margin-top: 5px; }

.cw-wait { padding: 8px 4px; }
.cw-wh { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }

.cw-eye { display: inline-flex; color: var(--amber); }
.cw-grid { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 8px; }
.cw-t { width: 139px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--field) center / cover no-repeat; transition: box-shadow .3s; }
.cw-t.sel { outline: var(--ring); }
.cw-menu { position: absolute; z-index: 3; max-width: 430px; padding: 4px; opacity: 0; transition: opacity .25s; }
.cw-menu.on { opacity: 1; }
.cw-menu div { padding: 6px 10px; border-radius: var(--r-field); font-size: var(--a-l); color: var(--txt-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s; }
.cw-menu div.on { background: var(--panel2); }
.cw-menu em { font-style: normal; font-size: var(--a-s); color: var(--dim); }
.cw-menu .cw-get { color: var(--amber); }
.cw-menu hr { height: 1px; margin: 4px 0; border: 0; background: var(--line2); }
.cw-mono { font: var(--a-m) var(--mono); }
/* card 5's UI: the Bin and the Library side by side (vidancer-ui Bin.tsx, Library.tsx: folding cards, Foldered folders) with the Open window
   over them (App.tsx: recent projects as cards), and a style sheet under them (StyleSheet.tsx) with the clips it feeds */
.cex .cpanel.bare { perspective: 1100px; } /* its windows arrive out of depth */
.pm-cols { position: relative; display: flex; gap: 12px; height: 640px; }
.pm-col { position: relative; flex: 1; min-width: 0; }
.pm-sw { margin-top: 12px; }
.pm-fill { padding: 8px 10px; }
.pm-fill .lc-sec { margin-bottom: 6px; }
.pm-fill .lc-in { padding: 6px 8px; }
.pm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.pm-tiles .tile { transition: border-color .3s; }
.pm-tiles .tile.lit { border-color: var(--amber); }
.pm-tiles .tile b { font-size: var(--a-s); }
.pm-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
.pm-imgs .thumb { height: 52px; }
.pm-imgs small { display: block; margin-top: 2px; font: var(--a-xs) var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-folder { display: flex; align-items: center; gap: 4px; padding: 2px 4px; font-size: var(--a-m); color: var(--muted); }
.pm-folder em { font-style: normal; color: var(--dim); }
.pm-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: var(--a-m); color: var(--txt-hi); }
.pm-row .thumb { width: 22px; height: 22px; flex: none; border-radius: var(--r-sm); }
.pm-row i { width: 22px; flex: none; font-style: normal; text-align: center; color: var(--muted); }
.pm-row em { margin-left: auto; font: normal var(--a-xs) var(--mono); color: var(--dim); }
.pm-row.lit { color: var(--amber); }
/* the Open window (App.tsx, his screenshot 10-13), its own window (his call 10-13): the app's 780px window drawn at its own sizes and zoomed
   to the card's width (.pm-oz holds its zoomed size); 4 across, the drag bar under the list, then the PLAYGROUND shelf */
.pm-open { position: absolute; inset: 0 0 auto; z-index: 4; }
.pm-ow { zoom: .769; padding: 16px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-win); box-shadow: var(--shadow-panel); }
.pm-oh { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pm-ot { font-size: var(--a-xl); color: var(--txt-hi); }
.pm-ot em { font-style: normal; color: var(--dim); }
.pm-oh .btn { padding: 5px 12px; }
.pm-oh .btn:first-of-type { margin-left: auto; }
.pm-ox { color: var(--dim); }
.pm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 3px; }
.pm-card { height: 152px; padding: 5px; border-radius: var(--r-win); outline: 1px solid var(--line); outline-offset: -1px; background: var(--panel); overflow: hidden; transition: outline-color .3s, background .3s; }
.pm-card.lit { background: var(--panel2); }
.pm-card.cur { outline-color: var(--amber); }
.pm-card .thumb { height: 94px; border-radius: var(--r-tile); background-color: var(--field); }
.pm-rh { display: flex; align-items: center; justify-content: center; height: 9px; margin: 1px 0; }
.pm-rh i { width: 44px; height: 3px; border-radius: var(--r-sm); background: var(--line2); }
.pm-pg { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pm-pl { margin-bottom: 6px; }
.pm-pl span { text-transform: none; letter-spacing: 0; }
.pm-pc { width: 168px; padding: 5px; border-radius: var(--r-win); outline: 1px dashed var(--line2); outline-offset: -1px; background: var(--panel); }
.pm-pt { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: var(--r-tile); background: var(--field); font: var(--a-title) var(--mono); letter-spacing: 3px; color: var(--muted); }
.pm-pc b { display: block; margin-top: 5px; font-size: var(--a-m); font-weight: 600; color: var(--txt-hi); }
.pm-pc b span { font-weight: 400; color: var(--dim); }
.pm-pc i { display: block; min-height: 20px; font-style: normal; font-size: var(--a-xs); color: var(--dim); }
.pm-pc small { display: block; margin-top: 2px; font: var(--a-xs) var(--mono); color: var(--muted); }
.pm-card b { display: block; margin-top: 5px; font-size: var(--a-m); font-weight: 600; color: var(--txt-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-card b span { font-weight: 400; color: var(--amber); }
.pm-card i { display: block; font-style: normal; font-size: var(--a-xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.pm-card small { display: block; margin-top: 2px; font-size: var(--a-xs); color: var(--muted); }
.pm-ss { padding: 10px 12px; }
.pm-note { margin-bottom: 8px; }
.pm-lb { margin-bottom: 3px; }
.pm-st { margin: 4px 0 6px; }
.pm-in { margin-bottom: 6px; padding: 6px 8px; font-size: var(--a-l); color: var(--txt-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-in mark { background: var(--amber-mark); color: inherit; }
.pm-in .caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--amber); }
.pm-gen b { font-weight: 400; color: var(--amber); }
/* card 6's UI: the Timeline Monitor over the timeline's two tracks, and the Effects panel (koan-shared vidancer-ui panels/EffectsPanel.tsx):
   transform pinned on top, the mask with its data passes, blend, then the added effects. The Monitor composites as the app's chain runs: the
   top block gridded, cut by its mask, moved, then blended over the track below. While a data pass runs its picture wipes in over the frame
   (the app shows depth and matte only through what they do) */
.fx { display: flex; height: 100%; } /* the Monitor and timeline on the left, the Effects panel docked beside them, as the app docks it */
.fx-lc { width: 400px; flex: none; }
.fx-rc { flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.fx-mon { padding-top: 8px; background: #000; }
.fx-pic { position: relative; width: 380px; height: 285px; margin: 0 auto; overflow: hidden; isolation: isolate; }
.fx-pic > *, .fx-g { position: absolute; inset: 0; }
.fx-v1, .fx-scan { background: center / cover no-repeat; }
.fx-blk { transform-origin: 50% 50%; }
.fx-g { display: grid; grid-template: 1fr / 1fr; transition: opacity .45s; }
.fx-g i { background: center / cover no-repeat; }
.fx-cut, .fx-blk.cut .fx-full { opacity: 0; }
.fx-blk.cut .fx-cut { opacity: 1; }
.fx-scan { opacity: 0; transition: opacity .4s; }
.fx-pic .fx-line { inset: auto 0; height: 2px; margin-top: -1px; opacity: 0; transition: opacity .3s; }
.fx-mon .tc { margin: 0; padding: 7px 0; font-size: var(--a-m); }
.fx-tl { border-bottom: 1px solid var(--line); }
.fx-tl .ruler { margin-left: 96px; }
.fx-tl .trk-l { width: 96px; }
.fx-tl .playhead { left: calc(96px + (100% - 96px) * .42); }
.fx-p { position: relative; height: calc(100% - 34px); overflow: hidden; }
.fx-in { position: relative; padding: 10px; opacity: 0; transition: opacity .5s; }
.fx-in.on { opacity: 1; }
.fx-none { position: absolute; left: 30px; right: 30px; top: 150px; text-align: center; line-height: 1.5; transition: opacity .4s; }
.fx-hd { display: flex; align-items: center; margin-bottom: 6px; }
.fx-hd em { margin-left: auto; font-style: normal; font-size: var(--a-l); text-transform: none; letter-spacing: 0; }
.fx-in .lc-sec { margin-bottom: 8px; }
.fx-in .lc-in { padding: 8px 10px 4px; }
.fx-r { display: flex; align-items: center; gap: 8px; height: 20px; margin-bottom: 4px; }
.fx-r > .lb { width: 52px; flex: none; }
.fx-r .lc-rng { flex: 1; width: auto; }
.fx-r .dd { flex: 1; padding: 3px 8px; font-size: var(--a-m); }
.fx-r .fx-tog { justify-content: center; }
.fx-r .fx-tog::after { content: none; }
.fx-v { width: 44px; flex: none; text-align: right; font: var(--a-s) var(--mono); color: var(--muted); }
.fx-re { width: 10px; flex: none; font-size: var(--a-m); color: var(--dim); visibility: hidden; }
.fx-r.dirty .fx-re { visibility: visible; }
/* rows that show once on (the mask's settings, an added effect), at once, as the app's do; measured shown */
.fx-fold { display: none; }
.fx-fold.on, .ci.measure .fx-fold { display: block; }
.fx-data { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.fx-d { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 4px; }
.fx-d .lb { width: 78px; flex: none; }

.fx-ok { font-size: var(--a-s); color: var(--ok); }
.fx-job { display: flex; gap: 6px; height: 16px; font: var(--a-s) var(--mono); color: var(--amber); opacity: 0; transition: opacity .3s; }
.fx-job.on { opacity: 1; }
.fx-job em { font-style: normal; color: var(--dim); }
.fx-hint { margin: 6px 2px 4px; line-height: 1.5; }
.fx-row { margin-bottom: 6px; padding: 6px 8px; background: var(--raised); }
.fx-eh { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fx-eh span { font-size: var(--a-s); color: var(--dim); }
.fx-eh b { font: 400 var(--a-m) var(--mono); color: var(--gold); }
.fx-eh em { margin-left: auto; font-style: normal; font-size: var(--a-m); color: var(--dim); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.fx-chips span { padding: 4px 8px; border: 1px dashed var(--line2); border-radius: var(--r-btn); background: var(--field); font-size: var(--a-s); letter-spacing: .02em; color: var(--dim); transition: border-color .25s, color .25s; }
.fx-chips span.lit { border-color: var(--amber); color: var(--amber); }
/* card 7: the Enhance window, his screenshot 10-13 */
.en { height: 100%; background: var(--bg2); }
.en-in { padding: 10px 12px; }
.en-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }

.en-hd em { margin-left: auto; font: normal var(--a-s) var(--mono); color: var(--dim); }
.en-ctl { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--a-s); color: var(--dim); }

.en-ctl .dd { min-width: 64px; padding: 4px 8px; font-size: var(--a-m); }
.en-ctl .en-pv { margin-left: auto; opacity: .45; }
.en-mon { position: relative; height: 532px; border-radius: var(--r-tile); background: #000 center / contain no-repeat; }
.en-mon span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: var(--a-m); color: rgba(255, 255, 255, .7); }
/* a native range: --f = where its thumb sits (0 to 1) */
.en-rng { position: relative; display: block; height: 16px; }
.en-rng::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--range-on) calc(7px + (100% - 14px) * var(--f)), var(--range-off) 0); }
.en-rng::after { content: ""; position: absolute; top: 1px; left: calc((100% - 14px) * var(--f)); width: 14px; height: 14px; border-radius: 50%; background: var(--range-on); }
.en-scrub { margin: 8px 0 12px; }
.en .lc-leg em { font-family: var(--sans); }
.en .lc-in { padding: 10px 12px 12px; }
.en-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.en-pills .btn:not(.on) { box-shadow: inset 0 0 0 1px var(--line2); }
.en-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.en-lb { margin-bottom: 3px; }
.en-ck { display: inline-flex; align-items: center; gap: 5px; height: 24px; font-size: var(--a-m); color: var(--muted); text-transform: none; letter-spacing: 0; }
.en-ck i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: var(--r-sm); background: var(--txt-hi); font: normal 700 var(--a-s) var(--sans); color: var(--on-accent); }
.en-ck.on { color: var(--amber); }
.en-ck.on i { background: var(--amber); }
.en-note { margin-top: 8px; }
.en-copy { margin: 10px 0 2px; font: var(--a-m) var(--mono); color: var(--muted); }
/* card 8: Sheet Gen as Plate Gen, his screenshot 10-13 */
.pg { position: relative; height: 100%; perspective: 1100px; }
.pg-win { height: 100%; background: var(--bg2); }
.pg .tab { padding: 0 14px; }
.pg-in { padding: 10px 12px; }
.pg-nm { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); }
.pg-nm .field { flex: 1; }
.pg-ph { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--a-s); color: var(--dim); }
.pg-ph b { font: 700 var(--a-s) var(--mono); color: var(--txt-hi); }
.pg-sh { display: flex; align-items: center; gap: 4px; }
.pg-sh i { width: 18px; height: 24px; border-radius: var(--r-sm); background: center / cover no-repeat; }
.pg-ph .btn { margin-left: auto; }
.pg-mon { position: relative; height: 558px; border-radius: var(--r-tile); background: #000; overflow: hidden; }
.pg-mon i { position: absolute; inset: 0; background: center / contain no-repeat; transition: opacity .35s; }
.pg-ctl { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 10px; }

.pg-tc { position: absolute; left: 50%; transform: translateX(-50%); font: var(--a-m) var(--mono); color: var(--dim); }
.pg-tc b { color: var(--txt-hi); }
.pg-trim { position: relative; height: 22px; margin: 10px 0 2px; border: 2px solid var(--amber); border-width: 0 2px; }
.pg-trim i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--txt-hi); transition: left .3s; }
.pg-tl { display: flex; justify-content: space-between; margin-bottom: 4px; font: var(--a-xs) var(--mono); color: var(--dim); }
.pg-in .lc-in { padding: 10px 12px; }
.pg-in .lc-leg em { margin-left: 6px; font-family: var(--sans); }
.pg-lib { position: absolute; left: 50px; top: 110px; width: 620px; }
.pg-lib .pm-imgs .thumb { height: 118px; }
.pg-lib .pm-imgs small { font-size: var(--a-s); }
.pg-lib .pm-imgs > div.sel .thumb { outline: var(--ring); outline-offset: 1px; }
.pg-lib .cw-menu { left: 50%; top: 205px; }
.pg-take { width: 150px; padding: 6px; border: 2px solid var(--amber); border-radius: var(--r-tile); transition: box-shadow .3s; }
.pg-take.lit { box-shadow: 0 0 0 4px var(--amber-dim); }
.pg-take i { position: relative; display: block; height: 185px; border-radius: var(--r-field); background: center / cover no-repeat; }
.pg-take b { position: absolute; left: 4px; bottom: 4px; }
.pg-take em { position: absolute; right: 5px; top: 3px; font-style: normal; font-size: var(--a-m); color: var(--amber); }
.pg-take .btn { display: flex; justify-content: center; margin-top: 6px; }
.pg-tk .lc-in { position: relative; }
.pg-toast { position: absolute; left: 180px; bottom: 14px; display: flex; align-items: flex-end; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line2); border-radius: var(--r-tile); background: var(--panel); font-size: var(--a-m); color: var(--ok); opacity: 0; transition: opacity .4s; }
.pg-toast.on { opacity: 1; }
/* card 9: the Char Sheet and the Clip Gen of each clip linked to it, separate windows */
.cp { position: relative; height: 100%; perspective: 1100px; }
.cp .pw { position: absolute; background: var(--bg2); }
.cp-sheet { left: 0; top: 0; width: 640px; }
.cp-clip { top: 345px; width: 310px; box-shadow: var(--shadow-panel); }
.cp-in { padding: 10px 12px 12px; }
.cp-hd { margin-bottom: 8px; }
.cp-hd span { letter-spacing: 0; text-transform: none; color: var(--dim); }
.cp-top { display: flex; gap: 12px; margin-bottom: 10px; }
.cp-imgw { position: relative; flex: none; }
.cp-img { display: block; width: 100px; height: 100px; border: 1px solid var(--line2); border-radius: var(--r-tile); background: var(--field) center / cover no-repeat; }
.cp-it { display: flex; gap: 4px; max-width: 100px; margin-top: 3px; }
.cp-it span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-it em { font-style: normal; color: var(--dim); }
.cp-pick { position: absolute; top: 100%; left: 0; z-index: 3; min-width: 230px; margin-top: 2px; padding: 2px 0; opacity: 0; transition: opacity .3s; }
.cp-pick.on { opacity: 1; }
.cp-pick div { display: flex; align-items: center; gap: 6px; padding: 4px 8px; transition: background .2s; }
.cp-pick div.on { background: var(--panel2); }
.cp-pick i { width: 34px; height: 22px; border-radius: var(--r-sm); background: center / cover no-repeat; }
.cp-pick span { font: var(--a-m) var(--mono); color: var(--gold); }
.cp-names { flex: 1; }
.cp-names .field { margin-bottom: 8px; }
.cp-ta { margin-bottom: 6px; font-size: var(--a-m); line-height: 1.45; transition: border-color .3s; }
.cp-ta.lit, .cp-box.lit { border-color: var(--amber); }
.cp-w { border-radius: var(--r-sm); transition: background .2s, color .3s; }
.cp-w.sel { background: var(--amber-mark); }
.cp-w.new { color: var(--amber); }
.cp-refs { display: flex; gap: 8px; margin: 8px 0; }
.cp-refs div { width: 66px; }
.cp-refs i { display: block; height: 38px; border-radius: var(--r-field); background: center / cover no-repeat; transition: box-shadow .3s; }
.cp-refs .lit i { outline: var(--ring); }
.cp-refs small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* card 10: Score Generation, separate windows: the Bin and the Timeline, then Score Gen (vidancer-ui panels/ScoreCard.tsx, his screenshot 10-13) */
.sc { position: relative; height: 100%; perspective: 1100px; }
.sc .pw { position: absolute; background: var(--bg2); }
.sc-win { left: 0; top: 0; width: 640px; }
.sc-tl { left: 0; top: 330px; width: 640px; }
.sc-tl .ruler { margin-left: 96px; }
.sc-tl .trk-l { width: 96px; }
.sc-tl .playhead { left: calc(96px + (100% - 96px) * .23); }
.sc-bin { left: 40px; top: 110px; width: 300px; }
.sc-ghost { top: 0; bottom: auto; height: 34px; width: 300px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sc-blk { transition: opacity .3s, box-shadow .3s, width .5s; }
.sc-blk.lit { outline: var(--ring); }
.sc-in { padding: 10px 12px; }
.sc-hd { margin-bottom: 6px; }
.sc-in > .field { margin-bottom: 10px; }
.sc-note { margin: 8px 0; }
.sc-off { opacity: .45; }
.sc-model .en-f + .en-f { margin-top: 8px; }
.sc-bh { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sc-bh b { margin-right: auto; }
.sc-bh b em { margin-left: 8px; font-style: normal; font-weight: 400; color: var(--dim); }

.sc-b { display: none; align-items: center; gap: 6px; margin-bottom: 4px; transition: opacity .3s; }
.sc-b.on { display: flex; }
.sc-bt.off .sc-b { opacity: .55; }
.sc-b .sc-at { width: 50px; flex: none; padding: 4px 8px; }
.sc-b small { width: 34px; flex: none; font: var(--a-xs) var(--mono); color: var(--dim); }
.sc-b .sc-tx { flex: 1; min-width: 0; padding: 4px 8px; overflow: hidden; font-size: var(--a-m); text-overflow: ellipsis; white-space: nowrap; }
.sc-b svg { flex: none; color: var(--dim); }
.sc-gen { margin: 8px 0; }
.sc-take { margin-bottom: 6px; padding: 8px 10px; background: var(--panel); font-size: var(--a-m); }
.sc-take em { font-style: normal; color: var(--amber); }
.sc-take b { margin: 0 6px; color: var(--txt-hi); }
.sc-take small { color: var(--dim); }
.sc-pl { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.sc-pl i { flex: 1; height: 3px; border-radius: var(--r-sm); background: var(--line2); }
.sc-pl small { font: var(--a-s) var(--mono); }
.sc-take.on { border-color: var(--amber); }
/* card 12: Voice, separate windows: Voice Gen (his screen 10-13, vidancer-ui panels/VoicesCard.tsx), the Video Editor's lip-sync row, the SFX card */
.vo { position: relative; height: 100%; perspective: 1100px; }
.vo .pw { position: absolute; left: 0; top: 0; width: 600px; background: var(--bg2); }
.vo .pw.vo-ve { top: 120px; }
.vo .pw.vo-fx { top: 636px; } /* the last chapter shows the card's end: the SFX card sits there */
.vo-in { padding: 10px 12px; }
.vo-nm { display: flex; gap: 8px; margin-bottom: 6px; }
.vo-nm .field { flex: 1; }
.vo-bd { margin-bottom: 10px; font-size: var(--a-s); color: var(--gold); }
.vo-mono { font: var(--a-m)/1.5 var(--mono); transition: border-color .3s; }
.vo-desc.lit, .vo-cl.lit, .vo-lr.lit { border-color: var(--amber); }
.vo-refs { display: flex; gap: 14px; margin: 10px 0; }
.vo-refs i { display: block; width: 148px; height: 148px; border: 1px solid var(--line2); border-radius: var(--r-tile); background: center / cover no-repeat; }
.vo-refs small { display: block; margin-top: 3px; }
.vo-cl { display: grid; place-items: center; width: 148px; height: 148px; border: 1px dashed var(--line2); border-radius: var(--r-tile); font-size: var(--a-s); text-align: center; color: var(--dim); transition: border-color .3s; }
.vo-cl b { display: block; font-size: var(--a-head); font-weight: 400; color: var(--txt-hi); }
.vo-gen { display: flex; gap: 6px; margin-top: 10px; }
.vo-gen .btn:first-child { flex: 1; justify-content: center; }
.vo-pic { height: 315px; background: #000 center / cover no-repeat; }
.vo-lip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 10px 12px 12px; }
.vo-mo { margin-top: 8px; opacity: 0; transition: opacity .3s; }
.vo-mo.on { opacity: 1; }
/* card 14: Plan Mode, the Co-Director room with a plan (vidancer-ui DirectorsRoom.tsx, CodirPlanStatus.tsx, RanTools.tsx) */
.pl { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bg0); }
.pl-hd { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pl-hd .lb { margin: 0 auto 0 0; }

.pl-st { flex: none; padding: 6px 10px; font-size: var(--a-m); border-bottom: 1px solid var(--line); color: var(--body); transition: opacity .4s; }
.pl-st.off { opacity: 0; }
.pl-st > div:first-child { display: flex; align-items: center; gap: 8px; }
.pl-st strong { color: var(--txt-hi); }
.pl-st .btn { margin-left: auto; }
.pl-run { color: var(--amber); font: var(--a-s) var(--mono); }
.pl-sum { margin-top: 4px; color: var(--muted); }
.pl-sum::before { content: "▸ "; }
.pl-st.open .pl-sum::before { content: "▾ "; }
.pl-det { max-height: 0; overflow: hidden; white-space: pre-wrap; line-height: 1.5; }
.pl-st.open .pl-det { max-height: 300px; }
.pl-det p { margin: 6px 0 0; }
.pl-det small { color: var(--dim); font: var(--a-xs) var(--mono); }
.pl-b { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 10px; }
.pl-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding-bottom: 10px; font-size: var(--a-m); line-height: 1.55; color: var(--body); }
.pl-chat::before { content: ""; flex: 1 0 0; }
.pl-chat .msg { flex: none; }
.pl-chat .msg.off { display: none; }
/* at rest (the closed card's tile, which shows the window's top left): the room mid-project, the chat from its top, a take up on the
   Screen near the top on the chat's left (the room seeds it left or right) */
.pl.rest .pl-chat::before { display: none; }
.pl.rest .pl-st { display: none; }
.pl.rest .pl-b { flex-direction: row-reverse; }
.pl.rest .pl-scr { align-self: flex-start; margin: 14px 0 0; transform: rotate(-1.6deg); }
.pl-chat .msg:not([data-i]) .tools div { opacity: 1; transform: none; }
.pl-busy { flex: none; font: var(--a-s) var(--mono); color: var(--amber); }
.pl-busy:empty { display: none; }

.pl-chat .tools div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-scr { width: 236px; flex: none; align-self: flex-end; margin-bottom: 16px; padding: 7px; border: 1px solid var(--line2); border-radius: var(--r-surface); background: var(--raised); box-shadow: var(--shadow-float);
  transform: rotate(1.6deg); opacity: 0; transition: opacity .45s; }
.pl-scr.on { opacity: 1; }
.pl-scr .pl-v { display: none; }
.pl-scr .pl-v.on { display: block; }
.pl-cap { display: flex; gap: 7px; padding: 6px 4px 2px; font: var(--a-s) var(--mono); color: var(--txt-hi); }
.pl-cap::before { content: "▣"; color: var(--amber); }
.pl-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pl-refs > div { opacity: 0; transform: scale(.94); transition: opacity .35s, transform .35s; }
.pl-refs > div.on { opacity: 1; transform: none; }
.pl-refs i, .pl-tk i { display: block; border-radius: var(--r-tile); background: #000 center / cover no-repeat; }
.pl-refs i { aspect-ratio: 1; }
.pl-refs small { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.pl-tk { position: relative; }
.pl-tk i { aspect-ratio: 16 / 9; border-radius: var(--r-win); }
.pl-tk .scan { position: absolute; top: 0; height: 0; width: 2px; opacity: 0; }
.pl-tk .scan.on { height: calc(100% - 22px); opacity: 1; }
.pl-tl { display: flex; flex-direction: column; gap: 4px; }
.pl-tl > span { font: var(--a-xs) var(--mono); color: var(--dim); }
.pl-tl > div { display: flex; gap: 2px; height: 42px; }
.pl-tl i { border-radius: var(--r-sm); background: #000 center / cover no-repeat; opacity: 0; transition: opacity .35s, outline-color .35s; outline: 2px solid transparent; outline-offset: -2px; }
.pl-tl i.on { opacity: 1; }
.pl-tl i.fix { outline-color: var(--bad); }
.pl-tl i.new { outline-color: var(--ok); }
/* card 13: Image Gen, his screen 10-13 (vidancer-ui panels/ImageGen.tsx, ImageGenSidebar.tsx) */
.ig { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bg0); }
.ig-b { flex: 1; min-height: 0; display: flex; }
.ig-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ig-pic { position: relative; flex: none; height: 236px; background: #000 center / contain no-repeat; }
.ig-cap { position: absolute; left: 8px; top: 6px; }
.ig-hbs { position: absolute; right: 8px; top: 6px; }
.ig-s { flex: 1; min-height: 0; overflow: hidden; padding: 8px 10px 0; }
.ig-s .lc-sec { margin-bottom: 8px; }
.ig-s .lc-in { padding: 8px 10px; }
.ig-refs { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.ig-refs .lc-chk { margin: 2px 0 0; }
.ig-ref { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.ig-ref > span { display: grid; place-items: center; width: 72px; height: 72px; border: 1px dashed var(--line2); border-radius: var(--r-btn); background: var(--field); }
.ig-ref i { display: block; width: 64px; height: 64px; border-radius: var(--r-sm); background: center / cover no-repeat; }
.ig-ref small { position: absolute; left: 0; top: 76px; width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-ref .field { width: 26px; padding: 3px 5px; font: var(--a-m) var(--mono); }
.ig-refs .cw-png { margin: 0 0 0 auto; height: 72px; }
.ig-w { margin: 14px 0 6px; font: var(--a-xs) var(--mono); color: var(--amber); }

.ig-pt { height: 58px; overflow: hidden; padding: 6px 8px; font: var(--a-s)/1.5 var(--mono); white-space: pre-line; }
.ig-s .en-f { gap: 8px; }
.ig-s .dd { padding: 5px 8px; font-size: var(--a-m); }

.ig-un { display: inline-flex; align-items: center; gap: 5px; }
.ig-un > i { width: 12px; height: 12px; border-radius: var(--r-sm); background: var(--amber); color: var(--on-accent); font: normal 700 var(--a-xs)/12px var(--sans); text-align: center; }
.ig-tks { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-t { position: relative; display: flex; flex-direction: column; gap: 2px; width: 90px; padding: 4px; border: 2px solid var(--line2); border-radius: var(--r-tile); background: var(--bg2); transition: border-color .3s; }
.ig-t.sel { outline: var(--ring); outline-offset: 2px; }
.ig-pc:empty { display: none; }
.ig-t i { display: block; height: 48px; border-radius: var(--r-sm); background: #000 center / cover no-repeat; }
.ig-t > span { display: flex; align-items: baseline; gap: 4px; font-size: var(--a-m); color: var(--txt-hi); }
.ig-t > span em { font-style: normal; color: var(--amber); }
.ig-t > span small { margin-left: auto; font: var(--a-xs) var(--mono); color: var(--dim); }
.ig-t > small { overflow: hidden; font-size: var(--a-xs); color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.ig-gen { flex: none; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg2); }
.ig-gen > div { display: flex; gap: 6px; }
.ig-gen .btn { justify-content: center; }
.ig-go { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.ig-st { margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-side { width: 250px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg2); }
.ig-id { padding: 8px; border-bottom: 1px solid var(--line); }
.ig-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ig-hd .lb { flex: 1; }
.ig-id .field { padding: 5px 8px; }
.ig-ib { display: flex; gap: 6px; margin-top: 6px; }
.ig-zm { position: relative; width: 64px; height: 4px; border-radius: var(--r-sm); background: var(--range-off); }
.ig-zm::after { content: ""; position: absolute; right: 0; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--range-on); }
.ig-lh { padding: 8px 8px 4px; border-bottom: 1px solid var(--line); }
.ig-lh .cw-tabs { margin: 0 0 6px; }
.ig-lh .lc-tabs { margin: 6px 0 2px; }
.ig-list { flex: 1; min-height: 0; overflow: hidden; }
.ig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 2px 5px 6px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; transition: border-color .3s; }
.ig-row.on { border-left-color: var(--amber); }
.ig-row > i { width: 150px; height: 150px; flex: none; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--field) center / cover no-repeat; }
.ig-rb { flex: 1 1 100%; min-width: 0; }
.ig-rb.lo { display: flex; align-items: center; gap: 8px; }
.ig-rb.lo > div { flex: 1; min-width: 0; }
.ig-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; font: var(--a-xs) var(--mono); color: var(--dim); }
.ig-meta b { font-weight: 400; color: var(--muted); }
.ig-meta em { font-style: normal; color: var(--amber); }

.ig-ra { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: var(--a-s) var(--mono); color: var(--muted); }
.ig-menu { min-width: 250px; }
.ig-menu i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--r-sm); vertical-align: -1px; }
.ig-menu .bad { color: var(--bad); }
.ig-toast { left: 50%; bottom: 74px; transform: translateX(-50%); padding: 8px 12px; white-space: nowrap; }
/* card 11: APIs, the Settings window's Connections (his screenshots 10-13) */
.ap { display: flex; flex-direction: column; height: 100%; background: var(--bg2); }
.ap-hd { display: flex; align-items: center; gap: 8px; padding: 16px 18px; font-size: var(--a-title); font-weight: 700; color: var(--txt-hi); }
.ap-hd .btn { margin-left: auto; padding: 4px 12px; }
.ap-bd { display: flex; flex: 1; min-height: 0; margin: 0 18px; border-bottom: 1px solid var(--line); }
.ap-nav { flex: none; width: 150px; padding-right: 12px; border-right: 1px solid var(--line); }
.ap-nav div { margin-bottom: 6px; padding: 7px 10px; border-radius: var(--r-field); font-size: var(--a-l); color: var(--txt); }
.ap-nav div.on { background: var(--amber-tint); box-shadow: inset 2px 0 var(--amber); color: var(--amber); }
.ap-c { flex: 1; min-width: 0; padding: 0 0 14px 22px; }
.ap-c h3 { margin: 6px 0 4px; font-size: var(--a-head); color: var(--txt-hi); }
.ap-c p { margin: 0 0 14px; }
.ap-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.ap-tabs .btn { padding: 8px 11px; font-weight: 500; }
.ap .btn.tg { box-shadow: inset 0 0 0 1px var(--line2); }
.ap-lb { text-transform: none; letter-spacing: 0; font-size: var(--a-l); color: var(--txt); }
.ap-sel { margin-bottom: 14px; }
.ap-row { margin-bottom: 12px; background: var(--panel); transition: border-color .3s; }
.ap-row.lit { border-color: var(--amber); }
.ap-rh { display: flex; align-items: center; padding: 11px 12px; }
.ap-rh b, .ap-sub b { display: block; }
.ap-rh small, .ap-sub small { display: block; }
.ap-rh .btn { margin-left: auto; }
.ap-x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s; }
.ap-x > div { overflow: hidden; min-height: 0; }
.ap-row.open .ap-x { grid-template-rows: 1fr; }
.ap-sub { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ap-sub .btn:first-of-type { margin-left: auto; }

.ap-cr { transition: color .3s; }
.ap-cr.lit { color: var(--amber); }
.ap-foot .btn { margin-top: 12px; padding: 8px 52px; }
.ap-bar { padding: 12px 18px; }
.cp-box { padding: 8px 10px; font-size: var(--a-m); line-height: 1.45; color: var(--body); transition: border-color .3s; }
.pg-toast i { width: 120px; height: 160px; border-radius: var(--r-field); background: center / cover no-repeat; }
/* cards not built yet: a generic UI element, no pictures */
.gblk { border-radius: var(--r-tile); background: var(--panel2); }
.gln { height: 8px; margin-top: 10px; border-radius: var(--r-field); background: var(--panel); }

/* ---------- app panels ---------- */
.panel { position: absolute; opacity: 0; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
  box-shadow: var(--shadow-panel); font-family: var(--sans); color: var(--txt); font-size: var(--a-l); transform-origin: 50% 50%; backface-visibility: hidden; }
.tabs { height: 34px; display: flex; background: var(--bg0); border-bottom: 1px solid var(--line); }
.tab { display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--dim); font-size: var(--a-xl); }
.tab.on { color: var(--txt-hi); background: var(--bg2); }
.tab i { font-style: normal; font-size: var(--a-xl); color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 5px; background: var(--amber); color: var(--on-accent); font-weight: 700; font-size: var(--a-m);
  padding: 6px 11px; border-radius: var(--r-btn); white-space: nowrap; line-height: 1.1; }
.btn.dim { background: var(--amber-dim); }
/* a toggle (the app's lit pair: local | civit, the Image Editor's tools): dark, amber when on */
.btn.tg { font-weight: 500; background: var(--bg2); color: var(--txt); transition: background .3s, color .3s; }
.btn.tg.on { background: var(--amber); color: var(--on-accent); }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip em { font-style: normal; color: var(--dim); }

.lb em { font-style: normal; color: var(--dim); margin-left: 4px; }
.pad { padding: 12px; }
.row { display: flex; align-items: center; gap: 6px; }
.grow { flex: 1; }
.box { border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bg); }
.thumb { background: #000 center / cover no-repeat; border-radius: var(--r-sm); }

/* menu bar */
#p-menu { background: var(--header); border-color: #111; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
#p-menu .app { font-weight: 700; font-size: var(--a-xl); color: var(--txt-hi); margin-right: 8px; }
#p-menu .proj { font-family: var(--mono); font-size: var(--a-m); color: var(--muted); margin-left: 4px; }
#p-menu .work { width: 200px; justify-content: center; margin: 0 auto; }

/* bin */
.tiles { display: grid; grid-template-columns: repeat(6, 62px); gap: 6px; margin-top: 10px; }
.tile { padding: 3px; background: var(--panel); }
.tile.on { outline: var(--ring); outline-offset: -1px; }
.tile .thumb { height: 38px; }
.tile b { display: block; font-weight: 500; font-size: var(--a-l); color: var(--txt); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { display: block; font-size: var(--a-xs); color: var(--dim); }
.details { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: var(--raised); border-top: 1px solid var(--line); line-height: 1.5; font-size: var(--a-m); color: var(--body); }
.details b { color: var(--txt-hi); }

/* monitor: transparent where the film sits */
#p-monitor { background: transparent; border-color: var(--line); }
.mon-top { height: 112px; background: #000; }
.mon-hole { height: 358px; }
.mon-bot { height: 165px; background: #000; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 10px; }
.mon-bot .row { justify-content: center; position: relative; }
.mon-bot .right { position: absolute; right: 0; display: flex; gap: 6px; }
.tc { font-family: var(--mono); font-size: var(--a-l); color: var(--txt-hi); text-align: center; margin-top: 8px; letter-spacing: .02em; }
.tc em { font-style: normal; color: var(--dim); font-size: var(--a-m); }

/* clip gen: the docked window shows the top; lifted, it opens to full length */
.field { padding: 6px 9px; font-size: var(--a-l); color: var(--txt-hi); }
.sec { margin-top: 16px; }
.cg-prev { position: relative; height: 210px; margin-top: 10px; border-radius: var(--r-field); overflow: hidden; background: #000; }
.cg-prev video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.cg-prev video.on { opacity: 1; }
.take.click, .btn.click, .vnode.click, .cw-menu div.click, .clp.click, .fx-chips span.click, .cp-img.click, .cp-pick div.click { animation: tclick .5s ease-out; }
@keyframes tclick { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--amber); } 30% { transform: scale(.93); } 100% { transform: scale(1); box-shadow: 0 0 0 10px transparent; } }
.strip { position: relative; display: flex; gap: 2px; height: 24px; margin-top: 8px; padding: 0 2px; border-left: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.strip .thumb { flex: 1; border-radius: 0; }
.strip .ph { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; left: 0; }
.strip-l { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--a-xs); color: var(--dim); margin-top: 3px; }
.takes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.take { padding: 4px; background: var(--panel); }
.take.cur { outline: var(--ring); outline-offset: -1px; }
.take .thumb { height: 50px; }
.take .t { display: flex; justify-content: space-between; font-size: var(--a-m); margin-top: 4px; font-weight: 700; }
.take .t em { font-style: normal; font-weight: 400; color: var(--dim); font-size: var(--a-xs); }
.take small { display: block; font-size: var(--a-xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take.sb { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--dim); font-family: var(--mono); font-size: var(--a-xl); font-weight: 700; }
.take.sb small { font-weight: 400; text-align: center; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.mgrid .lb, .dials .lb { margin-bottom: 4px; }
.dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; font-size: var(--a-l); color: var(--txt-hi); white-space: nowrap; transition: border-color .3s; }
.dd::after { content: "▾"; color: var(--muted); font-size: var(--a-s); }
.dd.open { border-color: var(--amber); }
.modes { display: flex; gap: 4px; margin-top: 10px; }

.modes .on { background: var(--amber); border-color: var(--amber); color: var(--on-accent); font-weight: 700; }
.dials { display: flex; gap: 10px; margin-top: 10px; }
.dials > div { flex: 1; }
.refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.ref { display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--panel2);
  font-size: var(--a-m); color: var(--txt-hi); animation: refbob 4.5s ease-in-out infinite; }
.ref .thumb { width: 22px; height: 22px; border-radius: 50%; }
@keyframes refbob { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-3px) rotate(calc(var(--r) * -1)); } }
.ptext { padding: 9px 10px; font-size: var(--a-l); line-height: 1.6; color: var(--body);
  -webkit-mask: linear-gradient(#000 calc(var(--rev, 1) * 100%), transparent calc(var(--rev, 1) * 100% + 30px)); }
.ptext b, .gen b.at { color: var(--amber); font-weight: 600; }
.gen { margin-top: 8px; padding: 9px 10px; font-family: var(--mono); font-size: var(--a-s); line-height: 1.6; color: var(--muted); }
.gen p + p { margin-top: 6px; }
.gen i { font-style: normal; color: var(--txt); }
.band { display: flex; gap: 1px; height: 18px; border-radius: var(--r-field); overflow: hidden; margin-top: 8px; }
.band span { font: var(--a-xs)/12px var(--mono); color: #000; padding: 3px 5px; overflow: hidden; white-space: nowrap; }
.beat { display: grid; grid-template-columns: 5px 1fr; gap: 9px; padding: 8px; margin-top: 6px; background: var(--panel); opacity: .4; transition: opacity .5s, border-color .5s; }
.beat.lit { opacity: 1; border-color: var(--line2); }
.beat i { border-radius: var(--r-sm); }

.beat b em { font-style: normal; font-weight: 400; font-family: var(--mono); font-size: var(--a-s); color: var(--dim); margin-left: 6px; }
.beat p { font-size: var(--a-m); color: var(--body); line-height: 1.45; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.beat p.cam { color: var(--muted); -webkit-line-clamp: 1; }
/* a window's bottom bar, pinned (Clip Gen, Co-Director) */
.cg-foot, .cd-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: var(--raised); border-top: 1px solid var(--line); }
.render { position: relative; display: flex; gap: 6px; }
/* the big buttons: Render, Generate and the Queue beside them */

.render .btn:first-child { flex: 1; justify-content: center; text-align: center; white-space: normal; }

/* bridge */
.br-pool { padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.br-pool .hd { display: flex; align-items: baseline; gap: 10px; }

.br-pool .live { margin-left: auto; font: var(--a-m) var(--mono); color: var(--dim); }
.br-est { display: flex; gap: 14px; margin-top: 6px; font: var(--a-xl) var(--mono); }
.br-est b { color: var(--txt-hi); }
.br-est em, .br-est small { font-style: normal; color: var(--dim); }
.br-est small { font-size: var(--a-s); align-self: flex-end; }
.br-bar { display: flex; height: 26px; margin: 16px 0 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--bg0); border: 1px solid var(--line); }
.br-bar i { display: block; border-right: 1px solid var(--bg0); }
.br-legend { display: flex; gap: 14px; flex-wrap: wrap; font: var(--a-s) var(--mono); color: var(--txt); }
.br-legend span { display: flex; align-items: center; gap: 5px; }
.br-legend em, .br-row .pc { font-style: normal; color: var(--dim); }
.mk { width: 12px; height: 12px; border-radius: var(--r-sm); background: center / cover; flex-shrink: 0; }
.br-ledger { padding: 14px 16px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.br-row { display: flex; align-items: center; gap: 10px; }
.br-row .mk { width: 16px; height: 16px; border-radius: var(--r-field); }
.br-row .nm { width: 72px; font: var(--a-m) var(--mono); color: var(--txt-hi); letter-spacing: .5px; flex-shrink: 0; }
.br-row .cr { width: 130px; font: var(--a-m) var(--mono); color: var(--txt-hi); flex-shrink: 0; }
.br-row .track { flex: 1; height: 6px; border-radius: var(--r-sm); background: var(--bg0); border: 1px solid var(--line); overflow: hidden; }
.br-row .track i { display: block; height: 100%; background: var(--amber); }
.br-row.dead { opacity: .45; }
.br-row .pc { width: 34px; text-align: right; font: var(--a-s) var(--mono); flex-shrink: 0; }
.br-logins { padding: 10px; }
.login { margin-bottom: 8px; background: var(--raised); transition: border-color .4s, box-shadow .4s; }
.login.lit { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-dim); }
.login .lr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.login .logo { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-field); background: center / cover; flex-shrink: 0; }
.login .nm { width: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.login .site { font: var(--a-m) var(--mono); color: var(--amber); }
.login .st { flex: 1; min-width: 0; font-size: var(--a-m); color: var(--ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login .st em { font-style: normal; color: var(--dim); }
.login .st.off { color: var(--dim); }
.add { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.add.open { max-height: 130px; }
.add > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); font-size: var(--a-m); color: var(--txt-hi); }
.add > div > span:first-child { flex: 1 1 260px; }
.br-foot { padding: 6px 4px; line-height: 1.5; }

/* co-director */
.cd-llm { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 7px 9px; font-size: var(--a-m); color: var(--txt-hi); }
.cd-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.chat { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: var(--a-m); line-height: 1.55; color: var(--body); }
.msg { padding: 9px 11px; background: var(--panel); }
.msg.me { align-self: flex-end; max-width: 86%; background: color-mix(in srgb, var(--amber) 16%, var(--panel)); color: var(--txt-hi); }
.msg p + p { margin-top: 8px; }
.msg .tools { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line); font: var(--a-xs)/1.45 var(--mono); color: var(--dim); }
.msg .tools div { opacity: 0; transform: translateY(3px); transition: opacity .35s, transform .35s; }
.msg .tools div.on { opacity: 1; transform: none; }
.watch { position: relative; display: flex; gap: 2px; margin-bottom: 7px; }
.watch .thumb { flex: 1; height: 34px; border-radius: var(--r-sm); }
.watch .scan { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; margin-left: -1px; opacity: 0; transition: opacity .3s; }
.mtext { -webkit-mask: linear-gradient(#000 calc(var(--rev, 1) * 100%), transparent calc(var(--rev, 1) * 100% + 24px)); }
.mact { margin-left: 6px; color: var(--amber); letter-spacing: .04em; }
.mfold { max-height: 0; overflow: hidden; transition: max-height .6s ease; }
.mfold.open { max-height: 220px; }
.mchips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 0 6px; }
.mchip { font: var(--a-xs)/1 var(--mono); padding: 5px 8px; border: 1px solid var(--line2); border-radius: var(--r-pill); color: var(--body); white-space: nowrap; }
.mchip.on { background: var(--amber); border-color: var(--amber); color: var(--on-accent); font-weight: 700; }
.mrow { display: flex; gap: 5px; padding-bottom: 6px; }

.moods i { transition: opacity .3s; }
.opt em { font-style: normal; color: var(--dim); margin-left: 7px; font-size: var(--a-m); }
.moods { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.moods span { font-family: var(--mono); font-size: var(--a-xs); color: var(--dim); margin-right: auto; }
.moods i { font-style: normal; font-family: var(--mono); font-size: var(--a-xs); color: #000; width: 22px; text-align: center; border-radius: var(--r-sm); }
.cd-in { margin-top: 8px; font-family: var(--mono); font-size: var(--a-s); color: var(--dim); padding: 7px 8px; line-height: 1.4; }

/* timeline */
.tl-sub { height: 26px; display: flex; align-items: flex-end; padding-left: 6px; border-bottom: 1px solid var(--line); }
.tl-sub span { font-size: var(--a-m); padding: 4px 10px; border: 1px solid var(--line); border-bottom: none; border-radius: var(--r-field) var(--r-field) 0 0; background: var(--bg2); }
.tl-tools { height: 28px; display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: var(--a-m); color: var(--muted); }

.tl-tools .tc { margin: 0 0 0 auto; font-size: var(--a-m); }
.tl-area { position: relative; }
.ruler { height: 16px; margin-left: 120px; position: relative; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px 29.6px) 0 100% / 100% 5px no-repeat, color-mix(in srgb, var(--amber) 14%, var(--bg)); }
.ruler span { position: absolute; top: 2px; font-family: var(--mono); font-size: var(--a-xs); color: var(--muted); padding-left: 3px; border-left: 1px solid var(--line2); line-height: 12px; }
.trk { display: flex; border-bottom: 1px solid var(--bg0); }
.trk.v { height: 40px; } .trk.a { height: 45px; } .trk.s { height: 44px; } .trk.sep { height: 6px; background: var(--bg0); }
.trk-l { width: 120px; flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding-left: 8px; font-family: var(--mono); font-size: var(--a-s); font-weight: 700; color: var(--txt-hi); background: var(--raised2); border-right: 1px solid var(--line); }
.trk-l b { width: 26px; } .trk.s .trk-l b { color: var(--score); }
.trk-l i { font-style: normal; width: 14px; height: 13px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: var(--a-xs); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.trk-b { position: relative; flex: 1; }
.clp { position: absolute; top: 4px; bottom: 4px; border-radius: var(--r-field); overflow: hidden; font-size: var(--a-xs); color: #fff; white-space: nowrap; }
.clp span { position: relative; padding: 2px 5px; display: block; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.clp.v { background: var(--panel2) left center / auto 100% repeat-x; border: 1px solid var(--amber-dim); }
.clp.v i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--b1), var(--b3), var(--b4), var(--b2)); }
.clp.a, .clp.s { --c: var(--music); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #fff) 0 1px, transparent 1px 3px) 0 55% / 100% 50% no-repeat,
  color-mix(in srgb, var(--c) 55%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 80%, #000); color: color-mix(in srgb, var(--c) 30%, #fff); }
.clp.a.link { --c: var(--alink); }
.clp.s { --c: var(--score); background-color: color-mix(in srgb, var(--c) 38%, var(--bg)); }
.clp { transition: width .45s, transform .45s, opacity .35s; }
.clp.sel { outline: var(--ring); outline-offset: -1px; }
.clp.cut::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 55%; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; }
.nestblk { position: absolute; top: 4px; bottom: 4px; border-radius: var(--r-field); border: 1px solid var(--alink); opacity: 0; transition: opacity .35s; font-size: var(--a-xs); color: #fff; padding: 2px 6px; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--alink) 40%, var(--bg2)), color-mix(in srgb, var(--alink) 18%, var(--bg2))); }
.trk { transition: opacity .4s; }
.trk.dim { opacity: .22; }
.trk.s.glow .clp { box-shadow: 0 0 0 1px var(--score), 0 0 18px color-mix(in srgb, var(--score) 60%, transparent); }
.trk.s.glow .trk-l b { text-shadow: 0 0 8px var(--score); }
.lfcard { position: absolute; left: 0; top: 0; opacity: 0; width: 170px; padding: 6px; border-radius: var(--r-tile); background: var(--panel); border: 1px solid var(--amber); box-shadow: var(--shadow-pop); font: var(--a-s)/1.4 var(--mono); color: var(--txt-hi); }
.lfcard .thumb { height: 86px; margin-bottom: 6px; }
.lfcard em { display: block; font-style: normal; color: var(--amber); opacity: 0; transition: opacity .4s; }
.lfcard.next em { opacity: 1; }
.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--amber); left: 120px; }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top-color: var(--amber); }

/* hint bar */
#p-hint { background: var(--bg0); font-family: var(--mono); font-size: var(--a-s); color: var(--dim); padding: 4px 10px; white-space: nowrap; }

/* ---------- SHARED STYLES (his brief: one copy of each look; every panel and card UI uses these, a new one adds its selector here) ---------- */
/* the app's label: small mono capitals (a field's name, a section's legend, a list's heading) */
.lb, .lc-sub, .lc-leg, .lc-wl > span:first-child, .pm-pl, .pm-lb, .fx-hd, .en-lb, .sc-gen, .lc-ttl, .en-hd b, .pm-st, .cp-hd, .sc-hd, .br-pool .tp, .pl-hd .lb { font: var(--a-s) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* the app's amber heading: the label in amber (a window's or a section's name) */
.lb.hd, .lc-ttl, .en-hd b, .pm-st, .cp-hd, .sc-hd, .br-pool .tp, .pl-hd .lb { color: var(--amber); }
/* a chip: a bordered mono choice or reading */
.chip, .modes span, #p-menu .spend { padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--r-field); font: var(--a-m) var(--mono); color: var(--body); white-space: nowrap; }
/* a tag: a small bordered mono word (a licence, a size, a trigger word) */
.lc-chip, .cw-words span, .ig-meta b, .ig-meta em, .ig-w span { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-field); font: var(--a-s) var(--mono); white-space: nowrap; }
/* a note: a small line that explains or reports (.note for a new one) */
.note, .br-row .note, .en-note, .sc-note, .sc-none, .vo-mo, .fx-none, .fx-hint, .pm-note, .ap-bar, .ap-foot, .ap-c p, .br-foot, .ig-st, .lc-blurb, .cw-wait, .ap-rh small, .ap-sub small { font-size: var(--a-m); color: var(--muted); }
/* an item's title: a row's, a beat's, a login's name */
.en-hd span, .sc-bh b, .beat b, .login .nm, .ap-rh b, .ap-sub b { font: 600 var(--a-l) var(--sans); color: var(--txt-hi); }
/* a reference's name under its picture (@name) */
.cp-it, .cp-refs small, .vo-refs small, .pl-refs small, .ig-ref small { font: var(--a-xs) var(--mono); color: var(--gold); }
/* a caption on a picture */
:is(.ve-prev, .ie-canvas) .vcap, .ig-cap, .pg-take b { padding: 2px 6px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .6); font: var(--a-s) var(--mono); color: var(--txt-hi); }
/* a picture's toolbar, over its top right */
.ie-tools, .ig-hbs { display: flex; gap: 5px; padding: 3px 5px; border-radius: var(--r-btn); background: rgba(0, 0, 0, .55); }
/* a popup list (a right-click menu, a picker) */
.cw-menu, .cp-pick { border: 1px solid var(--line2); border-radius: var(--r-tile); background: var(--bg2); box-shadow: var(--shadow-pop); }
/* a field: a text box or a dropdown */
.field, .pm-in, .cp-box, .lc-search, .dd { border: 1px solid var(--line); border-radius: var(--r-field); background: var(--field); }
/* a box: a bordered block inside a panel (a message, a take, a row, a login) */
.msg, .sc-take, .fx-row, .login, .ap-row, .beat, .lc-in, .take, .tile { border: 1px solid var(--line); border-radius: var(--r-tile); }
/* a scan line: the amber line that runs while the app reads a picture */
.fx-pic .fx-line, .watch .scan, .pl-tk .scan { background: var(--amber); box-shadow: var(--glow); }
/* the small button (a bar's or a row's); the mono one (tabs, a row's action); the big one (Render, Generate) */
.cd-btns .btn, .tl-tools .btn, .mrow .btn, .fx-d .btn, .en-ctl .btn, .pg-ctl .btn, .sc-pl .btn, .pl-hd .btn, .pl-st .btn, .ie-tools .btn, .cw-act .btn, .cw-wh .btn, .cw-tabs .btn, .ig-rb .btn, .btn.hb, .ig-s .lc-chips .btn.hb { padding: 4px 9px; }
.mrow .btn, .pl-hd .btn, .pl-st .btn, .ie-tools .btn { font-size: var(--a-s); }
.btn.hb, .cw-act .btn, .cw-wh .btn, .cw-tabs .btn, .ig-rb .btn { font: 500 var(--a-s) var(--mono); }
.render .btn, .btn.vgen, .ie-foot .btn, .vo-gen .btn:first-child, .ig-gen .btn { padding: 9px 12px; font-size: var(--a-m); }

/* ---------- THE PHONE (his call 10-15, from first principles): its own flat page, read top to bottom (phStart() in the script). The 3D
   page is hidden and never starts ---------- */
html.ph :is(#scroll, #stage, #front, #fmap) { display: none; }
html:not(.ph) #ph { display: none; }
html.ph #site-nav .ni { opacity: 1; }
html.ph .links a:not(.pill) { display: none; } /* a phone on its side too: the download, no section links */
#ph { --u: 1px; --k: 1; --kt: 1; --s: 1; --dl-cta: 26px; --cn-name: 20px; --cn-mark: 30px; --cn-mark-s: 16px; --ph-win: 52svh; } /* the frames' shared rules at a phone's own sizes */
:where(#ph) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#ph .rise .m + .m > span { --d: .08s; }
#ph .rise .m + .m + .m > span { --d: .16s; }
/* the film full screen, the intro's words at its foot on a rising black */
.ph-hero { position: relative; height: 100svh; overflow: hidden; }
.ph-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ph-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(color-mix(in srgb, var(--site-bg) 0%, transparent), var(--site-bg) 88%); }
.ph-hero header { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 40px; }
.ph-hero .m + .m { margin-top: 8px; }
.ph-hero .big { font-size: var(--ttl-hero); }
html.ph #site-nav .still { display: none; }
.ph-hero .still { position: absolute; z-index: 2; right: 20px; top: 96px; font: 400 var(--t-nav)/1 var(--site-mono); }
/* a feature (his ask 10-16, V3 of the phone review): a row of windows onto its real panel, one per title, swiped sideways with the next one
   peeking; marks under it; below, the title of the window the row rests on. The Timeline: its whole strip in one window, swiped */
.ph-feat { padding-top: 96px; display: grid; gap: 16px; }
.ph-feat > * { min-width: 0; }
.ph-car, .ph-tlx { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
:is(.ph-car, .ph-tlx)::-webkit-scrollbar { display: none; }
.ph-car { display: flex; gap: 10px; padding: 0 20px; scroll-padding: 0 20px; scroll-snap-type: x mandatory; }
.ph-sl { position: relative; flex: none; width: calc(100% - 12px); height: var(--ph-win); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--surface-line); border-radius: var(--r-field); }
.ph-ui { position: absolute; left: 0; top: 0; }
.ph-ui .panel { box-shadow: none; }
.ph-tlx { height: var(--ph-win); -webkit-mask: linear-gradient(90deg, #000 86%, transparent); mask: linear-gradient(90deg, #000 86%, transparent); }
.ph-dots { display: flex; gap: 6px; padding: 0 20px; }
.ph-dots i { width: 18px; height: 2px; background: color-mix(in srgb, var(--site-txt) 22%, transparent); transition: background .25s; }
.ph-dots i.on { background: var(--amber); }
.ph-band { position: relative; margin: 0 20px; }
.ph-t { position: absolute; left: 0; right: 0; top: 0; }
.ph-t .m + .m { margin-top: 8px; }
/* the sections: a title, then the cards as a short list, Connections' rows, the way to get it; the footer flat */
.ph-sec { padding: 120px 20px 0; }
.ph-sec > header .m + .m { margin-top: 10px; }
.ph-list { list-style: none; margin-top: 28px; }
.ph-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--surface-line); }
.ph-list li > .m { padding-top: .3em; }
.ph-list .line { margin-top: 4px; font: 400 var(--cl-line)/1.35 var(--site-font); }
.ph-rows { margin: 40px -20px 0; }
.ph-row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ph-row + .ph-row { margin-top: 20px; }
.ph-row > div { display: flex; width: max-content; animation: ph-drift 60s linear infinite; }
.ph-row.cn-models > div { animation-direction: reverse; }
@keyframes ph-drift { to { transform: translateX(-50%); } }
#ph .cn-it { margin-right: 36px; gap: 10px; }
#ph .cn-models .cn-it { margin-right: 26px; gap: 8px; font-size: 12px; }
.ph-get { margin-top: 28px; }
.ph-get .m + .m { margin-top: 12px; }
#ph .dl-btn { --dl-w: 100%; padding: .8em .9em; }
.ph-get :is(.dl-meta, .dl-minor) { display: block; }
.ph-get .dl-minor { margin-top: 10px; }
#ph .foot { margin-top: 120px; }
@media (prefers-reduced-motion: reduce) { .ph-row > div { animation: none; } .ph-row { overflow-x: auto; } .ph-dots i { transition: none; } }