#reference-hero{height:400px;container-type:inline-size}
#reference-hero .hero-backdrop{display:block;width:100%;height:100%}
#reference-hero .hero-image{width:100%;height:100%;object-fit:cover;object-position:center}
#reference-hero .reference-slide:after{pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 25%,rgba(0,0,0,.65) 65%,rgba(0,0,0,.8) 100%)}
.hero-collection-link{position:absolute;inset:0;z-index:1}
#reference-hero .reference-hero-content{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none;left:20px;right:20px;bottom:20px}
#reference-hero .reference-hero-content a{pointer-events:auto}
.hero-summary{min-width:0}
#reference-hero h1{font-size:32px;font-weight:600;line-height:1.2;margin:0 0 6px;letter-spacing:-.5px}
#reference-hero .hero-author{font-size:14px;line-height:20px;color:#eee;font-weight:500;margin:0 0 12px}
#reference-hero .author-verified{width:12px;height:12px;font-size:8px;background:#969696}
#reference-hero .reference-stats{width:max-content;max-width:100%;padding:12px 0;background:#ffffff1a;border:1px solid #ffffff26;backdrop-filter:blur(24px)}
#reference-hero .reference-stats>div{padding:0 16px}
#reference-hero .reference-stats small{text-transform:uppercase;font-size:12px;font-weight:600;line-height:16px;margin-bottom:8px;color:#aaa}
#reference-hero .reference-stats strong{font-size:14px;line-height:18px;color:white;white-space:nowrap}
#reference-hero .hero-thumbs{display:flex;flex:none;gap:12px;overflow:visible}
#reference-hero .hero-thumbs a{display:block;width:80px;height:80px;border-radius:8px;border:1px solid #ffffff26;overflow:hidden;background:#151718;transition:transform .2s}
#reference-hero .hero-thumbs img,#reference-hero .hero-thumbs video{display:block;width:100%;height:100%;object-fit:cover}
#reference-hero .hero-thumbs a:hover{transform:translateY(-2px) scale(1.01)}
@container(max-width:760px){#reference-hero .hero-thumbs a{width:60px;height:60px}#reference-hero .hero-thumbs{gap:8px}#reference-hero .reference-stats>div{padding:0 10px}}
@container(max-width:620px){#reference-hero .reference-hero-content{flex-wrap:wrap;gap:12px;left:12px;right:12px;bottom:12px}#reference-hero h1{font-size:26px}#reference-hero .reference-stats>div{padding:0 8px}#reference-hero .reference-stats small{font-size:9px}#reference-hero .reference-stats strong{font-size:11px}#reference-hero .hero-thumbs a{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){#reference-hero .hero-thumbs a{transition:none}}

#reference-hero .hero-thumbs a:active{transform:scale(1.005)}

/* The phone card follows the available width; its statistics scroll independently. */
@media(max-width:640px){
 body #reference-hero{height:auto;aspect-ratio:1;min-width:0;border-radius:8px}
 body #reference-hero .reference-slide:after{background:linear-gradient(180deg,#0001 20%,#0002 44%,#0009 78%,#000b)}
 body #reference-hero .reference-hero-content{left:12px;right:12px;bottom:12px;display:block}
 body #reference-hero .hero-summary{width:100%;min-width:0}
 body #reference-hero h1{font-size:24px;line-height:29px;letter-spacing:-.4px;margin:0 0 14px}
 body #reference-hero h1 a{display:flex;align-items:center;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body #reference-hero h1 .verified{flex:0 0 20px;width:20px;height:20px;margin-left:0}
 body #reference-hero .hero-author,body #reference-hero .hero-thumbs{display:none}
 body #reference-hero .reference-stats{box-sizing:border-box;width:100%;max-width:100%;height:64px;padding:12px 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;pointer-events:auto;background:#ffffff1a;border-radius:8px}
 body #reference-hero .reference-stats::-webkit-scrollbar{display:none}
 body #reference-hero .reference-stats>div{flex:0 0 auto;padding:0 12px;min-width:0}
 body #reference-hero .reference-stats small{font-size:12px;line-height:16px;margin-bottom:6px}
 body #reference-hero .reference-stats strong{display:block;font-size:12px;line-height:18px;white-space:nowrap}
 body #reference-hero .slide-prev,body #reference-hero .slide-next{opacity:0}
 body #reference-hero .slide-prev:focus-visible,body #reference-hero .slide-next:focus-visible{opacity:1;outline:2px solid #58afff;outline-offset:2px}
 body .reference-main .reference-dots{height:28px;margin-top:4px;gap:10px;align-items:center}
 body .reference-main .reference-dots button{flex:1;min-width:0;width:auto;height:28px;border-radius:0;background:transparent;position:relative}
 body .reference-main .reference-dots button:after{content:'';position:absolute;left:0;right:0;top:11px;height:6px;border-radius:4px;background:#28282e}
 body .reference-main .reference-dots button.active:after{background:#fff}
 body .reference-main .reference-dots button:focus-visible{outline:2px solid #58afff;outline-offset:2px}
}