:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: #080808; color: #fff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
button { color: inherit; font: inherit; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
.gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 15%, #29242c, #080808 55%); }
.gate-card { width: min(100%, 420px); padding: 30px; border: 1px solid #38343a; border-radius: 24px; background: rgba(20, 18, 21, .94); box-shadow: 0 24px 80px #000; }
.gate-card h1 { margin: 4px 0 12px; font-size: 2rem; }
.gate-card p { color: #c8c2cb; line-height: 1.5; }
.eyebrow { margin: 0; color: #f07bb2 !important; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.primary { width: 100%; margin-top: 14px; padding: 14px 18px; border-radius: 999px; background: #fff; color: #090909; font-weight: 800; }
.feed { position: fixed; inset: 0; background: #000; touch-action: none; }
video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 25%, transparent 55%, rgba(0,0,0,.85)); }
.topbar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 16px 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.controls { display: grid; grid-template-columns: minmax(90px, 130px) auto; align-items: center; justify-items: end; gap: 4px 10px; }
.intensity { grid-column: 1; width: 100%; display: flex; justify-content: space-between; font-size: .62rem; }
.intensity output { color: #f5a7c9; }
#explicitness { grid-column: 1; width: 100%; accent-color: #ee5e9f; }
.icon { grid-column: 2; grid-row: 1 / 3; padding: 9px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.details { position: absolute; z-index: 2; left: 16px; right: 84px; bottom: max(28px, env(safe-area-inset-bottom)); text-shadow: 0 1px 5px #000; }
.details h1 { margin: 4px 0 6px; font-size: clamp(1.05rem, 4.5vw, 1.4rem); line-height: 1.2; }
.details p { margin: 0; color: #d8d5d9; font-size: .82rem; }
.status { min-height: 1em; color: #f5a7c9 !important; font-weight: 800; }
.actions { position: absolute; z-index: 3; right: 14px; bottom: max(28px, env(safe-area-inset-bottom)); display: grid; gap: 13px; }
.reaction { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(18,18,18,.65); font-size: 1.7rem; font-weight: 500; backdrop-filter: blur(8px); }
.reaction.active { color: #080808; background: #fff; }
.progress { position: absolute; z-index: 4; left: 0; bottom: 0; width: 0; height: 3px; background: #ee5e9f; transition: width .2s linear; }
.empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 30px; text-align: center; background: #0b0b0b; }
.empty h1 { margin-bottom: 4px; }
.empty p { color: #aaa; }
@media (min-width: 700px) { .feed { left: 50%; width: min(100%, 520px); transform: translateX(-50%); box-shadow: 0 0 80px #000; } body { background: #191919; } }