/* The loop: a video feed at midnight, iOS's own Time Limit, and Per Push's life-years cinema. */
.lp { background: #000; color: #fff; }
.lp-sb { position: absolute; left: 0; top: 0; width: 393px; z-index: 9; color: #fff; }
.lp-feed { position: absolute; inset: 0; overflow: hidden; }
.lp-card { position: absolute; left: 0; top: 0; width: 393px; height: 886px; overflow: hidden; background: linear-gradient(160deg, var(--a), #08070c 62%), var(--a); }
.lp-blob { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--b), transparent 68%); opacity: 0.85; }
.lp-blob.b1 { left: -60px; top: 160px; width: 360px; height: 360px; }
.lp-blob.b2 { left: 170px; top: 380px; width: 300px; height: 300px; opacity: 0.6; }
.lp-blob.b3 { left: 40px; top: 560px; width: 220px; height: 220px; opacity: 0.45; }
.lp-cap { position: absolute; left: 16px; bottom: 112px; width: 300px; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.lp-cap b { font-size: 16px; font-weight: 700; }
.lp-cap span { font-size: 15px; color: rgba(255, 255, 255, 0.92); }
.lp-scrub { position: absolute; left: 0; right: 0; bottom: 86px; height: 2px; background: rgba(255, 255, 255, 0.25); }
.lp-scrub i { display: block; height: 100%; background: #fff; }
.lp-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lp-tabs { position: absolute; left: 0; right: 0; top: 62px; display: flex; justify-content: center; gap: 22px; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.62); }
.lp-tabs b { color: #fff; font-weight: 700; box-shadow: 0 3px 0 -1px #fff; }
.lp-acts { position: absolute; right: 12px; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.lp-acts span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 30px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.lp-acts small { font-size: 12px; font-weight: 600; }
.lp-av .pp-tile { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }

/* iOS's own Time Limit screen, and the action sheet behind Ignore Limit */
.lp-shield { position: absolute; inset: 0; z-index: 4; background: rgba(18, 18, 22, 0.86); display: flex; flex-direction: column; align-items: center; }
.lp-sicon { margin-top: 268px; width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center; font-size: 42px; color: #fff; background: linear-gradient(160deg, #6e6af0, #4a46c9); }
.lp-stitle { margin-top: 24px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.lp-ssub { margin-top: 8px; font-size: 17px; color: rgba(255, 255, 255, 0.72); }
.lp-ok { position: absolute; left: 24px; top: 724px; width: 345px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #0a84ff; font-size: 17px; font-weight: 600; }
.lp-ignore { position: absolute; left: 24px; top: 784px; width: 345px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #0a84ff; font-size: 17px; font-weight: 500; }
.lp-dim { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; }
.lp-sheet { position: absolute; left: 8px; top: 586px; width: 377px; z-index: 6; visibility: hidden; display: flex; flex-direction: column; gap: 8px; }
.lp-grp { border-radius: 14px; overflow: hidden; background: rgba(44, 44, 46, 0.97); }
.lp-grp p { height: 58px; display: grid; place-items: center; font-size: 20px; color: #0a84ff; box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.14); }
.lp-cancel p { font-weight: 600; box-shadow: none; }

/* Per Push's cinema: 365 dots for the year, 80 for a life */
.lp-cinema { position: absolute; inset: 0; z-index: 7; visibility: hidden; background: radial-gradient(ellipse 90% 70% at 50% 45%, #1d0c10, #090608 75%); }
.lp-dots { position: absolute; left: 0; top: 0; width: 393px; height: 886px; }
.lp-t { position: absolute; left: 24px; top: 104px; width: 345px; font-size: 29px; font-weight: 700; line-height: 35px; text-wrap: balance; letter-spacing: -0.01em; color: #fff; opacity: 0; }
.lp-t em { font-style: normal; color: #ff5e5e; }
.lp-tap { position: absolute; left: 0; right: 0; top: 812px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: #8e8285; }
.lp-burst { position: absolute; left: 24px; top: 776px; width: 345px; height: 58px; border-radius: 29px; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: #ff4646; box-shadow: 0 10px 24px -8px rgba(255, 70, 70, 0.7); opacity: 0; }

/* the red days, in the air around the phone */
.loop-air { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; }