/*! * 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.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,#b5b7b9 50%,#f0f2f2 69%,#303233);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{border-radius:0 2px 2px 0;top:190px;right:-4px}.mockframe.iphone8 .sleep,.mockframe.iphone8 .volume{background:#d9dbdc;width:4px;height:66px;position:absolute}.mockframe.iphone8 .volume{z-index:0;border-radius:2px 0 0 2px;top:188px;left:-4px}.mockframe.iphone8 .volume:before{width:2px;height:40px;top:-78px;left:2px}.mockframe.iphone8 .volume:after,.mockframe.iphone8 .volume:before{background:inherit;content:"";border-radius:2px 0 0 2px;display:block;position:absolute}.mockframe.iphone8 .volume:after{width:4px;height:66px;top:82px;left:0}.mockframe.iphone8 .camera{width:12px;height:12px;margin-left:-6px;top:24px;left:50%}.mockframe.iphone8 .camera,.mockframe.iphone8 .sensor{z-index:3;background:#3c3d3d;border-radius:100%;position:absolute}.mockframe.iphone8 .sensor{width:16px;height:16px;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 .bottom-bar,.mockframe.iphone8.gold .top-bar{background:#fff}.mockframe.iphone8.gold .sleep,.mockframe.iphone8.gold .volume{background:#f9e7d3}.mockframe.iphone8.gold .home{background:linear-gradient(135deg,#cebba9,#f9e7d3 50%,#cebba9)}.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 .bottom-bar,.mockframe.iphone8.black .top-bar{background:#212121}.mockframe.iphone8.black .sleep,.mockframe.iphone8.black .volume{background:#464646}.mockframe.iphone8.black .camera{background:#080808}.mockframe.iphone8.black .home{background:linear-gradient(135deg,#080808,#464646 50%,#080808)}.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,#b5b7b9 50%,#f0f2f2 69%,#303233);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{width:2px;height:40px;top:-78px;left:2px}.mockframe.iphone8plus .volume:after,.mockframe.iphone8plus .volume:before{background:inherit;content:"";border-radius:2px 0 0 2px;display:block;position:absolute}.mockframe.iphone8plus .volume:after{width:4px;height:66px;top:82px;left:0}.mockframe.iphone8plus .camera{width:12px;height:12px;margin-left:-6px;top:29px;left:50%}.mockframe.iphone8plus .camera,.mockframe.iphone8plus .sensor{z-index:3;background:#3c3d3d;border-radius:100%;position:absolute}.mockframe.iphone8plus .sensor{width:16px;height:16px;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 .bottom-bar,.mockframe.iphone8plus.gold .top-bar{background:#fff}.mockframe.iphone8plus.gold .sleep,.mockframe.iphone8plus.gold .volume{background:#f9e7d3}.mockframe.iphone8plus.gold .home{background:linear-gradient(135deg,#cebba9,#f9e7d3 50%,#cebba9)}.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 .bottom-bar,.mockframe.iphone8plus.black .top-bar{background:#212121}.mockframe.iphone8plus.black .sleep,.mockframe.iphone8plus.black .volume{background:#464646}.mockframe.iphone8plus.black .camera{background:#080808}.mockframe.iphone8plus.black .home{background:linear-gradient(135deg,#080808,#464646 50%,#080808)}.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 .bottom-bar,.mockframe.iphone-x .top-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 .sleep,.mockframe.iphone-x .volume,.mockframe.iphone-x .volume:after,.mockframe.iphone-x .volume:before{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:after,.mockframe.iphone-x .notch:before{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 .bottom-bar,.mockframe.iphone-x.landscape .top-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 .sleep,.mockframe.iphone-x.landscape .volume,.mockframe.iphone-x.landscape .volume:after,.mockframe.iphone-x.landscape .volume:before{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:after,.mockframe.iphone-x.landscape .notch:before{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:after,.mockframe.iphone17 .dynamic-island:before{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) .sleep,:is(.mockframe.iphone17,.mockframe.iphone18pro) .volume{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) .bottom-bar,:is(.mockframe.iphone17,.mockframe.iphone18pro) .home,:is(.mockframe.iphone17,.mockframe.iphone18pro) .inner,:is(.mockframe.iphone17,.mockframe.iphone18pro) .inner-shadow,:is(.mockframe.iphone17,.mockframe.iphone18pro) .more-sensors,:is(.mockframe.iphone17,.mockframe.iphone18pro) .sensor,:is(.mockframe.iphone17,.mockframe.iphone18pro) .sensors,:is(.mockframe.iphone17,.mockframe.iphone18pro) .speaker,:is(.mockframe.iphone17,.mockframe.iphone18pro) .top-bar,:is(.mockframe.iphone17,.mockframe.iphone18pro)>.camera{display:none} /*! * 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.pixel10{width:412px;height:924px;box-shadow:inset 0 0 0 .75px #0000004d,inset 0 0 2px 2.5px #ffffff29,inset 0 0 0 6px var(--mf-frame),inset 0 0 3px 7.5px #1c1c1c;--mf-frame:#4a4d4d;background:#000;border-radius:74px;padding:21.5px}.mockframe.pixel10 .screen{box-shadow:none;border-radius:50px}.mockframe.pixel10 .camera{z-index:5;background:radial-gradient(circle,#2a2c3c 0,#15161f 22%,#2b2b2e 38%,#0b0b0c 50%,#000 70%);border-radius:50%;width:28px;height:28px;margin-left:-14px;position:absolute;top:36.5px;left:50%}.mockframe.pixel10 .sleep,.mockframe.pixel10 .volume{background:var(--mf-frame);border-radius:0 2px 2px 0;width:3px;position:absolute;right:-3px;box-shadow:inset -1px 0 1px #fff3,inset 1px 0 1px #00000040}.mockframe.pixel10 .sleep{height:75.3px;top:269.7px}.mockframe.pixel10 .volume{height:131.7px;top:390.6px}.mockframe.pixel10.frost{--mf-frame:#d1d8ed}.mockframe.pixel10.indigo{--mf-frame:#5585e0}.mockframe.pixel10.lemongrass{--mf-frame:#dfe1c3}.mockframe.pixel10.porcelain{--mf-frame:#e8e5e1}.mockframe.pixel10.mint{--mf-frame:#afdbc5}.mockframe.pixel10.rose{--mf-frame:#e8c4c4}.mockframe.pixel10.landscape{width:924px;height:412px}.mockframe.pixel10.landscape .camera{margin:-14px 0 0;top:50%;left:36.5px}.mockframe.pixel10.landscape .sleep,.mockframe.pixel10.landscape .volume{border-radius:2px 2px 0 0;height:3px;top:-3px;right:auto;box-shadow:inset 0 1px 1px #fff3,inset 0 -1px 1px #00000040}.mockframe.pixel10.landscape .sleep{width:75.3px;left:269.7px}.mockframe.pixel10.landscape .volume{width:131.7px;left:390.6px}.mockframe.pixel10 .bottom-bar,.mockframe.pixel10 .home,.mockframe.pixel10 .inner,.mockframe.pixel10 .inner-shadow,.mockframe.pixel10 .more-sensors,.mockframe.pixel10 .sensor,.mockframe.pixel10 .sensors,.mockframe.pixel10 .speaker,.mockframe.pixel10 .top-bar{display:none}.mockframe.galaxy-s25{width:360px;height:780px;box-shadow:inset 0 0 0 .75px #0000004d,inset 0 0 1.5px 1.5px #ffffff24,inset 0 0 0 5.5px var(--mf-frame),inset 0 0 2px 6.5px #1a1a1a;--mf-frame:#3a3e48;background:#000;border-radius:49px;padding:12.5px}.mockframe.galaxy-s25 .screen{box-shadow:none;border-radius:36px}.mockframe.galaxy-s25 .camera{z-index:5;background:radial-gradient(circle,#1e2030 0,#0d0e16 35%,#030304 60%,#000 100%);border-radius:50%;width:16px;height:16px;margin-left:-8px;position:absolute;top:23.5px;left:50%}.mockframe.galaxy-s25 .speaker{z-index:4;background:#0a0a0a;border-radius:0 0 1.5px 1.5px;width:55px;height:1.5px;margin-left:-27.5px;position:absolute;top:5.5px;left:50%}.mockframe.galaxy-s25 .sleep,.mockframe.galaxy-s25 .volume{background:var(--mf-frame);border-radius:0 2px 2px 0;width:2.5px;position:absolute;right:-2.5px;box-shadow:inset -1px 0 1px #ffffff2e,inset 1px 0 1px #00000040}.mockframe.galaxy-s25 .volume{height:109.4px;top:146.7px}.mockframe.galaxy-s25 .sleep{height:59.9px;top:308.9px}.mockframe.galaxy-s25.icy-blue{--mf-frame:#bdc4d5}.mockframe.galaxy-s25.navy{--mf-frame:#283a5e}.mockframe.galaxy-s25.mint{--mf-frame:#bdcfc3}.mockframe.galaxy-s25.silver,.mockframe.galaxy-s25.silver-shadow{--mf-frame:#a7a8ab}.mockframe.galaxy-s25.coral-red{--mf-frame:#ea646b}.mockframe.galaxy-s25.pink-gold{--mf-frame:#e8d7cd}.mockframe.galaxy-s25.phantom-black{--mf-frame:#2a2a2c}.mockframe.galaxy-s25.landscape{width:780px;height:360px}.mockframe.galaxy-s25.landscape .camera{margin:-8px 0 0;top:50%;left:23.5px}.mockframe.galaxy-s25.landscape .speaker{border-radius:0 1.5px 1.5px 0;width:1.5px;height:55px;margin:-27.5px 0 0;top:50%;left:5.5px}.mockframe.galaxy-s25.landscape .sleep,.mockframe.galaxy-s25.landscape .volume{border-radius:2px 2px 0 0;height:2.5px;top:-2.5px;right:auto;box-shadow:inset 0 1px 1px #ffffff2e,inset 0 -1px 1px #00000040}.mockframe.galaxy-s25.landscape .volume{width:109.4px;left:146.7px}.mockframe.galaxy-s25.landscape .sleep{width:59.9px;left:308.9px}.mockframe.galaxy-s25 .bottom-bar,.mockframe.galaxy-s25 .home,.mockframe.galaxy-s25 .inner,.mockframe.galaxy-s25 .inner-shadow,.mockframe.galaxy-s25 .more-sensors,.mockframe.galaxy-s25 .sensor,.mockframe.galaxy-s25 .sensors,.mockframe.galaxy-s25 .top-bar{display:none} /*! * 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{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 .bottom-bar,.mockframe .top-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.macbook{background:#bebebe;border-radius:34px;width:960px;height:600px;margin:0 auto;padding:44px 44px 76px}.mockframe.macbook:before{content:"";background:#1e1e1e;border-radius:30px;width:calc(100% - 8px);height:calc(100% - 8px);display:block;position:absolute;top:4px;left:4px}.mockframe.macbook .top-bar{content:"";background:#bebebe;border-bottom-right-radius:90px 18px;border-bottom-left-radius:90px 18px;width:calc(100% + 140px);height:40px;display:block;position:absolute;top:calc(100% - 40px);left:-70px;box-shadow:inset 0 -4px 13px 3px #2229}.mockframe.macbook .top-bar:before{content:"";background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;width:100%;height:24px;display:block;position:relative;top:0;left:0}.mockframe.macbook .top-bar:after{content:"";background:#ddd;border-radius:0 0 20px 20px;width:16%;height:14px;margin-left:auto;margin-right:auto;display:block;position:absolute;top:0;left:0;right:0;box-shadow:inset 0 -3px 10px #999}.mockframe.macbook .bottom-bar{content:"";background:0 0;width:calc(100% + 140px);height:26px;display:block;position:absolute;top:calc(100% - 40px);left:-70px}.mockframe.macbook .bottom-bar:after,.mockframe.macbook .bottom-bar:before{content:"";width:80px;height:calc(100% - 2px);display:block;position:absolute;top:0}.mockframe.macbook .bottom-bar:before{background:linear-gradient(90deg,#747474,#c3c3c3 5%,#ebebeb 14%,#979797 41%,#f0f0f0 80% 100%,#f0f0f0);left:0}.mockframe.macbook .bottom-bar:after{background:linear-gradient(90deg,#f0f0f0 0 0,#f0f0f0 20%,#979797 59%,#ebebeb 86%,#c3c3c3 95%,#747474);right:0}.mockframe.macbook .camera{background:#3c3d3d;border-radius:100%;width:10px;height:10px;margin-left:-5px;position:absolute;top:20px;left:50%}.mockframe.macbook .home{display:none}.mockframe.macbook-pro{width:960px;height:624px;box-shadow:inset 0 0 0 .35px var(--mf-b1),inset 0 0 0 .7px var(--mf-b2),inset 0 0 0 1px var(--mf-b3),inset 0 0 0 2.5px var(--mf-b4),inset 0 0 0 6px #232323;--mf-b1:#3a383a;--mf-b2:#807e80;--mf-b3:#656366;--mf-b4:#424043;--mf-base:linear-gradient(180deg,#b4b2b5 0,#686669 .7px,#5d5b5e 20%,#5f5d60 42%,#4e4c4f 58%,#3c3a3d 68%,#2a282a 78%,#1f1d1f 86%,#2a282b 94%,#3e3c3f);--mf-scoop:linear-gradient(180deg,#a29fa3 0%,#8f8d90 45%,#747275);--mf-scoop-top:#a29fa3;--mf-foot:linear-gradient(180deg,#1c1a1c 0%,#3a383b 70%,#2a282b);background:linear-gradient(0deg,#060606 7px,#1d1d1d 34px,#000 0);border-radius:30.3px 30.3px 0 0;margin:0 auto;padding:17.5px 17.6px 45.4px}.mockframe.macbook-pro .screen{box-shadow:none;border-radius:11.9px 11.9px 0 0}.mockframe.macbook-pro .notch{z-index:4;background:#000;border-radius:0 0 6.3px 6.3px;width:118.1px;height:20.3px;margin-left:-59.05px;position:absolute;top:17.5px;left:50%}.mockframe.macbook-pro .notch:after,.mockframe.macbook-pro .notch:before{content:"";width:3.2px;height:3.2px;position:absolute;top:0}.mockframe.macbook-pro .notch:before{background:radial-gradient(circle at 0 100%,#0000 3.2px,#000 0);left:-3.2px}.mockframe.macbook-pro .notch:after{background:radial-gradient(circle at 100% 100%,#0000 3.2px,#000 0);right:-3.2px}.mockframe.macbook-pro .notch .camera{background:radial-gradient(circle,#2f4f86 0,#1a2440 25%,#0e1012 45%);border-radius:50%;width:6.3px;height:6.3px;margin:-3.15px 0 0 -3.15px;position:absolute;top:5.2px;left:50%}.mockframe.macbook-pro .top-bar{background:var(--mf-base);z-index:5;border-radius:3px 3px 19px 19px;width:calc(100% + 212px);height:42.2px;position:absolute;top:calc(100% - 7px);left:-106px}.mockframe.macbook-pro .top-bar:before{content:"";background:radial-gradient(circle at 0 100%,transparent 9px,var(--mf-scoop-top)9.5px)0 0/9px 9px no-repeat,radial-gradient(circle at 100% 100%,transparent 9px,var(--mf-scoop-top)9.5px)100% 0/9px 9px no-repeat;width:200px;height:9px;margin-left:-100px;position:absolute;top:0;left:50%}.mockframe.macbook-pro .top-bar:after{content:"";background:var(--mf-scoop);border-radius:0 0 9px 9px;width:182px;height:14.9px;margin-left:-91px;position:absolute;top:0;left:50%;box-shadow:inset 0 -1px 1.5px #0000002e}.mockframe.macbook-pro .bottom-bar{background:0 0;width:calc(100% + 80px);height:7px;position:absolute;top:calc(100% + 34.5px);left:-40px}.mockframe.macbook-pro .bottom-bar:after,.mockframe.macbook-pro .bottom-bar:before{content:"";background:var(--mf-foot);border-radius:0 0 5px 5px;width:80px;height:100%;position:absolute;top:0;box-shadow:inset 0 -1px 1px #ffffff1f}.mockframe.macbook-pro .bottom-bar:before{left:0}.mockframe.macbook-pro .bottom-bar:after{right:0}.mockframe.macbook-pro.silver{--mf-b1:#d8d9db;--mf-b2:#b7b8ba;--mf-b3:#9a9b9d;--mf-b4:#9c9d9f;--mf-base:linear-gradient(180deg,#f0f1f3 0,#d6d7d9 .7px,#d0d1d3 20%,#cecfd1 42%,#c3c4c6 55%,#a8a9ab 64%,#8e8f91 74%,#858688 84%,#9fa0a2 92%,#c9cacc);--mf-scoop:linear-gradient(180deg,#e6e7e9 0%,#ebeced 50%,#f3f4f6);--mf-scoop-top:#e6e7e9;--mf-foot:linear-gradient(180deg,#6e6f71 0%,#a3a4a6 70%,#8e8f91)}.mockframe.macbook-pro .home,.mockframe.macbook-pro .inner,.mockframe.macbook-pro .inner-shadow,.mockframe.macbook-pro .more-sensors,.mockframe.macbook-pro .sensor,.mockframe.macbook-pro .sensors,.mockframe.macbook-pro .sleep,.mockframe.macbook-pro .speaker,.mockframe.macbook-pro .volume,.mockframe.macbook-pro>.camera{display:none}.dfs-swap{position:relative;flex-shrink:0;transition:width .26s cubic-bezier(.4,0,.2,1),height .26s cubic-bezier(.4,0,.2,1)}.dfs{position:absolute;top:50%;left:50%;flex-shrink:0;transform:translate(-50%,-50%)}.dfs-swap--busy .dfs{animation:dfsSwap .26s cubic-bezier(.4,0,.2,1) both}@keyframes dfsSwap{0%{opacity:1;transform:translate(-50%,-50%) translate(0) scale(1)}45%{opacity:0;transform:translate(-50%,-50%) translate(-22px) scale(.97)}55%{opacity:0;transform:translate(-50%,-50%) translate(22px) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) translate(0) scale(1)}}@media(prefers-reduced-motion:reduce){.dfs-swap{transition:none}.dfs-swap--busy .dfs{animation:none}}.dfs__inner{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;transform-origin:top left}.dfs__chassis{position:relative;box-sizing:content-box}.dfs__screen{position:relative;overflow-x:hidden;overflow-y:auto;background-color:#fff;scrollbar-width:none;-ms-overflow-style:none}.dfs__screen::-webkit-scrollbar{display:none}.dfs__viewport{position:relative;min-height:100%}.dfs__viewport:has(>iframe){height:100%;overflow:hidden}.dfs__screen>iframe,.dfs__viewport>iframe{display:block;border:0}.dfs__viewport>iframe{position:absolute;top:0;left:0;width:calc(100% + 20px);height:100%}.dfs__chassis--aluminium{background:linear-gradient(115deg,#ffffff14,#fff0 45%),linear-gradient(180deg,#4a4e55,#35383e 40%,#24272c);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px #ffffff2e,0 24px 60px #0000006b}.dfs__chassis--titanium{background:linear-gradient(115deg,#ffffff1a,#fff0 40%),linear-gradient(180deg,#55585f,#34373d 45%,#26282d);box-shadow:inset 0 0 0 1px #ffffff24,inset 0 1px #fff3,0 24px 60px #00000073}.dfs__chassis--laptop:before,.dfs__chassis--monitor:before,.dfs__chassis--phone:before,.dfs__chassis--tablet:before,.dfs__chassis--watch:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:inherit;background-color:#050607;pointer-events:none}.dfs__notch{position:absolute;top:4px;left:50%;z-index:2;width:132px;height:15px;transform:translate(-50%);border-radius:0 0 8px 8px;background-color:#050607}.dfs__notch:after{content:"";top:5px;width:4px;height:4px}.dfs__dot,.dfs__notch:after{position:absolute;left:50%;transform:translate(-50%);border-radius:999px;background:radial-gradient(circle at 35% 30%,#2f3540,#0a0c0f 70%)}.dfs__dot{top:8px;z-index:2;width:6px;height:6px}.dfs__island{top:12px;width:106px;height:30px}.dfs__island,.dfs__punch-hole{position:absolute;left:50%;z-index:3;transform:translate(-50%);border-radius:999px;background-color:#050607}.dfs__punch-hole{top:14px;width:11px;height:11px;box-shadow:0 0 0 1px #0006}.dfs__home{position:absolute;bottom:8px;left:50%;z-index:3;width:132px;height:5px;transform:translate(-50%);border-radius:999px;background-color:#00000059;mix-blend-mode:difference}.dfs__btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(180deg,#5c5f66,#34373c);box-shadow:0 0 0 1px #00000059}.dfs__btn--silence,.dfs__btn--vol-down,.dfs__btn--vol-up{left:-3px;border-radius:2px 0 0 2px}.dfs__btn--silence{top:108px;height:32px}.dfs__btn--vol-up{top:160px;height:58px}.dfs__btn--vol-down{top:232px;height:58px}.dfs__btn--power{top:190px;right:-3px;height:96px;border-radius:0 2px 2px 0}.dfs__base{position:relative;align-self:stretch;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#52565d,#3a3d43 22%,#2a2d32 60%,#14161a);box-shadow:inset 0 1px #fff3,0 18px 34px #00000080}.dfs__base:before{content:"";position:absolute;top:0;right:26px;left:26px;height:4px;background:linear-gradient(180deg,#0009,#0000);pointer-events:none}.dfs__base:after{content:"";position:absolute;bottom:0;left:50%;width:120px;height:5px;transform:translate(-50%);border-radius:0 0 7px 7px;background-color:#0a0b0d}.dfs__stand{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.dfs__stand-neck{flex:1 1;width:96px;background:linear-gradient(90deg,#33363c,#4b4f57,#2c2f34)}.dfs__stand-foot{width:260px;height:10px;border-radius:6px;background:linear-gradient(180deg,#4b4f57,#2a2d32);box-shadow:0 12px 24px #0006}.dfs__chassis--browser,.dfs__chassis--browser.dfs__chassis--aluminium{background:#dfe1e5;box-shadow:0 20px 50px #00000047}.dfs__traffic{display:flex;flex-shrink:0;gap:6px;padding-right:2px}.dfs__traffic-dot{width:11px;height:11px;border-radius:999px}.dfs__traffic-dot--close{background-color:#ff5f57}.dfs__traffic-dot--min{background-color:#febc2e}.dfs__traffic-dot--max{background-color:#28c840}.dfs__omnibox{flex:1 1;min-width:0;overflow:hidden;padding:5px 12px;border-radius:999px;background-color:#fff;color:#5f6368;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.dfs__chassis--graphite{background:linear-gradient(115deg,#ffffff0f,#fff0 45%),linear-gradient(180deg,#33363b,#22252a 45%,#14161a);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 1px #ffffff1f,0 24px 60px #00000080}.dfs__bump{position:absolute;top:14px;left:12px;z-index:0;width:76px;height:76px;border-radius:22px;background:linear-gradient(160deg,#3d4046,#24272c 60%,#16181c);box-shadow:0 6px 18px #00000073}.dfs__fold-seam{position:absolute;top:0;bottom:0;left:50%;z-index:3;width:10px;transform:translate(-50%);background:linear-gradient(90deg,#0000,#0000000f 45%,#ffffff29,#0000000f 55%,#0000);pointer-events:none}.dfs__grille{position:absolute;top:3px;width:90px;height:5px;border-radius:2px;background-image:radial-gradient(circle,rgba(0,0,0,.55) .6px,transparent 0);background-size:3px 3px;opacity:.7}.dfs__grille--left{left:60px}.dfs__grille--right{right:60px}.dfs__chassis--watch{position:relative;z-index:2}.dfs__crown{position:absolute;top:32%;right:-6px;z-index:3;width:7px;height:26px;border-radius:3px;background:linear-gradient(90deg,#6a6e76,#3c4046 55%,#2a2d33);background-image:repeating-linear-gradient(180deg,#00000059,#00000059 1px,#ffffff1f 0,#ffffff1f 2px);box-shadow:0 0 0 1px #0006}.dfs__crown-btn{position:absolute;top:52%;right:-4px;z-index:3;width:4px;height:34px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#5c5f66,#34373c);box-shadow:0 0 0 1px #00000059}.dfs__strap{position:absolute;left:50%;z-index:0;width:62%;height:90px;transform:translate(-50%);background:linear-gradient(180deg,#3a3d43,#26282d)}.dfs__strap--top{top:-84px;border-radius:14px 14px 4px 4px}.dfs__strap--bottom{bottom:-84px;border-radius:4px 4px 14px 14px}.dfs__chassis--tv,.dfs__chassis--tv.dfs__chassis--graphite{background:linear-gradient(180deg,#26282d,#1a1c20 60%,#101216);box-shadow:inset 0 0 0 1px #ffffff0f,0 30px 70px #00000080}.dfs__tv-stand{position:relative;display:flex;align-items:flex-end;justify-content:center;align-self:stretch}.dfs__soundbar{position:absolute;top:14px;left:50%;width:46%;height:8px;transform:translate(-50%);border-radius:4px;background-color:#1c1e23;background-image:radial-gradient(circle,rgba(255,255,255,.09) .7px,transparent 0);background-size:4px 4px}.dfs__tv-foot{position:absolute;bottom:0;width:90px;height:8px;border-radius:3px;background:linear-gradient(180deg,#3a3d43,#1d1f24);box-shadow:0 10px 22px #0006}.dfs__tv-foot--left{left:12%;transform:skew(18deg)}.dfs__tv-foot--right{right:12%;transform:skew(-18deg)}.dfs__browser-bar{display:flex;flex-direction:column;justify-content:center;gap:6px;box-sizing:border-box;padding:8px 10px}.dfs__browser-bar--mac{background:linear-gradient(180deg,#e6e7ea,#dcdee2)}.dfs__browser-bar--windows{background:linear-gradient(180deg,#d9dce1,#cfd2d8)}.dfs__browser-top{gap:8px}.dfs__browser-top,.dfs__tab{display:flex;align-items:center;height:26px}.dfs__tab{gap:6px;width:132px;padding:0 10px;border-radius:8px 8px 0 0;background-color:#ffffff73}.dfs__browser-bar--windows .dfs__tab{border-radius:6px 6px 0 0}.dfs__tab--active{background-color:#fff;box-shadow:0 -1px 2px #0000000f}.dfs__favicon{width:10px;height:10px;border-radius:2px;background-color:#b9bec7}.dfs__win-controls{display:flex;gap:14px;margin-left:auto;padding-right:4px}.dfs__win-btn{width:10px;height:10px;background-color:#6b7078}.dfs__win-btn--min{height:1px;align-self:center}.dfs__win-btn--max{height:9px;background-color:transparent;border:1px solid #6b7078}.dfs__win-btn--close{background-color:transparent;background-image:linear-gradient(45deg,transparent 45%,#6b7078 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#6b7078 45% 55%,transparent 55%)}.dfs__browser-address{display:flex;align-items:center;gap:10px;height:26px}.dfs__nav-dots{display:flex;flex-shrink:0;gap:10px;padding-left:4px}.dfs__nav-arrow{width:7px;height:7px;border-top:1.5px solid #74797f;border-right:1.5px solid #74797f}.dfs__nav-arrow--back{transform:rotate(-135deg)}.dfs__nav-arrow--forward{transform:rotate(45deg);opacity:.45}.product-page_page__FREEN{--control-height-sm:var(--control-height-md)}.product-page_page__FREEN .product-page_hero__lGi2N{position:relative;z-index:1;background:transparent}.product-page_section__uoaHV{width:100%;max-width:var(--home-width);margin-inline:auto;padding:var(--space-24) var(--home-gutter);min-width:0}.product-page_heading__k_WMB{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-gap:var(--space-12);gap:var(--space-12);align-items:end;margin-bottom:var(--space-12)}.product-page_heading__k_WMB h2{max-width:19ch;font-family:var(--font-display);font-size:var(--text-4xl);font-weight:400;line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-wrap:balance}.product-page_heading__k_WMB p{max-width:46ch;color:var(--text-secondary);font-size:var(--text-base);line-height:var(--leading-body)}.product-page_overview__yZUjT{position:relative;z-index:1;width:min(100%,1040px);margin-inline:auto;padding:0 var(--home-gutter) var(--space-16)}.product-page_overview__yZUjT>.product-page_cabinet__U4vrV{width:88%}.product-page_overviewPhone__Cqb_w{position:absolute;width:23%;right:var(--home-gutter);bottom:var(--space-8)}.product-page_cabinet__U4vrV{width:100%;max-width:880px;min-width:0;margin-inline:auto}.product-page_phoneGallery__HiQnu{width:100%;max-width:800px;margin-inline:auto}.product-page_devicePicker__1T1NF{width:100%;max-width:420px;margin:0 auto var(--space-8)}.product-page_phoneSlide__CRJfK{min-width:0;margin:0}.product-page_phoneTrigger__kw2R7{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.product-page_phoneTrigger__kw2R7 img{display:block;width:100%;height:auto}.product-page_phoneSlide__CRJfK figcaption{min-height:80px;margin-top:var(--space-5);text-align:center}.product-page_phoneSlide__CRJfK h3{font-size:var(--text-base);font-weight:500}.product-page_phoneSlide__CRJfK p{margin-top:var(--space-2);color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--leading-body)}.product-page_phoneExpanded__beIul{display:block;width:auto;height:min(66dvh,720px);max-width:100%;object-fit:contain;margin-inline:auto}.product-page_deviceFrame__qGvNs{position:relative;width:100%;min-width:0}.product-page_deviceStage__RM3TN{position:absolute;inset:0 auto auto 0;transform-origin:top left}.product-page_deviceFrame__qGvNs[data-product-device=monitor] .dfs__chassis--monitor{background:linear-gradient(180deg,#e4e5e7,#b8babe);box-shadow:inset 0 0 0 1px #f0f1f2}.product-page_deviceFrame__qGvNs[data-product-device=monitor] .dfs__stand-neck{background:linear-gradient(90deg,#b2b4b8,#e3e4e6 48%,#bec0c4)}.product-page_deviceFrame__qGvNs[data-product-device=monitor] .dfs__stand-foot{background:linear-gradient(180deg,#e3e4e6,#afb1b5);box-shadow:none}.product-page_cabinetCanvas__0Baq6{position:relative;width:1280px;height:720px}.product-page_laptopCanvas__K_nAQ{height:800px}.product-page_kit__Cw2I4{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}.product-page_kitState__2S4W2{position:absolute;inset:0;display:grid;place-content:center;grid-gap:var(--space-4);gap:var(--space-4);padding:var(--space-6);background:var(--surface);color:var(--text-secondary);text-align:center;font-size:var(--text-sm)}.product-page_phone__AR7QU{width:100%;max-width:280px;margin-inline:auto}.product-page_phone__AR7QU img{width:100%;height:auto;display:block}.product-page_phone__AR7QU .product-page_phoneChrome__pNtFb{position:absolute;inset:0;pointer-events:none}.product-page_phone__AR7QU .product-page_darkShot__YC_DN,:root[data-theme=dark] .product-page_phone__AR7QU .product-page_lightShot__rs4b9{display:none}:root[data-theme=dark] .product-page_phone__AR7QU .product-page_darkShot__YC_DN{display:block}.product-page_explorerControls__pTYCC{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6);min-width:0}.product-page_explorerControls__pTYCC p{max-width:36ch;min-height:calc(var(--text-sm) * 2.8);color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--leading-body)}.product-page_bento__1_YcJ{max-width:var(--home-width);margin-inline:auto}.product-page_bento__1_YcJ>div{max-width:var(--home-width);padding:var(--space-24) var(--home-gutter)}.product-page_explorerControls__pTYCC>*,.product-page_heading__k_WMB>*{min-width:0}@media (max-width:1024px){.product-page_heading__k_WMB h2{font-size:var(--text-3xl)}.product-page_heading__k_WMB{gap:var(--space-8)}}@media (max-width:767px){.product-page_bento__1_YcJ>div,.product-page_section__uoaHV{padding-block:var(--space-16)}.product-page_heading__k_WMB{grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-bottom:var(--space-8)}.product-page_overview__yZUjT{padding-bottom:var(--space-12)}.product-page_overview__yZUjT>.product-page_cabinet__U4vrV{width:100%}.product-page_overviewPhone__Cqb_w{width:30%;right:var(--space-6);bottom:0}.product-page_explorerControls__pTYCC{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.product-page_explorerControls__pTYCC p{max-width:none}}