:root .sig--film-turntable { background: #17151b; }
:root .sig--film-turntable .tt { position: absolute; inset: 0; overflow: hidden; color: #fff; --ink-c: rgba(255, 255, 255, .86); }
:root .sig--film-turntable .tt__bg { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 25%, #2c2832, #17151b 75%); }
:root .sig--film-turntable .tt__bgl { position: absolute; inset: 0; }
:root .sig--film-turntable .tt__chk { position: absolute; inset: 0; opacity: 0; background-color: #2a2a2e; background-image: linear-gradient(45deg, #353539 25%, transparent 25%, transparent 75%, #353539 75%), linear-gradient(45deg, #353539 25%, transparent 25%, transparent 75%, #353539 75%); background-size: 22px 22px; background-position: 0 0, 11px 11px; }
:root .sig--film-turntable .tt__box { position: absolute; left: 7%; top: 16%; width: 13%; max-width: 74px; aspect-ratio: 1 / 1.5; transform: perspective(500px) rotateY(48deg); transform-origin: left center; z-index: 2; }
:root .sig--film-turntable .tt__box::before { content: ""; position: absolute; left: 46%; top: 100%; width: 3px; height: 120%; background: linear-gradient(#4a4550, #2a272e); }
:root .sig--film-turntable .tt__box::after { content: ""; position: absolute; left: 60%; top: -30%; width: 420%; height: 200%; background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 80%); clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%); opacity: .5; pointer-events: none; transition: opacity .6s; }
:root .sig--film-turntable .tt__box.fire::after { opacity: 1; transition: none; }
:root .sig--film-turntable .tt__box i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(180deg, #3a3640, #25222a); border: 1px solid rgba(255, 255, 255, .08); }
:root .sig--film-turntable .tt__box b { position: absolute; inset: 9%; border-radius: 2px; background: linear-gradient(180deg, #d9d4df, #a8a1b0); opacity: .35; transition: opacity .5s, box-shadow .5s; }
:root .sig--film-turntable .tt__box.fire b { opacity: 1; background: #fff; box-shadow: 0 0 40px 14px rgba(255, 255, 255, .7); transition: none; }
:root .sig--film-turntable .tt__flash { position: absolute; inset: 0; z-index: 6; background: radial-gradient(70% 70% at 15% 20%, #fff, rgba(255, 255, 255, .4)); opacity: 0; pointer-events: none; }
:root .sig--film-turntable .tt__stage { position: absolute; left: 0; right: 0; top: 13%; bottom: 17%; display: grid; place-items: end center; }
:root .sig--film-turntable .tt__disc { position: absolute; left: 50%; bottom: -2%; width: min(64%, 330px); aspect-ratio: 1; translate: -50% 50%; transform: perspective(700px) rotateX(76deg); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .02) 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 0 -2px rgba(0, 0, 0, .35); transition: background .8s; }
:root .sig--film-turntable .tt__disc i { position: absolute; inset: 4%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .26) 0 1deg, transparent 1deg 15deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); }
:root .sig--film-turntable .is-spin .tt__disc i { animation: ttSpin 9s linear infinite; }
:root .sig--film-turntable .is-light .tt__disc { background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(0, 0, 0, .05) 66%, transparent 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 24px 0 -2px rgba(0, 0, 0, .12); }
:root .sig--film-turntable .is-light .tt__disc i { background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, .18) 0 1deg, transparent 1deg 15deg); }
@keyframes ttSpin{ to { transform: rotate(360deg); } }
:root .sig--film-turntable .tt__prod { position: relative; height: 100%; aspect-ratio: 1 / 3; z-index: 3; transition: opacity .4s; }
:root .sig--film-turntable .tt__raw, :root .sig--film-turntable .tt__cut { position: absolute; inset: 0; overflow: hidden; }
:root .sig--film-turntable .tt__raw { border-radius: 3px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
:root .sig--film-turntable .tt__raw img, :root .sig--film-turntable .tt__cut img { position: absolute; width: 342.857%; max-width: none; height: auto; left: -180%; top: -7.619%; }
:root .sig--film-turntable .tt__rim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 16%), linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, .55) 46%, transparent 57%); background-size: 100% 100%, 260% 100%; background-position: 0 0, 130% 0; mix-blend-mode: soft-light; opacity: .25; transition: opacity .6s; }
:root .sig--film-turntable .is-spin .tt__rim { opacity: 1; animation: ttRim 3s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes ttRim{ from { background-position: 0 0, 130% 0; } to { background-position: 0 0, -30% 0; } }
:root .sig--film-turntable .tt__shadow { position: absolute; left: -25%; right: -25%; bottom: -3%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 60%, transparent); opacity: 0; }
:root .sig--film-turntable .tt__pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
:root .sig--film-turntable .tt__pen path { fill: none; stroke: var(--lilac); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(161, 0, 255, .9)); }
:root .sig--film-turntable .tt__dots { position: absolute; inset: 0; z-index: 3; }
:root .sig--film-turntable .tt__dots i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; border: 1.5px solid var(--v); opacity: 0; transform: scale(.2); transition: opacity .3s, transform .4s var(--ease-back); }
:root .sig--film-turntable .tt__dots.on i { opacity: 1; transform: none; }
:root .sig--film-turntable .tt__dots.on i:nth-child(n) { transition-delay: calc(var(--d, 0) * 1ms); }
:root .sig--film-turntable .tt__hud { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 7; display: flex; justify-content: space-between; gap: 10px; align-items: center; font: 500 12px/1 var(--f-body); }
:root .sig--film-turntable .tt__file { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: rgba(15, 12, 20, .72); backdrop-filter: blur(8px); color: #fff; white-space: nowrap; max-width: 52%; overflow: hidden; }
:root .sig--film-turntable .tt__file svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--lilac); stroke-width: 1.4; stroke-linejoin: round; }
:root .sig--film-turntable .tt__file em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
:root .sig--film-turntable .tt__steps { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(15, 12, 20, .72); backdrop-filter: blur(8px); }
:root .sig--film-turntable .tt__steps li { padding: 4px 8px; border-radius: 999px; color: rgba(255, 255, 255, .55); transition: background .4s, color .4s; }
:root .sig--film-turntable .tt__steps li.done { color: var(--lilac); }
:root .sig--film-turntable .tt__steps li.on { background: var(--v); color: #fff; }
:root .sig--film-turntable .tt__sw { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 7; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(15, 12, 20, .72); backdrop-filter: blur(8px); white-space: nowrap; }
:root .sig--film-turntable .tt__dotsw { display: flex; gap: 8px; }
:root .sig--film-turntable .tt__dotsw span { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: box-shadow .35s, transform .45s var(--ease-back); }
:root .sig--film-turntable .tt__dotsw span.on { transform: scale(1.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2px #17151b, 0 0 0 3.5px var(--lilac); }
:root .sig--film-turntable .tt__swl { min-width: 9.5em; font: 500 12px/1 var(--f-body); color: #fff; }
@media (max-width: 560px){:root .sig--film-turntable .tt__steps li:not(.on) { display: none; }
:root .sig--film-turntable .tt__steps { padding: 4px; }
:root .sig--film-turntable .tt__swl { min-width: 0; }
:root .sig--film-turntable .tt__stage { top: 17%; bottom: 19%; }

}