{"version":3,"sourceRoot":null,"mappings":";;;;;;AAMA,oIAMC,gKAYA,+FAOA,8FASA,oIAQC,yKAYA,+MAaA,yNAYC,mKAYD,6FAQA,mGAQA,oIAUA,8IAUC,mKAYA,+JAaD,uJAYA,wIAWA,uJAYA,2CAGC,qFAIA,kFAIA,qGAMD,+EAIC,mDAIA,4FAMA,0FAIA,oFAIA,oDAIA,sGAIC,yDAOF,yEAKC,yGAQA,sHAOC,0HASA,4GASD,0FAOA,gFAOA,oFAOA,sEAKA,0HASA,kGASF,wIAQC,6KAYA,mNAaA,6NAYC,uKAYD,iGAQA,uGAQA,wIAUA,kJAUC,uKAYA,mKAaD,2JAYA,4IAWA,2JAYA,+CAGC,6FAIA,0FAIA,yGAMD,mFAIC,uDAIA,gGAMA,kGAIA,4FAIA,wDAIA,0GAIC,6DAOF,6EAKC,6GAQA,0HAOC,8HASA,gHASD,8FAOA,oFAOA,wFAOA,0EAKA,8HASA,sGASF,iGAOC,wKAYA,0IAWA,kEAIA,4IAUC,6LAeD,qEAKC,+FAOA,iFAQD,0CAGC,iDAIA,mFAIC,0DAOH,uHAQC,2KAYA,oQAaC,oLAaA,yOAiBD,mJAUC,+JAWA,2JAMA,0JAOD,6IAWA,sCAKD,+HAQC,uHAUA,uIAQA,qDAKA,sDAKA,wDAKA,yDAKA,uKAYA,yMAWC,+KAaD,+DAKA,iIAQA,sCAIA,4CAIA,2KAMA,4DAKC,0EAOA,0EAQD,4DAMA,4HAUA,6IAWA,kLAWI,2HAQH,kHAKA,uHAMD,uDAIC,6GAMA,iDAIA,2EAMA,+KAIA,mHAQA,iFAMC,wEAMA,wEAOD,+EAOA,qEAMA,6GASA,sLAUC,8FAIA,0IAMA,4HAQH,2RAcC,uJAaA,+GAaA,2LAeC,sDAKA,wDAKA,4DAKA,8DAOD,6GAOC,+JAYA,+JAYA,iKAYA,6JAaD,wIAYA,4JAYA,kRAiBC,sJAUA,0PAgBC,4LAeA,gOAmBF,0QAoBA,2QAoBA,2QAmBC,+QAqBD,mRAqBA,yRAKA,2NAQC,4FAIA,6HAYC,gKASA,2KAUD,6DAIA,uPAIC,mQAQF,wOAQC,gGAIA,iIAWA,2DAIA,iEAIA,uQAIC,mRAQF,mOAQC,2FAIA,4HAWA,sDAIA,4DAIA,mPAIC,+PAQF,uOAQC,+FAIA,gIAWA,0DAIA,gEAIA,mQAIC,+QAQF,4OAQC,oGAIA,qIAWA,+DAIA,qEAIA,uRAIC,mSAQF,gOAQC,gGAIA,iIAWA,2DAIA,iEAIA,uQAIC,mRAQF,oEAME,0KAeA,sLAgBA,gLAeA,4LAiBD,yGAMA,oJAUA,qJAUA,qJASC,4IAUD,6JAgBF,qSAcC,uJAaA,+GAaA,mRAmBC,6IAaD,yNAkBA,uNAkBA,0NAkBA,6GAOC,+JAYA,+JAYA,iKAYA,6JAcD,yIAaA,4JAYA,qTAKA,+NAQC,6FAKC,yKASA,0KAUD,8DAIA,gIAUA,sKAYD,uDAKC,mFAOA,2MAiBA,qNAgBA,wNAkBC,oIAUA,gMAiBH,8HASC,kMAaA,2EAMA,wMAYC,iIASA,wHAKA,6HAKA,+JAWC,0OAgBF,qQAaC,uMAYA,+OAkBD,uJAUC,uKAUA,4IAKA,6IAMD,8SAiBA,iDAGC,wDAIA,wDAGC,qHAIA,yHAKD,0DAGC,8HAKA,sGAMD,iJAIA,iJAUF,+FAQC,qLAcA,0NAcA,8DAMA,sLAYC,8LAaD,oIAWA,sIAUA,gRAaA,gDAGC,uDAIA,4FAOD,2CAGC,kDAIA,kFAOD,2CAGC,kDAIA,kFAOD,sDAIC,qFAOA,mHASA,qHAeF,qIASC,wLAcA,qQAeA,iEAMA,uLAYC,qMAaD,0JAaA,uIAWA,uIASC,sJAYD,+OAWA,6IAWA,yIAQA,uDACA,wDACA,0DACA,2DAGA,iFAIC,yDAIA,+FAKA,gGAOD,8CAGC,wFAOD,kFAIC,uDAIA,qFAKA,4FAOD,6EAIC,qDAIA,wFAOD,yDAIC,wFAOA,gHASA,sHASA,4GAOC","sources":["mockframe.css"],"sourcesContent":["/*!\n * MockFrame device styles\n * Adapted from Marvel devices.css (https://github.com/marvelapp/devices.css)\n * Original work Copyright (c) 2014 Marvelapp — MIT License\n * Modifications Copyright (c) 2026 Mohammed Banani — MIT License\n */\n.mockframe{\n\tdisplay: inline-block;\n\tposition: relative;\n\tbox-sizing: content-box !important;\n    transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1);\t\n\n\t.screen {\n\t\twidth: 100%;\n\t\tposition: relative;\n\t\theight: 100%;\n\t\tz-index: 3;\n\t\tbackground: white;\n\t\toverflow: hidden;\n\t\tdisplay: block;\n\t\tborder-radius: 1px;\n\t\tbox-shadow: 0 0 0 3px #111;\n\t}\n\n\t.top-bar, .bottom-bar {\n\t\theight: 3px;\n\t\tbackground: black;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n\n\t.middle-bar {\n\t\twidth: 3px;\n\t\theight: 4px;\n\t\ttop: 0px;\n\t\tleft: 90px;\n\t\tbackground: black;\n\t\tposition: absolute;\n\t}\n\n\t&.iphone8{\n\t\twidth: 375px;\n\t\theight: 667px;\n\t\tpadding: 105px 24px;\n\t\tbackground: #d9dbdc;\n\t\tborder-radius: 56px;\n\t\tbox-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2);\n\n\t\t&:before{\n\t\t\twidth: calc(100% - 12px);\n\t\t\theight: calc(100% - 12px);\n\t\t\tposition: absolute;\n\t\t\ttop: 6px;\n\t\t\tcontent: '';\n\t\t\tleft: 6px;\n\t\t\tborder-radius: 50px;\n\t\t\tbackground: #f8f8f8;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t&:after{\n\t\t\twidth: calc(100% - 16px);\n\t\t\theight: calc(100% - 16px);\n\t\t\tposition: absolute;\n\t\t\ttop: 8px;\n\t\t\tcontent: '';\n\t\t\tleft: 8px;\n\t\t\tborder-radius: 48px;\n\t\t\tbox-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1),\n\t\t\tinset 0 0 6px 3px #FFFFFF;\n\t\t\tz-index: 2;\n\t\t}\n\n\t\t.home {\n\t\t\tborder-radius: 100%;\n\t\t\twidth: 68px;\n\t\t\theight: 68px;\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -34px;\n\t\t\tbottom: 22px;\n\t\t\tz-index: 3;\n\t\t\tbackground: rgb(48,50,51);\n\t\t\tbackground: linear-gradient(135deg, rgba(48,50,51,1) 0%,rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1) 100%);\n\n\t\t\t&:before{\n\t\t\t\tbackground: #f8f8f8;\n\t\t\t\tposition: absolute;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-radius: 100%;\n\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\theight: calc(100% - 8px);\n\t\t\t\ttop: 4px;\n\t\t\t\tleft: 4px;\n\t\t\t}\n\t\t}\n\n\t\t.top-bar{\n\t\t\theight: 14px;\n\t\t\tbackground: #bfbfc0;\n\t\t\tposition: absolute;\n\t\t\ttop: 68px;\n\t\t\tleft: 0;\n\t\t}\n\n\t\t.bottom-bar{\n\t\t\theight: 14px;\n\t\t\tbackground: #bfbfc0;\n\t\t\tposition: absolute;\n\t\t\tbottom: 68px;\n\t\t\tleft: 0;\n\t\t}\n\n\t\t.sleep{\n\t\t\tposition: absolute;\n\t\t\ttop: 190px;\n\t\t\tright: -4px;\n\t\t\twidth: 4px;\n\t\t\theight: 66px;\n\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\tbackground: #d9dbdc;\n\t\t}\n\n\t\t.volume{\n\t\t\tposition: absolute;\n\t\t\tleft: -4px;\n\t\t\ttop: 188px;\n\t\t\tz-index: 0;\n\t\t\theight: 66px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 2px 0px 0px 2px;\n\t\t\tbackground: #d9dbdc;\n\n\t\t\t&:before {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 2px;\n\t\t\t\ttop: -78px;\n\t\t\t\theight: 40px;\n\t\t\t\twidth: 2px;\n\t\t\t\tborder-radius: 2px 0px 0px 2px;\n\t\t\t\tbackground: inherit;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t&:after {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0px;\n\t\t\t\ttop: 82px;\n\t\t\t\theight: 66px;\n\t\t\t\twidth: 4px;\n\t\t\t\tborder-radius: 2px 0px 0px 2px;\n\t\t\t\tbackground: inherit;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\n\t\t.camera {\n\t\t\tbackground: #3c3d3d;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t\tposition: absolute;\n\t\t\ttop: 24px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -6px;\n\t\t\tborder-radius: 100%;\n\t\t\tz-index: 3;\n\t\t}\n\n\t\t.sensor {\n\t\t\tbackground: #3c3d3d;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tposition: absolute;\n\t\t\ttop: 49px;\n\t\t\tleft: 134px;\n\t\t\tz-index: 3;\n\t\t\tborder-radius: 100%;\n\t\t}\n\n\t\t.speaker {\n\t\t\tbackground: #292728;\n\t\t\twidth: 70px;\n\t\t\theight: 6px;\n\t\t\tposition: absolute;\n\t\t\ttop: 54px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -35px;\n\t\t\tborder-radius: 6px;\n\t\t\tz-index: 3;\n\t\t}\n\n\t\t&.gold{\n\t\t\tbackground: #f9e7d3;\n\n\t\t\t.top-bar, .bottom-bar{\n\t\t\t\tbackground: white;\n\t\t\t}\n\n\t\t\t.sleep, .volume{\n\t\t\t\tbackground: #f9e7d3;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\tbackground: rgb(206,187,169);\n\t\t\t\tbackground: linear-gradient(135deg, rgba(206,187,169,1) 0%,rgba(249,231,211,1) 50%,rgba(206,187,169,1) 100%);\n\t\t\t}\n\t\t}\n\n\t\t&.black{\n\t\t\tbackground: #464646;\n\t\t\tbox-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7);\n\n\t\t\t&:before{\n\t\t\t\tbackground: #080808;\n\t\t\t}\n\n\t\t\t&:after{\n\t\t\t\tbox-shadow:\n\t\t\t\t\tinset 0 0 3px 0 rgba(0, 0, 0, 0.1),\n\t\t\t\t\tinset 0 0 6px 3px #212121;\n\t\t\t}\n\n\t\t\t.top-bar, .bottom-bar{\n\t\t\t\tbackground: #212121;\n\t\t\t}\n\n\t\t\t.volume, .sleep{\n\t\t\t\tbackground: #464646;\n\t\t\t}\n\n\t\t\t.camera{\n\t\t\t\tbackground: #080808;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\tbackground: rgb(8,8,8);\n\t\t\t\tbackground: linear-gradient(135deg, rgba(8,8,8,1) 0%,rgba(70,70,70,1) 50%,rgba(8,8,8,1) 100%);\n\n\t\t\t\t&:before{\n\t\t\t\t\tbackground: #080808;\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\n\t\t&.landscape{\n\t\t\tpadding: 24px 105px;\n\t\t\theight: 375px;\n\t\t\twidth: 667px;\n\n\t\t\t.sleep{\n\t\t\t\ttop: 100%;\n\t\t\t\tborder-radius: 0px 0px 2px 2px;\n\t\t\t\tright: 190px;\n\t\t\t\theight: 4px;\n\t\t\t\twidth: 66px;\n\t\t\t}\n\n\t\t\t.volume {\n\t\t\t\twidth: 66px;\n\t\t\t\theight: 4px;\n\t\t\t\ttop: -4px;\n\t\t\t\tleft: calc(100% - 188px - 66px);\n\t\t\t\tborder-radius: 2px 2px 0px 0px;\n\n\t\t\t\t&:before {\n\t\t\t\t\twidth: 40px;\n\t\t\t\t\theight: 2px;\n\t\t\t\t\ttop: 2px;\n\t\t\t\t\tright: -78px;\n\t\t\t\t\tleft: auto;\n\t\t\t\t\tborder-radius: 2px 2px 0px 0px;\n\t\t\t\t}\n\n\t\t\t\t&:after{\n\t\t\t\t\tleft: -82px;\n\t\t\t\t\twidth: 66px;\n\t\t\t\t\theight: 4px;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tborder-radius: 2px 2px 0px 0px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.top-bar{\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 100%;\n\t\t\t\tleft: calc(100% - 68px -  14px);\n\t\t\t\ttop: 0;\n\t\t\t}\n\n\t\t\t.bottom-bar{\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 100%;\n\t\t\t\tleft: 68px;\n\t\t\t\ttop: 0;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-top: -34px;\n\t\t\t\tmargin-left: 0;\n\t\t\t\tleft: 22px;\n\t\t\t}\n\n\t\t\t.sensor {\n\t\t\t\ttop: 134px;\n\t\t\t\tleft: calc(100% - 49px - 16px);\n\t\t\t}\n\n\t\t\t.speaker {\n\t\t\t\theight: 70px;\n\t\t\t\twidth: 6px;\n\t\t\t\tleft: calc(100% - 54px - 6px);\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-left: 0px;\n\t\t\t\tmargin-top: -35px;\n\t\t\t}\n\n\t\t\t.camera {\n\t\t\t\tleft: calc(100% - 32px);\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-left: 0px;\n\t\t\t\tmargin-top: -5px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.iphone8plus{\n\t\twidth: 414px;\n\t\theight: 736px;\n\t\tpadding: 112px 26px;\n\t\tbackground: #d9dbdc;\n\t\tborder-radius: 56px;\n\t\tbox-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2);\n\n\t\t&:before{\n\t\t\twidth: calc(100% - 12px);\n\t\t\theight: calc(100% - 12px);\n\t\t\tposition: absolute;\n\t\t\ttop: 6px;\n\t\t\tcontent: '';\n\t\t\tleft: 6px;\n\t\t\tborder-radius: 50px;\n\t\t\tbackground: #f8f8f8;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t&:after{\n\t\t\twidth: calc(100% - 16px);\n\t\t\theight: calc(100% - 16px);\n\t\t\tposition: absolute;\n\t\t\ttop: 8px;\n\t\t\tcontent: '';\n\t\t\tleft: 8px;\n\t\t\tborder-radius: 48px;\n\t\t\tbox-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1),\n\t\t\t\tinset 0 0 6px 3px #FFFFFF;\n\t\t\tz-index: 2;\n\t\t}\n\n\t\t.home {\n\t\t\tborder-radius: 100%;\n\t\t\twidth: 68px;\n\t\t\theight: 68px;\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -34px;\n\t\t\tbottom: 24px;\n\t\t\tz-index: 3;\n\t\t\tbackground: rgb(48,50,51);\n\t\t\tbackground: linear-gradient(135deg, rgba(48,50,51,1) 0%,rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1) 100%);\n\n\t\t\t&:before{\n\t\t\t\tbackground: #f8f8f8;\n\t\t\t\tposition: absolute;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-radius: 100%;\n\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\theight: calc(100% - 8px);\n\t\t\t\ttop: 4px;\n\t\t\t\tleft: 4px;\n\t\t\t}\n\t\t}\n\n\t\t.top-bar{\n\t\t\theight: 14px;\n\t\t\tbackground: #bfbfc0;\n\t\t\tposition: absolute;\n\t\t\ttop: 68px;\n\t\t\tleft: 0;\n\t\t}\n\n\t\t.bottom-bar{\n\t\t\theight: 14px;\n\t\t\tbackground: #bfbfc0;\n\t\t\tposition: absolute;\n\t\t\tbottom: 68px;\n\t\t\tleft: 0;\n\t\t}\n\n\t\t.sleep{\n\t\t\tposition: absolute;\n\t\t\ttop: 190px;\n\t\t\tright: -4px;\n\t\t\twidth: 4px;\n\t\t\theight: 66px;\n\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\tbackground: #d9dbdc;\n\t\t}\n\n\t\t.volume{\n\t\t\tposition: absolute;\n\t\t\tleft: -4px;\n\t\t\ttop: 188px;\n\t\t\tz-index: 0;\n\t\t\theight: 66px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 2px 0px 0px 2px;\n\t\t\tbackground: #d9dbdc;\n\n\t\t\t&:before {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 2px;\n\t\t\t\ttop: -78px;\n\t\t\t\theight: 40px;\n\t\t\t\twidth: 2px;\n\t\t\t\tborder-radius: 2px 0px 0px 2px;\n\t\t\t\tbackground: inherit;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t&:after {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0px;\n\t\t\t\ttop: 82px;\n\t\t\t\theight: 66px;\n\t\t\t\twidth: 4px;\n\t\t\t\tborder-radius: 2px 0px 0px 2px;\n\t\t\t\tbackground: inherit;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\n\t\t.camera {\n\t\t\tbackground: #3c3d3d;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t\tposition: absolute;\n\t\t\ttop: 29px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -6px;\n\t\t\tborder-radius: 100%;\n\t\t\tz-index: 3;\n\t\t}\n\n\t\t.sensor {\n\t\t\tbackground: #3c3d3d;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tposition: absolute;\n\t\t\ttop: 54px;\n\t\t\tleft: 154px;\n\t\t\tz-index: 3;\n\t\t\tborder-radius: 100%;\n\t\t}\n\n\t\t.speaker {\n\t\t\tbackground: #292728;\n\t\t\twidth: 70px;\n\t\t\theight: 6px;\n\t\t\tposition: absolute;\n\t\t\ttop: 59px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -35px;\n\t\t\tborder-radius: 6px;\n\t\t\tz-index: 3;\n\t\t}\n\n\t\t&.gold{\n\t\t\tbackground: #f9e7d3;\n\n\t\t\t.top-bar, .bottom-bar{\n\t\t\t\tbackground: white;\n\t\t\t}\n\n\t\t\t.sleep, .volume{\n\t\t\t\tbackground: #f9e7d3;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\tbackground: rgb(206,187,169);\n\t\t\t\tbackground: linear-gradient(135deg, rgba(206,187,169,1) 0%,rgba(249,231,211,1) 50%,rgba(206,187,169,1) 100%);\n\t\t\t}\n\t\t}\n\n\t\t&.black{\n\t\t\tbackground: #464646;\n\t\t\tbox-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.7);\n\n\t\t\t&:before{\n\t\t\t\tbackground: #080808;\n\t\t\t}\n\n\t\t\t&:after{\n\t\t\t\tbox-shadow:\n\t\t\t\t\tinset 0 0 3px 0 rgba(0, 0, 0, 0.1),\n\t\t\t\t\tinset 0 0 6px 3px #212121;\n\t\t\t}\n\n\t\t\t.top-bar, .bottom-bar{\n\t\t\t\tbackground: #212121;\n\t\t\t}\n\n\t\t\t.volume, .sleep{\n\t\t\t\tbackground: #464646;\n\t\t\t}\n\n\t\t\t.camera{\n\t\t\t\tbackground: #080808;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\tbackground: rgb(8,8,8);\n\t\t\t\tbackground: linear-gradient(135deg, rgba(8,8,8,1) 0%,rgba(70,70,70,1) 50%,rgba(8,8,8,1) 100%);\n\n\t\t\t\t&:before{\n\t\t\t\t\tbackground: #080808;\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\n\t\t&.landscape{\n\t\t\tpadding: 26px 112px;\n\t\t\theight: 414px;\n\t\t\twidth: 736px;\n\n\t\t\t.sleep{\n\t\t\t\ttop: 100%;\n\t\t\t\tborder-radius: 0px 0px 2px 2px;\n\t\t\t\tright: 190px;\n\t\t\t\theight: 4px;\n\t\t\t\twidth: 66px;\n\t\t\t}\n\n\t\t\t.volume {\n\t\t\t\twidth: 66px;\n\t\t\t\theight: 4px;\n\t\t\t\ttop: -4px;\n\t\t\t\tleft: calc(100% - 188px - 66px);\n\t\t\t\tborder-radius: 2px 2px 0px 0px;\n\n\t\t\t\t&:before {\n\t\t\t\t\twidth: 40px;\n\t\t\t\t\theight: 2px;\n\t\t\t\t\ttop: 2px;\n\t\t\t\t\tright: -78px;\n\t\t\t\t\tleft: auto;\n\t\t\t\t\tborder-radius: 2px 2px 0px 0px;\n\t\t\t\t}\n\n\t\t\t\t&:after{\n\t\t\t\t\tleft: -82px;\n\t\t\t\t\twidth: 66px;\n\t\t\t\t\theight: 4px;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tborder-radius: 2px 2px 0px 0px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.top-bar{\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 100%;\n\t\t\t\tleft: calc(100% - 68px -  14px);\n\t\t\t\ttop: 0;\n\t\t\t}\n\n\t\t\t.bottom-bar{\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 100%;\n\t\t\t\tleft: 68px;\n\t\t\t\ttop: 0;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-top: -34px;\n\t\t\t\tmargin-left: 0;\n\t\t\t\tleft: 24px;\n\t\t\t}\n\n\t\t\t.sensor {\n\t\t\t\ttop: 154px;\n\t\t\t\tleft: calc(100% - 54px - 16px);\n\t\t\t}\n\n\t\t\t.speaker {\n\t\t\t\theight: 70px;\n\t\t\t\twidth: 6px;\n\t\t\t\tleft: calc(100% - 59px - 6px);\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-left: 0px;\n\t\t\t\tmargin-top: -35px;\n\t\t\t}\n\n\t\t\t.camera {\n\t\t\t\tleft: calc(100% - 29px);\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-left: 0px;\n\t\t\t\tmargin-top: -5px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.ipad{\n\t\twidth: 576px;\n\t\theight: 768px;\n\t\tpadding: 90px 25px;\n\t\tbackground: #242324;\n\t\tborder-radius: 44px;\n\n\t\t&:before{\n\t\t\twidth: calc(100% - 8px);\n\t\t\theight: calc(100% - 8px);\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 4px;\n\t\t\tleft: 4px;\n\t\t\tborder-radius: 40px;\n\t\t\tbackground: #1e1e1e;\n\t\t}\n\n\t\t.camera {\n\t\t\tbackground: #3c3d3d;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tposition: absolute;\n\t\t\ttop: 44px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -5px;\n\t\t\tborder-radius: 100%;\n\t\t}\n\n\t\t.top-bar, .bottom-bar{\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.home {\n\t\t\tbackground: #242324;\n\t\t\tborder-radius: 36px;\n\t\t\twidth: 50px;\n\t\t\theight: 50px;\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -25px;\n\t\t\tbottom: 22px;\n\n\t\t\t&:after {\n\t\t\t\twidth: 15px;\n\t\t\t\theight: 15px;\n\t\t\t\tmargin-top: -8px;\n\t\t\t\tmargin-left: -8px;\n\t\t\t\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\tcontent: '';\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t}\n\t\t}\n\n\t\t&.landscape{\n\t\t\theight: 576px;\n\t\t\twidth: 768px;\n\t\t\tpadding: 25px 90px;\n\n\t\t\t.camera {\n\t\t\t\tleft: calc(100% - 44px);\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-top: -5px;\n\t\t\t}\n\n\t\t\t.home {\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 22px;\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-top: -25px;\n\t\t\t}\n\t\t}\n\n\t\t&.silver{\n\t\t\tbackground: #bcbcbc;\n\n\t\t\t&:before{\n\t\t\t\tbackground: #fcfcfc;\n\t\t\t}\n\n\t\t\t.home{\n\t\t\t\tbackground: #fcfcfc;\n\t\t\t\tbox-shadow: inset 0 0 0 1px #bcbcbc;\n\n\t\t\t\t&:after{\n\t\t\t\t\tborder: 1px solid rgba(0, 0, 0, 0.2);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.macbook {\n\t\twidth: 960px;\n\t\theight: 600px;\n\t\tpadding: 44px 44px 76px;\n\t\tmargin: 0 auto;\n\t\tbackground: #bebebe;\n\t\tborder-radius: 34px;\n\n\t\t&:before {\n\t\t\twidth: calc(100% - 8px);\n\t\t\theight: calc(100% - 8px);\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 4px;\n\t\t\tleft: 4px;\n\t\t\tborder-radius: 30px;\n\t\t\tbackground: #1e1e1e;\n\t\t}\n\n\t\t.top-bar {\n\t\t\twidth: calc(100% + 2 * 70px);\n\t\t\theight: 40px;\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 680px;\n\t\t\tleft: -70px;\n\t\t\tborder-bottom-left-radius: 90px 18px;\n\t\t\tborder-bottom-right-radius: 90px 18px;\n\t\t\tbackground: #bebebe;\n\t\t\tbox-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);\n\n\t\t\t&:before {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 24px;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tbackground: #f0f0f0;\n\t\t\t\tborder-bottom: 2px solid #aaa;\n\t\t\t\tborder-radius: 5px;\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t&:after {\n\t\t\t\twidth: 16%;\n\t\t\t\theight: 14px;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tbackground: #ddd;\n\t\t\t\tposition: absolute;\n\t\t\t\tmargin-left: auto;\n\t\t\t\tmargin-right: auto;\n\t\t\t\tleft: 0;\n\t\t\t\tright: 0;\n\t\t\t\tborder-radius: 0 0 20px 20px;\n\t\t\t\tbox-shadow: inset 0px -3px 10px #999;\n\t\t\t}\n\t\t}\n\n\t\t.bottom-bar {\n\t\t\tbackground: transparent;\n\t\t\twidth: calc(100% + 2 * 70px);\n\t\t\theight: 26px;\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 680px;\n\t\t\tleft: -70px;\n\n\t\t\t&:before,\n\t\t\t&:after {\n\t\t\t\theight: calc(100% - 2px);\n\t\t\t\twidth: 80px;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\n\t\t\t\tposition: absolute;\n\t\t\t}\n\n\t\t\t&:before {\n\t\t\t\tleft: 0;\n\t\t\t\tbackground: #f0f0f0;\n\t\t\t\tbackground: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);\n\t\t\t}\n\n\t\t\t&:after {\n\t\t\t\tright: 0;\n\t\t\t\tbackground: #f0f0f0;\n\t\t\t\tbackground: linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);\n\t\t\t}\n\t\t}\n\n\t\t.camera {\n\t\t\tbackground: #3c3d3d;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tposition: absolute;\n\t\t\ttop: 20px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -5px;\n\t\t\tborder-radius: 100%;\n\t\t}\n\n\t\t.home {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&.iphone-x {\n\t\twidth: 375px;\n\t\theight: 812px;\n\t\tpadding: 26px;\n\t\tbackground: #fdfdfd;\n\t\tbox-shadow:inset 0 0 11px 0 black;\n\t\tborder-radius: 66px;\n\n\t\t.overflow {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tborder-radius: 66px;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t.shadow {\n\t\t\tborder-radius: 100%;\n\t\t\twidth: 90px;\n\t\t\theight: 90px;\n\t\t\tposition: absolute;\n\t\t\tbackground: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%,rgba(255,255,255,0) 60%);\n\t\t}\n\n\t\t.shadow--tl {\n\t\t\ttop: -20px;\n\t\t\tleft: -20px;\n\t\t}\n\n\t\t.shadow--tr {\n\t\t\ttop: -20px;\n\t\t\tright: -20px;\n\t\t}\n\n\t\t.shadow--bl {\n\t\t\tbottom: -20px;\n\t\t\tleft: -20px;\n\t\t}\n\n\t\t.shadow--br {\n\t\t\tbottom: -20px;\n\t\t\tright: -20px;\n\t\t}\n\n\t\t&:before{\n\t\t\twidth: calc(100% - 10px);\n\t\t\theight: calc(100% - 10px);\n\t\t\tposition: absolute;\n\t\t\ttop: 5px;\n\t\t\tcontent: '';\n\t\t\tleft: 5px;\n\t\t\tborder-radius: 61px;\n\t\t\tbackground: black;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t.inner-shadow{\n\t\t\twidth: calc(100% - 20px);\n\t\t\theight: calc(100% - 20px);\n\t\t\tposition: absolute;\n\t\t\ttop: 10px;\n\t\t\toverflow: hidden;\n\t\t\tleft: 10px;\n\t\t\tborder-radius: 56px;\n\t\t\tbox-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.66);\n\t\t\tz-index: 1;\n\n\t\t\t&:before{\n\t\t\t\tbox-shadow:inset 0 0 20px 0 #FFFFFF;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 116%;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: -8%;\n\t\t\t\tcontent: '';\n\t\t\t\tleft: 0;\n\t\t\t\tborder-radius: 200px / 112px;\n\t\t\t\tz-index: 2;\n\t\t\t}\n\t\t}\n\n\t\t.screen {\n\t\t\tborder-radius: 40px;\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t.top-bar, .bottom-bar {\n\t\t\twidth: 100%;\n\t\t\tposition: absolute;\n\t\t\theight: 8px;\n\t\t\tbackground: rgba(0, 0, 0, 0.1);\n\t\t\tleft: 0;\n\t\t}\n\n\t\t.top-bar {\n\t\t\ttop: 80px;\n\t\t}\n\n\t\t.bottom-bar {\n\t\t\tbottom: 80px;\n\t\t}\n\n\t\t.volume, .volume:before, .volume:after, .sleep {\n\t\t\twidth: 3px;\n\t\t\tbackground: #b5b5b5;\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t.volume {\n\t\t\tleft: -3px;\n\t\t\ttop: 116px;\n\t\t\theight: 32px;\n\n\t\t\t&:before {\n\t\t\t\theight: 62px;\n\t\t\t\ttop: 62px;\n\t\t\t\tcontent: '';\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&:after {\n\t\t\t\theight: 62px;\n\t\t\t\ttop: 140px;\n\t\t\t\tcontent: '';\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\n\t\t.sleep {\n\t\t\theight: 96px;\n\t\t\ttop: 200px;\n\t\t\tright: -3px;\n\t\t}\n\n\t\t.camera {\n\t\t\twidth: 6px;\n\t\t\theight: 6px;\n\t\t\ttop: 9px;\n\t\t\tborder-radius: 100%;\n\t\t\tposition: absolute;\n\t\t\tleft: 154px;\n\t\t\tbackground: #0d4d71;\n\t\t}\n\n\t\t.speaker {\n\t\t\theight: 6px;\n\t\t\twidth: 60px;\n\t\t\tleft: 50%;\n\t\t\tposition: absolute;\n\t\t\ttop: 9px;\n\t\t\tmargin-left: -30px;\n\t\t\tbackground: #171818;\n\t\t\tborder-radius: 6px;\n\t\t}\n\n\t\t.notch {\n\t\t\tposition: absolute;\n\t\t\twidth: 210px;\n\t\t\theight: 30px;\n\t\t\ttop: 26px;\n\t\t\tleft: 108px;\n\t\t\tz-index: 4;\n\t\t\tbackground: black;\n\t\t\tborder-bottom-left-radius: 24px;\n\t\t    border-bottom-right-radius: 24px;\n\n\t\t    &:before, &:after {\n\t\t\t\tcontent: '';\n\t\t\t\theight: 8px;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\twidth: 8px;\n\t\t    }\n\n\t\t\t&:after {\n\t\t\t\tbackground: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);\n\t\t\t\tleft: -8px;\n\t\t\t}\n\n\t\t\t&:before {\n\t\t\t\tbackground: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);\n\t\t\t\tright: -8px;\n\t\t\t}\n\t\t}\n\n\t\t&.landscape {\n\t\t\theight: 375px;\n\t\t\twidth: 812px;\n\n\t\t\t.top-bar, .bottom-bar {\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 100%;\n\t\t\t\ttop: 0;\n\t\t\t}\n\n\t\t\t.top-bar {\n\t\t\t\tleft: 80px;\n\t\t\t}\n\n\t\t\t.bottom-bar {\n\t\t\t\tright: 80px;\n\t\t\t\tbottom: auto;\n\t\t\t\tleft: auto;\n\t\t\t}\n\n\t\t\t.volume, .volume:before, .volume:after, .sleep {\n\t\t\t\theight: 3px;\n\t\t\t}\n\n\t\t\t.inner-shadow:before {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 116%;\n\t\t\t\tleft: -8%;\n\t\t\t\ttop: 0;\n\t\t\t\tborder-radius: 112px / 200px;\n\t\t\t}\n\n\t\t\t.volume {\n\t\t\t\tbottom: -3px;\n\t\t\t\ttop: auto;\n\t\t\t\tleft: 116px;\n\t\t\t\twidth: 32px;\n\n\t\t\t\t&:before {\n\t\t\t\t\twidth: 62px;\n\t\t\t\t\tleft: 62px;\n\t\t\t\t\ttop: 0;\n\t\t\t\t}\n\n\t\t\t\t&:after {\n\t\t\t\t\twidth: 62px;\n\t\t\t\t\tleft: 140px;\n\t\t\t\t\ttop: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.sleep {\n\t\t\t\twidth: 96px;\n\t\t\t\tleft: 200px;\n\t\t\t\ttop: -3px;\n\t\t\t\tright: auto;\n\t\t\t}\n\n\t\t\t.camera {\n\t\t\t\tleft: 9px;\n\t\t\t\tbottom: 154px;\n\t\t\t\ttop: auto;\n\t\t\t}\n\n\t\t\t.speaker {\n\t\t\t\twidth: 6px;\n\t\t\t\theight: 60px;\n\t\t\t\tleft: 9px;\n\t\t\t\ttop: 50%;\n\t\t\t\tmargin-top: -30px;\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\n\t\t\t.notch {\n\t\t\t\theight: 210px;\n\t\t\t\twidth: 30px;\n\t\t\t\tleft: 26px;\n\t\t\t\tbottom: 108px;\n\t\t\t\ttop: auto;\n\t\t\t\tborder-top-right-radius: 24px;\n\t\t\t    border-bottom-right-radius: 24px;\n\t\t\t    border-bottom-left-radius: 0;\n\n\t\t\t\t&:before, &:after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\n\t\t\t\t&:after {\n\t\t\t\t\tbackground: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);\n\t\t\t\t\tbottom: -8px;\n\t\t\t\t\ttop: auto;\n\t\t\t\t}\n\n\t\t\t\t&:before {\n\t\t\t\t\tbackground: radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);\n\t\t\t\t\ttop: -8px;\n\t\t\t\t}\n\t\t\t}\t\n\t\t}\n\t}\n\n\t&.iphone17 {\n\t\twidth: 375px;\n\t\theight: 812px;\n\t\tpadding: 12px;\n\t\tbackground: linear-gradient(145deg, #4a4a4a 0%, #333333 15%, #252525 50%, #333333 85%, #4a4a4a 100%);\n\t\tborder-radius: 52px;\n\t\tbox-shadow:\n\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.2),\n\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.25),\n\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.5),\n\t\t\t0 0 0 1px rgba(0, 0, 0, 0.4);\n\t\tposition: relative;\n\n\t\t/* Outer frame with metallic gradient */\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 3px;\n\t\t\tleft: 3px;\n\t\t\tright: 3px;\n\t\t\tbottom: 3px;\n\t\t\tborder-radius: 50px;\n\t\t\tbackground: linear-gradient(145deg, #1a1a1a 0%, #111 100%);\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t/* Inner bezel */\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 10px;\n\t\t\tleft: 10px;\n\t\t\tright: 10px;\n\t\t\tbottom: 10px;\n\t\t\tborder-radius: 44px;\n\t\t\tbackground: #000;\n\t\t\tz-index: 2;\n\t\t}\n\n\t\t/* Antenna bands */\n\t\t.antenna {\n\t\t\tposition: absolute;\n\t\t\tz-index: 5;\n\t\t\theight: 3px;\n\t\t\twidth: 12px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\tto right,\n\t\t\t\ttransparent 0%,\n\t\t\t\t#1a1a1a 15%,\n\t\t\t\t#0a0a0a 50%,\n\t\t\t\t#1a1a1a 85%,\n\t\t\t\ttransparent 100%\n\t\t\t);\n\t\t\tborder-radius: 1px;\n\n\t\t\t&.top-left {\n\t\t\t\ttop: 82px;\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&.top-right {\n\t\t\t\ttop: 82px;\n\t\t\t\tright: 0;\n\t\t\t}\n\n\t\t\t&.bottom-left {\n\t\t\t\tbottom: 82px;\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&.bottom-right {\n\t\t\t\tbottom: 82px;\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t}\n\n\t\t/* Corner chamfer highlights */\n\t\t.corner-highlight {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\tpointer-events: none;\n\t\t\twidth: 60px;\n\t\t\theight: 60px;\n\n\t\t\t&.tl {\n\t\t\t\ttop: 6px;\n\t\t\t\tleft: 6px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 100% 100%,\n\t\t\t\t\trgba(255, 255, 255, 0.15) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.06) 30%,\n\t\t\t\t\ttransparent 60%\n\t\t\t\t);\n\t\t\t\tborder-radius: 46px 0 0 0;\n\t\t\t}\n\n\t\t\t&.tr {\n\t\t\t\ttop: 6px;\n\t\t\t\tright: 6px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 0% 100%,\n\t\t\t\t\trgba(255, 255, 255, 0.15) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.06) 30%,\n\t\t\t\t\ttransparent 60%\n\t\t\t\t);\n\t\t\t\tborder-radius: 0 46px 0 0;\n\t\t\t}\n\n\t\t\t&.bl {\n\t\t\t\tbottom: 6px;\n\t\t\t\tleft: 6px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 100% 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.12) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.05) 30%,\n\t\t\t\t\ttransparent 60%\n\t\t\t\t);\n\t\t\t\tborder-radius: 0 0 0 46px;\n\t\t\t}\n\n\t\t\t&.br {\n\t\t\t\tbottom: 6px;\n\t\t\t\tright: 6px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 0% 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.12) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.05) 30%,\n\t\t\t\t\ttransparent 60%\n\t\t\t\t);\n\t\t\t\tborder-radius: 0 0 46px 0;\n\t\t\t}\n\t\t}\n\n\t\t.inner-edge {\n\t\t\tposition: absolute;\n\t\t\ttop: 9px;\n\t\t\tleft: 9px;\n\t\t\tright: 9px;\n\t\t\tbottom: 9px;\n\t\t\tborder-radius: 45px;\n\t\t\tborder: 1px solid rgba(80, 80, 80, 0.5);\n\t\t\tz-index: 1;\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.screen {\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tbackground: #fff;\n\t\t\tborder-radius: 42px;\n\t\t\tz-index: 3;\n\t\t\toverflow: hidden;\n\t\t\tbox-shadow: 0 0 0 2px #000;\n\t\t}\n\n\t\t/* Dynamic Island */\n\t\t.dynamic-island {\n\t\t\tposition: absolute;\n\t\t\ttop: 22px;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t\twidth: 128px;\n\t\t\theight: 29px;\n\t\t\tbackground: #000;\n\t\t\tborder-radius: 15px;\n\t\t\tz-index: 10;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: flex-end;\n\t\t\tpadding-right: 11px;\n\t\t\tgap: 6px;\n\t\t\tbox-sizing: border-box;\n\n\t\t\t.indicator {\n\t\t\t\twidth: 6px;\n\t\t\t\theight: 6px;\n\t\t\t\tbackground: #22c55e;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbox-shadow:\n\t\t\t\t\t0 0 5px #22c55e,\n\t\t\t\t\t0 0 8px rgba(34, 197, 94, 0.5);\n\t\t\t}\n\n\t\t\t.camera {\n\t\t\t\twidth: 11px;\n\t\t\t\theight: 11px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tcircle at 40% 40%,\n\t\t\t\t\t#3a3a4a 0%,\n\t\t\t\t\t#252530 40%,\n\t\t\t\t\t#15151a 70%,\n\t\t\t\t\t#0a0a0f 100%\n\t\t\t\t);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbox-shadow:\n\t\t\t\t\tinset 0 1px 2px rgba(0, 0, 0, 0.8),\n\t\t\t\t\t0 0 0 1px rgba(60, 60, 80, 0.3);\n\t\t\t\tposition: relative;\n\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 2px;\n\t\t\t\t\tleft: 2px;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\theight: 2px;\n\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\tellipse at center,\n\t\t\t\t\t\trgba(100, 100, 150, 0.4) 0%,\n\t\t\t\t\t\ttransparent 100%\n\t\t\t\t\t);\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t}\n\n\t\t\t\t&::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 50%;\n\t\t\t\t\tleft: 50%;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t\twidth: 5px;\n\t\t\t\t\theight: 5px;\n\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\tcircle at center,\n\t\t\t\t\t\trgba(60, 80, 140, 0.35) 0%,\n\t\t\t\t\t\ttransparent 70%\n\t\t\t\t\t);\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Side buttons */\n\t\t.sleep {\n\t\t\tposition: absolute;\n\t\t\ttop: 165px;\n\t\t\tright: -3px;\n\t\t\twidth: 3px;\n\t\t\theight: 85px;\n\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t#5a5a5a 0%,\n\t\t\t\t#454545 8%,\n\t\t\t\t#353535 20%,\n\t\t\t\t#2d2d2d 50%,\n\t\t\t\t#353535 80%,\n\t\t\t\t#454545 92%,\n\t\t\t\t#5a5a5a 100%\n\t\t\t);\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\tz-index: 4;\n\t\t\tbox-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);\n\t\t}\n\n\t\t.action {\n\t\t\tposition: absolute;\n\t\t\ttop: 165px;\n\t\t\tleft: -3px;\n\t\t\twidth: 3px;\n\t\t\theight: 34px;\n\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t#5a5a5a 0%,\n\t\t\t\t#454545 8%,\n\t\t\t\t#353535 20%,\n\t\t\t\t#2d2d2d 50%,\n\t\t\t\t#353535 80%,\n\t\t\t\t#454545 92%,\n\t\t\t\t#5a5a5a 100%\n\t\t\t);\n\t\t\tborder-radius: 2px 0 0 2px;\n\t\t\tz-index: 4;\n\t\t\tbox-shadow: -1px 0 2px rgba(0, 0, 0, 0.3);\n\t\t}\n\n\t\t.volume {\n\t\t\tposition: absolute;\n\t\t\ttop: 215px;\n\t\t\tleft: -3px;\n\t\t\twidth: 3px;\n\t\t\theight: 58px;\n\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t#5a5a5a 0%,\n\t\t\t\t#454545 8%,\n\t\t\t\t#353535 20%,\n\t\t\t\t#2d2d2d 50%,\n\t\t\t\t#353535 80%,\n\t\t\t\t#454545 92%,\n\t\t\t\t#5a5a5a 100%\n\t\t\t);\n\t\t\tborder-radius: 2px 0 0 2px;\n\t\t\tz-index: 4;\n\t\t\tbox-shadow: -1px 0 2px rgba(0, 0, 0, 0.3);\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 70px;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 3px;\n\t\t\t\theight: 58px;\n\t\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t\t#5a5a5a 0%,\n\t\t\t\t\t#454545 8%,\n\t\t\t\t\t#353535 20%,\n\t\t\t\t\t#2d2d2d 50%,\n\t\t\t\t\t#353535 80%,\n\t\t\t\t\t#454545 92%,\n\t\t\t\t\t#5a5a5a 100%\n\t\t\t\t);\n\t\t\t\tborder-radius: 2px 0 0 2px;\n\t\t\t\tbox-shadow: -1px 0 2px rgba(0, 0, 0, 0.3);\n\t\t\t}\n\t\t}\n\n\t\t.camera-control {\n\t\t\tposition: absolute;\n\t\t\ttop: 380px;\n\t\t\tright: -3px;\n\t\t\twidth: 3px;\n\t\t\theight: 42px;\n\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t#5a5a5a 0%,\n\t\t\t\t#454545 8%,\n\t\t\t\t#353535 20%,\n\t\t\t\t#2d2d2d 50%,\n\t\t\t\t#353535 80%,\n\t\t\t\t#454545 92%,\n\t\t\t\t#5a5a5a 100%\n\t\t\t);\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\tz-index: 4;\n\t\t\tbox-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);\n\t\t}\n\n\t\t/* Hide unused elements */\n\t\t.top-bar, .bottom-bar, .home, .sensor, .speaker, .sensors, .more-sensors, .inner, .inner-shadow {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* White / Starlight */\n\t\t&.white {\n\t\t\tbackground: linear-gradient(145deg, #fafaf7 0%, #e8e8e3 15%, #d8d8d3 50%, #e8e8e3 85%, #fafaf7 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.95),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 1),\n\t\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.2),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.06);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #d0d0cb 0%, #c0c0bb 100%);\n\t\t\t}\n\n\t\t\t.antenna {\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t#a0a09b 15%,\n\t\t\t\t\t#888883 50%,\n\t\t\t\t\t#a0a09b 85%,\n\t\t\t\t\ttransparent 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\t&.bl, &.br {\n\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\tellipse at 50% 0%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.6) 0%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.2) 40%,\n\t\t\t\t\t\ttransparent 70%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t&.tl, &.tr {\n\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\tellipse at 50% 100%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.7) 0%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.25) 40%,\n\t\t\t\t\t\ttransparent 70%\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(180, 180, 175, 0.6);\n\t\t\t}\n\n\t\t\t.sleep, .camera-control, .action, .volume {\n\t\t\t\tbackground: linear-gradient(to bottom, #f0f0eb 0%, #d8d8d3 15%, #c8c8c3 50%, #d8d8d3 85%, #f0f0eb 100%);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #f0f0eb 0%, #d8d8d3 15%, #c8c8c3 50%, #d8d8d3 85%, #f0f0eb 100%);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Mist Blue */\n\t\t&.mist-blue {\n\t\t\tbackground: linear-gradient(145deg, #c8d5e0 0%, #a8bac8 15%, #95a8b8 50%, #a8bac8 85%, #c8d5e0 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.55),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.65),\n\t\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.28),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.1);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #8598a8 0%, #758898 100%);\n\t\t\t}\n\n\t\t\t.antenna {\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t#6a7a8a 15%,\n\t\t\t\t\t#5a6a7a 50%,\n\t\t\t\t\t#6a7a8a 85%,\n\t\t\t\t\ttransparent 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\topacity: 0.7;\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(120, 140, 160, 0.5);\n\t\t\t}\n\n\t\t\t.sleep, .camera-control, .action, .volume {\n\t\t\t\tbackground: linear-gradient(to bottom, #bccad5 0%, #a0b2c2 15%, #90a5b5 50%, #a0b2c2 85%, #bccad5 100%);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #bccad5 0%, #a0b2c2 15%, #90a5b5 50%, #a0b2c2 85%, #bccad5 100%);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Sage */\n\t\t&.sage {\n\t\t\tbackground: linear-gradient(145deg, #c5d4c0 0%, #a5b8a1 15%, #94a890 50%, #a5b8a1 85%, #c5d4c0 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.55),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.65),\n\t\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.28),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.1);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #859884 0%, #758874 100%);\n\t\t\t}\n\n\t\t\t.antenna {\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t#6a7a69 15%,\n\t\t\t\t\t#5a6a59 50%,\n\t\t\t\t\t#6a7a69 85%,\n\t\t\t\t\ttransparent 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\topacity: 0.7;\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(120, 150, 115, 0.5);\n\t\t\t}\n\n\t\t\t.sleep, .camera-control, .action, .volume {\n\t\t\t\tbackground: linear-gradient(to bottom, #b8cab5 0%, #9eb89a 15%, #8ea88a 50%, #9eb89a 85%, #b8cab5 100%);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #b8cab5 0%, #9eb89a 15%, #8ea88a 50%, #9eb89a 85%, #b8cab5 100%);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Lavender */\n\t\t&.lavender {\n\t\t\tbackground: linear-gradient(145deg, #e0d2e8 0%, #c5b5d2 15%, #b5a2c2 50%, #c5b5d2 85%, #e0d2e8 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.55),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.65),\n\t\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.28),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.1);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #9c8cac 0%, #8c7c9c 100%);\n\t\t\t}\n\n\t\t\t.antenna {\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t#7c6c8c 15%,\n\t\t\t\t\t#6c5c7c 50%,\n\t\t\t\t\t#7c6c8c 85%,\n\t\t\t\t\ttransparent 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\topacity: 0.7;\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(150, 130, 165, 0.5);\n\t\t\t}\n\n\t\t\t.sleep, .camera-control, .action, .volume {\n\t\t\t\tbackground: linear-gradient(to bottom, #d2c5dc 0%, #baa8ca 15%, #aa98ba 50%, #baa8ca 85%, #d2c5dc 100%);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #d2c5dc 0%, #baa8ca 15%, #aa98ba 50%, #baa8ca 85%, #d2c5dc 100%);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Cosmic Orange */\n\t\t&.cosmic-orange {\n\t\t\tbackground: linear-gradient(145deg, #f9a66d 0%, #f6823d 15%, #e5712c 50%, #f6823d 85%, #f9a66d 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.55),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.65),\n\t\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.28),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.1);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #c5612a 0%, #b55520 100%);\n\t\t\t}\n\n\t\t\t.antenna {\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t#a54a1a 15%,\n\t\t\t\t\t#8a3a10 50%,\n\t\t\t\t\t#a54a1a 85%,\n\t\t\t\t\ttransparent 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\topacity: 0.7;\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(180, 100, 60, 0.5);\n\t\t\t}\n\n\t\t\t.sleep, .camera-control, .action, .volume {\n\t\t\t\tbackground: linear-gradient(to bottom, #f8955a 0%, #f6823d 15%, #e5712c 50%, #f6823d 85%, #f8955a 100%);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #f8955a 0%, #f6823d 15%, #e5712c 50%, #f6823d 85%, #f8955a 100%);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Deep Blue */\n\t\t&.deep-blue {\n\t\t\tbackground: linear-gradient(145deg, #6a7499 0%, #4a547f 15%, #3a446f 50%, #4a547f 85%, #6a7499 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.35),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.45),\n\t\t\t\t0 30px 60px -15px rgba(0, 0, 0, 0.4),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.2);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #3a446a 0%, #2a345a 100%);\n\t\t\t}\n\n\t\t\t.antenna {\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t#2a345a 15%,\n\t\t\t\t\t#1a244a 50%,\n\t\t\t\t\t#2a345a 85%,\n\t\t\t\t\ttransparent 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\topacity: 0.5;\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(80, 90, 120, 0.5);\n\t\t\t}\n\n\t\t\t.sleep, .camera-control, .action, .volume {\n\t\t\t\tbackground: linear-gradient(to bottom, #5a6489 0%, #4a547f 15%, #3a446f 50%, #4a547f 85%, #5a6489 100%);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #5a6489 0%, #4a547f 15%, #3a446f 50%, #4a547f 85%, #5a6489 100%);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Landscape mode */\n\t\t&.landscape {\n\t\t\theight: 375px;\n\t\t\twidth: 812px;\n\t\t\tpadding: 12px;\n\n\t\t\t.antenna {\n\t\t\t\t&.top-left {\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 82px;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t\tto bottom,\n\t\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t\t#1a1a1a 15%,\n\t\t\t\t\t\t#0a0a0a 50%,\n\t\t\t\t\t\t#1a1a1a 85%,\n\t\t\t\t\t\ttransparent 100%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t&.top-right {\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tright: 82px;\n\t\t\t\t\tleft: auto;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t\tto bottom,\n\t\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t\t#1a1a1a 15%,\n\t\t\t\t\t\t#0a0a0a 50%,\n\t\t\t\t\t\t#1a1a1a 85%,\n\t\t\t\t\t\ttransparent 100%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t&.bottom-left {\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tleft: 82px;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t\tto bottom,\n\t\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t\t#1a1a1a 15%,\n\t\t\t\t\t\t#0a0a0a 50%,\n\t\t\t\t\t\t#1a1a1a 85%,\n\t\t\t\t\t\ttransparent 100%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t&.bottom-right {\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tright: 82px;\n\t\t\t\t\tleft: auto;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t\tto bottom,\n\t\t\t\t\t\ttransparent 0%,\n\t\t\t\t\t\t#1a1a1a 15%,\n\t\t\t\t\t\t#0a0a0a 50%,\n\t\t\t\t\t\t#1a1a1a 85%,\n\t\t\t\t\t\ttransparent 100%\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.dynamic-island {\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: -28px;\n\t\t\t\ttransform: translateY(-50%) rotate(90deg);\n\t\t\t}\n\n\t\t\t.sleep {\n\t\t\t\ttop: -3px;\n\t\t\t\tleft: 165px;\n\t\t\t\tright: auto;\n\t\t\t\twidth: 85px;\n\t\t\t\theight: 3px;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t\tbox-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);\n\t\t\t}\n\n\t\t\t.action {\n\t\t\t\tbottom: -3px;\n\t\t\t\tleft: 165px;\n\t\t\t\ttop: auto;\n\t\t\t\twidth: 34px;\n\t\t\t\theight: 3px;\n\t\t\t\tborder-radius: 0 0 2px 2px;\n\t\t\t\tbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n\t\t\t}\n\n\t\t\t.volume {\n\t\t\t\tbottom: -3px;\n\t\t\t\tleft: 215px;\n\t\t\t\ttop: auto;\n\t\t\t\twidth: 58px;\n\t\t\t\theight: 3px;\n\t\t\t\tborder-radius: 0 0 2px 2px;\n\t\t\t\tbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n\n\t\t\t\t&::before {\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 70px;\n\t\t\t\t\twidth: 58px;\n\t\t\t\t\theight: 3px;\n\t\t\t\t\tborder-radius: 0 0 2px 2px;\n\t\t\t\t\tbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.camera-control {\n\t\t\t\ttop: -3px;\n\t\t\t\tleft: 380px;\n\t\t\t\tright: auto;\n\t\t\t\twidth: 42px;\n\t\t\t\theight: 3px;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t\tbox-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);\n\t\t\t}\n\t\t}\n\t}\n\n\t/* ============================================\n\t   \t\t\tiPAD PRO \n\t   ============================================ */\n\n\t&.ipad-pro {\n\t\twidth: 512px;\n\t\theight: 683px;\n\t\tpadding: 18px;\n\t\tbackground: linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 15%, #1e1e1e 50%, #2a2a2a 85%, #3a3a3a 100%);\n\t\tborder-radius: 36px;\n\t\tbox-shadow:\n\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.15),\n\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 0.2),\n\t\t\t0 40px 80px -20px rgba(0, 0, 0, 0.5),\n\t\t\t0 0 0 1px rgba(0, 0, 0, 0.3);\n\t\tposition: relative;\n\n\t\t/* Outer frame */\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tleft: 4px;\n\t\t\tright: 4px;\n\t\t\tbottom: 4px;\n\t\t\tborder-radius: 33px;\n\t\t\tbackground: linear-gradient(145deg, #1a1a1a 0%, #111 100%);\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t/* Inner bezel */\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 14px;\n\t\t\tleft: 14px;\n\t\t\tright: 14px;\n\t\t\tbottom: 14px;\n\t\t\tborder-radius: 26px;\n\t\t\tbackground: #000;\n\t\t\tz-index: 2;\n\t\t}\n\n\t\t/* Front camera */\n\t\t.camera {\n\t\t\tposition: absolute;\n\t\t\ttop: 24px;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t\twidth: 8px;\n\t\t\theight: 8px;\n\t\t\tbackground: radial-gradient(\n\t\t\t\tcircle at 35% 35%,\n\t\t\t\t#2a2a3a 0%,\n\t\t\t\t#1a1a25 50%,\n\t\t\t\t#0a0a10 100%\n\t\t\t);\n\t\t\tborder-radius: 50%;\n\t\t\tz-index: 10;\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 1px 2px rgba(0, 0, 0, 0.8),\n\t\t\t\t0 0 0 1px rgba(50, 50, 60, 0.4);\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 1px;\n\t\t\t\tleft: 2px;\n\t\t\t\twidth: 2px;\n\t\t\t\theight: 2px;\n\t\t\t\tbackground: rgba(100, 100, 150, 0.4);\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\n\t\t/* Power button - Top right */\n\t\t.sleep {\n\t\t\tposition: absolute;\n\t\t\ttop: -3px;\n\t\t\tright: 80px;\n\t\t\twidth: 50px;\n\t\t\theight: 3px;\n\t\t\tbackground: linear-gradient(to right,\n\t\t\t\t#4a4a4a 0%,\n\t\t\t\t#3a3a3a 10%,\n\t\t\t\t#2a2a2a 50%,\n\t\t\t\t#3a3a3a 90%,\n\t\t\t\t#4a4a4a 100%\n\t\t\t);\n\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\tz-index: 4;\n\t\t}\n\n\t\t/* Volume up - Right side */\n\t\t.volume-up {\n\t\t\tposition: absolute;\n\t\t\ttop: 80px;\n\t\t\tright: -3px;\n\t\t\twidth: 3px;\n\t\t\theight: 45px;\n\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t#4a4a4a 0%,\n\t\t\t\t#3a3a3a 10%,\n\t\t\t\t#2a2a2a 50%,\n\t\t\t\t#3a3a3a 90%,\n\t\t\t\t#4a4a4a 100%\n\t\t\t);\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\tz-index: 4;\n\t\t}\n\n\t\t/* Volume down - Right side */\n\t\t.volume-down {\n\t\t\tposition: absolute;\n\t\t\ttop: 135px;\n\t\t\tright: -3px;\n\t\t\twidth: 3px;\n\t\t\theight: 45px;\n\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t#4a4a4a 0%,\n\t\t\t\t#3a3a3a 10%,\n\t\t\t\t#2a2a2a 50%,\n\t\t\t\t#3a3a3a 90%,\n\t\t\t\t#4a4a4a 100%\n\t\t\t);\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\tz-index: 4;\n\t\t}\n\n\t\t/* Corner highlights */\n\t\t.corner-highlight {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\tpointer-events: none;\n\t\t\twidth: 50px;\n\t\t\theight: 50px;\n\n\t\t\t&.tl {\n\t\t\t\ttop: 8px;\n\t\t\t\tleft: 8px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 100% 100%,\n\t\t\t\t\trgba(255, 255, 255, 0.12) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.04) 40%,\n\t\t\t\t\ttransparent 70%\n\t\t\t\t);\n\t\t\t\tborder-radius: 30px 0 0 0;\n\t\t\t}\n\n\t\t\t&.tr {\n\t\t\t\ttop: 8px;\n\t\t\t\tright: 8px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 0% 100%,\n\t\t\t\t\trgba(255, 255, 255, 0.12) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.04) 40%,\n\t\t\t\t\ttransparent 70%\n\t\t\t\t);\n\t\t\t\tborder-radius: 0 30px 0 0;\n\t\t\t}\n\n\t\t\t&.bl {\n\t\t\t\tbottom: 8px;\n\t\t\t\tleft: 8px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 100% 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.08) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.03) 40%,\n\t\t\t\t\ttransparent 70%\n\t\t\t\t);\n\t\t\t\tborder-radius: 0 0 0 30px;\n\t\t\t}\n\n\t\t\t&.br {\n\t\t\t\tbottom: 8px;\n\t\t\t\tright: 8px;\n\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\tellipse at 0% 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.08) 0%,\n\t\t\t\t\trgba(255, 255, 255, 0.03) 40%,\n\t\t\t\t\ttransparent 70%\n\t\t\t\t);\n\t\t\t\tborder-radius: 0 0 30px 0;\n\t\t\t}\n\t\t}\n\n\t\t/* Inner edge */\n\t\t.inner-edge {\n\t\t\tposition: absolute;\n\t\t\ttop: 13px;\n\t\t\tleft: 13px;\n\t\t\tright: 13px;\n\t\t\tbottom: 13px;\n\t\t\tborder-radius: 27px;\n\t\t\tborder: 1px solid rgba(70, 70, 70, 0.4);\n\t\t\tz-index: 1;\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Screen */\n\t\t.screen {\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tbackground: #fff;\n\t\t\tborder-radius: 22px;\n\t\t\tz-index: 3;\n\t\t\toverflow: hidden;\n\t\t\tbox-shadow: 0 0 0 2px #000;\n\t\t}\n\n\t\t/* Hide unused elements */\n\t\t.top-bar, .bottom-bar, .home, .sensor, .speaker, .sensors, .more-sensors, .inner, .inner-shadow, .volume {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Silver variant */\n\t\t&.silver {\n\t\t\tbackground: linear-gradient(145deg, #e8e8e8 0%, #d0d0d0 15%, #c0c0c0 50%, #d0d0d0 85%, #e8e8e8 100%);\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 0 0 1px rgba(255, 255, 255, 0.9),\n\t\t\t\tinset 0 1px 0 0 rgba(255, 255, 255, 1),\n\t\t\t\t0 40px 80px -20px rgba(0, 0, 0, 0.25),\n\t\t\t\t0 0 0 1px rgba(0, 0, 0, 0.08);\n\n\t\t\t&::before {\n\t\t\t\tbackground: linear-gradient(145deg, #b8b8b8 0%, #a8a8a8 100%);\n\t\t\t}\n\n\t\t\t.corner-highlight {\n\t\t\t\t&.tl, &.tr {\n\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\tellipse at 50% 100%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.7) 0%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.2) 50%,\n\t\t\t\t\t\ttransparent 80%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t&.bl, &.br {\n\t\t\t\t\tbackground: radial-gradient(\n\t\t\t\t\t\tellipse at 50% 0%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.5) 0%,\n\t\t\t\t\t\trgba(255, 255, 255, 0.15) 50%,\n\t\t\t\t\t\ttransparent 80%\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.inner-edge {\n\t\t\t\tborder-color: rgba(160, 160, 160, 0.5);\n\t\t\t}\n\n\t\t\t.sleep {\n\t\t\t\tbackground: linear-gradient(to right,\n\t\t\t\t\t#e0e0e0 0%,\n\t\t\t\t\t#c8c8c8 10%,\n\t\t\t\t\t#b8b8b8 50%,\n\t\t\t\t\t#c8c8c8 90%,\n\t\t\t\t\t#e0e0e0 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.volume-up, .volume-down {\n\t\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t\t#e0e0e0 0%,\n\t\t\t\t\t#c8c8c8 10%,\n\t\t\t\t\t#b8b8b8 50%,\n\t\t\t\t\t#c8c8c8 90%,\n\t\t\t\t\t#e0e0e0 100%\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\t/* Landscape mode */\n\t\t&.landscape {\n\t\t\twidth: 683px;\n\t\t\theight: 512px;\n\n\t\t\t/* Camera moves to left side in landscape */\n\t\t\t.camera {\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 24px;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t}\n\n\t\t\t/* Power button moves to right edge */\n\t\t\t.sleep {\n\t\t\t\ttop: 80px;\n\t\t\t\tright: -3px;\n\t\t\t\tleft: auto;\n\t\t\t\twidth: 3px;\n\t\t\t\theight: 50px;\n\t\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t\t#4a4a4a 0%,\n\t\t\t\t\t#3a3a3a 10%,\n\t\t\t\t\t#2a2a2a 50%,\n\t\t\t\t\t#3a3a3a 90%,\n\t\t\t\t\t#4a4a4a 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t/* Volume buttons move to top edge */\n\t\t\t.volume-up {\n\t\t\t\ttop: -3px;\n\t\t\t\tright: auto;\n\t\t\t\tleft: 80px;\n\t\t\t\twidth: 45px;\n\t\t\t\theight: 3px;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t\tbackground: linear-gradient(to right,\n\t\t\t\t\t#4a4a4a 0%,\n\t\t\t\t\t#3a3a3a 10%,\n\t\t\t\t\t#2a2a2a 50%,\n\t\t\t\t\t#3a3a3a 90%,\n\t\t\t\t\t#4a4a4a 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t.volume-down {\n\t\t\t\ttop: -3px;\n\t\t\t\tright: auto;\n\t\t\t\tleft: 135px;\n\t\t\t\twidth: 45px;\n\t\t\t\theight: 3px;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t\tbackground: linear-gradient(to right,\n\t\t\t\t\t#4a4a4a 0%,\n\t\t\t\t\t#3a3a3a 10%,\n\t\t\t\t\t#2a2a2a 50%,\n\t\t\t\t\t#3a3a3a 90%,\n\t\t\t\t\t#4a4a4a 100%\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t/* Silver landscape buttons */\n\t\t\t&.silver {\n\t\t\t\t.sleep {\n\t\t\t\t\tbackground: linear-gradient(to bottom,\n\t\t\t\t\t\t#e0e0e0 0%,\n\t\t\t\t\t\t#c8c8c8 10%,\n\t\t\t\t\t\t#b8b8b8 50%,\n\t\t\t\t\t\t#c8c8c8 90%,\n\t\t\t\t\t\t#e0e0e0 100%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t.volume-up, .volume-down {\n\t\t\t\t\tbackground: linear-gradient(to right,\n\t\t\t\t\t\t#e0e0e0 0%,\n\t\t\t\t\t\t#c8c8c8 10%,\n\t\t\t\t\t\t#b8b8b8 50%,\n\t\t\t\t\t\t#c8c8c8 90%,\n\t\t\t\t\t\t#e0e0e0 100%\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* ===========================================\n\t   \t\t\t\tMacBook Pro \n\t   =========================================== */\n\n\t&.macbook-pro {\n\t\twidth: 960px;\n\t\theight: 600px;\n\t\tpadding: 24px 24px 0;\n\t\tmargin: 0 auto;\n\t\tbackground: #333;\n\t\tborder-radius: 20px 20px 0 0;\n\n\t\t/* Inner dark bezel */\n\t\t&::before {\n\t\t\twidth: calc(100% - 8px);\n\t\t\theight: calc(100% - 4px);\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 4px;\n\t\t\tleft: 4px;\n\t\t\tborder-radius: 16px 16px 0 0;\n\t\t\tbackground: #0d0d0d;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t.screen {\n\t\t\tborder-radius: 10px 10px 0 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t/* Notch - Camera housing */\n\t\t.notch {\n\t\t\tposition: absolute;\n\t\t\twidth: 180px;\n\t\t\theight: 24px;\n\t\t\ttop: 24px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -90px;\n\t\t\tz-index: 4;\n\t\t\tbackground: #0d0d0d;\n\t\t\tborder-bottom-left-radius: 16px;\n\t\t\tborder-bottom-right-radius: 16px;\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\theight: 8px;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\twidth: 8px;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tbackground: radial-gradient(circle at bottom left, transparent 0, transparent 70%, #0d0d0d 70%, #0d0d0d 100%);\n\t\t\t\tleft: -8px;\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\tbackground: radial-gradient(circle at bottom right, transparent 0, transparent 70%, #0d0d0d 70%, #0d0d0d 100%);\n\t\t\t\tright: -8px;\n\t\t\t}\n\n\t\t\t.camera {\n\t\t\t\tbackground: #3c3d3d;\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 8px;\n\t\t\t\tleft: 50%;\n\t\t\t\tmargin-left: -4px;\n\t\t\t\tborder-radius: 100%;\n\t\t\t\tz-index: 5;\n\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\twidth: 4px;\n\t\t\t\t\theight: 4px;\n\t\t\t\t\tbackground: radial-gradient(circle at 30% 30%, #1a1a2a 0%, #0a0a10 100%);\n\t\t\t\t\tborder-radius: 100%;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 50%;\n\t\t\t\t\tleft: 50%;\n\t\t\t\t\tmargin-top: -2px;\n\t\t\t\t\tmargin-left: -2px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Keyboard hinge / base */\n\t\t.top-bar {\n\t\t\twidth: calc(100% + 2 * 70px);\n\t\t\theight: 40px;\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 624px;\n\t\t\tleft: -70px;\n\t\t\tborder-bottom-left-radius: 90px 18px;\n\t\t\tborder-bottom-right-radius: 90px 18px;\n\t\t\tbackground: #333;\n\t\t\tbox-shadow: inset 0px -4px 13px 3px rgba(0, 0, 0, 0.6);\n\n\t\t\t&::before {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 10px;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tbackground: linear-gradient(to bottom, #444 0%, #2a2a2a 100%);\n\t\t\t\tborder-bottom: 1px solid #1a1a1a;\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\twidth: 14%;\n\t\t\t\theight: 6px;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 10px;\n\t\t\t\tbackground: #222;\n\t\t\t\tposition: absolute;\n\t\t\t\tmargin-left: auto;\n\t\t\t\tmargin-right: auto;\n\t\t\t\tleft: 0;\n\t\t\t\tright: 0;\n\t\t\t\tborder-radius: 0 0 10px 10px;\n\t\t\t\tbox-shadow: inset 0px -2px 6px rgba(0, 0, 0, 0.6);\n\t\t\t}\n\t\t}\n\n\t\t/* Side feet */\n\t\t.bottom-bar {\n\t\t\tbackground: transparent;\n\t\t\twidth: calc(100% + 2 * 70px);\n\t\t\theight: 26px;\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 624px;\n\t\t\tleft: -70px;\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\theight: calc(100% - 2px);\n\t\t\t\twidth: 80px;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tposition: absolute;\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\tleft: 0;\n\t\t\t\tbackground: linear-gradient(to right, #2a2a2a 0%, #444 5%, #555 14%, #3a3a3a 41%, #4a4a4a 80%, #4a4a4a 100%);\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tright: 0;\n\t\t\t\tbackground: linear-gradient(to right, #4a4a4a 0%, #4a4a4a 20%, #3a3a3a 59%, #555 86%, #444 95%, #2a2a2a 100%);\n\t\t\t}\n\t\t}\n\n\t\t.home {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Hide other unused elements */\n\t\t.volume,\n\t\t.sleep,\n\t\t.sensor,\n\t\t.speaker,\n\t\t.sensors,\n\t\t.more-sensors,\n\t\t.inner-shadow,\n\t\t.inner {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Silver color variant */\n\t\t&.silver {\n\t\t\tbackground: #c5c5c5;\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0d0d0d;\n\t\t\t}\n\n\t\t\t.notch {\n\t\t\t\tbackground: #0d0d0d;\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground: radial-gradient(circle at bottom left, transparent 0, transparent 70%, #0d0d0d 70%, #0d0d0d 100%);\n\t\t\t\t}\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: radial-gradient(circle at bottom right, transparent 0, transparent 70%, #0d0d0d 70%, #0d0d0d 100%);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.top-bar {\n\t\t\t\tbackground: #c5c5c5;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: linear-gradient(to bottom, #d8d8d8 0%, #b5b5b5 100%);\n\t\t\t\t\tborder-bottom-color: #a0a0a0;\n\t\t\t\t}\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground: #a0a0a0;\n\t\t\t\t\tbox-shadow: inset 0px -2px 6px rgba(0, 0, 0, 0.3);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.bottom-bar::before {\n\t\t\t\tbackground: linear-gradient(to right, #909090 0%, #b5b5b5 5%, #d0d0d0 14%, #a5a5a5 41%, #c0c0c0 80%, #c0c0c0 100%);\n\t\t\t}\n\n\t\t\t.bottom-bar::after {\n\t\t\t\tbackground: linear-gradient(to right, #c0c0c0 0%, #c0c0c0 20%, #a5a5a5 59%, #d0d0d0 86%, #b5b5b5 95%, #909090 100%);\n\t\t\t}\n\t\t}\n\t}\n\n\t/* ===========================================\n\t   \t\t\tGOOGLE PIXEL 10\n\t   =========================================== */\n\n\t&.pixel10 {\n\t\twidth: 412px;\n\t\theight: 915px;\n\t\tpadding: 12px;\n\t\tbackground: #1a1a1a;\n\t\tborder-radius: 48px;\n\n\t\t/* Inner frame */\n\t\t&::before {\n\t\t\twidth: calc(100% - 8px);\n\t\t\theight: calc(100% - 8px);\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 4px;\n\t\t\tleft: 4px;\n\t\t\tborder-radius: 44px;\n\t\t\tbackground: #0d0d0d;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t/* Subtle inner glow */\n\t\t&::after {\n\t\t\twidth: calc(100% - 16px);\n\t\t\theight: calc(100% - 16px);\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 8px;\n\t\t\tleft: 8px;\n\t\t\tborder-radius: 40px;\n\t\t\tbox-shadow: inset 0 0 8px 0 rgba(255, 255, 255, 0.05);\n\t\t\tz-index: 2;\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.screen {\n\t\t\tborder-radius: 38px;\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t/* Punch-hole camera - top center */\n\t\t.camera {\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t\tposition: absolute;\n\t\t\ttop: 24px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -6px;\n\t\t\tbackground: #101010;\n\t\t\tborder-radius: 100%;\n\t\t\tz-index: 5;\n\t\t\tbox-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\twidth: 6px;\n\t\t\t\theight: 6px;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 3px;\n\t\t\t\tbackground: radial-gradient(circle at 30% 30%, #2a2a3a 0%, #0a0a10 100%);\n\t\t\t\tborder-radius: 100%;\n\t\t\t}\n\t\t}\n\n\t\t/* Power button - right side */\n\t\t.sleep {\n\t\t\twidth: 3px;\n\t\t\theight: 72px;\n\t\t\tposition: absolute;\n\t\t\ttop: 180px;\n\t\t\tright: -3px;\n\t\t\tbackground: #1a1a1a;\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t}\n\n\t\t/* Volume rocker - right side */\n\t\t.volume {\n\t\t\twidth: 3px;\n\t\t\theight: 100px;\n\t\t\tposition: absolute;\n\t\t\ttop: 260px;\n\t\t\tright: -3px;\n\t\t\tbackground: #1a1a1a;\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t}\n\n\t\t.top-bar,\n\t\t.bottom-bar,\n\t\t.sensor,\n\t\t.speaker,\n\t\t.sensors,\n\t\t.more-sensors,\n\t\t.inner-shadow,\n\t\t.home,\n\t\t.inner {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Porcelain (White) */\n\t\t&.porcelain {\n\t\t\tbackground: #e8e5e1;\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0d0d0d;\n\t\t\t}\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #d5d2ce;\n\t\t\t}\n\t\t}\n\n\t\t/* Mint */\n\t\t&.mint {\n\t\t\tbackground: #afdbc5;\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0d0d0d;\n\t\t\t}\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #9bcdb5;\n\t\t\t}\n\t\t}\n\n\t\t/* Rose */\n\t\t&.rose {\n\t\t\tbackground: #e8c4c4;\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0d0d0d;\n\t\t\t}\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #dab5b5;\n\t\t\t}\n\t\t}\n\n\t\t/* Landscape mode */\n\t\t&.landscape {\n\t\t\twidth: 915px;\n\t\t\theight: 412px;\n\n\t\t\t.camera {\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 24px;\n\t\t\t\tmargin-top: -6px;\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\n\t\t\t.sleep {\n\t\t\t\theight: 3px;\n\t\t\t\twidth: 72px;\n\t\t\t\ttop: -3px;\n\t\t\t\tleft: 180px;\n\t\t\t\tright: auto;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t}\n\n\t\t\t.volume {\n\t\t\t\theight: 3px;\n\t\t\t\twidth: 100px;\n\t\t\t\ttop: -3px;\n\t\t\t\tleft: 260px;\n\t\t\t\tright: auto;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t/* ===========================================\n\t   \t\t\tSAMSUNG GALAXY S25\n\t   =========================================== */\n\n\t&.galaxy-s25 {\n\t\twidth: 412px;\n\t\theight: 892px;\n\t\tpadding: 10px;\n\t\tbackground: #1e1e1e;\n\t\tborder-radius: 42px;\n\t\tbox-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.15);\n\n\t\t/* Metal frame effect */\n\t\t&::before {\n\t\t\twidth: calc(100% - 6px);\n\t\t\theight: calc(100% - 6px);\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\ttop: 3px;\n\t\t\tleft: 3px;\n\t\t\tborder-radius: 40px;\n\t\t\tbackground: #0a0a0a;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t/* Inner bezel */\n\t\t.inner {\n\t\t\twidth: 100%;\n\t\t\theight: calc(100% - 4px);\n\t\t\tposition: absolute;\n\t\t\ttop: 2px;\n\t\t\tleft: 0;\n\t\t\tborder-radius: 42px;\n\t\t\tborder-top: 2px solid rgba(255, 255, 255, 0.1);\n\t\t\tborder-bottom: 2px solid rgba(255, 255, 255, 0.1);\n\t\t\tbackground: transparent;\n\t\t\tz-index: 1;\n\t\t\tbox-shadow: inset 0 0 4px 0 rgba(255, 255, 255, 0.1);\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.screen {\n\t\t\tborder-radius: 36px;\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t/* Punch-hole camera - top center */\n\t\t.camera {\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tposition: absolute;\n\t\t\ttop: 22px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -5px;\n\t\t\tbackground: #050505;\n\t\t\tborder-radius: 100%;\n\t\t\tz-index: 5;\n\t\t\tbox-shadow: 0 0 0 2px #0a0a0a;\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\twidth: 5px;\n\t\t\t\theight: 5px;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 2.5px;\n\t\t\t\tleft: 2.5px;\n\t\t\t\tbackground: radial-gradient(circle at 30% 30%, #1a1a2a 0%, #050510 100%);\n\t\t\t\tborder-radius: 100%;\n\t\t\t}\n\t\t}\n\n\t\t/* Speaker grille - top */\n\t\t.speaker {\n\t\t\twidth: 40px;\n\t\t\theight: 4px;\n\t\t\tposition: absolute;\n\t\t\ttop: 14px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -20px;\n\t\t\tbackground: #0a0a0a;\n\t\t\tborder-radius: 4px;\n\t\t\tz-index: 4;\n\t\t}\n\n\t\t/* Power button */\n\t\t.sleep {\n\t\t\twidth: 3px;\n\t\t\theight: 54px;\n\t\t\tposition: absolute;\n\t\t\ttop: 220px;\n\t\t\tright: -3px;\n\t\t\tbackground: #2a2a2a;\n\t\t\tborder-radius: 0 2px 2px 0;\n\t\t}\n\n\t\t/* Volume buttons - left side */\n\t\t.volume {\n\t\t\twidth: 3px;\n\t\t\theight: 80px;\n\t\t\tposition: absolute;\n\t\t\ttop: 180px;\n\t\t\tleft: -3px;\n\t\t\tbackground: #2a2a2a;\n\t\t\tborder-radius: 2px 0 0 2px;\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\twidth: 3px;\n\t\t\t\theight: 80px;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 100px;\n\t\t\t\tleft: 0;\n\t\t\t\tbackground: inherit;\n\t\t\t\tborder-radius: 2px 0 0 2px;\n\t\t\t}\n\t\t}\n\n\t\t.top-bar,\n\t\t.bottom-bar,\n\t\t.sensor,\n\t\t.sensors,\n\t\t.more-sensors,\n\t\t.inner-shadow,\n\t\t.home {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Shadow overlay for depth */\n\t\t.overflow {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tborder-radius: 42px;\n\t\t\toverflow: hidden;\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.shadow {\n\t\t\tborder-radius: 100%;\n\t\t\twidth: 80px;\n\t\t\theight: 80px;\n\t\t\tposition: absolute;\n\t\t\tbackground: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, transparent 60%);\n\t\t}\n\n\t\t.shadow--tl { top: -15px; left: -15px; }\n\t\t.shadow--tr { top: -15px; right: -15px; }\n\t\t.shadow--bl { bottom: -15px; left: -15px; }\n\t\t.shadow--br { bottom: -15px; right: -15px; }\n\n\t\t/* Icy Blue */\n\t\t&.icy-blue {\n\t\t\tbackground: #c5d5e0;\n\t\t\tbox-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.4);\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0a0a0a;\n\t\t\t}\n\n\t\t\t.inner {\n\t\t\t\tborder-top-color: rgba(255, 255, 255, 0.3);\n\t\t\t\tborder-bottom-color: rgba(255, 255, 255, 0.3);\n\t\t\t}\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #a5b8c8;\n\t\t\t}\n\t\t}\n\n\t\t/* Navy */\n\t\t&.navy {\n\t\t\tbackground: #1a2a40;\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #152235;\n\t\t\t}\n\t\t}\n\n\t\t/* Silver */\n\t\t&.silver {\n\t\t\tbackground: #c0c0c0;\n\t\t\tbox-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.5);\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0a0a0a;\n\t\t\t}\n\n\t\t\t.inner {\n\t\t\t\tborder-top-color: rgba(255, 255, 255, 0.4);\n\t\t\t\tborder-bottom-color: rgba(255, 255, 255, 0.4);\n\t\t\t}\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #a8a8a8;\n\t\t\t}\n\t\t}\n\n\t\t/* Mint */\n\t\t&.mint {\n\t\t\tbackground: #a8d8c8;\n\t\t\tbox-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.4);\n\n\t\t\t&::before {\n\t\t\t\tbackground: #0a0a0a;\n\t\t\t}\n\n\t\t\t.sleep,\n\t\t\t.volume {\n\t\t\t\tbackground: #90c5b5;\n\t\t\t}\n\t\t}\n\n\t\t/* Landscape mode */\n\t\t&.landscape {\n\t\t\twidth: 892px;\n\t\t\theight: 412px;\n\n\t\t\t.camera {\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 22px;\n\t\t\t\tmargin-top: -5px;\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\n\t\t\t.speaker {\n\t\t\t\twidth: 4px;\n\t\t\t\theight: 40px;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 14px;\n\t\t\t\tmargin-top: -20px;\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\n\t\t\t.sleep {\n\t\t\t\theight: 3px;\n\t\t\t\twidth: 54px;\n\t\t\t\ttop: -3px;\n\t\t\t\tleft: 220px;\n\t\t\t\tright: auto;\n\t\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\t}\n\n\t\t\t.volume {\n\t\t\t\theight: 3px;\n\t\t\t\twidth: 80px;\n\t\t\t\ttop: 100%;\n\t\t\t\tleft: 180px;\n\t\t\t\tborder-radius: 0 0 2px 2px;\n\n\t\t\t\t&::before {\n\t\t\t\t\theight: 3px;\n\t\t\t\t\twidth: 80px;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 100px;\n\t\t\t\t\tborder-radius: 0 0 2px 2px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}"],"names":[]}