/*!
 * MockFrame device styles
 * Adapted from Marvel devices.css (https://github.com/marvelapp/devices.css)
 * Original work Copyright (c) 2014 Marvelapp — MIT License
 * Modifications Copyright (c) 2026 Mohammed Banani — MIT License
 */
.mockframe{transition:all .5s cubic-bezier(.075,.82,.165,1);display:inline-block;position:relative;box-sizing:content-box!important}.mockframe .screen{z-index:3;background:#fff;border-radius:1px;width:100%;height:100%;display:block;position:relative;overflow:hidden;box-shadow:0 0 0 3px #111}.mockframe .top-bar,.mockframe .bottom-bar{background:#000;width:100%;height:3px;display:block}.mockframe .middle-bar{background:#000;width:3px;height:4px;position:absolute;top:0;left:90px}.mockframe.pixel10{background:#1a1a1a;border-radius:48px;width:412px;height:915px;padding:12px}.mockframe.pixel10:before{content:"";z-index:1;background:#0d0d0d;border-radius:44px;width:calc(100% - 8px);height:calc(100% - 8px);display:block;position:absolute;top:4px;left:4px}.mockframe.pixel10:after{content:"";z-index:2;pointer-events:none;border-radius:40px;width:calc(100% - 16px);height:calc(100% - 16px);display:block;position:absolute;top:8px;left:8px;box-shadow:inset 0 0 8px #ffffff0d}.mockframe.pixel10 .screen{box-shadow:none;border-radius:38px}.mockframe.pixel10 .camera{z-index:5;background:#101010;border-radius:100%;width:12px;height:12px;margin-left:-6px;position:absolute;top:24px;left:50%;box-shadow:inset 0 0 4px #000c}.mockframe.pixel10 .camera:before{content:"";background:radial-gradient(circle at 30% 30%,#2a2a3a 0%,#0a0a10 100%);border-radius:100%;width:6px;height:6px;position:absolute;top:3px;left:3px}.mockframe.pixel10 .sleep{background:#1a1a1a;border-radius:0 2px 2px 0;width:3px;height:72px;position:absolute;top:180px;right:-3px}.mockframe.pixel10 .volume{background:#1a1a1a;border-radius:0 2px 2px 0;width:3px;height:100px;position:absolute;top:260px;right:-3px}.mockframe.pixel10 .top-bar,.mockframe.pixel10 .bottom-bar,.mockframe.pixel10 .sensor,.mockframe.pixel10 .speaker,.mockframe.pixel10 .sensors,.mockframe.pixel10 .more-sensors,.mockframe.pixel10 .inner-shadow,.mockframe.pixel10 .home,.mockframe.pixel10 .inner{display:none}.mockframe.pixel10.porcelain{background:#e8e5e1}.mockframe.pixel10.porcelain:before{background:#0d0d0d}.mockframe.pixel10.porcelain .sleep,.mockframe.pixel10.porcelain .volume{background:#d5d2ce}.mockframe.pixel10.mint{background:#afdbc5}.mockframe.pixel10.mint:before{background:#0d0d0d}.mockframe.pixel10.mint .sleep,.mockframe.pixel10.mint .volume{background:#9bcdb5}.mockframe.pixel10.rose{background:#e8c4c4}.mockframe.pixel10.rose:before{background:#0d0d0d}.mockframe.pixel10.rose .sleep,.mockframe.pixel10.rose .volume{background:#dab5b5}.mockframe.pixel10.landscape{width:915px;height:412px}.mockframe.pixel10.landscape .camera{margin-top:-6px;margin-left:0;top:50%;left:24px}.mockframe.pixel10.landscape .sleep{border-radius:2px 2px 0 0;width:72px;height:3px;top:-3px;left:180px;right:auto}.mockframe.pixel10.landscape .volume{border-radius:2px 2px 0 0;width:100px;height:3px;top:-3px;left:260px;right:auto}.mockframe.galaxy-s25{background:#1e1e1e;border-radius:42px;width:412px;height:892px;padding:10px;box-shadow:inset 0 0 2px #ffffff26}.mockframe.galaxy-s25:before{content:"";z-index:1;background:#0a0a0a;border-radius:40px;width:calc(100% - 6px);height:calc(100% - 6px);display:block;position:absolute;top:3px;left:3px}.mockframe.galaxy-s25 .inner{z-index:1;pointer-events:none;background:0 0;border-top:2px solid #ffffff1a;border-bottom:2px solid #ffffff1a;border-radius:42px;width:100%;height:calc(100% - 4px);position:absolute;top:2px;left:0;box-shadow:inset 0 0 4px #ffffff1a}.mockframe.galaxy-s25 .screen{box-shadow:none;border-radius:36px}.mockframe.galaxy-s25 .camera{z-index:5;background:#050505;border-radius:100%;width:10px;height:10px;margin-left:-5px;position:absolute;top:22px;left:50%;box-shadow:0 0 0 2px #0a0a0a}.mockframe.galaxy-s25 .camera:before{content:"";background:radial-gradient(circle at 30% 30%,#1a1a2a 0%,#050510 100%);border-radius:100%;width:5px;height:5px;position:absolute;top:2.5px;left:2.5px}.mockframe.galaxy-s25 .speaker{z-index:4;background:#0a0a0a;border-radius:4px;width:40px;height:4px;margin-left:-20px;position:absolute;top:14px;left:50%}.mockframe.galaxy-s25 .sleep{background:#2a2a2a;border-radius:0 2px 2px 0;width:3px;height:54px;position:absolute;top:220px;right:-3px}.mockframe.galaxy-s25 .volume{background:#2a2a2a;border-radius:2px 0 0 2px;width:3px;height:80px;position:absolute;top:180px;left:-3px}.mockframe.galaxy-s25 .volume:before{content:"";background:inherit;border-radius:2px 0 0 2px;width:3px;height:80px;position:absolute;top:100px;left:0}.mockframe.galaxy-s25 .top-bar,.mockframe.galaxy-s25 .bottom-bar,.mockframe.galaxy-s25 .sensor,.mockframe.galaxy-s25 .sensors,.mockframe.galaxy-s25 .more-sensors,.mockframe.galaxy-s25 .inner-shadow,.mockframe.galaxy-s25 .home{display:none}.mockframe.galaxy-s25 .overflow{pointer-events:none;border-radius:42px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.mockframe.galaxy-s25 .shadow{background:radial-gradient(#0006 0%,#0000 60%);border-radius:100%;width:80px;height:80px;position:absolute}.mockframe.galaxy-s25 .shadow--tl{top:-15px;left:-15px}.mockframe.galaxy-s25 .shadow--tr{top:-15px;right:-15px}.mockframe.galaxy-s25 .shadow--bl{bottom:-15px;left:-15px}.mockframe.galaxy-s25 .shadow--br{bottom:-15px;right:-15px}.mockframe.galaxy-s25.icy-blue{background:#c5d5e0;box-shadow:inset 0 0 2px #fff6}.mockframe.galaxy-s25.icy-blue:before{background:#0a0a0a}.mockframe.galaxy-s25.icy-blue .inner{border-top-color:#ffffff4d;border-bottom-color:#ffffff4d}.mockframe.galaxy-s25.icy-blue .sleep,.mockframe.galaxy-s25.icy-blue .volume{background:#a5b8c8}.mockframe.galaxy-s25.navy{background:#1a2a40}.mockframe.galaxy-s25.navy .sleep,.mockframe.galaxy-s25.navy .volume{background:#152235}.mockframe.galaxy-s25.silver{background:silver;box-shadow:inset 0 0 2px #ffffff80}.mockframe.galaxy-s25.silver:before{background:#0a0a0a}.mockframe.galaxy-s25.silver .inner{border-top-color:#fff6;border-bottom-color:#fff6}.mockframe.galaxy-s25.silver .sleep,.mockframe.galaxy-s25.silver .volume{background:#a8a8a8}.mockframe.galaxy-s25.mint{background:#a8d8c8;box-shadow:inset 0 0 2px #fff6}.mockframe.galaxy-s25.mint:before{background:#0a0a0a}.mockframe.galaxy-s25.mint .sleep,.mockframe.galaxy-s25.mint .volume{background:#90c5b5}.mockframe.galaxy-s25.landscape{width:892px;height:412px}.mockframe.galaxy-s25.landscape .camera{margin-top:-5px;margin-left:0;top:50%;left:22px}.mockframe.galaxy-s25.landscape .speaker{width:4px;height:40px;margin-top:-20px;margin-left:0;top:50%;left:14px}.mockframe.galaxy-s25.landscape .sleep{border-radius:2px 2px 0 0;width:54px;height:3px;top:-3px;left:220px;right:auto}.mockframe.galaxy-s25.landscape .volume{border-radius:0 0 2px 2px;width:80px;height:3px;top:100%;left:180px}.mockframe.galaxy-s25.landscape .volume:before{border-radius:0 0 2px 2px;width:80px;height:3px;top:0;left:100px}