.reel{--tilt:-10deg;--gap:clamp(7px, 1vw, 11px);--fw:clamp(114px, 19vw, 201px);--gw:clamp(147px, 25vw, 268px);--ggap:clamp(11px, 2vw, 19px);--film:#121212;isolation:isolate;background:var(--bg);height:100svh;min-height:415px;position:relative;overflow:hidden}.reel-stack{--bg:#000;--fg:#fff;--soft:#c4c4c4;--muted:#9a9a9a;color:var(--fg);gap:var(--ggap);width:170vw;transform:translate(-50%, -50%) rotate(var(--tilt));flex-direction:column;display:flex;position:absolute;top:50%;left:50%}.reel-strip{overflow:hidden}.reel-track{will-change:transform;width:max-content;display:flex}.reel-cell{--band:min(calc(var(--fw) * .18), 43px);width:calc(var(--fw) + var(--gap));padding:var(--band) calc(var(--gap) / 2);background:linear-gradient(var(--film), var(--film)) center / 100% calc(100% - 2 * var(--band)) no-repeat;flex:none;position:relative}.reel-cell:before,.reel-cell:after{content:"";height:var(--band);background-color:var(--film);background-repeat:repeat-x;background-size:12.5% 100%;position:absolute;left:0;right:0;-webkit-mask-size:12.5% 100%;mask-size:12.5% 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}.reel-cell:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M19.5 59a5 5 0 0 1 5-5h51a5 5 0 0 1 5 5v28a5 5 0 0 1-5 5h-51a5 5 0 0 1-5-5z' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");top:0;box-shadow:inset 0 1px #ffffff12;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h100v100H0zM19.5 59a5 5 0 0 1 5-5h51a5 5 0 0 1 5 5v28a5 5 0 0 1-5 5h-51a5 5 0 0 1-5-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h100v100H0zM19.5 59a5 5 0 0 1 5-5h51a5 5 0 0 1 5 5v28a5 5 0 0 1-5 5h-51a5 5 0 0 1-5-5z'/%3E%3C/svg%3E")}.reel-cell:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M19.5 13a5 5 0 0 1 5-5h51a5 5 0 0 1 5 5v28a5 5 0 0 1-5 5h-51a5 5 0 0 1-5-5z' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");bottom:0;box-shadow:inset 0 -1px #ffffff12;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h100v100H0zM19.5 13a5 5 0 0 1 5-5h51a5 5 0 0 1 5 5v28a5 5 0 0 1-5 5h-51a5 5 0 0 1-5-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h100v100H0zM19.5 13a5 5 0 0 1 5-5h51a5 5 0 0 1 5 5v28a5 5 0 0 1-5 5h-51a5 5 0 0 1-5-5z'/%3E%3C/svg%3E")}.reel-code{top:0;left:calc(var(--gap) / 2 + 2px);z-index:1;height:calc(var(--band) * .31);font:500 clamp(4px, calc(var(--band) * .17), 6px)/1 ui-monospace, "SF Mono", Menlo, monospace;letter-spacing:.14em;white-space:nowrap;color:#ffffff4d;align-items:center;display:flex;position:absolute}.reel-frame{aspect-ratio:3/2;border-radius:calc(var(--fw) * .02);background:#000;display:block;position:relative;overflow:hidden}.reel-frame img{object-fit:cover}.reel-filler .reel-frame img{filter:grayscale()brightness(.5)contrast(1.08);transform:scale(1.14)}:root[data-theme=light] .reel-filler .reel-frame img{filter:grayscale()brightness(.72)contrast(1.05)}.reel-pic{width:var(--gw);aspect-ratio:3/2;margin-right:var(--ggap);border-radius:calc(var(--gw) * .02);background:var(--raise);flex:none;position:relative;overflow:hidden}.reel-pic img{object-fit:cover;filter:grayscale()brightness(.45)contrast(1.06);transition:filter .5s,opacity .5s}:root[data-theme=light] .reel-pic img{filter:grayscale()contrast(1.05);opacity:.55}.reel-strip:hover .reel-pic img{filter:none;opacity:1}.reel-card{border-radius:inherit;text-align:center;color:#ffffff75;border:1px solid #ffffff14;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:7px;display:flex;position:absolute;inset:0}.reel-card__big{text-wrap:balance;font-size:clamp(9px,1.5vw,15px);line-height:1}.reel-card__small{letter-spacing:.2em;color:#ffffff4d;font-size:6px}.reel-leader{color:#fff6;background:linear-gradient(#ffffff21,#ffffff21) 50%/100% 1px no-repeat,linear-gradient(#ffffff21,#ffffff21) 50%/1px 100% no-repeat;place-items:center;display:grid;position:absolute;inset:0}.reel-leader:before,.reel-leader:after{content:"";aspect-ratio:1;border:1px solid #fff3;border-radius:50%;position:absolute}.reel-leader:before{width:60%}.reel-leader:after{width:49%}.reel-leader__count{font-size:clamp(17px,3.8vw,40px);position:relative}.reel-track--focal{--fw:clamp(161px, min(27vw, calc(84vw / var(--n,3))), 348px);width:100%;transform:translate3d(var(--lean,0px), 0, 0);justify-content:center}.reel-filler{display:contents}.reel-filler .reel-frame{opacity:.5}.reel-presents{text-align:center;border:1px solid #ffffff3d;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(11px,1.8vw,19px);transition:border-color .3s;display:flex;box-shadow:inset 0 0 0 4px #000,inset 0 0 0 5px #ffffff1f}.reel-presents:hover,.reel-presents:focus-visible{border-color:#ffffffb3}.reel-presents .label{color:var(--muted);font-size:clamp(6px,.8vw,8px)}.reel-presents__title{font-size:clamp(20px,4.3vw,52px);line-height:.9}.reel-film{color:var(--fg);box-shadow:inset 0 0 0 1px #ffffff29}.reel-film img{transition:transform .7s}.reel-film:after{content:"";border-radius:inherit;background:linear-gradient(#0009 0%,#0000 34%,#00000014 52%,#000000e0 100%);transition:box-shadow .3s;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff29}.reel-film__when,.reel-film__go,.reel-film__title{z-index:1;position:absolute}.reel-film__when{font-size:clamp(7px,.85vw,8px);top:clamp(8px,1.2vw,12px);left:clamp(9px,1.4vw,13px)}.reel-film__go{opacity:0;font-size:clamp(7px,.85vw,8px);transition:opacity .3s,transform .3s;bottom:clamp(9px,1.5vw,15px);right:clamp(9px,1.4vw,13px);transform:translate(-4px)}.reel-film__title{text-wrap:balance;max-width:66%;font-size:clamp(13px,2.5vw,28px);bottom:clamp(8px,1.3vw,12px);left:clamp(9px,1.4vw,13px)}.reel-film:hover img,.reel-film:focus-visible img{transform:scale(1.05)}.reel-film:hover:after,.reel-film:focus-visible:after{box-shadow:inset 0 0 0 1px #ffffffb3}.reel-film:hover .reel-film__go,.reel-film:focus-visible .reel-film__go{opacity:1;transform:none}.reel-film--idle:hover:after{box-shadow:inset 0 0 0 1px #ffffff29}.reel-vignette{pointer-events:none;background:linear-gradient(180deg, rgba(var(--bg-rgb), .7) 0%, rgba(var(--bg-rgb), 0) 16%, rgba(var(--bg-rgb), 0) 82%, rgba(var(--bg-rgb), .75) 100%), radial-gradient(ellipse 100% 78% at 50% 50%, rgba(var(--bg-rgb), 0) 46%, rgba(var(--bg-rgb), .5) 78%, rgba(var(--bg-rgb), .9) 100%);position:absolute;inset:0}.reel-caption{left:var(--pad);right:var(--pad);color:var(--muted);pointer-events:none;justify-content:space-between;gap:16px;display:flex;position:absolute;bottom:clamp(16px,2.4vw,28px)}.reel-band,.reel-list{display:none}@media (max-width:760px){.reel{--tilt:-8deg;--fw:100px;--gw:58vw;--ggap:9px;height:46svh;min-height:320px}.reel-strip--focal,.reel-caption{display:none}.reel-band{z-index:2;padding:var(--nav-h) var(--pad) 0;text-align:center;color:#fff;background:radial-gradient(85% 55% at 50% 58%,#000c,#00000040 70%,#0000);flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.reel-band .label{color:#c4c4c4;font-size:10px}.reel-band__title{font-size:clamp(44px,14vw,64px);line-height:.9}.reel-list{padding:16px var(--pad) 28px;flex-direction:column;gap:12px;display:flex}.reel-list__film{isolation:isolate;aspect-ratio:16/10;color:#fff;background:#111;border-radius:4px;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;display:flex;position:relative;overflow:hidden}.reel-list__film img{z-index:-2;object-fit:cover}.reel-list__film:after{content:"";z-index:-1;background:linear-gradient(#0000 35%,#000000e0 100%);position:absolute;inset:0}.reel-list__when{color:#c4c4c4;font-size:11px}.reel-list__title{text-wrap:balance;max-width:85%;font-size:26px;line-height:1}.reel-list__go{font-size:22px;line-height:1;position:absolute;bottom:12px;right:16px}.reel-list__film--idle{aspect-ratio:auto;border:1px solid var(--line-strong);min-height:160px;color:var(--fg);background:0 0}.reel-list__film--idle:after{display:none}.reel-list__venue{text-align:center;padding-top:8px}}@media (prefers-reduced-motion:reduce){.reel-film img,.reel-film__go{transition:none}}