.storyboard-title{margin:0 0 20px;font-size:1.4em;color:#e8edf3;display:flex;align-items:center;gap:10px}.storyboard-title .generator-icon{color:#6afcff}.storyboard-frames{margin:15px 0;border-radius:8px;overflow:hidden}.storyboard-layout-filmstrip{display:flex;gap:2px;overflow-x:auto;padding:15px 0;background:linear-gradient(180deg,#0006,#0003 10% 90%,#0006);border-top:3px solid #1a1a1a;border-bottom:3px solid #1a1a1a;scrollbar-width:thin;scrollbar-color:#6afcff30 transparent}.storyboard-layout-filmstrip::-webkit-scrollbar{height:8px}.storyboard-layout-filmstrip::-webkit-scrollbar-track{background:transparent}.storyboard-layout-filmstrip::-webkit-scrollbar-thumb{background:#6afcff30;border-radius:4px}.storyboard-layout-filmstrip::-webkit-scrollbar-thumb:hover{background:#6afcff50}.storyboard-layout-filmstrip .storyboard-frame{flex:0 0 auto;width:280px;position:relative}.storyboard-layout-filmstrip .storyboard-frame img{width:100%;height:auto;display:block;border:1px solid rgba(106,252,255,.2)}.storyboard-layout-filmstrip:before,.storyboard-layout-filmstrip:after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent,transparent 15px,#1a1a1a 15px,#1a1a1a 25px);pointer-events:none}.storyboard-layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.storyboard-layout-grid .storyboard-frame{position:relative;border-radius:6px;overflow:hidden;background:#0000004d}.storyboard-layout-grid .storyboard-frame img{width:100%;height:auto;display:block}.storyboard-layout-vertical{display:flex;flex-direction:column;gap:20px}.storyboard-layout-vertical .storyboard-frame{display:flex;flex-direction:column;background:#48658b26;border-radius:8px;overflow:hidden}.storyboard-layout-vertical .storyboard-frame img{width:100%;max-width:600px;height:auto;display:block;margin:0 auto}.storyboard-layout-vertical .frame-caption{padding:15px 20px;background:#0003}.frame-number{position:absolute;top:8px;left:8px;background:#000000b3;color:#6afcff;padding:4px 10px;border-radius:4px;font-size:.75em;font-weight:600;text-transform:uppercase;letter-spacing:.5px;z-index:10}.frame-caption{padding:10px 12px;font-size:.9em;color:#b8c5d6;background:#00000080;line-height:1.4}.storyboard-more{display:flex;align-items:center;justify-content:center;min-width:120px;background:#6afcff1a;border:1px dashed rgba(106,252,255,.3);border-radius:6px;padding:20px}.storyboard-more a{color:#6afcff;text-decoration:none;font-weight:500}.storyboard-more a:hover{text-decoration:underline}.scene-breakdown{margin-top:25px}.scene-breakdown h4{color:#6afcff;margin-bottom:15px;font-size:1em;display:flex;align-items:center;gap:8px}.scenes-list{display:flex;flex-direction:column;gap:10px}.scene-item{background:#48658b26;border-radius:8px;padding:15px;border-left:3px solid #6afcff}.scene-item strong{color:#6afcff;display:block;margin-bottom:8px}.scene-item p{margin:0;color:#e8edf3;line-height:1.5}.storyboard-frame{transition:transform .2s ease,box-shadow .2s ease}.storyboard-layout-filmstrip .storyboard-frame:hover,.storyboard-layout-grid .storyboard-frame:hover{transform:scale(1.02);box-shadow:0 4px 20px #6afcff33;z-index:5}.storyboard-frame a{display:block;text-decoration:none}.storyboard-frame img{transition:filter .2s ease}.storyboard-frame a:hover img{filter:brightness(1.1)}.storyboard-no-images{text-align:center;padding:30px;background:#6afcff1a;border:1px solid rgba(106,252,255,.3);border-radius:8px}@media(max-width:768px){.storyboard-layout-filmstrip .storyboard-frame{width:220px}.storyboard-layout-grid{grid-template-columns:repeat(2,1fr)}.storyboard-layout-vertical .storyboard-frame img{max-width:100%}.frame-number{font-size:.7em;padding:3px 8px}}@media(max-width:480px){.storyboard-layout-filmstrip .storyboard-frame{width:180px}.storyboard-layout-grid{grid-template-columns:1fr}}.output-item .storyboard-frames{max-height:300px;overflow:hidden}.output-item .storyboard-layout-filmstrip{padding:10px 0}.output-item .storyboard-layout-filmstrip .storyboard-frame{width:180px}@keyframes frameSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.storyboard-frame{animation:frameSlideIn .3s ease forwards}.storyboard-frame:nth-child(2){animation-delay:.1s}.storyboard-frame:nth-child(3){animation-delay:.2s}.storyboard-frame:nth-child(4){animation-delay:.3s}.storyboard-frame:nth-child(5){animation-delay:.4s}.storyboard-frame:nth-child(6){animation-delay:.5s}.storyboard-frame:nth-child(7){animation-delay:.6s}.storyboard-frame:nth-child(8){animation-delay:.7s}
