/* The day player: a web version of opening someone's daily vlog in the app. */
.vp{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:rgba(16,17,18,.94);color:#fff;overflow:hidden}
.vp[open]{display:grid;place-items:center}
.vp::backdrop{background:#101112}
.vp-stage{position:relative;height:min(100%,880px);aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none}
.vp-media,.vp-media img,.vp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-stage::before{content:"";position:absolute;inset:0 0 auto 0;height:140px;background:linear-gradient(to bottom,rgba(16,17,18,.6),rgba(16,17,18,0));z-index:1;pointer-events:none}
.vp-bars{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;gap:4px}
.vp-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden}
.vp-bars b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.vp-bars .done b{transform:scaleX(1)}
.vp-head{position:absolute;z-index:3;top:26px;left:14px;right:8px;display:flex;align-items:center;gap:10px}
.vp-head .dot{width:30px;height:30px;box-shadow:0 0 0 2px #fff}
.vp-who{flex:1;min-width:0;display:grid;line-height:1.25}
.vp-who b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-who span{font-size:12px;opacity:.9}
.vp-close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff}
.vp-close svg{width:20px;height:20px}
.vp-prev,.vp-next{position:absolute;z-index:2;top:80px;bottom:0}
.vp-prev{left:0;width:34%}
.vp-next{right:0;width:66%}
.vp-kind{position:absolute;z-index:2;left:14px;bottom:14px;padding:5px 9px;border-radius:8px;background:rgba(16,17,18,.62);font-size:11px;pointer-events:none}
.vp-end{position:absolute;z-index:4;inset:0;display:grid;align-content:center;justify-items:start;gap:14px;padding:32px;background:rgba(16,17,18,.82)}
.vp-end h2{font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.03em}
.vp-end p{color:#D4D4D7;font-size:16px}
.vp-end div{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.vp-hint{position:absolute;z-index:3;left:0;right:0;bottom:52px;text-align:center;font-size:11px;opacity:.8;pointer-events:none}
@media (max-width:560px){
  .vp{padding:0}
  .vp-stage{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
}