.cine-preview { margin: clamp(5rem,9vw,9rem) auto 0; text-align: center; }
.cine-preview h2 { margin: .35rem auto 1rem; color: #f2eee8; font: 500 clamp(2.7rem,5vw,5rem)/1.04 'Playfair Display',serif; letter-spacing: -.045em; }
.cine-preview > p { max-width: 770px; margin: 0 auto 2rem; color: #a7a4a1; line-height: 1.65; }
.cine-preview-kicker { color: #d89b69 !important; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cine-preview-stage, .cine-modal-stage { position: relative; overflow: hidden; margin: 0 auto; background: #111; }
.cine-preview-stage { width: min(100%, 540px); aspect-ratio: 2 / 3; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; }
.cine-preview-stage.is-landscape { width: min(100%,760px); aspect-ratio: 3 / 2; }
.cine-preview-stage img, .cine-modal-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cine-preview-stage .cine-preview-after, .cine-modal-stage .cine-preview-after { clip-path: inset(0 calc(100% - var(--cine-split,50%)) 0 0); }
.cine-preview-divider, .cine-modal-divider { position: absolute; top: 0; bottom: 0; left: var(--cine-split,50%); width: 2px; background: #fff; box-shadow: 0 0 18px rgba(0,0,0,.8); pointer-events: none; }
.cine-preview-divider::after, .cine-modal-divider::after { content: '↔'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #111; background: #fff; font-size: 1rem; font-weight: 900; transform: translate(-50%,-50%); }
.cine-preview-stage input[type="range"], .cine-modal-stage input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; opacity: 0; }
.cine-preview-label { position: absolute; z-index: 1; top: 1rem; padding: .35rem .55rem; border-radius: 5px; color: #fff; background: rgba(0,0,0,.55); font-size: .72rem; font-weight: 800; pointer-events: none; }
.cine-preview-label--before { right: 1rem; }.cine-preview-label--after { left: 1rem; }
.cine-preview-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 0; }
.cine-preview-choices button, .cine-preview-info { display: inline-block; padding: .7rem 1rem; border: 1px solid rgba(216,155,105,.4); border-radius: 999px; color: #edc59f; background: rgba(216,155,105,.06); cursor: pointer; font: 700 .85rem 'Manrope',sans-serif; text-decoration: none; }
.cine-preview-choices button[aria-pressed="true"] { color: #111; background: #edc59f; }
.cine-preview-info { margin-top: 1rem; }
.cine-preview :is(button,a,input):focus-visible, .cine-modal :is(button,input):focus-visible { outline: 2px solid #edc59f; outline-offset: 3px; }
.cine-preview-caption { margin-top: 1.4rem !important; font-size: .73rem; }
.cine-modal-backdrop { position: fixed; inset: 0; z-index: 14000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.86); backdrop-filter: blur(10px); }
.cine-modal-backdrop.is-open { display: flex; }
.cine-modal { position: relative; width: min(980px,100%); max-height: min(90vh,1000px); overflow-y: auto; padding: clamp(1.3rem,3vw,2.5rem); border: 1px solid rgba(216,155,105,.38); border-radius: 18px; color: #f2eee8; background: #111217; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.cine-modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: #25262b; cursor: pointer; font-size: 1.2rem; }
.cine-modal-kicker { margin: 0 0 .4rem; color: #edc59f; font-size: .73rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cine-modal h2 { margin: 0 2.5rem 1.4rem 0; font: 500 clamp(2.3rem,4vw,3.6rem)/1.1 'Playfair Display',serif; }
.cine-modal-stage { width: min(100%, 580px); aspect-ratio: 2 / 3; border-radius: 10px; }
.cine-modal-stage.is-landscape { width: min(100%,760px); aspect-ratio: 3 / 2; }
.cine-modal-missing { display: grid; place-items: center; min-height: 190px; padding: 1.5rem; border: 1px dashed rgba(255,255,255,.15); color: #aaa; text-align: center; }
.cine-modal-palette { display: flex; gap: .45rem; margin: 1.4rem 0; }
.cine-modal-palette span { display: block; flex: 1; height: 48px; border-radius: 7px; background: var(--swatch); }
.cine-modal h3 { margin: 1.3rem 0 .45rem; color: #f2eee8; font-size: 1rem; }
.cine-modal-explanation { margin: 0; color: #c5c1bd; line-height: 1.65; }
.cine-modal-note { margin: 1rem 0 0; color: #93908d; font-size: .72rem; line-height: 1.5; }
.cine-modal-variants { display:flex; justify-content:center; gap:.6rem; margin:1rem 0 .25rem; }
.cine-modal-photos { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; margin:0 0 1rem; }
.cine-modal-variants button, .cine-modal-photos button { padding:.65rem .95rem; border:1px solid rgba(216,155,105,.45); border-radius:999px; color:#edc59f; background:transparent; cursor:pointer; font:700 .8rem 'Manrope',sans-serif; }
.cine-modal-variants button[aria-pressed="true"], .cine-modal-photos button[aria-pressed="true"] { color:#111; background:#edc59f; }
.cine-modal-credit { display:inline-block; margin-top:.4rem; color:#edc59f; font-size:.76rem; text-decoration:none; }
@media (max-width:600px) { .cine-preview-stage { width: min(100%,380px); } }