.play{--desk:#16110c;--desk-2:#241a12;--film-bw:#2b2b2e;--film-color:#6d3410;--rebate-bw:#3a3a3d;--rebate-color:#c65a17;--frame-h:132px;--frame-w:198px;--sprocket:20px;--strip-ease:cubic-bezier(.2, .9, .25, 1.1);background:radial-gradient(120% 80% at 50% -10%, var(--desk-2), transparent 60%), radial-gradient(140% 120% at 50% 120%, #0a0705, transparent 55%), var(--desk);min-height:100vh;color:var(--fg);padding:6.5rem clamp(1rem,4vw,3rem) 5rem;overflow-x:hidden}.play:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(60% 45% at 50% 32%,#ffecc80f,#0000 70%);position:fixed;inset:0}.play__intro{z-index:1;max-width:1400px;margin:0 auto 2.5rem;position:relative}.play__title{font-family:Cormorant Garamond,serif;font-size:clamp(2.2rem,6vw,4rem);font-weight:400}.play__hint{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:.6rem;font-size:.7rem}.reels{z-index:1;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);max-width:1400px;margin:0 auto;display:flex;position:relative}.reel{filter:drop-shadow(0 18px 30px #0000008c);align-items:stretch;display:flex}.cassette{z-index:3;border-radius:12px 6px 6px 12px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:6px;width:96px;padding:14px 8px;display:flex;position:relative;box-shadow:inset 0 2px #ffffff1f,inset 0 -6px 12px #00000080}.reel--bw .cassette{background:linear-gradient(#333,#111)}.reel--color .cassette{color:#201400;background:linear-gradient(#f4c518,#c9930a)}.cassette__spool{background:radial-gradient(circle at 40% 35%,#777,#1c1c1c 70%);border-radius:50%;width:26px;height:26px;box-shadow:inset 0 0 0 4px #0006}.cassette__roll{letter-spacing:.06em;font-size:.82rem;font-weight:600}.cassette__film{letter-spacing:.08em;text-transform:uppercase;opacity:.85;text-align:center;font-size:.56rem;line-height:1.2}.cassette__lip{width:14px;height:calc(var(--frame-h) + var(--sprocket) * 2 - 10px);z-index:4;background:#0c0a08;border-radius:3px;position:absolute;top:50%;right:-10px;transform:translateY(-50%);box-shadow:inset 0 0 6px #000c}.filmstrip{scrollbar-width:none;cursor:grab;border-radius:0 4px 4px 0;flex:1;min-width:0;overflow:auto hidden;mask-image:linear-gradient(90deg,#0000 0,#000 26px)}.filmstrip::-webkit-scrollbar{display:none}.filmstrip.dragging{cursor:grabbing}.filmstrip__inner{flex-direction:column;width:max-content;padding-left:18px;display:inline-flex}.reel--bw .filmstrip__inner{background:var(--film-bw)}.reel--color .filmstrip__inner{background:var(--film-color)}.sprockets{height:var(--sprocket);background-image:repeating-linear-gradient(90deg, transparent 0 9px, var(--desk) 9px 18px);opacity:.9;background-position:6px 0}.filmstrip__frames{gap:6px;padding:5px 6px;display:flex}.reel--bw .filmstrip__frames{background:var(--rebate-bw)}.reel--color .filmstrip__frames{background:var(--rebate-color)}.frame{width:var(--frame-w);height:var(--frame-h);cursor:pointer;outline-offset:-2px;opacity:0;background:#000;border:none;outline:2px solid #0009;flex:none;padding:0;position:relative;overflow:hidden;transform:translate(-24px)scale(.96)}.reel.in .frame{animation:unspool .6s var(--strip-ease) forwards;animation-delay:calc(var(--i) * 50ms)}@keyframes unspool{to{opacity:1;transform:none}}.frame img{object-fit:cover;width:100%;height:100%;transition:transform .4s var(--strip-ease), filter .4s ease;display:block}.frame:after{content:"";opacity:0;transition:opacity .3s;position:absolute;inset:0;box-shadow:inset 0 0 22px #00000059}.frame:hover{z-index:2}.frame:hover img{filter:brightness(1.08);transform:scale(1.08)}.frame:hover:after{opacity:1}.frame__num{color:#fff0d2d9;letter-spacing:.05em;text-shadow:0 1px 2px #000000e6;pointer-events:none;font-size:.58rem;position:absolute;bottom:3px;left:4px}.zoom{z-index:200;visibility:hidden;background:#08060400;justify-content:center;align-items:center;transition:background .45s,visibility .45s;display:flex;position:fixed;inset:0}.zoom.open{visibility:visible;backdrop-filter:blur(4px);background:#080604f0}.zoom__frame{will-change:transform;background:#000;border-radius:2px;padding:10px;position:fixed;box-shadow:0 30px 90px #000000b3}.zoom__frame:before,.zoom__frame:after{content:"";background-color:#d9d2c6;background-image:repeating-linear-gradient(90deg,#0000 0 7px,#000 7px 14px);height:8px;position:absolute;left:0;right:0}.zoom__frame:before{top:0}.zoom__frame:after{bottom:0}.zoom--bw .zoom__frame{background:var(--film-bw)}.zoom--color .zoom__frame{background:var(--film-color)}.zoom__img{object-fit:contain;width:auto;max-width:84vw;height:auto;max-height:78vh;display:block}.zoom__caption{text-align:center;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;position:absolute;bottom:-2.4rem;left:0;right:0}.zoom__nav,.zoom__close{z-index:210;color:var(--fg);cursor:pointer;opacity:.75;transition:opacity .2s, transform .2s var(--strip-ease);background:0 0;border:none;position:fixed}.zoom__nav:hover,.zoom__close:hover{opacity:1}.zoom__nav{padding:1rem;font-size:3.2rem;top:50%;transform:translateY(-50%)}.zoom__prev{left:1rem}.zoom__next{right:1rem}.zoom__close{font-size:2.3rem;top:1.3rem;right:1.7rem}.zoom__share{z-index:210;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%)}.play__nav{z-index:95;gap:1.6rem;padding:1.3rem 1.8rem;display:flex;position:fixed;top:0;left:0;right:0}.play__nav a{color:var(--fg);letter-spacing:.2em;text-transform:uppercase;opacity:.8;font-size:.7rem;text-decoration:none;transition:opacity .25s}.play__nav a:hover{opacity:1}@media (prefers-reduced-motion:reduce){.reel.in .frame{opacity:1;animation:none;transform:none}.zoom__frame{transition:none!important}}