.mockframe{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.iphone8{background:#d9dbdc;border-radius:56px;width:375px;height:667px;padding:105px 24px;box-shadow:inset 0 0 3px #0003}.mockframe.iphone8:before{content:"";z-index:1;background:#f8f8f8;border-radius:50px;width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;left:6px}.mockframe.iphone8:after{content:"";z-index:2;border-radius:48px;width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;left:8px;box-shadow:inset 0 0 3px #0000001a,inset 0 0 6px 3px #fff}.mockframe.iphone8 .home{z-index:3;background:linear-gradient(135deg,#303233 0%,#b5b7b9 50%,#f0f2f2 69%,#303233 100%);border-radius:100%;width:68px;height:68px;margin-left:-34px;position:absolute;bottom:22px;left:50%}.mockframe.iphone8 .home:before{content:"";background:#f8f8f8;border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px}.mockframe.iphone8 .top-bar{background:#bfbfc0;height:14px;position:absolute;top:68px;left:0}.mockframe.iphone8 .bottom-bar{background:#bfbfc0;height:14px;position:absolute;bottom:68px;left:0}.mockframe.iphone8 .sleep{background:#d9dbdc;border-radius:0 2px 2px 0;width:4px;height:66px;position:absolute;top:190px;right:-4px}.mockframe.iphone8 .volume{z-index:0;background:#d9dbdc;border-radius:2px 0 0 2px;width:4px;height:66px;position:absolute;top:188px;left:-4px}.mockframe.iphone8 .volume:before{background:inherit;content:"";border-radius:2px 0 0 2px;width:2px;height:40px;display:block;position:absolute;top:-78px;left:2px}.mockframe.iphone8 .volume:after{background:inherit;content:"";border-radius:2px 0 0 2px;width:4px;height:66px;display:block;position:absolute;top:82px;left:0}.mockframe.iphone8 .camera{z-index:3;background:#3c3d3d;border-radius:100%;width:12px;height:12px;margin-left:-6px;position:absolute;top:24px;left:50%}.mockframe.iphone8 .sensor{z-index:3;background:#3c3d3d;border-radius:100%;width:16px;height:16px;position:absolute;top:49px;left:134px}.mockframe.iphone8 .speaker{z-index:3;background:#292728;border-radius:6px;width:70px;height:6px;margin-left:-35px;position:absolute;top:54px;left:50%}.mockframe.iphone8.gold{background:#f9e7d3}.mockframe.iphone8.gold .top-bar,.mockframe.iphone8.gold .bottom-bar{background:#fff}.mockframe.iphone8.gold .sleep,.mockframe.iphone8.gold .volume{background:#f9e7d3}.mockframe.iphone8.gold .home{background:linear-gradient(135deg,#cebba9 0%,#f9e7d3 50%,#cebba9 100%)}.mockframe.iphone8.black{background:#464646;box-shadow:inset 0 0 3px #000000b3}.mockframe.iphone8.black:before{background:#080808}.mockframe.iphone8.black:after{box-shadow:inset 0 0 3px #0000001a,inset 0 0 6px 3px #212121}.mockframe.iphone8.black .top-bar,.mockframe.iphone8.black .bottom-bar{background:#212121}.mockframe.iphone8.black .volume,.mockframe.iphone8.black .sleep{background:#464646}.mockframe.iphone8.black .camera{background:#080808}.mockframe.iphone8.black .home{background:linear-gradient(135deg,#080808 0%,#464646 50%,#080808 100%)}.mockframe.iphone8.black .home:before{background:#080808}.mockframe.iphone8.landscape{width:667px;height:375px;padding:24px 105px}.mockframe.iphone8.landscape .sleep{border-radius:0 0 2px 2px;width:66px;height:4px;top:100%;right:190px}.mockframe.iphone8.landscape .volume{border-radius:2px 2px 0 0;width:66px;height:4px;top:-4px;left:calc(100% - 254px)}.mockframe.iphone8.landscape .volume:before{border-radius:2px 2px 0 0;width:40px;height:2px;top:2px;left:auto;right:-78px}.mockframe.iphone8.landscape .volume:after{border-radius:2px 2px 0 0;width:66px;height:4px;top:0;left:-82px}.mockframe.iphone8.landscape .top-bar{width:14px;height:100%;top:0;left:calc(100% - 82px)}.mockframe.iphone8.landscape .bottom-bar{width:14px;height:100%;top:0;left:68px}.mockframe.iphone8.landscape .home{margin-top:-34px;margin-left:0;top:50%;left:22px}.mockframe.iphone8.landscape .sensor{top:134px;left:calc(100% - 65px)}.mockframe.iphone8.landscape .speaker{width:6px;height:70px;margin-top:-35px;margin-left:0;top:50%;left:calc(100% - 60px)}.mockframe.iphone8.landscape .camera{margin-top:-5px;margin-left:0;top:50%;left:calc(100% - 32px)}.mockframe.iphone8plus{background:#d9dbdc;border-radius:56px;width:414px;height:736px;padding:112px 26px;box-shadow:inset 0 0 3px #0003}.mockframe.iphone8plus:before{content:"";z-index:1;background:#f8f8f8;border-radius:50px;width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;left:6px}.mockframe.iphone8plus:after{content:"";z-index:2;border-radius:48px;width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;left:8px;box-shadow:inset 0 0 3px #0000001a,inset 0 0 6px 3px #fff}.mockframe.iphone8plus .home{z-index:3;background:linear-gradient(135deg,#303233 0%,#b5b7b9 50%,#f0f2f2 69%,#303233 100%);border-radius:100%;width:68px;height:68px;margin-left:-34px;position:absolute;bottom:24px;left:50%}.mockframe.iphone8plus .home:before{content:"";background:#f8f8f8;border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px}.mockframe.iphone8plus .top-bar{background:#bfbfc0;height:14px;position:absolute;top:68px;left:0}.mockframe.iphone8plus .bottom-bar{background:#bfbfc0;height:14px;position:absolute;bottom:68px;left:0}.mockframe.iphone8plus .sleep{background:#d9dbdc;border-radius:0 2px 2px 0;width:4px;height:66px;position:absolute;top:190px;right:-4px}.mockframe.iphone8plus .volume{z-index:0;background:#d9dbdc;border-radius:2px 0 0 2px;width:4px;height:66px;position:absolute;top:188px;left:-4px}.mockframe.iphone8plus .volume:before{background:inherit;content:"";border-radius:2px 0 0 2px;width:2px;height:40px;display:block;position:absolute;top:-78px;left:2px}.mockframe.iphone8plus .volume:after{background:inherit;content:"";border-radius:2px 0 0 2px;width:4px;height:66px;display:block;position:absolute;top:82px;left:0}.mockframe.iphone8plus .camera{z-index:3;background:#3c3d3d;border-radius:100%;width:12px;height:12px;margin-left:-6px;position:absolute;top:29px;left:50%}.mockframe.iphone8plus .sensor{z-index:3;background:#3c3d3d;border-radius:100%;width:16px;height:16px;position:absolute;top:54px;left:154px}.mockframe.iphone8plus .speaker{z-index:3;background:#292728;border-radius:6px;width:70px;height:6px;margin-left:-35px;position:absolute;top:59px;left:50%}.mockframe.iphone8plus.gold{background:#f9e7d3}.mockframe.iphone8plus.gold .top-bar,.mockframe.iphone8plus.gold .bottom-bar{background:#fff}.mockframe.iphone8plus.gold .sleep,.mockframe.iphone8plus.gold .volume{background:#f9e7d3}.mockframe.iphone8plus.gold .home{background:linear-gradient(135deg,#cebba9 0%,#f9e7d3 50%,#cebba9 100%)}.mockframe.iphone8plus.black{background:#464646;box-shadow:inset 0 0 3px #000000b3}.mockframe.iphone8plus.black:before{background:#080808}.mockframe.iphone8plus.black:after{box-shadow:inset 0 0 3px #0000001a,inset 0 0 6px 3px #212121}.mockframe.iphone8plus.black .top-bar,.mockframe.iphone8plus.black .bottom-bar{background:#212121}.mockframe.iphone8plus.black .volume,.mockframe.iphone8plus.black .sleep{background:#464646}.mockframe.iphone8plus.black .camera{background:#080808}.mockframe.iphone8plus.black .home{background:linear-gradient(135deg,#080808 0%,#464646 50%,#080808 100%)}.mockframe.iphone8plus.black .home:before{background:#080808}.mockframe.iphone8plus.landscape{width:736px;height:414px;padding:26px 112px}.mockframe.iphone8plus.landscape .sleep{border-radius:0 0 2px 2px;width:66px;height:4px;top:100%;right:190px}.mockframe.iphone8plus.landscape .volume{border-radius:2px 2px 0 0;width:66px;height:4px;top:-4px;left:calc(100% - 254px)}.mockframe.iphone8plus.landscape .volume:before{border-radius:2px 2px 0 0;width:40px;height:2px;top:2px;left:auto;right:-78px}.mockframe.iphone8plus.landscape .volume:after{border-radius:2px 2px 0 0;width:66px;height:4px;top:0;left:-82px}.mockframe.iphone8plus.landscape .top-bar{width:14px;height:100%;top:0;left:calc(100% - 82px)}.mockframe.iphone8plus.landscape .bottom-bar{width:14px;height:100%;top:0;left:68px}.mockframe.iphone8plus.landscape .home{margin-top:-34px;margin-left:0;top:50%;left:24px}.mockframe.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 70px)}.mockframe.iphone8plus.landscape .speaker{width:6px;height:70px;margin-top:-35px;margin-left:0;top:50%;left:calc(100% - 65px)}.mockframe.iphone8plus.landscape .camera{margin-top:-5px;margin-left:0;top:50%;left:calc(100% - 29px)}.mockframe.iphone-x{background:#fdfdfd;border-radius:66px;width:375px;height:812px;padding:26px;box-shadow:inset 0 0 11px #000}.mockframe.iphone-x .overflow{border-radius:66px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.mockframe.iphone-x .shadow{background:radial-gradient(#0009 0%,#fff0 60%);border-radius:100%;width:90px;height:90px;position:absolute}.mockframe.iphone-x .shadow--tl{top:-20px;left:-20px}.mockframe.iphone-x .shadow--tr{top:-20px;right:-20px}.mockframe.iphone-x .shadow--bl{bottom:-20px;left:-20px}.mockframe.iphone-x .shadow--br{bottom:-20px;right:-20px}.mockframe.iphone-x:before{content:"";z-index:1;background:#000;border-radius:61px;width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;left:5px}.mockframe.iphone-x .inner-shadow{z-index:1;border-radius:56px;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;left:10px;overflow:hidden;box-shadow:inset 0 0 15px #ffffffa8}.mockframe.iphone-x .inner-shadow:before{content:"";z-index:2;border-radius:200px/112px;width:100%;height:116%;position:absolute;top:-8%;left:0;box-shadow:inset 0 0 20px #fff}.mockframe.iphone-x .screen{box-shadow:none;border-radius:40px}.mockframe.iphone-x .top-bar,.mockframe.iphone-x .bottom-bar{background:#0000001a;width:100%;height:8px;position:absolute;left:0}.mockframe.iphone-x .top-bar{top:80px}.mockframe.iphone-x .bottom-bar{bottom:80px}.mockframe.iphone-x .volume,.mockframe.iphone-x .volume:before,.mockframe.iphone-x .volume:after,.mockframe.iphone-x .sleep{background:#b5b5b5;width:3px;position:absolute}.mockframe.iphone-x .volume{height:32px;top:116px;left:-3px}.mockframe.iphone-x .volume:before{content:"";height:62px;top:62px;left:0}.mockframe.iphone-x .volume:after{content:"";height:62px;top:140px;left:0}.mockframe.iphone-x .sleep{height:96px;top:200px;right:-3px}.mockframe.iphone-x .camera{background:#0d4d71;border-radius:100%;width:6px;height:6px;position:absolute;top:9px;left:154px}.mockframe.iphone-x .speaker{background:#171818;border-radius:6px;width:60px;height:6px;margin-left:-30px;position:absolute;top:9px;left:50%}.mockframe.iphone-x .notch{z-index:4;background:#000;border-bottom-right-radius:24px;border-bottom-left-radius:24px;width:210px;height:30px;margin-left:-105px;position:absolute;top:26px;left:50%}.mockframe.iphone-x .notch:before,.mockframe.iphone-x .notch:after{content:"";width:8px;height:8px;position:absolute;top:0}.mockframe.iphone-x .notch:after{background:radial-gradient(circle at 0 100%,#0000 0 70%,#000 70% 100%);left:-8px}.mockframe.iphone-x .notch:before{background:radial-gradient(circle at 100% 100%,#0000 0 70%,#000 70% 100%);right:-8px}.mockframe.iphone-x.landscape{width:812px;height:375px}.mockframe.iphone-x.landscape .top-bar,.mockframe.iphone-x.landscape .bottom-bar{width:8px;height:100%;top:0}.mockframe.iphone-x.landscape .top-bar{left:80px}.mockframe.iphone-x.landscape .bottom-bar{bottom:auto;left:auto;right:80px}.mockframe.iphone-x.landscape .volume,.mockframe.iphone-x.landscape .volume:before,.mockframe.iphone-x.landscape .volume:after,.mockframe.iphone-x.landscape .sleep{height:3px}.mockframe.iphone-x.landscape .inner-shadow:before{border-radius:112px/200px;width:116%;height:100%;top:0;left:-8%}.mockframe.iphone-x.landscape .volume{width:32px;top:auto;bottom:-3px;left:116px}.mockframe.iphone-x.landscape .volume:before{width:62px;top:0;left:62px}.mockframe.iphone-x.landscape .volume:after{width:62px;top:0;left:140px}.mockframe.iphone-x.landscape .sleep{width:96px;top:-3px;left:200px;right:auto}.mockframe.iphone-x.landscape .camera{top:auto;bottom:154px;left:9px}.mockframe.iphone-x.landscape .speaker{width:6px;height:60px;margin-top:-30px;margin-left:0;top:50%;left:9px}.mockframe.iphone-x.landscape .notch{border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0;width:30px;height:210px;margin:-105px 0 0;top:50%;left:26px}.mockframe.iphone-x.landscape .notch:before,.mockframe.iphone-x.landscape .notch:after{left:0}.mockframe.iphone-x.landscape .notch:after{background:radial-gradient(circle at 100% 100%,#0000 0 70%,#000 70% 100%);top:auto;bottom:-8px}.mockframe.iphone-x.landscape .notch:before{background:radial-gradient(circle at 100% 0,#0000 0 70%,#000 70% 100%);top:-8px}.mockframe.iphone17{width:402px;height:874px;box-shadow:inset 0 0 0 .667px var(--mf-b1),inset 0 0 0 1.333px var(--mf-b2),inset 0 0 0 2px var(--mf-b3),inset 0 0 0 2.667px var(--mf-b4),inset 0 0 0 3.333px var(--mf-b5),inset 0 0 0 3.667px var(--mf-b6),inset 0 0 0 4px var(--mf-b7),inset 0 0 0 4.333px var(--mf-b8),inset 0 0 0 4.667px var(--mf-b9),inset 0 0 0 5px var(--mf-b10),inset 0 0 0 5.333px var(--mf-b11),inset 0 0 0 5.667px var(--mf-b12),inset 0 0 3px 8.5px var(--mf-glass);--mf-b1:#333536;--mf-b2:#434445;--mf-b3:#555657;--mf-b4:#656667;--mf-b5:#767778;--mf-b6:#898a8b;--mf-b7:#999a9a;--mf-b8:#a7a8a8;--mf-b9:#999a9b;--mf-b10:#737575;--mf-b11:#4d4e4f;--mf-b12:#353636;--mf-glass:#393939;background:#000;border-radius:78.4px;padding:14.33px 14.67px}.mockframe.iphone17 .screen{box-shadow:none;border-radius:63.5px}.mockframe.iphone17 .dynamic-island{z-index:10;background:#000;border-radius:18px;width:124.67px;height:36px;margin-left:-62.33px;position:absolute;top:28.67px;left:50%}.mockframe.iphone17 .dynamic-island:before,.mockframe.iphone17 .dynamic-island:after{content:"";position:absolute}.mockframe.iphone17 .dynamic-island:before{background:#060606;border-radius:17px;width:78px;height:34px;top:1px;left:.33px}.mockframe.iphone17 .dynamic-island:after{background:#000;border-radius:11px;width:65.67px;height:22px;top:7px;left:6.67px}.mockframe.iphone17 .dynamic-island .camera{top:13px;right:13px;box-shadow:0 0 0 4.5px #0a0d10,0 0 0 12.33px #060606}.mockframe.iphone17:before{background:#0d0d0d;width:85.33px;height:3px;margin-left:-42.67px;top:5.67px}.mockframe.iphone17 .action{height:41.67px;top:185px}.mockframe.iphone17 .volume{height:67.67px;top:257.33px}.mockframe.iphone17 .sleep{height:106.67px;top:280.67px}.mockframe.iphone17.white{--mf-b1:#8e8e8d;--mf-b2:#989796;--mf-b3:#a7a6a5;--mf-b4:#bbbab9;--mf-b5:#cbcbca;--mf-b6:#d8d8d7;--mf-b7:#e1e1e0;--mf-b8:#e8e8e8;--mf-b9:#dfdfde;--mf-b10:#c9c8c8;--mf-b11:#9d9d9c;--mf-b12:#555;--mf-glass:#494949}.mockframe.iphone17.mist-blue{--mf-b1:#5e6c83;--mf-b2:#728198;--mf-b3:#8897af;--mf-b4:#9cabc5;--mf-b5:#aab9d2;--mf-b6:#b7c5dd;--mf-b7:#c1cee4;--mf-b8:#cbd7ea;--mf-b9:#c1cde2;--mf-b10:#a8b6ce;--mf-b11:#818ea2;--mf-b12:#4a4f57;--mf-glass:#494949}.mockframe.iphone17.sage{--mf-b1:#5d694d;--mf-b2:#6e7a5b;--mf-b3:#7a8867;--mf-b4:#869572;--mf-b5:#99a884;--mf-b6:#b0bf9c;--mf-b7:#c1cfae;--mf-b8:#cedbbe;--mf-b9:#bfccad;--mf-b10:#9fad89;--mf-b11:#778365;--mf-b12:#4b5042;--mf-glass:#393939}.mockframe.iphone17.lavender{--mf-b1:#91879c;--mf-b2:#9e95aa;--mf-b3:#b0a6bb;--mf-b4:#beb5ca;--mf-b5:#cac1d5;--mf-b6:#d8d1e1;--mf-b7:#e4deea;--mf-b8:#ece8f1;--mf-b9:#e5e0eb;--mf-b10:#d2cada;--mf-b11:#a49dad;--mf-b12:#57545b;--mf-glass:#494949}.mockframe.iphone17.cosmic-orange{--mf-b1:#c14e23;--mf-b2:#da6837;--mf-b3:#ea824d;--mf-b4:#f59d67;--mf-b5:#fbb885;--mf-b6:#fdcca1;--mf-b7:#fed8b6;--mf-b8:#fee0c5;--mf-b9:#fedfc6;--mf-b10:#f4ba97;--mf-b11:#d3784f;--mf-b12:#a84825;--mf-glass:#535252}.mockframe.iphone17.deep-blue{--mf-b1:#252b3b;--mf-b2:#353b4c;--mf-b3:#444b5e;--mf-b4:#585f73;--mf-b5:#727a90;--mf-b6:#8c93aa;--mf-b7:#9fa6be;--mf-b8:#aeb5cd;--mf-b9:#adb4cc;--mf-b10:#7c8399;--mf-b11:#3d4355;--mf-b12:#212736;--mf-glass:#3b3b3b}.mockframe.iphone17.landscape{width:874px;height:402px;padding:14.67px 14.33px}.mockframe.iphone17.landscape:before{width:3px;height:85.33px;margin:-42.67px 0 0;top:50%;left:5.67px}.mockframe.iphone17.landscape .dynamic-island{width:36px;height:124.67px;margin:-62.33px 0 0;top:50%;left:28.67px}.mockframe.iphone17.landscape .dynamic-island:before{width:34px;height:78px;top:auto;bottom:.33px;left:1px}.mockframe.iphone17.landscape .dynamic-island:after{width:22px;height:65.67px;top:auto;bottom:6.67px;left:7px}.mockframe.iphone17.landscape .dynamic-island .camera{top:13px;left:13px;right:auto}.mockframe.iphone17.landscape .action{width:41.67px;left:185px}.mockframe.iphone17.landscape .volume{width:67.67px;left:257.33px}.mockframe.iphone17.landscape .sleep{width:106.67px;left:280.67px}.mockframe.iphone18pro{width:402px;height:874px;box-shadow:inset 0 0 0 .667px var(--mf-b1),inset 0 0 0 1.333px var(--mf-b2),inset 0 0 0 2px var(--mf-b3),inset 0 0 0 2.667px var(--mf-b4),inset 0 0 0 3.333px var(--mf-b5),inset 0 0 0 4px var(--mf-b6),inset 0 0 0 4.333px var(--mf-b7),inset 0 0 0 4.667px var(--mf-b8),inset 0 0 0 5px var(--mf-b9),inset 0 0 0 5.333px var(--mf-b10),inset 0 0 0 5.667px var(--mf-b11),inset 0 0 0 6.333px var(--mf-b12),inset 0 0 3px 9.3px var(--mf-glass);--mf-b1:#141314;--mf-b2:#161516;--mf-b3:#1b191b;--mf-b4:#222022;--mf-b5:#2e2c2e;--mf-b6:#444144;--mf-b7:#605d60;--mf-b8:#747173;--mf-b9:#747174;--mf-b10:#4f4c4f;--mf-b11:#272527;--mf-b12:#232223;--mf-glass:#3d3d3d;background:#000;border-radius:80.5px;padding:15.67px 15.83px}.mockframe.iphone18pro .screen{box-shadow:none;border-radius:63.6px}.mockframe.iphone18pro .dynamic-island{z-index:10;background:#000;border-radius:18px;width:94px;height:36px;margin-left:-47px;position:absolute;top:30px;left:50%}.mockframe.iphone18pro .dynamic-island .camera{top:13px;right:13px;box-shadow:0 0 0 5.5px #080a0c}.mockframe.iphone18pro:before{background:#020202;width:162px;height:2.33px;margin-left:-81px;top:6.33px}.mockframe.iphone18pro .action{height:41.67px;top:186px}.mockframe.iphone18pro .volume{height:67.67px;top:258.33px}.mockframe.iphone18pro .sleep{height:107px;top:281.67px}.mockframe.iphone18pro.silver{--mf-b1:#727272;--mf-b2:#8c8c8c;--mf-b3:#a4a4a4;--mf-b4:#b9b9b9;--mf-b5:#c9c9c9;--mf-b6:#d7d7d7;--mf-b7:#e2e2e2;--mf-b8:#e8e8e8;--mf-b9:#e8e8e8;--mf-b10:#d4d4d4;--mf-b11:#aaa;--mf-b12:#777;--mf-glass:#3d3d3d}.mockframe.iphone18pro.glacier{--mf-b1:#788598;--mf-b2:#8a97aa;--mf-b3:#9daabe;--mf-b4:#b0bccf;--mf-b5:#bfcada;--mf-b6:#cdd6e5;--mf-b7:#d9e1ed;--mf-b8:#e0e7f1;--mf-b9:#dfe6f0;--mf-b10:#cad4e2;--mf-b11:#a1adbf;--mf-b12:#6f7c8f;--mf-glass:#3d3d3d}.mockframe.iphone18pro.burgundy{--mf-b1:#341d21;--mf-b2:#392024;--mf-b3:#402529;--mf-b4:#4a2c31;--mf-b5:#58373c;--mf-b6:#70494f;--mf-b7:#8d6068;--mf-b8:#a3727a;--mf-b9:#a4737b;--mf-b10:#7e555c;--mf-b11:#503036;--mf-b12:#381f24;--mf-glass:#3d3d3d}.mockframe.iphone18pro.gold{--mf-b1:#797262;--mf-b2:#948c78;--mf-b3:#aea48c;--mf-b4:#c4b99f;--mf-b5:#d3c9b1;--mf-b6:#dfd7c3;--mf-b7:#e8e2d4;--mf-b8:#ede8dc;--mf-b9:#ede8dc;--mf-b10:#ddd4be;--mf-b11:#b4aa91;--mf-b12:#7e7766;--mf-glass:#3d3d3d}.mockframe.iphone18pro.natural-titanium{--mf-b1:#5e5a53;--mf-b2:#69645e;--mf-b3:#77716b;--mf-b4:#8d8780;--mf-b5:#afa89f;--mf-b6:#d0cac1;--mf-b7:#dfd9d0;--mf-b8:#e4ded5;--mf-b9:#dad4cb;--mf-b10:#b6afa7;--mf-b11:#7d7770;--mf-b12:#403c37;--mf-glass:#393939}.mockframe.iphone18pro.landscape{width:874px;height:402px;padding:15.83px 15.67px}.mockframe.iphone18pro.landscape:before{width:2.33px;height:162px;margin:-81px 0 0;top:50%;left:6.33px}.mockframe.iphone18pro.landscape .dynamic-island{width:36px;height:94px;margin:-47px 0 0;top:50%;left:30px}.mockframe.iphone18pro.landscape .dynamic-island .camera{top:13px;left:13px;right:auto}.mockframe.iphone18pro.landscape .action{width:41.67px;left:186px}.mockframe.iphone18pro.landscape .volume{width:67.67px;left:258.33px}.mockframe.iphone18pro.landscape .sleep{width:107px;left:281.67px}:is(.mockframe.iphone17,.mockframe.iphone18pro):before{content:"";border-radius:0 0 2px 2px;position:absolute;left:50%}:is(.mockframe.iphone17,.mockframe.iphone18pro).landscape:before{border-radius:0 2px 2px 0}:is(.mockframe.iphone17,.mockframe.iphone18pro) .dynamic-island .camera{background:radial-gradient(circle at 50% 40%,#3b3a8f 0%,#1f1c63 25%,#0d0b30 50%,#12394a 66%,#0a1118 80%,#05070a 100%);border-radius:50%;width:10px;height:10px;position:absolute}:is(.mockframe.iphone17,.mockframe.iphone18pro) .action,:is(.mockframe.iphone17,.mockframe.iphone18pro) .volume,:is(.mockframe.iphone17,.mockframe.iphone18pro) .sleep{z-index:0;position:absolute}:is(.mockframe.iphone17,.mockframe.iphone18pro) .action,:is(.mockframe.iphone17,.mockframe.iphone18pro) .volume{background:linear-gradient(to left,var(--mf-b1)0%,var(--mf-b3)25%,var(--mf-b4)50%,var(--mf-b6)68%,var(--mf-b8)80%,var(--mf-b10)100%);border-radius:1.5px 0 0 1.5px;width:3px;left:-3px;box-shadow:inset 0 1px .5px #ffffff4d,inset 0 -1px .5px #ffffff4d}:is(.mockframe.iphone17,.mockframe.iphone18pro) .volume:before{content:"";border-radius:inherit;background:inherit;width:100%;height:100%;box-shadow:inherit;position:absolute;top:85.67px;left:0}:is(.mockframe.iphone17,.mockframe.iphone18pro) .sleep{background:linear-gradient(to right,var(--mf-b1)0%,var(--mf-b3)25%,var(--mf-b4)50%,var(--mf-b6)68%,var(--mf-b8)80%,var(--mf-b10)100%);border-radius:0 1.5px 1.5px 0;width:2.67px;right:-2.67px;box-shadow:inset 0 1px .5px #ffffff4d,inset 0 -1px .5px #ffffff4d}:is(.mockframe.iphone17,.mockframe.iphone18pro).landscape .action,:is(.mockframe.iphone17,.mockframe.iphone18pro).landscape .volume{background:linear-gradient(to bottom,var(--mf-b1)0%,var(--mf-b3)25%,var(--mf-b4)50%,var(--mf-b6)68%,var(--mf-b8)80%,var(--mf-b10)100%);border-radius:0 0 1.5px 1.5px;height:3px;top:auto;bottom:-3px;box-shadow:inset 1px 0 .5px #ffffff4d,inset -1px 0 .5px #ffffff4d}:is(.mockframe.iphone17,.mockframe.iphone18pro).landscape .volume:before{top:0;left:85.67px}:is(.mockframe.iphone17,.mockframe.iphone18pro).landscape .sleep{background:linear-gradient(to top,var(--mf-b1)0%,var(--mf-b3)25%,var(--mf-b4)50%,var(--mf-b6)68%,var(--mf-b8)80%,var(--mf-b10)100%);border-radius:1.5px 1.5px 0 0;height:2.67px;top:-2.67px;right:auto;box-shadow:inset 1px 0 .5px #ffffff4d,inset -1px 0 .5px #ffffff4d}:is(.mockframe.iphone17,.mockframe.iphone18pro)>.camera,:is(.mockframe.iphone17,.mockframe.iphone18pro) .top-bar,:is(.mockframe.iphone17,.mockframe.iphone18pro) .bottom-bar,:is(.mockframe.iphone17,.mockframe.iphone18pro) .home,:is(.mockframe.iphone17,.mockframe.iphone18pro) .sensor,:is(.mockframe.iphone17,.mockframe.iphone18pro) .speaker,:is(.mockframe.iphone17,.mockframe.iphone18pro) .sensors,:is(.mockframe.iphone17,.mockframe.iphone18pro) .more-sensors,:is(.mockframe.iphone17,.mockframe.iphone18pro) .inner,:is(.mockframe.iphone17,.mockframe.iphone18pro) .inner-shadow{display:none}