.vframe{aspect-ratio:16/9;background:var(--tone-bg);place-items:center;display:grid;position:relative;overflow:hidden}.vframe:before{content:"";background:radial-gradient(circle at 70% 20%, var(--tone), transparent 60%);opacity:.35;position:absolute;inset:0}.vframe--video,.vframe--short,.vframe--walkthrough,.vframe--hosted{background:var(--shadow-grey)}.vframe--video:before,.vframe--short:before,.vframe--walkthrough:before,.vframe--hosted:before{opacity:.5}.vframe__badge{z-index:4;border-radius:var(--radius-pill);color:var(--shadow-grey);font-size:var(--text-xs);letter-spacing:.04em;background:#fffdf5eb;padding:3px 8px;font-weight:700;position:absolute;top:10px;left:10px}.vframe__badge--yt{color:#fff;background:#ff3b30}.vframe__badge--bottom{top:auto;bottom:16px}.vframe__play{z-index:2;width:52px;height:52px;transition:transform var(--duration-fast);background:#fffdf5f2;border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:0 6px 18px #00000059}.vframe__play:before{content:"";border-left:16px solid var(--shadow-grey);border-top:10px solid #0000;border-bottom:10px solid #0000;margin-left:5px}.vframe__dur{z-index:2;color:#fff;font-size:var(--text-xs);font-variant-numeric:tabular-nums;background:#000000bf;border-radius:5px;padding:2px 6px;font-weight:700;position:absolute;bottom:14px;right:10px}.vframe__bar{z-index:2;background:#fffdf540;height:4px;position:absolute;bottom:0;left:0;right:0}.vframe__bar i{background:#ff3b30;width:34%;height:100%;display:block}.vframe__phone{z-index:2;aspect-ratio:9/16;background:linear-gradient(160deg, var(--tone), var(--shadow-grey) 75%);border:2px solid #fffdf580;border-radius:12px;place-items:center;height:86%;display:grid;position:relative;overflow:hidden}.vframe__phone .vframe__play{width:38px;height:38px}.vframe__phone .vframe__play:before{border-top-width:8px;border-bottom-width:8px;border-left-width:12px;margin-left:4px}.vframe__win{z-index:1;background:#fffdf514;border:1px solid #fffdf52e;border-radius:8px;gap:5px;height:calc(100% - 24px);padding:7px 9px;display:flex;position:absolute;top:12px;left:12px;right:12px}.vframe__win i{background:#fffdf573;border-radius:50%;width:7px;height:7px}.vframe__doc{z-index:2;aspect-ratio:3/4;background:var(--white);border-radius:6px;flex-direction:column;gap:7px;width:26%;padding:12px 10px;display:flex;position:relative;box-shadow:0 6px 16px #221d232e}.vframe__doc i{background:var(--tone);opacity:.6;border-radius:3px;height:5px;display:block}.vframe__doc i:nth-child(2){width:70%}.vframe__doc i:nth-child(4){width:55%}.vframe--photo{background:var(--shadow-grey)}.vframe--photo:before{z-index:1;opacity:1;background:linear-gradient(#00000040,#0000 35% 65%,#00000059)}.vframe__img{object-fit:cover}.vframe--photo .vframe__play{opacity:.92;width:46px;height:46px}.vframe--photo .vframe__play:before{border-top-width:9px;border-bottom-width:9px;border-left-width:14px;margin-left:4px}
