@layer theme,base;@layer components{.phone{aspect-ratio:var(--ar);filter:drop-shadow(0 30px 40px #030a088c);display:block;position:relative;container-type:inline-size}.phone-screen{left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);background:#000;border-radius:13cqw;flex-direction:column;display:flex;position:absolute;overflow:hidden}.phone-status{height:calc(var(--swn) * 47 / 390 * 1cqw);flex:none}.phone-view{flex:1;display:block;position:relative}.phone-frame{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.phone-clip{object-fit:cover;object-position:top;opacity:0;width:100%;height:100%;transition:opacity .4s;position:absolute;inset:0}.phone[data-playing] .phone-clip{opacity:1}}@layer utilities;