/* Reel Studio: the Studio list and the reel editor. Builds on styles.css (:root tokens, .btn, .chip,
   .segmented, .switch, .menu, .sheet/.modal, .tag, .add-card, .empty-posy). Every class here starts with rs-. */
/* The caption fonts, from the same files the renderer burns in (a separate family, so the app's web Figtree never stands in). */
@font-face { font-family: "Reel Figtree"; font-weight: 700; font-display: swap; src: url("/static/fonts/Figtree-Bold.ttf") format("truetype"); }
@font-face { font-family: "Reel Figtree"; font-weight: 800; font-display: swap; src: url("/static/fonts/Figtree-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Reel Figtree"; font-weight: 900; font-display: swap; src: url("/static/fonts/Figtree-Black.ttf") format("truetype"); }

/* ---------- Studio list ---------- */
.rs-studio { position: relative; }
.rs-studio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-studio-actions .btn svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .rs-studio-actions [data-rs="phone"] { display: none; } }
.rs-card-post.is-waiting { color: var(--amber); }
.rs-link-box code { font-size: 12.5px; word-break: break-all; }
.rs-link-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: left; }
.rs-link-note svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.rs-link-wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.rs-link-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1s ease-in-out infinite; }
.rs-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; }
.rs-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.rs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.rs-card-open { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.rs-card-open:focus-visible { outline: none; }
.rs-card:has(.rs-card-open:focus-visible) { box-shadow: 0 0 0 4px rgba(224, 88, 58, .2); }
.rs-card-thumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, #3b3430, #1f1b18); }
.rs-card-thumb > img, .rs-card-thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rs-card:hover .rs-card-thumb > img { transform: scale(1.035); }
.rs-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 30%, transparent 70%, rgba(0, 0, 0, .35)); pointer-events: none; }
.rs-chip { position: absolute; z-index: 1; top: 10px; left: 10px; background: rgba(255, 255, 255, .94); color: var(--ink-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.rs-chip.rs-busy { color: var(--amber); }
.rs-chip.rs-busy::before { animation: blink 1s ease-in-out infinite; }
.rs-chip.rs-ready { color: var(--blue); }
.rs-chip.rs-done { color: var(--green); }
.rs-chip.rs-failed { color: var(--red); }
.rs-card-cta { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .3s var(--ease); }
.rs-card:hover .rs-card-cta, .rs-card-open:focus-visible .rs-card-cta { opacity: 1; transform: none; }
.rs-card-busy { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .12), transparent 60%); }
.rs-card-posy { width: 84px; height: 84px; animation: posy-float 3s ease-in-out infinite; }
.rs-card.rs-st-processing .rs-card-thumb, .rs-card.rs-st-uploading .rs-card-thumb, .rs-card.is-upload .rs-card-thumb { background: linear-gradient(110deg, #3b3430 30%, #4a413b 50%, #3b3430 70%) 0 0 / 250% 100%; animation: rs-shimmer 1.8s linear infinite; }
@keyframes rs-shimmer { to { background-position: -250% 0; } }
.rs-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
.rs-card-body strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-card-meta { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--muted); }
.rs-card-meta b { color: var(--ink-2); font-weight: 600; }
.rs-card-post { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--green); }
.rs-card-post svg { width: 13px; height: 13px; stroke-width: 2.4; }
.rs-card-error { margin-top: 4px; font-size: 12.5px; color: var(--red); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-card-menu { position: absolute; z-index: 2; top: 8px; right: 8px; }
.rs-card-more { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 18, 16, .42); color: #fff; opacity: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .2s, background .2s; }
.rs-card-more svg { width: 18px; height: 18px; }
.rs-card:hover .rs-card-more, .rs-card-more:focus-visible, .rs-card-more[aria-expanded="true"], .rs-card.is-upload .rs-card-more { opacity: 1; }
.rs-card-more:hover { background: rgba(20, 18, 16, .65); }
.rs-card-menu .menu { top: calc(100% + 6px); }
.rs-card-progress { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: rgba(20, 18, 16, .45); color: #fff; }
.rs-card-progress strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rs-bar { display: block; width: 100%; max-width: 140px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.rs-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .25s var(--ease); }
.rs-add-card { min-height: 0; aspect-ratio: auto; }
.rs-studio-grid .rs-add-card { min-height: 300px; }
.rs-skeleton { pointer-events: none; }
.rs-skeleton .rs-card-thumb { background: linear-gradient(110deg, #efeae2 30%, #f7f3ed 50%, #efeae2 70%) 0 0 / 250% 100%; animation: rs-shimmer 1.6s linear infinite; }
.rs-skeleton .rs-card-body i { display: block; height: 10px; border-radius: 5px; background: #efeae2; }
.rs-skeleton .rs-card-body i + i { width: 60%; margin-top: 6px; }
.rs-empty-drop { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 56px 24px 44px; border: 1.5px dashed var(--line-2); border-radius: 24px; background: var(--surface-2); color: var(--muted); text-align: center; transition: border-color .2s, background .2s; animation: item-in .5s var(--ease); }
.rs-empty-drop:hover { border-color: var(--accent); background: #fffaf8; }
.rs-empty-drop h3 { color: var(--ink); font-size: 20px; margin-bottom: 6px; }
.rs-empty-drop p { max-width: 460px; line-height: 1.55; }
.rs-empty-drop .btn { margin-top: 20px; }
.rs-empty-drop small { margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.rs-studio-tip { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.rs-studio-tip svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); }
.rs-studio-tip em { font-style: normal; color: var(--ink-2); font-weight: 500; }
.rs-drop-veil { position: absolute; inset: -12px; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 26px; background: rgba(255, 250, 248, .9); opacity: 0; pointer-events: none; transition: opacity .2s; }
.rs-drop-veil div { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--accent); font-size: 16px; }
.rs-drop-veil svg { width: 30px; height: 30px; }
.rs-studio.rs-dragging .rs-drop-veil { opacity: 1; }

/* ---------- Editor shell ---------- */
body.rs-editor-open { overflow: hidden; }
/* Toasts sit in the quiet middle of the editor's top bar, clear of the banners and the timeline. */
@media (min-width: 768px) { body.rs-editor-open .toast { top: 10px; bottom: auto; } }
.rs-editor { --rs-block: #efe8de; --rs-bar: #c7b9a6; position: fixed; inset: 0; z-index: 38; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); animation: rs-in .35s var(--ease); }
.rs-editor.rs-leaving { opacity: 0; transition: opacity .2s; }
.rs-editor:focus { outline: none; }
@keyframes rs-in { from { opacity: 0; transform: scale(.99); } }
.rs-editor :focus-visible, .rs-studio :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-editor .input:focus-visible, .rs-editor .rs-title:focus-visible, .rs-editor .rs-words:focus-visible { outline: none; }
.rs-loading, .rs-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--muted); animation: view-in .45s var(--ease); }
.rs-loading-posy { width: 88px; height: 88px; animation: posy-float 3s ease-in-out infinite; }
.rs-center h2 { color: var(--ink); font-size: 24px; letter-spacing: -.03em; }
.rs-center p { max-width: 440px; }
.rs-center-actions { display: flex; gap: 8px; margin-top: 18px; }
.rs-processing-posy { width: 136px; height: 136px; margin-bottom: 4px; animation: posy-float 3s ease-in-out infinite; }
.rs-steps { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; padding: 18px 22px; list-style: none; text-align: left; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.rs-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--faint); transition: color .3s; }
.rs-steps li i { position: relative; flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background .3s, border-color .3s; }
.rs-steps li i svg { width: 12px; height: 12px; stroke-width: 3; }
.rs-steps li.done { color: var(--ink-2); }
.rs-steps li.done i { background: var(--green); border-color: var(--green); color: #fff; animation: pop .4s var(--ease); }
.rs-steps li.now { color: var(--ink); font-weight: 600; }
.rs-steps li.now i { border-color: var(--accent-soft); }
.rs-steps li.now i::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--accent); animation: spin .9s linear infinite; }

/* Top bar */
.rs-top { position: relative; z-index: 8; flex: 0 0 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 18px 0 12px; border-bottom: 1px solid var(--line); background: rgba(250, 248, 244, .9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.rs-back { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.rs-back:hover { background: rgba(29, 27, 24, .05); color: var(--ink); }
.rs-back svg { width: 18px; height: 18px; stroke-width: 2.2; }
.rs-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rs-title { min-width: 0; max-width: 100%; field-sizing: content; padding: 5px 9px; margin-left: -9px; border: 0; border-radius: 10px; background: none; outline: none; font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-overflow: ellipsis; transition: background .2s, box-shadow .2s; }
.rs-title:hover { background: rgba(29, 27, 24, .04); }
.rs-title:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 4px rgba(224, 88, 58, .12); }
.rs-save { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.rs-save svg { width: 14px; height: 14px; color: var(--green); stroke-width: 2.4; }
.rs-save i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.rs-save.is-saving i { animation: blink .9s ease-in-out infinite; }
.rs-save.is-error { color: var(--red); }
.rs-save.is-error i { background: var(--red); }
.rs-save.is-conflict { color: var(--amber); }
.rs-top-actions { display: flex; align-items: center; gap: 8px; }
.rs-history { display: flex; gap: 2px; margin-right: 4px; }
.rs-history-sm, .rs-show-sm { display: none; }
.rs-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); transition: background .2s, color .2s; }
.rs-icon:hover:not(:disabled) { background: rgba(29, 27, 24, .06); color: var(--ink); }
.rs-icon:disabled { opacity: .3; }
.rs-icon svg { width: 18px; height: 18px; }
.rs-export-btn svg { width: 16px; height: 16px; }
.rs-export-btn .rs-chev { display: inline-flex; margin: 0 -4px 0 -2px; color: var(--faint); }
.rs-export-btn .rs-chev svg { width: 14px; height: 14px; }
.rs-menu { min-width: 300px; }
.rs-menu button { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; }
.rs-menu svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.rs-menu strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.rs-menu small { display: block; font-size: 12.5px; color: var(--muted); }
.rs-menu hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--line); }
.rs-render-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-render-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1s ease-in-out infinite; }
.rs-post { min-width: 116px; }

/* Banners */
.rs-banners { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 0; }
.rs-banner { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; line-height: 1.4; animation: view-in .35s var(--ease); }
.rs-banner > div:nth-child(2) { flex: 1; min-width: 0; }
.rs-banner strong { font-weight: 600; margin-right: 6px; }
.rs-banner span { color: var(--muted); }
.rs-banner.is-intro { border-color: #f6d3c7; background: linear-gradient(90deg, var(--accent-soft), var(--surface) 70%); }
.rs-banner.is-intro .rs-banner-icon { background: #fff; color: var(--accent); }
.rs-banner-icon { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.rs-banner-icon svg { width: 16px; height: 16px; }
.rs-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rs-banner.is-warn { background: var(--amber-soft); border-color: #f0dcae; }
.rs-banner.is-warn span { color: #7a520c; }
.rs-banner.is-warn .rs-banner-icon { background: #fff; color: var(--amber); }
.rs-banner.is-error { background: var(--red-soft); border-color: #f5cbc3; }
.rs-banner.is-error span { color: #8f3326; }
.rs-banner.is-error .rs-banner-icon { background: #fff; color: var(--red); }

/* Body */
.rs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 20px; padding: 16px 20px 20px; }
.rs-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.rs-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: radial-gradient(ellipse 60% 70% at 50% 45%, #fff 0%, rgba(255, 255, 255, 0) 70%); user-select: none; -webkit-user-select: none; }

/* Preview frame */
.rs-frame { --rs-scale: .3; position: relative; overflow: hidden; border-radius: 22px; background: #1a1816; box-shadow: 0 1px 2px rgba(29, 27, 24, .1), 0 30px 70px -28px rgba(29, 27, 24, .55); touch-action: none; cursor: pointer; isolation: isolate; }
.rs-frame::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
/* Punch-ins follow the render frame by frame (see zoomAt), around the same point as reels.ZOOM_CENTER. */
.rs-zoom { position: absolute; inset: 0; transform-origin: 50% 40%; }
.rs-video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.rs-frame.has-video .rs-video { opacity: 1; }
.rs-frame.is-fit .rs-video { object-fit: contain; }
.rs-bg { position: absolute; inset: -12%; width: 124%; height: 124%; filter: blur(26px) saturate(1.15) brightness(.85); opacity: 0; transition: opacity .3s; }
.rs-frame.is-fit.has-video .rs-bg { opacity: 1; }
.rs-placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; background: radial-gradient(circle at 30% 25%, rgba(224, 88, 58, .55), transparent 55%), radial-gradient(circle at 75% 70%, rgba(54, 103, 209, .45), transparent 55%), linear-gradient(160deg, #4a3f38, #1f1b18); background-size: 140% 140%; animation: rs-drift 9s ease-in-out infinite alternate; }
.rs-placeholder span { font-size: 11px; color: rgba(255, 255, 255, .45); }
.rs-frame.has-video .rs-placeholder { display: none; }
@keyframes rs-drift { to { background-position: 100% 100%; } }
.rs-bigplay { position: absolute; z-index: 5; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; padding: 0 0 0 3px; border: 0; border-radius: 50%; background: rgba(20, 18, 16, .42); color: #fff; opacity: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .2s, transform .3s var(--ease); }
.rs-bigplay svg { width: 22px; height: 22px; }
.rs-frame:hover .rs-bigplay, .rs-bigplay:focus-visible { opacity: 1; }
.rs-frame.is-dragging .rs-bigplay, .rs-frame.is-graphics:has(.rs-ov.is-selected:not([hidden])) .rs-bigplay { opacity: 0; pointer-events: none; }
.rs-bigplay:hover { transform: scale(1.06); }

/* Captions in the preview, matched to reels.build_ass(). Sizes are in 1080-wide render pixels × --rs-scale.
   --fs is the ASS font size, which libass treats as the line height (Figtree's win ascent + descent is 1.201 em);
   outlines are twice the ASS Outline because half of a CSS stroke sits under the fill. */
.rs-cap { --cap-size: 84; --k: 1; --fs: calc(var(--cap-size) * var(--k) * var(--rs-scale) * 1px); position: absolute; z-index: 3; left: 0; right: 0; transform: translateY(-100%); text-align: center; font-family: "Reel Figtree", var(--sans); font-size: calc(var(--fs) / 1.201); line-height: var(--fs); pointer-events: none; }
.rs-cap-box { display: inline-block; transform-origin: 50% 100%; }
.rs-cap-line { white-space: nowrap; pointer-events: auto; cursor: grab; font-weight: 800; color: var(--cap-color); -webkit-text-stroke: calc(var(--fs) * .2) var(--cap-outline); paint-order: stroke fill; text-shadow: calc(var(--fs) * .05) calc(var(--fs) * .05) 0 color-mix(in srgb, var(--cap-outline) 62%, transparent); }
.rs-cap-pop [data-w].is-on { color: var(--cap-hi); }
.rs-cap-clean { --k: .8; }
.rs-cap-clean .rs-cap-line { font-weight: 700; -webkit-text-stroke: calc(var(--fs) * .07) color-mix(in srgb, var(--cap-outline) 56%, transparent); text-shadow: calc(var(--fs) * .05) calc(var(--fs) * .05) calc(var(--rs-scale) * 6px) rgba(0, 0, 0, .44); }
.rs-cap-bold { --k: 1.12; }
.rs-cap-bold .rs-cap-line { font-weight: 900; letter-spacing: calc(var(--rs-scale) * 1px); -webkit-text-stroke-width: calc(var(--fs) * .3); text-shadow: calc(var(--fs) * .06) calc(var(--fs) * .06) 0 color-mix(in srgb, var(--cap-outline) 75%, transparent); }
/* The render's entrances: Pop and Bold scale 82% → 106% → 100% in 0.17s; Clean fades in over 0.09s. */
.rs-cap-in { animation: rs-cap-pop .17s linear; }
.rs-cap-clean .rs-cap-in { animation: rs-cap-fade .09s linear; }
@keyframes rs-cap-pop { 0% { transform: scale(.82); opacity: 0; } 53% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rs-cap-fade { from { opacity: 0; } }
.rs-frame.is-dragging .rs-cap-line { cursor: grabbing; }

/* Graphics in the preview */
.rs-ovs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rs-ov { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: grab; touch-action: none; }
.rs-ov img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); user-select: none; -webkit-user-drag: none; }
.rs-ov-missing { display: grid; place-items: center; aspect-ratio: 2; border-radius: 10px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 12px; }
.rs-frame.is-graphics .rs-ov.is-selected { outline: 1.5px dashed rgba(255, 255, 255, .9); outline-offset: 5px; border-radius: 4px; }
.rs-ov-handle { position: absolute; right: -11px; bottom: -11px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, .35); cursor: nwse-resize; display: none; }
.rs-ov-handle::before { content: ""; position: absolute; inset: -12px; }
.rs-frame.is-graphics .rs-ov.is-selected .rs-ov-handle { display: block; }
.rs-frame.is-dragging .rs-ov { cursor: grabbing; }
.rs-anim-pop { animation: rs-pop .38s cubic-bezier(.34, 1.56, .64, 1); }
.rs-anim-fade { animation: rs-fade .3s ease-out; }
@keyframes rs-pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 60% { opacity: 1; } }
@keyframes rs-fade { from { opacity: 0; } }
.rs-guide { position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--accent); opacity: 0; pointer-events: none; transition: opacity .15s; }
.rs-guide.is-on { opacity: .9; }
.rs-safe { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s; }
.rs-frame.is-dragging .rs-safe, .rs-frame.is-safe .rs-safe { opacity: 1; }
.rs-safe i { position: absolute; background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .28) 0 6px, rgba(0, 0, 0, .18) 6px 12px); }
.rs-safe-top { top: 0; left: 0; right: 0; height: 9%; }
.rs-safe-side { top: 46%; bottom: 22%; right: 0; width: 15%; }
.rs-safe-bottom { left: 0; right: 0; bottom: 0; height: 22%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.rs-safe-bottom span { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .85); font-style: normal; }

/* Transport + timeline */
.rs-deck { flex: 0 0 auto; padding: 8px 14px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.rs-transport { display: flex; align-items: center; gap: 12px; height: 46px; }
.rs-play { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 6px 14px -6px rgba(29, 27, 24, .45); transition: transform .2s var(--ease), background .2s; }
.rs-play:hover { background: #2c2925; transform: scale(1.05); }
.rs-play:active { transform: scale(.95); }
.rs-play svg { width: 17px; height: 17px; }
.rs-time { font-family: var(--mono); font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-time b { font-weight: 500; color: var(--ink); }
.rs-flex { flex: 1; }
.rs-frame-seg .filter { padding: 4px 12px; font-size: 12.5px; }
.rs-zoom-btn svg { width: 14px; height: 14px; }
.rs-zoom-btn[aria-disabled="true"] { opacity: .5; cursor: default; }

.rs-tl { position: relative; margin-top: 6px; }
.rs-tl-inner { position: relative; user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer; }
.rs-tl-lane { position: relative; }
.rs-tl-ovs { height: 26px; }
.rs-tl-ov { position: absolute; top: 2px; height: 22px; display: flex; align-items: center; gap: 4px; min-width: 18px; padding: 0 8px 0 3px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.rs-tl-ov img { flex: 0 0 16px; width: 16px; height: 16px; object-fit: contain; }
.rs-tl-ov span { overflow: hidden; text-overflow: ellipsis; }
.rs-tl-ov.is-compact { justify-content: center; padding: 0 2px; }
.rs-tl-ov.is-compact span { display: none; }
.rs-tl-ov:hover { border-color: #d0c8bb; }
.rs-tl-ov.is-selected { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(29, 27, 24, .08); }
.rs-tl-track { position: relative; height: 52px; margin: 4px 0 3px; }
.rs-tl-canvas { position: absolute; top: 0; left: 0; display: block; }
.rs-tl-sel { position: absolute; top: -2px; bottom: -2px; border-radius: 9px; border: 1.5px solid var(--accent); background: rgba(224, 88, 58, .12); pointer-events: none; }
.rs-tl-dim { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: repeating-linear-gradient(-45deg, rgba(250, 248, 244, .86) 0 5px, rgba(250, 248, 244, .7) 5px 10px); pointer-events: none; }
.rs-trim { position: absolute; top: 0; left: 0; z-index: 2; width: 14px; height: 100%; padding: 0; border: 0; background: var(--ink-2); color: #fff; cursor: ew-resize; touch-action: none; transition: background .2s; }
.rs-trim::before { content: ""; position: absolute; inset: -6px -10px; }
.rs-trim i { position: absolute; top: 50%; left: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; border-radius: 1px; background: rgba(255, 255, 255, .75); }
.rs-trim-start { margin-left: -14px; border-radius: 9px 3px 3px 9px; }
.rs-trim-end { border-radius: 3px 9px 9px 3px; }
.rs-trim:hover, .rs-trim.is-dragging { background: var(--accent); }
.rs-trim-tip { position: absolute; z-index: 3; top: -30px; padding: 3px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.rs-tl-zooms { height: 22px; }
.rs-tl-zoom { position: absolute; top: 2px; height: 18px; display: flex; align-items: center; gap: 3px; padding: 0 6px 0 4px; border: 1px solid #f1c3b4; border-radius: 6px; background: var(--accent-soft); color: #b2412a; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.rs-tl-zoom svg { flex: 0 0 11px; width: 11px; height: 11px; stroke-width: 2.4; }
.rs-tl-zoom.is-compact { justify-content: center; padding: 0; }
.rs-tl-zoom.is-compact span { display: none; }
.rs-tl-zoom:hover { border-color: var(--accent); }
.rs-tl-zoom.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(224, 88, 58, .18); }
.rs-zoom-pop { position: absolute; z-index: 5; bottom: calc(100% + 6px); left: clamp(8px, calc(var(--x) - 165px), calc(100% - 338px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 330px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: menu-in .2s var(--ease); cursor: default; }
.rs-zoom-pop-head { flex: 1 0 100%; display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.rs-zoom-pop-head span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rs-zoom-pop .btn { margin-left: auto; }
.rs-tl-ruler { position: relative; height: 16px; margin-top: 2px; }
.rs-tl-ruler span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.rs-playhead { position: absolute; z-index: 3; top: 0; bottom: 18px; left: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.rs-playhead i { position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.rs-tl.is-scrubbing .rs-tl-inner { cursor: grabbing; }
.rs-tl.is-trimming .rs-playhead { opacity: 0; }

/* ---------- Right panel ---------- */
.rs-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.rs-tabs-wrap { padding: 12px 12px 4px; }
.rs-tabs { display: flex; width: 100%; }
.rs-tabs .filter { flex: 1; padding: 7px 6px; text-align: center; }
.rs-panel-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 28px; scrollbar-width: thin; scrollbar-color: #ddd6cb transparent; }
.rs-pane { animation: rs-pane-in .3s var(--ease); }
@keyframes rs-pane-in { from { opacity: 0; transform: translateY(4px); } }
.rs-section + .rs-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.rs-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.rs-h-note { font-size: 12px; font-weight: 500; color: var(--muted); }
.rs-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rs-h-row .rs-h { margin: 0; }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.rs-row-text { min-width: 0; }
.rs-row-text strong { display: block; font-size: 14px; font-weight: 600; }
.rs-row-text span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.rs-panel .switch { position: relative; }
.rs-panel .switch::before { content: ""; position: absolute; inset: -10px -6px; }
.rs-field { padding: 10px 0 8px; }
.rs-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rs-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.rs-value { font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-range { --fill: 50%; display: block; width: 100%; height: 26px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.rs-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ink-2) var(--fill), #e8e1d6 var(--fill)); }
.rs-range::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ink-2) var(--fill), #e8e1d6 var(--fill)); }
.rs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(29, 27, 24, .14), 0 2px 6px rgba(29, 27, 24, .22); transition: transform .2s var(--ease); }
.rs-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(29, 27, 24, .14), 0 2px 6px rgba(29, 27, 24, .22); }
.rs-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.rs-range:focus-visible { outline: none; }
.rs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(29, 27, 24, .14), 0 0 0 5px rgba(224, 88, 58, .22); }
.rs-range-ends { display: flex; justify-content: space-between; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.rs-note { margin: 2px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.rs-note.is-warn { color: var(--amber); }
.rs-stepper { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.rs-stepper button { width: 36px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: none; font-size: 18px; line-height: 1; color: var(--ink-2); transition: background .2s; }
.rs-stepper button:hover:not(:disabled) { background: var(--bg); }
.rs-stepper output { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-stepper .rs-stepper-text { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 600; }
.rs-chips { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #f1ede6; }
.rs-chip-btn { padding: 5px 12px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.rs-chip-btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.rs-mini-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 18px; border: 1.5px dashed var(--line-2); border-radius: 16px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rs-mini-empty > svg { width: 22px; height: 22px; margin-bottom: 4px; color: var(--accent); }
.rs-mini-empty strong { font-size: 14.5px; color: var(--ink); }
.rs-mini-empty.is-quiet { margin-top: 16px; border-style: solid; border-color: var(--line); background: var(--surface-2); }
.rs-mini-posy { width: 76px; height: 76px; margin: -6px 0 2px; }
.rs-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 14px 14px 16px; border-radius: 16px; background: var(--bg); }
.rs-foot > div { flex: 1; min-width: 0; }
.rs-foot strong { display: block; font-size: 13.5px; }
.rs-foot span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* Transcript */
.rs-card-tools { padding: 2px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.rs-card-tools .rs-row + .rs-field { border-top: 1px solid var(--line); }
.rs-hint { margin: 14px 2px 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rs-hint kbd, .rs-selbar kbd { padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.rs-words { outline: none; font-size: 15.5px; line-height: 1.95; color: var(--ink-2); border-radius: 12px; }
.rs-words:focus-visible { box-shadow: 0 0 0 3px rgba(224, 88, 58, .15); }
.rs-para { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.rs-para p { margin: 0; overflow-wrap: anywhere; }
.rs-stamp { padding-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.rs-para.is-cut .rs-stamp { color: #c9a39a; }
.rs-w { padding: 2px 1px; border-radius: 5px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rs-w:hover { background: #f3eee7; }
.rs-w.is-now { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.rs-w.is-cut { color: #bab2a6; text-decoration: line-through; text-decoration-color: rgba(194, 59, 42, .5); text-decoration-thickness: 1.5px; }
.rs-w.is-edited { text-decoration: underline dotted var(--blue); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.rs-w.is-hidden-cap { color: var(--faint); font-style: italic; }
.rs-w.is-sel { background: var(--accent-soft); color: #8a2f1c; }
.rs-w.is-cut.is-sel { background: #f7e9e4; color: #b58e84; }
.rs-pause { display: inline-flex; align-items: center; gap: 2px; min-width: 19px; height: 19px; padding: 0 5px; border: 0; border-radius: 999px; background: none; font-family: var(--mono); font-size: 10.5px; line-height: 1; color: var(--muted); text-decoration: underline dashed 1px; text-underline-offset: 3px; vertical-align: 1px; transition: color .2s, background .2s, box-shadow .2s; }
.rs-pause svg { width: 12px; height: 12px; }
.rs-pause:hover { color: var(--accent); background: var(--accent-soft); }
.rs-pause.is-kept { text-decoration: none; padding: 0 7px; color: var(--amber); background: var(--amber-soft); }
.rs-pause.is-kept:hover { color: var(--accent); background: var(--accent-soft); }
.rs-w-edit { display: inline-block; max-width: 100%; padding: 0 5px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 3px rgba(224, 88, 58, .15); font: inherit; line-height: 1.5; outline: none; }
.rs-selbar { position: sticky; z-index: 3; bottom: 10px; display: flex; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 14px 34px -12px rgba(29, 27, 24, .55); animation: item-in .3s var(--ease); }
.rs-selbar-count { margin-right: 6px; font-size: 13px; font-weight: 500; color: #bdb6ab; white-space: nowrap; }
.rs-selbar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: #f4efe8; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s; }
.rs-selbar button:hover { background: rgba(255, 255, 255, .12); }
.rs-selbar svg { width: 15px; height: 15px; }
.rs-selbar .rs-selbar-x { width: 32px; padding: 0; justify-content: center; color: #bdb6ab; }

/* Captions */
.rs-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rs-preset { display: flex; flex-direction: column; gap: 1px; padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.rs-preset:hover { border-color: var(--line-2); transform: translateY(-1px); }
.rs-preset.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 27, 24, .07); }
.rs-preset-art { font-family: "Reel Figtree", var(--sans); display: flex; align-items: center; justify-content: center; gap: .25em; height: 62px; margin-bottom: 7px; border-radius: 11px; background: linear-gradient(155deg, #6a5a4e, #2b2521); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.rs-preset-art span, .rs-preset-art b { font-weight: inherit; }
.rs-art-pop { -webkit-text-stroke: 1.6px #000; paint-order: stroke fill; }
.rs-art-pop b { color: var(--accent); display: inline-block; transform: scale(1.1); }
.rs-art-clean { font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.rs-art-bold { font-weight: 900; font-size: 16px; -webkit-text-stroke: 2.6px #000; paint-order: stroke fill; }
.rs-art-bold b { color: #ffd84d; }
.rs-art-none { background: repeating-linear-gradient(-45deg, #f3efe8 0 8px, #ece6dc 8px 16px); }
.rs-art-none i { width: 26px; height: 2px; border-radius: 2px; background: #cfc6b8; transform: rotate(-35deg); }
.rs-preset-name { padding: 0 4px; font-size: 13.5px; font-weight: 600; }
.rs-preset-hint { padding: 0 4px; font-size: 12px; color: var(--muted); }
.rs-color-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 10px; padding: 7px 0; }
.rs-color-row .rs-label { padding-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.rs-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-swatch { position: relative; width: 28px; height: 28px; flex: 0 0 28px; padding: 0; border: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(29, 27, 24, .14); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.rs-swatch::before { content: ""; position: absolute; inset: -5px; }
.rs-swatch:hover { transform: scale(1.08); }
.rs-swatch.is-on { box-shadow: inset 0 0 0 1px rgba(29, 27, 24, .14), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.rs-swatch.is-brand:not(.is-brand + .is-brand) { margin-left: 9px; }
.rs-swatch.is-brand:not(.is-brand + .is-brand)::after { content: ""; position: absolute; left: -10px; top: 5px; bottom: 5px; width: 1px; background: var(--line-2); }
.rs-swatch-custom { background: conic-gradient(#ff5f5f, #ffd84d, #62d26f, #4fb6ff, #9a6bff, #ff5fbf, #ff5f5f); overflow: hidden; }
.rs-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }

/* Graphics */
.rs-ov-list { display: flex; flex-direction: column; gap: 8px; }
.rs-ov-item { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .25s var(--ease); animation: item-in .3s var(--ease); }
.rs-ov-item.is-open { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.rs-ov-item.is-cut { opacity: .6; }
.rs-ov-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 0; background: none; text-align: left; transition: background .2s; }
.rs-ov-row:hover { background: var(--surface-2); }
.rs-thumb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; overflow: hidden; background: conic-gradient(#f3efe8 25%, #fff 0 50%, #f3efe8 0 75%, #fff 0) 0 0 / 12px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.rs-thumb img { max-width: 82%; max-height: 82%; object-fit: contain; }
.rs-thumb svg { width: 18px; height: 18px; }
.rs-ov-text { min-width: 0; }
.rs-ov-text strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ov-text span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ov-time { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.rs-ov-time small { display: block; font-size: 11px; color: var(--faint); }
.rs-ov-controls { padding: 2px 14px 10px; border-top: 1px solid var(--line); animation: item-in .3s var(--ease); }
.rs-ov-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.rs-ov-foot .rs-note { margin: 0; }
.rs-ov-foot .btn svg { width: 14px; height: 14px; }
.rs-library { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); animation: item-in .3s var(--ease); }
.rs-library .rs-note { margin: 0 2px 8px; }
.rs-lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rs-lib-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 4px; border: 1px solid transparent; border-radius: 12px; background: none; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .2s, border-color .2s; }
.rs-lib-item:hover { background: var(--surface); border-color: var(--line); }
.rs-lib-item > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-lib-item .rs-thumb { width: 52px; height: 52px; }
.rs-lib-upload .rs-thumb { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
.rs-rules { display: flex; flex-direction: column; }
.rs-rule { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rs-rule:first-child { padding-top: 0; }
.rs-rule-body { min-width: 0; }
.rs-rule-body strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.rs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.rs-tags .tag { min-height: 26px; font-size: 12.5px; }
.rs-tag-field { flex: 1; min-width: 96px; height: 26px; padding: 0 4px; border: 0; border-bottom: 1px dashed var(--line-2); background: none; outline: none; font-size: 13px; transition: border-color .2s; }
.rs-tag-field:focus { border-bottom-color: var(--accent); }
.rs-rule-x { width: 32px; height: 32px; flex-basis: 32px; color: var(--faint); }
.rs-rule-x:hover:not(:disabled) { color: var(--red); background: var(--red-soft); }
.rs-rules-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rs-rules-actions .btn { cursor: pointer; }
.rs-rules-actions svg { width: 14px; height: 14px; }
.rs-dropzone { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 16px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.rs-dropzone:hover { border-color: var(--accent); background: #fffaf8; }
.rs-dropzone svg { width: 20px; height: 20px; margin-bottom: 6px; color: var(--accent); }
.rs-dropzone strong { font-size: 14px; }
.rs-dropzone span { font-size: 12.5px; color: var(--faint); }

/* Sound */
.rs-tracks { display: flex; flex-direction: column; gap: 6px; }
.rs-track { display: flex; align-items: center; min-height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.rs-track.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 27, 24, .05); }
.rs-track-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border: 0; background: none; text-align: left; }
.rs-radio { flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border .2s var(--ease); }
.rs-track.is-on .rs-radio { border: 5.5px solid var(--ink); }
.rs-track-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-track-dur { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.rs-track-play { margin-right: 5px; }
.rs-track-play svg { width: 15px; height: 15px; }
.rs-track-upload { gap: 11px; padding: 10px 12px; border-style: dashed; cursor: pointer; }
.rs-track-upload:hover { border-color: var(--accent); background: #fffaf8; }
.rs-track-upload > svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); }
.rs-track-upload strong { display: block; font-size: 13.5px; font-weight: 600; }
.rs-track-upload small { display: block; font-size: 12px; line-height: 1.35; color: var(--faint); }
.rs-tracks + .rs-field { margin-top: 8px; }
.rs-callout { display: flex; gap: 12px; margin-top: 22px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #fff8f5, #fdefe9); border: 1px solid #f6d6ca; }
.rs-callout-icon { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.rs-callout-icon svg { width: 18px; height: 18px; }
.rs-callout strong { display: block; font-size: 14px; }
.rs-callout p { margin: 3px 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rs-callout .btn svg { width: 14px; height: 14px; }

/* Dialogs */
.rs-modal { width: min(480px, calc(100% - 24px)); }
.rs-modal .modal-icon svg { width: 22px; height: 22px; }
.rs-modal textarea.input { min-height: 110px; }
.rs-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.rs-modal .btn-block svg { width: 16px; height: 16px; }
.rs-howto { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 22px; padding: 0; list-style: none; }
.rs-howto li { display: flex; gap: 12px; }
.rs-howto li > i { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-style: normal; font-size: 12.5px; font-weight: 700; }
.rs-howto strong { display: block; font-size: 14.5px; }
.rs-howto span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- Responsive ---------- */
/* Panel pieces added with the review fixes */
.rs-details { max-width: 440px; margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: left; }
.rs-details summary { cursor: pointer; text-align: center; }
.rs-details code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; word-break: break-word; }
.rs-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--accent-soft); border: 1px solid #f6d3c7; }
.rs-suggest-icon { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--accent); }
.rs-suggest-icon svg { width: 17px; height: 17px; }
.rs-suggest-text { flex: 1; min-width: 150px; font-size: 13px; line-height: 1.4; }
.rs-suggest-text strong { display: block; font-size: 13.5px; }
.rs-suggest-text span { color: var(--muted); }
.rs-suggest-actions { display: flex; gap: 4px; margin-left: auto; }
.rs-more, .rs-cleanup { border-top: 1px solid var(--line); }
.rs-more > summary, .rs-cleanup > summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
.rs-more > summary::-webkit-details-marker, .rs-cleanup > summary::-webkit-details-marker { display: none; }
.rs-more > summary span, .rs-cleanup > summary span { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.rs-more > summary::after, .rs-cleanup > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.rs-more[open] > summary::after, .rs-cleanup[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.rs-h-colors { margin-top: 12px; }
.rs-cleanup { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; background: var(--surface-2); }
.rs-cleanup > summary { padding: 12px 0; }
.rs-cleanup .rs-card-tools { padding: 0; border: 0; background: none; }
.rs-post-note { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 1180px) {
  .rs-body { grid-template-columns: minmax(0, 1fr) 356px; gap: 16px; padding: 14px 16px 16px; }
}
@media (hover: none) {
  .rs-frame:not(.is-playing) .rs-bigplay { opacity: 1; }
  .rs-card-more { opacity: 1; }
  .rs-card-cta { display: none; }
}
@media (max-width: 767px) {
  .rs-studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rs-studio-grid .rs-add-card { min-height: 220px; }
  .rs-card { border-radius: 16px; }
  .rs-card-body { padding: 10px 11px 12px; }
  .rs-card-body strong { font-size: 14px; }
  .rs-card-more { width: 36px; height: 36px; }
  .rs-empty-drop { padding: 40px 18px 32px; }

  .rs-top { flex-basis: 56px; gap: 4px; padding: 0 8px 0 4px; }
  .rs-back { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .rs-back span, .rs-hide-sm, .rs-save span, .rs-history-top { display: none; }
  .rs-show-sm, .rs-history-sm { display: inline-flex; }
  .rs-history-sm { margin: 0; }
  .rs-editor .btn-xs { height: 40px; padding: 0 14px; }
  .rs-title-wrap { gap: 6px; }
  .rs-title { font-size: 15.5px; margin-left: 0; padding: 5px 6px; }
  .rs-top-actions { gap: 4px; }
  .rs-history { margin-right: 0; }
  .rs-icon { width: 44px; height: 44px; flex-basis: 44px; }
  .rs-export-btn { width: 44px; height: 44px; padding: 0; }
  .rs-export-btn .rs-chev { display: none; }
  .rs-post { min-width: 0; height: 40px; padding: 0 18px; }
  .rs-render-pill { width: 30px; padding: 0; justify-content: center; }
  .rs-render-pill span { display: none; }
  .rs-menu { position: fixed; top: 60px; left: 16px; right: 16px; min-width: 0; }
  .rs-banners { padding: 8px 16px 0; }
  .rs-banner { flex-wrap: wrap; font-size: 13px; }
  .rs-banner-actions { width: 100%; padding-left: 42px; }

  .rs-body { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .rs-main { flex: 0 0 auto; gap: 8px; padding: 10px 16px 0; }
  .rs-stage { flex: 0 0 auto; height: clamp(210px, 34vh, 360px); }
  .rs-frame { border-radius: 16px; }
  .rs-deck { padding: 2px 10px 6px; border-radius: 16px; }
  .rs-transport { height: 48px; gap: 8px; }
  .rs-play { width: 44px; height: 44px; flex-basis: 44px; }
  .rs-zoom-btn { height: 36px; }
  .rs-zoom-btn span { display: none; }
  .rs-frame-seg .filter { min-height: 32px; }
  .rs-tl { margin-top: 0; }
  .rs-tl-ovs { height: 20px; }
  .rs-tl-ov { height: 18px; top: 1px; }
  .rs-tl-track { height: 36px; margin: 2px 0; }
  .rs-trim { width: 16px; }
  .rs-trim-start { margin-left: -16px; }
  .rs-trim::before { inset: -8px -14px; }
  .rs-tl-ruler { height: 14px; }

  .rs-panel { flex: 1; margin-top: 10px; border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: 0 -12px 30px -22px rgba(29, 27, 24, .35); }
  .rs-tabs-wrap { padding: 8px 12px 2px; }
  .rs-tabs .filter { min-height: 44px; padding: 0 4px; font-size: 13.5px; }
  .rs-panel-body { padding: 12px 16px 28px; }
  .rs-stepper { height: 44px; }
  .rs-stepper button { width: 44px; height: 42px; }
  .rs-swatch { width: 32px; height: 32px; flex-basis: 32px; }
  .rs-swatches { gap: 10px; }
  .rs-chip-btn { min-height: 38px; }
  .rs-lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The selection bar docks above the home indicator, clear of the words; toasts sit above it. */
  .rs-selbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 8; margin: 0 auto; }
  .rs-words { padding-bottom: 64px; }
  .rs-selbar button { height: 40px; }
  .rs-selbar .rs-selbar-x { width: 40px; }
  .rs-modal-actions .btn { flex: 1; }
}
@media (max-width: 767px) {
  body.rs-editor-open .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .rs-stage { transition: height .25s var(--ease); }
  .rs-editor.is-compact .rs-stage { height: 19vh; }
  .rs-post-note { display: none; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .rs-stage { height: 30vh; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-zoom { transition: none; }
  .rs-anim-pop, .rs-anim-fade, .rs-cap-in, .rs-placeholder, .rs-card-posy, .rs-processing-posy, .rs-loading-posy { animation: none; }
}

/* ---------- Where Studio meets the rest of the app ---------- */
.upload-area.rs-locked { cursor: default; border-style: solid; border-color: var(--line); }
.upload-area.rs-locked:hover { border-color: var(--line); background: var(--surface-2); }
.composer-studio { display: block; margin: 2px 0 4px; text-align: left; }
#postForm.is-reel-post label[for="postTypeSelect"], #postForm.is-reel-post #postTypeSelect, #postForm.is-reel-post #formatHint { display: none; }
.rs-post-line { margin: 0 0 2px; font-size: 13.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.upload-area .rs-edit-badge { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(20, 18, 16, .7); color: #fff; font-size: 12px; font-weight: 500; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.post-more { display: inline-flex; }
.post-more-btn { width: 32px; padding: 0; justify-content: center; }
.post-more .menu { min-width: 170px; }

/* Direct editing workspace: Row Posts' paper surfaces, with a quiet preview stage. */
.rs-direct-body { grid-template-columns: 236px minmax(260px, 1fr) 352px; grid-template-rows: minmax(220px, 1fr) 300px; grid-template-areas: "assets preview properties" "timeline timeline timeline"; gap: 12px; padding: 12px; }
.rs-direct-body .rs-main { display: contents; }
.rs-direct-body .rs-stage { grid-area: preview; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 18px; background: #ede9e2; background-image: radial-gradient(#d5cfc4 .7px, transparent .7px); background-size: 12px 12px; overflow: hidden; }
.rs-direct-body .rs-panel { grid-area: properties; min-width: 0; border-radius: 16px; }
.rs-direct-body .rs-deck { grid-area: timeline; display: flex; position: relative; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.rs-direct-body .rs-transport { height: 46px; flex: 0 0 46px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.rs-direct-body .rs-frame { border-radius: 4px; box-shadow: 0 5px 24px #1d1b1825; }
.rs-direct-body .rs-panel-body { padding: 16px; }
.rs-assets { grid-area: assets; min-height: 0; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: box-shadow .18s; }
.rs-assets.is-drag-over { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.rs-shelf-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rs-eyebrow { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.rs-shelf-heading h3 { font-size: 20px; font-weight: 650; }
.rs-asset-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rs-shelf-actions { display: flex; gap: 6px; margin-top: 8px; }
.rs-shelf-actions .btn { flex: 1; }
.rs-import-status { font-size: 11px; color: var(--muted); margin: 10px 0 16px; overflow-wrap: anywhere; }
.rs-asset-list { display: grid; gap: 8px; }
.rs-asset { display: flex; gap: 9px; padding: 8px; align-items: center; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.rs-asset:hover { border-color: var(--accent); background: var(--accent-soft); }
.rs-asset img { width: 44px; height: 52px; object-fit: cover; background: var(--bg); border-radius: 5px; }
.rs-asset > span { min-width: 0; }
.rs-asset strong { display: block; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rs-asset small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.rs-direct-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.rs-assets > .rs-direct-note { margin-top: 18px; }
.rs-shortcuts { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.rs-shortcuts summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.rs-shortcuts p { margin-top: 10px; line-height: 1.9; }
.rs-text-properties, .rs-clip-properties { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.rs-text-properties h4, .rs-clip-properties h4 { margin: 0 0 10px; font-size: 13px; }
.rs-text-properties label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); margin: 10px 0; min-width: 0; }
.rs-text-properties .input { width: 100%; min-width: 0; min-height: 32px; padding: 7px 8px; border-radius: 7px; font-size: 12px; }
.rs-text-properties textarea { resize: vertical; }
.rs-text-properties input[type=color] { height: 34px; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; }
.rs-property-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs-clip-properties p { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.rs-clip-order { display: flex; gap: 6px; margin: 12px 0; }
.rs-direct-tools { display: flex; justify-content: space-between; align-items: center; flex: 0 0 38px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); gap: 12px; }
.rs-edit-actions, .rs-timeline-scale { display: flex; gap: 4px; align-items: center; }
.rs-edit-actions .btn { min-height: 26px; height: 26px; padding: 0 9px; font-size: 11px; }
.rs-edit-actions .rs-direct-note { margin-left: 8px; }
.rs-timeline-scale .rs-icon { width: 26px; height: 26px; flex-basis: 26px; font-size: 18px; }
.rs-timeline-scale input { width: 90px; accent-color: var(--accent); height: 18px; }
.rs-timeline-scale .btn { font-size: 11px; padding: 0 8px; }
.rs-direct-tl { flex: 1; min-height: 0; margin: 0 0 0 68px; padding: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x; scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
.rs-direct-tl .rs-tl-inner { position: relative; min-height: 196px; overflow: visible; padding-bottom: 8px; user-select: none; touch-action: none; }
.rs-direct-clips { height: 52px; position: relative; margin: 2px 0 5px; }
.rs-direct-clip { position: absolute; top: 0; height: 52px; min-width: 3px; border: 2px solid #bba991; border-radius: 7px; background-color: #e5dbcd; background-image: linear-gradient(#35291c18,#35291c44),var(--clip-thumb); background-size: auto 52px; background-repeat: repeat-x; overflow: hidden; cursor: grab; touch-action: none; transition: border-color .15s; }
.rs-direct-clip:active { cursor: grabbing; }
.rs-direct-clip.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rs-clip-label { position: absolute; bottom: 4px; left: 10px; right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 650; color: white; text-shadow: 0 1px 3px #000; pointer-events: none; }
.rs-clip-edge { position: absolute; z-index: 2; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: #fff7; opacity: 0; }
.rs-direct-clip:is(:hover,.is-selected) .rs-clip-edge, .rs-clip-edge:focus-visible { opacity: 1; }
.rs-clip-edge::after { content: ''; position: absolute; width: 2px; height: 16px; border-radius: 2px; background: var(--ink); top: 16px; left: 3px; }
.rs-clip-edge[data-edge=start] { left: 0; }.rs-clip-edge[data-edge=end] { right: 0; }
.rs-direct-lane, .rs-direct-tl .rs-tl-ovs { height: 26px; position: relative; margin: 0; border-bottom: 1px solid var(--line); }
.rs-layer-chip { position: absolute; top: 3px; height: 20px; padding: 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font-size: 10px; border: 1px solid transparent; border-radius: 4px; background: var(--accent-soft); color: var(--ink-2); }
.rs-title-chip { background: #f9dfbf; }.rs-caption-chip { background: #fbe9d9; }.rs-graphic-chip { background: #e3e9f3; }.rs-audio-chip { background: #dfede0; }
.rs-layer-chip:hover, .rs-layer-chip.is-selected { border-color: var(--accent); }
.rs-direct-tl .rs-tl-zooms { display: none; }
.rs-direct-tl .rs-tl-ruler { position: relative; height: 22px; margin: 0; border-bottom: 1px solid var(--line); }
.rs-direct-tl .rs-tl-ruler span { top: 3px; transform: none; font-size: 9px; }
.rs-direct-tl .rs-playhead { top: 0; bottom: 0; pointer-events: none; background: var(--accent); z-index: 6; }
.rs-direct-tl .rs-playhead i { background: var(--accent); border-color: var(--accent); }
.rs-track-labels { position: absolute; left: 0; top: 106px; width: 68px; display: grid; grid-template-rows: 57px repeat(4,26px); font-size: 10px; color: var(--muted); background: var(--surface); z-index: 2; border-right: 1px solid var(--line); }
.rs-track-labels span { display: flex; align-items: center; padding-left: 14px; }
.rs-track-empty { border: 0; background: none; font-size: 10px; color: var(--muted); height: 25px; padding-left: 16px; }
.rs-text-layers { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.rs-title-layer { position: absolute; max-width: 88%; transform: translate(-50%,-50%); white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; font-family: 'Reel Figtree', sans-serif; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 2px #000,0 -1px 2px #000,1px 0 2px #000,-1px 0 2px #000; cursor: move; pointer-events: auto; touch-action: none; }
.rs-title-layer.is-selected { outline: 1px solid var(--accent); outline-offset: 5px; }
@media (max-width: 1200px) and (min-width: 901px) { .rs-direct-body { grid-template-columns: 200px minmax(220px,1fr) 310px; } .rs-direct-body .rs-tabs .filter { font-size: 12px; padding-inline: 5px; } }
@media (max-width: 900px) {
  .rs-direct-body { display: grid; overflow-y: auto; grid-template-columns: 190px minmax(0,1fr); grid-template-rows: 300px 300px minmax(300px,auto); grid-template-areas: 'assets preview' 'timeline timeline' 'properties properties'; padding: 8px; gap: 8px; }
  .rs-direct-body .rs-main { display: contents; }
  .rs-direct-body .rs-stage { height: auto; padding: 0; }
  .rs-direct-body .rs-panel { margin-top: 0; }
  .rs-direct-body .rs-deck { padding: 0; }
  .rs-direct-body .rs-transport { height: 46px; }
  .rs-assets { padding: 12px; }
  .rs-edit-actions .rs-direct-note { display: none; }
}
@media (max-width: 520px) {
  .rs-direct-body { grid-template-columns: 140px minmax(0,1fr); grid-template-rows: 270px 290px minmax(300px,auto); }
  .rs-assets { padding: 8px; border-radius: 12px; }
  .rs-shelf-heading { margin-bottom: 10px; }.rs-shelf-heading h3 { font-size: 17px; }.rs-eyebrow { font-size: 8px; }
  .rs-assets .btn { padding-inline: 7px; font-size: 11px; }
  .rs-shelf-actions { flex-wrap: wrap; }.rs-asset img { width: 24px; height: 38px; }.rs-asset { gap: 5px; padding: 5px; }.rs-asset small { font-size: 8px; }
  .rs-direct-tools { padding: 0 5px; gap: 2px; }.rs-edit-actions { gap: 0; }.rs-edit-actions .btn { padding: 0 6px; }.rs-timeline-scale input { width: 46px; }
  .rs-direct-body .rs-transport { padding: 0 8px; gap: 4px; }.rs-direct-body .rs-zoom-btn { padding: 0 8px; }.rs-direct-body .rs-history-sm { display: none; }
  .rs-text-properties .rs-property-pair { grid-template-columns: 1fr; gap: 0; }
}
.rs-direct-body { grid-template-columns: 56px 236px minmax(260px,1fr) 352px; grid-template-areas: 'rail assets preview properties' 'rail timeline timeline timeline'; }
.rs-tool-rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 7px; }
.rs-tool-rail button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 54px; min-height: 56px; border: 0; background: none; border-radius: 12px; color: var(--muted); font-size: 9px; }
.rs-tool-rail button:hover, .rs-tool-rail button:focus-visible { background: var(--accent-soft); color: var(--accent); }
.rs-tool-rail svg { width: 20px; height: 20px; }.rs-tool-rail b { font-size: 22px; line-height: 22px; font-weight: 600; }
.rs-text-preset { display: flex; flex-direction: column; gap: 5px; justify-content: center; width: 100%; min-height: 92px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.rs-text-preset:hover { background: var(--accent-soft); border-color: var(--accent); }.rs-text-preset strong { font-size: 23px; letter-spacing: -.025em; }.rs-text-preset small { font-size: 10px; color: var(--muted); }
.rs-text-library { display: grid; gap: 8px; margin-top: 14px; }
.rs-text-edge { position: absolute; width: 7px; top: 0; bottom: 0; cursor: ew-resize; background: #0001; }.rs-text-edge[data-text-edge=start] { left: 0; }.rs-text-edge[data-text-edge=end] { right: 0; }
.rs-title-chip { cursor: grab; touch-action: none; }
.rs-direct-body .rs-tabs .filter { padding-inline: 6px; font-size: 11.5px; }
.rs-direct-body .rs-text-properties, .rs-direct-body .rs-clip-properties { border: 0; margin: 0; padding: 0; }
.rs-clip-properties label { display: grid; font-size: 12px; gap: 6px; margin-top: 18px; }.rs-clip-properties .input { width: 100%; min-width: 0; font-size: 12px; }
.rs-basic-empty h3 { font: var(--title-md); letter-spacing: -.02em; padding: 14px 0 8px; }.rs-basic-empty p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.rs-basic-empty dl { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 20px 0; border-block: 1px solid var(--line); font-size: 11px; margin: 24px 0; }.rs-basic-empty dt { color: var(--muted); }.rs-basic-empty dd { text-align: right; margin: 0; }
.rs-snap-toggle[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 1250px) and (min-width: 901px) { .rs-direct-body { grid-template-columns: 50px 190px minmax(220px,1fr) 300px; gap: 8px; }.rs-tool-rail button { width: 48px; }.rs-edit-actions .rs-direct-note { display: none; } }
@media (max-width: 900px) { .rs-direct-body { grid-template-columns: 170px minmax(0,1fr); grid-template-rows: 52px 300px 300px minmax(300px,auto); grid-template-areas: 'rail rail' 'assets preview' 'timeline timeline' 'properties properties'; }.rs-tool-rail { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 6px; overflow-x: auto; }.rs-tool-rail button { min-height: 48px; flex: 0 0 54px; gap: 2px; }.rs-tool-rail svg { width: 17px; height: 17px; }.rs-direct-body .rs-tabs .filter { font-size: 13px; } }
@media (max-width: 520px) { .rs-direct-body { grid-template-columns: 130px minmax(0,1fr); grid-template-rows: 48px 240px 290px minmax(300px,auto); }.rs-tool-rail { gap: 3px; }.rs-tool-rail button { width: 48px; flex-basis: 48px; font-size: 8px; }.rs-edit-actions .rs-snap-toggle { display: none; }.rs-timeline-scale .rs-icon { width: 23px; flex-basis: 23px; }.rs-direct-body .rs-tabs .filter { font-size: 11px; } }
.rs-title-layer { width: 88%; white-space: pre; overflow-wrap: normal; }
.rs-clip-menu { position: fixed; z-index: 40; width: 204px; padding: 5px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.rs-clip-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; background: none; padding: 10px 9px; border-radius: 7px; text-align: left; font-size: 12px; }.rs-clip-menu button:hover { background: var(--accent-soft); }.rs-clip-menu kbd { font-size: 9px; color: var(--muted); }.rs-clip-menu hr { border: 0; border-top: 1px solid var(--line); }
.rs-timeline-scale .btn { height: 26px; min-height: 26px; }
body.rs-editor-open .toast { left: 50%; }