:root .sig--film-viewfinder { background: radial-gradient(90% 80% at 40% 40%, #1d1b21, #0e0d11 80%); min-height: 400px; }
:root .sig--film-viewfinder .vf { position: absolute; inset: 0; container-type: size; color: #fff; font: 500 12px/1 var(--f-body); }
:root .sig--film-viewfinder .vf__frame { position: absolute; left: 38cqw; top: 45cqh; translate: -50% -50%; overflow: hidden; border-radius: 3px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .8); transition: width .9s var(--ease-out), height .9s var(--ease-out); }
:root .sig--film-viewfinder .vf__frame.is-port { width: 59.2cqh; height: 74cqh; }
:root .sig--film-viewfinder .vf__frame.is-land { width: min(60cqw, 111cqh); height: min(40cqw, 74cqh); }
:root .sig--film-viewfinder .vf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease-out; }
:root .sig--film-viewfinder .vf__grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .28) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .28) calc(66.66% - .5px) calc(66.66% + .5px), transparent 0), linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .28) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .28) calc(66.66% - .5px) calc(66.66% + .5px), transparent 0); }
:root .sig--film-viewfinder .vf__af i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1px solid rgba(255, 255, 255, .32); transition: border-color .2s, background .2s; }
:root .sig--film-viewfinder .vf__af i.on { border-color: var(--lilac); background: rgba(161, 0, 255, .35); }
:root .sig--film-viewfinder .vf__box { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0; transition: left .38s cubic-bezier(.3, .8, .3, 1), top .38s cubic-bezier(.3, .8, .3, 1), opacity .2s, transform .25s var(--ease-back); transform: scale(1.3); }
:root .sig--film-viewfinder .vf__box.on { opacity: 1; transform: none; }
:root .sig--film-viewfinder .vf__box.lock { transform: scale(.82); }
:root .sig--film-viewfinder .vf__box b { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; transition: border-color .2s; }
:root .sig--film-viewfinder .vf__box.lock b { border-color: var(--lilac); filter: drop-shadow(0 0 6px rgba(161, 0, 255, .9)); }
:root .sig--film-viewfinder .vf__box b:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
:root .sig--film-viewfinder .vf__box b:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
:root .sig--film-viewfinder .vf__box b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
:root .sig--film-viewfinder .vf__box b:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
:root .sig--film-viewfinder .vf__cn { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(255, 255, 255, .85); }
:root .sig--film-viewfinder .vf__cn:nth-of-type(1) { left: 8px; top: 8px; border-width: 1.5px 0 0 1.5px; }
:root .sig--film-viewfinder .vf__cn:nth-of-type(2) { right: 8px; top: 8px; border-width: 1.5px 1.5px 0 0; }
:root .sig--film-viewfinder .vf__cn:nth-of-type(3) { left: 8px; bottom: 8px; border-width: 0 0 1.5px 1.5px; }
:root .sig--film-viewfinder .vf__cn:nth-of-type(4) { right: 8px; bottom: 8px; border-width: 0 1.5px 1.5px 0; }
:root .sig--film-viewfinder .vf__top { display: contents; }
:root .sig--film-viewfinder .vf__mode { display: inline-flex; align-items: center; gap: 5px; }
:root .sig--film-viewfinder .vf__mode svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
:root .sig--film-viewfinder .vf__mode em { font-style: normal; font-weight: 600; }
:root .sig--film-viewfinder .vf__raw { padding: 2px 5px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 3px; font-size: 10px; }
:root .sig--film-viewfinder .vf__bat { order: 9; }
:root .sig--film-viewfinder .vf__bat svg { width: 22px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.3; display: block; }
:root .sig--film-viewfinder .vf__bat .f { fill: #fff; stroke: none; }
:root .sig--film-viewfinder .vf__sh { position: absolute; inset: 0; pointer-events: none; }
:root .sig--film-viewfinder .vf__sh i { position: absolute; left: 0; right: 0; height: 50.5%; background: #050506; transform: scaleY(0); }
:root .sig--film-viewfinder .vf__sh i:first-child { top: 0; transform-origin: top; }
:root .sig--film-viewfinder .vf__sh i:last-child { bottom: 0; transform-origin: bottom; }
:root .sig--film-viewfinder .vf__info { position: absolute; left: 38cqw; top: calc(45cqh + 37cqh + 10px); translate: -50% 0; display: flex; align-items: center; gap: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); }
:root .sig--film-viewfinder .vf__ev { position: relative; display: block; width: 110px; height: 16px; }
:root .sig--film-viewfinder .vf__ev svg { width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; }
:root .sig--film-viewfinder .vf__ev svg .m { stroke: rgba(255, 255, 255, .4); }
:root .sig--film-viewfinder .vf__ev i { position: absolute; top: -5px; width: 0; height: 0; margin-left: -4px; border: 4px solid transparent; border-top: 5px solid var(--lilac); transition: left .4s var(--ease-out); }
:root .sig--film-viewfinder .vf__no { color: var(--lilac); }
:root .sig--film-viewfinder .vf__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
:root .sig--film-viewfinder .vf__glow { position: absolute; inset: 0; background: radial-gradient(60% 70% at 38% 45%, rgba(255, 255, 255, .22), transparent 70%); opacity: 0; pointer-events: none; }
:root .sig--film-viewfinder .vf__tray { position: absolute; right: 5cqw; bottom: 9cqh; width: 25cqw; height: 46cqh; z-index: 4; }
:root .sig--film-viewfinder .vf__pr { position: absolute; right: 0; bottom: 0; margin: 0; padding: 5px 5px 16px; background: #f7f5f2; border-radius: 2px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .3); transform: rotate(var(--r, 0deg)); transform-origin: 50% 50%; }
:root .sig--film-viewfinder .vf__pr.is-port { width: 72%; }
:root .sig--film-viewfinder .vf__pr.is-port img { aspect-ratio: 4 / 5; }
:root .sig--film-viewfinder .vf__pr.is-land { width: 100%; }
:root .sig--film-viewfinder .vf__pr.is-land img { aspect-ratio: 3 / 2; }
:root .sig--film-viewfinder .vf__pr img { display: block; width: 100%; object-fit: cover; }
@container (max-width: 480px){:root .sig--film-viewfinder .vf__frame { left: 40cqw; }
:root .sig--film-viewfinder .vf__frame.is-port { width: 52cqh; height: 65cqh; }
:root .sig--film-viewfinder .vf__frame.is-land { width: 74cqw; height: 49.3cqw; }
:root .sig--film-viewfinder .vf__info { left: 40cqw; top: calc(45cqh + 32.5cqh + 10px); gap: 8px; font-size: 11px; }
:root .sig--film-viewfinder .vf__raw, :root .sig--film-viewfinder .vf__bat { display: none; }
:root .sig--film-viewfinder .vf__ev { width: 70px; }
:root .sig--film-viewfinder .vf__iso, :root .sig--film-viewfinder .vf__no { display: none; }
:root .sig--film-viewfinder .vf__tray { right: 3cqw; width: 30cqw; }

}