:root .sig--film-storyboard { background: radial-gradient(90% 80% at 70% 10%, rgba(161, 0, 255, .2), transparent 60%), #17151b; }
:root .sig--film-storyboard .sbd__fx { position: absolute; width: 0; height: 0; }
:root .sig--film-storyboard .sbd { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(12px, 3%, 26px); container-type: size; }
:root .sig--film-storyboard .sbd::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(10, 8, 14, .82); opacity: 0; transition: opacity .6s; pointer-events: none; }
:root .sig--film-storyboard .sbd.is-film::after { opacity: 1; }
:root .sig--film-storyboard .sbd__sheet { width: 100%; max-width: 620px; padding: clamp(12px, 2.4vw, 20px); border-radius: 6px; background: #f1ede6; color: #2a2530; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85); transform: rotate(-1.2deg); }
:root .sig--film-storyboard .sbd__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1.5px solid #2a2530; font: 500 12px/1 var(--f-body); }
:root .sig--film-storyboard .sbd__head b { font: 700 15px/1 var(--f-display); letter-spacing: -.02em; }
:root .sig--film-storyboard .sbd__head em { font-style: normal; color: #7b2fd6; font-weight: 600; }
:root .sig--film-storyboard .sbd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 16px) clamp(10px, 2vw, 18px); }
:root .sig--film-storyboard .sbd__p { margin: 0; }
:root .sig--film-storyboard .sbd__fr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid #2a2530; border-radius: 2px; background: #fbf9f5; transition: box-shadow .4s; }
:root .sig--film-storyboard .sbd__p.cur .sbd__fr { box-shadow: 0 0 0 3px #a100ff; }
:root .sig--film-storyboard .sbd__fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root .sig--film-storyboard .sbd__tone { filter: grayscale(1) contrast(1.6) brightness(1.35); mix-blend-mode: multiply; opacity: .4; }
:root .sig--film-storyboard .sbd__line { filter: url(#sbdSketch) grayscale(1) contrast(1.4); mix-blend-mode: multiply; }
:root .sig--film-storyboard .sbd__col { opacity: 0; transition: opacity .6s; }
:root .sig--film-storyboard .sbd__p.col .sbd__col { opacity: 1; }
:root .sig--film-storyboard .sbd__tone, :root .sig--film-storyboard .sbd__line { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .3, 1); }
:root .sig--film-storyboard .sbd__p.drawn .sbd__tone, :root .sig--film-storyboard .sbd__p.drawn .sbd__line { clip-path: inset(0 0 0 0); }
:root .sig--film-storyboard .sbd__fr svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
:root .sig--film-storyboard .sbd__fr svg path { fill: none; stroke: #a100ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s .5s ease-out; }
:root .sig--film-storyboard .sbd__p.drawn svg path { stroke-dashoffset: 0; }
:root .sig--film-storyboard .sbd__p--t .sbd__fr { background: #fbf9f5; }
:root .sig--film-storyboard .sbd__p--t svg path { stroke: #2a2530; stroke-width: 1.5; }
:root .sig--film-storyboard .sbd__tt { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 3; text-align: center; font: italic 500 clamp(10px, 1.4vw, 14px)/1.1 var(--f-body); color: #2a2530; opacity: 0; transition: opacity .5s .9s; padding: 0 22%; }
:root .sig--film-storyboard .sbd__p--t.drawn .sbd__tt { opacity: 1; }
:root .sig--film-storyboard .sbd__p--t svg path { opacity: .35; }
:root .sig--film-storyboard figcaption { display: grid; gap: 3px; padding-top: 6px; font: italic 400 12px/1.2 var(--f-body); color: #4a4350; }
:root .sig--film-storyboard figcaption b { font: 600 12px/1 var(--f-display); font-style: normal; color: #2a2530; }
:root .sig--film-storyboard figcaption span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--film-storyboard .sbd__film { position: absolute; left: 0; right: 0; top: 50%; height: min(100cqh, 56.25cqw); translate: 0 -50%; z-index: 5; overflow: hidden; background: #000; clip-path: inset(50%); visibility: hidden; }
:root .sig--film-storyboard .is-film .sbd__film { visibility: visible; }
:root .sig--film-storyboard .sbd__film > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.05); }
:root .sig--film-storyboard .is-card .sbd__film > img { display: none; }
:root .sig--film-storyboard .sbd__lb { position: absolute; left: 0; right: 0; height: 12%; background: #000; z-index: 2; transform: scaleY(0); transition: transform .7s var(--ease-out); }
:root .sig--film-storyboard .sbd__lb--t { top: 0; transform-origin: top; }
:root .sig--film-storyboard .sbd__lb--b { bottom: 0; transform-origin: bottom; }
:root .sig--film-storyboard .is-lb .sbd__lb { transform: none; }
:root .sig--film-storyboard .sbd__rec { position: absolute; left: 16px; top: calc(12% + 10px); z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 12px/1 var(--f-body); opacity: 0; transition: opacity .4s; }
:root .sig--film-storyboard .sbd__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--v); box-shadow: 0 0 8px var(--v); }
:root .sig--film-storyboard .sbd__rec em { font-style: normal; }
:root .sig--film-storyboard .is-lb:not(.is-card) .sbd__rec { opacity: 1; }
:root .sig--film-storyboard .sbd__card { position: absolute; inset: 0; display: none; place-content: center; gap: 12px; text-align: center; color: #fff; }
:root .sig--film-storyboard .is-card .sbd__card { display: grid; }
:root .sig--film-storyboard .sbd__card b { font: 600 clamp(22px, 4.2vw, 44px)/1.05 var(--f-display); letter-spacing: -.04em; opacity: 0; transform: translateY(10px); transition: opacity .9s .2s, transform 1.2s .2s var(--ease-out), letter-spacing 2.6s var(--ease-out); }
:root .sig--film-storyboard .sbd__card span { font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); opacity: 0; transition: opacity .9s .7s; }
:root .sig--film-storyboard .is-lb.is-card .sbd__card b { opacity: 1; transform: none; letter-spacing: -.02em; }
:root .sig--film-storyboard .is-lb.is-card .sbd__card span { opacity: 1; }
@media (max-width: 560px){:root .sig--film-storyboard figcaption span { display: none; }
:root .sig--film-storyboard .sbd__head span { font-size: 11px; }

}