.device-frame-container{display:flex;flex-direction:column;align-items:center;padding:0;min-height:auto;background:transparent}.device-controls{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;border-radius:1rem;box-shadow:0 4px 20px #0000001a;border:1px solid rgba(0,0,0,.05)}.device-frame-wrapper{position:relative;padding:0;width:100%;max-height:calc(100vh - 200px);min-height:600px;overflow:visible;display:flex;align-items:flex-start;justify-content:center}.device-frame{position:relative;box-shadow:0 60px 90px #0000004d,0 35px 50px #0003,0 20px 30px #00000026,0 10px 20px #0000001a,0 5px 10px #0000000d,inset 0 0 0 1px #ffffff1a,inset 0 1px 2px #ffffff0d;transition:transform .3s ease,box-shadow .3s ease;margin:60px auto 0}.device-frame:hover{box-shadow:0 70px 100px #00000059,0 40px 60px #00000040,0 25px 40px #0003,0 15px 25px #00000026,0 8px 15px #0000001a,inset 0 0 0 1px #ffffff26,inset 0 1px 3px #ffffff14;transform:translateY(-2px)}.device-screen{box-shadow:inset 0 0 10px #00000080;overflow:hidden;position:relative}.device-iframe{width:100%;height:100%;border:0;-ms-overflow-style:none;scrollbar-width:none;margin:0;padding:0}.device-iframe::-webkit-scrollbar{display:none;width:0px;background:transparent}.device-screen{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.device-screen iframe{transform:none;width:100%;height:100%}.device-notch{box-shadow:0 2px 5px #0003}.power-button,.volume-up,.volume-down{box-shadow:-2px 0 4px #0003,inset -1px 0 2px #ffffff1a}.home-indicator{animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}.fullscreen-overlay{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.device-frame-container{padding:1rem;min-height:100vh;background:linear-gradient(135deg,#f5f5f5,#e8e8e8)}.device-frame-wrapper{padding:0 1rem;height:100vh;display:flex;align-items:center;justify-content:center}.device-frame{transform:scale(.8)!important;margin:0 auto;border-radius:1rem}}@media (max-width: 480px){.device-frame-container{padding:.75rem;overflow:hidden}.device-frame-wrapper{height:100vh;padding:0 .75rem}.device-frame{transform:scale(.7)!important;border-radius:1.25rem}}@media (max-width: 390px){.device-frame{transform:scale(.6)!important;border-radius:1.5rem}}@media (max-width: 320px){.device-frame{transform:scale(.75)!important;border-radius:1.75rem}}@media (max-height: 500px) and (orientation: landscape){.device-frame-container{padding:0;min-height:100vh}.device-frame-wrapper{height:100vh;padding:0}.device-frame{transform:scale(.35)!important}}.device-frame[data-device=iphone14pro] .device-notch{background:#000;border-radius:20px;width:126px;height:37px;top:12px}.device-frame[data-device=galaxys23]:before{content:"";position:absolute;top:20px;left:50%;transform:translate(-50%);width:12px;height:12px;background:#000;border-radius:50%;z-index:11}.device-frame[data-device=ipadmini]:after{content:"";position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:50px;height:50px;border:3px solid rgba(255,255,255,.3);border-radius:50%}.device-frame[data-landscape=true]{.device-notch{display:none}.home-indicator{width:4px;height:120px;inset:50% 10px auto auto;transform:translateY(-50%)}}.device-screen.loading{display:flex;align-items:center;justify-content:center;background:#f5f5f5}.device-screen.loading:before{content:"";width:40px;height:40px;border:3px solid #e0e0e0;border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.device-frame[data-zoom="0.3"]{transform:scale(.3)}.device-frame[data-zoom="0.5"]{transform:scale(.5)}.device-frame[data-zoom="0.7"]{transform:scale(.7)}.device-frame[data-zoom="1"]{transform:scale(1)}.device-frame[data-zoom="1.5"]{transform:scale(1.5)}.device-frame,.device-frame *{transition:all .3s cubic-bezier(.4,0,.2,1)}@media print{.device-controls{display:none}.device-frame-wrapper{padding:0;height:auto;background:#fff}.device-frame{box-shadow:none;border:1px solid #ddd;transform:scale(1)!important}}
