.dvr{display:block;padding:30px 0 40px;background:transparent;overflow:hidden;font-family:inherit}
.dvr__pillwrap{display:flex;justify-content:center;padding:24px 16px 8px}
.dvr__badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(220,38,56,.6);border-radius:50px;padding:9px 18px;font-size:13px;font-weight:700;line-height:1.2;color:#fff;letter-spacing:.08em;white-space:nowrap}
.dvr__dot{display:block;width:9px;height:9px;border-radius:50%;background:#ff2b3d;flex-shrink:0;box-shadow:0 0 6px 2px #ff2b3dcc;animation:dvrGlow 1.6s ease-in-out infinite}
@keyframes dvrGlow{0%,to{box-shadow:0 0 3px 1px #ff2b3d8c;opacity:.85}50%{box-shadow:0 0 11px 4px #ff2b3d;opacity:1}}
.dvr h2.dvr__title{font-family:inherit;font-size:min(calc((100vw - 32px)/15),34px);font-weight:600;color:#1a1a1a;line-height:1.45;letter-spacing:0;margin:0;padding:6px 16px 20px;text-align:center;text-transform:none}
.dvr h2.dvr__title>span{display:block;white-space:nowrap}
.dvr h2.dvr__title .dvr__brand{font-weight:800;font-family:inherit}
.dvr__grid{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.dvr__grid::-webkit-scrollbar{display:none}
.dvr__track{display:flex;gap:15px;width:max-content;padding:0 20vw;align-items:flex-start}
.dvr__card{position:relative;flex-shrink:0;width:60vw;height:500px;border-radius:8px;overflow:hidden;background:#d9d6d1;cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;-webkit-tap-highlight-color:transparent}
.dvr__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border:0;outline:0;background:#d9d6d1}
.dvr__video::-webkit-media-controls,.dvr__video::-webkit-media-controls-panel,.dvr__video::-webkit-media-controls-enclosure{display:none!important}
.dvr__card:not(.is-playing) .dvr__video{filter:brightness(.9)}
.dvr__shade{position:absolute;left:0;bottom:0;width:100%;height:60%;background:linear-gradient(to top,#0000004d,#00000036,#0000);pointer-events:none;z-index:2}
.dvr__play{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;background:#fff;border-radius:50%;z-index:3;pointer-events:none}
.dvr__play:after{content:"";position:absolute;top:50%;left:51%;transform:translate(-40%,-50%);width:0;height:0;border-left:20px solid #000;border-top:12px solid transparent;border-bottom:12px solid transparent}
.dvr__info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;box-sizing:border-box;text-align:left;pointer-events:none}
.dvr h3.dvr__quote{font-family:inherit;font-size:19px;font-weight:700;line-height:1.35;letter-spacing:0;color:#fff;margin:0 0 8px;text-align:left;text-transform:none;text-shadow:0 1px 6px rgba(0,0,0,.35);text-wrap:balance;line-break:strict}
.dvr__name{display:block;font-size:14.6px;font-weight:400;line-height:1.5;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);text-wrap:balance;line-break:strict}
.dvr__card.is-playing .dvr__play,.dvr__card.is-playing .dvr__info,.dvr__card.is-playing .dvr__shade{opacity:0}
.dvr__nav{display:flex;justify-content:center;gap:12px;margin-top:40px}
.dvr__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;margin:0;background:#fff;color:#000;border:1px solid #e0e0e0;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dvr__btn svg{width:24px;height:24px;pointer-events:none}
.dvr__note{margin:18px 16px 0;text-align:center;font-size:11px;color:#8a8580}
@media(min-width:769px){
  .dvr{padding-top:40px}
  .dvr__track{gap:20px;padding:0 calc(50vw - 150px)}
  .dvr__card{width:300px;height:500px}
  .dvr h3.dvr__quote{font-size:22px}
  .dvr__name{font-size:16px}
  .dvr__nav{margin-top:65px}
}