.reel{--base: #15110e;--hole: #060505;--edge: #d9a35c;--bone: #f2ede4;--dim: rgba(242,237,228,.56);--line: rgba(242,237,228,.12);--fw: clamp(150px, 13.5vw, 214px);position:relative;color:var(--bone)}.reel--compact{--fw: clamp(220px, 20vw, 290px)}.reel-screen{margin:0 0 18px}.reel-screen__frame{position:relative;display:block;aspect-ratio:16 / 7.6;max-height:min(74vh,760px);width:100%;overflow:hidden;border-radius:3px;background:#050505;border:1px solid var(--line);box-shadow:0 40px 120px #0009;color:var(--bone);text-decoration:none;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.reel-screen__frame img{-webkit-user-drag:none;pointer-events:none}.reel-screen__hud{position:absolute;z-index:4;left:22px;top:20px;font:600 9.5px/1 var(--mono);letter-spacing:.22em;color:#f2ede4bd;pointer-events:none}.reel-screen__cue{position:absolute;z-index:4;right:22px;top:18px;width:22px;height:22px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,250,240,.95) 0 34%,rgba(255,240,220,.4) 52%,transparent 70%)}.reel-screen.is-cue .reel-screen__cue{animation:reel-cue .9s steps(1,end)}@keyframes reel-cue{0%{opacity:1}16%{opacity:0}30%{opacity:1}46%{opacity:0}to{opacity:0}}.reel-screen__bar{display:flex;align-items:center;gap:16px;padding:14px 2px 0;min-height:34px}.reel-screen__inst{flex:1;min-width:0;font:600 9.5px/1.5 var(--mono);letter-spacing:.18em;color:var(--dim);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reel-screen__go{font:600 10px/1 var(--mono);letter-spacing:.22em;color:#0a0909;background:var(--c, #36B5C9);padding:11px 14px;border-radius:3px;text-decoration:none;white-space:nowrap;transition:background .4s}.reel-screen__go:focus-visible,.reel-screen__frame:focus-visible{outline:2px solid var(--bone);outline-offset:3px}.reel-film{position:relative;margin:0 calc(-1 * var(--reel-bleed, 0px))}.reel-strip{position:relative;display:flex;align-items:stretch;list-style:none;margin:0;padding:0 calc(50% - var(--fw) / 2 - 6px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10'%3E%3Crect x='6' y='0.5' width='10' height='9' rx='2' fill='%23060505' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E") 0 6px / 22px 10px repeat-x local,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10'%3E%3Crect x='6' y='0.5' width='10' height='9' rx='2' fill='%23060505' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E") 0 calc(100% - 7px) / 22px 10px repeat-x local,linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 82%,rgba(0,0,0,.35)),var(--base);box-shadow:inset 0 1px #ffecd60d,inset 0 -1px #ffecd60d;-webkit-user-select:none;user-select:none;cursor:grab}.reel-strip::-webkit-scrollbar{display:none}.reel-strip.is-drag{scroll-snap-type:none;cursor:grabbing}.reel-strip.is-drag a{pointer-events:none}.reel-strip img{-webkit-user-drag:none}.reel-fr,.reel-lead{position:relative;flex:none;padding:31px 6px 24px}.reel-fr{width:var(--fw);scroll-snap-align:center}.reel-fr__a{display:block;color:var(--bone);text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}.reel-fr__edge{position:absolute;left:8px;right:6px;top:18px;display:flex;gap:8px;align-items:baseline;overflow:hidden;white-space:nowrap;font:600 7.5px/1 var(--mono);letter-spacing:.2em;color:var(--edge);opacity:.55;transition:opacity .3s}.reel-fr__edge b{font-weight:700;color:var(--edge)}.reel-fr__pic{position:relative;display:block;aspect-ratio:4 / 3;overflow:hidden;border-radius:3px;background:#050505;isolation:isolate;box-shadow:0 0 0 1px #0009}.reel-fr__pic img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .5s ease,transform .5s ease}.reel-fr__dark{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none;transition:opacity .45s ease;background:radial-gradient(circle at var(--lx, 60%) var(--ly, 40%),rgba(5,5,5,0) 0,rgba(5,5,5,calc(var(--dk, 1) * .3)) 22%,rgba(5,5,5,calc(var(--dk, 1) * .72)) 52%,rgba(5,5,5,calc(var(--dk, 1) * .86)) 80%)}.reel--full .reel-fr__pic{opacity:.5;transition:opacity .35s ease}.reel--full .reel-fr.is-gate .reel-fr__pic,.reel--full .reel-fr__a:hover .reel-fr__pic,.reel--full .reel-fr__a:focus-visible .reel-fr__pic{opacity:1}.reel-fr.is-gate .reel-fr__edge,.reel-fr__a:hover .reel-fr__edge{opacity:1}.reel-fr__a:focus-visible .reel-fr__pic{box-shadow:0 0 0 2px var(--bone)}.reel--full .reel-film:after{content:"";position:absolute;top:24px;bottom:18px;left:50%;width:calc(var(--fw) - 4px);transform:translate(-50%);pointer-events:none;border-left:1px solid rgba(242,237,228,.55);border-right:1px solid rgba(242,237,228,.55);border-radius:3px}.reel--compact .reel-fr{padding-bottom:26px}.reel-fr__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:12px;min-height:2.4em;font:400 17px/1.2 var(--serif);color:var(--bone);text-wrap:balance}.reel--compact .reel-fr.is-here .reel-fr__a{opacity:.5}.reel--compact .reel-fr.is-here .reel-fr__edge,.reel--compact .reel-fr.is-next .reel-fr__edge{opacity:1;color:var(--c)}.reel--compact .reel-fr.is-here .reel-fr__edge b,.reel--compact .reel-fr.is-next .reel-fr__edge b{color:var(--c)}.reel--compact .reel-fr.is-next .reel-fr__pic{box-shadow:0 0 0 1px var(--c),0 0 34px color-mix(in srgb,var(--c) 30%,transparent)}.reel--compact .reel-fr__a:hover .reel-fr__dark{opacity:.45}.reel-lead{width:calc(var(--fw) * .78);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding-left:16px;padding-right:12px}.reel-lead__ring{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,237,228,.4);margin-bottom:4px}.reel-lead__ring:before,.reel-lead__ring:after{content:"";position:absolute;background:#f2ede466}.reel-lead__ring:before{left:50%;top:-6px;bottom:-6px;width:1px}.reel-lead__ring:after{top:50%;left:-6px;right:-6px;height:1px}.reel-lead__k{font:600 9px/1 var(--mono);letter-spacing:.26em;color:var(--edge)}.reel-lead__t{font:italic 400 clamp(16px,1.3vw,20px)/1.15 var(--serif);color:var(--bone);text-wrap:balance}.reel-lead__n{font:600 8.5px/1 var(--mono);letter-spacing:.2em;color:var(--dim);text-transform:uppercase}.reel--compact .reel-lead{padding-bottom:60px}.reel-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:40px;height:52px;display:grid;place-items:center;padding:0;border:1px solid rgba(242,237,228,.22);border-radius:3px;background:#0a0909d1;color:var(--bone);font:400 26px/1 var(--serif);cursor:pointer;transition:border-color .3s,background .3s,opacity .3s}.reel-nav--prev{left:10px}.reel-nav--next{right:10px}.reel--compact .reel-nav{top:calc(50% - 22px)}.reel-nav:hover{border-color:#f2ede499;background:#0a0909f0}.reel-nav:focus-visible{outline:2px solid var(--bone);outline-offset:2px}.reel-nav[disabled]{opacity:.25;cursor:default}@media(hover:none){.reel-nav{display:none}}.reel-code{position:relative;margin-top:16px}.reel-code__bar{position:relative;display:flex;gap:2px;height:30px;touch-action:pan-y;cursor:pointer}.reel--compact .reel-code__bar{height:18px}.reel-code__s{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:1px;overflow:hidden;opacity:.62;transition:opacity .25s,transform .25s;outline:none;-webkit-tap-highlight-color:transparent}.reel-code__s i{flex:1;display:block}.reel-code__s:hover,.reel-code__s.is-on{opacity:1}.reel-code__s.is-on{transform:scaleY(1.22)}.reel-code__s.is-here{opacity:.3}.reel-code__gap{flex:none;width:10px}.reel-code__gate{position:absolute;top:-7px;bottom:-7px;width:0;border-left:1px solid var(--bone);pointer-events:none;transition:left .25s cubic-bezier(.2,.7,.2,1);left:0}.reel-code__gate:before{content:"";position:absolute;top:-1px;left:-4px;border:4px solid transparent;border-top-color:var(--bone);border-bottom:0}.reel-code__tip{position:absolute;bottom:calc(100% + 10px);left:0;max-width:min(420px,90vw);padding:7px 9px 6px;border-radius:3px;background:#0a0909f0;border:1px solid rgba(242,237,228,.18);font:600 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transform:translate(-50%);transition:opacity .2s;z-index:5}.reel-code__tip.is-on{opacity:1}.reel-ix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 34px;margin-top:clamp(34px,6vh,60px);padding-top:26px;border-top:1px solid var(--line)}.reel-ix__h{margin:0 0 12px;display:flex;align-items:baseline;gap:10px;font:italic 400 21px/1.15 var(--serif);color:var(--bone)}.reel-ix__h span{font:600 9px/1 var(--mono);font-style:normal;letter-spacing:.24em;color:var(--edge);text-transform:uppercase;white-space:nowrap}.reel-ix__h em{margin-left:auto;font:600 9px/1 var(--mono);font-style:normal;letter-spacing:.2em;color:var(--dim)}.reel-ix ol{list-style:none;margin:0;padding:0}.reel-ix li{margin:0;border-top:1px solid rgba(242,237,228,.07)}.reel-ix a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:9px 0;font:400 15px/1.35 var(--serif);color:#f2ede4d1;text-decoration:none;transition:color .2s}.reel-ix a span{font:600 9.5px/1.9 var(--mono);letter-spacing:.14em;color:var(--dim)}.reel-ix a:hover,.reel-ix a.is-on{color:var(--bone)}.reel-ix a.is-on span{color:var(--edge)}@media(max-width:999px){.reel-screen .rec-slide__img,.reel-screen .rec-slide.is-on .rec-slide__img,.reel-screen .rec-slide__img.xp-lqb:not(.is-in){transition:none;transform:none}}@media(max-width:699px){.reel{--fw: 40vw}.reel--compact{--fw: 62vw}.reel-screen__frame{aspect-ratio:1 / 1.08;max-height:none}.reel-screen .rec-slide__txt{left:18px;right:18px;bottom:18px}.reel-screen .rec-slide__t{font-size:27px}.reel-screen .rec-slide__l{font-size:15px}.reel-screen__hud{left:16px;top:15px}.reel-screen__cue{right:16px;top:13px}.reel-screen__bar{flex-wrap:wrap;gap:10px 14px}.reel-screen__inst{order:3;flex-basis:100%}.reel-screen__go{margin-left:auto}.reel-ix{grid-template-columns:1fr;gap:26px}.reel-fr__t{font-size:16px}}@media(min-width:700px)and (max-width:1099px){.reel-ix{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.reel-strip{scroll-behavior:auto}.reel-screen.is-cue .reel-screen__cue{animation:none}.reel-fr__pic,.reel-fr__pic img,.reel-code__gate,.reel-code__s{transition:none}}@media print{.reel-screen,.reel-film,.reel-code{display:none!important}.reel-ix{display:block}}.rec-sr__reel{padding:0 var(--space-5, 40px);--reel-bleed: var(--space-5, 40px)}@media(max-width:999px){.rec-sr__reel{padding:0 var(--space-3, 20px);--reel-bleed: var(--space-3, 20px)}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/xp-reel.css.map */