.df-frame{display:flex;width:100%;flex-direction:column;align-items:center;gap:.75rem}.df-stage{position:relative;width:100%;margin-inline:auto}.df-scaled{position:absolute;top:0;left:0;transform-origin:top left}.df-shell{position:absolute;box-sizing:border-box}.df-screen{position:absolute;overflow:hidden;background:#000;isolation:isolate}.df-base,.df-btn,.df-camera,.df-glare,.df-island{pointer-events:none}.df-glare{position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 22%,rgba(255,255,255,0) 40%)}.df-phone .df-shell{background:linear-gradient(160deg,#3d3d47,#1e1e24 42%,#0c0c10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 3px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.04),0 45px 90px -35px rgba(0,0,0,.9),0 12px 30px -12px rgba(109,74,224,.25)}.df-phone .df-screen{box-shadow:inset 0 0 0 1px rgba(0,0,0,.95)}.df-island{position:absolute;z-index:3;left:50%;width:100px;height:28px;transform:translateX(-50%);border-radius:999px;background:#050507;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.df-island:after{content:"";position:absolute;top:50%;right:9px;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 35%,#34486b 0,#0a1020 65%);box-shadow:0 0 0 1px rgba(255,255,255,.04)}.df-phone--landscape .df-island{left:auto;top:50%;width:28px;height:100px;transform:translateY(-50%)}.df-phone--landscape .df-island:after{top:9px;right:50%;transform:translateX(50%)}.df-btn{position:absolute;border-radius:2px;background:linear-gradient(90deg,#45454f,#1c1c22);box-shadow:0 0 0 .5px rgba(0,0,0,.8)}.df-phone--portrait .df-btn--mute{left:-3px;top:148px;width:3px;height:28px}.df-phone--portrait .df-btn--vol-up{left:-3px;top:200px;width:3px;height:58px}.df-phone--portrait .df-btn--vol-down{left:-3px;top:272px;width:3px;height:58px}.df-phone--portrait .df-btn--power{right:-3px;top:226px;width:3px;height:92px}.df-phone--landscape .df-btn{background:linear-gradient(180deg,#45454f,#1c1c22)}.df-phone--landscape .df-btn--mute{top:-3px;left:148px;height:3px;width:28px}.df-phone--landscape .df-btn--vol-up{top:-3px;left:200px;height:3px;width:58px}.df-phone--landscape .df-btn--vol-down{top:-3px;left:272px;height:3px;width:58px}.df-phone--landscape .df-btn--power{bottom:-3px;left:226px;height:3px;width:92px}.df-tablet .df-shell{background:linear-gradient(160deg,#34343d,#1a1a20 48%,#0d0d11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 0 2px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.04),0 45px 90px -35px rgba(0,0,0,.9),0 12px 30px -12px rgba(109,74,224,.2)}.df-tablet .df-screen{box-shadow:inset 0 0 0 1px rgba(0,0,0,.95)}.df-camera{position:absolute;z-index:3;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4d6e 0,#05070c 65%);box-shadow:0 0 0 1.5px rgba(255,255,255,.06)}.df-laptop .df-shell{background:linear-gradient(180deg,#33333c,#1b1b21 40%,#111115);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 0 2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 30px 70px -30px rgba(0,0,0,.85)}.df-laptop .df-screen{box-shadow:inset 0 0 0 1px rgba(0,0,0,.95)}.df-base{position:absolute;left:0;right:0;bottom:0;border-radius:3px 3px 12px 12px;background:linear-gradient(180deg,#45454f,#2a2a32 30%,#1a1a20 70%,#121217);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 24px 44px -18px rgba(0,0,0,.9),0 10px 24px -10px rgba(109,74,224,.2)}.df-base:before{content:"";position:absolute;top:0;left:50%;width:130px;height:5px;transform:translateX(-50%);border-radius:0 0 7px 7px;background:linear-gradient(180deg,#0c0c10,#26262e);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}.df-base:after{content:"";position:absolute;left:5%;right:5%;bottom:-3px;height:3px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(2px)}