/*! defram v0.1.2 */.device{display:inline-block;margin:1em;font-size:1rem;color:#fff;border:.5em solid;border-width:4.5em .5em;border-radius:2em;background:currentColor;box-shadow:0 0 0 .3em #e9e9e9,0 0 0 .35em #999,0 .2em 1.5em rgba(0,0,0,.4);position:relative;box-sizing:content-box;width:18em;height:32em}.device:before{content:"";position:absolute;left:50%;width:5em;top:-2.25em;height:.35em;transform:translate(-50%,-50%);background:#ccc;border-radius:.3em}.device:after{position:absolute;left:50%;bottom:-2.5em;transform:translate(-50%,44%);width:2.7em;height:2.7em;border-radius:2em;border-color:#ccc #ddd #ddd #ccc;border-style:solid;border-width:.2em}.device>*{width:100%;height:100%;box-sizing:border-box;border:.1em solid #333;border-radius:.2em;background:#fff}.device img{display:block;object-fit:cover;object-position:0 0}.device img:not([src]),.device img[src=""]{background:#000}.device>div{overflow:hidden}.device>div>img{width:100%;height:100%;box-sizing:border-box}.device-scroll>div{overflow-y:auto}.device-scroll>div>img{height:auto}.device-scroll-thin>div{scrollbar-width:thin;scrollbar-color:#999 #ccc}.device-scroll-thin>div::-webkit-scrollbar{width:.4em;background:#ccc}.device-scroll-thin>div::-webkit-scrollbar-thumb{background:#999}.device-landscape{width:32em;height:18em;border-width:.5em 4.5em}.device-landscape.device-tablet{border-width:.8em 4.5em}.device-landscape:not(.device-laptop):not(.device-desktop):before{top:50%;width:.35em;left:-2.25em;height:5em;transform:translate(-50%,-50%)}.device-landscape:not(.device-laptop):not(.device-desktop):after{top:50%;left:auto;right:-2.5em;transform:translate(44%,-50%)}[class*=device-button-]:after{content:""}.device-button-square:after{border-radius:.5em}.device-button-long:after{width:5em;height:1.4em;border-width:.15em;border-radius:.8em}.device-button-long.device-landscape:after{width:1.4em;height:5em}.device-tablet{width:30em;height:45em;border-width:4.5em .8em}.device-laptop,.device-tablet.device-landscape{width:45em;height:30em}.device-laptop{border-width:1.5em 1em;border-radius:1em;margin:1em 5em;box-shadow:0 0 0 .2em #e9e9e9,0 0 0 .25em #999,0 .2em 1.5em rgba(0,0,0,.4)}.device-laptop:before{top:-.7em;height:.7em;width:.7em}.device.device-laptop:after{content:"";left:50%;bottom:0;width:125%;height:1.5em;transform:translate(-50%,2.5em);border-radius:.5em .5em 2em 2em;border:none;border-top:.7em solid #ddd;background:currentColor;box-shadow:inset 0 -.5em 1em rgba(0,0,0,.3)}.device.device-laptop.device-black:after{border-top-color:#999}.device-desktop{width:45em;height:30em;border-width:1em 1em 1.5em;border-radius:.5em;margin:1em 1em 5em;box-shadow:0 0 0 .1em #e9e9e9,0 0 0 .15em #999,0 .5em 1.5em rgba(0,0,0,.4)}.device-desktop:before{top:auto;left:auto;right:0;bottom:-.9em;transform:none;width:2em;border-radius:.1em}.device.device-desktop:after{content:"";width:10em;height:4em;z-index:-1;bottom:-1em;transform:translate(-50%,100%);border-radius:.2em;border:none;border-bottom:1em solid #ddd;background:#eee;padding:0 4em;background-clip:content-box}.device.device-desktop.device-silver:after{background-color:#e9e9e9;border-bottom-color:#d9d9d9}.device.device-desktop.device-black:after{background-color:#aaa;border-bottom-color:#666}.device-silver{color:#bbb}.device-silver:before{background:#999}.device-silver:after{border-color:#999 #aaa #aaa #999}.device-black{color:#333}.device-black:before{background:#666}.device-black:after{border-color:#555 #666 #666 #555}.device{font-size:.8rem}.device-xxs{font-size:.35rem}.device-xs{font-size:.5rem}.device-s{font-size:.65rem}.device-l{font-size:1rem}.device-xl{font-size:1.25rem}.device-xxl{font-size:1.6rem}@media (max-width:899px){.device{font-size:.65rem}.device-xxs{font-size:.35rem}.device-xs{font-size:.45rem}.device-s{font-size:.55rem}.device-l{font-size:.8rem}.device-xl{font-size:1rem}.device-xxl{font-size:1.25rem}}