.comparison-options{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px;display:grid}.comparison-options button{text-align:left;color:#c4cec6;background:#0e2026;border:1px solid #d6b37450;border-radius:3px 3px 18px;min-height:175px;padding:24px}.comparison-options button[aria-pressed=true]{background:linear-gradient(130deg,#d6b37420,#0e2026);border-color:#e9bd65}.comparison-options small{color:#d6b374;letter-spacing:1.4px;font-size:9px;display:block}.comparison-options strong{color:#eddbb9;margin:15px 0;font:400 27px Fraunces,serif;display:block}.comparison-options span{font-size:12px;line-height:1.8;display:block}.compare-style{align-items:center;gap:20px;margin:25px 0;font-size:13px;display:flex}.compare-style select{color:#efdfbb;background:#10242b;border:1px solid #d6b37460;border-radius:3px;max-width:100%;min-height:44px;padding:8px 35px 8px 14px}.comparison-lab [hidden]{display:none!important}.compare-canvas{isolation:isolate;aspect-ratio:1456/1088;border:1px solid #d6b37490;border-radius:3px 3px 18px;max-width:850px;margin:auto;position:relative;overflow:hidden}.compare-canvas>img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-divider{top:0;bottom:0;left:var(--split);pointer-events:none;background:#ffdc94;width:2px;position:absolute;transform:translate(-50%);box-shadow:0 0 22px #e9bd6570}.compare-divider i{color:#10242b;background:#d6b374;border:2px solid #ffe5aa;border-radius:3px 3px 13px;place-items:center;width:48px;height:58px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px 25px #0005}.compare-divider svg{width:36px;height:42px}.compare-slider>input{opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.compare-slider:focus-within{outline-offset:5px;outline:3px solid #ffe5aa}.compare-caption{z-index:3;color:#f0e7d5;pointer-events:none;backdrop-filter:blur(8px);background:#081218b8;border:1px solid #d6b37465;padding:8px 12px;font-size:11px;position:absolute;top:16px}.compare-caption.before{left:16px}.compare-caption.after{right:16px}.compare-instruction{color:#b6c4bc;text-align:center;max-width:750px;margin:20px auto;font-size:12px}.compare-film-layout{grid-template-columns:1fr 1fr;gap:26px;display:grid}.compare-film-layout figure{background:#0a1c22;border:1px solid #d6b37455;margin:0;padding:10px}.compare-film-layout>figure{align-self:start}.compare-film-layout img{aspect-ratio:1456/1088;-o-object-fit:cover;object-fit:cover;width:100%}.compare-film-layout figcaption{color:#e5c78f;padding:14px 4px 4px;font-size:12px}.compare-film{scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-color:#d6b374 #10242b;gap:26px;height:470px;padding:0 14px 0 0;display:grid;overflow-y:auto}.compare-film figure{scroll-snap-align:start}.compare-film figcaption span,.compare-film small,.compare-film strong{display:block}.compare-film strong{margin:8px 0;font:400 24px Fraunces,serif}.compare-film figcaption span{color:#b6c4bc;font-size:12px;line-height:1.6}.lens-art{clip-path:circle(19% at var(--lens-x) var(--lens-y))}.lens-ring{left:var(--lens-x);top:var(--lens-y);aspect-ratio:1;pointer-events:none;border:2px solid #ffe0a0;border-radius:50%;width:33.55%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 24px #d6b37470}.lens-controls{justify-content:center;gap:25px;display:flex}.lens-controls label{color:#d6b374;flex:1;gap:10px;max-width:300px;font-size:12px;display:grid}.lens-controls input{accent-color:#d6b374;width:100%;min-height:44px}@media (width<=760px){.comparison-options{grid-template-columns:1fr;gap:10px}.comparison-options button{min-height:0;padding:16px}.comparison-options strong{margin:8px 0;font-size:25px}.compare-style{flex-direction:column;align-items:stretch;gap:10px}.compare-caption{padding:6px;font-size:9px;top:8px}.compare-caption.before{left:8px}.compare-caption.after{right:8px}.compare-divider i{width:40px;height:48px}.compare-film-layout{gap:10px}.compare-film{gap:16px;height:350px;padding-right:8px}.compare-film-layout figure{padding:5px}.compare-film strong{font-size:20px}.compare-film figcaption span,.compare-film-layout figcaption{font-size:10px}.lens-controls{gap:15px}}
