/* Rolling Now Cinema Studio (admin beta). Layout: top bar / left rail / shot grid / floating prompt dock. Own look: Rolling dark + white accents, Cairo. */
html.cs-open, html.cs-open body { overflow: hidden !important; }
#cs-app { position: fixed; inset: 0; z-index: 2147482000; background: #0a0a0c; color: #eef0f4; display: flex; flex-direction: column; font-family: "RN Cairo AR", "Inter", "Segoe UI", system-ui, sans-serif; font-size: 13px; }
#cs-app[hidden] { display: none !important; }
#cs-app * { box-sizing: border-box; font-family: inherit; }
#cs-app button { font: inherit; color: inherit; cursor: pointer; }
#cs-app button[disabled] { opacity: .4; cursor: default; }
#cs-app svg { display: block; }
.cs-top { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid #1d1e23; background: #0b0c0f; }
.cs-back { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #26262c; background: #121317; display: grid; place-items: center; }
.cs-back svg { width: 16px; height: 16px; stroke: #eef0f4; fill: none; stroke-width: 2; }
html[dir="rtl"] .cs-back svg { transform: scaleX(-1); }
.cs-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.cs-brand svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.7; }
.cs-beta { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: #fff; color: #0a0a0c; }
.cs-ptitle { flex: 0 1 320px; min-width: 120px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #eef0f4; padding: 0 10px; font-size: 14px; }
.cs-ptitle:hover, .cs-ptitle:focus { border-color: #26262c; background: #121317; outline: none; }
.cs-sp { flex: 1; }
.cs-pill { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); white-space: nowrap; color: #d6d7de; }
.cs-pill b { color: #fff; }
.cs-dbg-t { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #8b8b96; border: 0; background: none; }
.cs-dbg-t i { width: 26px; height: 15px; border-radius: 999px; background: #26262c; position: relative; }
.cs-dbg-t i::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 11px; height: 11px; border-radius: 50%; background: #8b8b96; transition: .15s; }
.cs-dbg-t.on i { background: #fff; } .cs-dbg-t.on i::after { background: #0a0a0c; inset-inline-start: 13px; }
.cs-body { flex: 1; display: flex; min-height: 0; }
.cs-side { width: 236px; flex: 0 0 236px; border-inline-end: 1px solid #1d1e23; background: #0b0c0f; overflow-y: auto; padding: 12px 10px 24px; }
.cs-sec { margin-bottom: 18px; }
.cs-sec-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8b8b96; margin: 0 4px 8px; }
.cs-sec-h button { border: 0; background: none; color: #eef0f4; font-size: 18px; line-height: 1; padding: 0 4px; }
.cs-item { width: 100%; display: flex; align-items: center; gap: 8px; text-align: start; border: 0; background: none; padding: 7px 8px; border-radius: 8px; color: #d6d7de; }
.cs-item:hover { background: #111114; }
.cs-item.on { background: #1c1d22; color: #fff; }
.cs-item .n { font-size: 11px; color: #8b8b96; margin-inline-start: auto; }
.cs-shot-i { padding-inline-start: 22px; font-size: 12px; }
.cs-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cs-ref { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: #111114; border: 1px solid #1a1a1f; }
.cs-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ref span { position: absolute; inset-inline: 0; bottom: 0; padding: 2px 4px; font-size: 10px; background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ref .k { position: absolute; top: 3px; inset-inline-start: 3px; font-size: 9px; padding: 0 5px; border-radius: 999px; background: rgba(0,0,0,.6); }
.cs-ref .x { position: absolute; top: 2px; inset-inline-end: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); font-size: 12px; line-height: 18px; padding: 0; display: none; }
.cs-ref:hover .x { display: block; }
.cs-ref-add { aspect-ratio: 1; border-radius: 9px; border: 1px dashed #34343a; background: none; color: #8b8b96; font-size: 20px; }
.cs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.cs-scroll { flex: 1; overflow-y: auto; padding: 18px 22px 300px; }
.cs-scene-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cs-scene-h input { background: transparent; border: 1px solid transparent; border-radius: 8px; color: #fff; font-size: 18px; font-weight: 700; padding: 2px 8px; min-width: 200px; }
.cs-scene-h input:hover, .cs-scene-h input:focus { border-color: #26262c; outline: none; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cs-card { border-radius: 14px; background: #101115; border: 1px solid #1f2026; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.cs-card:hover { border-color: #34353c; }
.cs-card.on { border-color: #fff; box-shadow: 0 0 0 1px #fff inset; }
.cs-media { position: relative; aspect-ratio: 16/9; background: #111114; display: grid; place-items: center; overflow: hidden; }
.cs-media video, .cs-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-empty { text-align: center; color: #6f6d67; font-size: 12px; padding: 10px; }
.cs-empty svg { width: 30px; height: 30px; margin: 0 auto 6px; stroke: #4b4a46; fill: none; stroke-width: 1.5; }
.cs-badge { position: absolute; top: 8px; inset-inline-start: 8px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.65); }
.cs-state { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,8,10,.72); font-size: 12px; text-align: center; }
.cs-bar { width: 120px; height: 3px; border-radius: 3px; background: #26262c; margin: 6px auto 0; overflow: hidden; }
.cs-bar i { display: block; height: 100%; background: #fff; }
.cs-card-f { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 6px; }
.cs-card-t { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.cs-card-t .d { font-weight: 400; color: #8b8b96; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card-m { color: #8b8b96; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-takes { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cs-take { min-width: 26px; height: 22px; border-radius: 6px; border: 1px solid #26262c; background: #111114; font-size: 11px; padding: 0 6px; }
.cs-take.on { background: #fff; color: #0a0a0c !important; border-color: #fff; }
.cs-take.fail { border-color: #6b2a2a; color: #e08b8b; }
.cs-acts { display: flex; gap: 4px; margin-inline-start: auto; }
.cs-ico { width: 26px; height: 22px; border-radius: 6px; border: 1px solid #26262c; background: #111114; display: grid; place-items: center; padding: 0; }
.cs-ico svg { width: 14px; height: 14px; stroke: #d6d7de; fill: none; stroke-width: 1.8; }
.cs-add-card { border: 1px dashed #34353c; border-radius: 14px; background: none; min-height: 200px; color: #8b8b96; display: grid; place-items: center; font-size: 13px; }
.cs-add-card:hover { border-color: #fff; color: #fff; }
/* home */
.cs-home { padding: 34px 30px; max-width: 1100px; margin: 0 auto; }
.cs-home h2 { font-size: 26px; margin: 0 0 4px; color: #fff; }
.cs-home p.s { color: #8b8b96; margin: 0 0 22px; }
.cs-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cs-pcard { border-radius: 14px; border: 1px solid #1f2026; background: #101115; overflow: hidden; text-align: start; padding: 0; }
.cs-pcard .m { aspect-ratio: 16/9; background: #111114 center/cover no-repeat; }
.cs-pcard .t { padding: 9px 12px; font-weight: 700; } .cs-pcard .t small { display: block; font-weight: 400; color: #8b8b96; }
.cs-pnew { border: 1px dashed #34343a; border-radius: 14px; background: none; min-height: 170px; display: grid; place-items: center; color: #d6d7de; font-size: 14px; }
.cs-pnew:hover { border-color: #fff; color: #fff; }
/* dock: floating prompt bar */
.cs-dock { position: absolute; inset-inline: 0; bottom: 14px; display: flex; justify-content: center; pointer-events: none; padding: 0 18px; }
.cs-dock-in { pointer-events: auto; width: 100%; max-width: 1060px; background: #121317; border: 1px solid #26262c; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.6); padding: 10px 12px; }
.cs-dock-top { display: flex; gap: 10px; align-items: stretch; }
.cs-frames { display: flex; gap: 6px; }
.cs-frame { width: 64px; height: 64px; border-radius: 10px; border: 1px dashed #34343a; background: #0d0d10 center/cover no-repeat; position: relative; color: #8b8b96; font-size: 10px; line-height: 1.2; padding: 4px; display: grid; place-items: center; text-align: center; }
.cs-frame.has { border-style: solid; border-color: #4b4c53; color: transparent; }
.cs-frame .x { position: absolute; top: -6px; inset-inline-end: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #26262c; color: #fff; font-size: 11px; line-height: 18px; padding: 0; }
.cs-desc { flex: 1; min-height: 64px; max-height: 140px; resize: none; background: transparent; border: 0; color: #fff; font-size: 14px; line-height: 1.5; padding: 4px 6px; outline: none; }
.cs-desc::placeholder { color: #6f6d67; }
.cs-dock-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cs-chip { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 10px; border: 1px solid #26262c; background: #111114; color: #eef0f4; white-space: nowrap; max-width: 280px; }
.cs-chip:hover { border-color: #4b4c53; }
.cs-chip svg { width: 18px; height: 18px; stroke: #eef0f4; fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.cs-chip .v { overflow: hidden; text-overflow: ellipsis; }
.cs-chip .l { color: #8b8b96; font-size: 11px; }
.cs-rigchip { height: 42px; border-color: #34343a; background: #1b1c21; }
.cs-sel { height: 34px; border-radius: 10px; border: 1px solid #26262c; background: #111114 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23eceae6'/%3E%3C/svg%3E") no-repeat right 9px center; color: #eef0f4; padding: 0 26px 0 10px; -webkit-appearance: none; appearance: none; font: inherit; }
html[dir="rtl"] .cs-sel { padding: 0 10px 0 26px; background-position: left 9px center; }
.cs-seg { display: inline-flex; height: 34px; border-radius: 10px; border: 1px solid #26262c; background: #111114; padding: 2px; }
.cs-seg button { border: 0; background: none; border-radius: 8px; padding: 0 11px; color: #d6d7de; }
.cs-seg button.on { background: #fff; color: #0a0a0c; font-weight: 700; }
.cs-go { height: 42px; margin-inline-start: auto; border: 0; border-radius: 12px; background: #fff; color: #0a0a0c !important; font-weight: 800; padding: 0 20px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.cs-go:hover { background: #d9dbdf; }
.cs-go .c { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #0a0a0c; color: #fff; }
.cs-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #8b8b96; font-size: 11px; }
.cs-sub button { border: 0; background: none; color: #d6d7de; font-size: 11px; padding: 0; text-decoration: underline; }
.cs-cprompt { width: 100%; margin-top: 6px; min-height: 64px; max-height: 160px; resize: vertical; border-radius: 10px; border: 1px solid #1a1a1f; background: #0b0c0f; color: #d6d7de; font-size: 12px; line-height: 1.5; padding: 8px 10px; direction: ltr; text-align: left; outline: none; }
.cs-cprompt.ed { border-color: #6b6a64; color: #fff; }
.cs-note { color: #d9b46a; font-size: 11px; margin-top: 6px; }
.cs-err { color: #e08b8b; font-size: 12px; margin-top: 6px; }
.cs-dbg { margin-top: 6px; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #7fb6a2; direction: ltr; text-align: left; }
/* modal (picker overlay) */
.cs-mask { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; padding: 0 18px 120px; z-index: 5; }
.cs-mask.center { align-items: center; padding-bottom: 0; }
.cs-modal { width: 100%; max-width: 1060px; max-height: calc(100vh - 200px); overflow: hidden; display: flex; flex-direction: column; background: #121317; border: 1px solid #26262c; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.cs-modal.sm { max-width: 460px; }
.cs-mh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #1f2026; }
.cs-mh h3 { margin: 0; font-size: 15px; color: #fff; }
.cs-mh .x { margin-inline-start: auto; border: 0; background: none; font-size: 20px; color: #8b8b96; }
.cs-mb { padding: 14px 16px; overflow-y: auto; }
.cs-mf { padding: 10px 16px; border-top: 1px solid #1f2026; display: flex; gap: 8px; justify-content: flex-end; }
.cs-btn { height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid #26262c; background: #111114; }
.cs-btn.pri { background: #fff; border-color: #fff; color: #0a0a0c !important; font-weight: 700; }
.cs-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cs-cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cs-col h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #8b8b96; }
.cs-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding-inline-end: 2px; }
.cs-opt { display: flex; align-items: center; gap: 10px; text-align: start; border-radius: 12px; border: 1px solid #1a1a1f; background: #111114; padding: 8px 10px; min-height: 52px; }
.cs-opt:hover { border-color: #4b4c53; }
.cs-opt.on { border-color: #fff; background: #222328; }
.cs-opt .g { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: #0d0d10; display: grid; place-items: center; }
.cs-opt .g svg { width: 26px; height: 26px; stroke: #eef0f4; fill: none; stroke-width: 1.5; }
.cs-opt b { display: block; font-size: 13px; color: #fff; }
.cs-opt small { display: block; font-size: 11px; color: #8b8b96; }
.cs-sw { display: flex; gap: 2px; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; overflow: hidden; }
.cs-sw i { flex: 1; }
.cs-mgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cs-mv { border-radius: 12px; border: 1px solid #1a1a1f; background: #111114; padding: 6px 6px 8px; text-align: center; }
.cs-mv:hover { border-color: #4b4c53; } .cs-mv.on { border-color: #fff; background: #222328; }
.cs-mv svg { width: 100%; height: auto; aspect-ratio: 16/10; border-radius: 8px; background: #0d0d10; }
.cs-mv span { display: block; margin-top: 5px; font-size: 12px; }
.cs-mv .sc { stroke: #4b4a46; fill: none; stroke-width: 1.2; }
.cs-mv .fr { stroke: #fff; fill: none; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.cs-mv .ar { stroke: #fff; fill: none; stroke-width: 1.4; opacity: .7; }
.cs-mv:hover .fr, .cs-mv.on .fr { animation: cs-mv 1.8s ease-in-out infinite alternate; }
.cs-mv .fr { --tx: 0px; --ty: 0px; --s: 1; --r: 0deg; }
@keyframes cs-mv { from { transform: none; } to { transform: translate(var(--tx), var(--ty)) scale(var(--s)) rotate(var(--r)); } }
.cs-mv.m-handheld:hover .fr, .cs-mv.m-handheld.on .fr { animation: cs-shake .35s linear infinite; }
@keyframes cs-shake { 0%{transform:translate(0,0)} 25%{transform:translate(1px,-1px) rotate(.6deg)} 50%{transform:translate(-1px,1px)} 75%{transform:translate(1px,1px) rotate(-.6deg)} 100%{transform:translate(0,0)} }
.cs-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.cs-sizes .cs-opt { min-height: 36px; padding: 4px 10px; }
.cs-refpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-refpick .cs-ref { cursor: pointer; }
.cs-refpick .cs-ref.on { outline: 2px solid #fff; outline-offset: 1px; }
.cs-form label { display: block; margin: 0 0 10px; color: #8b8b96; font-size: 12px; }
.cs-form input[type=text], .cs-form select { display: block; width: 100%; margin-top: 4px; height: 36px; border-radius: 9px; border: 1px solid #26262c; background: #111114; color: #fff; padding: 0 10px; }
.cs-cost { font-size: 28px; font-weight: 800; color: #fff; margin: 4px 0; }
.cs-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; color: #8b8b96; font-size: 12px; margin-top: 8px; }
.cs-kv b { color: #eef0f4; font-weight: 600; }
.cs-log { width: 100%; border-collapse: collapse; font-size: 11px; direction: ltr; }
.cs-log td, .cs-log th { border-bottom: 1px solid #1f2026; padding: 5px 6px; text-align: left; white-space: nowrap; }
.cs-toast { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%); background: #fff; color: #0a0a0c; padding: 8px 16px; border-radius: 999px; font-weight: 700; z-index: 9; }
.aiv-tile.cs-tile { position: relative; }
.aiv-tile.cs-tile .cs-beta { position: absolute; top: 8px; inset-inline-end: 8px; }
/* specificity fixes against the app's global form rules */
#cs-app select.cs-sel { width: auto; display: inline-block; flex: 0 0 auto; margin: 0; min-width: 0; }
#cs-app .cs-seg button.on, #cs-app .cs-take.on { background: #fff; color: #0a0a0c; }
#cs-app .cs-go, #cs-app .cs-btn.pri, #cs-app .cs-beta { color: #0a0a0c; }
#cs-app .cs-go .c { color: #fff; }
.cs-card-t > span:first-child { white-space: nowrap; flex: 0 0 auto; }
#cs-app input, #cs-app textarea { margin: 0; box-shadow: none; }
#cs-app .cs-form select { display: block; width: 100%; }
#cs-app .rn-dd { display: inline-block; width: auto; max-width: none; flex: 0 0 auto; }
.cs-dock-top .cs-go { align-self: flex-end; height: 48px; padding: 0 22px; }
.cs-ref .k { display: none; }
/* v2: references are the main input of the prompt bar */
.cs-dock-in { position: relative; }
.cs-rstrip { margin-bottom: 8px; }
.cs-rhead { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8b8b96; margin: 0 2px 6px; }
.cs-rhead b { color: #eef0f4; font-size: 12px; }
.cs-rtip { margin-inline-start: auto; }
.cs-rrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; align-items: center; }
.cs-rchip { position: relative; flex: 0 0 auto; width: 64px; height: 78px; border-radius: 10px; border: 1px solid #26262c; background: #0d0d10; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cs-rchip img { width: 100%; height: 58px; object-fit: cover; display: block; opacity: .55; }
.cs-rchip span { font-size: 10px; line-height: 20px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8b8b96; }
.cs-rchip.on { border-color: #fff; box-shadow: 0 0 0 1px #fff inset; }
.cs-rchip.on img { opacity: 1; } .cs-rchip.on span { color: #fff; }
.cs-rchip:hover img { opacity: .9; }
.cs-rn { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: #fff; color: #0a0a0c; font: 700 11px/18px inherit; font-style: normal; text-align: center; }
.cs-rup { border-style: dashed; border-color: #4b4c53; align-items: center; justify-content: center; gap: 4px; color: #d6d7de; }
.cs-rup svg { width: 20px; height: 20px; stroke: #eef0f4; fill: none; stroke-width: 1.8; }
.cs-rup span { color: #d6d7de; line-height: 14px; }
.cs-rhint { color: #8b8b96; font-size: 12px; max-width: 520px; }
.cs-mpop { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 12px; width: 260px; background: #111114; border: 1px solid #34343a; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.6); padding: 4px; z-index: 4; }
.cs-mopt { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 8px; padding: 5px 6px; text-align: start; }
.cs-mopt.on, .cs-mopt:hover { background: #26272d; }
.cs-mopt img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.cs-mopt b { font-size: 13px; color: #fff; } .cs-mopt small { margin-inline-start: auto; color: #8b8b96; font-size: 11px; }
.cs-adv { color: #d6d7de !important; text-decoration: none !important; }
.cs-frames.sm { margin-top: 8px; }
.cs-frames.sm .cs-frame { width: 52px; height: 52px; }
.cs-desc { min-height: 54px; }
/* v3: linked mentions */
.cs-descw { position: relative; flex: 1; min-width: 0; display: flex; }
.cs-descw .cs-desc { position: relative; z-index: 1; width: 100%; background: transparent !important; caret-color: #fff; }
.cs-hl { position: absolute; top: 0; inset-inline-start: 0; bottom: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: transparent; pointer-events: none; border-style: solid; border-color: transparent; box-sizing: border-box; }
.cs-m { color: transparent; border-radius: 4px; padding: 0; }
.cs-m.ok { background: rgba(127, 182, 162, .22); box-shadow: inset 0 -2px 0 #7fb6a2; }
.cs-m.dim { background: rgba(255, 255, 255, .06); box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); }
.cs-m.warn { background: rgba(224, 139, 139, .2); box-shadow: inset 0 -2px 0 #e08b8b; }
.cs-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.cs-links:empty { display: none; }
.cs-lk { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 6px; border-radius: 999px; background: rgba(127, 182, 162, .14); border: 1px solid rgba(127, 182, 162, .45); color: #d7efe6; font-size: 11px; }
.cs-lk .cs-rn { position: static; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
.cs-lk.off { background: transparent; border-color: #34343a; color: #8b8b96; }
.cs-lk .x { border: 0; background: rgba(255,255,255,.1); width: 16px; height: 16px; border-radius: 50%; font-size: 11px; line-height: 16px; padding: 0; }
.cs-warn { flex-basis: 100%; color: #f0a3a3; font-size: 12px; }
.cs-warn.soft { color: #d9b46a; }
.cs-hint { flex-basis: 100%; color: #d9b46a; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.cs-hint button { border: 1px solid #5a4a2a; background: none; border-radius: 6px; padding: 0 8px; height: 22px; color: #f1d398; font-size: 11px; }
.cs-upop { position: absolute; bottom: calc(100% + 6px); inset-inline-end: 160px; background: #111114; border: 1px solid #34343a; border-radius: 10px; padding: 6px 8px; display: flex; gap: 10px; align-items: center; z-index: 4; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.cs-upop button { border: 1px solid #4b4c53; background: #222328; border-radius: 7px; padding: 0 10px; height: 24px; }
/* clearer reference numbers on selected thumbnails */
.cs-rchip .cs-rn { top: 3px; inset-inline-start: 3px; min-width: 22px; height: 22px; border-radius: 11px; font-size: 13px; line-height: 22px; font-weight: 800; box-shadow: 0 0 0 2px #0a0a0c; }
.cs-upop .cs-rn { position: static; display: inline-block; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; margin-inline-end: 6px; }
#cs-app .cs-camtxt { font-size: 11.5px; color: #9fd3b4; margin: 2px 2px 6px; opacity: .9; }
#cs-app .cs-mv .fr.au { stroke-dasharray: 4 3; }
#cs-app .cs-mv .ar.sp { fill: currentColor; stroke: none; opacity: .85; }
#cs-app .cs-mv:hover .ar.sp { animation: cs-tw 1.2s ease-in-out infinite; }
@keyframes cs-tw { 50% { opacity: .3; } }
#cs-app .cs-mvnote { margin: 0 0 12px; color: #8b8b96; font-size: 12px; }
#cs-app .cs-asp { position: relative; display: inline-flex; flex: 0 0 auto; }
#cs-app .cs-aspb, #cs-app .cs-aspo { display: inline-flex; align-items: center; gap: 7px; background: #111114; color: #e8e6e1; border: 1px solid #2c2d33; border-radius: 9px; padding: 0 10px; height: 34px; font: inherit; font-size: 12.5px; cursor: pointer; }
#cs-app .cs-aspb:hover { border-color: #4a4b52; }
#cs-app .cs-car { font-style: normal; font-size: 10px; opacity: .6; }
#cs-app .cs-aiw { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 14px; }
#cs-app .cs-ai { display: block; fill: none; stroke: #fff; stroke-width: 1.3; overflow: visible; }
#cs-app .cs-aspm { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; z-index: 6; background: #111114; border: 1px solid #34343a; border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 120px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
#cs-app .cs-aspo { border: 0; background: transparent; width: 100%; height: 32px; border-radius: 7px; }
#cs-app .cs-aspo:hover { background: #24252b; }
#cs-app .cs-aspo.on { background: #26262c; color: #fff; }
#cs-app .cs-brand .cs-bname { font-weight: 700; letter-spacing: .01em; unicode-bidi: isolate; }
#cs-app .cs-brand .cs-bsub { font-size: 11.5px; color: #8b8b96; font-weight: 400; margin-inline-start: 2px; }
/* rspal: colour palette image cards */
.cs-cols.c2 { grid-template-columns: repeat(2, 1fr); }
.cs-palh { margin: 18px 0 2px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #8b8b96; }
.cs-palhint { margin: 0 0 10px; color: #6f6e6a; font-size: 12px; }
.cs-palg { margin: 0 0 14px; }
.cs-palg h5 { margin: 0 0 7px; font-size: 12px; font-weight: 600; color: #c9c7c2; }
.cs-palr { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
#cs-app .cs-pal { display: flex; flex-direction: column; gap: 6px; padding: 0 0 7px; margin: 0; border: 1px solid #24252b; border-radius: 12px; background: #17181d; color: #eef0f4; cursor: pointer; overflow: hidden; text-align: center; font: inherit; transition: border-color .15s, transform .15s; }
#cs-app .cs-pal:hover { border-color: #5d5e66; transform: translateY(-1px); }
#cs-app .cs-pal.on { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.cs-palf { position: relative; display: block; aspect-ratio: 3 / 2; background: #0b0c0e; overflow: hidden; }
.cs-palf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s; }
.cs-palf img.b { opacity: 0; }
.cs-pal:hover .cs-palf img.b, .cs-pal:focus-visible .cs-palf img.b { opacity: 1; }
.cs-palauto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7,8,10,.45); }
.cs-palauto svg { width: 30px; height: 30px; fill: #fff; stroke: none; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.cs-paln { display: block; font-size: 12px; font-weight: 600; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pal.on .cs-paln::before { content: "✓ "; }

/* rspal: Rolling Set tile, same frame as the other AI Studio tiles; dark silver film look, no art image */
.aiv-tile.cs-tile { --ic: 226 228 234; }
.aiv-tile.cs-tile::before { background: radial-gradient(120% 90% at 85% 0%, rgba(214,218,228,.16) 0%, rgba(214,218,228,0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(120,128,150,.18) 0%, rgba(120,128,150,0) 60%), linear-gradient(160deg, #1b1d24 0%, #0d0e12 55%, #050507 100%); opacity: 1; }
.aiv-tile.cs-tile::after { background: linear-gradient(180deg, rgba(7,8,10,0) 40%, rgba(7,8,10,.55) 100%); }
.aiv-tile.cs-tile .cs-strip { position: absolute; left: 0; right: 0; height: 14px; z-index: -1; pointer-events: none; background: rgba(0,0,0,.55);
  -webkit-mask: none; border-color: rgba(220,224,232,.14); border-style: solid; border-width: 0; }
.aiv-tile.cs-tile .cs-strip::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(220,224,232,.32) 0 8px, transparent 8px 18px); border-radius: 1px; }
.aiv-tile.cs-tile .cs-strip.t { top: 0; border-bottom-width: 1px; }
.aiv-tile.cs-tile .cs-strip.b { bottom: 0; border-top-width: 1px; }
.aiv-tile.cs-tile .cs-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--cs-a, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg, rgba(232,236,244,.85) 300deg, rgba(255,255,255,0) 345deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cs-spin 7s linear infinite; }
@property --cs-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cs-spin { to { --cs-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .aiv-tile.cs-tile .cs-ring { animation: none; --cs-a: 200deg; } }
.aiv-tile.cs-tile .aiv-tile-ico { margin-top: 6px; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)); border-color: rgba(230,233,240,.55); box-shadow: 0 0 18px rgba(220,224,232,.18); }
.aiv-tile.cs-tile .cs-beta { top: 22px; inset-inline-end: 14px; background: linear-gradient(180deg, #f4f5f7, #c9ccd3); }
.aiv-tile.cs-tile:hover .cs-ring { animation-duration: 3.5s; }
/* rsat: start frame + @mentions */
.cs-warn.cs-startrefs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#cs-app .cs-startrefs button { border: 1px solid #7a4343; background: none; border-radius: 6px; padding: 0 8px; height: 22px; color: #f6c1c1; font-size: 11px; cursor: pointer; }
/* rsdel: remove a selected reference from the shot */
.cs-rchip .cs-rx { position: absolute; top: 3px; inset-inline-end: 3px; width: 20px; height: 20px; border-radius: 10px; background: rgba(7,8,10,.85); color: #fff; font: 700 14px/19px inherit; text-align: center; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.55); opacity: 0; transition: opacity .12s; cursor: pointer; }
.cs-rchip.on:hover .cs-rx, .cs-rchip.on:focus-visible .cs-rx, .cs-rchip.on:focus-within .cs-rx { opacity: 1; }
.cs-rchip .cs-rx:hover { background: #fff; color: #0a0a0c; }
@media (hover: none) { .cs-rchip.on .cs-rx { opacity: 1; } }
/* rsux: bigger prompt that grows to 40% of the window */
.cs-desc, .cs-descw .cs-desc { min-height: 112px; max-height: 40vh; }
/* in-app playback */
.cs-media { position: relative; }
.cs-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(10,11,13,.62); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; z-index: 3; transition: transform .15s, background .15s; }
.cs-play svg { width: 24px; height: 24px; fill: #fff; margin-inline-start: 3px; }
[dir=rtl] .cs-play svg { margin-inline-start: 0; margin-inline-end: 3px; transform: none; }
.cs-play:hover { background: rgba(10,11,13,.82); transform: translate(-50%, -50%) scale(1.06); }
.cs-media.live video { object-fit: contain; background: #000; }
.cs-media.live .cs-badge { display: none; }
.cs-pv { width: min(1100px, 94vw); max-width: none; }
.cs-pv video { width: 100%; max-height: 72vh; background: #000; border-radius: 10px; display: block; }
.cs-pvbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cs-pvbar .cs-takes { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-take.on { border-color: #fff; color: #fff; }
/* delete confirmations */
.cs-item .cs-sx { opacity: 0; margin-inline-start: 6px; width: 18px; height: 18px; line-height: 17px; text-align: center; border-radius: 5px; color: #b9b6ad; font-size: 14px; }
.cs-item:hover .cs-sx, .cs-item.on .cs-sx { opacity: .8; }
.cs-item .cs-sx:hover { opacity: 1; background: #3a1d1d; color: #ff8d8d; }
.cs-delp { color: #ff8d8d; }
.cs-ask { width: min(460px, 92vw); }
.cs-askq { margin: 0 0 16px; line-height: 1.6; color: #e8e6df; font-size: 14px; }
.cs-askrow { display: flex; justify-content: flex-end; gap: 8px; }
.cs-ghost { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #26262c; background: #111114; color: #e8e6df; }
.cs-danger { height: 34px; padding: 0 16px; border-radius: 8px; border: 0; background: #e5484d; color: #fff; font-weight: 700; }
.cs-danger:hover { background: #f2555a; }
/* undo toast */
.cs-toast.act { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; }
[dir=rtl] .cs-toast.act { padding: 6px 16px 6px 6px; }
.cs-toast.act button { height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: #0a0a0c; color: #fff; font-weight: 700; cursor: pointer; }
.cs-acts .hp-s.cs-hs { width: 28px; height: 28px; line-height: 28px; font-size: 15px; background: transparent; border: 1px solid #26262c; color: #e8e6df; }
.cs-acts .hp-s.cs-hs.on { background: #d4a843; border-color: #d4a843; color: #111; }
/* rsref2: references leave the strip when removed; a visible × on every thumbnail */
#cs-app .cs-rchip .cs-rx { opacity: 1; width: 22px; height: 22px; border-radius: 11px; font-size: 15px; font-weight: 800; line-height: 21px; background: rgba(7,8,10,.88); color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); z-index: 2; }
#cs-app .cs-rchip .cs-rx:hover { background: #e5484d; color: #fff; box-shadow: 0 0 0 1.5px #fff; }
.cs-rstrip { position: relative; }
#cs-app .cs-rback { border-style: dashed; border-color: #4b4c53; align-items: center; justify-content: center; gap: 2px; color: #d6d7de; }
#cs-app .cs-rback b { font-size: 20px; line-height: 24px; color: #eef0f4; }
#cs-app .cs-rback span { color: #d6d7de; line-height: 14px; white-space: normal; text-align: center; }
.cs-rpop { position: absolute; bottom: calc(100% - 18px); inset-inline-end: 0; z-index: 6; background: #111114; border: 1px solid #34343a; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 240px; max-width: 340px; max-height: 280px; overflow-y: auto; box-shadow: 0 12px 34px rgba(0,0,0,.65); }
#cs-app .cs-rpi { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #eef0f4; padding: 4px 6px; border-radius: 8px; text-align: start; }
#cs-app .cs-rpi:hover, #cs-app .cs-rpi:focus-visible { background: #24252b; }
.cs-rpi img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.cs-rpi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cs-rpi em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #2f3037; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* rsref2: readable toast + confirm buttons (the #cs-app button reset used to make the Undo label inherit black) */
#cs-app .cs-toast { max-width: min(720px, 92%); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
#cs-app .cs-toast.act .cs-tmsg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cs-app .cs-toast.act button, #cs-app .cs-tbtn { flex: 0 0 auto; height: 30px; padding: 0 14px; border-radius: 999px; border: 0; background: #0a0a0c; color: #fff !important; font-weight: 800; font-size: 13px; cursor: pointer; }
#cs-app .cs-toast.act button:hover, #cs-app .cs-tbtn:hover { background: #26262c; }
#cs-app .cs-toast.act button:focus-visible { outline: 2px solid #0a0a0c; outline-offset: 2px; }
#cs-app .cs-ghost { color: #eef0f4 !important; background: #1d1e23; border: 1px solid #4b4c53; font-weight: 700; }
#cs-app .cs-ghost:hover { background: #26262c; }
#cs-app .cs-danger { color: #fff !important; background: #e5484d; font-weight: 800; }
#cs-app .cs-danger:hover { background: #f2555a; }
#cs-app .cs-danger:focus-visible, #cs-app .cs-ghost:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#cs-app .cs-upop button { color: #eef0f4 !important; }
#cs-app .cs-btn { color: #eef0f4; } #cs-app .cs-btn.pri { color: #0a0a0c !important; }
/* motion (18 Oct 2026): Rolling Set + Rolling Motion, side by side above the AI Studio category tiles */
.cs-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.cs-fcard { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 132px; padding: 22px 24px; border-radius: 22px; text-align: start;
  border: 1px solid rgba(220,224,232,.22); color: #f4f5f7; cursor: pointer; font: inherit;
  background: radial-gradient(120% 90% at 85% 0%, rgba(214,218,228,.16) 0%, rgba(214,218,228,0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(120,128,150,.18) 0%, rgba(120,128,150,0) 60%), linear-gradient(160deg, #1b1d24 0%, #0d0e12 55%, #050507 100%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cs-fcard.m { border-color: rgba(232,196,120,.32);
  background: radial-gradient(120% 90% at 85% 0%, rgba(232,190,110,.20) 0%, rgba(232,190,110,0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(170,110,60,.20) 0%, rgba(170,110,60,0) 60%), linear-gradient(160deg, #241d14 0%, #120e09 55%, #070605 100%); }
.cs-fcard:hover { transform: translateY(-2px); border-color: rgba(240,242,246,.5); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.cs-fcard.m:hover { border-color: rgba(240,206,140,.65); }
.cs-fcard:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cs-fcard .cs-strip { position: absolute; left: 0; right: 0; height: 12px; z-index: -1; pointer-events: none; background: rgba(0,0,0,.5); border-color: rgba(220,224,232,.14); border-style: solid; border-width: 0; }
.cs-fcard .cs-strip::before { content: ""; position: absolute; left: 10px; right: 10px; top: 3px; height: 6px; background: repeating-linear-gradient(90deg, rgba(220,224,232,.3) 0 8px, transparent 8px 18px); border-radius: 1px; }
.cs-fcard.m .cs-strip::before { background: repeating-linear-gradient(90deg, rgba(240,206,140,.34) 0 8px, transparent 8px 18px); }
.cs-fcard .cs-strip.t { top: 0; border-bottom-width: 1px; } .cs-fcard .cs-strip.b { bottom: 0; border-top-width: 1px; }
.cs-fcard .cs-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--cs-a, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg, rgba(232,236,244,.85) 300deg, rgba(255,255,255,0) 345deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: cs-spin 7s linear infinite; }
.cs-fcard.m .cs-ring { background: conic-gradient(from var(--cs-a, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg, rgba(244,210,140,.9) 300deg, rgba(255,255,255,0) 345deg); }
@media (prefers-reduced-motion: reduce) { .cs-fcard .cs-ring { animation: none; --cs-a: 200deg; } .cs-fcard { transition: none; } }
.cs-fico { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)); border: 1px solid rgba(230,233,240,.5); box-shadow: 0 0 18px rgba(220,224,232,.16); }
.cs-fcard.m .cs-fico { border-color: rgba(240,206,140,.6); box-shadow: 0 0 20px rgba(232,190,110,.22); }
.cs-fico svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-ftx { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.cs-fhd { display: flex; align-items: center; gap: 10px; }
.cs-ft { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.cs-fcard .cs-beta { background: linear-gradient(180deg, #f4f5f7, #c9ccd3); color: #0a0a0c; }
.cs-fcard.m .cs-beta { background: linear-gradient(180deg, #f6dfae, #d9b26a); }
.cs-fd { font-size: 16px; font-weight: 700; color: #f0efe9; line-height: 1.4; }
.cs-fm { font-size: 13.5px; color: rgba(236,234,228,.72); line-height: 1.4; }
.cs-fgo { flex: none; font-size: 22px; color: rgba(255,255,255,.7); }
[dir="rtl"] .cs-fgo { transform: scaleX(-1); }
/* Rolling Motion workspace */
#cs-app .cs-sel.cs-eng { max-width: 300px; }
#cs-app.cs-motion .cs-brand .cs-beta { background: linear-gradient(180deg, #f6dfae, #d9b26a); }
#cs-app .cs-srcrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
#cs-app .cs-rgen svg { width: 15px; height: 15px; }
#cs-app .cs-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(240,206,140,.45); background: rgba(240,206,140,.08); cursor: pointer; }
#cs-app .cs-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: #e9c27a; }
#cs-app .cs-consent span { display: flex; flex-direction: column; gap: 4px; }
#cs-app .cs-consent b { font-size: 14px; }
#cs-app .cs-consent small { font-size: 12px; color: #a9a69e; line-height: 1.45; }
#cs-app .cs-ainote { color: #cdb27a; font-size: 12.5px; margin: 10px 0 0; }
@media (max-width: 1100px) { .cs-feature { grid-template-columns: 1fr; } }
html.rn-app .cs-feature, html.rn-app #cs-app { display: none !important; }   /* mobilestudio: phones in a browser get the entry cards; the native app never */
.cs-rchip.cs-rgen span{white-space:normal;text-align:center;line-height:1.15;font-size:10px;padding:0 4px;overflow:visible;text-overflow:clip;max-width:100%}
.cs-risk{background:#fff4e5;color:#7a3e00;border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.4}
/* Rolling Motion (19 Oct 2026): every control on ONE compact row (quality name, 480/720/1080, duration, sound) */
@media (min-width: 1024px) {
  .cs-motion .cs-dock-row { flex-wrap: nowrap; gap: 5px; }
  .cs-motion .cs-dock-row > * { flex: 0 0 auto; }
  .cs-motion .cs-dock-row > .cs-chip { flex: 0 1 auto; min-width: 0; padding: 0 8px; }
  .cs-motion .cs-dock-row > .cs-rigchip { max-width: 190px; }
  .cs-motion .cs-dock-row .cs-chip .l { display: none; }
  .cs-motion .cs-dock-row .cs-eng { max-width: 160px; }
  .cs-motion .cs-dock-row .cs-seg button { padding: 0 8px; }
}

/*MVCSS*/
/* ---- camera movement cards (19 Oct 2026): animated parallax scenes, original artwork; loop on hover / focus, play once on first view.
   Generated by seedance-build/mvcss.py: each layer (b far ridge + sun, m hills + ground, f figure, g foreground posts) moves for the exact camera move. ---- */
#cs-app .cs-mgrid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
#cs-app .cs-mv { padding: 4px 4px 7px; border-radius: 11px; display: flex; flex-direction: column; align-items: stretch; }
#cs-app .cs-mv svg.mvs { width: 100%; height: auto; aspect-ratio: 16/10; border-radius: 7px; background: #0d0d10; display: block; }
#cs-app .cs-mv > span { margin-top: 6px; font-size: 12px; line-height: 1.2; color: #d9d6cf; }
#cs-app .cs-mv.on > span { color: #fff; font-weight: 600; }
#cs-app .cs-mv:focus-visible { outline: 2px solid #f5c542; outline-offset: 2px; }
#cs-app .cs-mv .L, #cs-app .cs-mv .cam { transform-box: view-box; transform-origin: 96px 66px; }
#cs-app .cs-mv .rec { opacity: 0; }
#cs-app .cs-mv:is(:hover, :focus-visible, .intro) .rec { opacity: 1; animation: csmvRec 1s steps(2) infinite; }
#cs-app .cs-mv .spk { opacity: .9; }
#cs-app .cs-mv:is(:hover, :focus-visible, .intro) .spk { animation: cs-tw 1.2s ease-in-out infinite; }
@keyframes csmvRec { 50% { opacity: .15; } }
@keyframes csmvBob { to { transform: translateY(-1.6px); } }
@keyframes csmvShake { 0%{transform:translate(0,0) rotate(0)} 20%{transform:translate(2.6px,-1.6px) rotate(1deg)} 40%{transform:translate(-2px,2.2px) rotate(-.8deg)} 60%{transform:translate(2.2px,1.8px) rotate(.6deg)} 80%{transform:translate(-2.4px,-1.2px) rotate(-1deg)} 100%{transform:translate(0,0) rotate(0)} }
#cs-app .cs-mv .walk { transform-box: view-box; transform-origin: 96px 80px; }
#cs-app .cs-mv:is(:hover, :focus-visible, .intro) .walking .walk { animation: csmvBob .32s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-handheld:is(:hover, :focus-visible) .cam { animation: csmvShake .8s linear infinite; }
#cs-app .cs-mv.m-handheld.intro .cam { animation: csmvShake .8s linear 4; }
#cs-app .cs-mv.m-static:is(:hover, :focus-visible, .intro) .vf { animation: csmvRec 2s ease-in-out infinite; }
@keyframes csmv-push-b { from { transform: none; } to { transform: scale(1.18); } }
#cs-app .cs-mv.m-push:is(:hover, :focus-visible) .L.b { animation: csmv-push-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-push.intro .L.b { animation: csmv-push-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-push-m { from { transform: none; } to { transform: scale(1.35); } }
#cs-app .cs-mv.m-push:is(:hover, :focus-visible) .L.m { animation: csmv-push-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-push.intro .L.m { animation: csmv-push-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-push-f { from { transform: none; } to { transform: scale(1.65); } }
#cs-app .cs-mv.m-push:is(:hover, :focus-visible) .L.f { animation: csmv-push-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-push.intro .L.f { animation: csmv-push-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-push-g { from { transform: none; } to { transform: scale(2.1); } }
#cs-app .cs-mv.m-push:is(:hover, :focus-visible) .L.g { animation: csmv-push-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-push.intro .L.g { animation: csmv-push-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-pull-b { from { transform: none; } to { transform: scale(.9); } }
#cs-app .cs-mv.m-pull:is(:hover, :focus-visible) .L.b { animation: csmv-pull-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-pull.intro .L.b { animation: csmv-pull-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-pull-m { from { transform: none; } to { transform: scale(.8); } }
#cs-app .cs-mv.m-pull:is(:hover, :focus-visible) .L.m { animation: csmv-pull-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-pull.intro .L.m { animation: csmv-pull-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-pull-f { from { transform: none; } to { transform: scale(.66); } }
#cs-app .cs-mv.m-pull:is(:hover, :focus-visible) .L.f { animation: csmv-pull-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-pull.intro .L.f { animation: csmv-pull-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-pull-g { from { transform: none; } to { transform: scale(.5); } }
#cs-app .cs-mv.m-pull:is(:hover, :focus-visible) .L.g { animation: csmv-pull-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-pull.intro .L.g { animation: csmv-pull-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panl-b { from { transform: none; } to { transform: translateX(36px); } }
#cs-app .cs-mv.m-panl:is(:hover, :focus-visible) .L.b { animation: csmv-panl-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panl.intro .L.b { animation: csmv-panl-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panl-m { from { transform: none; } to { transform: translateX(36px); } }
#cs-app .cs-mv.m-panl:is(:hover, :focus-visible) .L.m { animation: csmv-panl-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panl.intro .L.m { animation: csmv-panl-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panl-f { from { transform: none; } to { transform: translateX(36px); } }
#cs-app .cs-mv.m-panl:is(:hover, :focus-visible) .L.f { animation: csmv-panl-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panl.intro .L.f { animation: csmv-panl-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panl-g { from { transform: none; } to { transform: translateX(36px); } }
#cs-app .cs-mv.m-panl:is(:hover, :focus-visible) .L.g { animation: csmv-panl-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panl.intro .L.g { animation: csmv-panl-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panr-b { from { transform: none; } to { transform: translateX(-36px); } }
#cs-app .cs-mv.m-panr:is(:hover, :focus-visible) .L.b { animation: csmv-panr-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panr.intro .L.b { animation: csmv-panr-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panr-m { from { transform: none; } to { transform: translateX(-36px); } }
#cs-app .cs-mv.m-panr:is(:hover, :focus-visible) .L.m { animation: csmv-panr-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panr.intro .L.m { animation: csmv-panr-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panr-f { from { transform: none; } to { transform: translateX(-36px); } }
#cs-app .cs-mv.m-panr:is(:hover, :focus-visible) .L.f { animation: csmv-panr-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panr.intro .L.f { animation: csmv-panr-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-panr-g { from { transform: none; } to { transform: translateX(-36px); } }
#cs-app .cs-mv.m-panr:is(:hover, :focus-visible) .L.g { animation: csmv-panr-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-panr.intro .L.g { animation: csmv-panr-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltu-b { from { transform: none; } to { transform: translateY(24px); } }
#cs-app .cs-mv.m-tiltu:is(:hover, :focus-visible) .L.b { animation: csmv-tiltu-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltu.intro .L.b { animation: csmv-tiltu-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltu-m { from { transform: none; } to { transform: translateY(24px); } }
#cs-app .cs-mv.m-tiltu:is(:hover, :focus-visible) .L.m { animation: csmv-tiltu-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltu.intro .L.m { animation: csmv-tiltu-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltu-f { from { transform: none; } to { transform: translateY(24px); } }
#cs-app .cs-mv.m-tiltu:is(:hover, :focus-visible) .L.f { animation: csmv-tiltu-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltu.intro .L.f { animation: csmv-tiltu-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltu-g { from { transform: none; } to { transform: translateY(24px); } }
#cs-app .cs-mv.m-tiltu:is(:hover, :focus-visible) .L.g { animation: csmv-tiltu-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltu.intro .L.g { animation: csmv-tiltu-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltd-b { from { transform: none; } to { transform: translateY(-20px); } }
#cs-app .cs-mv.m-tiltd:is(:hover, :focus-visible) .L.b { animation: csmv-tiltd-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltd.intro .L.b { animation: csmv-tiltd-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltd-m { from { transform: none; } to { transform: translateY(-20px); } }
#cs-app .cs-mv.m-tiltd:is(:hover, :focus-visible) .L.m { animation: csmv-tiltd-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltd.intro .L.m { animation: csmv-tiltd-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltd-f { from { transform: none; } to { transform: translateY(-20px); } }
#cs-app .cs-mv.m-tiltd:is(:hover, :focus-visible) .L.f { animation: csmv-tiltd-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltd.intro .L.f { animation: csmv-tiltd-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-tiltd-g { from { transform: none; } to { transform: translateY(-20px); } }
#cs-app .cs-mv.m-tiltd:is(:hover, :focus-visible) .L.g { animation: csmv-tiltd-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-tiltd.intro .L.g { animation: csmv-tiltd-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckl-b { from { transform: none; } to { transform: translateX(5px); } }
#cs-app .cs-mv.m-truckl:is(:hover, :focus-visible) .L.b { animation: csmv-truckl-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckl.intro .L.b { animation: csmv-truckl-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckl-m { from { transform: none; } to { transform: translateX(16px); } }
#cs-app .cs-mv.m-truckl:is(:hover, :focus-visible) .L.m { animation: csmv-truckl-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckl.intro .L.m { animation: csmv-truckl-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckl-f { from { transform: none; } to { transform: translateX(30px); } }
#cs-app .cs-mv.m-truckl:is(:hover, :focus-visible) .L.f { animation: csmv-truckl-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckl.intro .L.f { animation: csmv-truckl-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckl-g { from { transform: none; } to { transform: translateX(64px); } }
#cs-app .cs-mv.m-truckl:is(:hover, :focus-visible) .L.g { animation: csmv-truckl-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckl.intro .L.g { animation: csmv-truckl-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckr-b { from { transform: none; } to { transform: translateX(-5px); } }
#cs-app .cs-mv.m-truckr:is(:hover, :focus-visible) .L.b { animation: csmv-truckr-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckr.intro .L.b { animation: csmv-truckr-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckr-m { from { transform: none; } to { transform: translateX(-16px); } }
#cs-app .cs-mv.m-truckr:is(:hover, :focus-visible) .L.m { animation: csmv-truckr-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckr.intro .L.m { animation: csmv-truckr-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckr-f { from { transform: none; } to { transform: translateX(-30px); } }
#cs-app .cs-mv.m-truckr:is(:hover, :focus-visible) .L.f { animation: csmv-truckr-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckr.intro .L.f { animation: csmv-truckr-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-truckr-g { from { transform: none; } to { transform: translateX(-64px); } }
#cs-app .cs-mv.m-truckr:is(:hover, :focus-visible) .L.g { animation: csmv-truckr-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-truckr.intro .L.g { animation: csmv-truckr-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craneu-b { from { transform: none; } to { transform: translateY(5px); } }
#cs-app .cs-mv.m-craneu:is(:hover, :focus-visible) .L.b { animation: csmv-craneu-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craneu.intro .L.b { animation: csmv-craneu-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craneu-m { from { transform: none; } to { transform: translateY(14px); } }
#cs-app .cs-mv.m-craneu:is(:hover, :focus-visible) .L.m { animation: csmv-craneu-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craneu.intro .L.m { animation: csmv-craneu-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craneu-f { from { transform: none; } to { transform: translateY(22px); } }
#cs-app .cs-mv.m-craneu:is(:hover, :focus-visible) .L.f { animation: csmv-craneu-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craneu.intro .L.f { animation: csmv-craneu-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craneu-g { from { transform: none; } to { transform: translateY(42px); } }
#cs-app .cs-mv.m-craneu:is(:hover, :focus-visible) .L.g { animation: csmv-craneu-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craneu.intro .L.g { animation: csmv-craneu-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craned-b { from { transform: none; } to { transform: translateY(-4px); } }
#cs-app .cs-mv.m-craned:is(:hover, :focus-visible) .L.b { animation: csmv-craned-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craned.intro .L.b { animation: csmv-craned-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craned-m { from { transform: none; } to { transform: translateY(-11px); } }
#cs-app .cs-mv.m-craned:is(:hover, :focus-visible) .L.m { animation: csmv-craned-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craned.intro .L.m { animation: csmv-craned-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craned-f { from { transform: none; } to { transform: translateY(-18px); } }
#cs-app .cs-mv.m-craned:is(:hover, :focus-visible) .L.f { animation: csmv-craned-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craned.intro .L.f { animation: csmv-craned-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-craned-g { from { transform: none; } to { transform: translateY(-34px); } }
#cs-app .cs-mv.m-craned:is(:hover, :focus-visible) .L.g { animation: csmv-craned-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-craned.intro .L.g { animation: csmv-craned-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-orbit-b { from { transform: none; } to { transform: translateX(28px); } }
#cs-app .cs-mv.m-orbit:is(:hover, :focus-visible) .L.b { animation: csmv-orbit-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-orbit.intro .L.b { animation: csmv-orbit-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-orbit-m { from { transform: none; } to { transform: translateX(12px); } }
#cs-app .cs-mv.m-orbit:is(:hover, :focus-visible) .L.m { animation: csmv-orbit-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-orbit.intro .L.m { animation: csmv-orbit-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-orbit-f { from { transform: none; } to { transform: translateX(-3px) scaleX(.82); } }
#cs-app .cs-mv.m-orbit:is(:hover, :focus-visible) .L.f { animation: csmv-orbit-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-orbit.intro .L.f { animation: csmv-orbit-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-orbit-g { from { transform: none; } to { transform: translateX(-56px); } }
#cs-app .cs-mv.m-orbit:is(:hover, :focus-visible) .L.g { animation: csmv-orbit-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-orbit.intro .L.g { animation: csmv-orbit-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-follow-b { from { transform: none; } to { transform: translateX(-9px); } }
#cs-app .cs-mv.m-follow:is(:hover, :focus-visible) .L.b { animation: csmv-follow-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-follow.intro .L.b { animation: csmv-follow-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-follow-m { from { transform: none; } to { transform: translateX(-26px); } }
#cs-app .cs-mv.m-follow:is(:hover, :focus-visible) .L.m { animation: csmv-follow-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-follow.intro .L.m { animation: csmv-follow-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-follow-g { from { transform: none; } to { transform: translateX(-96px); } }
#cs-app .cs-mv.m-follow:is(:hover, :focus-visible) .L.g { animation: csmv-follow-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-follow.intro .L.g { animation: csmv-follow-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-lead-b { from { transform: none; } to { transform: scale(.86); } }
#cs-app .cs-mv.m-lead:is(:hover, :focus-visible) .L.b { animation: csmv-lead-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-lead.intro .L.b { animation: csmv-lead-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-lead-m { from { transform: none; } to { transform: scale(.76); } }
#cs-app .cs-mv.m-lead:is(:hover, :focus-visible) .L.m { animation: csmv-lead-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-lead.intro .L.m { animation: csmv-lead-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-lead-g { from { transform: none; } to { transform: scale(.6) translateX(-14px); } }
#cs-app .cs-mv.m-lead:is(:hover, :focus-visible) .L.g { animation: csmv-lead-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-lead.intro .L.g { animation: csmv-lead-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-drone-b { from { transform: none; } to { transform: translateY(8px) scale(1.1); } }
#cs-app .cs-mv.m-drone:is(:hover, :focus-visible) .L.b { animation: csmv-drone-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-drone.intro .L.b { animation: csmv-drone-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-drone-m { from { transform: none; } to { transform: translateY(18px) scale(1.3); } }
#cs-app .cs-mv.m-drone:is(:hover, :focus-visible) .L.m { animation: csmv-drone-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-drone.intro .L.m { animation: csmv-drone-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-drone-f { from { transform: none; } to { transform: translateY(26px) scale(1.45); } }
#cs-app .cs-mv.m-drone:is(:hover, :focus-visible) .L.f { animation: csmv-drone-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-drone.intro .L.f { animation: csmv-drone-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-drone-g { from { transform: none; } to { transform: translateY(48px) scale(1.8); } }
#cs-app .cs-mv.m-drone:is(:hover, :focus-visible) .L.g { animation: csmv-drone-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-drone.intro .L.g { animation: csmv-drone-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-crashzoom-b { from { transform: none; } to { transform: scale(1.6); } }
#cs-app .cs-mv.m-crashzoom:is(:hover, :focus-visible) .L.b { animation: csmv-crashzoom-b 1s cubic-bezier(.7,0,.9,.5) infinite alternate; }
#cs-app .cs-mv.m-crashzoom.intro .L.b { animation: csmv-crashzoom-b 1s cubic-bezier(.7,0,.9,.5) 2 alternate; }
@keyframes csmv-crashzoom-m { from { transform: none; } to { transform: scale(1.9); } }
#cs-app .cs-mv.m-crashzoom:is(:hover, :focus-visible) .L.m { animation: csmv-crashzoom-m 1s cubic-bezier(.7,0,.9,.5) infinite alternate; }
#cs-app .cs-mv.m-crashzoom.intro .L.m { animation: csmv-crashzoom-m 1s cubic-bezier(.7,0,.9,.5) 2 alternate; }
@keyframes csmv-crashzoom-f { from { transform: none; } to { transform: scale(2.5); } }
#cs-app .cs-mv.m-crashzoom:is(:hover, :focus-visible) .L.f { animation: csmv-crashzoom-f 1s cubic-bezier(.7,0,.9,.5) infinite alternate; }
#cs-app .cs-mv.m-crashzoom.intro .L.f { animation: csmv-crashzoom-f 1s cubic-bezier(.7,0,.9,.5) 2 alternate; }
@keyframes csmv-crashzoom-g { from { transform: none; } to { transform: scale(3.2); } }
#cs-app .cs-mv.m-crashzoom:is(:hover, :focus-visible) .L.g { animation: csmv-crashzoom-g 1s cubic-bezier(.7,0,.9,.5) infinite alternate; }
#cs-app .cs-mv.m-crashzoom.intro .L.g { animation: csmv-crashzoom-g 1s cubic-bezier(.7,0,.9,.5) 2 alternate; }
@keyframes csmv-vertigo-b { from { transform: none; } to { transform: scale(1.75); } }
#cs-app .cs-mv.m-vertigo:is(:hover, :focus-visible) .L.b { animation: csmv-vertigo-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-vertigo.intro .L.b { animation: csmv-vertigo-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-vertigo-m { from { transform: none; } to { transform: scale(1.4); } }
#cs-app .cs-mv.m-vertigo:is(:hover, :focus-visible) .L.m { animation: csmv-vertigo-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-vertigo.intro .L.m { animation: csmv-vertigo-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-vertigo-f { from { transform: none; } to { transform: none; } }
#cs-app .cs-mv.m-vertigo:is(:hover, :focus-visible) .L.f { animation: csmv-vertigo-f 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-vertigo.intro .L.f { animation: csmv-vertigo-f 2.4s ease-in-out 2 alternate; }
@keyframes csmv-vertigo-g { from { transform: none; } to { transform: scale(.94); } }
#cs-app .cs-mv.m-vertigo:is(:hover, :focus-visible) .L.g { animation: csmv-vertigo-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-vertigo.intro .L.g { animation: csmv-vertigo-g 2.4s ease-in-out 2 alternate; }
@keyframes csmv-auto-b { from { transform: none; } to { transform: translateX(-4px); } }
#cs-app .cs-mv.m-auto:is(:hover, :focus-visible) .L.b { animation: csmv-auto-b 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-auto.intro .L.b { animation: csmv-auto-b 2.4s ease-in-out 2 alternate; }
@keyframes csmv-auto-m { from { transform: none; } to { transform: translateX(-8px); } }
#cs-app .cs-mv.m-auto:is(:hover, :focus-visible) .L.m { animation: csmv-auto-m 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-auto.intro .L.m { animation: csmv-auto-m 2.4s ease-in-out 2 alternate; }
@keyframes csmv-auto-g { from { transform: none; } to { transform: translateX(-14px); } }
#cs-app .cs-mv.m-auto:is(:hover, :focus-visible) .L.g { animation: csmv-auto-g 2.4s ease-in-out infinite alternate; }
#cs-app .cs-mv.m-auto.intro .L.g { animation: csmv-auto-g 2.4s ease-in-out 2 alternate; }
@media (prefers-reduced-motion: reduce) { #cs-app .cs-mv *, #cs-app .cs-mv { animation: none !important; } }
/*MVCSS-END*/
/* Characters & places / reference album (19 Oct 2026): more room and bigger thumbnails (Rolling Motion and Rolling Set share it) */
#cs-app .cs-side { width: 300px; flex-basis: 300px; }
#cs-app .cs-refs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
#cs-app .cs-ref { border-radius: 11px; }
#cs-app .cs-ref span { font-size: 11.5px; padding: 4px 7px; }
#cs-app .cs-ref .k { font-size: 10px; padding: 1px 7px; top: 5px; inset-inline-start: 5px; }
#cs-app .cs-ref .x { width: 22px; height: 22px; line-height: 22px; font-size: 14px; }
#cs-app .cs-ref-add { aspect-ratio: 1; min-height: 0; font-size: 26px; border-radius: 11px; }
#cs-app .cs-rrow { gap: 10px; padding-bottom: 4px; }
#cs-app .cs-rchip { width: 96px; height: 116px; border-radius: 12px; }
#cs-app .cs-rchip img { height: 94px; }
#cs-app .cs-rchip span { font-size: 11px; line-height: 22px; padding: 0 6px; }
#cs-app .cs-rup svg { width: 24px; height: 24px; }
/* dock duration slider */
#cs-app .cs-dur { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid #2c2d33; border-radius: 9px; background: #111114; flex: 0 0 auto; }
#cs-app .cs-dur input { width: 92px; accent-color: #fff; margin: 0; }
#cs-app .cs-dur b { font-size: 12px; font-weight: 600; color: #eef0f4; min-width: 30px; text-align: end; font-variant-numeric: tabular-nums; }
/* paneltop (19 Oct 2026): desktop workspace in normal page flow, top to bottom: hero (promo strip + headline), ONE prompt card
   (references -> setting chips -> text | tall Shoot button -> toolbar), then the storyboard. The whole column scrolls; nothing is fixed or
   overlays the shot cards. Identical card for Rolling Set and Rolling Motion. */
@media all {   /* mobilestudio: the paneltop order (hero, prompt card, storyboard) now applies at every width; phone tweaks below */
  #cs-app .cs-main { flex-direction: column; }
  #cs-app .cs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 24px 56px !important; }
  #cs-app .cs-hero { max-width: 1060px; margin: 0 auto 18px; }
  #cs-app .cs-hero:empty { display: none; }
  #cs-app .cs-hero-strip { position: relative; height: 150px; border-radius: 18px; overflow: hidden; border: 1px solid #1a1a1f; background: radial-gradient(120% 140% at 50% 0%, #26272d 0%, #101115 55%, #0a0a0c 100%); }
  #cs-app .cs-hero-art { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 14px; }
  #cs-app .cs-hero-art .cs-ht { position: relative; display: block; height: 118px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid #2c2d33; box-shadow: 0 14px 34px rgba(0,0,0,.55); background: #101115; }
  #cs-app .cs-hero-art .cs-ht picture, #cs-app .cs-hero-art .cs-ht img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
  #cs-app .cs-hero-art .cs-ht.a0 { transform: translateY(8px) rotate(-3deg) scale(.9); opacity: .72; }
  #cs-app .cs-hero-art .cs-ht.a1 { z-index: 1; }
  #cs-app .cs-hero-art .cs-ht.a2 { transform: translateY(8px) rotate(3deg) scale(.9); opacity: .72; }
  #cs-app .cs-hero-art .cs-ht .xf { opacity: 0; animation: cs-hxf 18s ease-in-out 4s infinite; }
  @keyframes cs-hxf { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { #cs-app .cs-hero-art .cs-ht .xf { animation: none; } }
  #cs-app .cs-hero-strip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,8,10,.85) 0%, rgba(7,8,10,0) 26%, rgba(7,8,10,0) 74%, rgba(7,8,10,.85) 100%); }
  #cs-app .cs-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  #cs-app .cs-hero-strip.vid .cs-hero-art { visibility: hidden; }
  #cs-app .cs-hero-tag { position: absolute; z-index: 2; bottom: 12px; left: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(7,8,10,.72); border: 1px solid #34353c; font-size: 12px; font-weight: 700; color: #eef0f4; }
  #cs-app .cs-hero-tag svg { width: 15px; height: 15px; stroke: #e9c27a; fill: none; stroke-width: 1.7; }
  #cs-app .cs-hero-h { margin: 20px 0 4px; text-align: center; font-size: 34px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: #f4f2ee; }
  #cs-app .cs-hero .cs-hero-h { display: block; width: 100%; text-align: center !important; }
  #cs-app .cs-hero-h .g { color: #e9c27a; unicode-bidi: isolate; }
  /* the card */
  #cs-app .cs-dock { position: static; inset: auto; height: auto; max-height: none; overflow: visible; padding: 0; margin: 0 auto 26px; max-width: 1060px; display: block; pointer-events: auto; }
  #cs-app .cs-dock:empty { display: none; }
  #cs-app .cs-dock-in, #cs-app.cs-motion .cs-dock-in { position: relative; z-index: 3; max-width: none; width: 100%; height: auto; box-sizing: border-box; display: block; overflow: visible; padding: 12px 14px; box-shadow: 0 12px 36px rgba(0,0,0,.45); }
  #cs-app .cs-dock-sc { display: flex; flex-direction: column; gap: 0; max-height: 72vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  #cs-app .cs-dock-sc > * { flex: 0 0 auto; }
  #cs-app .cs-rstrip { margin-bottom: 8px; }
  #cs-app .cs-rhead { margin-bottom: 4px; }
  #cs-app .cs-rrow { height: 88px; align-items: center; }
  #cs-app .cs-rchip, #cs-app.cs-motion .cs-rchip, #cs-app:not(.cs-motion) .cs-rchip { width: 72px; height: 86px; border-radius: 11px; }
  #cs-app .cs-rchip img, #cs-app.cs-motion .cs-rchip img, #cs-app:not(.cs-motion) .cs-rchip img { height: 66px; }
  #cs-app .cs-rchip span { font-size: 10.5px; line-height: 20px; }
  #cs-app .cs-rup svg { width: 20px; height: 20px; }
  /* setting chips: two-line (label over value), equal columns */
  #cs-app .cs-set-row { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 6px; margin-bottom: 8px; }
  #cs-app .cs-set-row .cs-chip { height: 44px; max-width: none; min-width: 0; width: 100%; justify-content: flex-start; padding: 0 10px; border-radius: 11px; background: #191a1f; }
  #cs-app .cs-set-row .cs-chip > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; text-align: start; }
  #cs-app .cs-set-row .cs-chip .l { display: block; font-size: 10px; color: #8b8b96; }
  #cs-app .cs-set-row .cs-chip .v { display: block; max-width: 100%; font-size: 12.5px; }
  /* text + toolbar on the left, tall Shoot button on the right */
  #cs-app .cs-dock-main { display: flex; gap: 12px; align-items: stretch; border: 1px solid #1a1a1f; border-radius: 13px; background: #0d0d10; padding: 8px 8px 8px 10px; }
  #cs-app .cs-dock-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  #cs-app .cs-dock-top { display: flex; }
  #cs-app .cs-dock-top .cs-descw { min-height: 0; }
  #cs-app .cs-dock-top .cs-desc, #cs-app .cs-descw .cs-desc { height: 96px !important; min-height: 96px; max-height: 96px; overflow-y: auto; }
  #cs-app .cs-dock-main > .cs-go { flex: 0 0 132px; height: auto; align-self: stretch; margin: 0; padding: 10px; border-radius: 12px; flex-direction: column; justify-content: center; gap: 8px; font-size: 15px; letter-spacing: .02em; }
  #cs-app .cs-dock-main > .cs-go:disabled { opacity: .55; }
  #cs-app .cs-dock-row { flex-wrap: wrap; gap: 5px; margin-top: 8px; }
  #cs-app .cs-dock-row > * { flex: 0 0 auto; }
  #cs-app .cs-dock-row .cs-seg button { padding: 0 8px; }
  #cs-app .cs-tb { height: 34px; min-width: 34px; border-radius: 10px; border: 1px solid #26262c; background: #111114; color: #eef0f4; font-size: 16px; font-weight: 700; padding: 0 8px; line-height: 1; }
  #cs-app .cs-tb:hover { border-color: #4b4c53; }
  #cs-app .cs-sub { margin-top: 8px; flex-wrap: wrap; }
  #cs-app .cs-frames.sm .cs-frame { width: 64px; height: 64px; }
  #cs-app .cs-cprompt { max-height: 140px; }
  #cs-app .cs-mpop, #cs-app .cs-upop, #cs-app .cs-rpop { z-index: 20; }
  /* smaller storyboard (sequence) cards, below the card in the same scroll */
  #cs-app .cs-board { max-width: 1060px; margin: 0 auto; }
  #cs-app .cs-scene-h { margin-bottom: 10px; }
  #cs-app .cs-scene-h input { font-size: 16px; }
  #cs-app .cs-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
  #cs-app .cs-card-f { padding: 7px 9px 8px; gap: 4px; }
  #cs-app .cs-card-t { font-size: 12.5px; }
  #cs-app .cs-card-m { font-size: 10.5px; }
  #cs-app .cs-add-card { min-height: 0; }
  #cs-app .cs-media.cs-zoomable { cursor: zoom-in; }
}
/* lightbox */
#cs-app .cs-lb { position: fixed; inset: 0; z-index: 50; background: rgba(4,5,7,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 72px 20px; box-sizing: border-box; }
#cs-app .cs-lb-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
#cs-app .cs-lb-stage video, #cs-app .cs-lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; background: #000; display: block; box-shadow: 0 20px 70px rgba(0,0,0,.7); }
#cs-app .cs-lb-stage video { min-width: min(640px, 100%); }
#cs-app .cs-lb-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding-top: 12px; font-size: 13px; color: #d6d7de; max-width: 100%; }
#cs-app .cs-lb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cs-app .cs-lb-orig { color: #fff; text-decoration: underline; font-size: 12.5px; white-space: nowrap; }
#cs-app .cs-lb-x { position: absolute; top: 14px; inset-inline-end: 18px; width: 38px; height: 38px; border-radius: 19px; border: 1px solid #34343a; background: #111114; color: #fff; font-size: 24px; line-height: 34px; padding: 0; cursor: pointer; }
#cs-app .cs-lb-x:hover { background: #fff; color: #0a0a0c; }
#cs-app .cs-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 12px; border: 1px solid #26262c; background: rgba(23,24,28,.85); color: #fff; font-size: 34px; line-height: 58px; padding: 0; cursor: pointer; }
#cs-app .cs-lb-nav:hover { background: #fff; color: #0a0a0c; }
#cs-app .cs-lb-nav.p { left: 14px; } #cs-app .cs-lb-nav.n { right: 14px; }

/* ===== mobilestudio (Oct 2026): Rolling Set / Rolling Motion on phones and tablets in a browser (never in the native app).
   Same order as desktop: hero strip + headline, the prompt card (references strip, setting chips, text, toolbar, Shoot), storyboard below.
   Projects / scenes / cast live in a drawer (☰ in the top bar); pickers open as bottom sheets; the lightbox fills the screen. ===== */
#cs-app .cs-railb, #cs-app .cs-railmask { display: none; }
@media (max-width: 1023px) {
  #cs-app { font-size: 14px; padding-top: env(safe-area-inset-top, 0px); }
  #cs-app .cs-top { height: 56px; flex: 0 0 56px; gap: 6px; padding: 0 8px; }
  #cs-app .cs-back, #cs-app .cs-railb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; }
  #cs-app .cs-railb { display: grid; place-items: center; border: 1px solid #26262c; background: #121317; }
  #cs-app .cs-railb svg { width: 20px; height: 20px; stroke: #eef0f4; fill: none; stroke-width: 2; stroke-linecap: round; }
  #cs-app .cs-brand { gap: 5px; font-size: 13px; min-width: 0; }
  #cs-app .cs-brand > svg, #cs-app .cs-bsub, #cs-app .cs-beta { display: none; }
  #cs-app .cs-ptitle { flex: 1 1 auto; min-width: 0; height: 40px; font-size: 15px; padding: 0 6px; }
  #cs-app .cs-brand:has(~ .cs-ptitle) { display: none; }
  #cs-app .cs-sp { display: none; }
  #cs-app .cs-brand + .cs-sp { display: block; flex: 1 1 auto; }
  #cs-app .cs-pill { height: 36px; padding: 0 10px; font-size: 12px; flex: 0 0 auto; }
  #cs-app .cs-pill .cr-sub { display: none; }
  #cs-app .cs-dbg-t span { display: none; }
  #cs-app .cs-dbg-t { min-height: 44px; padding: 0 4px; }
  /* drawer */
  #cs-app .cs-body { position: relative; }
  #cs-app .cs-side { position: absolute; z-index: 30; top: 0; bottom: 0; inset-inline-start: 0; width: min(84vw, 320px); flex: none; transform: translateX(-104%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0px)); }
  html[dir="rtl"] #cs-app .cs-side, #cs-app[dir="rtl"] .cs-side { transform: translateX(104%); }
  #cs-app.cs-rail-on .cs-side { transform: none !important; }
  #cs-app.cs-rail-on .cs-railmask { display: block; position: absolute; inset: 0; z-index: 29; background: rgba(0,0,0,.55); }
  #cs-app .cs-item { min-height: 44px; font-size: 14px; }
  #cs-app .cs-sec-h button { min-width: 44px; min-height: 44px; font-size: 22px; }
  #cs-app .cs-ref .x { display: block; width: 26px; height: 26px; line-height: 26px; }
  /* one scrolling column */
  #cs-app .cs-main { min-width: 0; width: 100%; }
  #cs-app .cs-scroll { padding: 12px 12px calc(40px + env(safe-area-inset-bottom, 0px)) !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #cs-app .cs-hero { margin-bottom: 12px; }
  #cs-app .cs-hero-strip { height: 92px; border-radius: 14px; }
  #cs-app .cs-hero-art { gap: 8px; }
  #cs-app .cs-hero-art .cs-ht { height: 70px; border-radius: 9px; }
  #cs-app .cs-hero-tag { bottom: 6px; left: 50%; right: auto; transform: translateX(-50%); height: 24px; padding: 0 10px; font-size: 11.5px; white-space: nowrap; }   /* herotag: bottom-centre, over the desert tile (no faces) */
  #cs-app .cs-hero-h { margin: 12px 0 2px; font-size: 22px; }
  /* the prompt card */
  #cs-app .cs-dock { margin-bottom: 18px; }
  #cs-app .cs-dock-in, #cs-app.cs-motion .cs-dock-in { padding: 10px; border-radius: 16px; }
  #cs-app .cs-dock-sc { max-height: none; overflow: visible; }
  #cs-app .cs-rhead .cs-rtip { display: none; }
  #cs-app .cs-rrow { height: auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  #cs-app .cs-rrow::-webkit-scrollbar { display: none; }
  #cs-app .cs-rrow > * { flex: 0 0 auto; }
  #cs-app .cs-rchip, #cs-app.cs-motion .cs-rchip, #cs-app:not(.cs-motion) .cs-rchip { width: 68px; height: 82px; }
  #cs-app .cs-rchip img, #cs-app.cs-motion .cs-rchip img, #cs-app:not(.cs-motion) .cs-rchip img { height: 62px; }
  #cs-app .cs-rchip .cs-rx { opacity: 1; width: 26px; height: 26px; line-height: 26px; }
  /* setting chips: a swipeable row */
  #cs-app .cs-set-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #cs-app .cs-set-row::-webkit-scrollbar { display: none; }
  #cs-app .cs-set-row .cs-chip { flex: 0 0 auto; width: auto; max-width: 78vw; height: 48px; }
  #cs-app .cs-set-row .cs-chip .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
  /* text, then toolbar, then a full-width Shoot button */
  #cs-app .cs-dock-main { flex-direction: column; gap: 8px; padding: 8px; }
  #cs-app .cs-dock-top .cs-desc, #cs-app .cs-descw .cs-desc { height: 112px !important; min-height: 112px; max-height: 40vh; font-size: 16px !important; line-height: 1.5; scroll-margin: 80px 0 140px; }
  #cs-app .cs-dock-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  #cs-app .cs-dock-row::-webkit-scrollbar { display: none; }
  #cs-app .cs-dock-row > * { flex: 0 0 auto !important; }
  #cs-app .cs-tb { height: 44px; min-width: 44px; font-size: 18px; }
  #cs-app .cs-dock-row .cs-seg, #cs-app .cs-dock-row .cs-asp, #cs-app .cs-dock-row .cs-dur, #cs-app .cs-dock-row .cs-chip { height: 44px; min-height: 44px; }
  #cs-app .cs-dock-row .cs-seg button { min-width: 44px; padding: 0 10px; }
  #cs-app .cs-dock-row .cs-dur input[type=range] { min-width: 110px; }
  #cs-app .cs-motion .cs-dock-row .cs-chip .l, #cs-app.cs-motion .cs-dock-row .cs-chip .l { display: none; }
  #cs-app .cs-dock-main > .cs-go { flex: none; width: 100%; height: 54px; flex-direction: row; gap: 12px; font-size: 16px; padding: 0 14px; }
  #cs-app .cs-sub { font-size: 12px; gap: 6px 8px; }
  #cs-app .cs-sub button { min-height: 36px; }
  #cs-app .cs-mpop, #cs-app .cs-upop, #cs-app .cs-rpop { position: absolute; inset-inline: 8px !important; width: auto !important; max-width: none !important; }
  /* storyboard: 2 compact columns, tap a picture to open it big */
  #cs-app .cs-scene-h input { font-size: 16px; min-height: 44px; }
  #cs-app .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  #cs-app .cs-card-f { padding: 6px 8px 8px; }
  #cs-app .cs-card-t .d { display: none; }
  #cs-app .cs-card-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #cs-app .cs-takes { gap: 4px; }
  #cs-app .cs-take { min-width: 36px; min-height: 36px; }
  #cs-app .cs-acts { flex-wrap: wrap; gap: 2px; }
  #cs-app .cs-ico, #cs-app .cs-acts .cs-hs { width: 40px !important; height: 40px !important; }
  #cs-app .cs-play { width: 44px; height: 44px; }
  #cs-app .cs-add-card { min-height: 52px !important; }
  /* projects home */
  #cs-app .cs-home { padding: 16px 12px 40px; }
  #cs-app .cs-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  /* pickers (camera, movement, look, colour, confirm): bottom sheets */
  #cs-app .cs-mask { position: fixed; padding: 0; align-items: flex-end; z-index: 40; }
  #cs-app .cs-modal { max-width: none; width: 100%; max-height: 86vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #cs-app .cs-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cs-app .cs-palr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cs-app .cs-cols { flex-direction: column; }
  #cs-app .cs-modal button { min-height: 40px; }
  #cs-app .cs-mh button { min-width: 44px; min-height: 44px; font-size: 22px; }
  /* lightbox: full screen */
  #cs-app .cs-lb { padding: calc(58px + env(safe-area-inset-top, 0px)) 6px calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; }
  #cs-app .cs-lb-stage video { min-width: 0; width: 100%; }
  #cs-app .cs-lb-x { width: 44px; height: 44px; top: calc(8px + env(safe-area-inset-top, 0px)); inset-inline-end: 10px; }
  #cs-app .cs-lb-nav { width: 40px; height: 56px; font-size: 28px; line-height: 50px; background: rgba(23,24,28,.7); }
  #cs-app .cs-lb-nav.p { left: 4px; } #cs-app .cs-lb-nav.n { right: 4px; }
  #cs-app .cs-lb-bar { gap: 10px; padding: 10px 8px 0; width: 100%; }
  #cs-app .cs-lb-orig { min-height: 44px; display: inline-flex; align-items: center; }
  /* AI Studio entry cards on phones: stacked, compact */
  .cs-feature { grid-template-columns: 1fr !important; gap: 10px !important; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #cs-app .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #cs-app .cs-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #cs-app .cs-hero-strip { height: 120px; }
  #cs-app .cs-hero-art img { height: 92px; }
  #cs-app .cs-dock-main { flex-direction: row; }
  #cs-app .cs-dock-main > .cs-go { width: 120px; height: auto; flex-direction: column; }
  #cs-app .cs-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #cs-app .cs-palr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #cs-app .cs-modal { max-width: 720px; border-radius: 20px; margin-bottom: 20px; }
  #cs-app .cs-mask { align-items: center; padding: 20px; }
  .cs-feature { grid-template-columns: 1fr 1fr !important; }
}
/* the native app never shows any of it */
html.rn-app #cs-app, html.rn-app .cs-feature { display: none !important; }

/* motionmobile (21 Oct 2026): on phones the toolbar wraps instead of scrolling sideways. The sideways scroller clipped the
   Format menu (it opened invisibly) and pushed the Duration slider off-screen, so members could not change either. */
@media (max-width: 1023px) {
  #cs-app .cs-dock-row { flex-wrap: wrap !important; overflow: visible !important; row-gap: 8px; }
  #cs-app .cs-dock-row > .cs-dur { flex: 1 1 100% !important; justify-content: space-between; }
  #cs-app .cs-dock-row .cs-dur input[type=range] { flex: 1 1 auto; min-width: 0; width: auto; height: 32px; touch-action: pan-y; }
  #cs-app .cs-aspm { z-index: 40; max-height: 60vh; overflow-y: auto; }
}
/* Rolling Motion reference video / sound (29 Oct 2026) */
.cs-rhead > svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: #d4af37; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-mstrip { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1f2025; }
.cs-mup { width: 72px; }
.cs-mup svg { width: 22px; height: 22px; stroke: #d4af37; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-mup-audio svg { stroke-width: 2.2; }
.cs-mchip { width: 108px; }
.cs-rchip .cs-mth { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; padding: 0; line-height: normal; background: linear-gradient(135deg,#111114,#0d0d10); overflow: hidden; }
.cs-mth img { height: 58px; width: 100%; object-fit: cover; }
.cs-mth svg { width: 26px; height: 26px; stroke: #8b8b96; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-maudio .cs-mth { background: repeating-linear-gradient(90deg,#111114 0 6px,#101115 6px 9px); }
.cs-mchip.on .cs-mth svg { stroke: #d4af37; }
.cs-mdur { position: absolute; top: 4px; inset-inline-start: 4px; font: 600 9px/14px inherit; font-style: normal; color: #fff; background: rgba(0,0,0,.7); border-radius: 4px; padding: 0 4px; }
.cs-mtag { position: absolute; bottom: 4px; inset-inline-start: 4px; height: 16px; border-radius: 8px; background: #d4af37; color: #0a0a0c; font: 700 9.5px/16px inherit; font-style: normal; padding: 0 5px; z-index: 1; }
.cs-mchip.on { border-color: #d4af37; box-shadow: 0 0 0 1px #d4af37 inset; }
.cs-mchip.on .cs-mname { color: #fff; }
.cs-mfoot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 11px; color: #8b8b96; margin: 6px 2px 0; }
.cs-mtask { display: inline-flex; gap: 6px; align-items: center; color: #d6d7de; }
.cs-mtask .cs-sel { height: 26px; font-size: 12px; }
.cs-mwarn { color: #c9a24a; }
@media (max-width: 1023px) { .cs-mfoot { font-size: 10.5px; } .cs-mchip { width: 100px; } }

/* s3tools: Rolling Motion / Rolling Set in the AI Studio look (cinemafix 31 Oct: was scoped to .cs-root, which never exists; now #cs-app + exact studio palette gold #D4AF37 / neon #C6FF3D / pink #FF2D95) */
#cs-app{--gold:#D4AF37;--pink:#FF2D95;--neon:#C6FF3D}
#cs-app,#cs-app button,#cs-app input,#cs-app select,#cs-app textarea{font-family:"RN Cairo AR","Inter","Segoe UI",system-ui,sans-serif}
#cs-app .cs-top{background:rgba(10,10,12,.86)!important;backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(198,255,61,.18)!important}
#cs-app .cs-back{border:1px solid rgba(198,255,61,.45)!important;border-radius:999px!important;color:#C6FF3D!important;background:rgba(198,255,61,.06)!important}
#cs-app .cs-gen,#cs-app .cs-go,#cs-app .cs-primary,#cs-app .cs-btn.pri{background:linear-gradient(100deg,#FF5FAE,#FF2D95)!important;color:#fff!important;border-color:transparent!important;border-radius:12px!important;box-shadow:0 6px 22px rgba(255,45,149,.28)}
#cs-app .cs-go .c{color:#fff!important}
#cs-app :is(.cs-aspo,.cs-card,.cs-item,.cs-mchip,.cs-mopt,.cs-mv,.cs-opt,.cs-pal,.cs-rchip,.cs-ref,.cs-take).on{border-color:#C6FF3D!important;box-shadow:0 0 0 1px #C6FF3D inset,0 0 18px rgba(198,255,61,.25)!important}
#cs-app :is(.cs-aspo,.cs-mopt,.cs-mv,.cs-opt,.cs-item).on{color:#C6FF3D!important;background:rgba(198,255,61,.10)!important}
#cs-app .cs-mchip.on .cs-mth svg,#cs-app .cs-rhead>svg,#cs-app .cs-mup svg{stroke:#C6FF3D}
#cs-app .cs-mtag,#cs-app .cs-beta{background:#FF2D95!important;color:#fff!important}
#cs-app input[type=range]{accent-color:#C6FF3D}
#cs-app [aria-pressed="true"]{border-color:#C6FF3D!important;color:#C6FF3D!important}