.storyboard-frame{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0c1010;border:1px solid #36453b;border-radius:10px;color:#f7faf8;display:flex;align-items:center;justify-content:center}
.storyboard-frame[data-ratio="9:16"]{aspect-ratio:9/16;max-height:590px;width:min(100%,332px);max-width:100%;margin:auto}
.storyboard-image{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--shot-position,center);transform-origin:var(--shot-position,center);position:absolute;inset:0;z-index:-2;transition:transform .25s ease;transform:scale(1)}
.storyboard-frame[data-composition="medium"] .storyboard-image{transform:scale(1.08)}
.storyboard-frame[data-composition="close"] .storyboard-image{transform:scale(1.22);object-position:var(--shot-position,center)}
.storyboard-frame[data-composition="detail"] .storyboard-image{transform:scale(1.4);object-position:var(--shot-position,center)}
.storyboard-frame.has-reference:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 32%,rgba(0,0,0,.78))}
.storyboard-frame-top,.storyboard-frame-bottom{position:absolute;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:600;letter-spacing:.03em}
.storyboard-frame-top{top:16px}.storyboard-frame-top span:first-child{background:#112119d9;border:1px solid #62836c;padding:5px 8px;border-radius:4px}.storyboard-frame-bottom{bottom:14px;color:#d4e0d8}.storyboard-frame-bottom span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}
.storyboard-caption{position:absolute;left:7%;right:7%;bottom:47px;text-align:center;max-height:40%;overflow:auto;text-shadow:0 1px 3px #000}
.storyboard-action{font-size:clamp(12px,1.4vw,17px);line-height:1.7;margin:0 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.storyboard-dialogue{font-size:clamp(15px,1.7vw,22px);line-height:1.5;font-weight:650;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.storyboard-placeholder{max-width:80%;max-height:64%;padding:24px 0;overflow:auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.storyboard-placeholder-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #658372;border-radius:6px;color:#b7f5cb;font-size:18px;font-variant-numeric:tabular-nums}
.storyboard-placeholder strong{font-size:clamp(14px,1.55vw,20px);line-height:1.7;font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}.storyboard-placeholder small{color:#9cad9f;font-size:11px}
.no-reference:has(.storyboard-dialogue) .storyboard-placeholder{padding-bottom:55px}
@media(max-width:640px){.storyboard-frame{min-height:205px}.storyboard-frame[data-ratio="9:16"]{max-height:510px;width:min(100%,287px)}.storyboard-frame-top,.storyboard-frame-bottom{left:10px;right:10px;font-size:10px}.storyboard-frame-top{top:10px}.storyboard-caption{left:14px;right:14px;bottom:36px}.storyboard-action{font-size:12px}.storyboard-dialogue{font-size:14px}.storyboard-placeholder{max-width:85%;gap:7px;padding:10px 0}.storyboard-placeholder-mark{width:26px;height:26px;font-size:12px}.storyboard-placeholder strong{font-size:13px}.storyboard-placeholder small{font-size:10px}.no-reference:has(.storyboard-dialogue) .storyboard-placeholder{padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){.storyboard-image{transition:none}}
/* Text-only frames must remain readable without an overlaid caption or inner scroll trap. */
.storyboard-frame{min-width:0;box-sizing:border-box}
.storyboard-frame.no-reference{display:block;aspect-ratio:auto;min-height:300px;padding:65px 28px 48px}
.no-reference .storyboard-placeholder{max-width:none;max-height:none;padding:0;overflow:visible;gap:12px}
.no-reference:has(.storyboard-dialogue) .storyboard-placeholder{padding:0}
.no-reference .storyboard-caption{position:static;max-height:none;padding:18px 0 0;text-shadow:none;overflow:visible}
@media(max-width:640px){.storyboard-frame{min-height:0}.storyboard-frame.no-reference{min-height:280px;padding:58px 20px 44px}.no-reference .storyboard-placeholder{padding:0}.no-reference .storyboard-caption{padding-top:14px}}

/* Long copy stays complete in the inspector and export; the frame shows a readable excerpt. */
.storyboard-frame.has-reference .storyboard-caption{overflow:hidden;max-height:none}
.storyboard-action,.storyboard-dialogue{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.no-reference .storyboard-placeholder strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.no-reference .storyboard-dialogue{-webkit-line-clamp:4}
.shot-inspector dd{overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:640px){.has-reference .storyboard-action{-webkit-line-clamp:1}.has-reference .storyboard-caption{bottom:36px}.no-reference .storyboard-placeholder strong{-webkit-line-clamp:5}}