.devframe{position:relative;margin:0 auto;background:var(--black);border-style:solid;border-color:var(--black);border-width:var(--bez, 11px);box-shadow:0 6px #1113161f}.devframe-screen{overflow:hidden;background:var(--paper);width:100%;height:100%}.devframe-screen>img,.devframe-screen>video{width:100%;height:100%;object-fit:cover;display:block}.devframe.phone{--fw: min(300px, 62vw, 42vh);--bez: calc(var(--fw) * .0367);width:var(--fw);aspect-ratio:1 / 2;border-radius:calc(var(--fw) * .0867)}.devframe.phone .devframe-screen{border-radius:calc(var(--fw) * .05)}.devframe.phone .df-cam{position:absolute;top:calc(var(--fw) * .0333);left:50%;transform:translate(-50%);width:calc(var(--fw) * .0433);height:calc(var(--fw) * .0433);background:var(--black);border-radius:50%;z-index:2}.df-b1,.df-b2,.df-b3,.df-b4{position:absolute;width:2px;background:var(--black)}.df-b1{left:calc(-1 * (var(--bez) + 2px));top:calc(var(--fw) * .24);height:calc(var(--fw) * .1067);border-radius:3px 0 0 3px}.df-b2{left:calc(-1 * (var(--bez) + 2px));top:calc(var(--fw) * .4133);height:calc(var(--fw) * .1533);border-radius:3px 0 0 3px}.df-b3{left:calc(-1 * (var(--bez) + 2px));top:calc(var(--fw) * .5933);height:calc(var(--fw) * .1533);border-radius:3px 0 0 3px}.df-b4{right:calc(-1 * (var(--bez) + 2px));top:calc(var(--fw) * .4733);height:calc(var(--fw) * .2133);border-radius:0 3px 3px 0}.devframe.tablet{--fw: min(512px, 84vw, 56vh);--bez: calc(var(--fw) * .0215);width:var(--fw);aspect-ratio:512 / 682;border-radius:calc(var(--fw) * .078)}.devframe.tablet .devframe-screen{border-radius:calc(var(--fw) * .056)}.devframe.tablet.land{aspect-ratio:682 / 512;--bez: calc(var(--fw) * .0161);border-radius:calc(var(--fw) * .0586)}.devframe.tablet.land .devframe-screen{border-radius:calc(var(--fw) * .042)}.devframe.laptop{width:min(512px,92vw);height:294px;border-width:6px;border-radius:12px 12px 0 0;box-shadow:none}.devframe.laptop .devframe-screen{border-radius:6px}@media (max-width: 640px){.devframe.laptop{width:301px;height:172px}}.devframe-laptop-base{position:relative;margin:0 auto;width:min(597px,98vw);height:21px;background:var(--black);border-radius:0 0 12px 12px;box-shadow:0 6px #1113161f}.devframe-laptop-base span{position:absolute;left:50%;top:0;transform:translate(-50%);width:96px;height:8px;background:#2b2e33;border-radius:0 0 12px 12px}@media (max-width: 640px){.devframe-laptop-base{width:351px;height:17px}.devframe-laptop-base span{width:56px;height:5px}}.devframe-scale{transform-origin:top center}