.reel{position:relative;height:100svh;min-height:320px;overflow:hidden;background:#000}
.reel .col{padding-top:clamp(72px,5vw,96px)}
.reel-head{position:relative;z-index:3;pointer-events:none;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(12px,1.4vw,20px) 24px}
.reel-head>*{pointer-events:auto}
.reel-fit{position:absolute;inset:0}
.reel-screen{position:absolute;inset:0;overflow:hidden;background:#000;container:reel/size}
.reel-screen.fs .reel-v{background:#000}
.reel-v{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#000}
.reel-v[hidden]{display:none}
.reel-hit{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:0;border:0;
  background:none;cursor:pointer}
.reel-hit:focus{outline:none}
.reel-hit:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.reel-screen.play:not(.ui) .reel-hit{cursor:none}
.reel-logo{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4cqw,18px);pointer-events:none;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.reel-mark{position:relative;display:block;width:clamp(72px,12cqmin,170px);aspect-ratio:1}
.reel-mark svg{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 32px rgba(0,0,0,.55));
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.reel-mark::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(250,250,250,.75);
  opacity:0;animation:reel-ring 2.4s cubic-bezier(.22,1,.36,1) infinite}
.reel-hit:hover .reel-mark svg{transform:scale(1.07)}
.reel-hit:hover .reel-mark::after{animation-duration:1.4s}
@keyframes reel-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.reel-cap{font:500 clamp(13px,1.6cqmin,17px)/1 Onest,system-ui,sans-serif;color:#fafafa;letter-spacing:.02em;
  opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.reel-screen.play .reel-logo{opacity:0;transform:scale(1.25)}
.reel-screen.play .reel-mark::after{animation:none}
.reel-ui{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;
  gap:clamp(8px,2cqw,16px);padding:40px var(--frame) clamp(10px,1.6cqh,20px);
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));color:#fafafa;
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.reel-screen:not(.on) .reel-ui{visibility:hidden}
.reel-screen.on:not(.play) .reel-ui,.reel-screen.on.ui .reel-ui{opacity:1}
.reel-screen.on:not(.play) .reel-ui>*,.reel-screen.on.ui .reel-ui>*{pointer-events:auto}
.reel-time{flex:none;font:500 13px/1 Onest,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.reel-track{position:relative;flex:1;min-width:0;height:32px;cursor:pointer;touch-action:none}
.reel-track::before,.reel-fill{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.reel-track::before{background:rgba(250,250,250,.28)}
.reel-fill{background:#fafafa;transform-origin:0 50%;transform:scaleX(0)}
.reel-knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:#fafafa;transition:transform .15s ease}
.reel-track:hover .reel-knob,.reel-track.drag .reel-knob{transform:scale(1.3)}
.reel-track:focus{outline:none}
.reel-track:focus-visible{box-shadow:0 0 0 2px #fafafa;border-radius:4px}
.reel-pp,.reel-fs{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;
  border-radius:50%;background:none;color:#fafafa;cursor:pointer}
.reel-pp:hover,.reel-fs:hover{background:rgba(250,250,250,.14)}
.reel-pp:focus,.reel-fs:focus{outline:none}
.reel-pp:focus-visible,.reel-fs:focus-visible{box-shadow:0 0 0 2px #fafafa}
.reel-fs svg{width:22px;height:22px}
.reel-fs .fs-out,.reel-screen.fs .reel-fs .fs-in{display:none}
.reel-screen.fs .reel-fs .fs-out{display:block}
.reel-pp{margin-left:-6px}
.reel-pp svg{fill:currentColor}
.reel-pp .pp-play{width:14px;height:16px;margin-left:2px}
.reel-pp .pp-pause{width:22px;height:22px}
.reel-pp .pp-pause,.reel-screen.play .reel-pp .pp-play{display:none}
.reel-screen.play .reel-pp .pp-pause{display:block}
.reel-hit{transition:background-color .3s ease}
.reel-screen.on:not(.play) .reel-hit{background:rgba(10,10,10,.5)}
.reel-wall{position:absolute;inset:0;overflow:hidden;background:#0a0a0a}
.reel-lanes{opacity:0;transition:opacity .8s ease}
.reel-wall.ready .reel-lanes{opacity:1}
.reel-screen.live .reel-wall{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.reel-wall::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 26% 30% at 50% 50%,rgba(10,10,10,.6),rgba(10,10,10,.12) 75%,rgba(10,10,10,0) 100%),
  linear-gradient(rgba(10,10,10,.8),rgba(10,10,10,.1) 28%,rgba(10,10,10,.05) 70%,rgba(10,10,10,.7));
  box-shadow:inset 0 0 8cqmax 1cqmax #0a0a0a}
.reel-lanes{--lw:11.5cqw;--lg:1.2cqw;position:absolute;left:50%;top:50%;display:flex;gap:var(--lg);
  transform:translate(-50%,-50%) perspective(125cqmax) rotateX(24deg) rotateZ(-14deg) scale(1.12)}
.reel-lane{flex:none;width:var(--lw);height:160cqmax;overflow:hidden}
.reel-lane:nth-child(even){margin-top:calc(var(--lw) * -.9)}
.reel-roll{will-change:transform}
.reel-roll img{display:block;width:100%;height:auto}
@container reel (orientation:portrait){
  .reel-lanes{--lw:27cqw;--lg:2.4cqw;transform:translate(-50%,-50%) perspective(125cqmax) rotateX(24deg) rotateZ(-14deg) scale(1.05)}
  .reel-lane:nth-child(n+6){display:none}}
.reel-head{transition:opacity .3s ease}
.reel-head .hour-top{text-shadow:0 2px 18px rgba(0,0,0,.7)}
.reel:has(.reel-screen.on) .reel-head{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}