*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#000;color:#fff;overflow:hidden;height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.text-shadow{text-shadow:0 2px 8px rgba(0,0,0,.8)}
.glass-tag{background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
@keyframes scroll-vertical{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.auto-scroll-container{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;animation:scroll-vertical 60s linear infinite;will-change:transform}
.auto-scroll-container:active{animation-play-state:paused}
#scroll-content{animation:scroll-vertical 60s linear infinite!important;will-change:transform}
@keyframes pulse-brilliant{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(236,72,153,.7)}70%{transform:scale(1.05);box-shadow:0 0 0 20px rgba(236,72,153,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(236,72,153,0)}}
.animate-login{animation:pulse-brilliant 1.5s infinite}
.placeholder-card{background:linear-gradient(135deg,#2a1f3a 0%,#3a1a2e 50%,#2a1530 100%);position:relative;overflow:hidden}
.placeholder-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(236,72,153,.25),transparent 55%),radial-gradient(circle at 75% 70%,rgba(168,85,247,.2),transparent 50%)}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(to bottom,#000,rgba(0,0,0,.7),transparent);padding:1rem;display:flex;justify-content:space-between;align-items:center}
.header-brand{display:flex;align-items:center;gap:.5rem}
.live-dot-wrap{position:relative;display:flex;width:.75rem;height:.75rem}
.live-dot-ping{position:absolute;display:inline-flex;width:.75rem;height:.75rem;border-radius:9999px;background:#fb7185;opacity:.75;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
.live-dot{position:relative;display:inline-flex;width:.75rem;height:.75rem;border-radius:9999px;background:#f43f5e}
.brand-title{font-weight:900;font-size:1.5rem;font-style:italic;letter-spacing:-.05em;color:#f43f5e}
.header-online{display:flex;flex-direction:column;align-items:flex-end}
.online-tag{font-size:10px;padding:.25rem .5rem;border-radius:.25rem;border:1px solid rgba(255,255,255,.2)}
.online-count{color:#4ade80;font-weight:700}
.scroll-area{flex-grow:1;overflow:hidden;position:relative}
.scroll-inner{padding:5rem .75rem 0;gap:.75rem}
.fade-bottom{position:absolute;left:0;right:0;bottom:0;height:20rem;background:linear-gradient(to top,#000,rgba(0,0,0,.9),transparent);z-index:10;pointer-events:none}
.footer-cta{position:fixed;bottom:0;left:0;right:0;z-index:50;padding:1.5rem;display:flex;flex-direction:column;align-items:center}
.cta-copy{text-align:center;margin-bottom:1.25rem}
.tagline{font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-.025em}
.subtagline{font-size:.875rem;color:#fb7185;font-weight:500;font-style:italic;margin-top:.25rem}
.download-btn{width:100%;max-width:24rem;background:linear-gradient(to right,#e11d48,#ec4899);color:#fff;padding:1rem 0;border-radius:1rem;font-weight:900;font-size:1.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);transition:transform .15s ease;display:flex;align-items:center;justify-content:center;gap:.75rem;border:none;cursor:pointer}
.download-btn:active{transform:scale(.95)}
.download-btn svg{width:1.5rem;height:1.5rem;flex-shrink:0}
.age-row{margin-top:1rem;display:flex;align-items:center;gap:1rem;opacity:.4}
.age-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.card{position:relative;aspect-ratio:3/4;border-radius:1.5rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent,transparent)}
.card-live{position:absolute;top:.75rem;left:.75rem;display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-radius:9999px}
.card-live-dot{width:.375rem;height:.375rem;background:#22c55e;border-radius:9999px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.card-live-text{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:-.025em}
.card-info{position:absolute;bottom:.75rem;left:.75rem}
.card-label{font-weight:900;font-size:1.125rem}
.card-note{font-size:11px;color:rgba(255,255,255,.7);font-style:italic}
.card-cam{position:absolute;bottom:.75rem;right:.75rem;background:#f43f5e;padding:.5rem;border-radius:9999px;box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}
.card-cam svg{width:1rem;height:1rem;color:#fff;display:block}
.pixel-hide{display:none}