{"version":3,"sourceRoot":"","sources":["_reset.scss","_print.scss","_fonts.scss","_core.scss","_themes.scss","_syntax.scss","_helpers.scss","includes/navigation/_base.scss","includes/navigation/_mobile.scss","_graphics.scss","includes/footer/_base.scss","includes/footer/_mobile.scss","includes/header/_theme.scss","includes/interactive-tabs/_base.scss","includes/callout/_base.scss","includes/callout/_mobile.scss","includes/overlapping-containers/_base.scss","includes/overlapping-containers/_mobile.scss","includes/carousel/_base.scss","includes/authors/_base.scss","pages/_index.scss","pages/_exception.scss","elements/_os-selection-navigation.scss","pages/_install.scss","pages/_get-started.scss","pages/_blog.scss","pages/_post.scss"],"names":[],"mappings":"AAAA,KACE,eACA,0BACA,8BAGF,KACE,SACA,UACA,mCACA,wBAGF,mGAsBE,SACA,UAGF,GACE,gBAGF,uCAME,cACA,mBACA,kBAGF,oBAGE,WACA,YAGF,WAEE,gBAGF,MACE,yBACA,iBAGF,sFAYE,cAGF,4BAIE,qBACA,wBAGF,OACE,aACA,sBAKE,kDAIE,qBCzGN,kBACE,UACE,gBACA,eACA,aAEA,YACE,iCAIJ,EACE,sBACA,qCAEA,yBAEE,6BACA,WAIJ,0CAUE,wBAGF,oBACE,mBAGF,4BACE,wBAGF,0CAEE,cAGF,OACE,eAGF,KACE,WACA,UACA,SACA,sBACA,WACA,yBACA,SACA,eACA,eAGF,qBACE,yBACA,YACA,WACA,gBACA,UAEA,gDAEE,aAGF,2BACE,gBACA,oBAEA,6BACE,0BAKN,yBACE,cCvFJ,WACE,4BACA,8DACA,gBACA,kBACA,kBAGF,WACE,4BACA,gEACA,gBACA,kBACA,kBAGF,WACE,4BACA,gEACA,gBACA,kBACA,kBAGF,WACE,4BACA,iEACA,gBACA,kBACA,kBCvBF,KACE,YACE,4GAEF,gBACA,cACA,eACA,gBACA,wBACC,WACE,yCCfH,2BACA,kFAKA,sIAGA,uDACA,sCACA,uDACA,iDACA,uCACA,gDACA,iDACA,+DACA,8BACA,4CACA,+CACA,gEACA,6BAEA,gBAEA,6BAEA,oBACA,+BAEA,kEACA,oCACA,wCACA,qCACA,qCACA,0DACA,qCAEA,qCACA,6BACA,+BAEA,+BACA,wDACA,wDACA,iDACA,oCACA,qDAEA,qFAMA,iCACA,2FAMA,yFAMA,yFAMA,+CACA,iCAGA,uCACA,kCAGA,gDACA,sDACA,uDAEA,4CACA,4CACA,4CACA,sDACA,+DACA,iDACA,0CACA,2CACA,mCACA,yCACA,oDACA,iDACA,oDACA,iEACA,uEACA,2DACA,mDACA,oDACA,wCACA,yDACA,sDACA,oDACA,oEACA,yEACA,6DACA,qDACA,yCACA,kDACA,sCAEA,iEACA,4BACA,wBACA,yCACA,iCACA,4BACA,8CACA,4DACA,2DACA,qEACA,iEACA,0EACA,mCD9FA,uHAfA,8BACE,mBAGF,6BACE,kBC4GF,2BACA,mCACA,mCACA,iDACA,sCACA,sDACA,4CACA,uCACA,gDACA,iDACA,wDACA,8BACA,4CACA,mIAEA,0EACA,6BAEA,gBAEA,6BAEA,yBACA,0BAEA,kEACA,oCACA,wCACA,qCACA,wCACA,0DACA,qCAEA,qCACA,6BACA,+BAEA,sCACA,qDACA,qDACA,8CACA,uCACA,qDAEA,iCACA,oFAMA,qGAOA,uEACA,yFAOA,8BACA,iCAGA,uCACA,kCAGA,8CACA,oDACA,uDAEA,8CACA,8CACA,4CACA,wDACA,iEACA,kDACA,4CACA,yCACA,2CACA,qDACA,mDACA,qDACA,mEACA,wEACA,4DACA,oDACA,uDACA,8CACA,0DACA,uDACA,qDACA,qEACA,0EACA,8DACA,sDACA,2CACA,qDACA,wCAEA,kEACA,4BACA,yCACA,iCACA,wBACA,4BACA,8CACA,4DACA,2DACA,0EACA,kEACA,yEACA,mCD9NA,cACE,6BAWJ,GACE,gBAGF,KACE,aACA,sBACA,iBACA,gCAGF,KACE,YACE,2EAEF,gBAGF,WACE,8DACA,eACA,0BACA,qCAEA,wBACE,gBAIJ,oBACE,uBAEA,sBACE,aACA,iBAEA,0BACE,0BAOF,8BACE,qBEvFN,4CAEE,kBAEA,0DACE,kBACA,QACA,UACA,gBACA,cACA,eACA,gBACA,kBACA,+BACA,aACA,kDAEA,kEACE,WACA,YACA,WAIA,gFACE,gDAIJ,sEACE,wDAEA,8EACE,UAMJ,sEACE,aAKN,cACE,wCACA,eACA,gBACA,gBAEA,yFAME,mCAGF,6HAQE,mCAGF,oCAGE,4CAGF,iBACE,cAGF,kCAEE,wCAGF,mLAWE,kCAGF,kBAEE,qCAGF,4GAOE,2CAGF,yEAKE,kCAGF,2GAOE,kCAGF,kBAEE,kBAGF,kBAEE,qCAGF,uCAGE,qCACA,iDAGF,uCAGE,qCACA,mDAGF,2GAOE,mCAGF,kBAEE,6CAGF,kBAEE,gCAGF,kBAEE,kCAIF,kBACE,yBACA,iBAEA,qBACE,yBACA,iBAKN,kBACE,qCAKF,sJAQE,mCCVA,0CACE,aAKF,wCACE,aCxMJ,iBACE,eACA,WACA,MACA,aACA,oBACA,6CACA,2BACA,mDACA,6CAEA,0BDbA,aACA,mBACA,8BCaE,iBACA,eACA,cAGF,uBACE,SAEA,yBACE,aACA,YAEA,6BACE,OAMN,kEAEE,aAGF,mCACE,aACA,gBAGE,wCACE,cACA,iBACA,eACA,wCACA,WACE,yCAGF,6CACE,kBACA,mBAIF,4FAEE,aAEA,sGACE,wDAKJ,sDACE,0BACA,mBAKF,+CACE,aAEA,oDACE,4DAUN,iEACE,aACA,mBACA,eAEA,sEACE,cACA,UACA,YACA,mDClGV,2CAII,qCACE,aAGF,8BACE,qBFkCJ,cANA,gBACA,wBACA,qBAMA,YACA,+BACA,YACA,WACA,iBGnDgB,qCHoDhB,4BACA,2BACA,eEzCI,iDACA,eAEA,mCACE,iBClBI,oCDuBN,yCACE,cAGF,sDACE,cAEA,yDACE,cACA,8CAEA,oEACE,mBAGF,2DACE,UACA,cAEA,gEACE,aACA,gBACA,cAIJ,gEACE,cEtCZ,qBACE,yBACA,aACA,kBACA,6BACA,cACA,kBACA,WAEA,gCACE,gBACA,cAGF,kDACE,aACA,8BACA,eACA,kBAEA,wDACE,aACA,YACA,mBAEA,4DACE,YAGF,kEACE,aAIJ,qDACE,YACA,mBACA,cACA,iBACA,gBACA,iBACA,aACA,mBAGF,sDACE,mBACA,gBAEA,yDACE,gBACA,UAGE,8DACE,eACA,sCACA,cACA,qBACA,gBAEA,oEACE,4BAMR,iEACE,aACA,sBAGA,sFACE,oBACA,eACA,yBACA,mBACA,YACA,aACA,gBAEA,yLJnCR,kBACA,8BACA,qCACA,gBACA,WACA,UACA,UACA,SI+BU,gBAIA,+HACE,4BACA,+BAKF,sIACE,6BACA,gCAKN,4FACE,+BACA,yBACA,cACA,qBACA,kBACA,gBACA,eACA,sBACA,qCAEA,kGACE,eAIJ,0GACE,mBACA,cAMR,qCACE,aACA,8BACA,mBACA,qBACA,cAEA,yCACE,qBAEA,4CACE,gBACA,UACA,SACA,oBAEA,8CACE,cAKN,6CACE,eACA,gBAEA,wDACE,oBACA,kBAEA,0DACE,SAGF,0DACE,cAKF,uDACE,oBAEA,yDACE,gBACA,sCAEA,+DACE,4BAQR,sDACE,cACA,eAQE,+DAzMR,WACA,YACA,4BACA,qBACA,cACA,iBDHY,sCC2MJ,gEA7MR,WACA,YACA,4BACA,qBACA,cACA,iBDLa,uCCiNL,6DAjNR,WACA,YACA,4BACA,qBACA,cACA,iBDJU,oCCoNF,iEArNR,WACA,YACA,4BACA,qBACA,cACA,iBDNc,wCC0NN,0DAzNR,WACA,YACA,4BACA,qBACA,cACA,iBDPO,iCEHT,2CAEI,kDACE,sBACA,mBACA,kBAEA,wDACE,kBAGF,qDACE,YACA,cACA,kBAGF,sDACE,kBACA,mBAIE,sFACE,eAMR,qCACE,sBACA,mBAEA,6CACE,kBACA,oBCpCR,iDACE,UAGF,kDACE,UCLF,wBACE,aACA,eACA,UAGF,0BACE,oBACA,qBACA,uBACA,WAGF,6CACE,WACA,6BCbF,SACE,SACA,uBACA,YACA,kBACA,gBACA,sBACA,kBAEA,aACE,YAGF,mBACE,aACA,kCACA,gBAEA,yBACE,WAGF,yBACE,WACA,uCACE,yBAKN,gBACE,gBAEA,kBRXF,8CACA,qBACA,mBACA,oBQUI,cACA,WR8KJ,0BACA,wEACA,0BQ9KI,gBRXJ,oBACE,qBACA,gBACA,4EACA,qDAEA,WACA,YQME,oBACE,+BAMR,iBACE,cAGF,mBACE,cAGF,eACE,kBACA,eACA,gBACA,gBAGF,kBACE,iBACA,kBACA,eAGF,cACE,gBAIA,0CADF,YAEI,cC5EJ,2CACE,mBACE,2BCFJ,wBACE,kBACA,kBACA,cACA,aACA,mBACA,uBACA,mBACA,iBAEA,kCACE,gBACA,UACA,oBACA,eACA,qBACA,kBACA,UAGF,mCACE,0BACA,UACA,WACA,6BACA,qBACA,kBACA,UACA,eACA,gBACA,mBACA,gBC/BJ,2CACE,wBACE,eACA,sBACA,cAEA,kCACE,WACA,sBACA,mBAGF,mCACE,WACA,sBACA,cACA,mBChBN,oBACE,WACA,gBACA,YAGF,UACE,gBACA,6BACA,iCACA,qBACA,wBAGF,6BACE,aAGF,gBACE,aACA,SACA,eAGF,eACE,wBACA,iCACA,yBACA,mBACA,aACA,iBACA,iBACA,qCACA,sBAGF,kBACE,kBACA,gBAGF,cACE,sBACA,eACA,YACA,kBACA,yBACA,iBACA,eACA,qCAGF,uBACE,WACA,mBCtDF,SACE,aACA,qCACA,WACA,oBAEA,yBANF,SAOI,0BAEA,iBACE,aACA,2BAIJ,mBACE,qCACA,qCAGF,iBACE,aACA,eAEA,iDACE,WACA,kBACA,QACA,QACA,2BACA,UACA,YACA,4CAIJ,iBACE,aACA,eACA,qBACA,kBACA,oBAEA,yBACE,aACA,mBACA,SACA,eAEA,6BACE,WACA,YACA,kBACA,wCAGF,2BACE,qBACA,8CAIJ,wBACE,gBACA,eACA,gBACA,wCACA,wDACA,eCpDN,SACE,kBAEA,YACE,eACA,cACA,iBACA,kBACA,gBAEA,0CAPF,YAQI,eACA,kBAIJ,2BACE,mBAIJ,qBACE,uBACA,uBACA,OACA,WACA,gBACA,kBACA,UACA,oBAEA,0CAVF,qBAYI,YACA,aACA,UACA,SACA,2BAGF,4BACE,kBACA,MACA,OACA,WAIJ,eACE,iBACA,mBACA,kBACA,kBACA,yCdkBA,uBACE,WACA,cACA,YACA,WACA,kBACA,MACA,OACA,yCACA,YACA,UACA,oBc1BF,2CACE,eACE,wBACA,kBACA,oBAIJ,6BACE,gBACA,UAEA,2CAJF,6BAKI,iBAIJ,kBACE,eACA,gBACA,gCACA,iBACA,kBACA,gBACA,mBACA,kBACA,UAEA,0CAXF,kBAYI,eACA,kBAKJ,+BdJA,UACA,kBACA,qBACA,gBACA,eACA,WACA,iBACA,gBACA,qBACA,kBACA,oEACA,mBACA,mBACA,eACA,WACE,yCAGF,0EAEE,yBACA,cACA,aAGF,6CACE,0BACA,mBclBF,+BACE,YACA,eACA,mCACA,gBACA,gBAIF,kBACE,eACA,6BACA,iBACA,kBACA,gBACA,gBACA,mBACA,kBACA,UAEA,0CAXF,kBAYI,eACA,kBAIJ,4BACE,eACA,gCACA,iBACA,kBACA,gBACA,gBACA,mBACA,kBACA,UAEA,0CAXF,4BAYI,eACA,mBACA,kBAIJ,wDACE,gBACA,cACA,kBACA,UAEA,2DACE,aAGE,gEACE,aACA,qBACA,mCACA,2CAEA,gBACA,mBACA,eACA,aACA,WACE,yCAIF,kEACE,WACA,YACA,4BACA,wBACA,2BACA,qBACA,sBACA,8CAGE,wEACE,mEAIA,2EALF,yEACE,oEAIA,4EALF,uEACE,kEAIA,0EALF,0EACE,qEAIA,6EALF,2EACE,sEAIA,8EALF,wEACE,mEAIA,2EALF,qEACE,gEAIA,wEALF,+EACE,0EAIA,kFALF,2EACE,sEAIA,8EASN,4IAIE,aAGF,8EACE,0BACA,mBAKN,yEACE,SACA,mBAEA,4EACE,OAEA,8EACE,gBACA,aACA,SAEA,qFACE,eACA,gBACA,0BAGF,wFACE,gBAGF,gFACE,WACA,YAMR,2EACE,SACA,eAEA,8EACE,YAEA,gFACE,uBAEA,uFACE,gBACA,mBAQV,2CAlHF,wDAmHI,eAGE,yEACE,sBAGF,2EACE,MAGE,gFACE,gBACA,kBAQZ,wBdjNA,wBAoDA,sBACA,Uc+JE,UACA,qBACA,0Bd/JF,gCACE,UACA,uEciKJ,gBACE,kBACA,YACA,mBACA,gBACA,iCACE,eACA,gBACA,mBAGF,2CAXF,gBAYI,gBACA,mBACA,eAEA,iCACE,iBAIJ,8BACE,eACA,iBAIJ,QACE,kBACA,kBACA,iBdpPA,gBACE,WACA,cACA,YACA,WACA,kBACA,MACA,OACA,yCACA,YACA,UACA,oBc8OJ,OACE,uBACA,cACA,0BACA,qBACA,2BACA,kBACA,SACA,OACA,QACA,WACA,0BACA,oBAGF,MACE,gBACA,mBACA,gBACA,kBACA,WAEA,oBACE,mBACA,aACA,2BACA,8BAOE,oEACE,yBACA,mBAMR,UACE,6CACA,0BACA,6BAEA,iBd3SA,wBc6SE,UACA,qBACA,0Bd3PF,sBACA,UAEA,yBACE,UACA,uEc0PF,0CAbF,UAcI,qBAIJ,UACE,uBACA,6CAEA,iBd5TA,0Bc8TE,UACA,qBACA,0Bd5QF,sBACA,Uc6QE,Yd3QF,yBACE,UACA,uEc6QJ,UACE,6CACA,mBAEA,mBACE,WACA,gBAGF,wBACE,kBCnaJ,WACE,aACA,sBACA,0CACA,6BAEA,oBACE,YACA,aACA,sBACA,kBACA,eAEA,uBACE,eAGF,2CAXF,oBAYI,eChBN,yBACE,gBACA,WACA,cACA,WACA,sBACA,oBACA,kBACA,UAEA,4BACE,eAEA,gBACA,mBACA,kBACA,6BAGF,2CAnBF,yBAoBI,gBAGF,4BACE,eAGF,4BACE,6BACA,gBAGF,2BACE,gBACA,mBAGF,2BACE,WAGF,+BACE,mBACA,cACA,6BAIA,2CADF,kCAEI,gBAGF,wCACE,aACA,eACA,uBACA,kBACA,YACA,uCACA,mBAEA,0CACE,kBACA,iBACA,6BACA,qBACA,gBAEA,iDACE,8CACA,qCACA,mBACA,6BACA,gBAIJ,2CAzBF,wCA0BI,SC7ER,SAEE,kBACA,wCACA,gBjBgFA,iBACE,WACA,cACA,YACA,WACA,kBACA,MACA,OACA,yCACA,YACA,UACA,oBiBzFF,kBACE,gBACA,WACA,cACA,sBACA,mBACA,kBACA,UAEA,2CATF,kBAUI,cAGF,qBACE,6BACA,gBACA,gBACA,kBACA,WACA,kBAGF,qBACE,6BACA,gBACA,gBACA,eAGF,qCACE,mBACA,gBAEA,gDACE,SAGF,uCACE,wCAEA,oDjBzBN,8CACA,qBACA,mBACA,oBiBwBQ,gBACA,ajBgKR,0BACA,wEACA,0BAzLA,sDACE,qBACA,gBACA,4EACA,qDAEA,WACA,YiBmBM,0DACE,uBACA,cAGF,sDACE,6DAON,8BACE,mBAGF,8CACE,mBAKN,kBjBKA,0BiBHE,0BACA,2BACA,UACA,+DAEA,0CAPF,kBAQI,UAKN,aACE,WACA,kBACA,gBAEA,sBACE,yBACA,4CAEA,kCACE,4BAGF,iCACE,6BAKF,6BACE,eACA,gBACA,kBAEA,mCACE,eAKN,mBACE,WACA,cACA,kBAGE,6BACE,SACA,4CACA,mBACA,iBACA,8CAEA,mCACE,eAIJ,wBACE,cAEA,8BACE,eAMR,gBACE,kDACA,0DAGF,4CAEE,kBACA,gBAGF,+BACE,gBACA,0CAGF,wBACE,8CACA,qBAGF,8BACE,0BAGF,0CACE,4CAEE,iBACA,eAGF,mBACE,eAGF,yBACE,aAGF,sBACE,cACA,kBACA,gCAGF,sBACE,cACA,kBAGF,8BACE,yBACA,kBACA,UACA,UACA,gBACA,iBACA,YAIJ,uBACE,WACA,SACA,aAEA,0BACE,2CACA,0BACA,6BAGF,2BACE,gBAGF,oCACE,aACA,eACA,SACA,2BAGF,0BACE,gBACA,kBAEA,kCACE,sBAIJ,mCACE,YAEA,0CACE,SACA,4CACA,mBACA,iBACA,8CAEA,gDACE,eAKN,qCACE,YACA,WAIJ,sBACE,iDACA,gBACA,YACA,cACA,UACA,sBACA,kBACA,gBACA,aACA,YAEA,yBACE,eACA,gBACA,mBAGF,wBACE,mBAKN,eACE,oBACA,qCACA,SACA,WACA,gBAEA,0CAPF,eAQI,2BAGF,4BACE,aACA,sBACA,aAEA,qCACE,aACA,sBAEA,+CACE,YACA,aACA,sBACA,iBCtTR,aACE,6BACA,kBACA,sClBkFA,qBACE,WACA,cACA,YACA,WACA,kBACA,MACA,OACA,yCACA,YACA,UACA,oBkBzFJ,iBACE,8BACA,YAEA,kBACA,UAGF,WACE,qBACA,mBACA,gBACA,mBACA,kBACA,UAGF,kBACE,kBACA,kEACA,sBAEA,gCACE,iBACA,kBAEA,kClBoEF,UACA,kBACA,qBACA,gBACA,eACA,WACA,iBACA,gBACA,qBACA,kBACA,oEACA,mBACA,mBACA,eACA,WACE,yCkBjFE,oEACA,kBACA,elBkFJ,gFAEE,yBACA,cACA,aAGF,gDACE,0BACA,mBkBxFA,mCACE,eACA,gBACA,WACA,iBACA,kBACA,mBACA,kBACA,UAEA,0CAVF,mCAWI,eACA,kBAIJ,kCACE,eACA,WACA,gBACA,mBACA,UACA,kBACA,gBACA,YAGF,mCACE,gBACA,sBACA,kBACA,UACA,aACA,qCACA,SAEA,0CACE,mCACE,2BAIJ,sCACE,qBACA,gBACA,uBACA,6CACA,mBACA,eACA,mBAEA,2CACE,cACA,gBAEA,iDACE,eACA,gBACA,mBACA,gBAGF,gDACE,eACA,mBACA,gBAMR,uCACE,UAEA,+ClBjCJ,0BkBmCM,0BACA,0BACA,UACA,6EAGF,+CACE,sBACA,YACA,OACA,2DACA,sBACA,UAMR,WACE,iBACA,mBAEA,oBACE,uBACA,oDACA,gBACA,cACA,UACA,sBACA,kBACA,mBAEA,2CAVF,oBAWI,WACA,eAGF,0CAfF,oBAgBI,wBAGF,kCACE,WACA,gBAGF,uBACE,kBACA,eACA,mBACA,6BAEA,0CANF,uBAOI,eACA,iBACA,oBAIJ,sBlBzJF,8CACA,qBACA,mBACA,oBAEA,wBACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkBgJE,0CAHF,sBAII,qBAIJ,4GAGE,mBACA,qHACE,mBAIJ,qCACE,aACA,sBACA,SAEA,wCACE,sDACA,aACA,mBACA,SACA,iBACA,gBACA,mBACA,gBAEA,0CAVF,wCAWI,uBAGF,4CACE,YACA,aACA,iBACA,cACA,yBAEA,0CAPF,4CAQI,WACA,aAIJ,4CACE,aACA,sBACA,OACA,iBACA,kBACA,aAEA,kDACE,eACA,iBACA,mBAGF,kDACE,eACA,YAMR,uEAEE,aACA,qCACA,SAGA,6EACE,sDACA,4BACA,aACA,gBAEA,qFACE,aACA,sBACA,OACA,kBAEA,iGACE,eACA,iBACA,mBAGF,iGACE,eACA,YAKN,0CAhCF,uEAiCI,2BAKF,wCACE,WACA,YACA,kBACA,kBAIJ,mCACE,SAEA,sCACE,sBACA,gBACA,UAEA,0CACE,gBAEA,gDACE,kBAGF,gDACE,kBAKN,uCACE,qBACA,iBACA,mBACA,mBAMR,gBACE,sBAEA,2BACE,mBACA,4BACA,8CACA,sBAEA,qDAEE,gBAGF,0CAXF,2BAYI,mBAEA,qDAEE,cAKN,mBACE,eACA,gBACA,mBACA,WACA,kBAEA,0CAPF,mBAQI,eACA,kBAIJ,8BACE,aACA,oBAGF,oBACE,YACA,mBACA,uBAGF,mBACE,kBACA,gBAGF,wCAEE,gBACA,eACA,gBAGF,8BACE,kBACA,2BACA,gBAEA,iCACE,eACA,gBAGF,iCACE,mBAGF,gCACE,mBAGF,gClB3XF,8CACA,qBACA,mBACA,oBkB0XI,elBxXJ,kCACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkBqXF,0CACE,8BACE,sBAGF,oBACE,WACA,oBAKN,UAEE,iDACA,aACA,sBACA,uBACA,gBACA,4BACA,mBACA,sBACA,mBAEA,cACE,iBACA,8CAEA,mBACE,qBAIJ,6BACE,gBAEA,gCACE,eACA,gBACA,kBAEA,0CALF,gCAMI,eACA,kBAIJ,iCACE,aAEA,wCACE,cAKN,eACE,mBACA,0BAEA,sBACE,YACA,gBAEA,4BACE,eAIJ,kBACE,qBACA,YAEA,yBACE,gCACA,mBAIJ,0CAvBF,eAwBI,gBACA,oBAIJ,wBACE,aACA,sBAEA,0BACE,gBACA,mBAIJ,sBACE,aACA,eACA,QAGF,uBACE,aAGF,aACE,eACA,mBAEA,0CAJF,aAKI,eACA,kBAIJ,wBAEE,eAGF,YACE,mBAGF,cACE,mBACA,+CACA,mBACA,gBACA,eACA,gCACA,kBACA,mBACA,gBAEA,4BACE,gBAIJ,YlB7gBA,8CACA,qBACA,mBACA,oBAEA,cACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkBqgBF,0CACE,cACC,WAEC,iBACE,oBAMR,kBACE,mBAEA,qBACE,gBACA,mBACA,kBACA,SACA,WACA,YAEA,4BACE,mBAGF,+BACE,mBAIJ,gCACE,gBACA,cACA,kBAGF,qBACE,eACA,gBACA,mBAEA,0CALF,qBAMI,eACA,kBAIJ,oBACE,eACA,gBACA,mBAEA,0CALF,oBAMI,WAIJ,oBACE,elB5kBF,8CACA,qBACA,mBACA,oBAEA,sBACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkBqkBJ,8BACE,mBACA,aACA,sBACA,mBACA,kBACA,cAEA,4CACE,gBACA,eACA,mBAGF,iCACE,eACA,mBACA,gBAEA,0CALF,iCAMI,eACA,kBAIJ,gCACE,mBAGF,gClB9mBA,8CACA,qBACA,mBACA,oBAEA,kCACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkBumBJ,6BAcE,mBACA,aACA,sBACA,mBACA,kBAjBA,wCACE,mBACA,aACA,8CACA,sBAEA,8CACE,8CACA,iBACA,gBAUJ,2CACE,gBACA,eACA,mBAGF,mCACE,eACA,WACA,8CACA,mBACA,8CACA,gBAEA,8CACE,8CAIJ,gCACE,eACA,mBACA,gBAEA,0CALF,gCAMI,eACA,kBAIJ,+BACE,mBAGF,+BlBzqBA,8CACA,qBACA,mBACA,oBAEA,iCACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkBiqBF,0CACE,mCACE,gBACA,YAKN,eACE,sBAEA,kBACE,eACA,mBACA,WACA,kBAEA,0CANF,kBAOI,eACA,kBAIJ,6BACE,aACA,oBAGF,qBACE,OACA,kBACA,8CACA,mBACA,mBACA,gBACA,mCACE,8CAIJ,kBACE,kBACA,gBAGF,sCAEE,gBAGF,6BACE,kBACA,uBACA,gBACA,YAEA,gCACE,eACA,gBAGF,gCACE,mBAGF,+BACE,mBAGF,+BlBlvBF,8CACA,qBACA,mBACA,oBkBivBI,elB/uBJ,iCACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkB4uBF,0CACE,6BACE,sBACA,mBAGF,qBACE,WACA,gBAGF,6BACE,UACA,YAKN,mBACE,sBAEA,iCACE,gBACA,eACA,mBACA,kBAGF,sBACE,eACA,mBAEA,0CAJF,sBAKI,eACA,kBAIJ,qBACE,mBAGF,qBlBlyBA,8CACA,qBACA,mBACA,oBAEA,uBACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkB0xBF,iCACE,aACA,oBAGF,yBACE,OACA,kBACA,8CACA,mBACA,gBACA,uCACE,8CAIJ,sBACE,kBACA,gBAGF,8CAEE,gBAGF,uBACE,kBACA,uBACA,gBACA,YACA,mBACA,oBAEA,0BACE,eACA,gBAGF,0BACE,mBAGF,yBACE,mBAGF,yBlBr1BF,8CACA,qBACA,mBACA,oBkBo1BI,elBl1BJ,2BACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkB+0BF,0CACE,iCACE,sBACA,mBAGF,yBACE,gBACA,WAGF,uBACE,eACA,WACA,WAKN,cACE,iBACA,mBACA,mBACA,8CAEA,iBACE,eACA,mBACA,kBAEA,0CALF,iBAMI,eACA,kBAIJ,iBACE,eACA,gBACA,mBAGF,yBACE,yBACA,aACA,kCACA,gBAEA,sCACE,kBAIJ,gBlBh5BA,8CACA,qBACA,mBACA,oBkB+4BE,mBACA,elB94BF,kBACE,qBACA,gBACA,4EACA,qDAEA,WACA,YkB04BF,0CACE,yBACE,0BACA,mBAEA,sCACE,oBAMR,kBACE,8CACA,kBACA,WACA,mBACA,kBACA,YACA,cACA,mBACA,kBACA,UAEA,wBACE,eAGF,oBlBl7BA,8CACA,qBACA,mBACA,oBAEA,sBACE,qBACA,gBACA,4EACA,qDAEA,WACA,YmBPJ,MACE,qBACA,6BACA,kBACA,sCnBsDA,cACE,WACA,cACA,YACA,WACA,kBACA,MACA,OACA,yCACA,YACA,UACA,oBmB9DF,kBACE,WACA,+DACA,4BACA,0BACA,iCACA,kBACA,MACA,sBAIF,YACE,gBAGF,eACE,kBACA,WACA,gBACA,WACA,cACA,sBACA,mBACA,gBACA,2BAEA,2CAXF,eAYI,cAKJ,iBACE,cACA,8BACA,mBACA,gBAGF,kBACE,cACA,eACA,gBACA,eACA,gBAGF,oBA/DA,eACA,aACA,qBACA,oBACA,4BACA,gBA8DA,qBACE,qBACA,8CACA,gBAIF,0BACE,iBACA,iBACA,mBAEA,mCACE,uBACA,oDAEA,2CAJF,mCAKI,WACA,eAGF,0CATF,mCAUI,wBAGF,gEACE,eACA,gBACA,mBACA,6BACA,gBAEA,0CAPF,gEAQI,eACA,iBACA,oBAIJ,4DACE,gDACA,4BACA,mBACA,mBAEA,+FACE,yBACA,UAGF,2FACE,mBACA,qBACA,iBACA,uBACA,mBAIJ,yEACE,eACA,gBACA,mBACA,gBAGF,iDACE,WACA,gBAGF,iEACE,aACA,8BACA,cACA,gBACA,mBAEA,2CAPF,iEAQI,2BAGF,oEACE,aACA,sBAGF,8FACE,sDACA,aACA,gBACA,gBACA,sBACA,mBACA,4BACA,YAMA,kGACE,YACA,aACA,iBACA,cACA,yBAEA,0CAPF,kGAQI,WACA,aAIJ,kGACE,aACA,sBACA,OACA,iBACA,kBACA,aAEA,wGACE,eACA,iBACA,mBAGF,wGACE,eACA,YAMR,qGAEE,aACA,qCACA,SAGA,2HACE,sDACA,4BACA,aACA,gBAEA,mIACE,aACA,sBACA,OACA,kBAEA,+IACE,eACA,iBACA,mBAGF,+IACE,eACA,YAKN,0CAhCF,qGAiCI,2BAMR,gBACE,kBACA,qBAEA,mBACE,qBACA,wEAGF,gCACE,sCACA,kBACA,SACA,WACA,sBACA,YACA,WACA,YACA,UACA,8BACA,eAGF,iCACE,aACA,mBACA,uBACA,+BACA,4DACA,YACA,YACA,YACA,mBACA,mBACA,eAEA,sBACE,uCACE,4DAIJ,wDACE,WACA,WACA,4BACA,4CACA,wBACA,cACA,oBACA,qBAIJ,+BACE,aACA,kBACA,sBACA,4DACA,YACA,mBACA,qBACA,qCACA,gBACA,YACA,yCACA,iBACA,gBACA,gBAGF,iCACE,oBAIA,sCACE,cAGF,8CACE,yBAGF,8EArVJ,0EACA,0FACE,WACA,kBACA,QACA,SACA,SACA,UACA,wEACA,mBACA,oBAmVI,8CACE,YAKN,oDACE,0EAGF,iCACE,qBACA,kBACA,WACA,YACA,kBACA,yCAGF,sBACE,aACA,qBACA,kBACA,kBACA,WACA,sBAEA,sBACE,4BACE,4DAKN,sBACE,gBACA,kBACA,MACA,SACA,QACA,OACA,UAEA,4BACE,eAGF,+CACE,+BACA,4CACA,4BACA,2BAGF,kDACE,sBACA,yCAGF,0DACE,gDACA,oDACA,aAIJ,sBACE,uBAEA,4BACE,mEAKN,iBACE,+BACA,mBACA,mBACA,uBACA,qBACA,cAEA,4BACE,aACA,SAEA,gCACE,YACA,aACA,sBAGF,2CAVF,4BAWI,cAEA,gCACE,WACA,aAKN,oBACE,eACA,gBACA,6BAGF,sBACE,cAGF,mBACE,6BAhcJ,eACA,aACA,qBACA,oBACA,4BACA,gBA+bE,2BACE,8CACA,2CACA,iBACA,mBACA,gBACA,qBC7dN,MACE,kBACA,qBAEA,eACE,gBACA,WACA,cACA,UACA,sBACA,kBACA,gBAEA,0BATF,eAUI,aAEA,kBACE,yBAIJ,4GACE,gBACA,qCACA,mBAGF,qDACA,kCAEA,iBACE,kBAEA,0BACE,gBAIJ,oCACE,wBACA,kBACA,aAGF,iBACE,qBACA,8CAGF,oBACE,uCACA,eACA,yBACA,cAGF,yBACE,mBACA,cAGF,wBACE,kBACA,qCAEA,2BACE,gBACA,sCAGF,sCACE,oCACA,aACA,mBACA,kBAIJ,0BACE,yBAEA,0DACE,eAGF,mCACE,yBACA,UAEA,wCACE,mBAGF,sCACI,aAMV,epBnBA,0BoBqBE,mEACA,0BACA,2BACA,UACA,WAEA,yBARF,eASI","sourcesContent":["html {\n  font-size: 100%;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-fill);\n  color: var(--color-text);\n}\n\nul,\nol,\nli,\ndl,\ndt,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhgroup,\np,\nblockquote,\nfigure,\nform,\nfieldset,\ninput,\nlegend,\npre,\nabbr {\n  margin: 0;\n  padding: 0;\n}\n\nul {\n  list-style: none;\n}\n\npre,\ncode,\naddress,\ncaption,\nth,\nfigcaption {\n  font-size: 1em;\n  font-weight: normal;\n  font-style: normal;\n}\n\nfieldset,\niframe,\nimg {\n  width: 100%;\n  border: none;\n}\n\ncaption,\nth {\n  text-align: left;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\narticle,\naside,\nfooter,\nheader,\nnav,\nmain,\nsection,\nsummary,\ndetails,\nhgroup,\nfigure,\nfigcaption {\n  display: block;\n}\n\naudio,\ncanvas,\nvideo,\nprogress {\n  display: inline-block;\n  vertical-align: baseline;\n}\n\nbutton {\n  font: inherit;\n  vertical-align: middle;\n}\n\nnav {\n  a {\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      text-decoration: none;\n    }\n  }\n}\n","@media only print {\n  html body {\n    background: white;\n    font-size: 12pt;\n    padding: 0.5in;\n\n    * {\n      -webkit-print-color-adjust: exact;\n    }\n  }\n\n  a {\n    color: black !important;\n    text-decoration: underline !important;\n\n    &[href^=\"http://\"]:after\n    {\n      content: ' (' attr(href) ') ';\n      color: #444;\n    }\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p,\n  article > div,\n  pre,\n  table {\n    page-break-inside: avoid;\n  }\n\n  details:not([open]) {\n    visibility: visible;\n  }\n\n  details:not([open]) summary {\n    display: none !important;\n  }\n\n  details:not([open]) > *,\n  details:not([open]) {\n    display: block;\n  }\n\n  .alert {\n    margin: 1.5em 0;\n  }\n\n  main {\n    width: auto;\n    padding: 0;\n    border: 0;\n    float: none !important;\n    color: black;\n    background: transparent;\n    margin: 0;\n    max-width: 100%;\n    min-height: 1in;\n  }\n\n  nav[role='navigation'] {\n    background: transparent;\n    border: none;\n    width: auto;\n    position: static;\n    padding: 0;\n\n    h2,\n    ul {\n      display: none;\n    }\n\n    #logo {\n      position: static;\n      margin-bottom: 1.5em;\n\n      a {\n        background-position: -15px;\n      }\n    }\n  }\n\n  footer[role='contentinfo'] {\n    display: none;\n  }\n}\n","@font-face {\n  font-family: 'Anonymous Pro';\n  src: url('/assets/fonts/Anonymous-Pro.ttf') format('truetype');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Anonymous Pro';\n  src: url('/assets/fonts/Anonymous-Pro-B.ttf') format('truetype');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Anonymous Pro';\n  src: url('/assets/fonts/Anonymous-Pro-I.ttf') format('truetype');\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Anonymous Pro';\n  src: url('/assets/fonts/Anonymous-Pro-BI.ttf') format('truetype');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n","@use 'reset';\n@use 'print';\n@use 'graphics' as *;\n@use 'fonts';\n@use 'themes' as *;\n\nbody {\n  font-family:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n    Cantarell, 'Helvetica Neue', sans-serif;\n  font-weight: 400;\n  color: #051416;\n  font-size: 17px;\n  line-height: 1.6;\n  color-scheme: light dark;\n   transition:\n     background-color 0.3s ease,\n     color 0.3s ease;\n    @include light-theme;\n\n  &[data-color-scheme='light'] {\n    color-scheme: light;\n  }\n\n  &[data-color-scheme='dark'] {\n    color-scheme: dark;\n    @include dark-theme;\n  }\n\n  // TODO: Remove this and move the rule in body\n  #install {\n    color: var(--site-text-color);\n  }\n\n  // Use linear-gradient so over scroll color matches footer background color, when user rubberbands.\n  background-image: linear-gradient(\n    180deg,\n    var(--nav-scroller-gradient-start) 50%,\n    var(--nav-scroller-gradient-end) 50%\n  );\n}\n\nh2 {\n  font-weight: 600;\n}\n\nmain {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  background-color: var(--page-bg);\n}\n\ncode {\n  font-family:\n    'SF Mono', ui-monospace, Menlo, Consolas, Monaco, 'Courier New', monospace,\n    serif;\n  font-weight: 400;\n}\n\nblockquote {\n  border-left: 4px solid var(--site-link-with-right-arrow-color);\n  margin: 1.5em 0;\n  padding: 0.5em 0 0.5em 1.5em;\n  color: var(--color-syntax-plain-text);\n\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.header-with-anchor {\n  scroll-margin-top: 80px;\n\n  a {\n    display: none;\n    margin-left: 0.2em;\n\n    svg {\n      filter: var(--icon-filter);\n    }\n  }\n}\n\nh2.header-with-anchor {\n  &:hover {\n    a {\n      display: inline-block;\n    }\n  }\n}","@mixin light-theme() {\n  --site-text-color: #051416;\n  --site-navigation-border-bottom: linear-gradient(\n    0deg,\n    #f6b391 0%,\n    #f8ce6e 92%\n  );\n  --site-navigation-box-shadow:\n    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n  --site-navigation-background: rgba(255, 255, 255, 0.5);\n  --site-navigation-text-color: #3d3d3d;\n  --site-navigation-item-background: rgba(0, 0, 0, 0.05);\n  --site-tabs-background: rgba(255, 255, 255, 0.8);\n  --site-tabs-active-background: #ffffff;\n  --site-navigation-menu-toggle-invert: invert(0);\n  --site-navigation-item-border: 1px solid #051416;\n  --site-navigation-selected-background: rgba(230, 150, 80, 0.9);\n  --site-code-box-text: #3d3d3d;\n  --site-link-with-right-arrow-color: #384fea;\n  --site-link-with-right-arrow-icon-filter: none;\n  --site-content-link-with-right-arrow-icon-filter: brightness(0);\n  --site-border-color: #051416;\n\n  --page-bg: #fff;\n\n  --exception-page-bg: #fac685;\n\n  --icon-filter: none;\n  --icon-filter-hover: invert(1);\n\n  --install-page-bg: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%);\n  --install-site-code-box-bg: #ffffff;\n  --install-site-code-box-pre-bg: #f2f2f2;\n  --install-release-box-th-bg: #f2f2f2;\n  --install-release-box-th-color: #333;\n  --install-release-box-tr-border-bottom: 1px solid #f2f2f2;\n  --install-release-box-tr-bg: #ffffff;\n\n  --blog-page-time-text-color: #8d8d8d;\n  --blog-page-code-bg: #f2f2f2;\n  --blog-divider-border: #979797;\n\n  --get-started-page-bg: #fafafa;\n  --get-started-card-primary-bg: rgba(255, 255, 255, 0.9);\n  --get-started-card-secondary-bg: rgba(236, 236, 236, 1);\n  --get-started-boxes-bg: rgba(255, 255, 255, 0.5);\n  --get-started-code-box-pre-bg: #fff;\n  --get-started-code-box-pre-border: 1px solid #d5d5d5;\n\n  --homepage-hero-bg: linear-gradient(\n    179deg,\n    #fac685 3%,\n    #fbdab0 87%,\n    #ffffff 100%\n  );\n  --homepage-install-text: #3d3d3d;\n  --homepage-pillar-1-bg: linear-gradient(\n    to bottom,\n    #ffffff 0%,\n    #d9f2ff 75%,\n    #fff3d8 90%\n  );\n  --homepage-pillar-2-bg: linear-gradient(\n    to top,\n    #e4937f 0%,\n    #fdd9a1 72%,\n    #fff3d8 100%\n  );\n  --homepage-pillar-3-bg: linear-gradient(\n    180deg,\n    #e4937f 0%,\n    #a268c1 36%,\n    #4b3773 100%\n  );\n  --home-quicklinks-bg: rgba(255, 177, 100, 0.9);\n  --home-quicklinks-color: #801a1a;\n\n  // rubber band\n  --nav-scroller-gradient-start: #1e162e;\n  --nav-scroller-gradient-end: #fff;\n\n  // syntax\n  --color-syntax-clipboard-bg: rgb(223, 223, 247);\n  --color-syntax-clipboard-hover-bg: rgb(216, 216, 242);\n  --color-syntax-clipboard-check-color: rgb(12, 156, 12);\n\n  --color-syntax-attributes: rgb(148, 113, 0);\n  --color-syntax-characters: rgb(39, 42, 216);\n  --color-syntax-comments: rgb(112, 127, 140);\n  --color-syntax-documentation-markup: rgb(80, 99, 117);\n  --color-syntax-documentation-markup-keywords: rgb(80, 99, 117);\n  --color-syntax-brackets-dots: rgba(45, 100, 105);\n  --color-syntax-heading: rgb(186, 45, 162);\n  --color-syntax-keywords: rgb(173, 61, 164);\n  --color-syntax-marks: rgb(0, 0, 0);\n  --color-syntax-numbers: rgb(39, 42, 216);\n  --color-syntax-other-class-names: rgb(112, 61, 170);\n  --color-syntax-other-constants: rgb(75, 33, 176);\n  --color-syntax-other-declarations: rgb(4, 124, 176);\n  --color-syntax-other-function-and-method-names: rgb(75, 33, 176);\n  --color-syntax-other-instance-variables-and-globals: rgb(112, 61, 170);\n  --color-syntax-other-preprocessor-macros: rgb(120, 73, 42);\n  --color-syntax-other-type-names: rgb(112, 61, 170);\n  --color-syntax-param-internal-name: rgb(64, 64, 64);\n  --color-syntax-plain-text: rgb(0, 0, 0);\n  --color-syntax-preprocessor-statements: rgb(120, 73, 42);\n  --color-syntax-project-class-names: rgb(62, 128, 135);\n  --color-syntax-project-constants: rgb(45, 100, 105);\n  --color-syntax-project-function-and-method-names: rgb(45, 100, 105);\n  --color-syntax-project-instance-variables-and-globals: rgb(62, 128, 135);\n  --color-syntax-project-preprocessor-macros: rgb(120, 73, 42);\n  --color-syntax-project-type-names: rgb(62, 128, 135);\n  --color-syntax-strings: rgb(209, 47, 27);\n  --color-syntax-type-declarations: rgb(3, 99, 140);\n  --color-syntax-urls: rgb(19, 55, 255);\n\n  --blog-dropdown-arrow: url('/assets/images/icon-arrow-dark.svg');\n  --blog-muted-color: #8d8d8d;\n  --blog-card-bg: #ffffff;\n  --blog-category-pill-copy-color: #4d4d4d;\n  --blog-category-pill-bg: #e2e2e2;\n  --blog-dropdown-bg: #ffffff;\n  --blog-dropdown-toggle-outline-color: #e8e8e8;\n  --blog-dropdown-toggle-outset-outline-color-active: #384ff0;\n  --blog-dropdown-toggle-inset-outline-color-active: #e4e4e4;\n  --dropdown-close-icon: url('/assets/images/icon-dropdown-close.svg');\n  --dropdown-check-icon: url('/assets/images/icon-check-dark.svg');\n  --dropdown-check-icon-inverse: url('/assets/images/icon-check-light.svg');\n  --dropdown-all-background: #384ff0;\n}\n\n@mixin dark-theme() {\n  --site-text-color: #ffffff;\n  --site-navigation-border-bottom: 0;\n  --site-navigation-box-shadow: none;\n  --site-navigation-background: rgba(0, 0, 0, 0.3);\n  --site-navigation-text-color: #ffffff;\n  --site-navigation-item-background: rgba(0, 0, 0, 0.4);\n  --site-tabs-background: rgba(35, 52, 74, 1);\n  --site-tabs-active-background: #505f83;\n  --site-navigation-menu-toggle-invert: invert(1);\n  --site-navigation-item-border: 1px solid #ffffff;\n  --site-navigation-selected-background: rgb(221, 93, 67);\n  --site-code-box-text: #ffffff;\n  --site-link-with-right-arrow-color: #1ec1fd;\n  --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%)\n    saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%);\n  --site-content-link-with-right-arrow-icon-filter: brightness(0) invert(1);\n  --site-border-color: #ffffff;\n\n  --page-bg: #000;\n\n  --exception-page-bg: #23344a;\n\n  --icon-filter: invert(1);\n  --icon-filter-hover: none;\n\n  --install-page-bg: linear-gradient(0deg, #ff8115 0%, #b7451b 92%);\n  --install-site-code-box-bg: #23344a;\n  --install-site-code-box-pre-bg: #111727;\n  --install-release-box-th-bg: #111727;\n  --install-release-box-th-color: #ffffff;\n  --install-release-box-tr-border-bottom: 1px solid #051416;\n  --install-release-box-tr-bg: #384461;\n\n  --blog-page-time-text-color: #8d8d8d;\n  --blog-page-code-bg: #111727;\n  --blog-divider-border: #979797;\n\n  --get-started-page-bg: rgb(5, 20, 35);\n  --get-started-card-primary-bg: rgba(35, 52, 74, 0.9);\n  --get-started-card-secondary-bg: rgba(56, 68, 97, 1);\n  --get-started-boxes-bg: rgba(25, 52, 74, 0.5);\n  --get-started-code-box-pre-bg: #111727;\n  --get-started-code-box-pre-border: 1px solid #575757;\n\n  --homepage-install-text: #dedede;\n  --homepage-hero-bg: linear-gradient(\n    180deg,\n    #144173 0%,\n    #141228 68%,\n    #144173 99%\n  );\n  --homepage-pillar-1-bg: linear-gradient(\n    179deg,\n    #144173 1%,\n    #000000 57%,\n    #350839 88%,\n    #df6b40 99%\n  );\n  --homepage-pillar-2-bg: linear-gradient(0deg, #ffac64 0, #df6b40 100%);\n  --homepage-pillar-3-bg: linear-gradient(\n    180deg,\n    #ffac64 0%,\n    #a268c1 28%,\n    #4b3773 100%\n  );\n\n  --home-quicklinks-bg: #23344a;\n  --home-quicklinks-color: #ffffff;\n\n  // rubber band\n  --nav-scroller-gradient-start: #1e162e;\n  --nav-scroller-gradient-end: #000;\n\n  // syntax\n  --color-syntax-clipboard-bg: rgb(71, 79, 110);\n  --color-syntax-clipboard-hover-bg: rgb(80, 89, 124);\n  --color-syntax-clipboard-check-color: rgb(11, 242, 11);\n\n  --color-syntax-attributes: rgb(204, 151, 104);\n  --color-syntax-characters: rgb(217, 201, 124);\n  --color-syntax-comments: rgb(127, 140, 152);\n  --color-syntax-documentation-markup: rgb(127, 140, 152);\n  --color-syntax-documentation-markup-keywords: rgb(163, 177, 191);\n  --color-syntax-brackets-dots: rgba(255, 255, 255);\n  --color-syntax-keywords: rgb(255, 121, 179);\n  --color-syntax-marks: rgb(255, 255, 255);\n  --color-syntax-numbers: rgb(217, 201, 124);\n  --color-syntax-other-class-names: rgb(218, 186, 255);\n  --color-syntax-other-constants: rgb(167, 235, 221);\n  --color-syntax-other-declarations: rgb(78, 176, 204);\n  --color-syntax-other-function-and-method-names: rgb(178, 129, 235);\n  --color-syntax-other-instance-variables-and-globals: rgb(178, 129, 235);\n  --color-syntax-other-preprocessor-macros: rgb(255, 161, 79);\n  --color-syntax-other-type-names: rgb(218, 186, 255);\n  --color-syntax-param-internal-name: rgb(191, 191, 191);\n  --color-syntax-plain-text: rgb(255, 255, 255);\n  --color-syntax-preprocessor-statements: rgb(255, 161, 79);\n  --color-syntax-project-class-names: rgb(172, 242, 228);\n  --color-syntax-project-constants: rgb(120, 194, 179);\n  --color-syntax-project-function-and-method-names: rgb(120, 194, 179);\n  --color-syntax-project-instance-variables-and-globals: rgb(120, 194, 179);\n  --color-syntax-project-preprocessor-macros: rgb(255, 161, 79);\n  --color-syntax-project-type-names: rgb(172, 242, 228);\n  --color-syntax-strings: rgb(255, 129, 112);\n  --color-syntax-type-declarations: rgb(107, 223, 255);\n  --color-syntax-urls: rgb(102, 153, 255);\n\n  --blog-dropdown-arrow: url('/assets/images/icon-arrow-light.svg');\n  --blog-muted-color: #c4c4c4;\n  --blog-category-pill-copy-color: #c4c4c4;\n  --blog-category-pill-bg: #172538;\n  --blog-card-bg: #23344a;\n  --blog-dropdown-bg: #111727;\n  --blog-dropdown-toggle-outline-color: #384461;\n  --blog-dropdown-toggle-outset-outline-color-active: #384461;\n  --blog-dropdown-toggle-inset-outline-color-active: #727272;\n  --dropdown-close-icon: url('/assets/images/icon-dropdown-close-dark.svg');\n  --dropdown-check-icon: url('/assets/images/icon-check-light.svg');\n  --dropdown-check-icon-inverse: url('/assets/images/icon-check-dark.svg');\n  --dropdown-all-background: #1dc2fe;\n}\n","[class^='language-'] .highlight,\n.code-box pre {\n  position: relative;\n\n  button {\n    position: absolute;\n    top: 1em;\n    right: 1em;\n    background: none;\n    border: medium;\n    cursor: pointer;\n    padding: 7px 6px;\n    border-radius: 6px;\n    transition: all 0.2s ease-in-out;\n    display: none;\n    background-color: var(--color-syntax-clipboard-bg);\n\n    svg {\n      width: 20px;\n      height: 20px;\n      opacity: 0.8;\n    }\n\n    &.copied {\n      svg {\n        color: var(--color-syntax-clipboard-check-color);\n      }\n    }\n\n    &:hover {\n      background-color: var(--color-syntax-clipboard-hover-bg);\n\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n}\n\npre.highlight {\n  background: var(--color-code-background);\n  font-size: 14px;\n  line-height: 1.5;\n  overflow-x: auto;\n\n  .c,   /* Comment */\n  .cm,  /* Comment.Multiline */\n  .cp,  /* Comment.Preproc */\n  .c1,  /* Comment.Single */\n  .cs {\n    /* Comment.Special */\n    color: var(--color-syntax-comments);\n  }\n\n  .k,   /* Keyword */\n  .kc,  /* Keyword.Constant */\n  .kd,  /* Keyword.Declaration */\n  .kp,  /* Keyword.Pseudo */\n  .kr,\n  .kt, /* Keyword.Reserved */\n  .nb {\n    /* Name.Builtin */\n    color: var(--color-syntax-keywords);\n  }\n\n  .nv,  /* Name.Variable */\n  .nf {\n    /* Name.Function */\n    color: var(--color-syntax-project-constants);\n  }\n\n  .n {\n    color: #b181ec;\n  }\n\n  .o,\n  .p {\n    color: var(--color-syntax-brackets-dots);\n  }\n\n  .s,   /* Literal.String */\n  .sb,  /* Literal.String.Backtick */\n  .sc,  /* Literal.String.Char >> --color-syntax-characters */\n  .sd,  /* Literal.String.Doc */\n  .s2,  /* Literal.String.Double */\n  .se,  /* Literal.String.Escape */\n  .sh,  /* Literal.String.Heredoc */\n  .si,  /* Literal.String.Interpol */\n  .s1,  /* Literal.String.Single */\n  .sx {\n    /* Literal.String.Other */\n    color: var(--color-syntax-strings);\n  }\n\n  .na {\n    /* Name.Attribute */\n    color: var(--color-syntax-attributes);\n  }\n\n  .nc,  /* Name.Class */\n  .ni,  /* Name.Entity */\n  .no,  /* Name.Constant */\n  .vc,  /* Name.Variable.Class */\n  .vg,  /* Name.Variable.Global */\n  .vi {\n    /* Name.Variable.Instance */\n    color: var(--color-syntax-other-type-names);\n  }\n\n  .err, /* Error */\n  .gr,  /* Generic.Error */\n  .gt,  /* Generic.Traceback */\n  .ne {\n    /* Name.Exception */\n    color: var(--color-syntax-strings);\n  }\n\n  .m,   /* Literal.Number */\n  .mf,  /* Literal.Number.Float */\n  .mh,  /* Literal.Number.Hex */\n  .mi,  /* Literal.Number.Integer */\n  .il,  /* Literal.Number.Integer.Long */\n  .mo {\n    /* Literal.Number.Oct */\n    color: var(--color-syntax-numbers);\n  }\n\n  .ge {\n    /* Generic.Emph */\n    font-style: italic;\n  }\n\n  .nt {\n    /* Name.Tag */\n    color: var(--color-syntax-characters);\n  }\n\n  .gd,     /* Generic.Deleted */\n  .gd .x {\n    /* Generic.Deleted.Specific */\n    color: var(--color-syntax-plain-text);\n    background-color: var(--color-fill-red-secondary);\n  }\n\n  .gi,     /* Generic.Inserted */\n  .gi .x {\n    /* Generic.Inserted.Specific */\n    color: var(--color-syntax-plain-text);\n    background-color: var(--color-fill-green-secondary);\n  }\n\n  .gh, /* Generic.Heading */\n  .bp, /* Name.Builtin.Pseudo */\n  .go, /* Generic.Output */\n  .gp, /* Generic.Prompt */\n  .gu, /* Generic.Subheading */\n  .w {\n    /* Text.Whitespace */\n    color: var(--color-syntax-comments);\n  }\n\n  .nn {\n    /* Name.Namespace */\n    color: var(--color-syntax-other-declarations);\n  }\n\n  .sr {\n    /* Literal.String.Regex */\n    color: var(--color-figure-green);\n  }\n\n  .ss {\n    /* Literal.String.Symbol */\n    color: var(--color-syntax-heading);\n  }\n\n  /* Make prompts non-selectable, to make it easy to copy and paste */\n  .gp {\n    -webkit-user-select: none;\n    user-select: none;\n\n    & + .w {\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  }\n}\n\n.language-console {\n  color: var(--color-syntax-plain-text);\n}\n\n// Explicit syntax highlighting for C++ code blocks:\n\n.language-cpp .cp,\n.language-cpp .kt,\n.language-cpp .nl,\n.language-cpp .o,\n.language-c\\+\\+ .cp,\n.language-c\\+\\+ .kt,\n.language-c\\+\\+ .nl,\n.language-c\\+\\+ .o {\n  color: var(--color-syntax-keywords);\n}\n","@use 'sass:list';\n\n@mixin flex-between {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n@mixin inline-link-style {\n  padding: 0.5em;\n  display: inline-block;\n  color: black;\n\n  &::before {\n    content: attr(data-text);\n    display: block;\n    font-weight: bold;\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n}\n\n@mixin link-with-right-arrow {\n  color: var(--site-link-with-right-arrow-color);\n  text-decoration: none;\n  align-items: center;\n  display: inline-flex;\n\n  i {\n    display: inline-block;\n    margin-left: 6px;\n    background: url(/assets/images/icon-arrow-right-circle.svg) no-repeat center;\n    filter: var(--site-link-with-right-arrow-icon-filter);\n\n    width: 17px;\n    height: 17px;\n  }\n}\n\n@mixin appearance-none {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin mobile-toggle-btn($bg-img) {\n  display: block;\n  @include appearance-none;\n  border: none;\n  background-color: transparent;\n  height: 20px;\n  width: 20px;\n  background-image: $bg-img;\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n\n@mixin visuallyhidden() {\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(0px 0px 99.9% 99.9%);\n  overflow: hidden;\n  height: 1px;\n  width: 1px;\n  padding: 0;\n  border: 0;\n}\n\n@mixin nav-link-style {\n  color: var(--color-nav-link-color);\n  transition:\n    color 0.2s ease,\n    border 0.2s ease;\n  text-decoration: none;\n  text-transform: uppercase;\n  font-size: 0.8rem;\n  letter-spacing: 1px;\n  font-weight: normal;\n}\n\n@mixin swoop-ratio($width, $height, $multiplier) {\n  aspect-ratio: list.slash($width, calc($height * $multiplier));\n}\n\n@mixin noise {\n  &::before {\n    content: '';\n    display: block;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: url(/assets/images/noise.png);\n    opacity: 0.04;\n    z-index: 1;\n    pointer-events: none;\n  }\n}\n\n@mixin big-button {\n  z-index: 5;\n  position: relative;\n  display: inline-block;\n  line-height: 1.2;\n  font-size: 35px;\n  color: #ffffff;\n  letter-spacing: 0;\n  font-weight: 400;\n  text-decoration: none;\n  padding: 15px 81px;\n  background-image: linear-gradient(to bottom right, #ff7f00, #f05238);\n  border-radius: 43px;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    color 0.2s ease;\n\n  &:hover,\n  &:focus {\n    background-color: #ff7f00;\n    color: #e0e0e0;\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid dodgerblue;\n    outline-offset: 2px;\n  }\n}\n\n@mixin lazyloadBg($url) {\n  background-image: none;\n  opacity: 0;\n\n  &.visible {\n    opacity: 1;\n    background-image: url($url);\n  }\n}\n\n@mixin button-style {\n  text-decoration: none;\n  color: #801a1a;\n  font-weight: 400;\n  background-color: rgba(255, 177, 100, 0.9);\n  border-radius: 36px;\n  font-size: 14px;\n  white-space: nowrap;\n  padding: 12px;\n  transition:\n    background-color 0.2s ease,\n    color 0.2s ease;\n\n  @media only screen and (max-width: 1024px) {\n    padding: 6px;\n    min-width: 80px;\n  }\n\n  & > div {\n    display: inline-block;\n    margin-left: 14px;\n  }\n\n  &[aria-pressed='true'],\n  &:hover,\n  &:focus {\n    background-color: rgba(200, 100, 12, 0.9);\n    border: 0 !important;\n    color: white;\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid dodgerblue;\n    outline-offset: 2px;\n  }\n\n  span {\n    display: block;\n  }\n\n  .title {\n    font-size: 24px;\n    font-weight: 600;\n    margin-bottom: 8px;\n  }\n\n  .subtitle {\n    font-size: 14px;\n    white-space: normal;\n  }\n}\n\nbody[data-color-scheme='light'] {\n  .hide-light {\n    display: none\n  }    \n}\n\nbody[data-color-scheme='dark'] {\n  .hide-dark {\n    display: none\n  }    \n}\n\n\n\n@mixin underline {\n  text-decoration: underline;\n  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);\n  text-underline-offset: 2px;\n}","@use '../../colors' as *;\n@use '../../helpers' as *;\n@use '../../graphics' as *;\n@use '../../themes' as *;\n\n.site-navigation {\n  position: fixed;\n  width: 100%;\n  top: 0;\n  z-index: 9999;\n  line-height: initial;\n  background: var(--site-navigation-background);\n  backdrop-filter: blur(20px);\n  border-bottom: var(--site-navigation-border-bottom);\n  box-shadow: var(--site-navigation-box-shadow);\n\n  .wrapper {\n    @include flex-between;\n    max-width: 1234px;\n    padding: 0 20px;\n    margin: 0 auto;\n  }\n\n  .logo {\n    margin: 0;\n\n    a {\n      display: flex;\n      width: 116px;\n\n      svg {\n        flex: 1;\n      }\n    }\n  }\n\n  // hide mobile navigation\n  .menu-toggle,\n  .mobile-navigation {\n    display: none;\n  }\n\n  .navigation-items {\n    display: flex;\n    list-style: none;\n\n    li {\n      a {\n        display: block;\n        padding: 22px 5px;\n        font-size: 19px;\n        color: var(--site-navigation-text-color);\n        transition:\n          background-color 0.2s ease,\n          color 0.2s ease; // smooth hover\n\n        & > span {\n          padding: 12px 15px;\n          border-radius: 36px;\n        }\n\n        // hover/focus states\n        &:hover,\n        &:focus {\n          outline: none; // basic focus outline removal\n\n          & > span {\n            background-color: var(--site-navigation-item-background);\n          }\n        }\n\n        // visual focus indicator for accessibility\n        &:focus-visible {\n          outline: 2px solid dodgerblue;\n          outline-offset: 2px;\n        }\n      }\n\n      &.active {\n        a {\n          outline: none; // basic focus outline removal\n\n          & > span {\n            background-color: var(--site-navigation-selected-background);\n          }\n        }\n      }\n    }\n  }\n\n  // use a border to separate \"Install\"\n  .desktop-navigation {\n    .navigation-items {\n      li.border {\n        display: flex;\n        align-items: center;\n        padding: 0 15px;\n\n        span {\n          display: block;\n          width: 2px;\n          height: 18px;\n          background-color: var(--site-navigation-text-color);\n        }\n      }\n    }\n  }\n} // .site-navigation\n","@use '../../colors' as *;\n@use '../../helpers' as *;\n@use '../../graphics' as *;\n\n@media only screen and (max-width: 1024px) {\n  .site-navigation {\n\n    // hide desktop navigation\n    .desktop-navigation {\n      display: none;\n    }\n\n    .menu-toggle {\n      display: inline-block;\n      @include mobile-toggle-btn($menu-icon-close);\n      filter: var(--site-navigation-menu-toggle-invert);\n      padding: 33px 0;\n\n      &.open {\n        background-image: $menu-icon;\n      }\n    }\n\n    .mobile-navigation {\n      &.open {\n        display: block;\n      }\n\n      .navigation-items {\n        display: block;\n\n        li {\n          display: block;\n          border-top: var(--site-navigation-item-border);\n\n          &:last-child {\n            border-bottom: none;\n          }\n    \n          a {\n            padding: 0;\n            display: block;\n\n            & > span {\n              padding: 1rem;\n              border-radius: 0;\n              display: block;\n            }\n          }\n\n          &.border {\n            display: none;\n          }\n        }\n      }\n    } // .mobile-navigation\n\n  } // .site-navigation\n\n} // max-width: 1024px","$pattern: url('/assets/images/icon-swift.svg');\n$menu-icon: url('/assets/images/icon-menu.svg');\n$menu-icon-close: url('/assets/images/icon-close.svg');\n$icon-x: url('/assets/images/icon-x.svg');\n$icon-mastodon: url('/assets/images/icon-mastodon.svg');\n$icon-bluesky: url('/assets/images/icon-bluesky.svg');\n$icon-feed: url('/assets/images/icon-feed.svg');\n$icon-github: url('/assets/images/icon-github.svg');\n","@use '../../colors' as *;\n@use '../../graphics' as *;\n@use '../../helpers' as *;\n\n@mixin icon-style($icon) {\n  width: 22px;\n  height: 22px;\n  background-repeat: no-repeat;\n  background-size: 22px;\n  display: block;\n  background-image: $icon;\n}\n\nfooter.global-footer {\n  background-color: #1e162e;\n  padding: 20px;\n  text-align: center;\n  padding: 6rem 3rem 3rem 3.5em;\n  color: rgb(235, 236, 240);\n  position: relative;\n  z-index: 10;\n\n  .container {\n    max-width: 980px;\n    margin: 0 auto;\n  }\n\n  .footer-navigation-container {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    margin-bottom: 5em;\n\n    .logo {\n      display: flex;\n      height: 36px;\n      margin-bottom: 15px;\n\n      svg {\n        height: 100%;\n      }\n\n      #logotype {\n        fill: #ebecf0;\n      }\n    }\n\n    h3 {\n      height: 36px;\n      margin-bottom: 15px;\n      color: #fca76c;\n      font-size: 1.17em;\n      line-height: 1.2;\n      font-weight: bold;\n      display: flex;\n      align-items: center;\n    }\n\n    nav {\n      margin-bottom: 20px;\n      text-align: left;\n\n      ul {\n        list-style: none;\n        padding: 0;\n\n        li {\n          a {\n            font-size: 14px;\n            border-bottom: 1px solid transparent;\n            color: rgb(235, 236, 240);\n            display: inline-block;\n            padding: 0.35em 0;\n\n            &:hover {\n              border-bottom-color: rgb(235, 236, 240);\n            }\n          }\n        }\n      }\n\n      &.governance {\n        display: flex;\n        flex-direction: column;\n\n        // theme toggle\n        .color-scheme-toggle {\n          display: inline-flex;\n          font-size: 14px;\n          border: 1px solid #d1d2d4;\n          border-radius: 15px;\n          padding: 1px;\n          outline: none;\n          margin-top: auto;\n\n          input,\n          legend {\n            @include visuallyhidden;\n            appearance: none;\n          }\n\n          .scheme-light {\n            .color-scheme-toggle-label {\n              border-top-left-radius: 15px;\n              border-bottom-left-radius: 15px;\n            }\n          }\n\n          .scheme-auto-wrapper {\n            .color-scheme-toggle-label {\n              border-top-right-radius: 15px;\n              border-bottom-right-radius: 15px;\n            }\n          }\n        }\n\n        .color-scheme-toggle-label {\n          border: 1px solid transparent;\n          background-color: #1e162e;\n          color: #d1d2d4;\n          display: inline-block;\n          text-align: center;\n          padding: 1px 6px;\n          min-width: 42px;\n          box-sizing: border-box;\n          transition: background-color 0.3s ease;\n\n          &:hover {\n            cursor: pointer;\n          }\n        }\n\n        input:checked + .color-scheme-toggle-label {\n          background: #fca76c;\n          color: #1e162e;\n        }\n      }\n    }\n  }\n\n  .sub-navigation {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    align-items: flex-end;\n    color: #d1d2d4;\n\n    nav {\n      display: inline-block;\n\n      ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        display: inline-flex;\n\n        a {\n          color: #d1d2d4;\n        }\n      }\n    }\n\n    .legals {\n      font-size: 11px;\n      text-align: left;\n\n      .copyright {\n        margin-bottom: 1.5em;\n        line-height: 1.5em;\n\n        p {\n          margin: 0;\n        }\n\n        a {\n          color: #d1d2d4;\n        }\n      }\n\n      nav ul {\n        li {\n          margin-right: 1.75em;\n\n          a {\n            padding: 0.35em 0;\n            border-bottom: 1px solid transparent;\n\n            &:hover {\n              border-bottom-color: #d1d2d4;\n            }\n          }\n        }\n      }\n    }\n\n    .socials {\n      ul li a {\n        display: block;\n        padding: 0 0.6em;\n\n        &:hover {\n          // color: #ebecf0;\n          // color: red;\n        }\n\n        i {\n          &.github {\n            @include icon-style($icon-github);\n          }\n\n          &.bluesky {\n            @include icon-style($icon-bluesky);\n          }\n\n          &.feed {\n            @include icon-style($icon-feed);\n          }\n\n          &.mastodon {\n            @include icon-style($icon-mastodon);\n          }\n\n          &.x {\n            @include icon-style($icon-x);\n          }\n        }\n      }\n    }\n  }\n}\n","@media only screen and (max-width: 1024px) {\n  footer.global-footer {\n    .footer-navigation-container {\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: 3em;\n\n      .logo {\n        margin-bottom: 3em;\n      }\n\n      h3 {\n        height: auto;\n        display: block;\n        align-items: unset;\n      }\n\n      nav {\n        text-align: center;\n        margin-bottom: 30px;\n\n        &.governance {\n          // theme toggle\n          .color-scheme-toggle {\n            margin-top: 3em;\n          }\n        }\n      }\n    }\n\n    .sub-navigation {\n      flex-direction: column;\n      align-items: center;\n\n      .legals {\n        text-align: center;\n        margin-bottom: 50px;\n      }\n    }\n  }\n}\n","body[data-color-scheme=\"dark\"] .logo svg #logotype {\n  fill: #ffffff;\n}\n\nbody[data-color-scheme=\"light\"] .logo svg #logotype {\n  fill: #000000;\n}",".interactive-tabs .tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.interactive-tabs .tabs a {\n  padding: 0.4rem 0.8rem;\n  text-decoration: none;\n  font-family: sans-serif;\n  color: white;\n}\n\n.interactive-tabs .tabs a[aria-pressed='true'] {\n  color: white;\n  border-bottom: 1px solid white;\n}\n","@use '../../helpers' as *;\n\n.callout {\n  gap: 40px;\n  align-items: flex-start;\n  padding: 1em;\n  margin: 2.5em auto;\n  max-width: 980px;\n  box-sizing: border-box;\n  text-align: center;\n\n  > div {\n    min-width: 0;\n  }\n\n  &.with-code {\n    display: grid;\n    grid-template-columns: 2.2fr 3.2fr;\n    text-align: left;\n\n    .text {\n      width: 100%;\n    }\n\n    .code {\n      width: 100%;\n      pre.highlight {\n        border: 1px solid #d5d5d5;\n      }\n    }\n  }\n\n  .links {\n    margin-top: 30px;\n\n    a {\n      @include link-with-right-arrow();\n      display: block;\n      color: white;\n      @include underline;\n      margin-top: 14px;\n\n      i {\n        filter: brightness(0) invert(1);\n      }\n    }\n  }\n}\n\n.callout.reverse {\n  direction: rtl;\n}\n\n.callout.reverse > * {\n  direction: ltr;\n}\n\n.callout-title {\n  margin: -4px 0 3px;\n  font-size: 48px;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n.callout-subtitle {\n  line-height: 1.25;\n  margin-bottom: 4px;\n  font-size: 24px;\n}\n\n.callout-text {\n  text-align: left;\n}\n\n.hide-small {\n  @media only screen and (max-width: 767px) {\n    display: none;\n  }\n}\n","@media only screen and (max-width: 1024px) {\n  .callout.with-code {\n    grid-template-columns: 1fr;\n  }\n}\n",".overlapping-containers {\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 1024px;\n\n  .box-left {\n    background: white;\n    width: 50%;\n    padding: 1rem 1.5rem;\n    font-size: 1rem;\n    display: inline-block;\n    position: relative;\n    z-index: 2;\n  }\n\n  .box-right {\n    background: rgba(0, 0, 0, 0.7);\n    width: 50%;\n    color: white;\n    padding: 3rem 1rem 3rem 12rem;\n    display: inline-block;\n    position: relative;\n    z-index: 1;\n    font-size: 1rem;\n    line-height: 1.5;\n    margin-left: -10rem;\n    text-align: left;\n  }\n}\n","@media only screen and (max-width: 1024px) {\n  .overlapping-containers {\n    max-width: 100%;\n    flex-direction: column;\n    margin: 0 20px;\n\n    .box-left {\n      width: 100%;\n      box-sizing: border-box;\n      margin-bottom: 20px;\n    }\n\n    .box-right {\n      width: 100%;\n      box-sizing: border-box;\n      margin-left: 0;\n      padding-left: 1rem;\n    }\n  }\n}\n",".carousel-container {\n  width: 100%;\n  max-width: 100vw;\n  margin: auto;\n}\n\n.carousel {\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.carousel::-webkit-scrollbar {\n  display: none;\n}\n\n.carousel-track {\n  display: flex;\n  gap: 1rem;\n  padding: 1rem 0;\n}\n\n.carousel-item {\n  scroll-snap-align: start;\n  flex: 0 0 calc((100% - 3rem) / 3.5);\n  background-color: #f3f4f6;\n  border-radius: 10px;\n  padding: 2rem;\n  min-height: 250px;\n  font-size: 1.2rem;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n  box-sizing: border-box;\n}\n\n.carousel-buttons {\n  text-align: center;\n  margin-top: 1rem;\n}\n\n.carousel-btn {\n  padding: 0.75rem 1.5rem;\n  margin: 0 0.5rem;\n  border: none;\n  border-radius: 8px;\n  background-color: #e5e7eb;\n  font-size: 1.2rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.carousel-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n",".authors {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 1.25em;\n  margin-bottom: 1.2em;\n\n  @media (max-width: 767px) {\n    grid-template-columns: 1fr;\n\n    .author {\n      flex: initial;\n      max-width: none !important;\n    }\n  }\n\n  &.fullwidth {\n    grid-template-columns: repeat(1, 1fr);\n    color: var(--color-syntax-plain-text);\n  }\n\n  &.compact {\n    display: flex;\n    flex-wrap: wrap;\n\n    .author:not(:last-child)::after {\n      content: \"\";\n      position: absolute;\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 1px;\n      height: 100%;\n      background-color: var(--blog-divider-border);\n    }\n  }\n\n  .author {\n    display: flex;\n    flex-wrap: wrap;\n    align-content: center;\n    position: relative;\n    padding-right: .7rem;\n\n    .byline {\n      display: flex;\n      align-items: center;\n      gap: 0.5em;\n      font-size: 14px;\n\n      img {\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: 1px solid var(--color-fill-gray);\n      }\n\n      a {\n        text-decoration: none;\n        color: var(--site-link-with-right-arrow-color);\n      }\n    }\n\n    .about {\n      flex-basis: 100%;\n      font-size: 14px;\n      font-weight: 400;\n      color: var(--color-figure-gray-tertiary);\n      border-left: 1px solid var(--color-figure-gray-tertiary);\n      padding: 14px 0;\n    }\n  }\n}","@use 'sass:color';\n@use '../helpers' as *;\n@use '../graphics' as *;\n\n$icons: (\n  'cloud',\n  'mobile',\n  'chip',\n  'desktop',\n  'websites',\n  'games',\n  'ai',\n  'command-line',\n  'packages'\n);\n\n.section {\n  text-align: center;\n\n  h2 {\n    font-size: 45px;\n    color: #3d3d3d;\n    letter-spacing: 0;\n    text-align: center;\n    font-weight: 600;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  .callout-subtitle {\n    margin-bottom: 22px;\n  }\n}\n\n.animation-container {\n  aspect-ratio: 1248 / 1116;\n  top: calc(66px - 9.5vw);\n  left: 0;\n  width: 57vw;\n  min-width: 500px;\n  position: absolute;\n  z-index: 1;\n  pointer-events: none;\n\n  @media only screen and (max-width: 800px) {\n    // start to crop in hero from the left\n    width: 500px;\n    left: initial;\n    right: 50%;\n    top: 11px;\n    transform: translateX(14%);\n  }\n\n  canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n  }\n}\n\n#what-is-swift {\n  padding-top: 72px; // height of navigation, plus standard\n  padding-bottom: 8vw;\n  text-align: center;\n  position: relative;\n  background-image: var(--homepage-hero-bg);\n  @include noise();\n\n  @media only screen and (max-width: 1024px) {\n    & {\n      padding: calc(72px + 142px) 10px 24vw;\n      padding-left: 10px;\n      padding-right: 10px;\n    }\n  }\n\n  .hero-content {\n    margin-top: 18vw;\n    z-index: 5;\n\n    @media only screen and (max-width: 1024px) {\n      margin-top: 48px;\n    }\n  }\n\n  h1 {\n    font-size: 48px;\n    line-height: 1.2;\n    color: var(--site-code-box-text);\n    letter-spacing: 0;\n    text-align: center;\n    font-weight: 600;\n    margin-bottom: 30px;\n    position: relative;\n    z-index: 3;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  /* Install */\n  .hero-content > a {\n    @include big-button();\n  }\n\n  /* Platform Support */\n  .hero-content > p {\n    opacity: 0.66;\n    font-size: 17px;\n    color: var(--homepage-install-text);\n    font-weight: 500;\n    margin-top: 11px;\n  }\n\n  /* Get Started */\n  h2 {\n    font-size: 32px;\n    color: var(--site-text-color);\n    letter-spacing: 0;\n    text-align: center;\n    font-weight: 400;\n    margin-top: 70px;\n    margin-bottom: 29px;\n    position: relative;\n    z-index: 1;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  .sub-text > h2 {\n    font-size: 32px;\n    color: var(--site-code-box-text);\n    letter-spacing: 0;\n    text-align: center;\n    font-weight: 400;\n    margin-top: 20px;\n    margin-bottom: 60px;\n    position: relative;\n    z-index: 1;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 28px;\n      margin-bottom: 30px;\n      line-height: 1.33;\n    }\n  }\n\n  nav[aria-label='Get started with Swift'] {\n    max-width: 980px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 5;\n\n    ul {\n      display: flex;\n\n      li {\n        a {\n          display: flex;\n          text-decoration: none;\n          color: var(--home-quicklinks-color);\n          background-color: var(--home-quicklinks-bg);\n          // background-color: #fff;\n          font-weight: 400;\n          border-radius: 36px;\n          font-size: 14px;\n          padding: 12px;\n          transition:\n            background-color 0.2s ease,\n            color 0.2s ease;\n\n          /* Icon inside button */\n          i {\n            width: 20px;\n            height: 20px;\n            background-repeat: no-repeat;\n            background-size: contain;\n            background-position: center;\n            display: inline-block;\n            vertical-align: middle;\n            background-color: var(--home-quicklinks-color);\n\n            @each $name in $icons {\n              &.#{$name} {\n                mask: url('/assets/images/icon-#{$name}.svg')\n                  center /\n                  contain\n                  no-repeat;\n                -webkit-mask: url('/assets/images/icon-#{$name}.svg')\n                  center /\n                  contain\n                  no-repeat;\n              }\n            }\n          }\n\n          /* Hover/focus styles */\n          &:hover,\n          &:focus {\n            // background-color: rgba(230, 150, 80, 0.9);\n            // background-color: color.adjust($foo, $lightness: -10%);\n            outline: none;\n          }\n\n          &:focus-visible {\n            outline: 2px solid dodgerblue;\n            outline-offset: 2px;\n          }\n        }\n      }\n\n      &.primary-links {\n        gap: 20px;\n        margin-bottom: 20px;\n\n        li {\n          flex: 1; // equal width\n\n          a {\n            text-align: left;\n            padding: 25px;\n            gap: 12px;\n\n            .title {\n              font-size: 24px;\n              font-weight: 600;\n              text-transform: capitalize;\n            }\n\n            .subtitle {\n              line-height: 1.4;\n            }\n\n            i {\n              width: 40px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      &.secondary-links {\n        gap: 15px;\n        flex-wrap: wrap;\n\n        li {\n          flex-grow: 1; // varied width\n\n          a {\n            justify-content: center;\n\n            .title {\n              font-weight: 400;\n              white-space: nowrap;\n            }\n          }\n        }\n      }\n    }\n\n    /* Mobile */\n    @media only screen and (max-width: 1024px) {\n      max-width: 100%;\n\n      ul {\n        &.primary-links {\n          flex-direction: column;\n        }\n\n        &.secondary-links {\n          gap: 0;\n\n          li {\n            a {\n              background: none;\n              padding: 8px 12px;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .swoop-0 {\n    @include swoop-ratio(2048, 687, 1.2);\n    @include lazyloadBg('/assets/images/landing-page/swoops/swoop-0.png');\n    z-index: 1;\n    background-size: 120%;\n    background-position: 45% 0;\n  }\n} // what-is-swift\n\n.pillar-wrapper {\n  text-align: center;\n  margin: auto;\n  padding: 4vw 0 32px;\n  max-width: 720px;\n  .pillar-headline {\n    font-size: 48px;\n    line-height: 1.2;\n    margin-bottom: 16px;\n  }\n\n  @media only screen and (max-width: 1024px) {\n    text-align: left;\n    padding: 4vw 0 32px;\n    max-width: none;\n\n    .pillar-headline {\n      text-align: left;\n    }\n  }\n\n  .pillar-intro {\n    font-size: 24px;\n    line-height: 1.45;\n  }\n}\n\n.pillar {\n  padding: 13.88vw 0;\n  position: relative;\n  overflow: visible;\n\n  @include noise();\n}\n\n.swoop {\n  transition: opacity 0.5s;\n  display: block;\n  background: none no-repeat;\n  background-size: 120%;\n  background-position: -25% 0;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  transform: translateY(50%);\n  pointer-events: none;\n}\n\n.code {\n  text-align: left;\n  margin: 0 auto 10px;\n  max-width: 900px;\n  position: relative;\n  z-index: 10;\n\n  pre.highlight {\n    border-radius: 20px;\n    padding: 28px;\n    backdrop-filter: blur(10px);\n    background: rgba(255, 255, 255, 0.5);\n  }\n}\n\nbody[data-color-scheme='dark'] {\n  .callout.with-code {\n    .code {\n      pre.highlight {\n        border: 1px solid #575757;\n        background: #111727;\n      }\n    }\n  }\n}\n\n#pillar-1 {\n  background-image: var(--homepage-pillar-1-bg);\n  padding: 11.88vw 0 16.88vw;\n  color: var(--site-text-color);\n\n  .swoop {\n    @include swoop-ratio(444, 97, 1.33);\n    z-index: 1;\n    background-size: 133%;\n    background-position: 60% 0;\n    @include lazyloadBg('/assets/images/landing-page/swoops/swoop-1.png');\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding-top: 17.88vw;\n  }\n}\n\n#pillar-2 {\n  padding: 0.94vw 0 12.5vw;\n  background-image: var(--homepage-pillar-2-bg);\n\n  .swoop {\n    @include swoop-ratio(2624, 1073, 1.33);\n    z-index: 1;\n    background-size: 133%;\n    background-position: 45% 0;\n    @include lazyloadBg('/assets/images/landing-page/swoops/swoop-2.png');\n    bottom: -5vw;\n  }\n}\n\n#pillar-3 {\n  background-image: var(--homepage-pillar-3-bg);\n  padding: 5vw 0 40px;\n\n  .callout {\n    color: white;\n    max-width: 760px;\n  }\n\n  .callout-text {\n    text-align: center;\n  }\n}\n","#exception {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--exception-page-bg);\n  color: var(--site-text-color);\n\n  .content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    padding: 18vw 0;\n\n    h1 {\n      font-size: 48px;\n    }\n\n    @media only screen and (max-width: 1024px) {\n      margin: 90px 0;\n    }\n  }\n}\n","@use '../helpers' as *;\n\n.os-selection-navigation {\n  max-width: 980px;\n  width: 100%;\n  margin: 0 auto;\n  color: white;\n  box-sizing: border-box;\n  padding-bottom: 20px;\n  position: relative;\n  z-index: 2;\n\n  h1 {\n    font-size: 48px;\n    // TODO double check lineheight\n    line-height: 1.2;\n    margin-bottom: 25px;\n    text-align: center;\n    color: var(--site-text-color);\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 0 20px;\n  }\n\n  & > h1 {\n    font-size: 44px;\n  }\n\n  & > h2 {\n    color: var(--site-text-color);\n    margin-top: 60px;\n  }\n\n  & > p {\n    font-size: 1.4em;\n    margin: 20px 0 40px;\n  }\n\n  a {\n    color: white;\n  }\n\n  label {\n    margin: 10px 0 20px;\n    display: block;\n    color: var(--site-text-color);\n  }\n\n  .tab-nav {\n    @media only screen and (max-width: 1024px) {\n      max-width: 100%;\n    }\n\n    .tabs {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      width: fit-content;\n      margin: auto;\n      background: var(--site-tabs-background);\n      border-radius: 10px;\n\n      a {\n        text-align: center;\n        padding: 8px 18px;\n        color: var(--site-text-color);\n        text-decoration: none;\n        font-weight: 400;\n\n        &.active {\n          background: var(--site-tabs-active-background);\n          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);\n          border-radius: 10px;\n          color: var(--site-text-color);;\n          font-weight: 600;\n        }\n      }\n\n      @media only screen and (max-width: 1024px) {\n        gap: 6px;\n      }\n    }\n  }\n}\n","@use '../helpers' as *;\n@use '../elements/os-selection-navigation';\n\n#install {\n  @include noise();\n  position: relative;\n  background-image: var(--install-page-bg);\n  padding: 160px 0;\n\n  .content {\n    max-width: 980px;\n    width: 100%;\n    margin: 0 auto;\n    box-sizing: border-box;\n    border-radius: 22px;\n    position: relative;\n    z-index: 2;\n\n    @media only screen and (max-width: 1024px) {\n      padding: 20px;\n    }\n\n    h2 {\n      color: var(--site-text-color);\n      text-align: left;\n      margin-top: 60px;\n      position: relative;\n      z-index: 10;\n      line-height: 1.2em;\n    }\n\n    h3 {\n      color: var(--site-text-color);\n      text-align: left;\n      margin-top: 40px;\n      font-size: 22px;\n    }\n\n    div p.content-copy {\n      margin-bottom: 20px;\n      text-align: left;\n\n      &:only-child {\n        margin: 0;\n      }\n\n      a {\n        color: var(--site-text-color) !important;\n\n        &.content-link {\n          @include link-with-right-arrow;\n          margin-top: 10px;\n          display: flex;\n          @include underline;\n\n          &.block {\n            justify-content: center;\n            font-size: 2em;\n          }\n\n          i {\n            filter: var(--site-content-link-with-right-arrow-icon-filter);\n          }\n        }\n      }\n    }\n\n    .callout {\n      h2 {\n        text-align: inherit;\n      }\n\n      div p.content-copy {\n        text-align: inherit;\n      }\n    }\n  }\n\n  .swoop-1 {\n    @include swoop-ratio(2624, 1073, 1.33);\n    background-size: 166% auto;\n    background-position: 47% 0%;\n    top: -20vw;\n    background-image: url(/assets/images/shared-swoops/swoop-0.png);\n\n    @media only screen and (max-width: 768px) {\n      top: -4vw;\n    }\n  }\n}\n\n.release-box {\n  width: 100%;\n  position: relative;\n  margin-top: 40px;\n\n  thead th {\n    border-collapse: separate;\n    background: var(--install-release-box-th-bg);\n\n    &:first-child {\n      border-top-left-radius: 10px;\n    }\n\n    &:last-child {\n      border-top-right-radius: 10px;\n    }\n  }\n\n  details {\n    summary {\n      font-size: 22px;\n      font-weight: 600;\n      display: list-item;\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n  }\n\n  table {\n    width: 100%;\n    margin: 40px 0;\n    table-layout: auto;\n\n    td {\n      button {\n        border: 0;\n        background: var(--install-release-box-th-bg);\n        border-radius: 10px;\n        padding: 6px 15px;\n        color: var(--site-link-with-right-arrow-color);\n\n        &:hover {\n          cursor: pointer;\n        }\n      }\n\n      a {\n        display: block;\n\n        &.debug {\n          font-size: 12px;\n        }\n      }\n    }\n  }\n\n  tr {\n    background-color: var(--install-release-box-tr-bg);\n    border-bottom: var(--install-release-box-tr-border-bottom);\n  }\n\n  table th,\n  table td {\n    padding: 12px 16px;\n    text-align: left;\n  }\n\n  table th.download {\n    font-weight: 600;\n    color: var(--install-release-box-th-color);\n  }\n\n  table td a {\n    color: var(--site-link-with-right-arrow-color);\n    text-decoration: none;\n  }\n\n  table td a:hover {\n    text-decoration: underline;\n  }\n\n  @media only screen and (max-width: 768px) {\n    table th,\n    table td {\n      padding: 10px 8px;\n      font-size: 14px;\n    }\n\n    table {\n      font-size: 14px;\n    }\n\n    table thead {\n      display: none;\n    }\n\n    table tr {\n      display: block;\n      margin-bottom: 6px;\n      border-bottom: 1px solid #f2f2f2;\n    }\n\n    table td {\n      display: block;\n      position: relative;\n    }\n\n    table td::before {\n      content: attr(data-label);\n      position: absolute;\n      left: 16px;\n      width: 45%;\n      text-align: left;\n      font-weight: bold;\n      color: #666;\n    }\n  }\n\n  .code-box {\n    width: 100%;\n    margin: 0;\n    padding: 20px;\n\n    h2 {\n      color: var(--site-code-box-text) !important;\n      font-size: 22px !important;\n      margin: 0 0 10px 0 !important;\n    }\n\n    pre {\n      overflow: scroll;\n    }\n\n    .button-list {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      justify-content: flex-start;\n    }\n\n    ul {\n      list-style: disc;\n      padding-left: 20px;\n\n      li code {\n        word-break: break-word;\n      }\n    }\n\n    p.body-copy {\n      flex-grow: 1;\n\n      button {\n        border: 0;\n        background: var(--install-release-box-th-bg);\n        border-radius: 10px;\n        padding: 6px 15px;\n        color: var(--site-link-with-right-arrow-color);\n\n        &:hover {\n          cursor: pointer;\n        }\n      }\n    }\n\n    .content-body {\n      flex-grow: 1;\n      width: 100%;\n    }\n  }\n\n  .content {\n    background-color: var(--install-site-code-box-bg);\n    max-width: 900px;\n    width: 900px;\n    margin: 0 auto;\n    z-index: 3;\n    box-sizing: border-box;\n    position: relative;\n    text-align: left;\n    padding: 20px;\n    height: 100%;\n\n    & > h3 {\n      font-size: 24px;\n      font-weight: 600;\n      margin-bottom: 20px;\n    }\n\n    & > p {\n      margin-bottom: 10px;\n    }\n  }\n}\n\n.releases-grid {\n  display: inline-grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 40px;\n  width: 100%;\n  margin: 40px 0 0;\n\n  @media only screen and (max-width: 768px) {\n    grid-template-columns: 1fr;\n  }\n\n  .release-box {\n    display: flex;\n    flex-direction: column;\n    margin-top: 0;\n\n    .content {\n      display: flex;\n      flex-direction: column;\n\n      .code-box {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 150px;\n      }\n    }\n  }\n}\n","@use '../helpers' as *;\n\n.get-started {\n  color: var(--site-text-color);\n  position: relative;\n  background: var(--get-started-page-bg);\n  @include noise();\n}\n\n.content-wrapper {\n  width: min(980px, calc(100vw - 20px));\n  margin: auto;\n  // to place above noise\n  position: relative;\n  z-index: 1;\n}\n\n.hero-card {\n  aspect-ratio: 980 / 473;\n  border-radius: 22px;\n  overflow: hidden;\n  margin-bottom: 50px;\n  position: relative;\n  z-index: 2;\n}\n\n#get-started-hero {\n  position: relative;\n  background-image: linear-gradient(-16deg, #c49db2 1%, #7959d3 70%);\n  padding: 160px 0 100px;\n\n  .hero-content {\n    margin-left: 10px;\n    margin-right: 10px;\n\n    & > a {\n      @include big-button();\n      background-image: linear-gradient(to bottom right, #b0585e, #fd8d81);\n      padding: 15px 41px;\n      font-size: 28px;\n    }\n\n    h1 {\n      font-size: 48px;\n      font-weight: 600;\n      color: white;\n      letter-spacing: 0;\n      text-align: center;\n      margin-bottom: 20px;\n      position: relative;\n      z-index: 1;\n\n      @media only screen and (max-width: 768px) {\n        font-size: 32px;\n        line-height: 1.33;\n      }\n    }\n\n    > p {\n      font-size: 24px;\n      color: white;\n      font-weight: 500;\n      margin-bottom: 60px;\n      z-index: 1;\n      position: relative;\n      max-width: 980px;\n      margin: auto;\n    }\n\n    ul {\n      max-width: 980px;\n      margin: 80px auto 40px;\n      position: relative;\n      z-index: 5;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n\n      @media only screen and (max-width: 768px) {\n        & {\n          grid-template-columns: 1fr;\n        }\n      }\n\n      li {\n        display: inline-block;\n        font-weight: 400;\n        padding: 16px 16px 20px;\n        background-color: var(--get-started-boxes-bg);\n        border-radius: 20px;\n        font-size: 14px;\n        white-space: nowrap;\n\n        span {\n          display: block;\n          text-align: left;\n\n          &.title {\n            font-size: 24px;\n            font-weight: 600;\n            margin-bottom: 10px;\n            line-height: 1.2;\n          }\n\n          &.text {\n            font-size: 14px;\n            white-space: normal;\n            line-height: 1.3;\n          }\n        }\n      }\n    }\n\n    .swoop {\n      z-index: 1;\n\n      &.swoop-1 {\n        @include swoop-ratio(2624, 1073, 1.33);\n        background-size: 144% auto;\n        background-position: 0% 0%;\n        top: -60vw;\n        background-image: url(/assets/images/get-started/cloud-services-hero-top.png);\n      }\n\n      &.swoop-2 {\n        aspect-ratio: 2271 / 682;\n        bottom: -6vw;\n        left: 0;\n        background: url(/assets/images/get-started/hero-bottom.png);\n        background-size: cover;\n        z-index: 0;\n      }\n    }\n  }\n}\n\n.card-grid {\n  line-height: 1.53;\n  margin-bottom: 50px;\n\n  .content {\n    padding: 30px 50px 20px;\n    background-color: var(--get-started-card-primary-bg);\n    max-width: 980px;\n    margin: 0 auto;\n    z-index: 3;\n    box-sizing: border-box;\n    position: relative;\n    border-radius: 22px;\n\n    @media only screen and (max-width: 1024px) {\n      width: auto;\n      margin: 0 10px;\n    }\n\n    @media only screen and (max-width: 768px) {\n      padding: 22px 15px 10px;\n    }\n\n    .section-icon {\n      width: 60px;\n      margin: 40px 0 0;\n    }\n\n    h2 {\n      text-align: center;\n      font-size: 48px;\n      margin-bottom: 52px;\n      color: var(--site-text-color);\n\n      @media only screen and (max-width: 768px) {\n        font-size: 32px;\n        line-height: 1.33;\n        margin-bottom: 22px;\n      }\n    }\n\n    a {\n      @include link-with-right-arrow();\n\n      @media only screen and (max-width: 768px) {\n        padding-bottom: 15px;\n      }\n    }\n\n    .primary-cards,\n    .secondary-cards,\n    .tertiary-cards {\n      margin-bottom: 22px;\n      li {\n        border-radius: 22px;\n      }\n    }\n\n    .secondary-cards {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n\n      li {\n        background-color: var(--get-started-card-secondary-bg);\n        display: flex;\n        align-items: center;\n        gap: 20px;\n        min-height: 140px;\n        text-align: left;\n        border-radius: 22px;\n        overflow: hidden;\n\n        @media only screen and (max-width: 768px) {\n          flex-direction: column;\n        }\n\n        img {\n          width: 168px;\n          height: 180px;\n          object-fit: cover;\n          flex-shrink: 0;\n          background-color: #f6f6f6;\n\n          @media only screen and (max-width: 768px) {\n            width: 100%;\n            height: auto;\n          }\n        }\n\n        div {\n          display: flex;\n          flex-direction: column;\n          flex: 1;\n          min-height: 140px;\n          position: relative;\n          padding: 20px;\n\n          .name {\n            font-size: 24px;\n            line-height: 1.25;\n            margin-bottom: 10px;\n          }\n\n          .text {\n            font-size: 17px;\n            flex-grow: 1;\n          }\n        }\n      }\n    }\n\n    .tertiary-cards,\n    .primary-cards {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n      // padding: 0 0 40px;\n\n      li {\n        background-color: var(--get-started-card-secondary-bg);\n        padding: 20px 30px 20px 20px;\n        display: flex;\n        text-align: left;\n\n        div {\n          display: flex;\n          flex-direction: column;\n          flex: 1;\n          position: relative;\n\n          .name {\n            font-size: 24px;\n            line-height: 1.25;\n            margin-bottom: 10px;\n          }\n\n          .text {\n            font-size: 17px;\n            flex-grow: 1;\n          }\n        }\n      }\n\n      @media only screen and (max-width: 768px) {\n        grid-template-columns: 1fr;\n      }\n    }\n\n    .tertiary-cards {\n      img {\n        width: 45px;\n        height: 45px;\n        border-radius: 8px;\n        margin-right: 13px;\n      }\n    }\n\n    .primary-cards {\n      gap: 16px;\n\n      li {\n        flex-direction: column;\n        background: none;\n        padding: 0;\n\n        div {\n          background: none;\n\n          .name {\n            margin-bottom: 6px;\n          }\n\n          .text {\n            margin-bottom: 5px;\n          }\n        }\n      }\n\n      img {\n        aspect-ratio: 430 / 273;\n        object-fit: cover;\n        border-radius: 22px;\n        margin-bottom: 19px;\n      }\n    }\n  }\n}\n\n.image-text-row {\n  margin: 60px auto 70px;\n\n  &.background {\n    border-radius: 22px;\n    padding: 28px 50px 25px 50px;\n    background: var(--get-started-card-primary-bg);\n    box-sizing: border-box;\n\n    .card-wrapper:first-child {\n      // Maintain vertical space when there is no headline\n      margin-top: 10px;\n    }\n\n    @media only screen and (max-width: 768px) {\n      padding-bottom: 8px;\n\n      .card-wrapper:first-child {\n        // Maintain vertical space when there is no headline\n        margin-top: 0;\n      }\n    }\n  }\n\n  h2 {\n    font-size: 48px;\n    line-height: 1.2;\n    margin-bottom: 44px;\n    width: 100%;\n    text-align: center;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  .card-wrapper {\n    display: flex;\n    align-items: stretch;\n  }\n\n  img {\n    width: 350px;\n    object-fit: contain;\n    object-position: center;\n  }\n\n  h3 {\n    margin-bottom: 8px;\n    font-weight: 600;\n  }\n\n  h3,\n  span {\n    text-align: left;\n    font-size: 10px;\n    font-weight: 400;\n  }\n\n  .copy-wrapper {\n    border-radius: 4px;\n    padding: 3px 27px 19px 35px;\n    text-align: left;\n\n    h3 {\n      font-size: 22px;\n      font-weight: 600;\n    }\n\n    h3 {\n      margin-bottom: 17px;\n    }\n\n    p {\n      margin-bottom: 25px;\n    }\n\n    a {\n      @include link-with-right-arrow();\n      margin-top: 2px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .card-wrapper {\n      flex-direction: column;\n    }\n\n    img {\n      width: 100%;\n      margin-bottom: 20px;\n    }\n  }\n}\n\n.code-box {\n  // TODO consolidate styles from pages and move into elements partial\n  background-color: var(--install-site-code-box-bg);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-align: left;\n  padding: 37px 50px 41px 50px;\n  margin-bottom: 70px;\n  box-sizing: border-box;\n  border-radius: 22px;\n\n  pre {\n    max-height: 400px;\n    border: var(--get-started-code-box-pre-border);\n\n    code {\n      white-space: pre-wrap;\n    }\n  }\n\n  &.code-box-with-tabs {\n    overflow: hidden;\n\n    h2 {\n      font-size: 22px;\n      line-height: 1.2;\n      margin-bottom: 5px;\n\n      @media only screen and (max-width: 768px) {\n        font-size: 32px;\n        line-height: 1.33;\n      }\n    }\n\n    pre {\n      display: none;\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  &-tabs {\n    margin-bottom: 20px;\n    padding-left: 0 !important;\n\n    button {\n      border: none;\n      background: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    li {\n      display: inline-block;\n      padding: 5px;\n\n      &.active {\n        border-bottom: 2px solid #8d8d8d;\n        margin-bottom: -1px;\n      }\n    }\n\n    @media only screen and (max-width: 768px) {\n      overflow: scroll;\n      padding-bottom: 1px;\n    }\n  }\n\n  .link-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    a {\n      text-align: left;\n      margin-bottom: 10px;\n    }\n  }\n\n  .link-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 5px;\n  }\n\n  .link-single {\n    display: flex;\n  }\n\n  h2 {\n    font-size: 48px;\n    margin-bottom: 27px;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  p,\n  a {\n    font-size: 17px;\n  }\n\n  p {\n    margin-bottom: 26px;\n  }\n\n  pre {\n    border-radius: 22px;\n    background: var(--install-site-code-box-pre-bg);\n    align-self: stretch;\n    text-align: left;\n    font-size: 17px;\n    color: var(--site-code-box-text);\n    padding: 29px 22px;\n    margin-bottom: 18px;\n    overflow: scroll;\n\n    + .link-wrapper {\n      margin-top: 10px;\n    }\n  }\n\n  a {\n    @include link-with-right-arrow;\n  }\n\n  @media only screen and (max-width: 768px) {\n    nav {\n     width: 100%;\n\n      ul {\n        white-space: nowrap;\n      }\n    }\n  }\n}\n\n.headline-section {\n  margin: 0 auto 70px;\n\n  hr {\n    max-width: 536px;\n    background: #727272;\n    border-radius: 3px;\n    margin: 0;\n    height: 1px;\n    border: none;\n\n    &.top-hr {\n      margin: 0 auto 48px;\n    }\n\n    &.bottom-hr {\n      margin: 60px auto 0;\n    }\n  }\n\n  .copy-wrapper {\n    max-width: 777px;\n    margin: 0 auto;\n    text-align: center;\n  }\n\n  h2 {\n    font-size: 48px;\n    font-weight: 600;\n    margin-bottom: 29px;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  p {\n    font-size: 17px;\n    padding: 0 100px;\n    margin-bottom: 45px;\n\n    @media only screen and (max-width: 768px) {\n      padding: 0;\n    }\n  }\n\n  a {\n    font-size: 17px;\n    @include link-with-right-arrow;\n  }\n}\n\n.full-width-text-image-column {\n  margin: 0 auto 70px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 0 100;\n\n  .text-wrapper {\n    max-width: 598px;\n    padding: 0 10px;\n    margin-bottom: 32px;\n  }\n\n  h2 {\n    font-size: 48px;\n    margin-bottom: 30px;\n    line-height: 1.2;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  p {\n    margin-bottom: 11px;\n  }\n\n  a {\n    @include link-with-right-arrow;\n  }\n}\n\n.full-width-text-code-column {\n  &.background {\n    border-radius: 22px;\n    padding: 50px;\n    background: var(--get-started-card-primary-bg);\n    box-sizing: border-box;\n\n    .code {\n      background: var(--get-started-code-box-pre-bg);\n      max-height: 400px;\n      overflow: scroll;\n    }\n  }\n\n  margin: 0 auto 70px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  .text-wrapper {\n    max-width: 598px;\n    padding: 0 10px;\n    margin-bottom: 32px;\n  }\n\n  .code {\n    max-width: none;\n    width: 100%;\n    border: var(--get-started-code-box-pre-border);\n    border-radius: 22px;\n    background: var(--get-started-code-box-pre-bg);\n    overflow: hidden;\n\n    .highlight {\n      background: var(--get-started-code-box-pre-bg);\n    }\n  }\n\n  h2 {\n    font-size: 48px;\n    margin-bottom: 30px;\n    line-height: 1.2;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  p {\n    margin-bottom: 11px;\n  }\n\n  a {\n    @include link-with-right-arrow;\n  }\n\n  @media only screen and (max-width: 768px) {\n    .code {\n      margin: 0 0 32px;\n      width: 100%;\n    }\n  }\n}\n\n.code-text-row {\n  margin: 60px auto 70px;\n\n  h2 {\n    font-size: 48px;\n    margin-bottom: 44px;\n    width: 100%;\n    text-align: center;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  .card-wrapper {\n    display: flex;\n    align-items: stretch;\n  }\n\n  .code {\n    flex: 1;\n    margin-right: 40px;\n    border: var(--get-started-code-box-pre-border);\n    border-radius: 22px;\n    height: fit-content;\n    overflow: hidden;\n    pre.highlight {\n      background: var(--get-started-code-box-pre-bg);\n    }\n  }\n\n  h3 {\n    margin-bottom: 8px;\n    font-weight: 600;\n  }\n\n  h3,\n  span {\n    text-align: left;\n  }\n\n  .copy-wrapper {\n    border-radius: 4px;\n    padding: 3px 0 19px 0px;\n    text-align: left;\n    width: 350px;\n\n    h3 {\n      font-size: 22px;\n      font-weight: 600;\n    }\n\n    h3 {\n      margin-bottom: 17px;\n    }\n\n    p {\n      margin-bottom: 25px;\n    }\n\n    a {\n      @include link-with-right-arrow();\n      margin-top: 2px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .card-wrapper {\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .code {\n      width: 100%;\n      margin: 0 0 32px;\n    }\n\n    .copy-wrapper {\n      padding: 0;\n      width: auto;\n    }\n  }\n}\n\n.code-image-column {\n  margin: 60px auto 70px;\n\n  .text-wrapper {\n    max-width: 598px;\n    padding: 0 10px;\n    margin: 0 auto 32px;\n    text-align: center;\n  }\n\n  h2 {\n    font-size: 48px;\n    margin-bottom: 30px;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  p {\n    margin-bottom: 11px;\n  }\n\n  a {\n    @include link-with-right-arrow;\n  }\n\n  .card-wrapper {\n    display: flex;\n    align-items: stretch;\n  }\n\n  .code {\n    flex: 1;\n    margin-right: 40px;\n    border: var(--get-started-code-box-pre-border);\n    border-radius: 22px;\n    overflow: hidden;\n    pre.highlight {\n      background: var(--get-started-card-primary-bg);\n    }\n  }\n\n  h3 {\n    margin-bottom: 8px;\n    font-weight: 600;\n  }\n\n  h3,\n  span {\n    text-align: left;\n  }\n\n  img {\n    border-radius: 4px;\n    padding: 3px 0 19px 0px;\n    text-align: left;\n    width: 350px;\n    object-fit: contain;\n    object-position: top;\n\n    h3 {\n      font-size: 22px;\n      font-weight: 600;\n    }\n\n    h3 {\n      margin-bottom: 17px;\n    }\n\n    p {\n      margin-bottom: 25px;\n    }\n\n    a {\n      @include link-with-right-arrow();\n      margin-top: 2px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .card-wrapper {\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .code {\n      margin: 0 0 32px;\n      width: 100%;\n    }\n\n    img {\n      max-width: none;\n      width: 100%;\n      padding: 0;\n    }\n  }\n}\n\n.link-columns {\n  padding-top: 37px;\n  margin-bottom: 70px;\n  border-radius: 22px;\n  background: var(--get-started-card-primary-bg);\n\n  h2 {\n    font-size: 48px;\n    margin-bottom: 44px;\n    text-align: center;\n\n    @media only screen and (max-width: 768px) {\n      font-size: 32px;\n      line-height: 1.33;\n    }\n  }\n\n  h3 {\n    font-size: 22px;\n    font-weight: 600;\n    margin-bottom: 24px;\n  }\n\n  .link-grid {\n    padding: 0 60px 41px 60px;\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    column-gap: 20px;\n\n    .link-column {\n      text-align: center;\n    }\n  }\n\n  a {\n    @include link-with-right-arrow();\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  @media only screen and (max-width: 768px) {\n    .link-grid {\n      grid-template-columns: 1fr;\n      padding: 0 0 41px 0;\n\n      .link-column {\n        margin-bottom: 17px;\n      }\n    }\n  }\n}\n\n.stand-alone-link {\n  background: var(--get-started-card-primary-bg);\n  padding: 20px 50px;\n  opacity: 0.9;\n  border-radius: 20px;\n  width: fit-content;\n  margin: auto;\n  display: block;\n  margin-bottom: 90px;\n  position: relative;\n  z-index: 1;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  a {\n    @include link-with-right-arrow;\n  }\n}\n","@use 'sass:color';\n@use '../helpers' as *;\n@use '../graphics' as *;\n@use '../_colors.scss';\n\n@mixin dropdown-border {\n  outline: 2px solid var(--blog-dropdown-toggle-outset-outline-color-active);\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0px;\n    bottom: 0;\n    left: 0px;\n    right: 0px;\n    border: 2px solid var(--blog-dropdown-toggle-inset-outline-color-active);\n    border-radius: 22px;\n    pointer-events: none;\n  }\n}\n\n@mixin line-clamp($lines) {\n  max-height: $lines * 1.5em;\n  line-clamp: 2;\n  -webkit-line-clamp: 2;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.blog {\n  padding-bottom: 135px;\n  color: var(--site-text-color);\n  position: relative;\n  background: var(--get-started-page-bg);\n  @include noise();\n\n  .blog-swoop {\n    width: 100%;\n    background-image: url(/assets/images/shared-swoops/swoop-0.png);\n    background-repeat: no-repeat;\n    background-size: 150% auto;\n    background-position: center -10vw;\n    position: absolute;\n    top: 0;\n    aspect-ratio: 2362 / 582;\n  }\n\n  // page global content styles\n  input {\n    background: none;\n  }\n\n  .content {\n    position: relative;\n    z-index: 10;\n    max-width: 980px;\n    width: 100%;\n    margin: 0 auto;\n    box-sizing: border-box;\n    border-radius: 22px;\n    text-align: left;\n    backdrop-filter: blur(10px);\n\n    @media only screen and (max-width: 1024px) {\n      padding: 20px;\n    }\n  }\n\n  // page global blog card styles\n  .blog-date {\n    display: block;\n    color: var(--blog-muted-color);\n    margin-bottom: 10px;\n    font-weight: 500;\n  }\n\n  .blog-title {\n    display: block;\n    font-size: 22px;\n    line-height: 1.2;\n    margin: 0 0 5px;\n    font-weight: 500;\n  }\n\n  .blog-excerpt {\n    @include line-clamp(2);\n  }\n\n  .blog-post-cta {\n    text-decoration: none;\n    color: var(--site-link-with-right-arrow-color);\n    margin-top: auto;\n  }\n\n  // featured grid styles\n  .blog-featured-grid {\n    margin-top: 146px;\n    line-height: 1.53;\n    margin-bottom: 50px;\n\n    .content {\n      padding: 30px 50px 20px;\n      background-color: var(--get-started-card-primary-bg);\n\n      @media only screen and (max-width: 1024px) {\n        width: auto;\n        margin: 0 10px;\n      }\n\n      @media only screen and (max-width: 768px) {\n        padding: 22px 15px 10px;\n      }\n\n      .blog-featured-grid-headline {\n        font-size: 48px;\n        font-weight: 500;\n        margin-bottom: 16px;\n        color: var(--site-text-color);\n        text-align: left;\n\n        @media only screen and (max-width: 768px) {\n          font-size: 32px;\n          line-height: 1.33;\n          margin-bottom: 22px;\n        }\n      }\n\n      .blog-featured-hero-card {\n        background: var(--get-started-card-secondary-bg);\n        padding: 20px 30px 20px 20px;\n        border-radius: 22px;\n        margin-bottom: 35px;\n\n        &.blog-featured-hero-card-with-image {\n          background: transparent;\n          padding: 0;\n        }\n\n        .blog-featured-hero-card-image {\n          border-radius: 22px;\n          aspect-ratio: 880 / 382;\n          object-fit: cover;\n          object-position: center;\n          margin-bottom: 26px;\n        }\n      }\n\n      .blog-featured-grid-category-headline {\n        font-size: 24px;\n        font-weight: 600;\n        margin-bottom: 13px;\n        line-height: 1.2;\n      }\n\n      .section-icon {\n        width: 60px;\n        margin: 40px 0 0;\n      }\n\n      .blog-featured-category-posts {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 40px 20px;\n        text-align: left;\n        margin-bottom: 22px;\n\n        @media only screen and (max-width: 1024px) {\n          grid-template-columns: 1fr;\n        }\n\n        li {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .blog-featured-category-post {\n          background-color: var(--get-started-card-secondary-bg);\n          display: flex;\n          text-align: left;\n          overflow: hidden;\n          flex-direction: column;\n          border-radius: 22px;\n          padding: 20px 30px 20px 20px;\n          flex-grow: 1;\n\n          // @media only screen and (max-width: 768px) {\n          //   flex-direction: column;\n          // }\n\n          img {\n            width: 168px;\n            height: 180px;\n            object-fit: cover;\n            flex-shrink: 0;\n            background-color: #f6f6f6;\n\n            @media only screen and (max-width: 768px) {\n              width: 100%;\n              height: auto;\n            }\n          }\n\n          div {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            min-height: 140px;\n            position: relative;\n            padding: 20px;\n\n            .name {\n              font-size: 24px;\n              line-height: 1.25;\n              margin-bottom: 10px;\n            }\n\n            .text {\n              font-size: 17px;\n              flex-grow: 1;\n            }\n          }\n        }\n      }\n\n      .tertiary-cards,\n      .primary-cards {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 20px;\n        // padding: 0 0 40px;\n\n        .news-item {\n          background-color: var(--get-started-card-secondary-bg);\n          padding: 20px 30px 20px 20px;\n          display: flex;\n          text-align: left;\n\n          div {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            position: relative;\n\n            .name {\n              font-size: 24px;\n              line-height: 1.25;\n              margin-bottom: 10px;\n            }\n\n            .text {\n              font-size: 17px;\n              flex-grow: 1;\n            }\n          }\n        }\n\n        @media only screen and (max-width: 768px) {\n          grid-template-columns: 1fr;\n        }\n      }\n    }\n  }\n\n  .dropdown {\n    position: relative;\n    display: inline-block;\n\n    hr {\n      margin: 0 0 10px 18px;\n      border: 1px solid var(--blog-dropdown-toggle-inset-outline-color-active);\n    }\n\n    .dropdown-close {\n      background: var(--dropdown-close-icon);\n      position: absolute;\n      top: 12px;\n      right: 12px;\n      background-size: cover;\n      border: none;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      color: var(--blog-muted-color);\n      cursor: pointer;\n    }\n\n    .dropdown-toggle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--blog-card-bg);\n      outline: 1px solid var(--blog-dropdown-toggle-outline-color);\n      border: none;\n      width: 158px;\n      height: 64px;\n      border-radius: 22px;\n      margin-bottom: 20px;\n      cursor: pointer;\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: var(--blog-dropdown-toggle-outline-color);\n        }\n      }\n\n      .dropdown-toggle-arrow {\n        width: 13px;\n        height: 7px;\n        background-repeat: no-repeat;\n        background-image: var(--blog-dropdown-arrow);\n        background-size: contain;\n        display: block;\n        margin: 1px 0 0 18px;\n        display: inline-block;\n      }\n    }\n\n    .dropdown-menu {\n      display: none;\n      position: absolute;\n      background-color: white;\n      outline: 1px solid var(--blog-dropdown-toggle-outline-color);\n      border: none;\n      border-radius: 22px;\n      padding: 0 0 24px 0px;\n      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);\n      min-width: 200px;\n      z-index: 100;\n      background-color: var(--blog-dropdown-bg);\n      margin-top: -10px;\n      min-width: 287px;\n      overflow: hidden;\n    }\n\n    .dropdown-header {\n      padding: 23px 0 20px;\n    }\n\n    &.active {\n      .dropdown-menu {\n        display: block;\n      }\n\n      .dropdown-toggle-arrow {\n        transform: rotate(180deg);\n      }\n\n      .dropdown-toggle,\n      .dropdown-menu {\n        @include dropdown-border;\n      }\n\n      .dropdown-toggle {\n        // account for bottom margin of button\n\n        &:after {\n          bottom: 20px;\n        }\n      }\n    }\n\n    &:not(.active) .dropdown-toggle:focus {\n      outline: 2px solid var(--blog-dropdown-toggle-outset-outline-color-active);\n    }\n\n    .checkbox-symbol {\n      display: inline-block;\n      margin-right: 11px;\n      width: 25px;\n      height: 25px;\n      border-radius: 5px;\n      outline: 1px solid var(--site-text-color);\n    }\n\n    label {\n      display: flex;\n      align-items: flex-end;\n      padding-left: 18px;\n      position: relative;\n      width: 100%;\n      box-sizing: border-box;\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: var(--blog-dropdown-toggle-outline-color);\n        }\n      }\n    }\n\n    input {\n      appearance: none;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 1;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:checked ~ .checkbox-symbol {\n        background-color: transparent;\n        background-image: var(--dropdown-check-icon);\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n\n      &.select-all ~ .checkbox-symbol {\n        background-image: none;\n        outline: 1px solid var(--site-text-color);\n      }\n\n      &.select-all:checked ~ .checkbox-symbol {\n        background-color: var(--dropdown-all-background);\n        background-image: var(--dropdown-check-icon-inverse);\n        outline: none;\n      }\n    }\n\n    label {\n      padding: 6px 0 6px 18px;\n\n      &:focus {\n        outline: 2px solid var(--blog-dropdown-toggle-outline-color-active);\n      }\n    }\n  }\n\n  .post-link {\n    background: var(--blog-card-bg);\n    border-radius: 22px;\n    margin-bottom: 20px;\n    padding: 23px 30px 30px;\n    text-decoration: none;\n    display: block;\n\n    &-with-image {\n      display: flex;\n      gap: 36px;\n\n      img {\n        width: 120px;\n        height: 120px;\n        background-size: cover;\n      }\n\n      @media only screen and (max-width: 1024px) {\n        display: block;\n\n        img {\n          width: 100%;\n          height: auto;\n        }\n      }\n    }\n\n    h3 {\n      font-size: 22px;\n      font-weight: 600;\n      color: var(--site-text-color);\n    }\n\n    time {\n      color: #8d8d8d;\n    }\n\n    p {\n      color: var(--site-text-color);\n      @include line-clamp(2);\n    }\n\n    .category {\n      background-color: var(--blog-category-pill-bg);\n      color: var(--blog-category-pill-copy-color);\n      padding: 7px 16px;\n      border-radius: 22px;\n      margin-top: 26px;\n      display: inline-block;\n    }\n  }\n}\n","@use '../helpers' as *;\n\n#post {\n  position: relative;\n  padding: 160px 0 70px;\n\n  .content {\n    max-width: 980px;\n    width: 100%;\n    margin: 0 auto;\n    padding: 0;\n    box-sizing: border-box;\n    position: relative;\n    text-align: left;\n\n    @media (max-width: 1024px) {\n      padding: 20px;\n\n      h1 {\n        margin-top: 0!important;\n      }\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n      text-align: left;\n      color: var(--color-syntax-plain-text);\n      margin: 40px 0 16px;\n    }\n\n    h1 { font-size: 2.2em; margin-bottom: 40px; }\n    h2 { font-size: 1.8em; }\n\n    p {\n      margin-bottom: 1em;\n\n      &:has(+ ul) {\n        margin-bottom: 0;\n      }\n    }\n\n    ul, ol {\n      list-style-type: initial;\n      padding-left: 20px;\n      margin: 1em 0;\n    }\n\n    a {\n      text-decoration: none;\n      color: var(--site-link-with-right-arrow-color);\n    }\n\n    time {\n      color: var(--blog-page-time-text-color);\n      font-size: .8em;\n      text-transform: uppercase;\n      display: block;\n    }\n\n    .featured {\n      border-radius: 20px;\n      margin: 20px 0;\n    }\n\n    .details {\n      margin: 1.2em auto;\n      color: var(--color-syntax-plain-text);\n\n      hr {\n        margin-top: 44px;\n        border-top: var(--blog-divider-border);\n      }\n\n      pre.highlight {\n        background: var(--blog-page-code-bg);\n        padding: 20px;\n        border-radius: 10px;\n        margin-bottom: 1em;\n      }\n    }\n\n    .card-grid {\n      background: transparent;\n\n      ul, ol {\n        padding-left: 0;\n      }\n\n      .content {\n        background: transparent;\n        padding: 0;\n\n        time {\n          margin-bottom: 10px;\n        }\n\n        h3 {\n            margin-top: 0;\n        }\n      }\n    }\n  }\n\n  .swoop-1 {\n    @include swoop-ratio(2624, 1073, 1.33);\n    background: url(/assets/images/shared-swoops/swoop-0.png) no-repeat;\n    background-size: 166% auto;\n    background-position: 47% 0%;\n    top: -46vw;\n    opacity: 0.7;\n\n    @media (max-width: 768px) {\n      top: -39vw;\n    }\n  }\n}\n"],"file":"application.css"}