.device-frame{--df-bezel:11px;--df-radius:46px;position:relative;width:min(100%,320px);flex-shrink:0;margin-inline:auto;padding:var(--df-bezel);border-radius:var(--df-radius);background:linear-gradient(160deg,#5a4a44 0,var(--sh-cocoa) 38%,#2b201c 100%);box-shadow:inset 0 1px 0 rgba(250,246,240,.12),0 0 0 1px rgba(43,32,28,.9),0 40px 70px -34px rgba(63,48,43,.62),0 14px 28px -18px rgba(63,48,43,.45)}.device-frame:before{inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(167,124,66,.32)}.device-frame:after,.device-frame:before{content:"";position:absolute;pointer-events:none}.device-frame:after{top:19%;right:-3px;width:3px;height:14%;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#4d3d37,#2b201c)}.device-frame-screen{position:relative;z-index:2;aspect-ratio:9/16;overflow:hidden;border-radius:calc(var(--df-radius) - var(--df-bezel));background:var(--sh-cocoa);isolation:isolate}.device-frame-island{position:absolute;top:calc(var(--df-bezel) + 10px);left:50%;z-index:3;width:30%;height:20px;border-radius:999px;background:#1f1613;box-shadow:inset 0 0 0 1px rgba(250,246,240,.06);transform:translateX(-50%);pointer-events:none}.device-frame-screen>.bunny-player{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:inherit;box-shadow:none;aspect-ratio:auto!important}.device-frame-screen>.bunny-player--portrait iframe,.device-frame-screen>.bunny-player--portrait video{object-fit:cover;object-position:center;transform:none}.device-frame-screen>.bunny-player--landscape iframe,.device-frame-screen>.bunny-player--landscape video{object-fit:cover;object-position:center;transform:scale(1.012);transform-origin:center center}.device-frame-screen>.bunny-player-empty{background-size:cover}.device-frame:has(.bunny-player--landscape){--df-bezel:9px;--df-radius:26px;width:100%}.device-frame:has(.bunny-player--landscape) .device-frame-screen{aspect-ratio:16/9}.device-frame:has(.bunny-player--landscape) .device-frame-island,.device-frame:has(.bunny-player--landscape):after{display:none}@media (max-width:640px){.device-frame{--df-bezel:9px;--df-radius:40px;width:min(100%,300px)}}