{"version":3,"file":"static/css/main.c76af346.css","mappings":"AAQA,iBAGE,sBAoBA,iDADA,QAOA,CANA,qBAKF,UACE,MAIF,4BACE,4BACA,4EAEA,6BAIF,gDACE,CAGF,6BACE,uBAMA,aAKF,kEAKA,8BAIE,mDAME,yBAGF,oDAGE,sCAEA,mEC4iBJ,EC9gBM,yUAEA,uCAMJ,gBACE,2BAGF,gHASE,4HASA,gCAEA,4DAMA,oDAEE,oFAGE,qCC7JN,wCAEA,wCAGA,iCACE,4BCVJ,0CAGE,kBAIF,+DACE,0BACA,6DACA,qCACA,mFACA,iEAEA,6BACA,qBACA,oDACA,0BACA,kBAEA,kBACA,YACA,6BACA,uBAIA,oDACA,yBACA,qCACA,yBACA,mBACA,2CAEA,iCAEA,qGAGA,CAGF,mEAEE,uBAKF,4EAGE,8BAEA,0EACE,mEAMF,oCACE,4CAMF,oFAEA,8EAEE,uEAOF,kEAGE,+DAGF,yEAOF,kEAQA,0GAEE,oEAEA,8DACA,iCAEA,kGAQA,iEAEA,2HAEA,iBACA,kPAYE,6BAGF,sXAeA,gBACA,wBAEA,mBACE,wBACA,eACA,oCAGF,mCACE,eACA,+EAEA,6DACA,yFAIA,gCAKJ,iFAIE,iCACA,gCACA,+BACA,eACA,CC9HA,4BD+HA,uCC7HA,CAFA,uCAEA,wGAEA,+GAEA,8KAEA,oCAEA,uHAEA,YAIA,cACA,8HAGA,qDAEA,qEAEA,uBAKA,gBACA,6BACA,0BACA,qDAEA,oCACA,WACA,0BACA,2EAKA,mEACA,wBACA,gBAGA,sCACA,YACA,6EACA,2KAQA,gHACE,mGAEA,kIAEA,4GAOJ,kWAaE,8BACA,8DAII,cAKN,+CACE,OACA,yIAcI,iFAUN,2EAEE,sBACA,sDAEA,8CAEA,mCACA,gCACA,8BAEA,qCAOF,qCAIA,qCAKE,oCACA,mCAEA,+BAIF,kCAIA,+BACE,CACA,2CAEA,4CACA,wFACA,sGAOA,uEASA,8GAcE,4NAWJ,8GAGE,uGAKA,qGAEA,sGAEA,CACA,6DAIF,iEACE,mEACA,+DAEA,iDACA,CAGF,kFACE,kBACA,oDACA,qEACA,sBACA,sDAGF,wBACE,8DACA,0FAEA,sIAKA,yBACA,4GAEA,uGAKA,uGAEA,uGAEA,EAGF,8EACE,2GAEA,6DACA,wCCrTA,2CATE,0BACA,oFACA,2BACA,eACA,iBAQF,mCACE,mBACA,mBAEA,+KAEA,sCACA,kBACA,qCAnBA,2FACA,sBACA,0BACA,gDDuUF,6BACE,oBAIJ,2BACE,SACA,2BACA,oBACA,yBACA,0BAEA,sBACA,wBACA,sBACA,wBAEA,qDACE,+BAIJ,oGAOA,gEACE,wBACA,gBAEA,oDACA,uFACA,eAGA,+1HEjXF,UACE,mBACA,aACA,sBACA,gBACA,mBACA,kBAEA,WAEA,YACE,gBAGF,uBACE,aAGF,kBACE,0BCrBJ,eAEA,yBACE,aACA,sCACA,WACA,wBAEA,2BACE,gLACA,aAKA,sBACA,SACA,cACA,WACA,YACA,uBACA,cACA,gBACA,eACA,WACA,yCAEA,eACE,kEAEA,eACE,4CAGF,YACE,2BAIJ,gBAEE,gBACA,qBACA,iBACA,SACA,yBAEA,0BARF,gBASI,0BAGF,0BAZF,cAaI,kCAIJ,WACE,0BACA,+CACA,CADA,sCACA,iCACA,4BACA,0BAGF,eACE,oDAGF,wCAEE,kCAIJ,uCACE,2BACA,cACA,WACA,gBACA,MACA,WACA,WACA,qDAEA,2CACE,yBACA,oDAFF,gCAGI,uCAKN,iBACE,aACA,mBACA,gBACA,gBACA,WACA,0DAEA,0BACE,mCACA,oBACA,aACA,WACA,gEAEA,sCACE,2BACA,uEAGF,gBACE,yCACA,qDAIJ,YACE,MACA,WACA,sDAGF,2BACE,gBACA,gBACA,WACA,wBACA,2CACA,qEAGE,oBACE,wEAGF,eACE,0BACA,wEAGF,2BACE,gBACA,yEAGF,2BACE,sCAMR,WACE,UACA,kBACA,aACA,MACA,4CAEA,eACE,mBACA,mDAGF,eACE,yDAEA,eACE,uBACA,+DAEA,iCACE,yDAIJ,oCACE,YACA,CCpKR,MACE,4BAA8B,CAC9B,qCACA,qBACA,cACA,mBACA,kDACA,oDACA,sBACA,kBAGE,sBACE,kXADF,+DACE,2UADF,wEACE,iEADF,oBACE,+OADF,uEACE,sUADF,sEACE,+DADF,CACE,wPADF,+DACE,wFADF,8DACE,6UADF,4BACE,yOADF,4DACE,gVADF,uEACE,gEADF,iBACE,iXADF,mEACE,oUADF,qBACE,2XADF,2DACE,oFADF,4DACE,gVADF,gFACE,qTADF,mEACE,6UADF,uEACE,80BADF,yEACE,kEADF,sBACE,yWADF,0DACE,iVADF,wEACE,iEADF,yBACE,ueADF,sEACE,+DADF,oBACE,qgBADF,+DACE,sLADF,4EACE,qEADF,kBACE,iIADF,mBACE,8WADF,8DACE,wFADF,8DACE,oMADF,qEACE,8DADF,iBACE,+HADF,mBACE,+mBADF,wBACE,6IASJ,wBAGF,0EAKE,mEAGE,iBAEA,mEACE,whELpDN,eAEE,wCACA,gBACA,YAGF,QACE,yCAA0C,CAC1C,6CAA8C,CAC9C,+CAAgD,CAChD,mDAAoD,CACpD,yCAA0C,CAC1C,4CAA8C,CAC9C,wCAAyC,CACzC,oCAAqC,CACrC,uBAAwB,CACxB,0CAA4C,CAC5C,mCAEA,eACA,qBACA,UACA,qBAGF,aACE,mBACA,kCACA,4CACA,mCACA,0BACA,aACA,wBACA,WACA,4BACA,uBACA,mCACA,oCACA,kBAGF,cACE,qCACA,cAKF,4BAGE,6DAA+D,CAE/D,sDACE,yDAMF,wDACE,0DAIJ,4BAEE,aAEA,sDACE,sDACA,sCAIJ,iDAEE,eACA,YAEA,6DACE,uBAAwB,CAG1B,+DACE,wBAAyB,CAM7B,yCAEE,uBAAwB,CACxB,wBAAyB,CAK3B,kBACE,2CAA4C,CAC5C,2CAA4C,CAC5C,oCAAqC,CACrC,+CAAgD,CAChD,iDAAkD,CAElD,wBACE,0DAA2D,CAM/D,eACE,iBAAwB,CACxB,sCAAuC,CACvC,oCAAqC,CACrC,iCAAkC,CAClC,+CAAgD,CAChD,iDAAkD,CAElD,wBACE,oCAAqC,CACrC,oBAGF,qBACE,0DAA2D,CAG7D,4BACE,wDAGF,yBACE,4CAA6C,CAKjD,eACE,2CAA4C,CAC5C,+CAAgD,CAChD,iDAAkD,CAClD,2CAA4C,CAC5C,oCAAqC,CACrC,wCACA,gBACA,YACA,UACA,qBAEA,4BACE,4BACA,mBACA,kBAGF,kCACE,qCACA,WACA,cACA,YACA,6IACA,wBACA,gBAEA,8BACA,sBAKF,WACA,8BACA,uBACA,wBACA,2BACA,gEAEA,qBACA,oBACA,mBAEA,kDACA,wBAEA,+BAEA,qBACE,+DAEA,uCM9LJ,eACE,eAEA,8BACE,cACA,gBACA,kBACA,WAEA,wBANF,8BAOI,mBACA,aACA,WAIJ,iJAGE,cAIA,qOACE,cACA,aAIJ,mCAEE,wBACA,2CACA,uCACA,oBACA,6BACA,0BACA,+BACA,eACA,kBACA,mBACA,WAEA,iBACE,MAEE,4DAGF,IACE,uEAIJ,wBACE,2CACE,YAIJ,mGAEE,qCACA,kBAEA,sCALF,mGAMI,kBAIJ,+FAEE,eAGF,uHAEE,4DASF,2GACE,eACA,sEAGF,yCACE,mCACA,uEACE,CAEF,eAGF,mFAEE,wBACA,UACA,sFACA,iCACA,2BAIJ,6BACE,2BACA,SAMF,qEACE,yCACA,iCACA,4BACA,OACA,kBACA,SACA,WACA,sCAEA,yOAGE,0BAGF,yGACE,0BAGF,mGACE,kBACA,mCAGF,+FACE,uCACA,gDACA,wCACA,sBAEA,uHACE,wDAGF,qHACE,wDAIA,qIACE,mBAIJ,mGACE,cACA,cAIJ,8NAEE,yCAIA,2IACE,yCACA,oBACA,qBACA,gBACA,kBACA,oBACA,kBACA,gBACA,qBAIJ,sNAEE,eAGF,mGACE,gBAGF,+EACE,mCAGF,iFACE,yBAGF,yEACE,uBAGF,iHACE,2BAKN,aACE,aACA,kBAGF,kDAEE,oCAAqC,CACrC,sBAAuB,CACvB,kBAAmB,CACnB,kBACA,aACA,WACA,aAEA,8DACE,iBAGF,wBAdF,kDAeI,aACA,cAIJ,4BACE,aCjPF,mBAGE,0BACA,2CAA4C,CAC5C,2CAA4C,CAC5C,yCAA0C,CAC1C,2BACA,aACA,uBAEA,uBACE,iBACA,gBACA,0CAGF,4BACE,4BAGF,6CACE,iBAGF,6CACE,iBAGF,6CACE,iBAGF,6CACE,iBAGF,6CACE,eCrCJ,mBACE,uBACA,aACA,sBACA,SACA,eAEA,sBACE,4BACA,aAGF,mCACE,aACA,uBACA,mBACA,gBAEA,wBANF,mCAOI,qCAIJ,iCACE,uCACA,oBACA,aACA,sBACA,aAEA,uCACE,4BAGF,2CACE,0BACA,gBAEA,iDACE,0BAIJ,6CACE,uBACA,aACA,YACA,4BACA,gBACA,4CAEA,gBAEA,+CACE,0BAIJ,mCACE,mCACA,oCACA,SC7CJ,6CACA,gBACA,kBAEA,yCACE,oCD4CI,CC3CJ,WACA,cACA,yCACA,0GACA,oBACA,kBACA,QACA,sCACA,WAIA,kDACE,OACA,4GACA,WD+BA,wBAVF,mCAWI,8CEtER,aACE,aACA,sBACA,SACA,gBACA,eACA,WAEA,yBARF,aASI,WAGF,gBACE,4BACA,gBAGF,gBACE,SAGF,wBACE,aACA,sBACA,8BACA,cAEA,wBANF,wBAOI,uBAGF,uCACE,uCACA,iCAGF,mCACE,mBACA,aACA,eACA,iBAIJ,yBACE,aACA,sBACA,YACA,oCACA,SAEA,2BACE,0BAEA,iCACE,0BACA,0BAIJ,sCACE,4BACA,qCC9DN,sBACE,aACA,sBACA,SACA,gBACA,eACA,WAEA,yBARF,sBASI,WAGF,yBACE,4BACA,gBAGF,yBACE,SAGF,oCACE,aACA,sBACA,8BACA,cAEA,wBANF,oCAOI,uBAGF,mDACE,uCACA,iCAGF,kDACE,mBACA,aACA,eACA,iBAIJ,qCACE,aACA,sBACA,YACA,oCACA,SACA,yBAKE,oFACE,0BAIJ,mDACE,4BACA,qCChEN,uBAEA,kBACE,0BACA,aACA,sBACA,kBACA,kBACA,WACA,mCAEA,QACE,aACA,kBACA,mCACA,SACA,UACA,yCAEA,kBACE,kBACA,2BAIJ,4BACE,wCACA,kCAGF,kBACE,oBACA,aACA,sBACA,SACA,gBACA,WACA,qCAEA,0CACE,uCAIJ,4BACE,8BACA,sCACA,sBACA,sBACA,+BACA,4CACA,iCAGF,kBACE,aACA,sBACA,SACA,gBACA,kBACA,WACA,6CAGF,kBACE,aACA,uBACA,UACA,sBACA,iDAEA,0BACE,CADF,kBACE,cACA,0CAIJ,uCACE,6BACA,iBAGA,gBACA,gBACA,yBACA,4CACA,gGAEA,WAEE,gGAGF,4BAEE,qBACA,+FAGF,yBAEE,yBAIJ,gCACE,kBACE,mBACA,kCAGF,kBACE,gBACA,4CAIJ,uCACE,qBACA,YACA,gBACA,kBACA,MACA,WACA,WACA,8DAEA,0BACE,CC9HN,cACE,aACA,cAEA,6CAEE,0BACA,qBAGF,0BACE,wCACA,yBACA,qBACA,cACA,kBACA,YACA,iBACA,0BACA,yBACA,4CAEA,gEAEE,cACA,qBAIJ,yBACE,sCAAuC,CACvC,iCAAkC,CAElC,qCAAsC,CACtC,gCAAiC,CAEjC,kEAAmE,CACnE,wDAAyD,CAEzD,sBAAuB,CACvB,uCACA,mCACA,YACA,SACA,iBACA,gBACA,kBACA,YAEA,kCApBF,yBAqBI,iEAAkE,CAClE,uDAAwD,CAAxD,CAGF,oCACE,cACA,kBACA,QACA,MAEA,0CACE,cACA,qBAIJ,+BACE,YACA,UACA,WAEA,mCACE,YACA,WAGF,2CACE,2FAMA,mCACA,kCACA,aACA,sBACA,WACA,YACA,oBACA,kBACA,MACA,WAEA,kDACE,mBACA,iBACA,eAGF,gDACE,iBACA,iBACA,eAGF,qDACE,mCAAoC,CACpC,2BAA4B,CAC5B,sCACA,iBACA,mBACA,mBACA,iBACA,gBACA,4BACA,iBACA,+BAEA,2DACE,+BAGF,2DACE,wCAAyC,CACzC,6CAOV,wBACE,6CACA,uCACA,mBACA,UACA,YAEA,8BACE,mBACA,aACA,sBACA,gBAEA,kCACE,SACA,mBACA,eAGF,mCACE,4BACA,iBACA,cAKN,uBACE,4BACA,gBACA,oBACA,gBACA,UACA,WAEA,0DAEE,cACA,qBAIJ,mBACE,sBAEA,gBACA,iBAGF,0CALE,6CAOA,CAFF,uBAEE,iBAGF,kBACE,mBACA,aACA,kBAEA,yCACA,gCACA,cACA,WAEA,wBAVF,kBAWI,kDACA,gEAGF,4BACE,YACA,iBACA,WAEA,kCACE,6BACA,mBACA,eACA,gBACA,qBAEA,sCACE,sCACA,0CACA,WAGF,uCACE,6BACA,0CACA,cACA,eAIJ,sCACE,iDACA,iCACA,iCACA,wCACA,cACA,8CACA,kBACA,oBACA,kBAGF,uCACE,eACA,0BAIJ,2BACE,6BACA,aACA,qBACA,WAIJ,6BACE,aAIJ,+BACE,iEAAkE,CAClE,uDAAwD,CAG1D,kDAEE,iDACA,aACA,uCACA,qEACA,SACA,WAEA,gEACE,aACA,gBACA,gBACA,uBAEA,wEACE,YAIJ,wEACE,gBACA,cACA,6BAIJ,YACE,wDAAyD,CACzD,2CAA4C,CAC5C,oDAAqD,CACrD,uDAAwD,CAExD,uDAAwD,CACxD,0CAA2C,CAC3C,mDAAoD,CACpD,sDAAuD,CAEvD,wDAAyD,CACzD,8CAA+C,CAC/C,gEAAiE,CACjE,sDAAuD,CAEvD,6CACA,8CACA,gCAEA,kCApBF,YAqBI,uDAAwD,CACxD,6CAA8C,CAC9C,+DAAgE,CAChE,qDAAsD,CAAtD,CAGF,qBACE,gBAGF,wBA/BF,YAgCI,cAGF,2BACE,eACA,gBACA,qCACA,cAEA,0CACE,+BAEA,gGAEE,0BAKN,2BACE,aAKF,8BACE,aACA,kBACA,UAIJ,kBACE,uDAAwD,CACxD,6CAA8C,CAC9C,+DAAgE,CAChE,qDAAsD,CAGxD,yBACE,iFAIA,2DACA,SACA,WAEA,qDACE,qCACA,aACA,mDACE,CAEF,oEACA,cACA,2BACA,eAEA,2DACE,eACA,oBAEA,+DACE,YAIJ,gEACE,2DACA,kBACA,eACA,iBAGF,8DACE,2DACA,kBACA,aACA,gBAGF,yBAlCF,qDAmCI,yCACE,CAEF,sFACA,8BAGF,wBA1CF,qDA2CI,yCACE,CAEF,8BACA,6BAEA,8DACE,iBACA,6CAMR,wBACE,kBACE,oBACA,gBACA,iBAEA,yDAEE,WAEA,qEACE,mBAGF,+EACE,aAIJ,2BACE,aACA,gBACA,iBAEA,sCACE,aACA,aACA,YAEA,gDACE,4BAGF,iDACE,6BAIA,gDACE,YACA,kBACA,WACA,UAGF,wDACE,gBACA,4CACA,sBACA,YACA,oBACA,mBACA,YC/dZ,OACE,8BAA+B,CAC/B,uCAAwC,CACxC,2BACA,iCACA,YACA,4BACA,aACA,UACA,SACA,gBACA,4BAEA,eACA,0BACA,WAEA,eACE,yBACA,kBAGF,sBACE,iCAAkC,CAClC,mBAEA,4BACE,qBAAkC,CAClC,2BAAkC,CAItC,oBACE,kCAAmC,CACnC,kBAAmB,CAGrB,oBACE,aAGF,wBACE,oBACE,eAGF,kBACE,cCjDN,WACE,iBACA,kBACA,2BACA,2BACA,4BACA,WCJF,MACE,mBACA,aAEA,YAEA,UACE,cACA,iBAGF,4BAEE,sBAGF,iBACE,yBChBF,4BACE,mBACA,oBACA,2CACA,YACA,kBAEA,qEAEE,4BCVN,yBACE,qBAAsB,CAEtB,cACA,gBACA,kBACA,mBCNF,gBACE,mBACA,aACA,cACA,iBACA,6BACA,wCACA,2CACA,SACA,gBACA,UAEA,mBACE,cAMA,wBADF,qCAEI,mBACA,uBACA,mBACA,mBCeJ,mDAGA,gBAGE,mBAGF,6DAGE,kBACA,uBACA,0BAEA,aACA,YAEA,mHACE,yBAGF,kDACE,wCAIO,6FACP,4CAGF,kDACE,qDACA,sCAGF,kDAMA,kBADF,yBA9EA,uEACA,uCACA,iCAEA,4BAEA,iBACA,+BACA,+CACA,kBAES,kEACP,0CAGF,0CACE,gCAQF,kDAGE,UACA,CACA,wBACA,OACA,kBAsDA,oBADF,2DApFA,4CACA,uCACA,iCAEA,4BAEA,iBACA,+BACA,+CACA,kBAES,wEACP,0CAGF,gDACE,gCAQF,wDAGE,UACA,CACA,wBACA,OACA,kBA4DJ,SACE,WACA,kBAEA,0BACE,+BAGF,8CAIA,eAZF,yBAaI,6DAKF,oDAEA,CACA,+BAIF,mEAEE,uCAIE,+FACE,0CAMJ,4BAEA,YAHF,yBAII,0BACA,kDAKJ,kBACE,kEAGF,0EACE,mCACA,2CAGA,oBACA,+BAEA,aAGF,kBACE,yEACA,sCC7JE,qFAEE,yBAGF,qFAEE,4BAIJ,uEACE,oCACA,2CACA,mBACA,WACA,aACA,kBACA,QACA,UACA,YClBF,sCACE,wCACA,gBAGF,qBACE,aAGF,wBACE,qBACE,gBAGF,oBACE,cCfJ,0BACE,aAGF,wBACE,0BACE,gBAGF,yBACE,cASA,gGACE,8CAUF,4FACE,mDAUF,wHACE,kDAUF,gGACE,oDAUF,gGACE,oDAUF,oGACE,qDAON,mBACE,2CAGF,kBACE,0CAGF,yBACE,yCAGF,mBACE,2CAGF,mBACE,2CAGF,oBACE,4CCvGF,wBACE,0CAGF,gBACE,+CAEA,0CACE,cACA,eAIJ,wBACE,uBACE,cCfN,aACE,sBACA,gBACA,gBACA,UACA,WAEA,kBACE,cAEA,wBAHF,kBAII,aAXN,aAgBI,mBACA,aACA,6BACA,kBAEA,2BACE,mBAOF,qDACE,aAGF,wCACE,cAvBA,CA2BJ,yBAtCF,aAuCI,UAKJ,wBACE,sBACE,aAME,qHACE,cAQF,kDACE,aAGF,4CACE,cAIJ,oEAEE,cC1EN,oCACE,cACE,aAEA,oBACE,cCFJ,qBAFA,iBAUE,CARF,aAEE,YAGA,iBACA,mBACA,kBACA,WAcF,wBAzBF,QA0BI,gBC1BJ,cACE,cAEA,wBAHF,cAII,4CAIJ,sBACE,WAEA,wDAEE,6CCbJ,WACE,kBAEA,2BACE,aAIA,4DACE,oCACA,2CACA,mBACA,WACA,aACA,kBACA,QACA,MACA,YAIJ,wBACE,mCACE,iBAAwB,CAAxB,CAIJ,wBAQM,kMAEE,iBACA,mBACA,gBAKF,kDACE,sDACA,+BAIJ,0CACE,aAIJ,2BACE,cACA,oBACA,kBAGF,yBACE,cAGF,8BACE,iBAGF,yBACE,aAGF,oBACE,UACA,oDACA,SC9EN,UACE,kBAEA,eACE,uCACA,uCACA,iCACA,4BACA,OACA,cACA,kBACA,qBACA,2BAGF,wCACE,UACA,QAIA,8BACE,WAEA,2CACE,2CAA4C,CAC5C,iBAAwB,CACxB,2BACA,gBACA,oBAEA,iDACE,yCAA0C,CAI9C,+CACE,qCAAsC,CACtC,6CAA8C,CCpCtD,qBACE,aACA,8BACA,UACA,WAEA,+BACE,aACA,sBAGF,qCACE,QAGF,oCACE,QAGF,+BACE,QAGF,gCACE,QAGF,gDACE,kBAEA,yDACE,gCAIJ,mCACE,eACA,qBAGF,wBACE,mCACE,gBACA,iBAKF,0CACE,mCAAoC,CAG7B,sEACP,2BAAkC,CAG3B,0DACP,wCAAyC,CAG3C,wDACE,iBAAwB,CAI5B,sCACE,gBACA,6CACA,4BACA,eACA,aACA,mBACA,gBACA,WAEA,yFAEE,4BAGF,kDACE,cAGF,8CACE,yCAA0C,CAC1C,+CAAgD,CAChD,qCAAsC,CACtC,sBAGF,wBACE,6CACE,oCAAqC,CACrC,kBAAmB,CACnB,iBAAkB,CAElB,0DACE,gBACA,YACA,UACA,2BACA,UACA,oBAGF,mDACE,0BAA2B,CAI/B,gDACE,gBACA,eAIJ,wBApDF,sCAqDI,iCACA,gBACA,cAEA,wFAEE,kDACA,4BACA,qBAGF,6CACE,WAKN,kCACE,mBACA,aACA,8BACA,kBAGF,wCACE,qCACA,WACA,wBACA,iBACA,gBAEA,qIAIF,oFACE,wBAGF,oDAIA,qCACE,qBACA,kBAEA,sBACA,mBAEA,UACA,uBACA,gBACA,YAEA,gDAIA,kDAEE,iBACA,kCAGF,uDAIA,6CAIA,wCAIA,2DACE,qBClMN,qBACE,oBAEA,iDACE,oBAGF,iDACE,iBAAwB,CACxB,sCAAuC,CACvC,kCAAmC,CACnC,sBACA,wCACA,WAEA,8DACE,iBACA,gBACA,2BACA,aAGF,uDACE,0DAA2D,CAG7D,uDACE,mCAAoC,CAMtC,8GACE,qCAAsC,CACtC,6CAA8C,CAIlD,0DACE,0DAA2D,CAG7D,wBA3CF,qBA4CI,gBACA,gBAEA,kCACE,sBAGF,uCACE,aACA,sBACA,UACA,oDACA,gBAGF,gDACE,oBAOJ,8DACE,cAEA,oGACE,uCACA,WACA,cACA,YACA,iBACA,qIACA,uBACA,eAIA,wJACE,wBAKN,yBAEI,oGACE,eC7FR,aACE,0BACA,YACA,iBAEA,yCACE,eACA,cACA,cACA,SACA,wBALF,yCAMI,iBACA,mBAGF,2DACE,2CACA,uCACA,iCACA,gBACA,aAGJ,wBAEI,wEACE,mBACA,qCACA,uCACA,+BACA,qBACA,sBACA,0BACA,oBACA,4BACA,6BACA,qBCpCR,gBACE,2CACA,8CACA,kBACA,WAEA,2BACE,mBACA,2CACA,aACA,mBACA,kBAEA,wBAPF,2BAQI,wBAIJ,+BACE,uBAIF,qCACE,mBACA,aACA,SACA,6BACA,8BAGF,yBACE,4BAEA,oCACE,YAKN,wBACE,kBACE,aAGF,qCACE,UC9CJ,uBACE,mBACA,aACA,kBAEA,0BACE,aACA,eACA,gBACA,iBACA,eAGF,0BACE,aACA,kCAGA,+CACE,oBAIA,4CACE,uCACA,WACA,cACA,cACA,YACA,mBACA,qIACA,uBACA,wCAKJ,wCAEE,kBAEA,mFAEE,2BAGF,mCACE,yBAGF,2CAGE,oEACE,mCAEA,mBAKN,8DAEE,oBAIJ,6CACE,0BACE,qBCpEJ,uDACE,cAMA,oCACE,gBAGF,mCACE,mBAIJ,6BAEE,wBAEA,qDACE,0DACA,0BACA,cACA,qCAEA,2DACE,uBAGF,4DACE,mBACA,aACA,SAGF,6DACE,aAGF,mEACE,kBACA,mCACA,gBAGF,2DACE,mBAGF,iFACE,uCAEA,uFACE,kCAKN,gDACE,qCACA,iBACA,wBAIJ,wBA7DF,eA8DI,SCtEJ,cACE,mBACA,aACA,mBACA,SACA,aAEA,4BACE,wBACA,6BACA,8BACA,4BAEA,0BACE,GACE,UAGF,IACE,4BACA,UAGF,IACE,4BAGF,GACE,4BAON,cACE,uBAAwB,CAG1B,eACE,wBAAyB,CAG3B,cACE,uCAMA,2FACE,qCAGF,iGACE,sCCvDN,QACE,mBACA,oBACA,kBAEA,cACE,SACA,SACA,UACA,UAEA,8BACE,kCAEA,qCACE,YACA,YAIJ,oCACE,oCACA,mBACA,mBAIJ,gBACE,uCACA,oBACA,eACA,aACA,kBACA,eACA,UAEA,uBACE,2CACA,kBACA,YACA,WACA,WACA,kBACA,aACA,SACA,eAIJ,eACE,iBChDJ,iBACE,iBAEA,iDACE,aAGF,6CACE,oBAGF,yCACE,cAGF,wBAfF,iBAgBI,cAEA,yCACE,cAKJ,wBACE,8BACE,2CACA,0BACA,cACA,aACA,OACA,cACA,iCACA,eACA,iCACA,YACA,2BAEA,8KAGE,iBAAkB,CAClB,gDACA,WAEA,qNACE,2BACA,eACA,oBAIJ,8DACE,cAGF,uDACE,cACA,aAGF,0GAEE,gDAGF,qDACE,eAMR,yBACE,qBAAsB,CACtB,aACA,cAEA,8BACE,qCACA,SACA,aACA,sBACA,OACA,eACA,QACA,iCACA,2BAIA,8DAEE,sBAIJ,iCACE,8CACA,0BACA,cACA,6BACA,wCACA,2CACA,SACA,aACA,gBACA,WAEA,+CACE,mBACA,aACA,UACA,kBAGF,uCACE,wBAGF,8CACE,aAIJ,mEAEE,SAEA,oBAEA,yFACE,oBAIJ,mCACE,6BACA,gBAEA,0CACE,YAGF,qCACE,SACA,UAIJ,wBACE,8BACE,6CACA,uCACA,iCACA,YACA,4BACA,kDACA,yEACA,UACA,kBACA,QACA,qBACA,YACA,2BAGF,iCACE,cACA,mCACA,kBAEA,uCACE,uBAGF,8CACE,cAGF,6CACE,aAGF,uCACE,OACA,mBAMR,yBACE,aACA,gBACA,SACA,UAEA,wBANF,yBAOI,aACA,UAEA,yCACE,cAKN,uBACE,mBACA,aACA,kBCnNF,4BACE,gBAGF,eACE,qCACA,SACA,aACA,uBACA,OACA,cACA,iCACA,eACA,QACA,MACA,qCAGE,0CAEE,sBAKN,eACE,qCACA,mBACA,aACA,eACA,qCAGF,cACE,mBACA,aACA,8BACA,sBAEA,+BACE,oCAAqC,CAErC,qCACE,kCAAmC,CAGrC,4CACE,YACA,cACA,cACA,WAIJ,oBACE,eACA,SACA,cAIJ,eACE,iBACA,gBACA,SAIA,sBAEE,gBAGF,cAEE,gBACA,uBAEA,0BACE,SAKF,wBACE,sCACE,uBAIJ,yCACE,2BACA,uBACA,WACA,2BAIJ,mBACE,SAIJ,wBACE,4BACE,eAGF,eACE,mBACA,2BAGF,eACE,iCACA,gCACA,8CACA,gBACA,gBACA,cACA,iCACA,WAEA,wBACE,gBAGF,sBACE,YC/HJ,uBACE,cAGF,8BACE,2BACA,2BAGF,gCACE,kBAEA,sCACE,yCAIJ,wBACE,8BAGE,oCCtBN,2BACE,mBACA,6CACA,8CACA,SACA,mDACA,UACA,wCACA,MACA,2BAEA,sCACE,mBACA,aACA,UACA,8BAIF,2CACE,aAGF,wBACE,2CACE,mBACA,mBACA,aACA,mBAEA,wDACE,gBACA,8CAKN,wBArCF,2BAsCI,gBAEA,sDACE,eAIJ,yBACE,sCACE,kBACA,oBClDN,oBACE,8CACA,0BACA,aAEA,6DAEE,cACA,aACA,kBAGF,8BACE,mCAIJ,oBACE,GACE,UAGF,GACE,WCnBJ,cACE,mBACA,UAEA,wBAJF,cAKI,gBAIF,2CACE,4BACA,qBACA,gBAIF,qCACE,wCACA,gBACA,eAEA,wCACE,SAKJ,kDACE,8CACA,4BACA,qBACA,mBACA,qBAEA,wDACE,uBAGF,iHACE,8CACA,kCACA,4CACA,+BACA,0BACA,gBAIJ,uDACE,kBAGF,wBACE,cCvDJ,SACE,4BAEA,mBACE,aAGF,iBACE,0BACA,4BACA,qBACA,SAGF,YACE,8CACA,kCACA,4CACA,+BAEA,kBACA,+BACA,gBAEA,qBAGF,uBARE,qBAIA,iCAQA,CAJF,WACE,4BAGA,eAEA,kCAEE,0BAIJ,oBACE,aACA,yCACA,2CACA,sBACA,kBAEA,4BACE,eAIJ,iCACE,iBAGF,YACE,wCAEA,8BAEE,mBAIA,qBACE,mBAGF,yBACE,cACA,2CACA,qBAKN,0BACE,SACA,oBACA,wCACA,MACA,mCAEA,6CACE,iBAGF,wBAXF,0BAYI,aACA,iBACA,qBACA,eACA,UAEA,6CACE,kBAQN,8DAEE,gBAGF,6BAEE,oBAGF,iBACE,cACA,CAGF,+BAHE,uCAWA,CARF,cACE,yBACA,iCACA,6BAEA,gBACA,gBACA,mBACA,qBAGF,iBACE,gBAEA,oBACE,oBAIJ,eACE,kBACA,qBACA,YACA,qBACA,sCACA,WAIF,uDAEE,yCAGF,0BACE,sCAIF,wBA7JF,SA8JI,aACA,OACA,iBACA,eACA,QACA,kBACA,4BAEA,wBACE,qCACA,6CACA,aACA,yBACA,6BACA,gBACA,gBACA,cACA,aACA,kBACA,4BACA,gCACA,WACA,sBAEA,2CACE,iBACA,4IAKA,qBAGF,8CA1BF,wBA2BI,aACA,sBACA,gBAEA,2CACE,cACA,eA1CR,wBA8CI,+BACE,kBACA,aACA,oBACA,gBAIJ,mBACE,qBACA,gBACA,SACA,eAEA,aACA,OACA,UACA,eACA,QACA,MACA,8BACA,WACA,oBAUA,+EACE,wBAGF,+BACE,WAKN,wBACE,gBACE,aAvPN,SA2PI,aACA,kBALE,CAOJ,2CA9PF,SA+PI,cACA,eAEF,yBAlQF,SAmQI,6BACA,wCACA,mBCrQJ,0BACE,+FAKA,aACA,sBACA,wCACA,oBACA,oBACA,kBAEA,wBAbF,0BAcI,sBAGF,0CACE,mBACA,aACA,oBAGE,gFACE,uCAKN,gDACE,WACA,kBACA,QAEA,sDACE,qBACA,YACA,sCACA,WAIJ,sDACE,wBACA,2CACA,uCACA,mBACA,0BACA,+BACA,qBAEA,4DACE,mCACA,uEACE,CAEF,eAGF,gEACE,WAGF,kGACE,iDAGF,4HAEE,mBACA,WAMA,4WACE,cAIJ,4EACE,6BACA,mBACA,aACA,qCACA,iBACA,kBACA,aAEA,wBATF,4EAUI,YAIJ,0FACE,aACA,kBACA,aAEA,gGACE,iBAGF,wBATF,0FAUI,wBAKN,kCACE,oCAAqC,CACrC,sBAAuB,CACvB,kBAAmB,CACnB,aAGF,gCACE,uCACA,mBACA,eACA,kBACA,cAKF,cACE,mCACA,YCnIJ,yBACE,cACA,2BACA,WCmBF,sBACE,GACE,UAGF,IACE,UAGF,GACE,WC9BJ,iBACE,mBAEA,mBDJA,wCCKA,aACA,uBACA,UDPA,CECF,gBACE,6CACA,uCACA,iCACA,4BACA,SACA,aAEA,wBARF,gBAWI,oBAGF,wBAdF,gBAeI,iBACA,mBAGF,sCACE,cACA,iBACA,WAEA,qDACE,kBAEA,yDACE,YACA,kBACA,QACA,MACA,UAIJ,yCACE,aACA,UAGF,gDACE,YAEA,kBACA,UAEA,sDACE,cACA,qBAGF,2DACE,cACA,kCAGF,kEAEE,oBACA,WACA,gBAGF,uDAEE,SACA,YAEA,mEACE,uCAAwC,CACxC,kCAAmC,CAGrC,2DACE,2CAA4C,CAG9C,0DACE,yCAA0C,CAI9C,6DACE,aAEA,UACA,aAGF,iEACE,mBACA,aACA,WACA,gBAIJ,kDACE,kBAGF,0DACE,gBACA,gBAGF,6CAEE,oBC3GF,kDACE,eCLN,WvDooBA,sBAEE,uBACA,wBACA,yCACA,8BACA,8BACA,4BACA,oCACA,2CACA,QAGF,sBA5oBE,yBACA,sBACA,0BACA,oBACA,uBACA,mBACA,qBACA,0BAEA,+BACA,8BACA,gCACA,mCACA,kCAIA,mCAIA,+BAIA,gCAIA,+BAIA,2BAIA,2BAIA,yBAEA,2BACA,iCAEA,+BACA,gCACA,kCACA,gCAEA,iCACA,kCACA,oCACA,wCACA,sCACA,4CACA,uBAEA,yBACA,2BACA,uBACA,wBACA,uBACA,yBAEA,kCACA,2BAKA,4BACA,gCAKA,gCACA,+BACA,6BACA,yBAEA,iCACA,oCACA,qCACA,6BACA,6BACA,8BACA,iCACA,gCACA,gCAEA,8BAEA,qBAEA,4BACA,yBAEA,sCACA,qBACA,qBACA,4BAEA,4BACA,2BACA,0BACA,4BACA,4BACA,6BACA,0BAEA,0BACA,yBACA,wBACA,0BACA,0BACA,2BACA,0BAEA,0BACA,yBACA,wBACA,0BACA,0BACA,2BACA,yCAEA,yCACA,wCACA,uCACA,yCACA,yCACA,0CACA,+BAEA,+BAIA,8BAIA,6BAIA,+BAIA,+BAIA,gCAIA,iCAKA,qBACA,2BAEA,6BACA,4BACA,8BACA,2BAEA,6BACA,8BACA,2BACA,uBAEA,yBACA,0BACA,uBACA,uBAEA,yBACA,0BACA,uBACA,4CACA,yBAEA,8BACA,gCACA,yBACA,sCACA,iCACA,8CACA,6BACA,qCACA,6BACA,oCACA,mCACA,sCACA,mCACA,sCACA,4BACA,yCACA,sCACA,iCACA,qCACA,iCACA,qCACA,iCACA,qCACA,iCACA,qCACA,iCACA,kCACA,uCACA,qCACA,2BAEA,oCACA,6BACA,mCACA,4CACA,2BAEA,kCACA,qEACA,8BACA,0BACA,iCACA,6BACA,mEACA,+BACA,kCACA,8BACA,qCACA,2EACA,iCACA,iCACA,8BAEA,qCACA,oCACA,gDACA,8CACA,gDACA,8CACA,gDACA,mCACA,4CACA,+CACA,qDACA,oCAEA,mEACA,2CACA,2CACA,yCACA,2CACA,yCACA,2CACA,0CACA,kCACA,qDACA,0CACA,0DACA,wDACA,0DACA,wDACA,0DACA,0DACA,wDACA,0DACA,wDACA,0DACA,0DACA,wDACA,0DACA,wDACA,0DACA,mCACA,qEACA,mFAGA,wHAIA,gHACA,gHACA,CACA,mHACA,kIAEA,kIAEA,sIACA,CACA,iIACA,2GAEA,wFACA,sGAIA,oGAuVF,0GAnVI,8FACA,wGAOF,sGAIA,4FAIA,sGAGA,mBACA,2JAYA,4HAYA,gIASA,4HAKA,2BACA,+CACA,0BACA,2CACA,2CACA,6BACA,+BAEA,8BACA,gCAEA,mCAEA,kCAEA,mCACA,+BAIA,gCACA,+BAKA,2BACA,2BACA,yBACA,2BAEA,8BACA,+BACA,gCACA,+BACA,mCACA,iCACA,kCACA,oCACA,wCAIA,sCAEA,4CACA,oBAEA,oDAEA,uBACA,wBAEA,gDACA,kCAEA,2BACA,4BACA,gCAGA,gCAEA,+BAEA,0BACA,yBACA,iCAEA,oCACA,qCAEA,6BACA,0BACA,8BACA,iCAEA,gCACA,iEACA,qBACA,4BACA,yBACA,2DACA,iDAEA,4BAIA,qDAIA,4BAIA,yDAIA,oDAIA,yBAIA,kDAKA,0BACA,2BAEA,0BACA,0BACA,yBACA,kDAEA,0BACA,2BACA,yCAGA,yCAEA,wCACA,uCAGA,yCAEA,0CACA,yCAEA,+BACA,+BACA,8BACA,6BACA,+BACA,+BACA,gCACA,iCACA,qBACA,wDACA,4BACA,yDACA,2DACA,kDACA,sBACA,iDACA,6CACA,0BACA,mEAEA,yBACA,8BACA,gCACA,0BACA,qCACA,oCACA,8CACA,6BACA,qCACA,6BAEA,oCAEA,mCACA,sCACA,mCAGA,qEAEA,yCACA,sCAEA,sEACA,iCACA,qCACA,iCACA,qCACA,sEACA,iCACA,qCAGA,uCACA,qCACA,2BACA,oCACA,gEACA,4CAEA,2BACA,mCACA,yEACA,8BACA,2DACA,6BACA,wEAEA,iEACA,mEACA,gFAEA,iCACA,iCACA,2BACA,2CACA,0CACA,0CACA,yCACA,yEACA,oCACA,iFACA,4CACA,8CACA,0FACA,sCACA,4CACA,oGAEA,uEACA,+EACA,0CACA,uFACA,wCACA,2CACA,8GACA,8GAEA,wDAGA,0DACA,kHACA,wDACA,0DACA,wHACA,6DACA,2DACA,6DACA,2GAEA,mFACA,uHAEA,+GAEA,+GACA,mHA8BF,iIAvBI,iIACA,qIAznBF,iIAMA,0GAIA,uFAEA,qGAQA,mGAQA,yGAYA,6FAKA,uGAGA,qGAIA,2FAGA,qGAIA,kBACA,yBACA,gIAKA,2HAWA,+HAKA,2HAGA,qCACA,6BACA,sBACA,yBACA,gDACA,oBAEA,uBAEA,wCAEA,0BACA,+BAEA,8BACA,gCACA,mCAGA,kCAEA,mCACA,+BAEA,gCAGA,+BACA,2BAEA,2BACA,yBACA,2BACA,iCAEA,CACA,8BACA,gCACA,kCACA,gCACA,CACA,kEAEA,oCACA,wCACA,sCACA,4CACA,uBACA,oDACA,+CAEA,wBAIA,0DAIA,2BAIA,4BAIA,gCAIA,gCAIA,+BAKA,6BACA,yBAEA,iCACA,oCACA,qCAGA,6BACA,6BACA,8BACA,iCAEA,gCACA,gCAEA,8BAEA,qBACA,4BAEA,+DACA,qBAEA,iDACA,4BACA,2BACA,sDACA,yDACA,oDACA,yBACA,kDACA,qDACA,0BACA,mDACA,kDACA,qDACA,yCACA,iFACA,uCACA,yCACA,yCACA,0CAEA,+BACA,+BACA,8BACA,6BACA,+BAEA,+BACA,gCACA,iCACA,qBAEA,wDACA,4BACA,8BACA,wDACA,8BAEA,2BACA,gDACA,2BACA,6CACA,yBACA,0BACA,mEACA,yBACA,8BACA,gCAEA,+DACA,iCAEA,8CAEA,6BACA,qCACA,6BACA,oCACA,mCACA,sCACA,mCACA,sCACA,4BACA,yCACA,sCACA,iCAEA,sEACA,qCACA,iCACA,qCACA,iCACA,sEACA,kCACA,uCACA,qCACA,2BACA,oCACA,gEACA,4CACA,6DACA,qEACA,8BACA,2DACA,gGACA,+BACA,kCACA,mEACA,2EACA,iCACA,+DACA,qCACA,oFAEA,4IACA,mFAGA,2FAGA,qDACA,+DACA,mFACA,oFACA,oFACA,qFACA,uFACA,0CACA,0DACA,kHACA,wDACA,0DACA,0DACA,wDACA,2DACA,iHACA,0DAGA,wDAEA,0DA8VF,wDA7VI,0DACA,wGACA,mFAMF,wHAKA,gHAKA,gHAGA,oHAQA,kIAYA,kIAaA,sIAKA,kIAGA,2GAGA,wFAKA,sGAIA,oGAMA,0GAMA,8FAIA,wGAGA,sGAGA,4FAIA,sGAKA,mBAEA,0DAEA,6BACA,2HAKA,4HAMA,gIAKA,4HAKA,CACA,mCACA,6BACA,4CAEA,gDACA,oBACA,6CACA,kDACA,+BACA,8DACA,mCAEA,kCAIA,mCAIA,+BAIA,gCAIA,+BAIA,2BAIA,2BAKA,CACA,mDAEA,8BACA,+BACA,gCAGA,+BACA,mCACA,iCACA,kCAGA,oCACA,wCAGA,sCACA,4CAEA,6CACA,2BAEA,uBACA,+CACA,yBACA,kCACA,uDACA,gCACA,gCACA,+BACA,0BACA,0DACA,oCACA,qCACA,uDACA,+DACA,gCACA,mCACA,mDACA,4BACA,yBACA,sCACA,qBACA,iDACA,4BACA,2BACA,0BACA,wDACA,6BACA,oDACA,iDACA,0BAEA,0BACA,2BACA,oDACA,iDACA,0BAEA,0BACA,oEACA,yCACA,wCAEA,uCACA,kFAEA,0CACA,+BACA,+BACA,8BACA,6BACA,+BAGA,+BACA,gCACA,iCACA,gDACA,6BACA,4BACA,8BACA,wDACA,8BACA,kDACA,gDACA,wBACA,6CACA,gDACA,4CACA,yBACA,8DACA,0BACA,qCACA,oCACA,8CAEA,kEACA,6BACA,oCACA,mCACA,sCACA,mCACA,sCACA,+BACA,+EACA,iCACA,sCACA,qEACA,sEACA,iCACA,sEACA,4EACA,qCACA,2BACA,iEACA,mCACA,yGACA,wGAEA,2DAGA,qGACA,iEACA,mEACA,gFACA,kEACA,uEACA,mFACA,oFACA,iEACA,kFACA,4CACA,0FACA,8CACA,kFACA,+CACA,qDACA,uEACA,qCAEA,0CAEA,0CA8BF,uFA7BI,wCACA,mGACA,8GACA,wKwD7nBF,wDAOE,0DAUJ,wDAGE,0DAMA,6DAEE,2DACA,6DAGA,2DAEA,6DAOA,sCAEE,qEA1BN,mFAsCI,uHAKA,+GAME,+GC9DJ,CCPF,kHAKE,kQHGA,qIAEA,iIAME,sSAIE,mGACA,6SAKA,gMAGF,qGACE,kOAOE,2HAMA,udAmBJ,kEAIA,gCACA,oEAEA,oBAEE,sFAGF,mCAEE,kDACA,8GAIE,oCAIJ,wBACE,oDACA,6BACA,cAIJ,2BAEE,2BACA,6DAGA,oEAKA,CACA,wDAGF,iDAGE,4BAEA,2BACE,+DAGE,YAKN,gBACE,0BAEA,iCAEE,YACA,mCAIJ,sBACE,8BAGE,kBACA,mLAeJ,oBACE,wBAGF,uBACE,qIAUI,gCACA,oZA0BJ,yBACE,qBACA,yWA8BA,yBAEA,2LAUE,mRAiBF,0BAGF,YACE,kDAIJ,kBACE,uCAGF,WACE,iSAQE,kBAEA,6BACE,mDAMJ,CAEA,2CAGF,6CASF,kDAEE,sBAIF,4CACE,4DAIA,yBACE,2FAMF,iCAEE,gHAeF,iCACE,iDAKA,iEACA,qBAIE,wBAGF,eACE,iDAGF,iCACE,mBAEA,mCACE,0CAGF,6CACE,4JAQF,8CAQN,gDACE,SACA,kBACA,4OAWE,iBACA,0BACA,4CAEA,mBACA,0BAIJ,mCAMA,uCACE,aACA,kBACA,qBAEA,yFAUF,yBACE,8CAQF,0BAKA,YACE,oBACA,gBACA,aAGF,kBACE,qBACA,2BACA,+DAKA,kBACA,0BACA,kBACA,8CASA,2CASF,2CACE,sDAEA,0BAGA,4CAKF,kBAGE,gDACA,sBACA,8BAIF,8BACE,4BACA,mDAIF,6EAEE,QACA,+EAKE,aACA,4DAKF,eAGF,kDAGE,gBAEA,gCAEE,gBACA,WACA,0DAEA,gBAIJ,0CAKA,yDAGE,6DACE,iHAKJ,wCAGE,mDACE,6FACA,mBASF,mBAEA,0BACE,mBADF,eAII,UAGF,qDAEE,mEAIJ,CAEE,yBAGF,wDAKF,2CACE,gBACA,mCAEA,sCAEA,qBAEA,sBACA,CAMA,gDACE,cACA,0CAIJ,oBACE,kBACA,WACA,8EAGE,WAGF,qBACE,mFACA,iCACA,0CACA,gCAEA,6CAGA,iKAOA,4CAGE,8CAEA,mOASF,eACE,uCACA,iCACA,mBACA,gIAEA,yCAEE,uDAIJ,gCACE,oBACA,+BAGA,oBACA,oCAGF,2BACE,oBACA,kDAMF,OAFF,uCACE,yBAKE,CAJF,8BAIE,iDAGF,kDACE,6CACA,4BAEA,mBACA,gEAGE,6DAGF,wCACE,WACA,8CACA,uBAKF,0BACA,oEAIA,uBAEA,mBACA,CACA,6BACA,UACA,wEAEA,kBACE,6JAEA,4BAEE,gLAGF,kEAEE,0DAQN,eACA,0CAEA,mIAGE,iEAIA,CAIJ,yBACE,WACA,mBACA,0BAEA,yBACE,uCAEA,iBACA,oDAGE,6BAIJ,yBAGE,0BAEA,gDAEA,kCACE,2BACA,aACA,sBAEA,uHACA,iEAGA,iFAIA,2CAIA,iEAGA,gDAGF,0CAEE,2CAEA,oJACE,wEAKF,wCAKN,iJAME,2BAEA,6BACA,8HACA,eACA,0BAEA,2IAQA,gIACA,kBACA,oBAEA,gFAIE,0CAGF,kCACE,4CAKF,uCACA,2BAEA,qDAGA,eAEA,qDAGF,0CAMF,gDACE,+FAEA,4EAKE,0CAKJ,6BACE,wCAEA,kFAGA,kBAGF,gCACE,4BACA,uCACA,8DACA,cACA,qKAWA,oCACA,yKAOA,qCACE,6DAIF,8BACE,eAEA,2MACE,2DAOF,aAzBJ,UA0BM,wFAMF,0BAEE,qCAEF,iDANF,UAOI,2BACA,CACA,mDACA,wOACA,wBAMA,gBAAI,CAAJ,qBACA,WACA,uGAGE,SACA,oCAGJ,mFAEI,4BAIN,6DAoBA,sCAEE,CArBA,qEAGE,8DAWJ,CAOE,sDAMF,kDAEA,mCAKA,gCAGF,gBACE,oEAIA,4DAIA,CAIA,qBAGF,CACE,2DAxBA,yCAIA,YAGF,CASE,uBAIA,iBAGF,UAsBI,CArBF,0CAGF,CACE,cAGF,CACE,iBACA,sEAIF,8DAGE,CAIA,SACE,+DAOA,UACA,sCAGF,kDAEE,8BACA,iCAGE,yBAEA,mBAEA,UACA,kCAKN,aACE,iEAMA,YACE,oBACA,kBAIA,0+GI5iCJ,aACE,6CACA,YACA,iCACA,0BAIA,aACA,cACA,UACA,WAEA,uFAGE,SAGF,0BACE,aAGF,+BACE,aAGF,8BACE,aAGF,sCACE,aAGF,uCACE,aAGF,qCACE,aAcJ,gEACE,aACE,aAEA,0BACE,aAGF,+BACE,aAGF,8BACE,aAGF,sCACE,aAGF,uCACE,aAGF,qCACE,cC/EN,oBACE,cACA,aACA,cAEA,gDACE,aAGF,oCACE,aAGF,mCACE,aAGF,2CACE,aACA,kBAGF,4CACE,aAGF,0CACE,aAGF,wBA9BF,oBA+BI,aAEA,gDACE,aAGF,oCACE,aAGF,mCACE,aAGF,2CACE,aAGF,4CACE,aAGF,0CACE,cCtDN,iBACE,yBAA0B,CAE1B,wBC0GgC,CDzGhC,oBACA,aCQqB,CDPrB,aAEA,wBACE,iFAEA,sBACA,CACA,+BACA,YACA,kBACA,CAGF,mCAEE,4BAGF,+DAEE,cAIA,CAKF,yDAJI,iCAUF,CANF,yBAEE,aACA,CACA,yBAEA,+DAEE,uBAIJ,iCACE,YACA,8BAGF,4GAGE,gBAGF,iCACE,uCACA,kBACA,mCACA,kCAGF,kCAEE,eAEA,wCACE,wBAEA,8CACE,wBC5De,CCXvB,oBACE,wCAAyC,CACzC,sDAAuD,CACvD,0CAA2C,CAC3C,8CAA+C,CAC/C,8CAA+C,CAC/C,wCAAyC,CAEzC,8BACA,qBACA,cACA,uBAEA,yBACE,qCAAsC,CACtC,mDAAoD,CACpD,uCAAwC,CACxC,2CAA4C,CAG9C,wBACE,oCAAqC,CACrC,kDAAmD,CACnD,sCAAuC,CACvC,0CAA2C,CAC3C,8CAA+C,CAC/C,oDAAqD,CAIrD,gDACE,yBAIJ,4BACE,wBAAyB,CACzB,8BAA+B,CAC/B,+BAAgC,CAEhC,mBACA,eACA,aACA,eACA,UACA,8BACA,eACA,qGAIA,kBAEA,oDAEE,aAGF,uCACE,iBAAkB,CAElB,qCACA,wBACA,4BACA,wBACA,cACA,eACA,iCACA,kBACA,SACA,mBAGF,0CACE,eACA,gBACA,iBACA,gBACA,SACA,kBAEA,oDACE,gBAIJ,kCACE,mCACA,sBACA,iCACA,iBACA,gBACA,kBACA,iBACA,yBAGF,sCACE,aACA,eACA,UAEA,8CACE,qCACA,mBACA,aACA,eACA,UACA,sBAEA,uDACE,aAEA,8DACE,4BACA,wBACA,WACA,cACA,eACA,cAIA,qEACE,mEADF,oEACE,iEADF,uEACE,oEADF,sEACE,mEAIJ,8DAEE,sCAGA,qHACA,qEACA,8BAIF,6EACE,wEACA,mHAON,qEAEA,2CACA,+BAIJ,mCAEE,kBAEA,mCACE,4BAIF,qBACE,mBACA,8BAEA,kBAEA,aAEA,+BACE,iBACA,aACA,eAGE,oQASA,kNAIE,0CCnMZ,oCACE,QACA,SACA,2BACA,qCACA,+BAEA,kBACE,uCACA,uCACA,4BACA,aACA,qCACA,uBACA,gBACA,4CACA,uCAEA,kBACE,4BACA,eACA,aACA,eACA,WACA,6GAEA,YAEE,2CAGF,oBACE,gBACA,WACA,sDAGF,oCACE,qCAIJ,eACE,6CAEA,6CACE,uBACA,mDAEA,WACE,iBACA,kBACA,2CAKN,sCACE,4CACA,mDAEA,+BACE,YACA,4CACA,yDAEA,WACE,iBACA,kBACA,uDAGF,UACE,oEAEA,cACE,2DAIJ,YACE,8BAMR,cACE,0CAEA,iBACE,oBACA,4CACA,yCAIJ,YACE,sBACA,4CAEA,gBACE,gBACA,cACA,WACA,+CAEA,kBACE,0BACA,aACA,oBACA,WACA,0GAEA,6CAEE,0DAGF,yBACE,wCACA,gBACA,gIAEA,sBAEE,0BACA,oDAIJ,sBACE,oBACA,cACA,eACA,kBACA,yBACA,CCzIV,SACE,qBACA,YACA,kBACA,WAEA,aACE,wDACA,uCACA,mDACA,kBACA,sBACA,cACA,aACA,aACA,kBACA,YAGF,yBACE,sBAGF,0BACE,qBAGF,0BACE,sBAGJ,mBACE,GACE,uBAGF,GACE,yBC/BJ,UACE,kBACA,UACA,WACA,4BAEA,YACE,2CACA,2CACA,OACA,cACA,kBACA,QACA,kBACA,wBARF,YASI,kBAGF,oCAEE,4BACA,qBACA,SC1BN,aACE,6CACA,kBACA,kBAEA,kBACE,aACA,sBACA,WACA,cACA,iBAGF,4BAEE,4BAIA,wBACE,aACA,eAIJ,sBACE,aACA,sBACA,UAGF,oBACE,cACA,gBAEA,gDAEE,WAGF,0BACE,gBAIJ,iBACE,mBACA,2CACA,aACA,mBACA,SAEA,mBAGF,wBACE,qCACA,SAEA,0BACE,0BAEA,gCACE,qBAON,iBACE,aACA,eACA,qCACA,SAGF,sBACE,aAGF,iBACE,0BAEA,uBACE,qBAKN,iBACE,cACA,WAGF,cACE,aACA,SACA,iBAEA,iBACE,cAGF,oBACE,cACA,YACA,WAKF,oBACE,mCACA,iBAGF,iBACE,aACA,sBACA,UAGF,iBACE,wCAIJ,wBAEI,kBACE,aACA,2BACA,kFACE,CAKF,8BAGF,sBACE,eAGF,uBACE,eAGF,uBACE,eAGF,uBACE,eAGF,uBACE,eAGF,qBACE,cAGF,iBACE,cAGF,mBACE,gBAGF,sBACE,mBAIA,gDAEE,aAMR,wBAEI,kBACE,SACA,8GACE,CAGF,gEAGF,sBACE,sBAIA,gDAEE,aAMR,yBAEI,kBACE,YCtNN,cACE,kBACA,mCAGF,aACE,cAGE,wBADF,2BAEI,aACA,sBACA,qBAGF,mCACE,iBAGF,kCACE,YACA,aACA,wBAHF,kCAII,kBACA,WACA,SCzBR,iBACE,cACA,YACA,eACA,aACA,qBAEA,oBACE,aAGF,yBACE,aASA,2GACE,UAEA,oCACE,aACA,2BACA,8BAEA,4CACE,iBAEA,qGAEE,+CACA,qBAIJ,iDACE,mBACA,aACA,SACA,8BAGF,sCACE,gBAEA,kDACE,aAGF,iDACE,gBAIJ,yCACE,gBACA,gBACA,kBACA,iBAGF,yFAEE,kBACA,gBACA,aACA,iBAGF,uFAEE,kBACA,2CACA,qCACA,iCACA,uBACA,gBACA,gBACA,aACA,8CACA,iBACA,gBACA,mBACA,kBACA,4CAEA,mGACE,6CAIJ,qDACE,6CACA,uCACA,4BCjGR,iCACE,aAIA,4BACE,kBACA,+BACA,0BACA,sFACA,iCACA,2BAGF,4BACE,+BAEA,yBACA,qBACA,yBAGF,uCACE,cACA,iCACA,0BACA,mBACA,eAEA,qDACE,mCACA,mBAEA,wBAJF,qDAKI,6BAIJ,yCACE,kBACA,mCAIJ,6BACE,cC9CN,qBACE,uCAAwC,CACxC,yCAA0C,CAC1C,mCAAoC,CACpC,mCAAoC,CAEpC,8BACA,gBACA,kBAKE,kEACE,kBAGF,sDACE,qBACA,mBACA,kBACA,WAEA,wBANF,sDAOI,kBACA,YACA,QACA,4BAGF,yEACE,qCAAsC,CACtC,SACA,kBACA,QACA,iCAGF,4DACE,4BACA,YACA,WAIJ,mCACE,eACA,SACA,gBAEA,wCACE,kBAIJ,kCACE,cAEA,6CACE,gBAIJ,0EAGE,2IACE,CAMJ,kCACE,uBACA,0BAGF,6CACE,kBACA,gBAQJ,wBACE,gEACE,iBAIJ,wBACE,gEACE,iBC9FN,YACE,2CACA,0BACA,aACA,sCACA,WAEA,+BACE,mBAEA,4BACA,aACA,mBACA,cACA,WACA,cACA,gBACA,aAEA,+BACA,WAEA,mDACE,iBACA,UAEA,sDACE,eACA,gBAEA,2DACE,cAGF,uEACE,oBAIJ,sDACE,4BACA,WAGF,mEACE,aACA,SACA,WAEA,qEACE,iCACA,eACA,gBACA,iBACA,cACA,kBACA,kBAEA,wBACA,YACA,WACA,UAGF,mFACE,qCACA,qCACA,yBAEA,yFACE,uCACA,mCAIJ,qFACE,+BACA,oDACA,WAGF,2FACE,0DAMR,6BACE,uCAAwC,CACxC,cACA,WACA,gBACA,MAEA,8BACA,WAEA,gDACE,4CACA,wBAFF,gDAGI,kCCvGR,wBACE,2CACA,0BACA,iBACA,WAEA,iCACE,mBACA,aACA,8BACA,SACA,YACA,8BACA,cACA,gBACA,kBACA,WAEA,yBAZF,iCAaI,oBAGF,iGAEE,aACA,sBACA,WAGF,gDACE,mBACA,mBACA,0CACA,YACA,gBACA,yBANF,gDAOI,0BAIJ,iDACE,mBACA,gBAEA,kBAEA,mDACE,sBAGF,oDACE,+BACA,yBACA,qBACA,mBACA,aACA,yBAGF,oDACE,kBACA,gBACA,aAGF,yBAzBF,iDA0BI,mBACA,YACA,cACA,oBAON,+CACE,sBACA,yBAFF,+CAGI,oBAKN,uCACE,uCAEA,gDACE,sBACA,yBAFF,gDAGI,4BC5FN,wBAEA,oCACE,oCAEA,aACE,kBACA,kBACA,yBAEA,mCALF,iBAMI,wCAIA,cACA,kBACA,+BACA,gBACA,iBAEA,kFAPF,yBACE,CAKA,kBAMA,iGAGF,kBAEE,aACA,sBACA,SACA,uBACA,cACA,mIAEA,YACE,yBAGF,gGAbF,mBAcI,mBACA,sIAGF,kBACE,uCACA,mBACA,yBACA,aACA,sBACA,SACA,gBACA,gBAEA,WACA,iJAEA,yCACE,mJAGF,wCACE,+IAGF,0CACE,2IAGF,oBACE,4BACA,0BACA,cACA,SACA,cACA,WACA,yJAGF,YACE,sBACA,WACA,YACA,gBACA,oBACA,WACA,2TAEA,QAEE,uKAGF,oBACE,sBACA,CADA,gBACA,aACA,8BACA,YACA,6LAEA,cACE,kBACA,+BACA,gBACA,gBACA,mBACA,iBACA,mLAGF,eACE,oBACA,+LAGF,eACE,kBACA,+BACA,gBACA,kBACA,iBACA,cACA,gBACA,6KAIJ,qBACE,+JAGF,qBACE,qBACA,iBACA,WACA,qKAEA,gBACE,mBACA,gBACA,WACA,yKAEA,wBACE,0BACA,4CACA,qLAEA,oBACE,qLAIJ,sDACE,oBACA,mBACA,6KAKN,kBACE,kBACA,mBZvJW,mBYyJX,0BACA,aACA,gBACA,YACA,uBACA,8BACA,CADA,qBACA,qBACA,wBACA,uKAGF,wBACE,eACA,kBACA,mCACA,gBACA,0BACA,qMAEA,mCACE,2KAIJ,wBACE,wCACA,6BACA,iKAGF,iDACE,kDACA,iCACA,6KAEA,2CACE,WACA,qBACA,YACA,kBACA,kJAWd,gCAEE,yBACA,SACA,uBACA,mB9D5NF,mBACE,GACE,UAGF,IACE,WAGF,GACE,W+DVJ,qBACE,4BAA6B,CAC7B,wBAAyB,CACzB,iBAAkB,CAClB,kEAAqE,CAErE,mCACA,yBAEA,wBATF,qBAUI,wBAAyB,CAAzB,CCWF,uEAGE,SAGF,gDAEE,iCAEA,oDACE,YACA,qBAIJ,uBACE,0BAEA,6BACE,qBAIJ,yBACE,kBAGF,6BACE,iBACA,kBACA,2BACA,2BACA,4BACA,WAGF,wBACE,eACA,gBACA,mBAEA,wBALF,wBAMI,oBAhEJ,4BDiBI,gCAAiC,CACjC,0BAA2B,CAC3B,+BAAgC,CAChC,gBAAiB,CACjB,eAAgB,CAChB,uEAGA,yBAA0B,CAC1B,uBAAwB,CACxB,yBAA0B,CAC1B,eAAgB,CAChB,mBAAoB,CACpB,gEAGA,2BAA4B,CAC5B,8BAA+B,CAC/B,2BAA4B,CAC5B,8BAA+B,CAC/B,2BAA4B,CAC5B,8BAA+B,CAC/B,2BAA4B,CAC5B,8BAA+B,CAC/B,2BAA4B,CAC5B,8BAA+B,CAC/B,uBAAwB,CACxB,sBAAuB,CACvB,uBAAwB,CACxB,4BAA6B,CAC7B,0BAA2B,CAC3B,2BAA4B,CAC5B,6BAA8B,CAC9B,0EACA,+BACA,4BACA,sCACA,kCACA,mBACA,2BACA,4BACA,yCACA,+BACA,kDACA,iCACA,qBACA,iCACA,2CACA,wBACA,mCACA,kCACA,0EAGA,oEACA,sFAIA,4BACA,gCACA,2BACA,gCAEA,2GAIA,6BACA,wBACA,0BACA,gBACA,uBACA,oBACA,4BACA,+BACA,4BACA,+BACA,4BACA,+BACA,4BACA,+BACA,4BACA,+BACA,2BACA,uBACA,2BACA,6BACA,iEAEA,8GAEA,+BACA,8BACA,sCACA,kCAEA,uBACA,sDACA,yCACA,iFAGA,sDACA,4EAEA,wBACA,mCACA,4GAGA,yECtHF,2FDOE,oCACA,kDACA,gCAEA,2BACA,wIAMA,0BAEA,sJAMA,6BACA,8BACA,6BACA,8BACA,6BACA,8BACA,6BACA,8BACA,4BACA,+BACA,wBACA,uBACA,wBACA,6BACA,qFACA,2EAEA,+BACA,4BAEA,sCACA,kCACA,mBACA,2BACA,qEACA,+BACA,kDACA,CACA,sFAEA,2CAEA,uKAIA,oEC/DJ,sFDoEI,oCACA,kDAEA,gCACA,+EAGA,gBACA,uEAIA,6BACA,wBACA,0BACA,uCACA,oBACA,4BACA,+BACA,4BACA,+BACA,4BACA,+BACA,4BACA,+BACA,4BACA,+BACA,2BACA,uBACA,2BACA,8FAEA,8BACA,gFAEA,+BACA,8BACA,sCACA,kCACA,sBACA,uDACA,yCACA,+BACA,kDACA,iCAEA,sDACA,2CACA,2DAGA,4GAKJ,oKAOE,kJCtEF,oYAiBI,yBAIJ,4BACE,sDAEA,gBAEA,yBALF,oCAMI,aAIJ,iCACE,gCACA,iBAGF,4CACE,+BADF,8CAII,kCDyCF,qBAEE,qCAEA,kBAEA,yBANF,oCAOI,eAIJ,mCC9CF,cACA,iCACA,yCACA,iCAGA,kDAEA,0BAEA,oBACA,mCDmCE,gCChCA,aACA,sCAGF,eACE,+BACA,kBAEA,mCAEA,+BACA,cAEA,oDATF,oBAUI,CACA,eACA,4BACA,uBAGF,yCACE,yBACA,kCACA,kBACA,+BACA,2BAEA,2CDUJ,kBACE,mGCJF,oDACA,8BACA,sFAMA,8BDEE,oEACE,yBACA,6BAEA,8CAGF,qEAKE,4DACE,mCACA,oCACA,gBACA,mCACA,qDACA,oCAIF,wCACE,mDAEA,wBACA,CAEA,yCANF,uDAOI,mDAEA,sBAGF,yCACE,4CACA,kCAIF,4DACE,gDACA,iCAIJ,uFAMA,0DChDJ,wCAEA,2DACA,sBAEA,sDACE,YACA,uBACA,6EAEA,yDAIA,6CAEA,qCAEA,6YAYE,kBAGF,gEACE,gCDiBE,kBAHF,wDAOE,2DAPF,6BAQI,SAGF,8EACE,QAIA,+EACE,yEACA,0BAFF,uEACE,0CACA,iDAFF,wEACE,0CACA,iDAFF,wEACE,0CACA,iDAFF,wEACE,0CACA,iDAMR,wEAEE,0CACA,kGAGA,kDAGA,4EAEA,gFAXF,mBAgBI,wBAGF,mFAIA,0EACE,sBACA,oDAGA,kBALF,oDAMI,4DACA,gBACA,wBAIF,4EAEE,2DAIA,sGAIA,+DACE,kBAGF,qEACE,eAGF,oEAEE,2CACA,sDAEA,iBACA,8DAGA,yCACA,wBAGA,4BAbF,oEAcI,iCACA,+BAKJ,6GAKF,iDAEE,oGAIA,mEANF,2DAUI,kBACA,uCAGF,0CAEE,+EAIA,sCACA,yGACA,2DACA,wEACA,gEAGA,8DAEA,8BAfF,8CAgBI,gBAIJ,iGAEE,yBACA,6DAEA,YACA,2EAEA,kDACA,wBACA,oDACA,wEAGA,uCAdF,8EAiBI,6BACA,kBAEA,+BAEA,kDAEA,yEAOF,+HAEE,kBAKF,sBAsBN,wnBASE,cACA,mDAEA,uGAIA,yCACE,gBACA,6FAGA,aAMJ,0EAEE,yFAGE,gCACA,wDAGA,mBACA,qCAGF,2DACE,oCACA,gBACA,eAEA,sHAGE,gDAEA,4GAGA,mCAEA,oGACE,yCAGF,+IACE,wEAGF,iHAMJ,6EACE,oGA3CJ,yEAmDI,qEACA,sCAEA,6BACE,yBAEA,uDAGF,iCACE,8EAGF,aACE,2DAGA,kGACE,yBACA,2EAGF,sCACE,6GAIF,wBACE,0BAEA,qGAEA,2BACE,2GAGF,sIAIA,qEACE,iHAIJ,0EAEE,oGAMF,sEAKA,6EACE,gDAEA,oBAIJ,2GAON,4HAME,yDACA,qEACA,eAEA,oGAVF,sBAWI,2BACA,6CAGF,0GACE,2HAMF,uNAIE,4RAIA,+QAKF,ueAWA,8RAME,cAEA,4HASA,mDACA,sCAEA,oCApBF,kJAwBE,kHACE,yBAGF,kRAGE,iCAIF,iQAIA,+BACE,iIAMF,6KAIA,uPAKA,sN/D9oBN,2LAIE,cACA,2OASA,gLAEE,4P+DsoBI,MACA,0DAGF,gMAIE,mCACA,WACA,uLAIA,oEACE,iDAEA,CACA,iCACA,kBACA,qMAIA,kCAIJ,mKAGE,yEAEA,8BACA,6MAWA,mBAEA,6MAGE,2TAtBJ,iNAmCI,yLAIE,iTAUR,cAGF,2PAOM,wEAEA,iBACA,6DAIJ,aACE,qCC7iBN,yBACA,6EAGA,2CACE,gFAEA,oBAEA,iEAGA,eARF,iFASI,mEAEA,sEAGF,gCACE,iDAGF,6GAIE,sBACA,8CACA,uBACA,uFACA,oCACA,0EACA,8BACA,WAGF,wGACE,sCACA,2DACA,mDAEA,sBACA,sBACA,4CACA,4FACA,yCACA,gEACA,8BACA,WACA,gFAKF,+DACE,uDADF,gIACE,kBADF,kFACE,+EDyfE,aACE,gFAGF,6FACE,aAGF,gFACE,4FAGF,mEACE,gFAKN,gFACE,gFAGA,mEAEA,gFAIA,mEAEA,gFAEA,6DAdF,uDAiBI,wCACA,mCACA,oBAEA,iCACA,6YE7vBR,OArDE,8BAA+B,CAC/B,gCAAiC,CACjC,6BAA8B,CAC9B,iCAAkC,CAClC,kCAAmC,CACnC,gCAAiC,CACjC,+BAAgC,CAChC,wEACA,oCACA,2EAGA,mCACA,gFACA,4EACA,0EAEA,yBACA,mCACA,gCACA,iCACA,8BACA,wGAmCF,iFA5BE,qCACA,iCACA,8BACA,qCACA,mCACA,iEACA,8EACA,qCAGA,0EACA,sCACA,qFACA,iFAGA,+EAEA,CACA,2DACA,iCACA,8DAaA,6GA9DA,sFAGA,oCACA,2DACA,iCACA,gEACA,mCACA,0IAIA,oCACA,2EACA,mCACA,gFAGA,4EAEA,0EACA,CACA,2FA4CA,iCAxCA,8BACA,wGAGA,iFAEA,oCACA,2DACA,iCACA,sGAGA,iCACA,8GACA,oCACA,2EAGA,sCACA,qFAGA,iFACA,+EAuBA,yBACA,mCACA,gCACA,iCAEA,2DACA,gFD3DA,sFAQE,2BAEA,6DACE,kBACA,oDAKF,yCAGE,sCAIJ,oFAME,iEAEA,gCAEA,6DAKA,WACA,qBAEA,4BALF,yBAMI,kCCoBJ,oBACE,+CACA,oEACA,sDACA,4BDlBF,qPASA,qDACE,oDAIA,wCADF,0NAkBA,yDACE,gBACA,0CAGF,gBACE,yBAEA,wCAHF,aAII,qCClBF,gCARF,CASI,mCAGF,yBACE,iDACA,sEAEA,8DAGA,kBAPF,iEASI,gBAKJ,iDACE,CANE,CAMF,wCAIA,2CALF,4EASE,4BC5FJ,6CACA,wCACA,4CACA,oEACA,2BAlCA,kCACA,iDACA,uBAEA,oDACA,yCACA,8CAEA,gDAEA,oDAEA,yCAGA,mEAIA,6EACE,4CACA,mCAGF,+CACE,8CDqGE,gDACE,wFAKJ,sEAEE,4CACA,8FAEA,qGDhBJ,+BACA,iBACA,iDAEA,mCAGA,+CAIA,oGAKA,gDACE,2BACA,oBAEA,mCACA,gCAEA,aAEA,sCATF,8CAUI,kBAEA,mCACA,gDAGF,8BACE,qDAEA,oBACA,6BACA,eACA,uBACA,kBACA,uBClBJ,yBACE,mDDuBF,2BACA,sBACA,2BAEA,4DACE,kBAGF,gCACE,kBC5BA,6BALF,oBAOI,sCAGF,+EACE,uDACA,2CAEA,iLAKA,wGAGE,wGAIE,uKAKE,aAGF,0FCnJR,6GAEA,oCACA,uIAhCA,sBACA,gGAGA,yCACA,8CAEA,gDAEA,oDAEA,yCAGA,8GAIA,iHACE,+CACA,wBAGF,yMD6JQ,iHAMF,qLAKE,gJAQJ,2JAIA,oJAKA,qFAIA,8EAGE,qKAOE,aACA,4EAOA,yGAfF,iBAgBI,gGAMJ,wEAKA,SACA,yBAEA,oBATF,mKAgBA,yFACE,qBACA,qBACA,mCAEA,iCACA,yBACA,2EAEA,kCAEE,oCAEA,gGAMJ,uDACE,uCAIA,oJAKA,mNAEE,WACA,4BACA,sFAKA,qCAEA,kBAIF,oLAKE,6CAMN,qDACE,iDACA,0CAEA,+GAKA,+EACE,UAGF,oLAEE,CAGF,4FACE,wGAGA,gBAGA,6KAME,aACA,yFAIF,0CACE,CACA,sGAGA,kCAGA,wFAEA,YACA,uBACA,cACA,gBACA,4FAGA,oJAME,oCAEA,4BAKF,wBA9BF,+EA+BI,eAMR,qJAGE,mCAEA,mFACE,kBAGF,qIAEE,+FAEA,wDDpNN,wCAEA,qFAEA,2GAGE,mCACA,4CAEA,2CAGA,kDAEA,aAEA,gXAIE,8BACA,gBACA,8XE/KJ,mBACA,+DACA,iCACA,0DACA,0GAhCA,uCAEA,uFAEA,yCACA,8CAEA,gDAEA,oDAIA,4GACE,CAGF,wHACE,mCACA,0BAGF,iGACE,uCD2XA,iNAKE,4CAGA,kIAEA,g3BAoBE,kCACA,sDACA,4BACA,WACA,2EAIF,iIAEE,eACA,iFAGE,+IACE,oCAKN,8MAMI,oLAQJ,2FAIE,eAGF,wIAGE,gHAOF,qCACE,kFAMF,gEACE,kFAEA,oCAEA,yDAGA,mCAEA,4EAGA,YACA,eAEA,gCAhBF,4EAiBI,sBAGF,mFACE,2DACA,aACA,+BAEA,WACA,8BAEA,0BAEA,CAVF,mJAeA,uGAIA,wEACE,wBAGA,wBAJF,iJASA,2GC7fN,0CACA,+EAEA,iCAlCA,uGAEA,iBAEA,+EAEA,yCACA,8CAEA,gDAEA,oDAIA,4GAIA,6EACE,4CACA,mCAGF,6FACE,8BDugBI,oIACE,8XEliBV,cACE,4CAEA,sBACE,0BACA,aACA,sBACA,SACA,iBACA,cACA,gBAEA,kBAEA,yBACE,gCACA,iBACA,gBACA,iBACA,SAGF,wCACE,4BACA,cACA,gBCzBN,iBACE,YACA,oBACA,aACA,8BACA,SACA,cACA,aAEA,wBATF,iBAUI,wBAGF,mBACE,aACA,kBACA,mCAEA,yBACE,kBACA,iBAIJ,uBACE,eACA,yCACA,SC3BJ,yCACE,iBACA,gBACA,eAEA,4CACE,gBACA,qBACA,mBAGF,4CACE,kBAGF,gDACE,kDACA,0BAEA,sDACE,qCAIJ,wDACE,kBACA,aACA,YAGF,yDACE,mBACA,iCACA,aACA,sBACA,SACA,aACA,WAEA,4DACE,0BACA,gBACA,aAGF,mEACE,uCACA,yBACA,kBACA,oBAKF,8CACE,0BACA,qBAEA,oDACE,0BC3DR,uBAGA,kBACE,WACA,yCAEA,0CACE,0BACA,mBACA,WACA,gCAGF,aACE,gBACA,eACA,6CAEA,kBACE,aACA,sBACA,qBACA,mCAGF,cACE,CAEA,kBAFA,eACA,kB7EjBJ,yCAVA,WACE,0BACA,+CACA,CADA,sCACA,+BACA,2BACA,0CAQF,iCACE,C6EiBE,qCACE,C7ElBJ,UACA,qBACA,aACA,4JACA,wBACA,gDAEA,a6EWI,wCAGF,6FACE,2CAKF,qCACE,gCACA,CAGE,0FADF,0CAOA,CANE,0CAKF,yBACA,iDAEA,oCACE,uCAMJ,aACA,+CAEA,sCAJF,6BAKI,0BAGF,sCARF,yBASI,0BAGF,sCAZF,qCAaI,2CAIA,kDACA,gCAEA,aACA,sBACA,qEAGE,oEAEA,4BACE,kDAKF,eACA,eACA,mBC9FV,MACE,2DAA4D,CAC5D,yCAA0C,CAE1C,sBACE,iCAAkC,CAItC,gBACE,iBAAkB,CAClB,kBAAmB,CACnB,cACA,4CACA,kBAEA,2BACE,0BAEA,kCACE,qCACA,WACA,qBACA,WACA,qBACA,kBACA,yIACA,6BACA,mDACA,sBAIJ,gEAGE,wBACA,mBACA,CAGF,yDAEE,2EAIA,mEAEA,oFAEA,+BACE,yCAGF,CACE,4BACA,qBACA,mBACC,CAAD,yBAEA,0BAIJ,4DAEE,4CAEA,yDAEE,gBACA,sBACA,mBAGF,yDAEE,iBACA,2CAIJ,kBACE,oBAIA,kDAGE,gDAEE,4CAEA,+DACE,sCAGF,4CACE,+FAKN,0CACE,oBACA,gBACA,2CAHF,kEAUA,+DACE,sCAEA,mBACA,aACA,gBACA,2BACA,gBAEA,0DAEE,0FAGF,2CAEE,YACA,sBACA,gBAEA,wFAGE,gFAEE,eACA,CAIJ,uFAEE,kBACA,2BACA,kBACA,gBACA,sBAIJ,wDAEE,qBAGF,6DAEE,kBACA,CACA,eACA,qCCrKR,qBACE,aACA,uBACA,uCACE,CAEF,UACA,WAEA,wBATF,qBAUI,+CACE,CAEF,yDAGF,yBAhBF,qBAiBI,+DACE,CAEF,0EAGF,yBAvBF,qBAwBI,2DACE,CAEF,2EAMF,oCACE,8BAA+B,CAC/B,aAEA,wBAJF,oCAKI,aACA,sBACA,cAEA,6CACE,iBAGJ,yBAbF,oCAcI,iBAEA,yFAEE,8CACA,kKAMA,uCACA,cACA,wCACA,kBAGF,gDACE,gBACA,aAEA,qHAEE,iBAMR,yCACE,qBAGF,gCACE,eAEA,wBAHF,gCAII,iBAGF,uDACE,4BACA,SAGF,+CACE,aACA,SAEA,wBAJF,+CAKI,+BAGF,iDACE,0BACA,aACA,SACA,qBACA,WAEA,0DACE,0BAGF,wDACE,gBAGF,wBAGI,0PAEE,kBACA,qCACA,cACA,YACA,kDACA,oDACA,sBACA,WAIJ,iEACE,WACA,uIAGF,6DAEE,0IAKN,yDAIA,8EAGE,sBAGA,kHAGE,yBACA,cACA,mDChKV,oBACE,cACA,gBACA,aAEA,iEAEE,WAGF,yBACE,mBCVF,sBACE,+BAGF,oBACE,mCCCE,8cAEE,aAIJ,kKACE,aACA,yGACE,CAKF,2BACA,SACA,UAEA,wBAZF,kKAaI,iJACE,CAKF,0CAGF,gLACE,YACA,0CACA,WACA,aACA,kBACA,WAGF,sNACE,iBAEA,8PACE,0BAEA,4QACE,SACA,kBACA,wCACA,QAIJ,0RACE,oCACA,mBACA,mBAGF,0QACE,4BACA,aAGF,kOACE,eACA,4CAIA,4eAEE,kBAGF,gSACE,kFAKF,6eAIE,cAJF,qgBASA,kTACE,kFAKF,sgCASA,kTAKF,yUAKA,uQAME,aANF,uVAaJ,uKAME,YACA,eACA,yDARF,0PAeE,kNAIA,oNAKE,kPAEE,0DAEA,gDAGA,iCACA,oCAGA,aACA,sBACA,oBACA,gBAEA,kTAhBF,mSAyBE,kOAIE,kBACA,6DAEA,8EAEA,eAEA,sVAIE,6SAIA,ySAKF,wQAOF,8QAKE,kBACA,cACA,6DAEA,2RAMA,qSA/FR,obA4GI,mCCjPR,sBACE,aACA,eACA,WACA,8BACA,gBACA,WAEA,wBACE,eCLA,2EACE,yCACA,aACA,4DACE,CAGF,2BAEA,uFACE,qDAAsD,CACtD,sBACA,eACA,YACA,WAEA,0FACE,kBACA,gBAIJ,0FACE,oCACA,wCACA,mBAEA,iBAEA,iGACE,qBAIJ,0FACE,kBACA,yDACA,iCACA,2CACA,wCACA,gBACA,8CAEA,kBACA,sBACA,4CAIJ,2FACE,oBACA,gBAEA,8FACE,kBAEA,iGACE,uDAEA,wHACE,oFAGF,qGACE,qCAEA,kBACA,0BACA,qBACA,gBACA,gBACA,gBACA,iDAEA,+CC5EZ,YACE,kDAAmD,CACnD,iDAAkD,CAElD,sDAAuD,CACvD,gDAAiD,CAEjD,6BACE,sEAAuE,CACvE,gEAAiE,CACjE,8FAGA,2FAGA,iGAKF,2BACE,oEAAqE,CACrE,8DAA+D,CAC/D,4FAGA,yFAGA,+FAKF,6BACE,sEAAuE,CACvE,gEAAiE,CACjE,8FAGA,2FAGA,iGAKF,2BACE,oEAAqE,CACrE,8DAA+D,CAC/D,4FAGA,yFAGA,+FAKF,6BACE,sEAAuE,CACvE,gEAAiE,CACjE,8FAGA,2FAGA,iGAOE,4EACE,aAKN,uCAEE,aAIA,uDACE,yCACA,gBAGF,2BACE,8CACA,kCACA,4CACA,+BACA,qBACA,kBACA,+BACA,gBACA,qBAMJ,kDACE,eAQE,kuBAEE,0BACA,qBAGF,4tBAEE,0BAGF,oXACE,uBAIA,sbACE,2BACA,YACA,qBACA,eACA,cACA,kBACA,qBACA,kBACA,WAIA,0dACE,mBAOV,oEAEE,qBAAsB,CAGxB,uIAGE,oBACA,iBAIA,oDACE,uBAEA,qHAEE,0BAOF,uPAEE,qBAGF,6EAEE,0BAMF,oHACE,SAMJ,8DACE,iBAGF,+DACE,eAOA,8JACE,mBAEA,wKACE,8BAKF,kLACE,mBACA,gBAIJ,4LACE,gBAGF,kMACE,iDACA,SACA,iCACA,YACA,aAEA,gZAEE,kBAEA,wcACE,gBAIJ,slBAGE,iBAGF,8NAEE,aAGF,0NACE,gBAIJ,sLACE,aACA,2CACA,oBAEA,oMACE,wEAEA,cACA,YACA,mBAIJ,4SAGE,aAEA,2mBAMF,yJAEE,oBAGF,oLAEE,gBACA,cACA,kBACA,gBAGF,sNACE,cC/SN,mEAEE,mBAGE,wFACE,0CAIJ,sEACE,mBACA,aACA,YAEA,6EACE,qBACA,cACA,aAGF,sFACE,yCAGF,uFACE,0CAGF,2FACE,wCAGF,6FACE,uCAGF,iGACE,oCAIJ,mIACE,mBAGA,iDACA,SACA,iCACA,aACA,sBACA,SACA,YACA,aAEA,6JACE,2CAA4C,CAC5C,2CAA4C,CAC5C,oCAAqC,CACrC,+CAAgD,CAChD,iDAAkD,CAElD,oCAAqC,CACrC,6BAA8B,CAC9B,uBAAwB,CAExB,kCACA,4CACA,mCACA,0BACA,qBACA,wBACA,sBACA,8BACA,kBACA,qBAEA,4KACE,aAGF,mKACE,4CAA6C,CAC7C,kCAAmC,CAGrC,oKACE,mCAAoC,CCxF9C,iDACE,oDACA,SACA,eACA,UACA,WAGE,iIAEE,mBACA,sCACA,2BACA,4BACA,WAIJ,qEACE,cAGE,wBADF,qFAEI,+BAEF,wBAJF,qFAKI,mCAEF,wBAPF,qFAQI,uCAKN,uEACE,aACA,iCACA,wBAHF,uEAII,+BACA,kCAGF,2EACE,eACA,cACA,iBACA,mBACA,gBACA,WACA,UACA,wBARF,2EASI,iBAGF,qFACE,iDAGF,mFACE,4CAIJ,+EACE,eACA,kBACA,gBACA,gBACA,mBACA,wBANF,+EAOI,oBAGF,kFACE,oCACA,eACA,oBACA,wBAJF,kFAKI,kBAIJ,kFACE,kBACA,qBACA,iBACA,wBAJF,kFAKI,eACA,oBAIJ,iFACE,4BAKN,0EACE,kDAEA,iBACA,eAEA,yFACE,aACA,yDACE,CAOF,0BACA,mBACA,sCACA,wBAbF,yFAcI,gBACA,uHACE,CAMF,sCAGF,4FACE,aACA,cAGF,2GACE,iBAEA,8GACE,kBACA,6DACA,iCACA,qDACA,4BACA,aACA,aACA,qCACA,uBACA,YACA,gBACA,aACA,4BACA,WACA,wBAfF,8GAgBI,mBACA,UAEF,wBAnBF,8GAoBI,uBAEF,wBAtBF,8GAuBI,wBAGF,iHACE,eACA,kBACA,wBAHF,iHAII,cACA,6CAEF,wBAPF,iHAQI,mBACA,oBACA,UAGF,wHACE,cACA,YACA,cACA,WACA,wBALF,wHAMI,gBACA,UAIJ,oIACE,iDAGF,qIACE,6CAGF,qIACE,6CAKN,6GACE,mBACA,4BACA,aACA,gCACA,sBACA,cAEA,oHACE,iBACA,cACA,YACA,WAGF,0HACE,aAEA,iIACE,+CAIJ,0HACE,aAEA,iIACE,+CAIJ,0HACE,aAEA,iIACE,+CAIJ,0HACE,aAEA,4HACE,0BACA,2CACA,iBACA,0BAEA,qQAEE,qBAOV,mGACE,iDACA,wBACA,4BACA,gBAGF,wGACE,aACA,sBACA,gBACA,uBACA,oBACA,gBACA,gBAEA,wBATF,wGAUI,iBACA,cAGF,sHACE,4CACA,8BACA,4BACA,aACA,WAGF,qHACE,gBACA,cACA,gBACA,wCACA,YAGF,0GACE,SACA,eAMR,mEACE,6CACA,SACA,eAEA,uEACE,4BACA,aACA,4BACA,2BACA,6BACA,uBACA,mBACA,sCACA,aACA,2BACA,4BACA,WAEA,wBAdF,uEAeI,uCAEF,wBAjBF,uEAkBI,0BACA,iCAGF,2EACE,WAGF,4FACE,4BAAuD,CAEvD,YACA,SACA,kBACA,0BACA,WAEA,wBATF,4FAUI,4BAAuD,CAAvD,CAGF,uGACE,oBACA,SACA,kBACA,QAEA,4GACE,cACA,iCACA,iBACA,4CAGF,8GACE,8BAKN,4FACE,+BAA0D,CAE1D,YACA,kBACA,2BAEA,wBAPF,4FAQI,gCAAiD,CAAjD,CAGF,uGACE,oBACA,YACA,OACA,SACA,kBACA,MACA,uBAEA,4GACE,cACA,iCACA,gBACA,kBACA,eACA,wBANF,4GAOI,eACA,kBAIJ,gHACE,SACA,QAGF,gHACE,SACA,QAGF,gHACE,SACA,QAGF,gHACE,QACA,QAEF,wBACE,gHACE,SACA,QAGF,gHACE,SACA,QAGF,gHACE,SACA,QAGF,gHACE,OACA,SAMJ,+GACE,aACA,YACA,wBAHF,+GAII,iBAIJ,+GACE,YACA,eACA,wBAHF,+GAII,cAQZ,gFACE,iBACA,sBACA,kBACA,4CAEA,sFACE,gFAEA,wDAKA,kGAEE,YACA,+EAGA,cACA,kEAPF,gHAUI,uEAGA,CAEF,+BAfF,iHAmBE,yGAEE,oEACA,CACA,gCACA,4BACA,aACA,6DAKA,yKACA,2BACA,mBACA,mBACA,yBAEA,WAlBF,mHAoBI,iBACA,yBACA,oDAKA,0HAGA,YAGF,wHAEE,gBACA,CACA,oBACA,uBALF,0HAQI,WAIJ,sIACE,kDAGF,+GACE,kDAGF,+GACE,oDAGF,+GACE,kDAGF,8FAEE,oEAIF,2GAKA,yHAEE,yCACA,8CACA,gDACA,oDACA,0CACA,6CACA,yCACA,qCACA,2CAEA,qDACA,4CACA,mCAEA,0BAEA,4BACA,wBAGA,uBACA,uBACA,oBACA,gCACA,iDACA,oCAEA,kBACA,kBACA,+CACA,kBAhCF,qHAoCE,sHACE,yDC1lBZ,qDACE,oDACA,oDACA,4BACA,gDACA,oCACA,aACA,yCACA,iBAEA,oCAVF,qDAWI,iCACA,6CAGF,6DACE,eACA,gBACA,8CACA,oBACA,oDACA,UACA,oCAPF,6DAQI,iBACA,YAIJ,6DACE,iBACA,eACA,kBACA,oCAJF,6DAKI,eAGF,gEACE,aACA,mBACA,kBACA,oCAJF,gEAKI,gBACA,iBAGF,kEACE,uCACA,qBACA,oDAEA,2FACE,uCAGF,yEACE,sFAEA,sDAHF,8GAKI,sFAIJ,4NAKE,oQAKF,YACE,yEAON,+DACE,aACA,gEAFF,mEAII,+DAIJ,oBACE,iEAGA,yBAJF,6DAKI","sources":["ui/base/_reset.scss","ui/base/_themes.scss","ui/molecules/notecards/index.scss","ui/molecules/pagination/index.scss","ui/atoms/button/index.scss","app.scss","ui/base/_mdn.scss","homepage/index.scss","homepage/homepage-hero/index.scss","ui/atoms/icon/index.scss","ui/molecules/search/index.scss","ui/molecules/mandala/index.scss","homepage/featured-articles/index.scss","ui/_mixins.scss","homepage/latest-news/index.scss","homepage/recent-contributions/index.scss","homepage/contributor-spotlight/index.scss","ui/organisms/placement/index.scss","ui/atoms/toast/index.scss","ui/atoms/container/index.scss","ui/atoms/logo/index.scss","ui/atoms/login-link/index.scss","ui/atoms/signup-link/index.scss","ui/molecules/auth-container/index.scss","ui/molecules/submenu/index.scss","ui/molecules/menu/index.scss","ui/molecules/learn-menu/index.scss","ui/molecules/reference-menu/index.scss","ui/molecules/plus-menu/index.scss","ui/molecules/main-menu/index.scss","ui/molecules/tools-menu/index.scss","ui/atoms/avatar/index.scss","ui/atoms/signout/index.scss","ui/molecules/user-menu/index.scss","ui/molecules/dropdown/index.scss","ui/organisms/top-navigation-main/index.scss","ui/molecules/theme-switcher/index.scss","ui/molecules/maintenance/index.scss","ui/organisms/top-navigation/index.scss","ui/molecules/breadcrumbs/index.scss","ui/organisms/article-actions/language-menu/index.scss","ui/atoms/thumbs/index.scss","ui/atoms/switch/index.scss","ui/organisms/article-actions/index.scss","ui/atoms/modal/index.scss","ui/organisms/article-actions/bookmark-menu/index.scss","ui/organisms/article-actions-container/index.scss","ui/molecules/offline-status-bar/index.scss","document/organisms/toc/index.scss","document/organisms/sidebar/index.scss","document/organisms/sidebar/filter.scss","ui/atoms/page-content/index.scss","../../node_modules/@mdn/minimalist/sass/mixins/_animation.scss","ui/atoms/loading/index.scss","document/organisms/article-footer/index.scss","page-not-found/index.scss","document/index.scss","ui/molecules/grids/_document-page.scss","ui/molecules/grids/_standard-page.scss","ui/base/_typography.scss","document/interactive-examples.scss","lit/interactive-example/global.scss","ui/molecules/document-survey/index.scss","ui/_vars.scss","document/baseline-indicator.scss","playground/queue/index.scss","ui/atoms/spinner/index.scss","ui/molecules/a11y-nav/index.scss","ui/organisms/footer/index.scss","site-search/index.scss","settings/index.scss","plus/plus-docs/index.scss","plus/index.scss","plus/offer-overview/offer-hero/index.scss","plus/offer-overview/offer-overview-feature/index.scss","plus/offer-overview/offer-overview-subscribe/index.scss","about/index.scss","about/_mixins.scss","community/index.scss","ui/atoms/button/_mixins.scss","ui/molecules/get_involved/index.scss","ui/molecules/quote/index.scss","contributor-spotlight/index.scss","advertising/with_us/index.scss","blog/index.scss","blog/post.scss","newsletter/index.scss","curriculum/topic-icon.scss","curriculum/modules-list.scss","curriculum/prev-next.scss","curriculum/module.scss","curriculum/index.scss","curriculum/about.scss","curriculum/landing.scss","curriculum/partner-banner.scss"],"sourcesContent":["/*\n  Modern Reset\n  See https://hankchizljaw.com/wrote/a-modern-css-reset/\n\n  Note: This file uses some CSS variables and thus cannot be wholly updated via copy+paste.\n*/\n\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np,\nfigure,\nblockquote,\ndl,\ndd {\n  margin: 0;\n}\n\nul,\nol {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Set core root defaults */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/* Set core body defaults */\nbody {\n  font-family: var(--font-body);\n  font-size: var(--base-font-size);\n  line-height: var(--font-content-line-height);\n  text-rendering: optimizeSpeed;\n}\n\n/* A elements that don't have a class get default styles */\na:not([class]) {\n  text-decoration-skip-ink: auto;\n}\n\na {\n  text-decoration: none;\n}\n\n/* Make images easier to work with */\nimg,\npicture {\n  display: block;\n  max-width: 100%;\n}\n\n/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */\nem {\n  font-variation-settings: \"slnt\" -10;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n  font: inherit;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n","@use \"sass:color\";\n@use \"../vars.scss\" as *;\n@use \"../color-palette\" as *;\n\n@mixin light-theme {\n  --text-primary: #{$mdn-theme-light-text-primary};\n  --text-secondary: #{$mdn-theme-light-text-secondary};\n  --text-active: #{$mdn-theme-light-text-active};\n  --text-inactive: #{$mdn-theme-light-text-inactive};\n  --text-link: #{$mdn-theme-light-text-link};\n  --text-visited: #551a8b; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1787-1790\n  --text-invert: #{$mdn-theme-light-text-invert};\n  --text-muted: #{$mdn-theme-light-text-muted};\n\n  --background-primary: #{$mdn-theme-light-background-primary};\n  --background-secondary: #{$mdn-theme-light-background-secondary};\n  --background-tertiary: #{$mdn-theme-light-background-tertiary};\n  --background-toc-active: #{$mdn-theme-light-background-toc-active};\n  --background-mark-yellow: #{color.adjust(\n      $mdn-color-light-theme-yellow-30,\n      $alpha: -0.6\n    )};\n  --background-mark-green: #{color.adjust(\n      $mdn-color-light-theme-green-30,\n      $alpha: -0.6\n    )};\n  --background-information: #{color.adjust(\n      $mdn-theme-light-icon-information,\n      $alpha: -0.9\n    )};\n  --background-warning: #{color.adjust(\n      $mdn-theme-light-icon-warning,\n      $alpha: -0.9\n    )};\n  --background-critical: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.9\n    )};\n  --background-success: #{color.adjust(\n      $mdn-theme-light-icon-success,\n      $alpha: -0.9\n    )};\n  --background-del: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.5\n    )};\n  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};\n\n  --border-primary: #{$mdn-theme-light-border-primary};\n  --border-secondary: #{$mdn-theme-light-border-secondary};\n\n  --button-primary-default: #{$mdn-theme-light-button-primary-default};\n  --button-primary-hover: #{$mdn-theme-light-button-primary-hover};\n  --button-primary-active: #{$mdn-theme-light-button-primary-active};\n  --button-primary-inactive: #{$mdn-theme-light-button-primary-inactive};\n\n  --button-secondary-default: #{$mdn-theme-light-button-secondary-default};\n  --button-secondary-hover: #{$mdn-theme-light-button-secondary-hover};\n  --button-secondary-active: #{$mdn-theme-light-button-secondary-active};\n  --button-secondary-inactive: #{$mdn-theme-light-button-secondary-inactive};\n  --button-secondary-border-focus: #{$mdn-theme-light-button-secondary-border-focus};\n  --button-secondary-border-red: #{$mdn-theme-light-button-secondary-border-red};\n  --button-secondary-border-red-focus: #{$mdn-theme-light-button-secondary-border-red-focus};\n\n  --icon-primary: #{$mdn-theme-light-icon-primary};\n  --icon-secondary: #{$mdn-theme-light-icon-secondary};\n  --icon-information: #{$mdn-theme-light-icon-information};\n  --icon-warning: #{$mdn-theme-light-icon-warning};\n  --icon-critical: #{$mdn-theme-light-icon-critical};\n  --icon-success: #{$mdn-theme-light-icon-success};\n\n  --accent-primary: #{$mdn-theme-light-accent-primary};\n  --accent-primary-engage: #{color.adjust(\n      $mdn-theme-light-accent-primary,\n      $alpha: -0.9\n    )};\n\n  --accent-secondary: #{$mdn-theme-light-accent-secondary};\n  --accent-tertiary: #{color.adjust(\n      $mdn-color-light-theme-blue-50,\n      $alpha: -0.9\n    )};\n\n  --shadow-01: #{$mdn-theme-light-shadow-01};\n  --shadow-02: #{$mdn-theme-light-shadow-02};\n  --focus-01: #{$mdn-theme-light-focus-01};\n  --field-focus-border: #{$mdn-theme-light-field-focus-border};\n\n  --code-token-tag: #{$mdn-theme-light-code-token-tag};\n  --code-token-punctuation: #{$mdn-theme-light-code-token-punctuation};\n  --code-token-attribute-name: #{$mdn-theme-light-code-token-attribute-name};\n  --code-token-attribute-value: #{$mdn-theme-light-code-token-attribute-value};\n  --code-token-comment: #{$mdn-theme-light-code-token-comment};\n  --code-token-default: #{$mdn-theme-light-code-token-default};\n  --code-token-selector: #{$mdn-theme-light-code-token-selector};\n  --code-background-inline: #{$mdn-theme-light-code-background-inline};\n  --code-background-block: #{$mdn-theme-light-code-background-block};\n\n  --ix-tab-background-active: #fff;\n\n  --notecard-link-color: #{$mdn-color-neutral-80};\n\n  --scrollbar-bg: transparent;\n  --scrollbar-color: rgba(0, 0, 0, 0.25);\n\n  --category-color: #{$mdn-color-light-theme-blue-50};\n  --category-color-background: #{$mdn-color-light-theme-blue-50}10;\n  --code-color: #{$mdn-color-light-theme-blue-40};\n  --mark-color: #{$mdn-color-light-theme-blue-10};\n\n  --plus-accent-color: #{$mdn-color-dark-theme-red-60};\n  --html-accent-color: #{$mdn-color-light-theme-red-60};\n  --css-accent-color: #{$mdn-color-light-theme-blue-60};\n  --js-accent-color: #{$mdn-color-light-theme-yellow-40};\n  --http-accent-color: #{$mdn-color-light-theme-green-60};\n  --apis-accent-color: #{$mdn-color-light-theme-violet-60};\n  --learn-accent-color: #{$mdn-color-light-theme-pink-60};\n\n  --plus-code-color: #{$mdn-color-light-theme-blue-60};\n  --html-code-color: #{$mdn-color-light-theme-red-70};\n  --css-code-color: #{$mdn-color-light-theme-blue-60};\n  --js-code-color: #{$mdn-color-light-theme-yellow-60};\n  --http-code-color: #{$mdn-color-light-theme-green-60};\n  --apis-code-color: #{$mdn-color-light-theme-violet-60};\n  --learn-code-color: #{$mdn-color-light-theme-pink-60};\n\n  --plus-mark-color: #{$mdn-color-light-theme-red-10};\n  --html-mark-color: #{$mdn-color-light-theme-red-10};\n  --css-mark-color: #{$mdn-color-light-theme-blue-10};\n  --js-mark-color: #{$mdn-color-light-theme-yellow-10};\n  --http-mark-color: #{$mdn-color-light-theme-green-10};\n  --apis-mark-color: #{$mdn-color-light-theme-violet-10};\n  --learn-mark-color: #{$mdn-color-light-theme-pink-10};\n\n  --plus-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --html-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --css-accent-background-color: #{$mdn-color-light-theme-blue-50}30;\n  --js-accent-background-color: #{$mdn-color-light-theme-yellow-50}30;\n  --http-accent-background-color: #{$mdn-color-light-theme-green-50}30;\n  --apis-accent-background-color: #{$mdn-color-light-theme-violet-50}30;\n  --learn-accent-background-color: #{$mdn-color-light-theme-pink-50}30;\n\n  --plus-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-red-50,\n      $alpha: -0.3\n    )};\n  --html-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-red-50,\n      $alpha: -0.3\n    )};\n  --css-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-blue-50,\n      $alpha: -0.3\n    )};\n  --js-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-yellow-50,\n      $alpha: -0.3\n    )};\n  --http-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-green-50,\n      $alpha: -0.3\n    )};\n  --apis-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-violet-50,\n      $alpha: -0.3\n    )};\n  --learn-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-pink-50,\n      $alpha: -0.3\n    )};\n\n  --modal-backdrop-color: #{rgba($mdn-theme-dark-background-primary, 0.1)};\n  --blend-color: #{$mdn-color-white}80;\n\n  --text-primary-red: #{$mdn-color-light-theme-red-60};\n  --text-primary-green: #{$mdn-color-light-theme-green-60};\n  --text-primary-blue: #{$mdn-color-light-theme-blue-60};\n  --text-primary-yellow: #{$mdn-color-light-theme-yellow-60};\n\n  --collections-link: #{$mdn-color-light-theme-red-70};\n  --collections-header: #{$mdn-color-light-theme-red-10};\n  --collections-mandala: #{$mdn-color-light-theme-red-30};\n  --collections-icon: #{$mdn-color-light-theme-red-50};\n\n  --updates-link: #{$mdn-color-light-theme-blue-60};\n  --updates-header: #{$mdn-color-neutral-light-70};\n  --updates-mandala: #{$mdn-color-light-theme-blue-30};\n  --updates-icon: #{$mdn-color-light-theme-blue-50};\n\n  --ai-help-link: #{$mdn-color-light-theme-green-60};\n  --ai-help-header: #{$mdn-color-neutral-light-70};\n  --ai-help-mandala: #{$mdn-color-light-theme-green-30};\n  --ai-help-icon: #{$mdn-color-light-theme-green-50};\n  --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}10;\n\n  --observatory-bg: rgba(242, 242, 245, 1);\n  --observatory-bg-code: #e1e1e1;\n  --observatory-bg-secondary: rgba(255, 255, 255, 1);\n  --observatory-color: #000;\n  --observatory-color-secondary: rgba(105, 105, 105, 1);\n  --observatory-inverse-color: rgba(255, 255, 255, 1);\n  --observatory-inverse-color-secondary: rgba(179, 179, 179, 1);\n  --observatory-accent: #5a23d7;\n  --observatory-accent-light: #5a23d7aa;\n  --observatory-border: rgba(228, 228, 246, 1);\n  --observatory-border-accent: rgba(90, 35, 215, 1);\n  --observatory-pass-icon-bg: rgba(229, 250, 230, 1);\n  --observatory-pass-icon-color: rgba(0, 121, 54, 1);\n  --observatory-fail-icon-bg: rgba(250, 229, 229, 1);\n  --observatory-fail-icon-color: rgba(211, 0, 56, 1);\n  --observatory-table-bg: rgba(255, 255, 255, 1);\n  --observatory-table-bg-alternate: #f9f9fb;\n  --observatory-table-header-bg: rgba(249, 249, 251, 1);\n  --observatory-grade-a-bg: #d2fadd;\n  --observatory-grade-a-border: #017a37;\n  --observatory-grade-b-bg: #e8fad2;\n  --observatory-grade-b-border: #547a01;\n  --observatory-grade-c-bg: #faf8d2;\n  --observatory-grade-c-border: #7a7001;\n  --observatory-grade-d-bg: #fae8d2;\n  --observatory-grade-d-border: #a65001;\n  --observatory-grade-f-bg: #fad2d2;\n  --observatory-grade-f-border: #a00;\n  --observatory-arrow-down-color: rgba(158, 0, 39, 1);\n  --observatory-arrow-up-color: rgba(0, 121, 54, 1);\n\n  --form-limit-color: #{$mdn-color-neutral-60};\n  --form-limit-color-emphasis: #{$mdn-color-neutral-70};\n  --form-invalid-color: #{$mdn-color-light-theme-red-60};\n  --form-invalid-focus-color: #{$mdn-color-light-theme-red-50};\n  --form-invalid-focus-effect-color: #{rgba($mdn-color-light-theme-red-50, 0.2)};\n\n  --baseline-high-bg: #e6f4ea;\n  --baseline-high-engine-bg: #ceead6;\n  --baseline-high-img: url(\"../../assets/icons/baseline/high.svg\");\n  --baseline-high-check: #099949;\n  --baseline-low-bg: #e8f0fe;\n  --baseline-low-engine-bg: #d2e3fc;\n  --baseline-low-check: #1a73e8;\n  --baseline-low-img: url(\"../../assets/icons/baseline/low.svg\");\n  --baseline-low-pill-bg: #3367d6;\n  --baseline-low-pill-color: #f1f3f4;\n  --baseline-limited-bg: #f1f3f4;\n  --baseline-limited-engine-bg: #e3e6e8;\n  --baseline-limited-img: url(\"../../assets/icons/baseline/limited.svg\");\n  --baseline-limited-check: #1e8e3e;\n  --baseline-limited-cross: #ea8600;\n\n  --curriculum-bg-color: #fcefe2;\n  --curriculum-bg-color-note: rgba(252, 239, 226, 0.5);\n  --curriculum-bg-large-color: #fcefe2;\n  --curriculum-bg-color-topic-standards: #{$mdn-color-light-theme-red-50}30;\n  --curriculum-bg-color-topic-styling: #{$mdn-color-light-theme-blue-50}30;\n  --curriculum-bg-color-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;\n  --curriculum-bg-color-topic-tooling: #{$mdn-color-light-theme-green-50}30;\n  --curriculum-bg-color-topic-practices: #{$mdn-color-light-theme-violet-50}30;\n  --curriculum-bg-color-landing: #fff;\n  --curriculum-bg-color-landing-about-ul: #fff;\n  --curriculum-bg-color-landing-top-icon: #fcefe2;\n  --curriculum-bg-color-landing-stairway-floor: #fcefe2;\n  --curriculum-category-color: #e3642a;\n  --curriculum-color: #d47d55;\n  --curriculum-module-label-color: #b34d1f;\n  --curriculum-module-label-bg-color: #faf0e3;\n  --curriculum-color-topic-standards: #{$mdn-color-light-theme-red-60};\n  --curriculum-color-topic-styling: #{$mdn-color-light-theme-blue-60};\n  --curriculum-color-topic-scripting: #{$mdn-color-light-theme-yellow-60};\n  --curriculum-color-topic-tooling: #{$mdn-color-light-theme-green-60};\n  --curriculum-color-topic-practices: #{$mdn-color-light-theme-violet-60};\n  --curriculum-color-landing-laptop: #e3642a;\n  --curriculum-border-color: #f2f1f1;\n  --curriculum-border-color-hover: var(--text-inactive);\n  --curriculum-bg-color-list-item-body: #fff;\n  --curriculum-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60};\n  --curriculum-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60};\n  --curriculum-color-list-item-icon-topic-scripting: #{$mdn-color-light-theme-yellow-60};\n  --curriculum-color-list-item-icon-topic-tooling: #{$mdn-color-light-theme-green-60};\n  --curriculum-color-list-item-icon-topic-practices: #{$mdn-color-light-theme-violet-60};\n  --curriculum-bg-color-list-item-icon-topic-standards: #fff;\n  --curriculum-bg-color-list-item-icon-topic-styling: #fff;\n  --curriculum-bg-color-list-item-icon-topic-scripting: #fff;\n  --curriculum-bg-color-list-item-icon-topic-tooling: #fff;\n  --curriculum-bg-color-list-item-icon-topic-practices: #fff;\n  --curriculum-bg-color-list-item-topic-standards: #{$mdn-color-light-theme-red-50}30;\n  --curriculum-bg-color-list-item-topic-styling: #{$mdn-color-light-theme-blue-50}30;\n  --curriculum-bg-color-list-item-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;\n  --curriculum-bg-color-list-item-topic-tooling: #{$mdn-color-light-theme-green-50}30;\n  --curriculum-bg-color-list-item-topic-practices: #{$mdn-color-light-theme-violet-50}30;\n  --curriculum-bg-color-partner: #fff;\n  --curriculum-shadow:\n    4px 4px 8px 0 rgba(179, 179, 179, 0.18),\n    -4px 4px 8px 0 rgba(179, 179, 179, 0.15);\n  --curriculum-shadow-landing-about-ul:\n    0 4px 10px 0 rgba(227, 100, 42, 0.06), 0 -2px 4px 0 rgba(178, 92, 53, 0.06);\n\n  --curriculum-landing-about-beginner: url(\"../../assets/icons/curriculum-landing-about-beginner.svg#light\");\n  --curriculum-landing-about-pace: url(\"../../assets/icons/curriculum-landing-about-pace.svg#light\");\n  --curriculum-landing-about-free: url(\"../../assets/icons/curriculum-landing-about-free.svg#light\");\n  --curriculum-landing-about-bullet: url(\"../../assets/icons/curriculum-landing-about-bullet.svg#light\");\n  --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#small-light\");\n  --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#small-light\");\n  --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#small-light\");\n  --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#small-light\");\n  --curriculum-module-mdn-resource: url(\"../../assets/icons/curriculum-mdn-resource.svg#light\");\n  --curriculum-bullet: url(\"../../assets/icons/curriculum-bullet.svg#light\");\n  --curriculum-about-covered: url(\"../../assets/icons/curriculum-about-covered.svg#light\");\n  --curriculum-about-detail: url(\"../../assets/icons/curriculum-about-detail.svg#light\");\n  --curriculum-about-educators: url(\"../../assets/icons/curriculum-about-educators.svg#light\");\n  --curriculum-about-not: url(\"../../assets/icons/curriculum-about-not.svg#light\");\n  --curriculum-about-students: url(\"../../assets/icons/curriculum-about-students.svg#light\");\n  --curriculum-bg-image-partner: url(\"../../assets/curriculum-partner-bg.svg#light\");\n  --curriculum-scrim-bg: url(\"../../assets/curriculum-scrim-bg.svg#light\");\n  --curriculum-landing-arrow: url(\"../../assets/curriculum-landing-arrow.svg#light\");\n\n  color-scheme: light;\n\n  @media (min-width: $screen-md) {\n    --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#light\");\n    --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#light\");\n    --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#light\");\n    --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#light\");\n  }\n}\n\n@mixin dark-theme {\n  --text-primary: #{$mdn-theme-dark-text-primary};\n  --text-secondary: #{$mdn-theme-dark-text-secondary};\n  --text-active: #{$mdn-theme-dark-text-active};\n  --text-inactive: #{$mdn-theme-dark-text-inactive};\n  --text-link: #{$mdn-theme-dark-text-link};\n  --text-visited: #ffadff; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1794-1797\n  --text-invert: #{$mdn-theme-dark-text-invert};\n  --text-muted: #{$mdn-theme-dark-text-muted};\n\n  --background-primary: #{$mdn-theme-dark-background-primary};\n  --background-secondary: #{$mdn-theme-dark-background-secondary};\n  --background-tertiary: #{$mdn-theme-dark-background-tertiary};\n  --background-toc-active: #{$mdn-theme-dark-background-toc-active};\n  --background-mark-yellow: #{color.adjust(\n      $mdn-color-dark-theme-yellow-30,\n      $alpha: -0.6\n    )};\n  --background-mark-green: #{color.adjust(\n      $mdn-color-light-theme-green-30,\n      $alpha: -0.6\n    )};\n  --background-information: #{color.adjust(\n      $mdn-theme-light-icon-information,\n      $alpha: -0.9\n    )};\n  --background-warning: #{color.adjust(\n      $mdn-theme-light-icon-warning,\n      $alpha: -0.9\n    )};\n  --background-critical: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.9\n    )};\n  --background-success: #{color.adjust(\n      $mdn-theme-light-icon-success,\n      $alpha: -0.9\n    )};\n  --background-del: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.5\n    )};\n  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};\n\n  --border-primary: #{$mdn-theme-dark-border-primary};\n  --border-secondary: #{$mdn-theme-dark-border-secondary};\n\n  --button-primary-default: #{$mdn-theme-dark-button-primary-default};\n  --button-primary-hover: #{$mdn-theme-dark-button-primary-hover};\n  --button-primary-active: #{$mdn-theme-dark-button-primary-active};\n  --button-primary-inactive: #{$mdn-theme-dark-button-primary-inactive};\n\n  --button-secondary-default: #{$mdn-theme-dark-button-secondary-default};\n  --button-secondary-hover: #{$mdn-theme-dark-button-secondary-hover};\n  --button-secondary-active: #{$mdn-theme-dark-button-secondary-active};\n  --button-secondary-inactive: #{$mdn-theme-dark-button-secondary-inactive};\n  --button-secondary-border-focus: #{$mdn-theme-light-button-secondary-border-focus};\n  --button-secondary-border-red: #{$mdn-theme-light-button-secondary-border-red};\n  --button-secondary-border-red-focus: #{$mdn-theme-light-button-secondary-border-red-focus};\n\n  --icon-primary: #{$mdn-theme-dark-icon-primary};\n  --icon-secondary: #{$mdn-theme-dark-icon-secondary};\n  --icon-information: #{$mdn-theme-dark-icon-information};\n  --icon-warning: #{$mdn-theme-dark-icon-warning};\n  --icon-critical: #{$mdn-theme-dark-icon-critical};\n  --icon-success: #{$mdn-theme-dark-icon-success};\n\n  --accent-primary: #{$mdn-theme-dark-accent-primary};\n  --accent-primary-engage: #{color.adjust(\n      $mdn-theme-dark-accent-primary,\n      $alpha: -0.9\n    )};\n  --accent-secondary: #{$mdn-theme-dark-accent-secondary};\n  --accent-tertiary: #{color.adjust(\n      $mdn-color-light-theme-blue-50,\n      $alpha: -0.9\n    )};\n\n  --shadow-01: #{$mdn-theme-dark-shadow-01};\n  --shadow-02: #{$mdn-theme-dark-shadow-02};\n  --focus-01: #{$mdn-theme-dark-focus-01};\n  --field-focus-border: #{$mdn-theme-dark-field-focus-border};\n\n  --code-token-tag: #{$mdn-theme-dark-code-token-tag};\n  --code-token-punctuation: #{$mdn-theme-dark-code-token-punctuation};\n  --code-token-attribute-name: #{$mdn-theme-dark-code-token-attribute-name};\n  --code-token-attribute-value: #{$mdn-theme-dark-code-token-attribute-value};\n  --code-token-comment: #{$mdn-theme-dark-code-token-comment};\n  --code-token-default: #{$mdn-theme-dark-code-token-default};\n  --code-token-selector: #{$mdn-theme-dark-code-token-selector};\n  --code-background-inline: #{$mdn-theme-dark-code-background-inline};\n  --code-background-block: #{$mdn-theme-dark-code-background-block};\n\n  --ix-tab-background-active: #4e4e4e;\n\n  --notecard-link-color: #{$mdn-color-neutral-10};\n\n  --scrollbar-bg: transparent;\n  --scrollbar-color: rgba(255, 255, 255, 0.25);\n\n  --category-color: #{$mdn-color-dark-theme-blue-30};\n  --category-color-background: #{$mdn-color-dark-theme-blue-30}70;\n  --code-color: #{$mdn-color-dark-theme-blue-20};\n  --mark-color: #{$mdn-color-dark-theme-blue-70};\n\n  --plus-accent-color: #{$mdn-color-dark-theme-red-30};\n  --html-accent-color: #{$mdn-color-dark-theme-red-40};\n  --css-accent-color: #{$mdn-color-dark-theme-blue-30};\n  --js-accent-color: #{$mdn-color-dark-theme-yellow-40};\n  --http-accent-color: #{$mdn-color-dark-theme-green-40};\n  --apis-accent-color: #{$mdn-color-dark-theme-violet-40};\n  --learn-accent-color: #{$mdn-color-dark-theme-pink-40};\n\n  --plus-code-color: #{$mdn-color-dark-theme-blue-20};\n  --html-code-color: #{$mdn-color-neutral-light-70};\n  --css-code-color: #{$mdn-color-dark-theme-blue-20};\n  --js-code-color: #{$mdn-color-dark-theme-yellow-30};\n  --http-code-color: #{$mdn-color-dark-theme-green-30};\n  --apis-code-color: #{$mdn-color-dark-theme-violet-30};\n  --learn-code-color: #{$mdn-color-dark-theme-pink-30};\n\n  --plus-mark-color: #{$mdn-color-dark-theme-red-70};\n  --html-mark-color: #{$mdn-color-dark-theme-red-70};\n  --css-mark-color: #{$mdn-color-dark-theme-blue-70};\n  --js-mark-color: #{$mdn-color-dark-theme-yellow-70};\n  --http-mark-color: #{$mdn-color-dark-theme-green-70};\n  --apis-mark-color: #{$mdn-color-dark-theme-violet-70};\n  --learn-mark-color: #{$mdn-color-dark-theme-pink-70};\n\n  --plus-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --html-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --css-accent-background-color: #{$mdn-color-light-theme-blue-50}30;\n  --js-accent-background-color: #{$mdn-color-light-theme-yellow-50}30;\n  --http-accent-background-color: #{$mdn-color-light-theme-green-50}30;\n  --apis-accent-background-color: #{$mdn-color-light-theme-violet-50}30;\n  --learn-accent-background-color: #{$mdn-color-light-theme-pink-50}30;\n\n  --plus-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-red-40,\n      $alpha: -0.3\n    )};\n  --html-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-red-40,\n      $alpha: -0.3\n    )};\n  --css-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-blue-30,\n      $alpha: -0.3\n    )};\n  --js-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-yellow-40,\n      $alpha: -0.3\n    )};\n  --http-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-green-40,\n      $alpha: -0.3\n    )};\n  --apis-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-violet-40,\n      $alpha: -0.3\n    )};\n  --learn-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-pink-40,\n      $alpha: -0.3\n    )};\n\n  --modal-backdrop-color: #{rgba($mdn-theme-dark-background-primary, 0.7)};\n  --blend-color: #{$mdn-color-black}80;\n\n  --text-primary-red: #{$mdn-color-dark-theme-red-30};\n  --text-primary-green: #{$mdn-color-dark-theme-green-30};\n  --text-primary-blue: #{$mdn-color-dark-theme-blue-30};\n  --text-primary-yellow: #{$mdn-color-dark-theme-yellow-30};\n\n  --collections-link: #{$mdn-color-dark-theme-red-30};\n  --collections-header: #{$mdn-color-dark-theme-red-90};\n  --collections-mandala: #{$mdn-color-dark-theme-red-70};\n  --collections-icon: #{$mdn-color-dark-theme-red-60};\n\n  --updates-link: #{$mdn-color-dark-theme-blue-30};\n  --updates-header: #{$mdn-color-black};\n  --updates-mandala: #{$mdn-color-dark-theme-blue-20};\n  --updates-icon: #{$mdn-color-dark-theme-blue-30};\n\n  --ai-help-link: #{$mdn-color-dark-theme-green-30};\n  --ai-help-header: #{$mdn-color-black};\n  --ai-help-mandala: #{$mdn-color-dark-theme-green-20};\n  --ai-help-icon: #{$mdn-color-dark-theme-green-30};\n  --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}30;\n\n  --observatory-bg: rgba(52, 52, 52, 1);\n  --observatory-bg-code: #4d4d4d;\n  --observatory-bg-secondary: rgba(0, 0, 0, 1);\n  --observatory-color: #fff;\n  --observatory-color-secondary: rgba(249, 249, 251, 1);\n  --observatory-inverse-color: rgb(27, 27, 27);\n  --observatory-inverse-color-secondary: rgba(105, 105, 105, 1);\n  --observatory-accent: #a388ff;\n  --observatory-accent-light: #a388ffaa;\n  --observatory-border: rgba(105, 105, 105, 1);\n  --observatory-border-accent: rgba(163, 136, 255, 1);\n  --observatory-pass-icon-bg: rgba(38, 92, 61, 1);\n  --observatory-pass-icon-color: rgba(138, 255, 163, 1);\n  --observatory-fail-icon-bg: rgba(92, 38, 38, 1);\n  --observatory-fail-icon-color: rgba(255, 121, 155, 1);\n  --observatory-table-bg: rgb(27, 27, 27);\n  --observatory-table-bg-alternate: #212121;\n  --observatory-table-header-bg: rgb(27, 27, 27);\n  --observatory-grade-a-bg: #265c3d;\n  --observatory-grade-a-border: #89fca1;\n  --observatory-grade-b-bg: #52662a;\n  --observatory-grade-b-border: #d5fc88;\n  --observatory-grade-c-bg: #66602a;\n  --observatory-grade-c-border: #fcf988;\n  --observatory-grade-d-bg: #5c3d26;\n  --observatory-grade-d-border: #ff6a00;\n  --observatory-grade-f-bg: #5c2626;\n  --observatory-grade-f-border: #fc8888;\n  --observatory-arrow-down-color: rgba(255, 112, 127, 1);\n  --observatory-arrow-up-color: rgba(0, 255, 106, 1);\n\n  --form-limit-color: #{$mdn-color-neutral-40};\n  --form-limit-color-emphasis: #{$mdn-color-neutral-30};\n  --form-invalid-color: #{$mdn-color-light-theme-red-30};\n  --form-invalid-focus-color: #{$mdn-color-light-theme-red-40};\n  --form-invalid-focus-effect-color: #{rgba($mdn-color-light-theme-red-40, 0.2)};\n\n  --baseline-high-bg: #0e2a10;\n  --baseline-high-engine-bg: #031b05;\n  --baseline-high-img: url(\"../../assets/icons/baseline/high-dark.svg\");\n  --baseline-high-check: #099949;\n  --baseline-low-bg: #041e49;\n  --baseline-low-engine-bg: #020d20;\n  --baseline-low-check: #1a73e8;\n  --baseline-low-img: url(\"../../assets/icons/baseline/low-dark.svg\");\n  --baseline-low-pill-bg: #3367d6;\n  --baseline-low-pill-color: #f1f3f4;\n  --baseline-limited-bg: #282a2c;\n  --baseline-limited-engine-bg: #1d1e1f;\n  --baseline-limited-img: url(\"../../assets/icons/baseline/limited-dark.svg\");\n  --baseline-limited-check: #1e8e3e;\n  --baseline-limited-cross: #ea8600;\n\n  --curriculum-color: #e3642a;\n  --curriculum-color-topic-standards: #f2919c;\n  --curriculum-color-topic-styling: #91a6f2;\n  --curriculum-color-topic-scripting: #f2cf8f;\n  --curriculum-color-topic-tooling: #8ff2a4;\n  --curriculum-color-topic-practices: #c891f2;\n  --curriculum-bg-color: #321d13;\n  --curriculum-bg-color-note: #332c29;\n  --curriculum-bg-large-color: #343434;\n  --curriculum-bg-color-topic-standards: #994b53;\n  --curriculum-bg-color-topic-styling: #4e609e;\n  --curriculum-bg-color-topic-scripting: #7d683d;\n  --curriculum-bg-color-topic-tooling: #3d7c4b;\n  --curriculum-bg-color-topic-practices: #584280;\n  --curriculum-bg-color-landing: #0e0b0a;\n  --curriculum-bg-color-landing-about-ul: #000;\n  --curriculum-bg-color-landing-top-icon: #321d13;\n  --curriculum-bg-color-landing-stairway-floor: rgba(137, 91, 51, 1);\n  --curriculum-category-color: #e3642a;\n  --curriculum-bg-color-grey: #1f1c1a;\n  --curriculum-bg-color-orange: #b25c35;\n  --curriculum-color-landing-laptop: #b25c35;\n  --curriculum-bg-color-list-item-body: #000;\n  --curriculum-border-color: #4e4e4e;\n  --curriculum-border-color-hover: var(--text-inactive);\n  --curriculum-module-label-color: #e3642a;\n  --curriculum-module-label-bg-color: #321d13;\n  --curriculum-bg-color-list-item-topic-standards: #343434;\n  --curriculum-bg-color-list-item-topic-styling: #343434;\n  --curriculum-bg-color-list-item-topic-scripting: #343434;\n  --curriculum-bg-color-list-item-topic-tooling: #343434;\n  --curriculum-bg-color-list-item-topic-practices: #343434;\n  --curriculum-color-list-item-icon-topic-standards: #f2919c;\n  --curriculum-color-list-item-icon-topic-styling: #91a6f2;\n  --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;\n  --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;\n  --curriculum-color-list-item-icon-topic-practices: #c891f2;\n  --curriculum-bg-color-list-item-icon-topic-standards: #804248;\n  --curriculum-bg-color-list-item-icon-topic-styling: #425080;\n  --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;\n  --curriculum-bg-color-list-item-icon-topic-tooling: #428050;\n  --curriculum-bg-color-list-item-icon-topic-practices: #584280;\n  --curriculum-bg-color-partner: #1f1c1a;\n  --curriculum-shadow:\n    2px 2px 5px 0 rgba(36, 36, 36, 0.15), -2px 2px 8px 0 rgba(87, 87, 87, 0.15);\n  --curriculum-shadow-landing-about-ul:\n    0 4px 10px 0 rgba(227, 100, 42, 0.06), 0 -2px 4px 0 rgba(178, 92, 53, 0.06);\n\n  --curriculum-landing-about-beginner: url(\"../../assets/icons/curriculum-landing-about-beginner.svg#dark\");\n  --curriculum-landing-about-pace: url(\"../../assets/icons/curriculum-landing-about-pace.svg#dark\");\n  --curriculum-landing-about-free: url(\"../../assets/icons/curriculum-landing-about-free.svg#dark\");\n  --curriculum-landing-about-bullet: url(\"../../assets/icons/curriculum-landing-about-bullet.svg#dark\");\n  --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#small-dark\");\n  --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#small-dark\");\n  --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#small-dark\");\n  --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#small-dark\");\n  --curriculum-module-mdn-resource: url(\"../../assets/icons/curriculum-mdn-resource.svg#dark\");\n  --curriculum-bullet: url(\"../../assets/icons/curriculum-bullet.svg#dark\");\n  --curriculum-about-covered: url(\"../../assets/icons/curriculum-about-covered.svg#dark\");\n  --curriculum-about-detail: url(\"../../assets/icons/curriculum-about-detail.svg#dark\");\n  --curriculum-about-educators: url(\"../../assets/icons/curriculum-about-educators.svg#dark\");\n  --curriculum-about-not: url(\"../../assets/icons/curriculum-about-not.svg#dark\");\n  --curriculum-about-students: url(\"../../assets/icons/curriculum-about-students.svg#dark\");\n  --curriculum-bg-image-partner: url(\"../../assets/curriculum-partner-bg.svg#dark\");\n  --curriculum-scrim-bg: url(\"../../assets/curriculum-scrim-bg.svg#dark\");\n  --curriculum-landing-arrow: url(\"../../assets/curriculum-landing-arrow.svg#dark\");\n\n  color-scheme: dark;\n\n  @media (min-width: $screen-md) {\n    --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#dark\");\n    --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#dark\");\n    --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#dark\");\n    --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#dark\");\n  }\n}\n\nbody,\n:root {\n  --mdn-color-white: #{$mdn-color-white};\n  --mdn-color-black: #{$mdn-color-black};\n  --mdn-color-ads: #{$mdn-color-ads};\n  --mdn-color-background-highlight: #{$mdn-color-light-theme-yellow-10};\n  --mdn-color-dark-grey: #{$mdn-color-neutral-70};\n  --mdn-background-dark: #{$mdn-theme-dark-background-primary};\n  --mdn-background-light: #{$mdn-theme-light-background-primary};\n  --mdn-background-light-grey: #{$mdn-color-neutral-10};\n  --color-announcement-banner-accent: #{$mdn-color-light-theme-pink-40};\n}\n\n.light {\n  @include light-theme;\n}\n\n.dark {\n  @include dark-theme;\n}\n\n// OS Default.\n:root:not(.light):not(.dark) {\n  @media (prefers-color-scheme: light) {\n    @include light-theme;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    @include dark-theme;\n  }\n}\n",".notecard {\n  --note-background: var(--background-information);\n  --note-theme: var(--icon-information);\n  background-color: var(--note-background);\n  border-left: 2px solid var(--note-theme);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-01);\n  margin: 1rem 0;\n  padding: 1rem 1rem 1rem 3rem;\n  position: relative;\n\n  &,\n  p,\n  li {\n    color: var(--text-secondary);\n  }\n\n  p {\n    line-height: 2;\n    margin: 0;\n  }\n\n  &:before {\n    background-color: var(--note-theme);\n    content: \"\";\n    display: block;\n    height: 1rem;\n    left: 1rem;\n    mask-image: url(\"../../../assets/icons/note-info.svg\");\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    position: absolute;\n    top: 1.35rem;\n    width: 1rem;\n  }\n\n  &.inline {\n    font: var(--type-body-s);\n    margin: 0.5rem;\n    padding: 0.125rem 0.375rem 0.125rem 1.5rem;\n  }\n\n  &.inline::before {\n    display: block;\n    height: 0.8rem;\n    left: 0.2rem;\n    top: 0.1875rem;\n    width: 0.8rem;\n  }\n\n  &.warning {\n    --note-background: var(--background-warning);\n    --note-theme: var(--icon-warning);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/note-warning.svg\");\n    }\n  }\n\n  &.nonstandard {\n    --note-background: var(--background-warning);\n    --note-theme: var(--icon-warning);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/nonstandard.svg\");\n    }\n  }\n\n  &.error,\n  &.negative {\n    --note-background: var(--background-critical);\n    --note-theme: var(--icon-critical);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/note-deprecated.svg\");\n    }\n  }\n\n  &.deprecated {\n    --note-background: var(--background-critical);\n    --note-theme: var(--icon-critical);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/deprecated.svg\");\n    }\n  }\n\n  &.experimental {\n    &:before {\n      mask-image: url(\"../../../assets/icons/experimental.svg\");\n    }\n  }\n\n  &.success {\n    --note-background: var(--background-success);\n    --note-theme: var(--icon-success);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/note-info.svg\");\n    }\n  }\n\n  // extra classes added to fix specificity.\n\n  &,\n  .main-page-content &,\n  dd & {\n    ul,\n    ol {\n      padding-left: 1rem;\n    }\n\n    ul,\n    ol,\n    li,\n    p {\n      margin: 0;\n      padding-bottom: 0.5rem;\n\n      &:last-child {\n        padding-bottom: 0;\n      }\n    }\n  }\n\n  &:last-of-type {\n    margin-bottom: 2rem;\n  }\n\n  &:first-of-type {\n    margin-top: 2rem;\n  }\n\n  > *:first-child {\n    margin-top: 0;\n  }\n\n  > *:last-child *:last-child {\n    margin-bottom: 0;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    color: var(--text-primary);\n    font: var(--type-base-font-size-rem);\n    margin-bottom: 0.5rem;\n  }\n}\n\n.main-content {\n  .notecard {\n    a:not(.button),\n    code {\n      color: var(--notecard-link-color);\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.pagination {\n  align-items: center;\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  padding: 1rem 0;\n\n  &-label {\n    font-size: var(--type-smaller-font-size);\n  }\n}\n","button,\n.button {\n  appearance: none;\n  background: none;\n  border: none;\n}\n\n.button {\n  --button-bg: var(--button-primary-default);\n  --button-bg-hover: var(--button-primary-hover);\n  --button-bg-active: var(--button-primary-active);\n  --button-border-color: var(--button-primary-default);\n  --button-focus-effect: var(--focus-effect);\n  --button-height: var(--form-elem-height, 2rem);\n  --button-color: var(--background-primary);\n  --button-font: var(--type-emphasis-m);\n  --button-padding: 0.5rem;\n  --button-radius: var(--elem-radius, 0.25rem);\n  border-radius: var(--button-radius);\n\n  cursor: pointer;\n  display: inline-block;\n  padding: 0;\n  text-decoration: none;\n}\n\n.button-wrap {\n  align-items: center;\n  background-color: var(--button-bg);\n  border: 1px solid var(--button-border-color);\n  border-radius: var(--button-radius);\n  color: var(--button-color);\n  display: flex;\n  font: var(--button-font);\n  gap: 0.25rem;\n  height: var(--button-height);\n  justify-content: center;\n  padding-left: var(--button-padding);\n  padding-right: var(--button-padding);\n  position: relative;\n}\n\n.button .icon {\n  background-color: var(--button-color);\n  margin: 0 -1px; // shrinks icon-only buttons to square.\n}\n\n/* Button States */\n\n.button:hover,\n.button.hover {\n  // In most cases, we want the border to be the same color as the background.\n  --button-border-color: var(--button-bg-hover, var(--button-bg));\n\n  .button-wrap {\n    background-color: var(--button-bg-hover, var(--button-bg));\n  }\n}\n\n.button:active,\n.button.active {\n  .button-wrap {\n    background-color: var(--button-bg-active, var(--button-bg));\n  }\n}\n\n.button:focus,\n.button.focus {\n  outline: none;\n\n  .button-wrap {\n    border: 1px solid var(--button-secondary-border-focus);\n    box-shadow: var(--button-focus-effect);\n  }\n}\n\n.button.button[disabled],\n.button.button.inactive {\n  cursor: default;\n  opacity: 0.65;\n\n  &:hover {\n    --button-bg-hover: unset;\n  }\n\n  &:active {\n    --button-bg-active: unset;\n  }\n}\n\n/* Standard Button Modifiers */\n\n.button.small,\n.button.small .button-wrap {\n  --button-height: 1.75rem;\n  --button-padding: 0.25rem;\n}\n\n/* Secondary Version */\n\n.button.secondary {\n  --button-bg: var(--button-secondary-default);\n  --button-border-color: var(--border-primary);\n  --button-color: var(--text-secondary);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n\n  &:focus {\n    --button-border-color: var(--button-secondary-border-focus);\n  }\n}\n\n/* Action Version */\n\n.button.action {\n  --button-bg: transparent;\n  --button-border-color: var(--button-bg);\n  --button-color: var(--text-secondary);\n  --button-font: var(--type-label-s);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n\n  &.has-icon {\n    --button-font: var(--type-emphasis-m);\n    text-transform: initial;\n  }\n\n  &:focus {\n    --button-border-color: var(--button-secondary-border-focus);\n  }\n\n  .button-wrap {\n    text-transform: var(--button-action-transform, uppercase);\n  }\n\n  &.highlight {\n    --button-color: var(--button-primary-default);\n  }\n}\n\n/* Select Version */\n.button.select {\n  --button-bg: var(--button-secondary-default);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n  --button-border-color: var(--border-primary);\n  --button-color: var(--text-secondary);\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  text-decoration: none;\n\n  .button-wrap {\n    box-shadow: var(--shadow-01);\n    padding-right: 26px;\n    position: relative;\n  }\n\n  .button-wrap::after {\n    background-color: var(--icon-primary);\n    content: \"\";\n    display: block;\n    height: 16px;\n    mask-image: url(\"../../../assets/icons/small-arrow.svg\");\n    mask-size: cover;\n    position: absolute;\n    right: 0.5rem;\n    top: calc(50% - 0.5rem);\n    width: 16px;\n  }\n}\n\n.button.link {\n  --button-bg: none;\n  --button-bg-hover: none;\n  --button-bg-active: none;\n  --button-border-color: none;\n  --button-focus-effect: none;\n  --button-secondary-border-focus: none;\n  --button-height: auto;\n  --button-font: unset;\n  --button-padding: 0;\n  --button-radius: 0;\n\n  --button-color: var(--text-link);\n  appearance: none;\n  display: inline;\n  text-decoration: none;\n\n  &:focus-visible {\n    outline-color: var(--accent-primary);\n    outline-offset: 1px;\n    outline-style: auto;\n  }\n}\n\n/*\n.high-contrast-white {\n  .button:focus {\n    --button-border-color: var(--border-primary);\n    --button-focus-effect: 0 0 0 4px var(--background-primary),\n      0 0 0 7px var(--border-primary);\n  }\n}\n\n.high-contrast-black {\n  .button:focus {\n    --button-border-color: var(--border-primary);\n    --button-focus-shadow: 0 0 0 4px var(--background-primary),\n      0 0 0 7px var(--border-primary);\n  }\n\n  .button {\n    --button-color: var(--button-secondary-default);\n  }\n\n  .button.secondary {\n    --button-border-color: var(--button-color);\n  }\n\n  .button.action {\n    --button-color: var(--text-secondary);\n  }\n}\n*/\n","@use \"./ui/vars\" as *;\n@use \"./ui/base/mdn\";\n@use \"./ui/base/typography\";\n@use \"./ui/base/reset\";\n@use \"./ui/base/themes\";\n@use \"./ui/base/prism\";\n\n// These classes are used across several components.\n@use \"./ui/molecules/notecards\";\n@use \"./ui/molecules/pagination\";\n@use \"./ui/atoms/button\";\n@use \"./ui/atoms/form\";\n\n/*\n  Global :root variables, for those independent of themes\n*/\n:root {\n  /* Typography */\n  --font-fallback:\n    BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\",\n    \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n\n  --font-body: Inter, var(--font-fallback);\n  --font-heading: Inter, var(--font-fallback);\n  --font-code:\n    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n\n  --base-font-size: 100%;\n  --base-line-height: 1.2;\n  --intermediate-line-height: 1.5;\n  --heading-line-height: var(--base-line-height);\n  --heading-letter-spacing: -0.031rem;\n  --font-content-line-height: 1.75;\n  --font-body-strong-weight: 600;\n\n  /* based on the following type-scale https://type-scale.com/?size=16&scale=1.200&text=MDN%20Web%20Docs&font=Inter&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false */\n  --type-heading-h1-font-size: 2.488rem;\n  --type-heading-h2-font-size: 2.074rem;\n  --type-heading-h3-font-size: 1.728rem;\n  --type-heading-h4-font-size: 1.44rem;\n  --type-heading-h5-font-size: 1.2rem;\n  --type-base-font-size-rem: 1rem;\n  --type-smaller-font-size: 0.833rem;\n  --type-tiny-font-size: 0.694rem;\n\n  /* based on the following type-scale https://type-scale.com/?size=16&scale=1.125&text=MDN%20Web%20Docs&font=Inter&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false */\n  --type-heading-h1-font-size-mobile: 1.802rem;\n  --type-heading-h2-font-size-mobile: 1.602rem;\n  --type-heading-h3-font-size-mobile: 1.424rem;\n  --type-heading-h4-font-size-mobile: 1.266rem;\n\n  --type-emphasis-m: var(--font-body-strong-weight)\n    var(--type-smaller-font-size) / 1.23 var(--font-body);\n  --type-label-s: 600 var(--type-tiny-font-size) / 1.2 var(--font-heading);\n\n  --type-heading-h1: 600 var(--type-heading-h1-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h2: 500 var(--type-heading-h2-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h3: 300 var(--type-heading-h3-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h4: 400 var(--type-heading-h4-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h5: 400 var(--type-heading-h5-font-size) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h6: 400 var(--type-base-font-size-rem) /\n    var(--heading-line-height) var(--font-heading);\n  --type-article-p: 400 var(--type-base-font-size-rem) /\n    var(--font-content-line-height) var(--font-body);\n\n  /* Grid and Layout */\n  --max-width: 1440px;\n  --gutter: 1rem; /* Space between content and browser window */\n  --top-navigation-height: 4rem;\n  --top-navigation-offset: -4rem;\n  --top-banner-inner-height: 3.125rem;\n  // top-banner-inner-height + 2 * padding;\n  --top-banner-height: calc(var(--top-banner-inner-height) + 2 * 0.125rem);\n  // + border\n  --top-banner-outer-height: calc(var(--top-banner-height) + 2 * 1px);\n\n  /* Z-Indexes\n     Keep this in order, and avoid reusing variables so elements each\n     exist on a distinct layer - we hit a lot of bugs if they don't */\n  --z-index-a11y: 10000;\n  --z-index-modal-content: 801;\n  --z-index-modal-overlay: 800;\n  --z-index-main-header: 700;\n  --z-index-sidebar-mobile: 600;\n  --z-index-mid: 500;\n  --z-index-nav-menu: 200;\n  --z-index-search-results: 101;\n  --z-index-low: 100;\n  --z-index-search-results-home: 99;\n  --z-index-back: -1;\n\n  /* Features */\n  --elem-radius: 0.25rem;\n  --focus-effect: 0 0 0 3px var(--accent-primary-engage);\n  --form-elem-height: 2rem;\n\n  /* Major Components */\n  --top-nav-height: 4rem;\n  --article-actions-container-height: 2rem;\n  --icon-size: 1rem;\n  --sticky-header-without-actions-height: calc(var(--top-nav-height) + 1px);\n  --sticky-header-with-actions-height: calc(\n    var(--sticky-header-without-actions-height) +\n      var(--article-actions-container-height) + 1px\n  );\n}\n\n@media (min-width: $screen-md) {\n  :root {\n    --type-heading-h1: 600 var(--type-heading-h1-font-size) /\n      var(--heading-line-height) var(--font-heading);\n    --type-heading-h2: 500 var(--type-heading-h2-font-size) /\n      var(--heading-line-height) var(--font-heading);\n    --type-heading-h3: 300 var(--type-heading-h3-font-size) /\n      var(--heading-line-height) var(--font-heading);\n    --type-heading-h4: 400 var(--type-heading-h4-font-size) /\n      var(--heading-line-height) var(--font-heading);\n  }\n}\n\n:target,\nsection[id] {\n  scroll-margin-top: var(--sticky-header-with-actions-height);\n}\n\n.sticky-header-container.without-actions ~ * :target,\n.sticky-header-container.without-actions ~ * section[id] {\n  scroll-margin-top: var(--sticky-header-without-actions-height);\n}\n\nbody {\n  accent-color: var(--accent-primary); // for checkboxes, radios, etc.\n  background-color: var(--background-primary);\n  color: var(--text-primary);\n  scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);\n\n  &.mobile-overlay-active {\n    @media (max-width: $screen-md) {\n      overflow: hidden;\n    }\n  }\n}\n\n:focus-visible {\n  outline-color: var(--accent-primary);\n  outline-offset: 1px;\n  outline-style: auto;\n}\n\nmain {\n  // prevent margin-collapse for child elements\n  display: flow-root;\n  min-height: 80vh;\n}\n\n.main-page-content {\n  a {\n    &:link,\n    &:visited {\n      text-decoration: underline;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n    }\n  }\n}\n\n.visually-hidden {\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.contents {\n  display: contents;\n}\n\n.hidden {\n  display: none;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\npre {\n  white-space: pre-wrap;\n  white-space: -moz-pre-wrap;\n  white-space: -pre-wrap;\n  white-space: -o-pre-wrap;\n  word-wrap: break-word;\n}\n\na {\n  color: var(--text-link);\n}\n\n.external:after {\n  background-color: var(--icon-primary);\n  content: \"\";\n  display: inline-flex;\n  height: 10px;\n  margin-left: 4px;\n  mask-image: url(\"./assets/icons/external.svg\");\n  mask-size: cover;\n  width: 10px;\n}\n\nbutton.button[disabled],\ninput[disabled] {\n  cursor: not-allowed;\n}\n\n.expand-this-link:after {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n[type=\"search\"] {\n  /* clears the ‘X’ from Internet Explorer */\n  &::-ms-clear {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n\n  &::-ms-reveal {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n  /* clears the ‘X’ from Chrome */\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n}\n\nu {\n  text-decoration-color: var(--text-link);\n  text-decoration-thickness: 0.15rem;\n  text-underline-offset: 0.1em;\n}\n\n.plus .dark,\n.plus {\n  --background-toc-active: var(--plus-accent-background-color);\n  --text-link: var(--plus-accent-color);\n  --category-color: var(--plus-accent-color);\n  --category-color-engage: var(--plus-accent-engage);\n  --category-color-background: var(--plus-accent-background-color);\n  --code-color: var(--plus-code-color);\n  --mark-color: var(--plus-mark-color);\n}\n\n.category-html {\n  --background-toc-active: var(--html-accent-background-color);\n  --category-color: var(--html-accent-color);\n  --category-color-engage: var(--html-accent-engage);\n  --category-color-background: var(--html-accent-background-color);\n  --mark-color: var(--html-mark-color);\n}\n\n.category-css {\n  --background-toc-active: var(--css-accent-background-color);\n  --category-color: var(--css-accent-color);\n  --category-color-engage: var(--css-accent-engage);\n  --category-color-background: var(--css-accent-background-color);\n  --mark-color: var(--css-mark-color);\n}\n\n.category-javascript {\n  --background-toc-active: var(--js-accent-background-color);\n  --category-color: var(--js-accent-color);\n  --category-color-engage: var(--js-accent-engage);\n  --category-color-background: var(--js-accent-background-color);\n  --mark-color: var(--js-mark-color);\n}\n\n.category-http {\n  --background-toc-active: var(--http-accent-background-color);\n  --category-color: var(--http-accent-color);\n  --category-color-engage: var(--http-accent-engage);\n  --category-color-background: var(--http-accent-background-color);\n  --mark-color: var(--http-mark-color);\n}\n\n.category-api {\n  --background-toc-active: var(--apis-accent-background-color);\n  --category-color: var(--apis-accent-color);\n  --category-color-engage: var(--apis-accent-engage);\n  --category-color-background: var(--apis-accent-background-color);\n  --mark-color: var(--apis-mark-color);\n}\n\n.category-learn {\n  --background-toc-active: var(--learn-accent-background-color);\n  --category-color: var(--learn-accent-color);\n  --category-color-engage: var(--learn-accent-engage);\n  --category-color-background: var(--learn-accent-background-color);\n  --mark-color: var(--api-mark-color);\n}\n\n.mify {\n  @include mdn.mify;\n}\n\n._ify {\n  @include mdn.uify;\n}\n\n@media (forced-colors: active) {\n  .icon {\n    background-color: CanvasText !important;\n  }\n}\n\nsup.new {\n  background: var(--new-background);\n  border-radius: 1em;\n  color: var(--new-color);\n  display: inline-block;\n  font-size: 0.45rem;\n  font-weight: bold;\n  line-height: 1.7;\n  padding: 0 0.4em;\n  text-rendering: optimizeLegibility;\n  text-transform: uppercase;\n\n  &.beta {\n    background: var(--new-background-beta, var(--new-background));\n  }\n}\n\n.sticky-header-container {\n  position: sticky;\n  // Avoid gap on certain zoom levels.\n  top: -1px;\n  z-index: var(--z-index-main-header);\n}\n\n.feedback-link::before {\n  background-color: var(--feedback-link-icon, var(--text-link));\n  content: \"\";\n  display: inline-flex;\n  height: 1em;\n  margin-right: 0.4em;\n  mask-image: url(\"./assets/icons/feedback.svg\");\n  mask-size: cover;\n  vertical-align: middle;\n  width: 1em;\n}\n","@mixin uify {\n  &::after {\n    content: \" \";\n    text-decoration: underline;\n    text-decoration-color: var(--text-link);\n    text-decoration-thickness: 0.1em;\n    text-underline-offset: 0.1em;\n  }\n}\n\n@mixin mify {\n  margin-left: 0.5rem;\n  @include uify;\n\n  &::before {\n    background-color: var(--text-link);\n    content: \"\";\n    display: inline-block;\n    height: 1.2em;\n    mask: url(\"../../assets/m-logo.svg\") no-repeat 50% 50%;\n    mask-size: cover;\n    transform: translate(-0.2em, 0.2em);\n    width: 1.2em;\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.homepage {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  overflow-x: clip;\n  overflow-y: visible;\n  position: relative;\n\n  width: 100%;\n\n  > * {\n    margin-top: 2rem;\n  }\n\n  > *:first-child {\n    margin-top: 0;\n  }\n\n  a:hover {\n    text-decoration: underline;\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.homepage-hero {\n  color: var(--text-primary);\n  display: grid;\n  grid-template-rows: fit-content(24rem);\n  width: 100%;\n\n  section {\n    --contrast-boost-bg: #191919;\n    --contrast-boost-shadow:\n      2px 2px 3px var(--contrast-boost-bg),\n      2px -2px 3px var(--contrast-boost-bg),\n      -2px -2px 3px var(--contrast-boost-bg),\n      -2px 2px 3px var(--contrast-boost-bg);\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n    grid-column: 1;\n    grid-row: 1;\n    height: 100%;\n    justify-content: center;\n    margin: 0 auto;\n    max-width: 52rem;\n    padding: 0 1rem;\n    width: 100%;\n\n    .document-survey {\n      margin-top: 1rem;\n\n      &:not(:has(details[open])) {\n        max-width: 32rem;\n      }\n\n      ~ h1 {\n        display: none;\n      }\n    }\n\n    h1 {\n      /* Title */\n      font-size: 2.2rem;\n      font-weight: 200;\n      letter-spacing: -0.5px;\n      line-height: 120%;\n      margin: 0;\n\n      @media (min-width: $screen-sm) {\n        font-size: 2.5rem;\n      }\n\n      @media (min-width: $screen-md) {\n        font-size: 3rem;\n      }\n    }\n\n    h1::after {\n      content: \" \";\n      text-decoration: underline;\n      text-decoration-color: var(--text-link);\n      text-decoration-thickness: 0.15rem;\n      text-underline-offset: 0.1rem;\n    }\n\n    p {\n      font-weight: 300;\n    }\n\n    h1,\n    p {\n      text-shadow: var(--contrast-boost-shadow);\n    }\n  }\n\n  .homepage-hero-bg {\n    --mandala-primary: var(--border-primary);\n    background-color: rgba(1, 1, 1, 0.9);\n    grid-column: 1;\n    grid-row: 1;\n    overflow: hidden;\n    top: 0;\n    width: 100%;\n    z-index: -1;\n\n    .mandala-translate {\n      transform: translate(10rem, -8rem) scale(1.2);\n      @media (min-width: $screen-sm) {\n        transform: translate(12rem, -8rem);\n      }\n    }\n  }\n\n  .homepage-hero-search {\n    align-self: center;\n    display: flex;\n    margin-bottom: 1rem;\n    max-height: 4rem;\n    max-width: 40rem;\n    width: 100%;\n\n    .search-input-field {\n      background-color: rgba(1, 1, 1, 0.5);\n      border-color: var(--border-primary);\n      border-radius: 10rem;\n      padding: 2rem;\n      width: 100%;\n\n      &:focus {\n        border-color: var(--field-focus-border);\n        box-shadow: var(--focus-01);\n      }\n\n      &::placeholder {\n        font-size: 1.5rem;\n        text-shadow: var(--contrast-boost-shadow);\n      }\n    }\n\n    .search-widget {\n      display: flex;\n      gap: 0;\n      width: 100%;\n    }\n\n    .search-results {\n      box-shadow: var(--shadow-02);\n      margin: 0 1.5rem;\n      text-align: left;\n      top: 4.2rem;\n      width: calc(100% - 3rem);\n      z-index: var(--z-index-search-results-home);\n\n      .result-item {\n        a {\n          padding: 0.5rem 1.5rem;\n        }\n\n        mark {\n          background: none;\n          color: var(--text-primary);\n        }\n\n        span {\n          color: var(--text-secondary);\n          font-weight: normal;\n        }\n\n        small {\n          color: var(--text-secondary);\n        }\n      }\n    }\n  }\n\n  .search-button.button {\n    height: 100%;\n    left: auto;\n    position: absolute;\n    right: 1.5rem;\n    top: 0;\n\n    &:hover {\n      background: none;\n      border-color: transparent;\n    }\n\n    .button-wrap {\n      background: none;\n\n      &:hover {\n        background: none;\n        border: 1px solid transparent;\n\n        .icon {\n          background-color: var(--text-link);\n        }\n      }\n\n      .icon {\n        background-color: var(--icon-primary);\n        border: none;\n      }\n    }\n  }\n}\n","$icons:\n  \"add-filled\", \"add\", \"altname\", \"bell\", \"bell-filled\", \"bell-ring\", \"bluesky\",\n  \"bookmark-filled\", \"bookmark\", \"cancel\", \"chatgpt\", \"checkmark\", \"chevron\",\n  \"chrome\", \"critical\", \"curriculum-next\", \"curriculum-prev\", \"deno\",\n  \"deprecated\", \"desktop\", \"disabled\", \"edge\", \"edit\", \"edit-filled\",\n  \"ellipses\", \"experimental\", \"external\", \"eye-filled\", \"eye\", \"feed\", \"filter\",\n  \"footnote\", \"github-mark-small\", \"ie\", \"information\", \"highlight\", \"history\",\n  \"language\", \"mastodon\", \"menu-filled\", \"menu\", \"mobile\", \"more\", \"theme-dark\",\n  \"new-topic\", \"next\", \"no\", \"nodejs\", \"nonstandard\", \"note-info\",\n  \"note-warning\", \"note-deprecated\", \"opera\", \"padlock\", \"partial\", \"play\",\n  \"prefix\", \"preview\", \"previous\", \"question-mark\", \"queue\", \"queued\", \"quote\",\n  \"return\", \"safari\", \"samsunginternet\", \"search\", \"send\", \"server\", \"sidebar\",\n  \"simple-firefox\", \"small-arrow\", \"theme-light\", \"star-filled\", \"star\",\n  \"theme-os-default\", \"thumbs-down\", \"thumbs-up\", \"trash\", \"trash-filled\",\n  \"twitter-x\", \"unknown\", \"warning\", \"webview\", \"yes\", \"yes-circle\";\n\n.icon {\n  --size: var(--icon-size, 1rem);\n  background-color: var(--icon-primary);\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--size);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  vertical-align: middle;\n  width: var(--size);\n\n  @each $name in $icons {\n    &.icon-#{$name} {\n      mask-image: url(\"../../../assets/icons/\" + $name + \".svg\");\n    }\n  }\n}\n\n// The icon class is applied directly to SVGs sometimes. This\n// override un-breaks those.\nsvg.icon {\n  background: transparent;\n  color: var(--icon-primary);\n}\n\n.icons-highlighted {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n\n  > span {\n    height: var(--icon-size);\n    line-height: 0;\n    width: var(--icon-size);\n\n    &.icons-icon-wrapper {\n      margin-top: -0.1rem;\n    }\n  }\n}\n","@use \"sass:color\";\n@use \"../../vars\" as *;\n\n.header-search {\n  max-width: 100%;\n\n  .search-widget {\n    margin: 0 auto;\n    max-width: 20rem;\n    position: relative;\n    width: 100%;\n\n    @media (min-width: $screen-md) {\n      align-items: center;\n      display: flex;\n      gap: 0.5rem;\n    }\n  }\n\n  .search-widget:focus-within .search-input-field,\n  .search-input-field:focus,\n  .search-input-field:valid {\n    width: inherit;\n\n    /* When the search input has focus or has content,\n          show the clear search button */\n    ~ .button.clear-search-button {\n      display: block;\n      right: 2.8rem;\n    }\n  }\n\n  .search-input-field {\n    // make webkit play nice with search input types\n    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */\n    background-color: var(--background-primary);\n    border: 1px solid var(--border-primary);\n    border-radius: 100px;\n    caret-color: var(--text-link);\n    color: var(--text-primary);\n    height: var(--form-elem-height);\n    min-width: 5rem;\n    padding-left: 1rem;\n    padding-right: 2rem;\n    width: 100%;\n\n    @keyframes blink {\n      from,\n      to {\n        text-decoration-line: none;\n      }\n\n      50% {\n        text-decoration-line: underline;\n      }\n    }\n\n    @media (min-width: $screen-lg) {\n      &:invalid {\n        width: 1rem;\n      }\n    }\n\n    &:invalid,\n    &:invalid::placeholder {\n      animation: blink 2s step-end infinite;\n      caret-color: transparent;\n\n      @media (prefers-reduced-motion: reduce) {\n        caret-color: initial;\n      }\n    }\n\n    &:valid,\n    &:valid::placeholder {\n      animation: none;\n    }\n\n    &:not(:focus):valid,\n    &:not(:focus):valid::placeholder {\n      text-decoration-line: none;\n    }\n\n    &:not(:focus),\n    &:not(:focus)::placeholder {\n      animation: none;\n      text-decoration-line: underline;\n    }\n\n    &:not(:focus)::placeholder {\n      animation: none;\n      text-decoration-line: underline;\n    }\n\n    &:focus {\n      border-color: var(--category-color);\n      box-shadow:\n        0 0 0 3px var(--blend-color),\n        0 0 0 3px var(--category-color);\n      outline: 0 none;\n    }\n\n    &,\n    &::placeholder {\n      font: var(--type-body-l);\n      opacity: 1;\n      text-decoration-color: var(--text-link);\n      text-decoration-thickness: 0.15rem;\n      text-underline-offset: 0.1em;\n    }\n  }\n\n  .server-error {\n    color: var(--icon-critical);\n    margin: 0;\n  }\n}\n\n.header-search,\n.homepage-hero-search {\n  .search-results {\n    border: 1px solid var(--border-secondary);\n    border-radius: var(--elem-radius);\n    box-shadow: var(--shadow-01);\n    left: 0;\n    position: absolute;\n    top: 42px;\n    width: 100%;\n    z-index: var(--z-index-search-results);\n\n    &,\n    a[href],\n    mark {\n      color: var(--text-primary);\n    }\n\n    .indexing-warning {\n      color: var(--icon-warning);\n    }\n\n    .nothing-found {\n      font-style: italic;\n      font-variation-settings: \"slnt\" -10;\n    }\n\n    .result-item {\n      background: var(--background-secondary);\n      border-bottom: 1px solid var(--border-secondary);\n      font-size: var(--type-smaller-font-size);\n      word-break: break-word;\n\n      &:first-child {\n        border-radius: var(--elem-radius) var(--elem-radius) 0 0;\n      }\n\n      &:last-child {\n        border-radius: 0 0 var(--elem-radius) var(--elem-radius);\n      }\n\n      &.nothing-found {\n        code {\n          font-size: 0.8125rem;\n        }\n      }\n\n      > * {\n        display: block;\n        padding: 0.5rem;\n      }\n    }\n\n    .result-item:hover,\n    .result-item.highlight {\n      background-color: var(--border-secondary);\n    }\n\n    .result-item.qs-collection {\n      b::after {\n        border: 1px solid var(--text-primary-red);\n        border-radius: 0.5rem;\n        content: \"collection\";\n        font-size: 0.5rem;\n        line-height: 0.5rem;\n        margin-bottom: 0.5rem;\n        margin-left: 0.5rem;\n        padding: 0.125rem;\n        vertical-align: super;\n      }\n    }\n\n    .result-item:hover,\n    .result-item:focus {\n      cursor: pointer;\n    }\n\n    div:last-child {\n      border-bottom: 0;\n    }\n\n    mark {\n      background-color: var(--mark-color);\n    }\n\n    small {\n      overflow-wrap: break-word;\n    }\n\n    a {\n      text-overflow: ellipsis;\n    }\n\n    div.searchindex-error {\n      color: var(--icon-critical);\n    }\n  }\n}\n\n.search-form {\n  display: flex;\n  position: relative;\n}\n\n.button.search-button,\n.button.clear-search-button {\n  --button-color: var(--icon-secondary);\n  --button-height: 1.5rem;\n  --button-padding: 0;\n  position: absolute;\n  right: 0.75rem;\n  top: 0.25rem;\n  width: 1.5rem;\n\n  &:hover {\n    background: transparent;\n  }\n\n  @media (min-width: $screen-md) {\n    right: 1.2rem;\n    width: 1.5rem;\n  }\n}\n\n.button.clear-search-button {\n  display: none;\n}\n","@use \"../../../ui/vars\" as *;\n\n.mandala-container {\n  // transform: skew(-7deg, 10deg);\n\n  --mandala-primary: #{$mdn-color-neutral-70};\n  --mandala-accent-1: var(--html-accent-color);\n  --mandala-accent-2: var(--http-accent-color);\n  --mandala-accent-3: var(--js-accent-color);\n  --mandala-accent-4: #{$mdn-color-neutral-30};\n  display: flex;\n  justify-content: center;\n\n  svg {\n    font-size: 1.5rem;\n    font-weight: 300;\n    user-select: none;\n  }\n\n  svg > text {\n    fill: var(--mandala-primary);\n  }\n\n  textPath[href=\"#circle1\"] {\n    font-size: 1.5rem;\n  }\n\n  textPath[href=\"#circle2\"] {\n    font-size: 1.3rem;\n  }\n\n  textPath[href=\"#circle3\"] {\n    font-size: 1.2rem;\n  }\n\n  textPath[href=\"#circle4\"] {\n    font-size: 1.1rem;\n  }\n\n  textPath[href=\"#circle5\"] {\n    font-size: 1rem;\n  }\n}\n","@use \"../../ui/vars\" as *;\n@use \"../../ui/mixins\" as *;\n\n.featured-articles {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 0 1rem;\n\n  h2 {\n    font: var(--type-heading-h4);\n    margin-top: 0;\n  }\n\n  .tile-container {\n    display: grid;\n    gap: 1rem;\n    grid-auto-flow: row;\n    max-width: 52rem;\n\n    @media (min-width: $screen-md) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .article-tile {\n    border: 1px solid var(--border-primary);\n    border-radius: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    padding: 1rem;\n\n    &:hover {\n      box-shadow: var(--shadow-02);\n    }\n\n    .tile-tag {\n      color: var(--text-primary);\n      font-weight: 500;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    .tile-title {\n      align-items: flex-start;\n      display: flex;\n      flex-grow: 1;\n      font: var(--type-heading-h5);\n      font-weight: 500;\n      line-height: var(--intermediate-line-height);\n      margin: 0;\n      margin-bottom: 1rem;\n\n      a {\n        color: var(--text-primary);\n      }\n    }\n\n    p {\n      font: var(--type-smaller-font-size);\n      line-height: var(--base-line-height);\n      margin: 0;\n      @include line-clamp(\n        3,\n        var(--base-line-height),\n        var(--background-primary)\n      );\n\n      @media (min-width: $screen-md) {\n        min-height: calc(3em * var(--base-line-height));\n      }\n    }\n  }\n}\n","@mixin fade-in() {\n  animation: fade-in 0.5s ease-out;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@mixin line-clamp($lines, $line-height, $background-color) {\n  max-height: calc(1em * $lines * $line-height);\n  overflow: hidden;\n  position: relative;\n\n  &::after {\n    background: $background-color;\n    content: \"\";\n    display: block;\n    height: calc(1em * $line-height);\n    mask-image: linear-gradient(to right, transparent, #000 75%);\n    pointer-events: none;\n    position: absolute;\n    right: 0;\n    top: calc(1em * ($lines - 1) * $line-height);\n    width: 20ch;\n  }\n\n  &:dir(rtl) {\n    &::after {\n      left: 0;\n      mask-image: linear-gradient(to left, transparent, #000 75%);\n      right: initial;\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.latest-news {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 52rem;\n  padding: 0 1rem;\n  width: 100%;\n\n  @media (min-width: $screen-xl) {\n    padding: 0;\n  }\n\n  h2 {\n    font: var(--type-heading-h4);\n    margin-top: 1rem;\n  }\n\n  h5 {\n    margin: 0;\n  }\n\n  .news-item {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 0.7rem;\n\n    @media (min-width: $screen-md) {\n      flex-direction: revert;\n    }\n\n    &:nth-child(odd) {\n      background: var(--background-secondary);\n      border-radius: var(--elem-radius);\n    }\n\n    .news-date {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      line-height: 175%;\n    }\n  }\n\n  .news-title {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    line-height: var(--base-line-height);\n    margin: 0;\n\n    a {\n      color: var(--text-primary);\n\n      &:hover {\n        color: var(--text-primary);\n        text-decoration: underline;\n      }\n    }\n\n    .news-source {\n      color: var(--text-secondary);\n      font-size: var(--type-tiny-font-size);\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.recent-contributions {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 52rem;\n  padding: 0 1rem;\n  width: 100%;\n\n  @media (min-width: $screen-xl) {\n    padding: 0;\n  }\n\n  h2 {\n    font: var(--type-heading-h4);\n    margin-top: 1rem;\n  }\n\n  h5 {\n    margin: 0;\n  }\n\n  .request-item {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 0.7rem;\n\n    @media (min-width: $screen-md) {\n      flex-direction: revert;\n    }\n\n    &:nth-child(odd) {\n      background: var(--background-secondary);\n      border-radius: var(--elem-radius);\n    }\n\n    .request-date {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      line-height: 175%;\n    }\n  }\n\n  .request-title {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    line-height: var(--base-line-height);\n    margin: 0;\n    overflow-wrap: break-word;\n\n    a {\n      color: var(--text-primary);\n\n      &:hover {\n        color: var(--text-primary);\n      }\n    }\n\n    .request-repo {\n      color: var(--text-secondary);\n      font-size: var(--type-tiny-font-size);\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.contributor-spotlight {\n  align-items: center;\n  color: var(--text-primary);\n  display: flex;\n  flex-direction: column;\n  padding: 2rem 1rem;\n  position: relative;\n  width: 100%;\n\n  blockquote {\n    border: 0;\n    display: flex;\n    font-style: italic;\n    font-variation-settings: \"slnt\" -10;\n    margin: 0;\n    padding: 0;\n\n    .icon {\n      margin-right: 0.5rem;\n      margin-top: 0.25rem;\n    }\n  }\n\n  h4 {\n    font-family: var(--font-body);\n    font-size: var(--type-smaller-font-size);\n  }\n\n  .text-col {\n    align-items: center;\n    border-radius: 0.3rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    max-width: 52rem;\n    width: 100%;\n\n    h3 {\n      font-size: var(--type-heading-h5-font-size);\n    }\n  }\n\n  .spotlight-cta {\n    --button-bg: var(--text-link);\n    --button-border-color: #{$mdn-color-neutral-90};\n    --button-color: var(--mdn-color-black);\n    --button-radius: 10rem;\n    --button-padding: 1rem;\n    --button-primary-hover: #{$mdn-color-neutral-60};\n    width: fit-content;\n  }\n\n  .wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n    max-width: 52rem;\n    padding: 2rem 1rem;\n    width: 100%;\n  }\n\n  .contributor-graphic {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    width: 50%;\n    word-break: break-word;\n\n    img {\n      height: max-content;\n      max-width: 90%;\n    }\n  }\n\n  .contributor-name {\n    background-color: var(--mdn-color-white);\n    color: var(--mdn-color-black);\n    // note: this deviates from var(--type-heading-h4-font-size),\n    // as it uses the body font family.\n    font-size: 1.5rem;\n    font-weight: 650;\n    line-height: 1.4;\n    text-transform: uppercase;\n    width: fit-content;\n\n    &::after,\n    &::before {\n      content: \" \";\n    }\n\n    &:link,\n    &:visited {\n      color: var(--mdn-color-black);\n      text-decoration: none;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: underline;\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    .wrapper {\n      align-items: initial;\n      flex-direction: row;\n    }\n\n    .text-col {\n      align-items: initial;\n      text-align: left;\n    }\n  }\n\n  .mandala-container {\n    --mandala-primary: var(--border-primary);\n    background: rgba(1, 1, 1, 0.9);\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: -1;\n\n    .mandala-translate {\n      transform: translate(-5rem, -0);\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\nsection.place {\n  display: flex;\n  margin: 1rem 0;\n\n  a:not(.button),\n  a {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n\n  a.pong-note {\n    background-color: #f9f9fbd0;\n    border: 1px solid #313131;\n    border-radius: 0.25rem;\n    color: #313131;\n    font-size: 0.625rem;\n    opacity: 0.85;\n    padding: 0 0.25rem;\n    text-decoration: underline;\n    text-transform: uppercase;\n    width: max-content;\n\n    &:focus,\n    &:hover {\n      opacity: unset;\n      text-decoration: none;\n    }\n  }\n\n  .pong-box2 {\n    --place-new-side-background-light: #111;\n    --place-new-side-color-light: #fff;\n\n    --place-new-side-background-dark: #111;\n    --place-new-side-color-dark: #fff;\n\n    --place-new-side-background: var(--place-new-side-background-light);\n    --place-new-side-color: var(--place-new-side-color-light);\n\n    --border-radius: 0.5rem;\n    border: 1px solid var(--border-primary);\n    border-radius: var(--border-radius);\n    height: 100%;\n    margin: 0;\n    min-height: 20rem;\n    overflow: hidden;\n    position: relative;\n    width: 11rem;\n\n    @media (prefers-color-scheme: dark) {\n      --place-new-side-background: var(--place-new-side-background-dark);\n      --place-new-side-color: var(--place-new-side-color-dark);\n    }\n\n    .pong-note {\n      margin: 0.25rem;\n      position: absolute;\n      right: 0;\n      top: 0;\n\n      &:hover {\n        opacity: unset;\n        text-decoration: none;\n      }\n    }\n\n    .pong {\n      height: 100%;\n      padding: 0;\n      width: 100%;\n\n      > img {\n        height: auto;\n        width: 100%;\n      }\n\n      > div.content {\n        background: linear-gradient(\n          to top,\n          var(--place-new-side-background) 9rem,\n          transparent 12rem,\n          transparent\n        );\n        border-radius: var(--border-radius);\n        color: var(--place-new-side-color);\n        display: flex;\n        flex-direction: column;\n        gap: 0.25rem;\n        height: 100%;\n        justify-content: end;\n        position: absolute;\n        top: 0;\n        width: 100%;\n\n        strong {\n          font-size: 0.8875rem;\n          line-height: 1.25;\n          padding: 0 1rem;\n        }\n\n        span {\n          font-size: 0.75rem;\n          line-height: 1.25;\n          padding: 0 1rem;\n        }\n\n        .pong-cta {\n          --color: var(--place-new-side-color);\n          --icon-primary: var(--color);\n          background-color: #fff1;\n          border: solid 2px;\n          border-radius: 2rem;\n          color: var(--color);\n          font-size: 0.75rem;\n          font-weight: 600;\n          margin: 0.5rem auto 1rem 1rem;\n          padding: 0.5em 1em;\n          transition: all 0.3s ease-in-out;\n\n          &::after {\n            transition: all 0.3s ease-in-out;\n          }\n\n          &:hover {\n            --color: var(--place-new-side-background);\n            background-color: var(--place-new-side-color);\n          }\n        }\n      }\n    }\n  }\n\n  .pong-box {\n    background-color: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    margin: 0 0 0.125rem;\n    padding: 0;\n    width: 10rem;\n\n    .pong {\n      align-items: center;\n      display: flex;\n      flex-direction: column;\n      padding: 0.825rem;\n\n      img {\n        margin: 0;\n        max-height: 6.25rem;\n        width: 8.125rem;\n      }\n\n      span {\n        color: var(--text-secondary);\n        font-size: 0.75rem;\n        padding: 0.5rem;\n      }\n    }\n  }\n\n  .no-pong {\n    color: var(--text-secondary);\n    font-size: 0.6rem;\n    margin-bottom: 0.5rem;\n    max-width: 12rem;\n    padding: 0;\n    width: 100%;\n\n    &:focus,\n    &:hover {\n      opacity: unset;\n      text-decoration: none;\n    }\n  }\n\n  &.side {\n    flex-direction: column;\n    height: fit-content;\n    max-width: 12rem;\n    min-height: 20rem;\n  }\n\n  &.new-side {\n    height: fit-content;\n    min-height: 22rem;\n  }\n\n  &.top {\n    align-items: center;\n    display: grid;\n    font-size: 0.625rem;\n\n    grid-template-areas: \"pong cta\" \"no note\";\n    height: var(--top-banner-height);\n    margin: 0 auto;\n    width: 100%;\n\n    @media (min-width: $screen-md) {\n      grid-template-areas: \"pong cta note\" \"pong cta no\";\n      grid-template-columns: fit-content(100%) auto fit-content(100%);\n    }\n\n    .pong-box {\n      border: none;\n      display: contents;\n      width: 100%;\n\n      .pong {\n        color: var(--place-top-color);\n        flex-direction: row;\n        grid-area: pong;\n        padding: 0.125rem;\n        text-decoration: none;\n\n        img {\n          height: var(--top-banner-inner-height);\n          max-height: var(--top-banner-inner-height);\n          width: auto;\n        }\n\n        span {\n          color: var(--place-top-color);\n          max-height: var(--top-banner-inner-height);\n          overflow: auto;\n          padding: 0 1rem;\n        }\n      }\n\n      .pong-cta {\n        background-color: var(--place-top-cta-background);\n        border-radius: var(--elem-radius);\n        color: var(--place-top-cta-color);\n        font-size: var(--type-smaller-font-size);\n        grid-area: cta;\n        height: fit-content;\n        margin-right: auto;\n        padding: 0.25rem 1rem;\n        text-align: center;\n      }\n\n      .pong-note {\n        grid-area: note;\n        margin: 0.25rem 0 auto auto;\n      }\n    }\n\n    .no-pong {\n      color: var(--place-top-color);\n      grid-area: no;\n      margin: auto 0 0 2rem;\n      width: initial;\n    }\n  }\n\n  html[data-nop] & {\n    display: none;\n  }\n}\n\n.dark section.place .pong-box2 {\n  --place-new-side-background: var(--place-new-side-background-dark);\n  --place-new-side-color: var(--place-new-side-color-dark);\n}\n\nsection.place.hp-main,\nsection.place.bottom-banner {\n  background-color: var(--place-hp-main-background);\n  display: grid;\n  grid-template-areas: \"left place right\";\n  grid-template-columns: auto min(var(--place-banner-width), 100vw) auto;\n  margin: 0;\n  width: 100%;\n\n  a.pong {\n    display: flex;\n    grid-area: place;\n    grid-column: 1/4;\n    justify-content: center;\n\n    img {\n      height: auto;\n    }\n  }\n\n  .pong-note {\n    grid-area: place;\n    grid-column: 2;\n    margin: 0.5rem 0.5rem auto auto;\n  }\n}\n\n.top-banner {\n  --place-top-background-light: var(--background-secondary);\n  --place-top-color-light: var(--text-primary);\n  --place-top-cta-background-light: var(--text-primary);\n  --place-top-cta-color-light: var(--background-secondary);\n\n  --place-top-background-dark: var(--background-secondary);\n  --place-top-color-dark: var(--text-primary);\n  --place-top-cta-background-dark: var(--text-primary);\n  --place-top-cta-color-dark: var(--background-secondary);\n\n  --place-top-background: var(--place-top-background-light);\n  --place-top-color: var(--place-top-color-light);\n  --place-top-cta-background: var(--place-top-cta-background-light);\n  --place-top-cta-color: var(--place-top-cta-color-light);\n\n  background-color: var(--place-top-background);\n  border-bottom: 1px solid var(--border-primary);\n  height: var(--top-banner-height);\n\n  @media (prefers-color-scheme: dark) {\n    --place-top-background: var(--place-top-background-dark);\n    --place-top-color: var(--place-top-color-dark);\n    --place-top-cta-background: var(--place-top-cta-background-dark);\n    --place-top-cta-color: var(--place-top-cta-color-dark);\n  }\n\n  &.fallback {\n    position: initial;\n  }\n\n  @media (max-width: #{$screen-md - 1}) {\n    display: none;\n  }\n\n  .fallback-copy {\n    font-size: 1rem;\n    grid-column: 1/4;\n    line-height: var(--top-banner-height);\n    margin: 0 auto;\n\n    a:not(.button) {\n      color: var(--apis-accent-color);\n\n      &:hover,\n      &:focus {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  html[data-nop] & {\n    display: none;\n  }\n}\n\ndiv.empty-place {\n  &.bottom-banner {\n    height: 152px;\n    position: absolute;\n    width: 1px;\n  }\n}\n\n.dark .top-banner {\n  --place-top-background: var(--place-top-background-dark);\n  --place-top-color: var(--place-top-color-dark);\n  --place-top-cta-background: var(--place-top-cta-background-dark);\n  --place-top-cta-color: var(--place-top-cta-color-dark);\n}\n\n.bottom-banner-container {\n  background-color: var(\n    --place-bottom-banner-background,\n    var(--background-primary)\n  );\n  color: var(--place-bottom-banner-color, var(--text-primary));\n  margin: 0;\n  width: 100%;\n\n  > section.place.bottom-banner {\n    column-gap: 3rem;\n    display: grid;\n    grid-template-areas:\n      \"nope pong note\"\n      \"nope pong no\";\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);\n    margin: 0 auto;\n    max-width: var(--max-width);\n    padding: 0 1rem;\n\n    .pong {\n      grid-area: pong;\n      justify-self: center;\n\n      img {\n        height: auto;\n      }\n    }\n\n    .pong-note {\n      color: var(--place-bottom-banner-color, var(--text-primary));\n      font-size: 0.625rem;\n      grid-area: note;\n      margin-top: 0.5rem;\n    }\n\n    .no-pong {\n      color: var(--place-bottom-banner-color, var(--text-primary));\n      font-size: 0.625rem;\n      grid-area: no;\n      margin-top: auto;\n    }\n\n    @media (max-width: $screen-xl) {\n      grid-template-areas:\n        \"pong note\"\n        \"pong no\";\n      grid-template-columns: auto max-content;\n      grid-template-rows: auto 2rem;\n    }\n\n    @media (max-width: $screen-lg) {\n      grid-template-areas:\n        \"pong pong\"\n        \"note no\";\n      grid-template-columns: 1fr 1fr;\n      grid-template-rows: auto 2rem;\n\n      .no-pong {\n        justify-self: end;\n        width: fit-content;\n      }\n    }\n  }\n}\n\n@media (min-width: 25rem) {\n  .place.horizontal {\n    align-self: flex-end;\n    max-width: 20rem;\n    min-height: 10rem;\n\n    .pong-box2,\n    .pong-box {\n      width: 100%;\n\n      .pong {\n        flex-direction: row;\n      }\n\n      .pong-note {\n        margin-top: 0;\n      }\n    }\n\n    &.new-side {\n      height: 12rem;\n      max-width: 30rem;\n      min-height: 12rem;\n\n      .pong-box2 {\n        height: 21rem;\n        min-height: 0;\n        width: 25rem;\n\n        .pong-cta {\n          margin: 0.5rem auto 1rem 1rem;\n        }\n\n        .pong-note {\n          margin: 0.5rem 0.5rem auto auto;\n        }\n\n        .pong {\n          > img {\n            height: 100%;\n            position: absolute;\n            width: auto;\n            z-index: 1;\n          }\n\n          > div.content {\n            align-items: end;\n            background: var(--place-new-side-background);\n            flex-direction: column;\n            height: 100%;\n            justify-content: end;\n            padding-left: 10rem;\n            width: 100%;\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../vars.scss\" as *;\n\n.toast {\n  --toast-bg: var(--text-primary);\n  --toast-color: var(--background-primary);\n  background: var(--toast-bg);\n  border-radius: var(--elem-radius);\n  bottom: 1rem;\n  box-shadow: var(--shadow-02);\n  display: flex;\n  gap: 0.5rem;\n  left: 50%;\n  max-width: 680px;\n  padding: 1rem 1rem 1rem 2rem;\n\n  position: fixed;\n  transform: translate(-50%, 0);\n  width: 90vw;\n\n  &-content {\n    color: var(--toast-color);\n    margin-right: auto;\n  }\n\n  .button.action {\n    --button-color: var(--toast-color);\n    white-space: nowrap;\n\n    &:hover {\n      --button-bg: rgba(58, 57, 68, 0.3);\n      --button-border-color: transparent;\n    }\n  }\n\n  &.is-important {\n    --toast-bg: var(--accent-secondary);\n    --toast-color: #fff;\n  }\n\n  &-verbose-text {\n    display: none;\n  }\n\n  @media (min-width: $screen-md) {\n    &-verbose-text {\n      display: inline;\n    }\n\n    &-short-text {\n      display: none;\n    }\n  }\n}\n",".container {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: var(--max-width);\n  padding-left: var(--gutter);\n  padding-right: var(--gutter);\n  width: 100%;\n}\n","@use \"../../vars\" as *;\n\n.logo {\n  align-items: center;\n  display: flex;\n  // Width of largest logo (\"mdn web docs\").\n  width: 160px;\n\n  svg {\n    height: 1.5rem;\n    margin-top: 0.3rem;\n  }\n\n  .logo-m,\n  .logo-_ {\n    fill: var(--text-link);\n  }\n\n  .logo-text {\n    fill: var(--text-primary);\n  }\n}\n","@use \"../../vars\" as *;\n\n.auth-container {\n  .login-link {\n    align-items: center;\n    display: inline-flex;\n    font-weight: var(--font-body-strong-weight);\n    height: 2rem;\n    text-align: center;\n\n    &:link,\n    &:visited {\n      color: var(--text-secondary);\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.mdn-plus-subscribe-link {\n  --button-padding: 1rem;\n\n  margin: 0 auto;\n  max-width: 150px;\n  text-align: center;\n  white-space: nowrap;\n}\n","@use \"../../vars\" as *;\n\n.auth-container {\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  flex-wrap: nowrap;\n  font-family: var(--font-body);\n  font-size: var(--type-smaller-font-size);\n  font-weight: var(--font-body-strong-weight);\n  gap: 1rem;\n  list-style: none;\n  padding: 0;\n\n  li {\n    flex-shrink: 0;\n  }\n}\n\n.top-navigation-main {\n  .auth-container {\n    @media (max-width: #{$screen-lg - 1}) {\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 1rem;\n      text-align: center;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n@use \"../../base/typography\" as *;\n\n@mixin not-inline-submenu {\n  background-color: var(--background-secondary);\n  border: 1px solid var(--border-primary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-02);\n  max-width: 25rem;\n  padding: 0.5rem;\n  position: absolute;\n  top: calc(100% + 4px);\n  width: max-content;\n  z-index: var(--z-index-mid);\n\n  @at-root .main-menu & {\n    background-color: var(--background-primary);\n  }\n\n  .submenu-item {\n    border-radius: var(--elem-radius);\n    padding: 0.75rem;\n  }\n\n  /*\n      Creates a space between the top-level menu and the submenu that\n      keeps the menu open when the cursor moves to the menu\n    */\n  &:before {\n    content: \"\";\n    display: block;\n    height: 8px;\n    left: 0;\n    position: absolute;\n    top: -8px;\n    width: 100%;\n  }\n}\n\n.submenu {\n  background-color: var(--background-primary);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    width: 100%;\n  }\n\n  li > a,\n  .submenu-item {\n    align-items: center;\n    border: 1px solid transparent;\n    color: var(--text-primary);\n    display: flex;\n    height: 100%;\n    padding: 0.5rem;\n    width: 100%;\n\n    li:last-child &:not(:focus) {\n      border-bottom-color: transparent;\n    }\n\n    &:hover {\n      background-color: var(--border-secondary);\n      text-decoration: none;\n    }\n\n    @at-root .main-menu &:hover {\n      background-color: var(--background-secondary);\n    }\n\n    &:focus {\n      border: 1px solid var(--button-secondary-border-focus);\n      box-shadow: var(--button-focus-effect);\n    }\n\n    .icon {\n      margin-right: 0.5rem;\n    }\n  }\n\n  &.inline-submenu-lg {\n    @media (min-width: $screen-lg) {\n      @include not-inline-submenu();\n    }\n  }\n\n  &:not(.inline-submenu-lg) {\n    @media (min-width: $screen-md) {\n      @include not-inline-submenu();\n    }\n  }\n}\n\n.submenu-header {\n  display: block;\n  padding: 1rem;\n\n  .submenu-item {\n    padding: 0;\n  }\n\n  .submenu-item:hover {\n    background: none;\n  }\n\n  @media (min-width: $screen-md) {\n    border-bottom: 1px solid var(--border-primary);\n  }\n}\n\n.submenu-icon {\n  background-color: var(--icon-primary);\n  height: 2rem;\n  margin-right: 0.75rem;\n  position: relative;\n  width: 0.2rem;\n}\n\n.submenu-item-heading,\n.submenu-item {\n  font-size: var(--type-smaller-font-size);\n\n  @media (min-width: $screen-md) {\n    // If there is sub-text associated with this heading, make it bold.\n    &:not(:only-child) {\n      font-weight: var(--font-body-strong-weight);\n    }\n  }\n}\n\n.submenu-item-description {\n  display: none;\n\n  @media (min-width: $screen-md) {\n    display: block;\n    font-size: var(--type-tiny-font-size);\n    margin: 0.25rem 0 0;\n  }\n}\n\n.submenu-item-subtext {\n  font-weight: var(--font-body-strong-weight);\n}\n\n.submenu-item-dot ~ .submenu-content-container > .submenu-item-heading::after {\n  background: var(--text-primary-blue);\n  border: 1px solid var(--background-primary);\n  border-radius: 2rem;\n  content: \"\";\n  display: inline-block;\n  height: 0.5rem;\n  margin-left: 0.5rem;\n  width: 0.5rem;\n}\n\n.active-menu-item {\n  background-color: var(--background-primary);\n  border-color: var(--border-secondary);\n}\n",".top-level-entry-container {\n  &.active > a {\n    &:link,\n    &:visited {\n      color: var(--text-active);\n    }\n\n    &:hover,\n    &:active {\n      color: var(--category-color);\n    }\n  }\n\n  .top-level-entry-dot ~ .top-level-entry::after {\n    background: var(--text-primary-blue);\n    border: 1px solid var(--background-primary);\n    border-radius: 2rem;\n    content: \"\";\n    height: 0.5rem;\n    position: absolute;\n    right: 0;\n    top: 0.5rem;\n    width: 0.5rem;\n  }\n}\n","@use \"sass:color\";\n@use \"../../vars\" as *;\n\n.learn {\n  .submenu .submenu-item-heading {\n    font-size: var(--type-smaller-font-size);\n    font-weight: initial;\n  }\n\n  .desktop-only {\n    display: none;\n  }\n\n  @media (min-width: $screen-lg) {\n    .desktop-only {\n      display: inherit;\n    }\n\n    .mobile-only {\n      display: none;\n    }\n  }\n}\n","@use \"sass:color\";\n@use \"../../vars\" as *;\n\n.references {\n  .desktop-only {\n    display: none;\n  }\n\n  @media (min-width: $screen-lg) {\n    .desktop-only {\n      display: inherit;\n    }\n\n    .mobile-only {\n      display: none;\n    }\n  }\n}\n\n.html-link-container {\n  a:hover,\n  a:focus {\n    .submenu-icon {\n      &.html {\n        background: var(--html-accent-color) !important;\n      }\n    }\n  }\n}\n\n.css-link-container {\n  a:hover,\n  a:focus {\n    .submenu-icon {\n      &.css {\n        background-color: var(--css-accent-color) !important;\n      }\n    }\n  }\n}\n\n.javascript-link-container {\n  a:hover,\n  a:focus {\n    .submenu-icon {\n      &.javascript {\n        background-color: var(--js-accent-color) !important;\n      }\n    }\n  }\n}\n\n.http-link-container {\n  a:hover,\n  a:focus {\n    .submenu-icon {\n      &.http {\n        background-color: var(--http-accent-color) !important;\n      }\n    }\n  }\n}\n\n.apis-link-container {\n  a:hover,\n  a:focus {\n    .submenu-icon {\n      &.apis {\n        background-color: var(--apis-accent-color) !important;\n      }\n    }\n  }\n}\n\n.learn-link-container {\n  a:hover,\n  a:focus {\n    .submenu-icon {\n      &.learn {\n        background-color: var(--learn-accent-color) !important;\n      }\n    }\n  }\n}\n\n.submenu-icon {\n  &.html {\n    background-color: var(--html-accent-engage);\n  }\n\n  &.css {\n    background-color: var(--css-accent-engage);\n  }\n\n  &.javascript {\n    background-color: var(--js-accent-engage);\n  }\n\n  &.http {\n    background-color: var(--http-accent-engage);\n  }\n\n  &.apis {\n    background-color: var(--apis-accent-engage);\n  }\n\n  &.learn {\n    background-color: var(--learn-accent-engage);\n  }\n}\n","@use \"sass:color\";\n@use \"../../vars\" as *;\n\n.mdn-plus {\n  .submenu-icon {\n    background-color: var(--plus-accent-color);\n  }\n\n  .note {\n    background-color: var(--background-information);\n\n    .submenu-item-description {\n      display: block;\n      margin: 0.125rem;\n    }\n  }\n\n  @media (min-width: $screen-lg) {\n    .mobile-only {\n      display: none;\n    }\n  }\n}\n","@use \"sass:color\";\n\n@use \"../../vars\" as *;\n\nul.main-menu {\n  box-sizing: border-box;\n  list-style: none;\n  margin-top: 1rem;\n  padding: 0;\n  width: 100%;\n\n  &.show {\n    display: block;\n\n    @media (min-width: $screen-lg) {\n      display: flex;\n    }\n  }\n\n  @media (min-width: $screen-lg) {\n    align-items: center;\n    display: flex;\n    justify-content: space-around;\n    margin: 0 auto 0 0;\n\n    li:last-child {\n      flex-basis: inherit;\n    }\n\n    .submenu.show {\n      display: none;\n    }\n\n    .menu-toggle {\n      display: none;\n    }\n\n    .top-level-entry-container {\n      flex-shrink: 0;\n    }\n  }\n\n  @media (min-width: ($screen-xl)) {\n    gap: 1rem;\n  }\n}\n\n/* Enable hover interaction if javascript is not available */\n@media (min-width: $screen-lg) {\n  ul.main-menu .submenu {\n    display: none;\n  }\n\n  ul.main-menu .top-level-entry-container {\n    &:hover,\n    &:focus-within {\n      .submenu {\n        display: block;\n      }\n    }\n  }\n\n  // This allows keyboard nav to work more predictably on desktop dropdowns.\n  .open-on-focus-within {\n    &:focus-within {\n      .watch-submenu {\n        display: flex;\n      }\n\n      .submenu {\n        display: block;\n      }\n    }\n\n    .submenu,\n    .watch-submenu {\n      display: none;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n@media screen and (min-width: $screen-lg) {\n  #tools-button {\n    display: flex;\n\n    &::after {\n      display: none;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.avatar {\n  border-radius: 50%;\n\n  &-wrap {\n    border-radius: 50%;\n    height: 32px;\n    /* pull the avatar into the space on the left\n       introduced by the border */\n    margin-left: -7px;\n    margin-right: 0.1rem;\n    position: relative;\n    width: 32px;\n\n    /*\n    &.is-subscriber {\n      padding: 2px;\n      background: radial-gradient(\n        circle,\n        white 55%,\n        var(--background-mark-yellow) 55%\n      );\n    }\n    */\n  }\n\n  @media (min-width: $screen-md) {\n    margin: initial;\n  }\n}\n","@use \"../../vars\" as *;\n\n.signout-form {\n  padding: 0.5rem;\n\n  @media (min-width: $screen-md) {\n    border-top: 1px solid var(--border-primary);\n  }\n}\n\nbutton.signout-button {\n  width: 100%;\n\n  &:hover,\n  &:focus {\n    background-color: var(--background-secondary);\n  }\n}\n","@use \"../../vars\" as *;\n\n.user-menu {\n  position: relative;\n\n  .submenu-header {\n    display: none;\n  }\n\n  .button.user-menu-toggle {\n    .dot ~ .avatar-wrap::after {\n      background: var(--text-primary-blue);\n      border: 1px solid var(--background-primary);\n      border-radius: 2rem;\n      content: \"\";\n      height: 0.5rem;\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 0.5rem;\n    }\n  }\n\n  @media (max-width: $screen-lg) {\n    .user-menu-toggle:hover {\n      --button-bg: transparent;\n    }\n  }\n\n  @media (min-width: $screen-lg) {\n    /*\n      The user menu button is shaped like an avatar and thus has some\n      very specific focus and hover states.\n    */\n    .button.user-menu-toggle {\n      &:hover,\n      &:focus {\n        &,\n        .button-wrap {\n          background: transparent;\n          border-color: transparent;\n          box-shadow: none;\n        }\n      }\n\n      &:focus {\n        .avatar {\n          border: 1px solid var(--button-secondary-border-focus);\n          box-shadow: var(--focus-effect);\n        }\n      }\n\n      &::after {\n        display: none;\n      }\n    }\n\n    .submenu-header {\n      display: block;\n      margin-bottom: 0.5rem;\n      padding: 0 0 0.5rem;\n    }\n\n    .submenu-item {\n      padding: 0.5rem;\n    }\n\n    .signout-container {\n      margin-top: 0.5rem;\n    }\n\n    .user-menu-id {\n      display: none;\n    }\n\n    .submenu {\n      left: initial;\n      max-width: max-content;\n      right: 0;\n    }\n  }\n}\n",".dropdown {\n  position: relative;\n\n  &-list {\n    background: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    border-radius: var(--elem-radius);\n    box-shadow: var(--shadow-01);\n    left: 0;\n    padding: 0.5rem;\n    position: absolute;\n    top: calc(100% + 2px);\n    z-index: var(--z-index-low);\n  }\n\n  &.is-flush-right .dropdown-list {\n    left: auto;\n    right: 0;\n  }\n\n  &-item {\n    .button.action {\n      width: 100%;\n\n      .button-wrap {\n        --button-font: var(--type-smaller-font-size);\n        --button-bg: transparent;\n        justify-content: flex-start;\n        text-align: left;\n        text-transform: none;\n\n        &:hover {\n          --button-bg: var(--button-secondary-hover);\n        }\n      }\n\n      &.active-menu-item {\n        --button-bg: var(--background-primary);\n        --button-border-color: var(--border-secondary);\n      }\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.top-navigation-main {\n  display: none;\n  justify-content: space-between;\n  padding: 0;\n  width: 100%;\n\n  .show-nav & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .auth-container {\n    order: 0;\n  }\n\n  .header-search {\n    order: 1;\n  }\n\n  .main-nav {\n    order: 2;\n  }\n\n  .user-menu {\n    order: 3;\n  }\n\n  .top-level-entry-container {\n    position: relative;\n\n    .submenu {\n      z-index: var(--z-index-nav-menu);\n    }\n  }\n\n  .theme-toggle {\n    align-self: end;\n    margin-bottom: 1.5rem;\n  }\n\n  @media (min-width: $screen-lg) {\n    .theme-toggle {\n      align-self: initial;\n      margin-bottom: initial;\n    }\n  }\n\n  .button.action {\n    &:hover {\n      --button-bg: var(--border-secondary);\n    }\n\n    @at-root .is-transparent &:not(:focus):hover {\n      --button-border-color: transparent;\n    }\n\n    @at-root .is-transparent &:hover {\n      --button-bg: var(--accent-primary-engage);\n    }\n\n    &.search-button:hover {\n      --button-bg: transparent;\n    }\n  }\n\n  .top-level-entry {\n    background: none;\n    border-top: 1px solid var(--border-secondary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    padding: 1rem 0.5rem;\n    text-align: left;\n    width: 100%;\n\n    &:link,\n    &:visited {\n      color: var(--text-secondary);\n    }\n\n    &.menu-toggle {\n      padding: 0.5rem;\n    }\n\n    sup.new {\n      --new-background: var(--text-primary-blue);\n      --new-background-beta: var(--learn-accent-color);\n      --new-color: var(--background-primary);\n      align-self: flex-start;\n    }\n\n    @media (max-width: #{$screen-lg - 1}) {\n      &.button {\n        --button-color: var(--text-secondary);\n        --button-padding: 0;\n        --button-radius: 0;\n\n        .button-wrap {\n          background: none;\n          border: none;\n          gap: 0.5rem;\n          justify-content: flex-start;\n          padding: 0;\n          text-transform: initial;\n        }\n\n        &:focus {\n          --button-focus-effect: none;\n        }\n      }\n\n      &.menu-link {\n        min-height: 53px;\n        padding: 0.5rem;\n      }\n    }\n\n    @media (min-width: $screen-lg) {\n      border-radius: var(--elem-radius);\n      border-top: none;\n      padding: 0.5rem;\n\n      &:hover,\n      &:focus {\n        background-color: var(--category-color-background);\n        color: var(--category-color);\n        text-decoration: none;\n      }\n\n      &.button {\n        padding: 0;\n      }\n    }\n  }\n\n  .menu-toggle {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  .menu-toggle:after {\n    background-color: var(--icon-primary);\n    content: \"\";\n    height: var(--icon-size);\n    margin-left: 0.2em;\n    margin-top: 0.2em;\n\n    mask-image: url(\"../../../assets/icons/chevron.svg\");\n    width: var(--icon-size);\n  }\n\n  .menu-toggle[aria-expanded=\"true\"]::after {\n    transform: rotate(180deg);\n  }\n\n  .menu-toggle + .top-level-entry {\n    display: none;\n  }\n\n  @media (min-width: $screen-lg) {\n    align-items: center;\n    display: flex;\n    flex: 1;\n    flex-direction: row;\n    gap: 0.5rem;\n    left: inherit;\n    padding: 0;\n    position: initial;\n    top: inherit;\n    z-index: inherit;\n\n    .show-nav & {\n      flex-direction: row;\n    }\n\n    .main-nav {\n      margin-right: auto;\n      order: 0;\n      width: max-content;\n    }\n\n    .header-search {\n      order: 1;\n    }\n\n    .auth-container {\n      order: 2;\n    }\n\n    .user-menu {\n      order: 3;\n    }\n\n    .menu-toggle + .top-level-entry {\n      display: inline-flex;\n    }\n  }\n}\n","@use \"sass:color\";\n\n@use \"../../vars\" as *;\n\n.theme-switcher-menu {\n  margin-bottom: 0.5rem;\n\n  .button.action > .button-wrap {\n    text-transform: none;\n  }\n\n  .themes-menu .button.button {\n    --button-bg: transparent;\n    --button-border-color: var(--button-bg);\n    --button-color: var(--text-primary);\n    border-bottom-width: 0;\n    font-size: var(--type-smaller-font-size);\n    width: 100%;\n\n    .button-wrap {\n      border-width: 1px;\n      font-weight: 400;\n      justify-content: flex-start;\n      padding: 1rem;\n    }\n\n    &:focus {\n      --button-border-color: var(--button-secondary-border-focus);\n    }\n\n    &:hover {\n      --button-bg: var(--border-secondary);\n    }\n  }\n\n  .active-menu-item,\n  .active-menu-item:hover {\n    .button-wrap {\n      --button-bg: var(--background-primary);\n      --button-border-color: var(--border-secondary);\n    }\n  }\n\n  .active-menu-item:focus .button-wrap {\n    --button-border-color: var(--button-secondary-border-focus);\n  }\n\n  @media (min-width: $screen-md) {\n    border-bottom: 0;\n    margin-bottom: 0;\n\n    .themes-menu {\n      top: calc(100% - 1rem);\n    }\n\n    .themes-menu.show {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      max-width: max-content;\n      min-width: 130px;\n    }\n\n    .themes-menu .submenu-item {\n      padding: 0.5rem 1rem;\n    }\n  }\n}\n\n.theme-switcher-menu,\n.languages-switcher-menu {\n  > .button {\n    display: block;\n\n    .button-wrap:after {\n      background-color: var(--icon-secondary);\n      content: \"\";\n      display: block;\n      height: 16px;\n      margin-left: auto;\n      mask-image: url(\"../../../assets/icons/chevron.svg\");\n      mask-size: 16px;\n      width: 16px;\n    }\n\n    &[aria-expanded=\"true\"] {\n      .button-wrap:after {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  @media (min-width: $screen-lg) {\n    > .button {\n      .button-wrap:after {\n        content: unset;\n      }\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.maintenance {\n  color: var(--text-primary);\n  cursor: help;\n  flex-flow: column;\n\n  .maintenance-info-container {\n    cursor: default;\n    display: block;\n    margin: 0 1rem;\n    top: 2rem;\n    @media (min-width: $screen-lg) {\n      padding-top: 1rem;\n      position: absolute;\n    }\n\n    .maintenance-info {\n      background-color: var(--background-primary);\n      border: 1px solid var(--border-primary);\n      border-radius: var(--elem-radius);\n      font-weight: initial;\n      padding: 1rem;\n    }\n  }\n  @media (min-width: $screen-lg) {\n    &:not(:focus-within):not(:hover) {\n      .maintenance-info-container {\n        border: 0 !important;\n        clip: rect(1px, 1px, 1px, 1px) !important;\n        -webkit-clip-path: inset(50%) !important;\n        clip-path: inset(50%) !important;\n        height: 1px !important;\n        margin: -1px !important;\n        overflow: hidden !important;\n        padding: 0 !important;\n        position: absolute !important;\n        white-space: nowrap !important;\n        width: 1px !important;\n      }\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.top-navigation {\n  background-color: var(--background-primary);\n  border-bottom: 1px solid var(--border-primary);\n  position: relative;\n  width: 100%;\n\n  .container {\n    align-items: center;\n    background-color: var(--background-primary);\n    display: flex;\n    flex-flow: row wrap;\n    gap: var(--gutter);\n\n    @media (min-width: $screen-md) {\n      background-color: transparent;\n    }\n  }\n\n  &.is-transparent {\n    background-color: transparent;\n  }\n\n  /* Wrapper strictly used for containing the logo and menu toggle */\n  .top-navigation-wrap {\n    align-items: center;\n    display: flex;\n    flex: 1;\n    height: var(--top-nav-height);\n    justify-content: space-between;\n  }\n\n  &.show-nav {\n    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);\n\n    .container {\n      height: auto;\n    }\n  }\n}\n\n@media (min-width: $screen-lg) {\n  .main-menu-toggle {\n    display: none;\n  }\n\n  .top-navigation .top-navigation-wrap {\n    flex: 0;\n  }\n}\n","@use \"../../vars\" as *;\n\n.breadcrumbs-container {\n  align-items: center;\n  display: flex;\n  margin-right: auto;\n\n  ol {\n    display: flex;\n    flex-wrap: wrap;\n    line-height: 1.2;\n    padding: 0.25rem 0;\n    row-gap: 0.25rem;\n  }\n\n  li {\n    display: none;\n    hyphens: auto;\n\n    // only show last two items on mobile\n    &:nth-last-child(-n + 2) {\n      display: inline-flex;\n    }\n\n    .breadcrumb {\n      &::after {\n        background-color: var(--icon-secondary);\n        content: \"\";\n        display: block;\n        flex-shrink: 0;\n        height: 12px;\n        margin-right: 0.5rem;\n        mask-image: url(\"../../../assets/icons/chevron.svg\");\n        mask-size: 12px;\n        transform: rotate(-90deg);\n        width: 12px;\n      }\n    }\n\n    a {\n      align-items: center;\n      display: flex;\n\n      &:link,\n      &:visited {\n        color: var(--text-secondary);\n      }\n\n      &:hover {\n        text-decoration: underline;\n      }\n\n      &:focus-visible {\n        outline: 0;\n\n        [property=\"name\"] {\n          outline-color: var(--accent-primary);\n          outline-offset: 1px;\n          outline-style: auto;\n        }\n      }\n    }\n\n    [property=\"name\"] {\n      display: inline-block;\n      margin-right: 0.5rem;\n    }\n  }\n\n  @media (min-width: $screen-xl) {\n    li {\n      display: inline-flex;\n    }\n  }\n}\n","@use \"../../../../ui/vars\" as *;\n\n.languages-switcher-menu.open-on-focus-within {\n  .submenu {\n    display: block;\n  }\n}\n\n.language-menu {\n  li {\n    &:not(:first-child) {\n      padding-top: 1px;\n    }\n\n    &:not(:last-child) {\n      padding-bottom: 1px;\n    }\n  }\n\n  .submenu-item {\n    // Reduce padding compared to other menus.\n    padding: 0.5rem !important;\n\n    &.locale-redirect-setting {\n      border-bottom: 1px solid var(--border-secondary) !important;\n      border-radius: 0 !important;\n      display: block;\n      font-size: var(--type-tiny-font-size);\n\n      &:hover {\n        background-color: unset;\n      }\n\n      .group {\n        align-items: center;\n        display: flex;\n        gap: 0.5em;\n      }\n\n      .switch {\n        display: flex;\n      }\n\n      .glean-thumbs {\n        font-style: italic;\n        font-variation-settings: \"slnt\" -10;\n        margin-top: 0.5em;\n      }\n\n      .icon {\n        margin-right: unset;\n      }\n\n      a[href] .icon-question-mark {\n        background-color: var(--icon-secondary);\n\n        &:hover {\n          background-color: var(--text-link);\n        }\n      }\n    }\n\n    .icon-experimental {\n      background-color: var(--icon-primary);\n      margin-left: 0.5em;\n      vertical-align: text-top;\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    right: 0;\n  }\n}\n",".glean-thumbs {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5em;\n  height: 1.5em;\n\n  .confirmation {\n    animation-duration: 2.5s;\n    animation-fill-mode: forwards;\n    animation-name: colorHighlight;\n    color: var(--category-color);\n\n    @keyframes colorHighlight {\n      0% {\n        opacity: 0;\n      }\n\n      25% {\n        color: var(--category-color);\n        opacity: 1;\n      }\n\n      75% {\n        color: var(--category-color);\n      }\n\n      100% {\n        color: var(--text-inactive);\n      }\n    }\n  }\n}\n\n.thumbs {\n  &:hover {\n    --button-bg-hover: unset;\n  }\n\n  &:active {\n    --button-bg-active: unset;\n  }\n\n  .icon {\n    background-color: var(--icon-secondary);\n  }\n\n  &:focus,\n  &:hover,\n  &:active {\n    .icon-thumbs-up {\n      background-color: var(--icon-success);\n    }\n\n    .icon-thumbs-down {\n      background-color: var(--icon-critical);\n    }\n  }\n}\n",".switch {\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n\n  input {\n    height: 0;\n    margin: 0;\n    opacity: 0;\n    width: 3em;\n\n    &:checked + .slider {\n      background-color: var(--text-link);\n\n      &:before {\n        left: 53.25%;\n        right: 3.25%;\n      }\n    }\n\n    &:focus-visible + .slider {\n      outline-color: var(--accent-primary);\n      outline-offset: 1px;\n      outline-style: auto;\n    }\n  }\n\n  .slider {\n    background-color: var(--text-secondary);\n    border-radius: 1.5em;\n    cursor: pointer;\n    height: 1.5em;\n    position: absolute;\n    transition: 0.4s;\n    width: 3em;\n\n    &:before {\n      background-color: var(--background-primary);\n      border-radius: 50%;\n      bottom: 7.5%;\n      content: \"\";\n      left: 3.25%;\n      position: absolute;\n      right: 53.25%;\n      top: 7.5%;\n      transition: 0.4s;\n    }\n  }\n\n  .label {\n    margin-left: 0.5em;\n  }\n}\n","@use \"../../vars\" as *;\n\n.article-actions {\n  margin-left: auto;\n\n  .article-actions-dialog-heading {\n    display: none;\n  }\n\n  .button.action .button-wrap {\n    text-transform: initial;\n  }\n\n  .article-actions-toggle {\n    display: block;\n  }\n\n  @media (min-width: $screen-md) {\n    display: block;\n\n    .article-actions-toggle {\n      display: none;\n    }\n  }\n\n  /* Open state, mobile-only */\n  @media (max-width: $screen-md) {\n    &.show-actions {\n      background-color: var(--background-primary);\n      color: var(--text-primary);\n      display: block;\n      height: 100vh;\n      left: 0;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      position: fixed;\n      top: var(--top-navigation-height);\n      width: 100vw;\n      z-index: var(--z-index-low);\n\n      > .button,\n      .article-actions-entries > li > .button,\n      .article-actions-entries > li > div > .button {\n        --button-radius: 0;\n        border-bottom: 1px solid var(--border-secondary);\n        width: 100%;\n\n        .button-wrap {\n          justify-content: flex-start;\n          margin-top: 1px;\n          padding: 1.5rem 1rem;\n        }\n      }\n\n      .article-actions-dialog-heading {\n        display: block;\n      }\n\n      .article-actions-entries {\n        display: block;\n        padding: 1rem;\n      }\n\n      .article-actions-toggle,\n      .article-action-entry {\n        border-bottom: 1px solid var(--border-secondary);\n      }\n\n      .article-actions-entry {\n        display: block;\n      }\n    }\n  }\n}\n\n.article-actions-submenu {\n  --gutter-padding: 1rem;\n  display: none;\n  overflow: auto;\n\n  &.show {\n    background: var(--background-primary);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    position: fixed;\n    right: 0;\n    top: var(--top-navigation-height);\n    z-index: var(--z-index-mid);\n  }\n\n  &.wait {\n    &,\n    * {\n      cursor: wait !important;\n    }\n  }\n\n  .header {\n    border-bottom: 1px solid var(--border-primary);\n    color: var(--text-primary);\n    display: block;\n    font-family: var(--font-body);\n    font-size: var(--type-smaller-font-size);\n    font-weight: var(--font-body-strong-weight);\n    margin: 0;\n    padding: 1rem;\n    text-align: left;\n    width: 100%;\n\n    .header-inner {\n      align-items: center;\n      display: flex;\n      gap: 0.5rem;\n      position: relative;\n    }\n\n    .icon {\n      transform: rotate(90deg);\n    }\n\n    &.desktop-only {\n      display: none;\n    }\n  }\n\n  .mdn-form-item,\n  p {\n    margin: 0;\n    padding: 1rem;\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: 1rem;\n    }\n  }\n\n  .notecard {\n    margin: var(--gutter-padding);\n    margin-bottom: 0;\n\n    &::before {\n      top: 1.37rem;\n    }\n\n    p {\n      margin: 0;\n      padding: 0;\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    &.show {\n      background-color: var(--background-secondary);\n      border: 1px solid var(--border-primary);\n      border-radius: var(--elem-radius);\n      bottom: auto;\n      box-shadow: var(--shadow-02);\n      left: var(--article-actions-position-left, initial);\n      max-height: calc(100vh - 12px - var(--sticky-header-with-actions-height));\n      padding: 0;\n      position: absolute;\n      right: 0;\n      top: calc(100% + 6px);\n      width: 316px;\n      z-index: var(--z-index-mid);\n    }\n\n    .header {\n      display: block;\n      padding: 1rem var(--gutter-padding);\n      text-align: center;\n\n      &-inner {\n        justify-content: center;\n      }\n\n      &.desktop-only {\n        display: block;\n      }\n\n      &.mobile-only {\n        display: none;\n      }\n\n      .icon {\n        left: 0;\n        position: absolute;\n      }\n    }\n  }\n}\n\n.article-actions-entries {\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  @media (min-width: $screen-md) {\n    display: flex;\n    gap: 0.5rem;\n\n    .sidebar-toggle {\n      display: none;\n    }\n  }\n}\n\n.article-actions-entry {\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n","@use \"../../vars\" as *;\n\nbody.ReactModal__Body--open {\n  overflow: hidden;\n}\n\n.modal-overlay {\n  background: var(--background-primary);\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: var(--z-index-modal-overlay);\n\n  &.wait {\n    &,\n    * {\n      cursor: wait !important;\n    }\n  }\n}\n\n.modal-content {\n  background: var(--background-primary);\n  flex-basis: 32.5rem;\n  outline: none;\n  padding: 1.5rem;\n  z-index: var(--z-index-modal-content);\n}\n\n.modal-header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 1.5rem;\n\n  .button.has-icon {\n    --button-color: var(--icon-secondary);\n\n    &:hover {\n      --button-color: var(--icon-primary);\n    }\n\n    .button-wrap {\n      height: auto;\n      margin: -0.5rem;\n      padding: 0.5rem;\n      width: auto;\n    }\n  }\n\n  .icon {\n    height: 1.25rem;\n    margin: 0;\n    width: 1.25rem;\n  }\n}\n\n.modal-heading {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin: 0;\n}\n\n.modal-body {\n  .notecard {\n    margin: 0;\n    margin-bottom: 1rem;\n  }\n\n  p {\n    margin: 0;\n    margin-top: 1rem;\n    overflow-wrap: anywhere;\n\n    &:first-child {\n      margin: 0;\n    }\n  }\n\n  .mdn-form-item {\n    @media (max-width: $screen-lg) {\n      &:last-child {\n        padding-bottom: 1.5rem;\n      }\n    }\n\n    &.is-button-row {\n      flex-direction: row-reverse;\n      flex-wrap: wrap-reverse;\n      gap: 1.5rem;\n      justify-content: flex-start;\n    }\n  }\n\n  button {\n    flex: 1;\n  }\n}\n\n@media (min-width: $screen-lg) {\n  body.ReactModal__Body--open {\n    overflow: unset;\n  }\n\n  .modal-overlay {\n    align-items: center;\n    background-color: rgba(240, 240, 244, 0.66);\n  }\n\n  .modal-content {\n    border-radius: var(--elem-radius);\n    box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);\n    height: fit-content;\n    max-height: 90vh;\n    max-width: 40rem;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    width: 90vw;\n\n    &.is-small {\n      max-width: 24rem;\n    }\n\n    button {\n      flex: unset;\n    }\n  }\n}\n","@use \"../../../../ui/vars\" as *;\n\n.bookmark-menu {\n  > .button {\n    display: block;\n  }\n\n  .is-button-row {\n    flex-direction: row-reverse;\n    justify-content: flex-start;\n  }\n\n  #bookmark-delete {\n    margin-right: auto;\n\n    .icon {\n      background-color: var(--text-primary-red);\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    #bookmark-note {\n      // clamp height to ensure dropdown doesn't go off screen\n      // but set a minimum, so it doesn't become unusably small\n      max-height: max(calc(100vh - 30rem), 5rem);\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.article-actions-container {\n  align-items: center;\n  background-color: var(--background-secondary);\n  border-bottom: 1px solid var(--border-primary);\n  margin: 0;\n  min-height: var(--article-actions-container-height);\n  padding: 0;\n  position: sticky;\n  top: 0;\n  z-index: var(--z-index-low);\n\n  .container {\n    align-items: center;\n    display: flex;\n    gap: 0.5rem;\n    justify-content: space-between;\n  }\n\n  // sidebar button for tablet sizes only\n  .sidebar-button {\n    display: none;\n  }\n\n  @media (max-width: $screen-md) {\n    .sidebar-button {\n      align-items: center;\n      align-self: stretch;\n      display: flex;\n      margin: 0 0 0 -1rem;\n\n      .button-wrap {\n        border-radius: 0;\n        border-right: 1px solid var(--border-primary);\n      }\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    position: static;\n\n    .bookmark-button-container {\n      flex: 0 0 40px;\n    }\n  }\n\n  @media (min-width: $screen-xxl) {\n    .container {\n      padding-left: 1rem;\n      padding-right: 1rem;\n    }\n  }\n}\n",".offline-status-bar {\n  background-color: var(--accent-primary-engage); // rgba(24, 112, 240, 0.1)\n  color: var(--text-primary);\n  display: none;\n\n  &.is-offline,\n  &.is-online {\n    display: block;\n    padding: 1rem;\n    text-align: center;\n  }\n\n  &.is-online {\n    animation: fade-out 3s ease-out 0.5s;\n  }\n}\n\n@keyframes fade-out {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n","@use \"sass:math\";\n\n@use \"../../../ui/vars\" as *;\n\n.document-toc {\n  margin-bottom: 2rem;\n  padding: 0;\n\n  @media (max-width: $screen-sm) {\n    padding: 0 1rem;\n  }\n\n  // double classes to override specificity from root styles\n  &-heading.document-toc-heading {\n    font: var(--type-heading-h5);\n    letter-spacing: 1.5px;\n    margin: 0 0 1rem;\n  }\n\n  // double classes to override specificity from root styles\n  &-list.document-toc-list {\n    font-size: var(--type-smaller-font-size);\n    list-style: none;\n    padding-left: 0;\n\n    li {\n      margin: 0;\n    }\n  }\n\n  // double classes to override specificity from root styles\n  &-link.document-toc-link:not(.button) {\n    border-left: 2px solid var(--border-secondary);\n    color: var(--text-secondary);\n    display: inline-block;\n    padding: 0.5rem 1rem;\n    text-decoration: none;\n\n    &:hover {\n      color: var(--text-link);\n    }\n\n    &[aria-current]:not([aria-current=\"\"]):not([aria-current=\"false\"]) {\n      background-color: var(--background-toc-active);\n      border-bottom-right-radius: 0.25rem;\n      border-left: 2px solid var(--category-color);\n      border-top-right-radius: 0.25rem;\n      color: var(--text-primary);\n      font-weight: 600;\n    }\n  }\n\n  &-item-sub > .document-toc-link:not(.button) {\n    padding-left: 2rem;\n  }\n\n  .show-toc {\n    display: block;\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.sidebar {\n  color: var(--text-secondary);\n\n  .backdrop {\n    display: none;\n  }\n\n  &-heading {\n    color: var(--text-primary);\n    font: var(--type-heading-h5);\n    letter-spacing: 1.5px;\n    margin: 0;\n  }\n\n  em {\n    background-color: var(--background-toc-active);\n    border-bottom-right-radius: 0.25rem;\n    border-left: 2px solid var(--category-color);\n    border-top-right-radius: 0.25rem;\n    display: inline-block;\n    font-style: normal;\n    font-variation-settings: normal;\n    font-weight: 600;\n    hyphens: auto;\n    padding: 0.25rem 0.5rem;\n  }\n\n  a {\n    color: var(--text-secondary);\n    display: inline-block;\n    hyphens: auto;\n    padding: 0.25rem;\n\n    &:hover,\n    &:focus {\n      text-decoration: underline;\n    }\n  }\n\n  li.section {\n    display: flex;\n    font-size: var(--type-base-font-size-rem);\n    font-weight: var(--font-body-strong-weight);\n    letter-spacing: 0.02rem;\n    margin-top: 1.5rem;\n\n    &.no-link {\n      padding: 0.25rem;\n    }\n  }\n\n  li:first-of-type strong {\n    margin-top: unset;\n  }\n\n  ol {\n    font-size: var(--type-smaller-font-size);\n\n    ol,\n    ul {\n      padding-left: 0.5rem;\n    }\n\n    li {\n      .icon {\n        margin-right: 0.01em;\n      }\n\n      &.no-bullet {\n        display: block;\n        font-weight: var(--font-body-strong-weight);\n        list-style-type: none;\n      }\n    }\n  }\n\n  .sidebar-actions {\n    height: 0;\n    padding-bottom: 4rem;\n    position: sticky;\n    top: 0;\n    z-index: var(--z-index-main-header);\n\n    ~ .sidebar-inner-nav {\n      margin-top: 0.5rem;\n    }\n\n    @media (max-width: $screen-md) {\n      height: unset;\n      margin-top: unset;\n      padding-bottom: unset;\n      position: unset;\n      top: unset;\n\n      ~ .sidebar-inner-nav {\n        margin-top: unset;\n      }\n    }\n  }\n\n  /* This is for sidebars where there is no sub-heading\n   * for example: https://developer-mozilla.org/en-US/docs/Web/HTML/Element/progress\n   */\n  .sidebar-heading ~ ol,\n  .sidebar-heading ~ div > ol {\n    margin-top: 1rem;\n  }\n\n  summary,\n  li {\n    margin-bottom: 0.5rem;\n  }\n\n  summary {\n    cursor: pointer;\n    font-size: var(--type-smaller-font-size);\n  }\n\n  code {\n    background-color: initial;\n    border-radius: var(--elem-radius);\n    font-family: var(--font-code);\n    font-size: var(--type-smaller-font-size);\n    line-height: 1.2;\n    padding: 0.125rem;\n    white-space: normal;\n    word-wrap: break-word;\n  }\n\n  details {\n    margin: 0.75rem 0;\n\n    ol {\n      padding-left: 0.75rem;\n    }\n  }\n\n  .icon {\n    align-self: center;\n    background-size: 14px;\n    height: 14px;\n    margin-right: -0.25rem;\n    mask-size: 14px;\n    width: 14px;\n  }\n\n  /* icons in sidebars */\n  .icon-experimental,\n  .icon-nonstandard {\n    background-color: var(--icon-information);\n  }\n\n  .icon-deprecated {\n    background-color: var(--icon-critical);\n  }\n\n  // apply drawer styles only to the sizes that need them.\n  @media (max-width: #{$screen-md - 1}) {\n    height: 100vh;\n    left: 0;\n    max-height: 100vh;\n    position: fixed;\n    right: 0;\n    top: var(--offset);\n    transform: translateX(-100%);\n\n    .sidebar-inner {\n      background: var(--background-primary);\n      border-right: 1px solid var(--border-primary);\n      display: grid;\n      height: var(--max-height);\n      max-height: var(--max-height);\n      max-width: 20rem;\n      overflow: hidden; //animations look janky if scrollbars are present\n      overflow: auto;\n      padding: 1rem;\n      position: relative;\n      transform: translateX(-100%);\n      transition: 0.2s linear transform;\n      width: 80vw;\n      will-change: transform;\n\n      .sidebar-inner-nav {\n        display: contents;\n        mask-image: linear-gradient(\n          to bottom,\n          rgb(0, 0, 0) 0% calc(100% - 3rem),\n          rgba(0, 0, 0, 0) 100%\n        );\n        padding-bottom: 3rem;\n      }\n\n      @media (min-height: $screen-height-place-limit) {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n\n        .sidebar-inner-nav {\n          display: block;\n          overflow: auto;\n        }\n      }\n\n      .place {\n        align-self: center;\n        grid-row: 2/3;\n        justify-self: center;\n        margin-bottom: 0;\n      }\n    }\n\n    .backdrop {\n      background: rgba(0, 0, 0, 0.3);\n      border-radius: 0;\n      bottom: 0;\n      cursor: default;\n\n      display: flex;\n      left: 0;\n      opacity: 0;\n      position: fixed;\n      right: 0;\n      top: 0;\n      transition: opacity 0.2s linear;\n      width: 100%;\n      will-change: opacity;\n    }\n\n    &.is-animating {\n      transform: translateX(0);\n    }\n\n    &.is-expanded {\n      transform: translateX(0); // no transition on this one, just show it.\n\n      .sidebar-inner {\n        transform: translateX(0);\n      }\n\n      .backdrop {\n        opacity: 1;\n      }\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    .place {\n      display: none;\n    }\n  }\n  @media (min-width: $screen-md) {\n    display: flex;\n    position: relative;\n  }\n  @media (min-width: $screen-lg), (min-height: $screen-height-place-limit) {\n    display: block;\n    overflow: auto;\n  }\n  @media (min-width: $screen-xl) {\n    max-height: var(--max-height);\n    position: sticky;\n    top: var(--offset);\n  }\n}\n","@use \"../../../ui/vars.scss\" as *;\n\n.sidebar-filter-container {\n  background: linear-gradient(\n    to bottom,\n    var(--background-primary) 0% calc(100% - 2rem),\n    rgb(0, 0, 0, 0) 100%\n  );\n  display: flex;\n  flex-direction: column;\n  font-size: var(--type-smaller-font-size);\n  padding-bottom: 2rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n\n  @media (max-width: $screen-md) {\n    padding-bottom: unset;\n  }\n\n  .sidebar-filter {\n    align-items: center;\n    display: flex;\n    margin-bottom: 0.5rem;\n\n    &.has-input {\n      .sidebar-filter-label .icon {\n        background-color: var(--category-color);\n      }\n    }\n  }\n\n  .sidebar-filter-label {\n    left: 0.5rem; /* Moves icon inside field. */\n    position: relative;\n    width: 0; /* Avoid moving field right. */\n\n    .icon {\n      background-size: 1rem;\n      height: 1rem;\n      mask-size: 1rem;\n      width: 1rem;\n    }\n  }\n\n  .sidebar-filter-input-field {\n    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */\n    background-color: var(--background-primary);\n    border: 1px solid var(--border-primary);\n    border-radius: 1rem;\n    color: var(--text-primary);\n    height: var(--form-elem-height);\n    padding-left: 1.75rem;\n\n    &:focus {\n      border-color: var(--category-color);\n      box-shadow:\n        0 0 0 3px var(--blend-color),\n        0 0 0 3px var(--category-color);\n      outline: 0 none;\n    }\n\n    &[value=\"\"] {\n      width: 5rem;\n    }\n\n    &:not([value=\"\"]) ~ .sidebar-filter-label .icon {\n      background-color: var(--category-color) !important;\n    }\n\n    &:focus,\n    &.is-active {\n      padding-right: 7rem;\n      width: 100%;\n\n      ~ .sidebar-filter-count {\n        display: block;\n      }\n\n      ~ .button.clear-sidebar-filter-button {\n        display: block;\n      }\n    }\n\n    ~ .sidebar-filter-count {\n      background: var(--mark-color);\n      border-radius: 1rem;\n      display: none;\n      font-size: var(--type-tiny-font-size);\n      padding: 0 0.25rem;\n      position: absolute;\n      right: 2.5rem;\n\n      @media (max-width: $screen-md) {\n        right: 3rem;\n      }\n    }\n\n    ~ .button.clear-sidebar-filter-button {\n      display: none;\n      position: absolute;\n      right: 0.75rem;\n\n      &:hover {\n        background: transparent;\n      }\n\n      @media (max-width: $screen-md) {\n        left: calc(100% - 3rem);\n      }\n    }\n  }\n\n  .button {\n    --button-color: var(--icon-secondary);\n    --button-height: 1.5rem;\n    --button-padding: 0;\n    width: 1.5rem;\n  }\n\n  .icon {\n    background-color: var(--icon-secondary);\n    margin-right: unset;\n    position: unset;\n    position: relative;\n    z-index: unset;\n  }\n}\n\n.sidebar {\n  mark {\n    background-color: var(--mark-color);\n    color: unset;\n  }\n}\n",".main-content.standalone {\n  margin: 0 auto;\n  max-width: var(--max-width);\n  width: 100%;\n}\n","@mixin slow-pulse() {\n  animation: 2s infinite normal slow-pulse;\n}\n\n@mixin fade-in() {\n  animation: fade-in 0.5s ease-out;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes slow-pulse {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n","@use \"~@mdn/minimalist/sass/mixins/animation\" as *;\n\n.generic-loading {\n  align-items: center;\n  /* add short delay so the animation starts from white instead of dark gray */\n  animation-delay: 1s;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  @include slow-pulse();\n}\n","@use \"../../../ui/vars\" as *;\n\n.article-footer {\n  background-color: var(--background-secondary);\n  border: 1px solid var(--border-primary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-01);\n  margin: 0;\n  padding: 1rem;\n\n  @media (max-width: $screen-md) {\n    margin: 3rem;\n    // Reduce space to article content.\n    margin-top: 0;\n  }\n\n  @media (max-width: $screen-sm) {\n    margin-left: 1rem;\n    margin-right: 1rem;\n  }\n\n  .article-footer-inner {\n    margin: 0 auto;\n    max-width: 1440px;\n    width: 100%;\n\n    .svg-container {\n      position: relative;\n\n      svg {\n        height: auto;\n        position: absolute;\n        right: 0;\n        top: 0;\n        width: 20%;\n      }\n    }\n\n    h2 {\n      margin-top: 0;\n      padding: 0;\n    }\n\n    .feedback {\n      border: none;\n      margin: 0;\n      margin-bottom: 0.25rem;\n      padding: 0;\n\n      > label {\n        display: block;\n        margin-bottom: 0.25rem;\n      }\n\n      .thank-you {\n        display: block;\n        margin-bottom: calc(2.75rem + 2px);\n      }\n\n      .button-container {\n        // Ensure both buttons take minimal width.\n        display: inline-flex;\n        gap: 0.75rem;\n        margin: 0.25rem 0;\n      }\n\n      button {\n        // Ensure both buttons have same size.\n        flex: 1;\n        min-width: 0;\n\n        &:not(:hover) {\n          --button-bg: var(--background-secondary);\n          --button-color: var(--text-primary);\n        }\n\n        &.yes {\n          --button-bg-hover: var(--text-primary-green);\n        }\n\n        &.no {\n          --button-bg-hover: var(--text-primary-red);\n        }\n      }\n\n      .button-wrap {\n        display: flex;\n        // Increase space between icon and button label.\n        gap: 0.5rem;\n        padding: 1rem;\n      }\n\n      .radio-container {\n        align-items: center;\n        display: flex;\n        gap: 0.25rem;\n        margin: 0.25rem 0;\n      }\n    }\n\n    .contribute {\n      margin-top: 0.25rem;\n    }\n\n    .last-modified-date {\n      margin-bottom: 0;\n      margin-top: 2rem;\n    }\n\n    .emoji {\n      // Ensure emojis are shown in color.\n      font-family: initial;\n    }\n  }\n}\n","@use \"sass:math\";\n\n.page-not-found {\n  .fallback-document {\n    .fallback-link {\n      font-size: 1rem;\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n@use \"../ui/base/themes\" as *;\n@use \"../ui/base/mdn\";\n@use \"../ui/molecules/grids/grids.scss\" as *;\n@use \"../ui/base/typography\" as *;\n\n.main-page-content {\n  overflow-wrap: break-word;\n  padding: 3rem 1rem 1rem;\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-variant-ligatures: no-contextual;\n\n    a:link,\n    a:visited {\n      color: var(--text-primary);\n      text-decoration: none;\n    }\n\n    a:hover,\n    a:focus {\n      text-decoration: underline;\n    }\n\n    a:active {\n      background-color: transparent;\n    }\n\n    a[href^=\"#\"] {\n      &::before {\n        color: var(--text-inactive);\n        content: \"#\";\n        display: inline-block;\n        font-size: 0.7em;\n        line-height: 1;\n        margin-left: -0.8em;\n        text-decoration: none;\n        visibility: hidden;\n        width: 0.8em;\n      }\n\n      &:hover {\n        &::before {\n          visibility: visible;\n        }\n      }\n    }\n  }\n\n  h1 {\n    &::after {\n      text-decoration-color: var(--category-color);\n    }\n  }\n\n  /* reduce the top margin of the interactive example heading */\n  section h2:first-of-type {\n    margin-top: 2rem;\n  }\n\n  a:not(.button) {\n    color: var(--text-link);\n    width: fit-content;\n\n    &:visited:not([href^=\"#\"]) {\n      // Distinguish visited links (excl. anchor links).\n      color: var(--text-visited);\n    }\n\n    &:active,\n    &:active:visited {\n      background-color: var(--text-link);\n      color: #fff;\n\n      code {\n        background-color: transparent;\n        color: #fff;\n      }\n    }\n\n    &[aria-current] {\n      color: var(--text-link);\n      font-weight: var(--font-body-strong-weight);\n      text-decoration: none;\n    }\n  }\n\n  img {\n    /* In dark mode, required for images with black text on transparent background. */\n    background: #fff;\n    border: 1px solid var(--border-primary) !important;\n    border-radius: var(--elem-radius);\n    /* Required to prevent the border from scaling images, making them look blurry. */\n    box-sizing: content-box;\n    /* Required for alt texts. */\n    color: #1b1b1b;\n    display: inline-block;\n    display: flex;\n    height: auto;\n    margin: 2rem auto;\n  }\n\n  ul,\n  ol {\n    margin: 1rem 0 2rem;\n    padding-left: 2rem;\n\n    li {\n      margin: 0.5rem 0;\n\n      > p {\n        margin: 0;\n      }\n    }\n  }\n\n  ul {\n    list-style: disc;\n\n    ul {\n      list-style-type: circle;\n      margin: 0;\n      padding-left: 1rem;\n    }\n  }\n\n  ol {\n    list-style: decimal;\n\n    ol {\n      list-style: lower-roman;\n      margin: 0;\n    }\n  }\n\n  dd ol,\n  dd ul {\n    margin-bottom: 1rem;\n    padding-left: 3rem;\n  }\n\n  td ul,\n  td ol {\n    padding-left: 1rem;\n  }\n\n  dd li {\n    margin-bottom: 1rem;\n  }\n\n  td li {\n    margin-bottom: 0.5rem;\n  }\n\n  dl {\n    dt {\n      margin-bottom: 0.5rem;\n      margin-top: 2rem;\n\n      a[href^=\"#\"] {\n        color: inherit;\n        position: relative;\n        text-decoration: none;\n\n        &:hover,\n        &:focus {\n          text-decoration: underline;\n        }\n\n        &::before {\n          color: var(--text-inactive);\n          content: \"#\";\n          display: inline-flex;\n          font-size: 0.7em;\n          line-height: 1;\n          margin-left: -0.8em;\n          text-decoration: none;\n          top: 0.5em;\n          visibility: hidden;\n          width: 0.8em;\n        }\n\n        &:hover::before {\n          visibility: visible;\n        }\n      }\n    }\n\n    dd {\n      margin-bottom: 1rem;\n      margin-left: 1rem;\n\n      dl {\n        /* Nested definition list. */\n        border-left: 1px solid var(--border-primary);\n        padding-left: 1rem;\n      }\n    }\n\n    p {\n      margin: 0 0 1rem;\n    }\n  }\n\n  // specific styles to override base styles. The Markdown compiler\n  // adds extra divs, so this is a way for these styles to not\n  // stomp out component styles.\n  .section-content {\n    p {\n      font: var(--type-article-p);\n    }\n\n    figure {\n      margin-bottom: 1rem;\n    }\n\n    .prev-next {\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      list-style: none;\n      margin: 1rem 0;\n      padding: 0;\n      text-align: center;\n\n      li {\n        display: flex;\n        margin: 0;\n      }\n\n      .button {\n        margin: 0;\n        max-width: inherit;\n      }\n\n      .button-wrap {\n        color: inherit;\n      }\n    }\n\n    blockquote > :last-child {\n      margin-bottom: 0;\n    }\n\n    scrim-inline {\n      aspect-ratio: 1.5;\n      display: block;\n      margin: 0.5rem auto;\n      max-width: 36rem;\n      width: 100%;\n    }\n\n    scrim-inline[survey] {\n      aspect-ratio: 1.2;\n    }\n  }\n\n  #specifications + table {\n    margin-bottom: 2rem;\n  }\n\n  .css-formal-syntax {\n    margin-bottom: 0;\n\n    ~ footer {\n      background-color: var(--code-background-block);\n      border: 1px solid transparent;\n      border-top: 1px solid var(--border-secondary);\n      font-size: var(--type-smaller-font-size);\n      margin-bottom: 2rem;\n      padding: 0.5rem 2.5rem 0.5rem 1rem;\n\n      > a {\n        display: inline-block;\n      }\n    }\n  }\n\n  @media (min-width: $screen-sm) {\n    padding: 3rem;\n    // Reduce space to article footer.\n    padding-bottom: 0;\n  }\n\n  @media (min-width: $screen-md) {\n    // Reduce space to article footer.\n    margin-bottom: 0;\n    padding: 0;\n  }\n}\n\n// Base typography styles. Trying to remove as much as possible from\n// the .main-page-content override.\nb,\nstrong {\n  font-weight: var(--font-body-strong-weight);\n  letter-spacing: 0.02rem;\n}\n\ntable {\n  border: 1px solid var(--border-primary);\n  border-collapse: collapse;\n  width: 100%;\n\n  th {\n    background: var(--background-primary);\n    font-weight: var(--font-body-strong-weight);\n    line-height: 1.5;\n    text-align: left;\n  }\n\n  td,\n  th {\n    border: 1px solid var(--border-primary);\n    padding: 0.5rem 0.75rem;\n    vertical-align: middle;\n  }\n\n  td {\n    .code-example pre {\n      margin: 0;\n    }\n\n    ul {\n      margin: 0;\n    }\n  }\n\n  caption {\n    font-weight: var(--font-body-strong-weight);\n    margin: 1rem 0 0.5rem;\n  }\n\n  &.properties {\n    border: none;\n    font-size: var(--type-base-font-size);\n\n    th,\n    td {\n      border: none;\n    }\n\n    th {\n      background: none;\n    }\n\n    tr {\n      border-bottom: 1px solid var(--border-secondary);\n\n      &:first-child {\n        border-top: 1px solid var(--border-primary);\n      }\n\n      &:last-child {\n        border-bottom: 1px solid var(--border-primary);\n      }\n    }\n  }\n\n  &.properties,\n  &.standard-table {\n    tr {\n      &:nth-child(odd) th,\n      &:nth-child(odd) td {\n        background-color: var(--background-secondary);\n      }\n    }\n  }\n}\n\niframe {\n  border: 1px solid var(--border-primary);\n  max-width: 100%;\n  width: 100%;\n\n  /* \"Live Samples\" discussion here:\n  https://github.com/mdn/yari-private/issues/370,\n  These src attributes taken from unsafe-html.js */\n  &[src*=\"https://mdn.github.io\"],\n  &[src*=\"https://www.youtube-nocookie.com\"],\n  &[src*=\"https://jsfiddle.net\"],\n  &[src*=\"https://test262.report\"],\n  &.nobutton,\n  &.sample-code-frame {\n    background: #fff;\n    border: 1px solid var(--border-primary);\n    border-radius: var(--elem-radius);\n    box-sizing: content-box;\n    padding: 1rem;\n    width: calc(100% - 2rem - 2px);\n  }\n}\n\nh1,\nh2,\nh3 {\n  letter-spacing: var(--heading-letter-spacing);\n}\n\nh1 {\n  font: var(--type-heading-h1);\n  margin-bottom: 2rem;\n  word-break: break-word;\n\n  @media (min-width: $screen-md) {\n    font: var(--type-heading-h1);\n  }\n}\n\nh2 {\n  font: var(--type-heading-h2);\n  margin: 4rem 0 0.5rem;\n}\n\nh3 {\n  font: var(--type-heading-h3);\n  margin: 2rem 0 0.5rem;\n}\n\n/* When an h3 immediately follows an h2 we want to use\n * a smaller top margin. We also make accommodation\n  for situations where there is an empty div\n  between the two elements */\nh2 ~ div ~ h3,\nh2 ~ h3 {\n  margin-top: 1rem;\n}\n\nh4 {\n  font: var(--type-heading-h4);\n  letter-spacing: 0.5px;\n  margin: 2rem 0 1rem;\n}\n\nh5 {\n  font: var(--type-heading-h5);\n  letter-spacing: 1.5px;\n  margin: 2rem 0 1rem;\n  text-transform: uppercase;\n}\n\nh6 {\n  font: var(--type-heading-h6);\n  letter-spacing: 1.5px;\n  margin: 2rem 0 1rem;\n  text-transform: uppercase;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  code {\n    font-size: inherit;\n  }\n}\n\np {\n  margin: 1rem 0 2rem;\n}\n\nblockquote {\n  border-left: 4px solid var(--border-secondary);\n  color: var(--text-secondary);\n  margin-bottom: 2rem;\n  padding: 1rem 2rem;\n\n  p {\n    margin: 0;\n  }\n}\n\npre,\ncode,\n.code-example {\n  border-radius: var(--elem-radius);\n  font-family: var(--font-code);\n  font-size: var(--type-smaller-font-size);\n  tab-size: 4;\n}\n\ncode {\n  background: var(--code-background-inline);\n  padding: 0.125rem 0.25rem;\n  width: fit-content;\n}\n\npre {\n  background-color: var(--code-background-block);\n  border: 1px solid transparent;\n  margin: 1rem 0 2rem;\n  padding: 1rem 2.5rem 1rem 1rem;\n\n  code {\n    background: none;\n    color: var(--text-primary);\n    padding: 0;\n  }\n}\n\nmath[display=\"block\"] {\n  margin: 1rem 0 2rem;\n}\n\n.example-good,\n.example-bad {\n  padding: 0 1rem;\n  position: relative;\n\n  &::before {\n    background-size: 24px;\n    content: \"\";\n    float: right;\n    height: 16px;\n    margin-left: 8px;\n    width: 16px;\n  }\n}\n\n.example-bad + .copy-icon,\n.example-good + .copy-icon {\n  display: none;\n}\n\n.example-bad {\n  background-color: var(--background-critical);\n\n  &::before {\n    background-color: var(--icon-critical);\n    mask-image: url(\"../assets/icons/no.svg\");\n  }\n}\n\n.example-good {\n  background-color: var(--background-success);\n\n  &::before {\n    background-color: var(--icon-success);\n    mask-image: url(\"../assets/icons/checkmark.svg\");\n  }\n}\n\n/*\n * multi-column layout on pages with an index such as\n * https://developer.mozilla.org/en-US/docs/Web/API#Specifications\n*/\n.index {\n  margin-bottom: 1rem;\n\n  ul {\n    margin: 0.5rem 0 2rem;\n\n    @media (min-width: $screen-xl) {\n      columns: 3;\n    }\n\n    li {\n      break-inside: avoid-column;\n      margin: 0 0 0.5rem;\n    }\n  }\n\n  .icon-experimental,\n  .icon-nonstandard {\n    color: var(--icon-information);\n  }\n\n  .icon-deprecated {\n    color: var(--icon-critical);\n  }\n}\n\n.callout {\n  background: var(--background-secondary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-01);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 2rem 0;\n  padding: 1rem;\n  text-align: left;\n\n  h4 {\n    margin: 0;\n  }\n\n  p {\n    font: var(--type-smaller-font-size);\n    margin: 0;\n  }\n}\n\n.code-example {\n  --code-action-color: var(--text-secondary);\n  margin-bottom: 2rem;\n  position: relative;\n\n  [class*=\"interactive-example\"] {\n    display: none;\n  }\n\n  .example-header {\n    align-items: baseline;\n    background-color: var(--background-secondary);\n    border-bottom: 1px solid var(--border-secondary);\n    border-top-left-radius: var(--elem-radius);\n    border-top-right-radius: var(--elem-radius);\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin: 0;\n    padding: 0.1rem 1rem;\n\n    &.active {\n      background-color: var(--background-toc-active);\n    }\n\n    ~ pre,\n    ~ iframe {\n      border-top: none;\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      margin-top: 0;\n\n      &:not(:last-child) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        margin-bottom: 0;\n      }\n    }\n\n    .ai-explain-info-toggle {\n      --icon-size: 12px;\n      background-color: var(--icon-secondary);\n      cursor: pointer;\n      mask-size: contain;\n\n      &:hover,\n      &:focus {\n        background-color: var(--icon-information);\n      }\n    }\n\n    .ai-explain-info {\n      background: var(--background-information);\n      font-size: smaller;\n      margin-bottom: 0.5rem;\n      order: 23;\n      padding: 0.5rem;\n      width: 100%;\n    }\n\n    .language-name {\n      margin-right: auto;\n      text-transform: uppercase;\n    }\n  }\n\n  .ai-explain-answer {\n    background-color: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    font: var(--type-article-p);\n\n    ~ .ai-explain-answer {\n      border-top: none;\n    }\n\n    > .ai-explain-header {\n      background-color: var(--background-primary);\n      border-bottom: 1px solid var(--border-secondary);\n      margin: 0;\n      padding-top: 1rem;\n      width: 100%;\n\n      > span {\n        padding: 0.25rem 1rem;\n      }\n\n      > pre {\n        background-color: var(--background-primary);\n        margin: 0;\n        padding: 0.25rem 1rem;\n      }\n    }\n\n    > div > p {\n      margin: 0;\n      padding: 0.5rem 1rem;\n    }\n\n    .ai-explain-feedback {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      font-size: smaller;\n      gap: 0.5rem;\n      justify-content: flex-end;\n      padding: 0.5rem;\n\n      button {\n        cursor: pointer;\n\n        &.icon-thumbs-up:hover,\n        &.icon-thumbs-up:focus {\n          background-color: var(--icon-success);\n        }\n\n        &.icon-thumbs-down:hover,\n        &.icon-thumbs-down:focus {\n          background-color: var(--icon-critical);\n        }\n      }\n    }\n  }\n\n  .play-button,\n  .ai-explain-button {\n    color: var(--code-action-color);\n    cursor: pointer;\n    margin: 0;\n    text-transform: capitalize;\n\n    &:hover {\n      opacity: 0.6;\n    }\n\n    &:first-child {\n      margin-left: auto;\n    }\n  }\n\n  .playlist {\n    align-items: center;\n    display: flex;\n    gap: 0.5rem;\n\n    > label {\n      color: var(--code-action-color);\n      cursor: pointer;\n      padding: 1px;\n      text-transform: capitalize;\n\n      &:hover {\n        opacity: 0.6;\n      }\n    }\n\n    > input {\n      height: 0;\n      margin: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n\n      ~ label::before {\n        background-color: var(--code-action-color);\n        content: \"\";\n        display: inline-block;\n        height: 1rem;\n        margin-right: 4px;\n        mask-image: url(\"../assets/icons/queue.svg\");\n        mask-size: cover;\n        vertical-align: middle;\n        width: 1rem;\n      }\n\n      &:focus ~ label {\n        opacity: 1;\n      }\n\n      &:focus-visible ~ label {\n        opacity: 1;\n        outline-color: var(--accent-primary);\n        outline-offset: 1px;\n        outline-style: auto;\n      }\n\n      &:checked ~ label {\n        color: var(--category-color);\n        opacity: 1;\n\n        &::before {\n          mask-image: url(\"../assets/icons/queued.svg\");\n        }\n      }\n\n      &:checked ~ label:before {\n        background-color: var(--category-color);\n      }\n    }\n  }\n\n  .ai-explain-button.ai-explain-highlight {\n    animation: 1s ease-in 1 ai-explain-highlight-frames;\n  }\n\n  .play-button::before {\n    background-color: var(--code-action-color);\n    content: \"\";\n    display: inline-block;\n    height: 1rem;\n    margin-right: 4px;\n    mask-image: url(\"../assets/icons/play.svg\");\n    mask-size: cover;\n    vertical-align: middle;\n    width: 1rem;\n  }\n\n  .copy-icon {\n    align-self: center;\n    background-color: var(--code-action-color);\n    cursor: pointer;\n    height: 1rem;\n    margin-top: -0.1rem;\n    mask-image: url(\"../assets/clippy.svg\");\n    mask-size: cover;\n    padding: 0;\n    width: 1rem;\n\n    &:hover,\n    &:focus {\n      opacity: 0.6;\n    }\n\n    &:first-child {\n      margin-left: auto;\n    }\n  }\n\n  .copy-icon-message {\n    background: var(--text-primary);\n    border-radius: var(--elem-radius);\n    color: var(--text-invert);\n    font-size: 0.8125rem;\n    opacity: 1;\n    padding: 0.125rem;\n    position: absolute;\n    right: 0.25rem;\n    top: 2rem;\n  }\n\n  .example-good,\n  .example-bad {\n    padding: 1rem;\n  }\n}\n\na.page-not-created {\n  cursor: not-allowed;\n\n  &:link,\n  &:hover,\n  &:visited,\n  &:not([href]),\n  &:focus {\n    color: var(--icon-critical);\n    text-decoration: underline wavy;\n  }\n}\n\n.badge {\n  border: 1px solid var(--border-primary);\n  border-radius: 4rem;\n  color: var(--text-secondary);\n  font-size: var(--type-tiny-font-size);\n  padding: 0.125rem 0.375rem;\n  white-space: nowrap;\n}\n\nkbd {\n  border: 2px solid var(--border-secondary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--border-secondary);\n  box-shadow: inset 0 -1px 0 0 var(--border-secondary);\n  color: var(--text-secondary);\n  font-size: 0.825rem;\n  padding: 0.25rem;\n}\n\n.loading-error pre {\n  overflow-y: scroll;\n  white-space: pre;\n}\n\n.sidebar-container {\n  --offset: var(--sticky-header-with-actions-height);\n  --max-height: calc(100vh - var(--offset));\n\n  max-height: var(--max-height);\n  position: sticky;\n  top: var(--offset);\n  z-index: var(--z-index-sidebar-mobile);\n\n  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @media (min-width: $screen-md) {\n    z-index: auto;\n\n    .sidebar {\n      mask-image: linear-gradient(\n        to bottom,\n        rgb(0, 0, 0) 0% calc(100% - 3rem),\n        rgba(0, 0, 0, 0) 100%\n      );\n    }\n\n    @media not (min-height: $screen-height-place-limit) {\n      overflow: auto;\n    }\n  }\n\n  &.toc-container,\n  .toc-container {\n    .place {\n      grid-area: toc;\n      margin: 0;\n    }\n    @media (min-width: $screen-xl) {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      height: calc(100vh - var(--offset));\n      mask-image: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0) 0%,\n        rgb(0, 0, 0) 3rem calc(100% - 3rem),\n        rgba(0, 0, 0, 0) 100%\n      );\n      overflow: auto;\n      position: sticky;\n      top: var(--offset);\n\n      .place {\n        margin: 1rem 0;\n        padding-bottom: 3rem;\n      }\n    }\n    @media (max-width: #{$screen-md - 1}) {\n      .place {\n        display: none;\n      }\n    }\n  }\n  @media (min-width: $screen-xl) {\n    display: contents;\n\n    .sidebar {\n      mask-image: none;\n    }\n  }\n}\n\n@keyframes ai-explain-highlight-frames {\n  0% {\n    color: var(--text-primary);\n    opacity: 0.4;\n  }\n\n  50% {\n    color: var(--category-color);\n    opacity: 1;\n  }\n\n  100% {\n    color: var(--text-primary);\n    opacity: 0.4;\n  }\n}\n\nhtml a.only-in-en-us:after {\n  content: \"(en-US)\";\n  display: inline-block;\n  font-size: var(--type-tiny-font-size);\n  margin-left: 0.5ch;\n  vertical-align: super;\n}\n\nhtml[lang=\"de\"] a.only-in-en-us:after {\n  content: \"(engl.)\";\n}\n\nhtml[lang=\"es\"] a.only-in-en-us:after {\n  content: \"(inglés)\";\n}\n\nhtml[lang=\"fr\"] a.only-in-en-us:after {\n  content: \"(angl.)\";\n}\n\nhtml[lang=\"ja\"] a.only-in-en-us:after {\n  content: \"(英語)\";\n}\n\nhtml[lang=\"ko\"] a.only-in-en-us:after {\n  content: \"(영어)\";\n}\n\nhtml[lang=\"ru\"] a.only-in-en-us:after {\n  content: \"(англ.)\";\n}\n\nhtml[lang=\"pt-BR\"] a.only-in-en-us:after {\n  content: \"(inglês)\";\n}\n\nhtml[lang=\"zh-CN\"] a.only-in-en-us:after {\n  content: \"（英语）\";\n  margin-left: unset;\n  vertical-align: baseline;\n}\n\nhtml[lang=\"zh-TW\"] a.only-in-en-us:after {\n  content: \"（英語）\";\n  margin-left: unset;\n  vertical-align: baseline;\n}\n\n@media (max-width: $screen-sm - 1px) {\n  .table-container {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: $screen-sm) {\n  .table-container {\n    margin: 0 -3rem;\n    overflow: auto;\n    width: 100vw;\n  }\n\n  .table-container-inner {\n    min-width: max-content;\n    padding: 0 3rem;\n    position: relative;\n\n    &:after {\n      bottom: 0;\n      content: \"\";\n      height: 10px;\n      position: absolute;\n      right: 0;\n      width: 10px;\n    }\n  }\n}\n\n@media (min-width: $screen-md) {\n  .table-container {\n    width: calc(100% + 6rem);\n  }\n}\n\n@media (min-width: $screen-xl) {\n  .table-container {\n    margin: 0;\n    width: 100%;\n  }\n\n  .table-container-inner {\n    padding: 0;\n  }\n}\n","@use \"../../vars\" as *;\n\n.document-page {\n  .page-header,\n  .generic-loading,\n  .article-actions-container,\n  .document-toc-container,\n  .main-content,\n  .sidebar,\n  .metadata {\n    display: flex;\n  }\n\n  .main-content,\n  .sidebar {\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n.main-wrapper {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--max-width);\n\n  .toc {\n    display: none;\n  }\n\n  @media (min-width: $screen-md) {\n    display: grid;\n    gap: 3rem;\n    grid-template-areas: \"sidebar main\";\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    padding-left: 1.5rem;\n    padding-right: 3rem;\n\n    .sidebar,\n    .toc,\n    .main-content {\n      padding-bottom: 3rem;\n      padding-top: 3rem;\n    }\n\n    .sidebar {\n      align-self: start;\n      grid-area: sidebar;\n      padding-top: unset;\n    }\n\n    .main-content {\n      grid-area: main;\n    }\n  }\n\n  @media (min-width: $screen-xl) {\n    display: grid;\n    gap: 3rem;\n    grid-template-areas: \"sidebar main toc\";\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);\n    padding-left: 1rem;\n    padding-right: 1rem;\n\n    .toc {\n      --offset: var(--sticky-header-with-actions-height);\n\n      display: block;\n      grid-area: toc;\n      height: fit-content;\n      padding-bottom: 0;\n    }\n\n    .in-nav-toc {\n      display: none;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.page-wrapper {\n  grid-template-columns: 100%;\n}\n\n.standard-page {\n  max-width: inherit;\n}\n","@font-face {\n  font-display: swap;\n  font-family: \"Inter\";\n  font-stretch: 75% 100%;\n  font-style: oblique 0deg 20deg;\n  font-weight: 1 999;\n  src:\n    url(\"../../assets/fonts/Inter.var.woff2\")\n      format(\"woff2 supports variations\"),\n    url(\"../../assets/fonts/Inter.var.woff2\") format(\"woff2-variations\");\n}\n","@use \"../ui/vars\" as *;\n\n.interactive {\n  background-color: var(--background-secondary);\n  border: none;\n  border-radius: var(--elem-radius);\n  color: var(--text-primary);\n\n  // Since heights are now responsive, these classes are added\n  // in the EmbedInteractiveExample.ejs macro.\n  height: 675px;\n  margin: 1rem 0;\n  padding: 0;\n  width: 100%;\n\n  &.is-js-height,\n  &.is-taller-height,\n  &.is-shorter-height {\n    border: 0 none;\n  }\n\n  &.is-js-height {\n    height: 513px;\n  }\n\n  &.is-shorter-height {\n    height: 433px;\n  }\n\n  &.is-taller-height {\n    height: 725px;\n  }\n\n  &.is-tabbed-shorter-height {\n    height: 487px;\n  }\n\n  &.is-tabbed-standard-height {\n    height: 548px;\n  }\n\n  &.is-tabbed-taller-height {\n    height: 774px;\n  }\n}\n\n// The layout switches at 590px in the `mdn/bob` app.\n// In order to respect the height shifts without using\n// JS, a complicated media query is needed. This is\n// fragile, as if the margins or anything changes\n// on the main layout, this will need to be adjusted.\n\n// This spans from the time the iframe is 590px\n// wide in the mobile layout to the time it switches\n// to two columns. Then, from the time the iframe\n// is 590px wide in the two-column layout on up.\n@media (min-width: 688px) and (max-width: $screen-md - 1), (min-width: 1008px) {\n  .interactive {\n    height: 375px;\n\n    &.is-js-height {\n      height: 444px;\n    }\n\n    &.is-shorter-height {\n      height: 364px;\n    }\n\n    &.is-taller-height {\n      height: 654px;\n    }\n\n    &.is-tabbed-shorter-height {\n      height: 351px;\n    }\n\n    &.is-tabbed-standard-height {\n      height: 421px;\n    }\n\n    &.is-tabbed-taller-height {\n      height: 631px;\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\ninteractive-example {\n  display: block;\n  height: 375px;\n  margin: 1rem 0;\n\n  &[name^=\"JavaScript Demo:\" i] {\n    height: 444px;\n  }\n\n  &[height=\"shorter\"] {\n    height: 364px;\n  }\n\n  &[height=\"taller\"] {\n    height: 654px;\n  }\n\n  &[height=\"tabbed-shorter\"] {\n    height: 351px;\n    margin-top: 1.5rem;\n  }\n\n  &[height=\"tabbed-standard\"] {\n    height: 421px;\n  }\n\n  &[height=\"tabbed-taller\"] {\n    height: 631px;\n  }\n\n  @media (max-width: $screen-lg) {\n    height: 675px;\n\n    &[name^=\"JavaScript Demo:\" i] {\n      height: 513px;\n    }\n\n    &[height=\"shorter\"] {\n      height: 433px;\n    }\n\n    &[height=\"taller\"] {\n      height: 725px;\n    }\n\n    &[height=\"tabbed-shorter\"] {\n      height: 487px;\n    }\n\n    &[height=\"tabbed-standard\"] {\n      height: 548px;\n    }\n\n    &[height=\"tabbed-taller\"] {\n      height: 774px;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.document-survey {\n  --margin-vertical: 0.75rem;\n  // Same color for light and dark theme.\n  background-color: $mdn-color-light-theme-violet-10;\n  border-radius: 0.5rem;\n  color: $mdn-color-neutral-90;\n  padding: 1rem;\n\n  &::before {\n    background: transparent url(\"../../../assets/icons/survey.svg\") center\n      center no-repeat;\n    background-size: cover;\n    content: \"\";\n    display: inline-block;\n    height: 49px;\n    position: absolute;\n    width: 53px;\n  }\n\n  iframe {\n    border: 0;\n    border-radius: 0.5rem;\n  }\n\n  button[type=\"button\"],\n  summary {\n    cursor: pointer;\n  }\n\n  details {\n    iframe {\n      margin-top: var(--margin-vertical);\n    }\n  }\n\n  summary {\n    // Same color for light and dark theme.\n    color: #6800cf;\n    margin-top: var(--margin-vertical);\n    text-decoration: underline;\n\n    &:focus,\n    &:hover {\n      text-decoration: inherit;\n    }\n  }\n\n  .survey-header {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .survey-header,\n  .survey-container summary,\n  .survey-footer {\n    margin-left: 4rem;\n  }\n\n  .survey-footer {\n    font-size: var(--type-smaller-font-size);\n    font-style: italic;\n    font-variation-settings: \"slnt\" -10;\n    margin-top: var(--margin-vertical);\n  }\n\n  .survey-dismiss {\n    // Avoid the parent container to grow from 28px to 30px.\n    margin-top: -2px;\n\n    .icon {\n      background-color: $mdn-color-neutral-60;\n\n      &:hover {\n        background-color: $mdn-color-neutral-90;\n      }\n    }\n  }\n}\n","@use \"./color-palette\" as *;\n\n$mdn-color-neutral-light-70: #f9f9fb;\n$mdn-color-neutral-light-80: #f2f1f1;\n$mdn-color-neutral-light-90: #ebeaea;\n\n$mdn-color-neutral-10: #e2e2e2;\n$mdn-color-neutral-20: #cdcdcd;\n$mdn-color-neutral-30: #b3b3b3;\n$mdn-color-neutral-40: #9e9e9e;\n$mdn-color-neutral-50: #858585;\n$mdn-color-neutral-60: #696969;\n$mdn-color-neutral-70: #4e4e4e;\n$mdn-color-neutral-75: #313131;\n$mdn-color-neutral-80: #343434;\n$mdn-color-neutral-90: #1b1b1b;\n\n$mdn-color-light-theme-blue: #0085f2;\n$mdn-color-light-theme-green: #009a46;\n$mdn-color-light-theme-yellow: #928700;\n$mdn-color-light-theme-red: #d30038;\n$mdn-color-light-theme-violet: #9b65ff;\n$mdn-color-light-theme-pink: #d00058;\n\n$mdn-color-dark-theme-blue: $mdn-color-light-theme-blue;\n$mdn-color-dark-theme-green: $mdn-color-light-theme-green;\n$mdn-color-dark-theme-yellow: $mdn-color-light-theme-yellow;\n$mdn-color-dark-theme-red: $mdn-color-light-theme-red;\n$mdn-color-dark-theme-violet: $mdn-color-light-theme-violet;\n$mdn-color-dark-theme-pink: $mdn-color-light-theme-pink;\n\n$mdn-color-light-theme-blue-10: #dce2f2;\n$mdn-color-light-theme-blue-20: #c1cff1;\n$mdn-color-light-theme-blue-30: #8cb4ff;\n$mdn-color-light-theme-blue-40: #5e9eff;\n$mdn-color-light-theme-blue-50: #0085f2;\n$mdn-color-light-theme-blue-60: #0069c2;\n$mdn-color-light-theme-blue-70: #004d92;\n$mdn-color-light-theme-blue-80: #003465;\n$mdn-color-light-theme-blue-90: #001b3a;\n\n$mdn-color-dark-theme-blue-10: $mdn-color-light-theme-blue-10;\n$mdn-color-dark-theme-blue-20: $mdn-color-light-theme-blue-20;\n$mdn-color-dark-theme-blue-30: $mdn-color-light-theme-blue-30;\n$mdn-color-dark-theme-blue-40: $mdn-color-light-theme-blue-40;\n$mdn-color-dark-theme-blue-50: $mdn-color-light-theme-blue-50;\n$mdn-color-dark-theme-blue-60: $mdn-color-light-theme-blue-60;\n$mdn-color-dark-theme-blue-70: $mdn-color-light-theme-blue-70;\n$mdn-color-dark-theme-blue-80: $mdn-color-light-theme-blue-80;\n$mdn-color-dark-theme-blue-90: $mdn-color-light-theme-blue-90;\n\n$mdn-color-light-theme-green-10: #a9f3ba;\n$mdn-color-light-theme-green-20: #73e693;\n$mdn-color-light-theme-green-30: #00d061;\n$mdn-color-light-theme-green-40: #00b755;\n$mdn-color-light-theme-green-50: #009a46;\n$mdn-color-light-theme-green-60: #007936;\n$mdn-color-light-theme-green-70: #005a26;\n$mdn-color-light-theme-green-80: #003d18;\n$mdn-color-light-theme-green-90: #00210a;\n\n$mdn-color-dark-theme-green-10: $mdn-color-light-theme-green-10;\n$mdn-color-dark-theme-green-20: $mdn-color-light-theme-green-20;\n$mdn-color-dark-theme-green-30: $mdn-color-light-theme-green-30;\n$mdn-color-dark-theme-green-40: $mdn-color-light-theme-green-40;\n$mdn-color-dark-theme-green-50: $mdn-color-light-theme-green-50;\n$mdn-color-dark-theme-green-60: $mdn-color-light-theme-green-60;\n$mdn-color-dark-theme-green-70: $mdn-color-light-theme-green-70;\n$mdn-color-dark-theme-green-80: $mdn-color-light-theme-green-80;\n$mdn-color-dark-theme-green-90: $mdn-color-light-theme-green-90;\n\n$mdn-color-light-theme-yellow-10: #f0e498;\n$mdn-color-light-theme-yellow-20: #dfd172;\n$mdn-color-light-theme-yellow-30: #c7b700;\n$mdn-color-light-theme-yellow-40: #afa100;\n$mdn-color-light-theme-yellow-50: #938700;\n$mdn-color-light-theme-yellow-60: #746a00;\n$mdn-color-light-theme-yellow-70: #564e00;\n$mdn-color-light-theme-yellow-80: #3a3500;\n$mdn-color-light-theme-yellow-90: #1f1c00;\n\n$mdn-color-dark-theme-yellow-10: $mdn-color-light-theme-yellow-10;\n$mdn-color-dark-theme-yellow-20: $mdn-color-light-theme-yellow-20;\n$mdn-color-dark-theme-yellow-30: $mdn-color-light-theme-yellow-30;\n$mdn-color-dark-theme-yellow-40: $mdn-color-light-theme-yellow-40;\n$mdn-color-dark-theme-yellow-50: $mdn-color-light-theme-yellow-50;\n$mdn-color-dark-theme-yellow-60: $mdn-color-light-theme-yellow-60;\n$mdn-color-dark-theme-yellow-70: $mdn-color-light-theme-yellow-70;\n$mdn-color-dark-theme-yellow-80: $mdn-color-light-theme-yellow-80;\n$mdn-color-dark-theme-yellow-90: $mdn-color-light-theme-yellow-90;\n\n$mdn-color-light-theme-red-10: #ffd9dc;\n$mdn-color-light-theme-red-20: #ffc0c4;\n$mdn-color-light-theme-red-30: #ff97a0;\n$mdn-color-light-theme-red-40: #ff707f;\n$mdn-color-light-theme-red-50: #ff2a51;\n$mdn-color-light-theme-red-60: #d30038;\n$mdn-color-light-theme-red-70: #9e0027;\n$mdn-color-light-theme-red-80: #6f0019;\n$mdn-color-light-theme-red-90: #40000a;\n\n$mdn-color-dark-theme-red-10: $mdn-color-light-theme-red-10;\n$mdn-color-dark-theme-red-20: $mdn-color-light-theme-red-20;\n$mdn-color-dark-theme-red-30: $mdn-color-light-theme-red-30;\n$mdn-color-dark-theme-red-40: $mdn-color-light-theme-red-40;\n$mdn-color-dark-theme-red-50: $mdn-color-light-theme-red-50;\n$mdn-color-dark-theme-red-60: $mdn-color-light-theme-red-60;\n$mdn-color-dark-theme-red-70: $mdn-color-light-theme-red-70;\n$mdn-color-dark-theme-red-80: $mdn-color-light-theme-red-80;\n$mdn-color-dark-theme-red-90: $mdn-color-light-theme-red-90;\n\n$mdn-color-light-theme-violet-10: #e6deff;\n$mdn-color-light-theme-violet-20: #d4c5ff;\n$mdn-color-light-theme-violet-30: #bea5ff;\n$mdn-color-light-theme-violet-40: #ae8aff;\n$mdn-color-light-theme-violet-50: #9b65ff;\n$mdn-color-light-theme-violet-60: #872bff;\n$mdn-color-light-theme-violet-70: #6800cf;\n$mdn-color-light-theme-violet-80: #480091;\n$mdn-color-light-theme-violet-90: #280056;\n\n$mdn-color-dark-theme-violet-10: $mdn-color-light-theme-violet-10;\n$mdn-color-dark-theme-violet-20: $mdn-color-light-theme-violet-20;\n$mdn-color-dark-theme-violet-30: $mdn-color-light-theme-violet-30;\n$mdn-color-dark-theme-violet-40: $mdn-color-light-theme-violet-40;\n$mdn-color-dark-theme-violet-50: $mdn-color-light-theme-violet-50;\n$mdn-color-dark-theme-violet-60: $mdn-color-light-theme-violet-60;\n$mdn-color-dark-theme-violet-70: $mdn-color-light-theme-violet-70;\n$mdn-color-dark-theme-violet-80: $mdn-color-light-theme-violet-80;\n$mdn-color-dark-theme-violet-90: $mdn-color-light-theme-violet-90;\n\n$mdn-color-light-theme-pink-10: #ffd9df;\n$mdn-color-light-theme-pink-20: #ffbbc8;\n$mdn-color-light-theme-pink-30: #ff93aa;\n$mdn-color-light-theme-pink-40: #ff6d91;\n$mdn-color-light-theme-pink-50: #ff1f72;\n$mdn-color-light-theme-pink-60: #d00058;\n$mdn-color-light-theme-pink-70: #9e0041;\n$mdn-color-light-theme-pink-80: #6d002b;\n$mdn-color-light-theme-pink-90: #3f0015;\n\n$mdn-color-dark-theme-pink-10: $mdn-color-light-theme-pink-10;\n$mdn-color-dark-theme-pink-20: $mdn-color-light-theme-pink-20;\n$mdn-color-dark-theme-pink-30: $mdn-color-light-theme-pink-30;\n$mdn-color-dark-theme-pink-40: $mdn-color-light-theme-pink-40;\n$mdn-color-dark-theme-pink-50: $mdn-color-light-theme-pink-50;\n$mdn-color-dark-theme-pink-60: $mdn-color-light-theme-pink-60;\n$mdn-color-dark-theme-pink-70: $mdn-color-light-theme-pink-70;\n$mdn-color-dark-theme-pink-80: $mdn-color-light-theme-pink-80;\n$mdn-color-dark-theme-pink-90: $mdn-color-light-theme-pink-90;\n\n$mdn-color-black: #000;\n$mdn-color-white: #fff;\n$mdn-color-ads: #00d0aa;\n\n$mdn-theme-light-text-primary: $mdn-color-neutral-90;\n$mdn-theme-light-text-secondary: $mdn-color-neutral-70;\n$mdn-theme-light-text-active: #{$mdn-color-neutral-50};\n$mdn-theme-light-text-inactive: #{$mdn-color-neutral-40}a6;\n$mdn-theme-light-text-link: $mdn-color-light-theme-blue-60;\n$mdn-theme-light-text-invert: $mdn-color-white;\n$mdn-theme-light-text-muted: #6f6f6f;\n$mdn-theme-light-background-primary: $mdn-color-white;\n$mdn-theme-light-background-secondary: $mdn-color-neutral-light-70;\n$mdn-theme-light-background-tertiary: #ebeaea;\n$mdn-theme-light-background-toc-active: $mdn-color-neutral-light-90;\n$mdn-theme-light-border-primary: $mdn-color-neutral-20;\n$mdn-theme-light-border-secondary: $mdn-color-neutral-20;\n$mdn-theme-light-border-success: $mdn-color-light-theme-green-20;\n$mdn-theme-light-button-primary-default: $mdn-color-neutral-90;\n$mdn-theme-light-button-primary-hover: $mdn-color-neutral-60;\n$mdn-theme-light-button-primary-active: $mdn-color-neutral-40;\n$mdn-theme-light-button-primary-inactive: $mdn-color-neutral-90;\n$mdn-theme-light-button-secondary-default: $mdn-color-white;\n$mdn-theme-light-button-secondary-hover: $mdn-color-neutral-20;\n$mdn-theme-light-button-secondary-active: $mdn-color-neutral-20;\n$mdn-theme-light-button-secondary-inactive: $mdn-color-neutral-light-70;\n$mdn-theme-light-button-secondary-border-focus: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-button-secondary-border-red: $mdn-color-light-theme-red-30;\n$mdn-theme-light-button-secondary-border-red-focus: $mdn-color-light-theme-red-10;\n$mdn-theme-light-icon-primary: $mdn-color-neutral-60;\n$mdn-theme-light-icon-secondary: $mdn-color-neutral-30;\n$mdn-theme-light-icon-information: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-icon-warning: $mdn-color-light-theme-red-50;\n$mdn-theme-light-icon-critical: $mdn-color-light-theme-red-60;\n$mdn-theme-light-icon-success: $mdn-color-light-theme-green-60;\n$mdn-theme-light-accent-primary: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-accent-secondary: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-field-focus-border: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-focus-01: 0 0 0 3px rgba(0, 144, 237, 0.4);\n$mdn-theme-light-shadow-01: 0 1px 2px rgba(43, 42, 51, 0.05);\n$mdn-theme-light-shadow-02: 0 1px 6px rgba(43, 42, 51, 0.1);\n\n$mdn-theme-light-code-token-tag: $mdn-color-light-theme-blue-60;\n$mdn-theme-light-code-token-punctuation: $mdn-color-neutral-50;\n$mdn-theme-light-code-token-attribute-name: $mdn-color-light-theme-red-60;\n$mdn-theme-light-code-token-attribute-value: $mdn-color-light-theme-green-60;\n$mdn-theme-light-code-token-comment: $mdn-color-neutral-50;\n$mdn-theme-light-code-token-default: $mdn-color-neutral-90;\n$mdn-theme-light-code-token-selector: $mdn-color-light-theme-violet-60;\n$mdn-theme-light-code-background-inline: $mdn-color-neutral-light-80;\n$mdn-theme-light-code-background-block: $mdn-color-neutral-light-80;\n\n$mdn-theme-dark-text-primary: $mdn-color-white;\n$mdn-theme-dark-text-secondary: $mdn-color-neutral-20;\n$mdn-theme-dark-text-active: #{$mdn-color-neutral-50};\n$mdn-theme-dark-text-inactive: #{$mdn-color-neutral-20}a6;\n$mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30;\n$mdn-theme-dark-text-invert: $mdn-color-neutral-90;\n$mdn-theme-dark-text-muted: #858585;\n$mdn-theme-dark-background-primary: $mdn-color-neutral-90;\n$mdn-theme-dark-background-secondary: $mdn-color-neutral-75;\n$mdn-theme-dark-background-tertiary: #858585;\n$mdn-theme-dark-background-toc-active: $mdn-color-neutral-80;\n$mdn-theme-dark-border-primary: $mdn-color-neutral-50;\n$mdn-theme-dark-border-secondary: $mdn-color-neutral-60;\n$mdn-theme-dark-border-success: $mdn-color-dark-theme-green-20;\n$mdn-theme-dark-button-primary-default: $mdn-color-white;\n$mdn-theme-dark-button-primary-hover: $mdn-color-neutral-20;\n$mdn-theme-dark-button-primary-active: $mdn-color-neutral-40;\n$mdn-theme-dark-button-primary-inactive: $mdn-color-white;\n$mdn-theme-dark-button-secondary-default: $mdn-color-neutral-70;\n$mdn-theme-dark-button-secondary-hover: $mdn-color-neutral-50;\n$mdn-theme-dark-button-secondary-active: $mdn-color-neutral-40;\n$mdn-theme-dark-button-secondary-inactive: $mdn-color-neutral-70;\n$mdn-theme-dark-shadow-01: 0 1px 2px rgba(251, 251, 254, 0.2);\n$mdn-theme-dark-shadow-02: 0 1px 6px rgba(251, 251, 254, 0.2);\n$mdn-theme-dark-icon-primary: $mdn-color-white;\n$mdn-theme-dark-icon-secondary: $mdn-color-neutral-30;\n$mdn-theme-dark-icon-information: $mdn-color-dark-theme-blue-40;\n$mdn-theme-dark-icon-warning: $mdn-color-dark-theme-yellow-40;\n$mdn-theme-dark-icon-critical: $mdn-color-dark-theme-red-40;\n$mdn-theme-dark-icon-success: $mdn-color-dark-theme-green-40;\n$mdn-theme-dark-accent-primary: $mdn-color-dark-theme-blue-40;\n$mdn-theme-dark-accent-secondary: $mdn-color-dark-theme-blue-40;\n$mdn-theme-dark-field-focus-border: $mdn-color-white;\n$mdn-theme-dark-focus-01: 0 0 0 3px rgba(251, 251, 254, 0.5);\n\n$mdn-theme-dark-code-token-tag: $mdn-color-dark-theme-blue-20;\n$mdn-theme-dark-code-token-punctuation: $mdn-color-neutral-30;\n$mdn-theme-dark-code-token-attribute-name: $mdn-color-dark-theme-red-30;\n$mdn-theme-dark-code-token-attribute-value: $mdn-color-dark-theme-green-30;\n$mdn-theme-dark-code-token-comment: $mdn-color-neutral-30;\n$mdn-theme-dark-code-token-default: $mdn-color-white;\n$mdn-theme-dark-code-token-selector: $mdn-color-dark-theme-violet-30;\n$mdn-theme-dark-code-background-inline: $mdn-color-neutral-80;\n$mdn-theme-dark-code-background-block: $mdn-color-neutral-80;\n\n$screen-sm: 426px;\n$screen-md: 769px;\n$screen-lg: 992px;\n$screen-xl: 1200px;\n$screen-xxl: 1441px;\n\n// screen is to small for sticky placement\n$screen-height-place-limit: 44rem;\n","@use \"../ui/vars\" as *;\n\n$browsers: \"chrome\", \"edge\", \"firefox\", \"safari\";\n\n.baseline-indicator {\n  --baseline-bg: var(--baseline-limited-bg);\n  --baseline-engine-bg: var(--baseline-limited-engine-bg);\n  --baseline-img: var(--baseline-limited-img);\n  --baseline-check: var(--baseline-limited-check);\n  --baseline-cross: var(--baseline-limited-cross);\n  --feedback-link-icon: var(--icon-primary);\n\n  background: var(--baseline-bg);\n  border-radius: 0.25rem;\n  margin: 1rem 0;\n  padding-left: 3.8125rem;\n\n  &.high {\n    --baseline-bg: var(--baseline-high-bg);\n    --baseline-engine-bg: var(--baseline-high-engine-bg);\n    --baseline-img: var(--baseline-high-img);\n    --baseline-check: var(--baseline-high-check);\n  }\n\n  &.low {\n    --baseline-bg: var(--baseline-low-bg);\n    --baseline-engine-bg: var(--baseline-low-engine-bg);\n    --baseline-img: var(--baseline-low-img);\n    --baseline-check: var(--baseline-low-check);\n    --baseline-pill-bg: var(--baseline-low-pill-bg);\n    --baseline-pill-color: var(--baseline-low-pill-color);\n  }\n\n  &[open] {\n    summary .icon-chevron {\n      transform: rotate(180deg);\n    }\n  }\n\n  summary {\n    --chevron-size: 0.6875rem;\n    --chevron-padding-left: 0.75rem;\n    --chevron-padding-right: 1.25rem;\n\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    justify-content: space-between;\n    padding: 1rem 0;\n    padding-right: calc(\n      var(--chevron-padding-left) + var(--chevron-size) +\n        var(--chevron-padding-right)\n    );\n    position: relative;\n\n    &::-webkit-details-marker {\n      // Remove arrow from older versions of Safari.\n      display: none;\n    }\n\n    .indicator {\n      --width: 2.3125rem;\n\n      background-image: var(--baseline-img);\n      background-position: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      display: block;\n      height: 2.25rem;\n      left: calc(-0.5rem - var(--width));\n      position: absolute;\n      top: 1rem;\n      width: var(--width);\n    }\n\n    .status-title {\n      font-size: 1rem;\n      font-weight: 600;\n      letter-spacing: 0;\n      line-height: 1.5;\n      margin: 0;\n      padding: 0.375rem 0;\n\n      .not-bold {\n        font-weight: normal;\n      }\n    }\n\n    .pill {\n      background: var(--baseline-pill-bg);\n      border-radius: 0.125rem;\n      color: var(--baseline-pill-color);\n      font-size: 0.75rem;\n      font-weight: 600;\n      margin-right: auto;\n      padding: 0 0.25rem;\n      text-transform: uppercase;\n    }\n\n    .browsers {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.5rem;\n\n      .engine {\n        background: var(--baseline-engine-bg);\n        border-radius: 2rem;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n        padding: 0.5rem 0.625rem;\n\n        .browser {\n          display: flex;\n\n          &::before {\n            background-repeat: no-repeat;\n            background-size: contain;\n            content: \"\";\n            display: block;\n            height: 1.25rem;\n            width: 1.25rem;\n          }\n\n          @each $name in $browsers {\n            &.#{$name}::before {\n              background-image: url(\"../assets/icons/baseline/\" + $name + \".svg\");\n            }\n          }\n\n          &::after {\n            background-color: var(--baseline-cross);\n            content: \"\";\n            display: block;\n            height: 1.25rem;\n            mask-image: url(\"../assets/icons/baseline/browser-cross.svg\");\n            mask-repeat: no-repeat;\n            mask-size: contain;\n            width: 1rem;\n          }\n\n          &.supported::after {\n            background-color: var(--baseline-check);\n            mask-image: url(\"../assets/icons/baseline/browser-check.svg\");\n          }\n        }\n      }\n    }\n\n    .icon-chevron {\n      --icon-size: var(--chevron-size);\n      --icon-primary: var(--text-primary);\n      position: absolute;\n      right: var(--chevron-padding-right);\n    }\n  }\n\n  .extra {\n    padding-bottom: 1.5rem;\n    padding-right: 1rem;\n\n    p {\n      margin-bottom: 1rem;\n      margin-top: 0;\n    }\n\n    ul {\n      column-gap: 1.5rem;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0;\n      padding: 0;\n      row-gap: 1rem;\n\n      li {\n        font-weight: 500;\n        list-style: none;\n        margin: 0;\n\n        a.learn-more {\n          &,\n          &:active,\n          &:visited {\n            background: none;\n            color: var(--text-link);\n          }\n        }\n\n        a:not(.learn-more) {\n          &,\n          &:active,\n          &:visited {\n            background: none;\n            color: var(--text-primary);\n          }\n        }\n      }\n    }\n  }\n}\n",".play-queue-container {\n  position: fixed;\n  right: 0;\n  top: 50vh;\n  transform: translateY(-50%);\n  z-index: var(--z-index-modal-content);\n\n  details {\n    align-items: center;\n    background: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    border-radius: 1rem 0 0 1rem;\n    display: flex;\n    filter: drop-shadow(var(--shadow-02));\n    justify-content: center;\n    padding: 0.5rem 0;\n    width: fit-content;\n\n    > summary {\n      align-items: center;\n      color: var(--category-color);\n      cursor: pointer;\n      display: flex;\n      padding: 0 1rem;\n      width: 100%;\n\n      &::-webkit-details-marker,\n      &::marker {\n        display: none;\n      }\n\n      > div {\n        display: inline-block;\n        font-weight: bold;\n        width: 100%;\n      }\n\n      > .button.action {\n        --button-color: var(--category-color);\n      }\n    }\n\n    &[open] {\n      min-width: 12rem;\n\n      > summary {\n        border-bottom: 1px solid var(--border-primary);\n        padding: 0 1.5rem 0.5rem;\n\n        &::after {\n          content: \"▼\";\n          font-size: 0.75rem;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n\n    &:not([open]) {\n      background-color: var(--category-color);\n      width: min-content;\n\n      > summary {\n        color: var(--background-primary);\n        font-size: 0;\n        width: fit-content;\n\n        &::after {\n          content: \"◀\";\n          font-size: 0.75rem;\n          margin-left: 0.5rem;\n        }\n\n        > div {\n          width: 1rem;\n\n          &::first-letter {\n            font-size: 1rem;\n          }\n        }\n\n        .button {\n          display: none;\n        }\n      }\n    }\n  }\n\n  button {\n    cursor: pointer;\n\n    &.play-button {\n      align-self: center;\n      margin-bottom: 0.5rem;\n      width: fit-content;\n    }\n  }\n\n  .play-queue-inner {\n    display: flex;\n    flex-direction: column;\n\n    > ul {\n      margin: 0 0 0.5rem;\n      max-height: 50vh;\n      overflow: auto;\n      width: 100%;\n\n      > li {\n        align-items: center;\n        color: var(--text-primary);\n        display: flex;\n        padding: 0.25rem 1rem;\n        width: 100%;\n\n        &:active,\n        &:hover {\n          background-color: var(--background-toc-active);\n        }\n\n        .queue-ref {\n          color: var(--text-primary);\n          font-size: var(--type-smaller-font-size);\n          padding: 0 0.5rem;\n\n          &:active,\n          &:hover {\n            color: var(--text-link);\n            text-decoration: underline;\n          }\n        }\n\n        > code {\n          background-color: transparent;\n          justify-self: center;\n          margin: 0 auto;\n          min-width: 6rem;\n          text-align: center;\n          text-transform: uppercase;\n        }\n      }\n    }\n  }\n}\n",".spinner {\n  display: inline-block;\n  height: 1rem;\n  position: relative;\n  width: 1rem;\n\n  div {\n    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border: 0.1rem solid var(--text-primary);\n    border-color: var(--text-primary) transparent transparent transparent;\n    border-radius: 50%;\n    box-sizing: border-box;\n    display: block;\n    height: 0.8rem;\n    margin: 0.1rem;\n    position: absolute;\n    width: 0.8rem;\n  }\n\n  div:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n\n  div:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n\n  div:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"../../vars\" as *;\n\n/*\nKeyboard & screen reader skip link menu\n********************************************************************** */\n\n.a11y-nav {\n  position: absolute;\n  top: -20em;\n  width: 100%;\n  z-index: var(--z-index-a11y);\n\n  a {\n    background-color: var(--background-primary);\n    font-weight: var(--font-body-strong-weight);\n    left: 0;\n    padding: 0.8rem;\n    position: absolute;\n    right: 0;\n    text-align: center;\n    @media (max-width: #{$screen-md - 1}) {\n      padding: 1.125rem;\n    }\n\n    &:hover,\n    &:focus {\n      box-shadow: var(--shadow-01);\n      text-decoration: none;\n      top: 20em;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.page-footer {\n  background-color: var(--background-secondary);\n  padding: (1rem * 2) 1rem;\n  position: relative;\n\n  &-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n    margin: 0 auto;\n    max-width: 1440px;\n  }\n\n  &,\n  a {\n    color: var(--text-secondary);\n  }\n\n  &-logo-col {\n    p {\n      margin-top: 0;\n      max-width: 55ch;\n    }\n  }\n\n  &-app-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  &-app-dl {\n    display: block;\n    max-width: 130px;\n\n    svg,\n    img {\n      width: 100%;\n    }\n\n    &.is-ms {\n      max-width: 110px;\n    }\n  }\n\n  &-moz {\n    align-items: center;\n    border-top: 1px solid var(--border-primary);\n    display: flex;\n    flex-flow: row wrap;\n    gap: 2rem;\n\n    padding-top: 1.5rem;\n  }\n\n  &-legal-text {\n    font-size: var(--type-tiny-font-size);\n    margin: 0;\n\n    a {\n      text-decoration: underline;\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n}\n\n.footer-moz {\n  &-list {\n    display: flex;\n    flex-wrap: wrap;\n    font-size: var(--type-tiny-font-size);\n    gap: 1rem;\n  }\n\n  &-logo-link {\n    display: flex;\n  }\n\n  &-link {\n    text-decoration: underline;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n\n.mdn-footer-logo {\n  display: block;\n  width: 50px;\n}\n\n.social-icons {\n  display: flex;\n  gap: 1rem;\n  margin-top: 0.5rem;\n\n  li {\n    flex: 0 0 auto;\n  }\n\n  .icon {\n    display: block;\n    height: 21px;\n    width: 21px;\n  }\n}\n\n.footer-nav {\n  &-heading {\n    font: var(--type-smaller-font-size);\n    margin: 0 0 0.5rem;\n  }\n\n  &-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  &-item {\n    font-size: var(--type-smaller-font-size);\n  }\n}\n\n@media (min-width: $screen-sm) {\n  .page-footer {\n    &-grid {\n      display: grid;\n      gap: 2.5rem;\n      grid-template-areas:\n        \"logo  . \"\n        \"nav1  nav2\"\n        \"nav3  nav4\"\n        \"moz   moz\"\n        \"legal legal\";\n      grid-template-columns: 1fr 1fr;\n    }\n\n    &-logo-col {\n      grid-area: logo;\n    }\n\n    &-nav-col-1 {\n      grid-area: nav1;\n    }\n\n    &-nav-col-2 {\n      grid-area: nav2;\n    }\n\n    &-nav-col-3 {\n      grid-area: nav3;\n    }\n\n    &-nav-col-4 {\n      grid-area: nav4;\n    }\n\n    &-app-col {\n      grid-area: app;\n    }\n\n    &-moz {\n      grid-area: moz;\n    }\n\n    &-legal {\n      grid-area: legal;\n    }\n\n    &-app-list {\n      flex-direction: row;\n    }\n\n    &-app-dl {\n      img,\n      svg {\n        height: 38px;\n      }\n    }\n  }\n}\n\n@media (min-width: $screen-md) {\n  .page-footer {\n    &-grid {\n      gap: 1rem;\n      grid-template-areas:\n        \"logo  nav1  nav2  nav3  nav4\"\n        \"moz   moz   moz   moz   moz\"\n        \"legal legal legal legal  . \";\n      grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(0, 1fr));\n    }\n\n    &-app-list {\n      flex-direction: column;\n    }\n\n    &-app-dl {\n      img,\n      svg {\n        height: auto;\n      }\n    }\n  }\n}\n\n@media (min-width: $screen-xxl) {\n  .page-footer {\n    &-grid {\n      gap: 2.5rem;\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.query-string {\n  font-style: italic;\n  font-variation-settings: \"slnt\" -10;\n}\n\n.site-search {\n  display: block;\n\n  .main-content {\n    @media (max-width: $screen-md) {\n      display: flex;\n      flex-direction: column;\n      padding: 3rem 3rem 0;\n    }\n\n    article {\n      display: contents;\n    }\n\n    .place {\n      float: right;\n      padding: 1rem;\n      @media (max-width: $screen-md) {\n        align-self: center;\n        float: none;\n        order: 4;\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\narticle.settings {\n  display: block;\n  margin: auto;\n  max-width: 60em;\n  padding: 1rem;\n  width: min(90vw, 40em);\n\n  h3 {\n    margin-top: 0;\n  }\n\n  section {\n    padding: 1rem;\n\n    &.field-group,\n    &.setting-row {\n      padding: 0;\n    }\n  }\n\n  .field-group {\n    ul {\n      padding: 0;\n\n      li {\n        display: grid;\n        gap: 0 1rem;\n        grid-template-columns: 1fr 5em;\n\n        section {\n          margin: 0.125rem 0;\n\n          &:hover,\n          &:target {\n            background-color: var(--background-information);\n            border-radius: 0.25rem;\n          }\n        }\n\n        .setting-row {\n          align-items: center;\n          display: flex;\n          gap: 1rem;\n          justify-content: space-between;\n        }\n\n        p {\n          margin: 0 0 1rem;\n\n          &:first-child {\n            margin-top: 0;\n          }\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n\n        span {\n          font-size: 0.8rem;\n          grid-column: 1/2;\n          line-height: 1.2em;\n          padding-top: 0.3em;\n        }\n\n        .loading,\n        .switch {\n          align-self: center;\n          grid-column: 2/3;\n          grid-row: 1/3;\n          justify-self: end;\n        }\n\n        button,\n        .manage {\n          align-self: center;\n          background-color: var(--background-primary);\n          border: 1px solid var(--text-primary);\n          border-radius: var(--elem-radius);\n          color: var(--text-link);\n          font-size: 0.8rem;\n          grid-column: 2/3;\n          grid-row: 1/3;\n          height: max-content;\n          justify-self: end;\n          min-width: 10rem;\n          padding: 0.5rem 1rem;\n          text-align: center;\n          width: max-content;\n\n          &:hover {\n            background-color: var(--background-secondary);\n          }\n        }\n\n        button[disabled] {\n          background-color: var(--background-secondary);\n          border: 1px solid var(--text-secondary);\n          color: var(--text-secondary);\n        }\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.plus {\n  .article-actions-container {\n    display: flex;\n  }\n\n  .main-page-content {\n    em {\n      font-style: normal;\n      font-variation-settings: normal;\n      text-decoration: underline;\n      text-decoration-color: var(--text-link);\n      text-decoration-thickness: 0.15rem;\n      text-underline-offset: 0.1em;\n    }\n\n    h1 {\n      color: var(--plus-accent-color);\n      /* MDN/Plus/Type/Overline/S */\n      font: 700 12px/120% Inter;\n      letter-spacing: 1.5px;\n      text-transform: uppercase;\n    }\n\n    h1 + blockquote {\n      border: revert;\n      border-radius: var(--elem-radius);\n      color: var(--text-primary);\n      margin: 1rem 0 2rem;\n      padding: revert;\n\n      p:first-child {\n        font: var(--type-heading-h1-mobile);\n        margin-bottom: 2rem;\n\n        @media (min-width: $screen-md) {\n          font: var(--type-heading-h1);\n        }\n      }\n\n      p {\n        font-style: italic;\n        font-variation-settings: \"slnt\" -10;\n      }\n    }\n\n    img {\n      margin: 2rem 0;\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.plus-header-mandala {\n  --plus-header: var(--collections-header);\n  --plus-mandala: var(--collections-mandala);\n  --plus-icon: var(--collections-icon);\n  --plus-link: var(--collections-link);\n\n  background: var(--plus-header);\n  overflow: hidden;\n  padding: 1.25rem 0;\n\n  .container {\n    position: relative;\n\n    > * {\n      position: relative;\n    }\n\n    .mandala-icon-wrapper {\n      display: inline-block;\n      margin-right: 0.5rem;\n      position: relative;\n      top: -0.2rem;\n\n      @media (min-width: $screen-lg) {\n        position: absolute;\n        right: 10rem;\n        top: 50%;\n        transform: translate(0, -50%);\n      }\n\n      .mandala-container {\n        --mandala-primary: var(--plus-mandala);\n        left: 50%;\n        position: absolute;\n        top: 50%;\n        transform: translate(-50%, -49.4%);\n      }\n\n      .icon {\n        background: var(--plus-icon);\n        height: 2rem;\n        width: 2rem;\n      }\n    }\n\n    h1 {\n      font-size: 2rem;\n      margin: 0;\n      position: static;\n\n      span {\n        position: relative;\n      }\n    }\n\n    p {\n      margin: 1rem 0;\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n\n    h1 span,\n    p {\n      // improve text contrast against mandala\n      text-shadow:\n        2px 2px 3px var(--plus-header),\n        2px -2px 3px var(--plus-header),\n        -2px -2px 3px var(--plus-header),\n        -2px 2px 3px var(--plus-header);\n    }\n\n    a {\n      color: var(--plus-link);\n      text-decoration: underline;\n    }\n\n    .button-wrap {\n      font-size: 0.875rem;\n      font-weight: 700;\n    }\n  }\n}\n\n.ai-help,\n.collections,\n.updates {\n  @media (min-width: $screen-md) {\n    .container {\n      max-width: 43rem;\n    }\n  }\n\n  @media (min-width: $screen-lg) {\n    .container {\n      max-width: 52rem;\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n$text-stroke-width: 2px;\n\n.offer-hero {\n  background-color: var(--background-primary);\n  color: var(--text-primary);\n  display: grid;\n  grid-template-rows: fit-content(24rem);\n  width: 100%;\n\n  .offer-hero-header {\n    align-items: center;\n\n    color: var(--text-secondary);\n    display: flex;\n    flex-direction: row;\n    grid-column: 1;\n    grid-row: 1;\n    margin: 0 auto;\n    max-width: 52rem;\n    padding: 1rem;\n    -moz-transition: all 0.3s ease-in-out;\n    transition: all 0.3s ease-in-out;\n    width: initial;\n\n    .offer-hero-wrapper {\n      align-self: start;\n      z-index: 1;\n\n      h1 {\n        font-size: 3rem;\n        margin-top: 1rem;\n\n        span {\n          display: block;\n        }\n\n        span:first-child {\n          margin-bottom: 0.5rem;\n        }\n      }\n\n      h2 {\n        font: var(--type-heading-h3);\n        width: 100%;\n      }\n\n      .button-wrapper {\n        display: flex;\n        gap: 1rem;\n        width: 100%;\n\n        a {\n          border-radius: var(--elem-radius);\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 175%;\n          padding: 0.5rem;\n          position: relative;\n          text-align: center;\n          -moz-transition: all 0.2s ease;\n          transition: all 0.2s ease;\n          width: 140px;\n          width: 100%;\n          z-index: 1;\n        }\n\n        .button-primary {\n          background-color: var(--text-primary);\n          border: 2px solid var(--text-primary);\n          color: var(--text-invert);\n\n          &:hover {\n            background-color: var(--text-secondary);\n            border-color: var(--text-secondary);\n          }\n        }\n\n        .button-secondary {\n          background: #15141a1a;\n          border: 2px solid var(--button-secondary-border-red);\n          color: #fff;\n        }\n\n        .button-secondary:hover {\n          border: 2px solid var(--button-secondary-border-red-focus);\n        }\n      }\n    }\n  }\n\n  .mandala-wrapper {\n    --mandala-primary: var(--border-primary);\n    grid-column: 1;\n    grid-row: 1;\n    overflow: hidden;\n    top: 0;\n    -moz-transition: all 1s ease-in-out;\n    transition: all 1s ease-in-out;\n    width: 100%;\n\n    .mandala-translate {\n      transform: translate(10rem, -8rem) scale(1.2);\n      @media (min-width: $screen-sm) {\n        transform: translate(12rem, -8rem);\n      }\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.offer-overview-feature {\n  background-color: var(--background-primary);\n  color: var(--text-primary);\n  min-height: 25rem;\n  width: 100%;\n\n  .wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: column-reverse;\n    gap: 4rem;\n    height: 100%;\n    justify-content: space-between;\n    margin: 0 auto;\n    max-width: 64rem;\n    padding: 4rem 1rem;\n    width: 100%;\n\n    @media (min-width: $screen-xl) {\n      flex-direction: row;\n    }\n\n    .copy-container,\n    .img-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n\n    .img-container {\n      align-items: center;\n      border-radius: 1rem;\n      box-shadow: 0 3px 22px #2b2a331a;\n      height: 100%;\n      max-width: 25rem;\n      @media (min-width: $screen-xl) {\n        max-width: min(50%, 20rem);\n      }\n    }\n\n    .copy-container {\n      align-items: center;\n      max-width: 40rem;\n\n      text-align: center;\n\n      a {\n        justify-content: start;\n      }\n\n      h2 {\n        color: var(--plus-accent-color);\n        font: 700 12px/120% Inter;\n        letter-spacing: 1.5px;\n        margin-bottom: 1rem;\n        margin-top: 0;\n        text-transform: uppercase;\n      }\n\n      h3 {\n        font-size: 1.75rem;\n        font-weight: 400;\n        margin-top: 0;\n      }\n\n      @media (min-width: $screen-xl) {\n        align-items: initial;\n        height: 100%;\n        max-width: 50%;\n        text-align: initial;\n      }\n    }\n  }\n}\n\n.offer-overview-feature:nth-child(even) {\n  .wrapper {\n    flex-direction: column;\n    @media (min-width: $screen-xl) {\n      flex-direction: row;\n    }\n  }\n}\n\n.offer-overview-feature:nth-child(odd) {\n  background: var(--background-secondary);\n\n  .wrapper {\n    flex-direction: column;\n    @media (min-width: $screen-xl) {\n      flex-direction: row-reverse;\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.plus-subscribe-wrapper {\n  background: var(--background-primary);\n\n  .subscribe {\n    margin: 0 auto;\n    padding: 2rem 1rem;\n    text-align: center;\n\n    @media (min-width: $screen-md) {\n      padding: 2rem 4rem;\n    }\n\n    h2 {\n      color: var(--text-primary);\n      font-size: 24px;\n      font-style: normal;\n      font-variation-settings: normal;\n      font-weight: 650;\n      line-height: 120%;\n      margin-bottom: 2rem;\n    }\n\n    .switch {\n      color: var(--text-primary);\n      margin-bottom: 2rem;\n    }\n\n    .wrapper,\n    .wrapper-offline {\n      align-items: center;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      justify-content: center;\n      margin: 0 auto;\n\n      .wrapper-offline {\n        display: none;\n      }\n\n      @media (min-width: 66rem) {\n        align-items: stretch;\n        flex-direction: row;\n      }\n\n      .subscribe-detail {\n        align-items: center;\n        background-color: var(--text-secondary);\n        border-radius: 1rem;\n        color: var(--text-invert);\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n        max-width: 20rem;\n\n        min-width: 16rem;\n        width: 100%;\n\n        &#plus5 {\n          background-color: var(--text-primary-blue);\n        }\n\n        &#plus10 {\n          background-color: var(--text-primary-red);\n        }\n\n        &#core {\n          background-color: var(--text-primary-green);\n        }\n\n        h3 {\n          background: rgba(0, 0, 0, 0.5);\n          border-radius: 1rem 1rem 0 0;\n          color: var(--text-primary);\n          font-size: 1em;\n          margin: 0;\n          padding: 0.5rem;\n          width: 100%;\n        }\n\n        .sub-info {\n          display: flex;\n          flex-direction: column;\n          gap: 1.5rem;\n          height: 100%;\n          margin-top: 1rem;\n          padding: 0 2rem 2rem;\n          width: 100%;\n\n          h3,\n          p {\n            margin: 0;\n          }\n\n          .price {\n            align-content: center;\n            column-gap: 0.5rem;\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            height: 3rem;\n\n            .sub-price {\n              font-size: 36px;\n              font-style: normal;\n              font-variation-settings: normal;\n              font-weight: 650;\n              grid-column: 1/2;\n              justify-self: right;\n              line-height: 120%;\n            }\n\n            .free {\n              grid-column: 1/3;\n              justify-self: center;\n            }\n\n            .sub-length {\n              font-size: 0.8rem;\n              font-style: normal;\n              font-variation-settings: normal;\n              grid-column: 2/3;\n              justify-self: left;\n              line-height: 120%;\n              margin: auto 0;\n              text-align: left;\n            }\n          }\n\n          .includes {\n            align-self: flex-start;\n          }\n\n          ul {\n            align-self: flex-start;\n            list-style-type: \"✔ \";\n            margin-left: 1rem;\n            width: 100%;\n\n            li {\n              line-height: 1.75;\n              padding-left: 0.5rem;\n              text-align: left;\n              width: 100%;\n\n              a {\n                color: var(--text-invert);\n                text-decoration: underline;\n                width: fit-content;\n\n                &:hover {\n                  text-decoration: none;\n                }\n              }\n\n              sup.new {\n                --new-background: var(--mdn-color-background-highlight);\n                --new-color: inherit;\n                margin-left: 0.25rem;\n              }\n            }\n          }\n\n          .sub-link {\n            align-items: center;\n            align-self: center;\n            background: $mdn-color-neutral-90;\n            border-radius: 1rem;\n            color: var(--text-primary);\n            display: flex;\n            font-weight: 620;\n            height: 2rem;\n            justify-content: center;\n            min-width: fit-content;\n            padding: 0.25rem 0.5rem;\n            width: calc(100% - 1rem);\n          }\n\n          .terms {\n            color: var(--text-invert);\n            font-size: 14px;\n            font-style: italic;\n            font-variation-settings: \"slnt\" -10;\n            margin-top: auto;\n            text-decoration: underline;\n\n            &.external::after {\n              background-color: var(--text-invert);\n            }\n          }\n\n          .current {\n            background-color: initial;\n            border: 1px solid var(--mdn-color-black);\n            color: var(--mdn-color-black);\n          }\n\n          .na {\n            background-color: var(--mdn-background-light-grey);\n            border: 1px solid var(--mdn-background-light-grey);\n            color: var(--mdn-color-dark-grey);\n\n            &::after {\n              background-color: var(--mdn-color-dark-grey);\n              content: \"\";\n              display: inline-block;\n              height: 16px;\n              margin-left: 0.3rem;\n              mask-image: url(\"../../../assets/icons/question-mark.svg\");\n              width: 16px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.plus-for-companies {\n  color: var(--text-primary);\n  margin: 0;\n  padding: 1rem;\n  padding-bottom: 2rem;\n  text-align: center;\n}\n","@use \"../ui/vars\" as *;\n@use \"../ui/mixins\" as *;\n@use \"../about/mixins\" as about;\n\nmain.about-container {\n  --about-stats-height: 5.75rem;\n  --about-section-gap: 5rem;\n  --max-width: 74rem;\n  --inner-width: calc(min(var(--max-width), 100vw) - 2 * var(--gutter));\n\n  background: var(--about-bg-primary);\n  color: var(--about-color);\n\n  @media (max-width: $screen-md) {\n    --about-section-gap: 3rem;\n  }\n\n  @include about.layout;\n\n  @include about.theme-setup using ($mode) {\n    @if $mode == light {\n      --header-next-section-bg: #f2f2f5;\n      --header-text-primary: #000;\n      --header-text-secondary: #343434;\n      --header-bg: #fff;\n      --stats-bg: #fff;\n      --stats-box-shadow:\n        4px -2px 15px 0 rgba(179, 179, 179, 0.2),\n        4px -4px 15px 0 rgba(179, 179, 179, 0.15);\n      --stats-text-primary: #000;\n      --stats-stat-bg: #d7f5dc;\n      --stats-stat-text: #007936;\n      --boxes-bg: #fff;\n      --boxes-border: none;\n      --boxes-shadow:\n        -4px 4px 8px 0 rgba(179, 179, 179, 0.15),\n        4px 4px 8px 0 rgba(179, 179, 179, 0.18);\n      --boxes-header-bg-1: #d5e8fb;\n      --boxes-header-color-1: inherit;\n      --boxes-header-bg-2: #fbe3d5;\n      --boxes-header-color-2: inherit;\n      --boxes-header-bg-3: #fbf7d5;\n      --boxes-header-color-3: inherit;\n      --boxes-header-bg-4: #fbd5d5;\n      --boxes-header-color-4: inherit;\n      --boxes-header-bg-5: #dfd5fb;\n      --boxes-header-color-5: inherit;\n      --boxes-main-color: #000;\n      --stairs-color: #007936;\n      --about-bg-primary: #fff;\n      --about-bg-secondary: #f2f2f5;\n      --about-join-us-bg: #f2f2f5;\n      --about-join-us-border: none;\n      --about-join-us-color: #343434;\n      --about-join-us-image: url(\"../assets/about/building.svg\");\n      --about-tablist-border: #858585;\n      --about-tablist-color: rgba(0, 0, 0, 0.6);\n      --about-tablist-active-border: #007936;\n      --about-tablist-active-color: #000;\n      --about-color: #000;\n      --about-heading-color: #000;\n      --about-core-values-bg: #fff;\n      --about-core-values-bg-secondary: #d7f5dc;\n      --about-core-values-color: #000;\n      --about-core-values-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2);\n      --about-team-title-color: #007936;\n      --about-team-bg: #fff;\n      --about-team-github-bg: rgba(255, 255, 255, 0.75);\n      --about-team-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2);\n      --about-team-color: #000;\n      --about-journey-line-color: #007936;\n      --about-journey-image-border: #fff;\n      --about-journey-shadow:\n        4px -4px 15px 0 rgba(179, 179, 179, 0.25),\n        4px 4px 15px 0 rgba(179, 179, 179, 0.25);\n      --about-journey-dot: url(\"../assets/about/dot.svg\");\n      --about-global-impact-image: url(\"../assets/about/global-impact.svg\");\n    }\n\n    @if $mode == dark {\n      --header-next-section-bg: #1b1b1b;\n      --header-text-primary: #fff;\n      --header-text-secondary: #b3b3b3;\n      --header-bg: #101010;\n      --stats-bg: #000;\n      --stats-box-shadow:\n        4px -2px 15px 0 rgba(38, 38, 38, 0.2),\n        4px -4px 15px 0 rgba(38, 38, 38, 0.15);\n      --stats-text-primary: #b3b3b3;\n      --stats-stat-bg: #394035;\n      --stats-stat-text: #8ff295;\n      --boxes-bg: #000;\n      --boxes-border: #4e4e4e;\n      --boxes-shadow: none;\n      --boxes-header-bg-1: #141e34;\n      --boxes-header-color-1: #9bb6f2;\n      --boxes-header-bg-2: #321d13;\n      --boxes-header-color-2: #e3642a;\n      --boxes-header-bg-3: #343114;\n      --boxes-header-color-3: #d4c53b;\n      --boxes-header-bg-4: #341419;\n      --boxes-header-color-4: #f19ca1;\n      --boxes-header-bg-5: #1d1434;\n      --boxes-header-color-5: #bf94ec;\n      --boxes-main-color: #b3b3b3;\n      --stairs-color: #8ff295;\n      --about-bg-primary: #1b1b1b;\n      --about-bg-secondary: #1b1b1b;\n      --about-join-us-bg: #000;\n      --about-join-us-border: 1px solid #4e4e4e;\n      --about-join-us-color: #b3b3b3;\n      --about-join-us-image: url(\"../assets/about/building-dark.svg\");\n      --about-tablist-border: #858585;\n      --about-tablist-color: #b3b3b3;\n      --about-tablist-active-border: #8ff295;\n      --about-tablist-active-color: #fff;\n      --about-color: #b3b3b3;\n      --about-heading-color: #fff;\n      --about-core-values-bg: #000;\n      --about-core-values-bg-secondary: #007936;\n      --about-core-values-color: #fff;\n      --about-core-values-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2);\n      --about-team-title-color: #8ff295;\n      --about-team-bg: #000;\n      --about-team-github-bg: rgba(0, 0, 0, 0.7);\n      --about-team-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2);\n      --about-team-color: #fff;\n      --about-journey-line-color: #8ff295;\n      --about-journey-image-border: #000;\n      --about-journey-shadow:\n        4px -4px 15px 0 rgba(179, 179, 179, 0.25),\n        4px 4px 15px 0 rgba(179, 179, 179, 0.25);\n      --about-journey-dot: url(\"../assets/about/dot-dark.svg\");\n      --about-global-impact-image: url(\"../assets/about/global-impact-dark.svg\");\n    }\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    color: var(--about-heading-color);\n    letter-spacing: 0;\n  }\n\n  strong {\n    letter-spacing: 0;\n  }\n\n  > header {\n    --header-stats-height: var(--about-stats-height);\n    @include about.header;\n\n    h1 + p {\n      font-size: 2rem;\n      font-weight: 500;\n      line-height: 120%;\n      max-width: 43rem;\n\n      @media (max-width: $screen-md) {\n        font-size: 1.25rem;\n      }\n    }\n\n    ul {\n      @include about.stats;\n    }\n  }\n\n  > section {\n    --center-padding: max(\n      calc((100vw - var(--max-width)) / 2 + var(--gutter)),\n      var(--gutter)\n    );\n    @include about.section;\n\n    &[aria-labelledby=\"who_we_are\"] {\n      background: var(--about-bg-secondary);\n      margin: 0;\n      max-width: none;\n      padding: 4rem var(--center-padding);\n    }\n\n    .tabs {\n      grid-column: 1 / -1;\n      padding-top: 2rem;\n      position: relative;\n\n      .tablist-wrapper {\n        background: var(--about-bg-secondary);\n        margin: 0 calc(-1 * var(--center-padding));\n        margin-bottom: 2rem;\n        padding: 0 var(--center-padding);\n        position: sticky;\n        top: var(--top-nav-height);\n        z-index: 2;\n      }\n\n      .tablist {\n        border-bottom: 1px solid var(--about-tablist-border);\n        display: flex;\n        gap: 3rem;\n        overflow-x: auto;\n\n        @media (max-width: $screen-md) {\n          margin-left: calc(-1 * var(--gutter));\n          margin-right: calc(-1 * var(--gutter));\n          padding: 0 var(--gutter);\n        }\n\n        a {\n          color: var(--about-tablist-color);\n          flex-shrink: 0;\n          text-decoration: none;\n        }\n\n        .active {\n          border-bottom: 2px solid var(--about-tablist-active-border);\n          color: var(--about-tablist-active-color);\n        }\n      }\n\n      > .tabpanel:not(.active) {\n        display: none !important;\n      }\n    }\n\n    #what_we_offer-panel {\n      ul {\n        @include about.boxes;\n\n        @media (min-width: $screen-md) {\n          gap: 5rem;\n        }\n\n        @media (min-width: $screen-lg) {\n          gap: 5rem 8.5rem;\n        }\n\n        li {\n          justify-content: flex-start;\n        }\n\n        @for $i from 1 through 5 {\n          li:nth-of-type(#{$i}) {\n            --boxes-header-bg: var(--boxes-header-bg-#{$i});\n            --boxes-header-color: var(--boxes-header-color-#{$i});\n          }\n        }\n      }\n    }\n\n    #our_journey-panel {\n      --image-inner-height: calc(720px * 0.45);\n      --image-border-size: 4px;\n      --image-height: calc(\n        var(--image-inner-height) + var(--image-border-size) * 2\n      );\n      --image-width: calc(\n        var(--image-inner-height) * 16 / 9 + var(--image-border-size) * 2\n      );\n      --dot-height: 3rem;\n      --separator-width: 10rem;\n      --list-width: calc(\n        var(--inner-width) - var(--separator-width) - var(--image-width)\n      );\n\n      @media (max-width: $screen-xl) {\n        --separator-width: 6rem;\n      }\n\n      > p {\n        margin-bottom: 1rem;\n      }\n\n      > ul {\n        border-right: var(--about-journey-line-color) dashed 0.0625rem;\n        margin-top: 3rem;\n        width: var(--list-width);\n\n        @media (max-width: $screen-lg) {\n          border-left: var(--about-journey-line-color) dashed 0.0625rem;\n          border-right: none;\n          margin-left: 1rem;\n          width: auto;\n        }\n\n        li {\n          margin: 8rem 0;\n          min-height: var(--image-height);\n          padding-right: 2rem;\n          position: relative;\n\n          &:first-of-type {\n            margin-top: 2rem;\n          }\n\n          &:last-of-type {\n            margin-bottom: 2rem;\n          }\n\n          @media (max-width: $screen-lg) {\n            padding-left: 2rem;\n          }\n\n          &::after {\n            // dot on vertical dashed line\n            background-image: var(--about-journey-dot);\n            background-position: center center;\n            background-repeat: no-repeat;\n            content: \"\";\n            display: block;\n            height: var(--dot-height);\n            position: absolute;\n            right: calc(var(--dot-height) / -2);\n            top: calc(var(--dot-height) / -2);\n            width: var(--dot-height);\n\n            @media (max-width: $screen-lg) {\n              --dot-height: 2rem;\n              left: calc(var(--dot-height) / -2);\n              right: auto;\n            }\n          }\n\n          &:has([id=\"2017\"], [id=\"20232024\"]) {\n            min-height: 0;\n          }\n        }\n\n        h4 {\n          font-size: 1.375rem;\n          font-weight: 600;\n          line-height: 1.5;\n          margin: 0;\n          position: relative;\n          text-decoration-line: underline;\n          top: -0.75em;\n\n          @media (max-width: $screen-lg) {\n            font-size: 1.25rem;\n            margin-bottom: -0.75em;\n          }\n\n          &::before {\n            // horizontal line to dot\n            background: var(--about-journey-line-color);\n            content: \"\";\n            display: none;\n            height: 10px;\n            left: calc(100% + 2rem);\n            mask-image: url(\"../assets/about/line-dot.svg\");\n            mask-position: center right;\n            mask-repeat: no-repeat;\n            mask-size: cover;\n            position: absolute;\n            top: calc(0.75em - 5px);\n            width: calc(var(--separator-width) - var(--dot-height) / 2);\n\n            @media (max-width: $screen-lg) {\n              content: none;\n            }\n          }\n\n          ~ p:last-of-type > img {\n            // image\n            background-color: var(--about-journey-image-border);\n            background-position: center center;\n            background-repeat: no-repeat;\n            background-size: contain;\n            border: var(--image-border-size) solid\n              var(--about-journey-image-border);\n            box-shadow: var(--about-journey-shadow);\n            height: var(--image-height);\n            left: calc(var(--inner-width) - var(--image-width));\n            max-width: var(--image-width);\n            position: absolute;\n            top: calc(var(--dot-height) / -2);\n            width: var(--image-width);\n\n            @media (max-width: $screen-lg) {\n              aspect-ratio: 16 / 9;\n              box-sizing: content-box;\n              height: auto;\n              left: auto;\n              margin: 2rem auto;\n              max-height: var(--image-inner-height);\n              max-width: 100%;\n              position: relative;\n              top: auto;\n              width: auto;\n            }\n          }\n\n          &[id=\"2005\"] {\n            &::before,\n            ~ p:last-of-type::after {\n              display: block;\n            }\n          }\n\n          &[id=\"2010\"] {\n            &::before,\n            ~ p:last-of-type::after {\n              display: block;\n            }\n          }\n\n          &[id=\"2020\"] {\n            &::before,\n            ~ p:last-of-type::after {\n              display: block;\n            }\n          }\n\n          &[id=\"2022\"] {\n            &::before,\n            ~ p:last-of-type::after {\n              display: block;\n            }\n          }\n        }\n      }\n\n      h4 {\n        font-size: 1.75rem;\n        font-weight: 600;\n      }\n\n      mdn-image-history ul {\n        display: flex;\n        gap: 1rem;\n        margin-bottom: -1rem;\n        overflow-x: auto;\n        padding-bottom: 1rem; // space for scrollbar\n\n        li {\n          flex-shrink: 0;\n        }\n\n        img {\n          aspect-ratio: 16 / 9;\n          border: var(--image-border-size) solid\n            var(--about-journey-image-border);\n          box-sizing: content-box;\n          height: calc(720px / 4);\n        }\n      }\n    }\n\n    #our_core_values-panel {\n      li {\n        border-radius: 0.5rem;\n        color: var(--about-core-values-color);\n\n        h4 {\n          color: var(--about-core-values-color);\n          font-size: 1rem;\n          font-weight: 600;\n          letter-spacing: -0.03125rem;\n          margin: 0;\n          margin-bottom: 0.5rem;\n        }\n\n        &:not(:last-of-type) {\n          background: var(--about-core-values-bg-secondary);\n          margin: 1rem auto;\n          padding: 2rem;\n\n          h4 {\n            --icon-size: 45px;\n            align-items: center;\n            background-position: left center;\n            background-repeat: no-repeat;\n            background-size: var(--icon-size) var(--icon-size);\n            display: flex;\n            min-height: var(--icon-size);\n            padding-left: calc(var(--icon-size) + 1rem);\n\n            &#accurate_and_reliable {\n              background-image: url(\"../assets/about/accurate-sm.svg\");\n            }\n\n            &#collaborative_and_community-driven {\n              background-image: url(\"../assets/about/collaborative-sm.svg\");\n            }\n\n            &#inclusive_and_dynamic {\n              background-image: url(\"../assets/about/inclusive-sm.svg\");\n            }\n          }\n        }\n\n        &:last-of-type {\n          background: var(--about-core-values-bg);\n          margin-top: 2rem;\n          padding: 2rem;\n        }\n\n        @media (min-width: $screen-lg) {\n          display: grid;\n          grid-auto-flow: dense;\n          grid-template-columns: [left-start] 40% [left-end right-start] 1fr [right-end];\n          padding: 2rem;\n\n          h4 {\n            font-size: 1.75rem;\n            margin: 0;\n            max-width: 70%;\n          }\n\n          p {\n            margin-left: var(--gutter);\n          }\n\n          &:not(:last-of-type) {\n            background: var(--about-core-values-bg);\n            margin: 0 auto;\n\n            &:not(:first-of-type) {\n              border-top-left-radius: 0;\n              border-top-right-radius: 0;\n            }\n\n            &:not(:nth-last-of-type(2)) {\n              border-bottom-left-radius: 0;\n              border-bottom-right-radius: 0;\n            }\n\n            h4 {\n              --icon-size: 60px;\n\n              align-self: center;\n\n              &#accurate_and_reliable {\n                background-image: url(\"../assets/about/accurate.svg\");\n              }\n\n              &#collaborative_and_community-driven {\n                background-image: url(\"../assets/about/collaborative.svg\");\n              }\n\n              &#inclusive_and_dynamic {\n                background-image: url(\"../assets/about/inclusive.svg\");\n              }\n            }\n\n            p {\n              background: var(--about-core-values-bg-secondary);\n              border-radius: 0.5rem;\n              padding: 2rem;\n            }\n          }\n\n          &:nth-of-type(even):not(:last-of-type) {\n            h4 {\n              grid-column: right;\n              margin: 0 auto;\n            }\n\n            p {\n              grid-column: left;\n              margin-left: 0;\n              margin-right: var(--gutter);\n            }\n          }\n\n          &:last-of-type {\n            margin-top: 4rem;\n          }\n        }\n      }\n    }\n\n    #our_team-panel,\n    #our_partners-panel > div {\n      --team-grid-gap: 2.5rem;\n      --team-card-padding: 1.5rem;\n\n      display: grid;\n      gap: 0 var(--team-grid-gap);\n      grid-auto-flow: dense;\n      grid-template-columns: [full-start] 1fr 1fr 1fr [full-end];\n\n      @media (max-width: $screen-lg) {\n        --team-grid-gap: 2rem;\n        grid-template-columns: [full-start] 1fr 1fr [full-end];\n      }\n\n      > * {\n        margin: calc(var(--team-grid-gap) / 2) 0;\n        scroll-margin-top: calc(\n          var(--sticky-header-without-actions-height) + 1.5rem + 1rem\n        );\n      }\n\n      > h4,\n      p {\n        grid-column: full;\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n\n      h4,\n      h5 {\n        font-size: 1.75rem;\n        font-weight: 600;\n        text-transform: none;\n\n        @media (max-width: $screen-md) {\n          font-size: 1rem;\n        }\n      }\n\n      team-member {\n        align-content: start;\n        background: var(--about-team-bg);\n        border: 1px solid var(--about-team-bg);\n        box-shadow: var(--about-team-shadow);\n        color: var(--about-team-color);\n        cursor: pointer;\n        display: grid;\n        gap: 0;\n        grid-row: span 5;\n        grid-template-areas:\n          \"name\"\n          \"title\"\n          \"picture\"\n          \"bio\"\n          \".\";\n        grid-template-rows: subgrid;\n        padding: calc(var(--team-card-padding) - 1px);\n        user-select: none;\n\n        @media (max-width: $screen-sm) {\n          grid-column: full;\n        }\n\n        &:hover {\n          border-color: var(--text-inactive);\n        }\n\n        h4,\n        h5 {\n          grid-area: name;\n          margin: 0;\n          margin-bottom: 0.5rem;\n        }\n\n        ul {\n          display: contents;\n        }\n\n        li:first-of-type {\n          color: var(--about-team-title-color);\n          font-weight: 600;\n          grid-area: title;\n          margin-bottom: 0.75rem;\n        }\n\n        li:nth-of-type(2) {\n          grid-area: picture;\n        }\n\n        li:nth-of-type(3):not(:last-of-type) {\n          align-self: end;\n          grid-area: picture;\n        }\n\n        li:last-of-type {\n          grid-area: bio;\n          line-height: 1.75;\n          @include line-clamp(3, 1.75, var(--about-team-bg));\n        }\n\n        img {\n          aspect-ratio: 1;\n          margin-bottom: 0.75rem;\n          width: 100%;\n        }\n\n        a[href^=\"https://github.com\"]\n        {\n          background: var(--about-team-github-bg);\n          border-top-right-radius: 0.5rem;\n          color: var(--about-team-color);\n          margin-top: -2.9rem;\n          padding: 0.25rem 0.5rem;\n          padding-right: 0.7rem;\n          position: absolute;\n\n          &::before {\n            background: var(--about-team-color);\n            content: \"\";\n            display: inline-block;\n            height: 1.2em;\n            margin-bottom: 0.2em;\n            margin-right: 0.2em;\n            mask-image: url(\"../assets/icons/github-mark-small.svg\");\n            mask-repeat: no-repeat;\n            vertical-align: middle;\n            width: 1.2em;\n          }\n        }\n\n        &:focus-within {\n          align-content: start;\n          cursor: unset;\n          display: grid;\n          gap: 0 var(--team-card-padding);\n          grid-column: span 2;\n          grid-template-areas:\n            \"name    name\"\n            \"title   title\"\n            \"picture bio\"\n            \".       bio\"\n            \".       bio\";\n          grid-template-columns:\n            calc(\n              (100% - var(--team-grid-gap) - 2 * var(--team-card-padding)) / 2\n            )\n            1fr;\n          user-select: auto;\n\n          li:last-of-type {\n            max-height: unset;\n\n            &::after {\n              display: none;\n            }\n          }\n\n          @media (max-width: $screen-sm) {\n            grid-template-areas:\n              \"name\"\n              \"title\"\n              \"picture\"\n              \"bio\";\n            grid-template-columns: 1fr;\n\n            ul li:nth-of-type(3):not(:last-of-type) {\n              align-self: end;\n              grid-area: picture;\n\n              a {\n                position: absolute;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    #our_partners-panel > div {\n      margin-top: 2.5rem;\n    }\n\n    &[aria-labelledby=\"global_impact\"] {\n      display: block;\n      margin: var(--about-section-gap) auto;\n\n      @media (min-width: $screen-lg) {\n        .section-content {\n          background: var(--about-global-impact-image);\n          background-position: right;\n          background-repeat: no-repeat;\n          background-size: 20rem 100%;\n          padding-right: 30rem;\n        }\n      }\n\n      ul {\n        margin-top: 1rem;\n        @include about.stairs;\n\n        li:nth-child(1) {\n          --stairs-icon: url(\"../assets/about/education.svg\");\n        }\n\n        li:nth-child(2) {\n          --stairs-icon: url(\"../assets/about/text-box-check-outline.svg\");\n        }\n\n        li:nth-child(3) {\n          --stairs-icon: url(\"../assets/about/web-check.svg\");\n        }\n\n        li:nth-child(4) {\n          --stairs-icon: url(\"../assets/about/handshake.svg\");\n        }\n      }\n    }\n\n    &[aria-labelledby=\"join_us_in_building_a_better_web\"] {\n      background: var(--about-join-us-image) var(--about-join-us-bg);\n      background-position: 1.5rem;\n      background-repeat: no-repeat;\n      background-size: 20rem calc(100% - 3rem);\n      border: var(--about-join-us-border);\n      border-radius: 0.5rem;\n      color: var(--about-join-us-color);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      margin-bottom: var(--about-section-gap);\n      max-width: calc(100% - 2 * var(--center-padding));\n      padding: 4rem 1rem;\n      padding-left: min(30rem, 50%);\n\n      @media (max-width: $screen-md) {\n        background-color: transparent;\n        background-position: center bottom;\n        background-size: 100% 10rem;\n        border: none;\n        padding: 1rem 0;\n        padding-bottom: 12rem;\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n@use \"../ui/atoms/button/mixins\" as button;\n\n@mixin theme-setup {\n  .light & {\n    @content (light);\n  }\n\n  .dark & {\n    @content (dark);\n  }\n\n  // OS Default.\n  :root:not(.light):not(.dark) & {\n    @media (prefers-color-scheme: light) {\n      @content (light);\n    }\n\n    @media (prefers-color-scheme: dark) {\n      @content (dark);\n    }\n  }\n}\n\n@mixin layout {\n  h2,\n  h3,\n  p {\n    margin: 0;\n  }\n\n  h2,\n  h3 {\n    color: var(--layout-text-primary);\n\n    a {\n      color: unset;\n      text-decoration: none;\n    }\n  }\n\n  a {\n    text-decoration: underline;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  p + p {\n    margin-top: 1.5rem;\n  }\n\n  section {\n    margin-left: auto;\n    margin-right: auto;\n    max-width: var(--max-width);\n    padding-left: var(--gutter);\n    padding-right: var(--gutter);\n    width: 100%;\n  }\n\n  h2 {\n    font-size: 2rem;\n    font-weight: 600;\n    margin-bottom: 1rem;\n\n    @media (max-width: $screen-md) {\n      font-size: 1.375rem;\n    }\n  }\n}\n\n@mixin header {\n  background: linear-gradient(\n    to top,\n    var(--header-next-section-bg, transparent) 0%,\n    var(--header-next-section-bg, transparent)\n      calc(var(--header-stats-height) / 2),\n    var(--header-bg) calc(var(--header-stats-height) / 2),\n    var(--header-bg) 100%\n  );\n\n  @media (max-width: $screen-md) {\n    padding-top: 1rem;\n  }\n\n  section {\n    padding-top: 5rem;\n\n    @media (max-width: $screen-md) {\n      padding-top: 0;\n    }\n  }\n\n  h1 {\n    color: var(--header-text-primary);\n    font-size: 2.5rem;\n    margin-bottom: 1rem;\n\n    @media (max-width: $screen-md) {\n      font-size: 2rem;\n    }\n  }\n\n  p {\n    color: var(--header-text-secondary);\n    margin-bottom: 1.5rem;\n  }\n\n  + section {\n    margin-top: 4.56rem;\n\n    @media (max-width: $screen-md) {\n      margin-top: 2rem;\n    }\n  }\n}\n\n@mixin stats {\n  background: var(--stats-bg);\n  border-radius: 0.5rem;\n  box-shadow: var(--stats-box-shadow);\n  color: var(--stats-text-primary);\n  display: flex;\n  gap: 1rem;\n  justify-content: space-around;\n  margin-top: 5em;\n  padding: 1rem;\n  position: relative;\n  text-align: center;\n  z-index: 2;\n\n  @media (max-width: $screen-md) {\n    flex-wrap: wrap;\n    margin-top: 2rem;\n  }\n\n  li {\n    align-items: baseline;\n    column-gap: 1rem;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    min-width: 7.75rem;\n    overflow-wrap: anywhere;\n\n    @media (max-width: $screen-md) {\n      align-items: center;\n      flex: 1;\n      flex-direction: column;\n      justify-content: flex-start;\n    }\n\n    strong {\n      align-items: center;\n      background: var(--stats-stat-bg);\n      border-radius: 50%;\n      color: var(--stats-stat-text);\n      display: inline-flex;\n      height: 3.75rem;\n      justify-content: center;\n      width: 3.75rem;\n    }\n  }\n}\n\n@mixin section {\n  column-gap: min(5rem, 5vw);\n  display: grid;\n  grid-template-columns: 4fr 6fr;\n\n  @media (max-width: $screen-md) {\n    display: block;\n  }\n\n  > * {\n    min-width: 0;\n  }\n}\n\n@mixin boxes {\n  display: grid;\n  gap: 2rem;\n  grid-auto-rows: 1fr;\n  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));\n\n  li {\n    align-items: center;\n    background: var(--boxes-bg);\n    border: 1px solid var(--boxes-border);\n    border-radius: 0.5rem;\n    box-shadow: var(--boxes-shadow);\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n    justify-content: space-between;\n    padding: 1.5rem;\n    text-align: center;\n\n    h3,\n    h4,\n    h5,\n    h6 {\n      align-self: stretch;\n      background: var(--boxes-header-bg);\n      border-radius: 0.5rem 0.5rem 0 0;\n      color: var(--boxes-header-color);\n      font-size: 1.25rem;\n      font-weight: 500;\n      margin: -1.5rem;\n      margin-bottom: 0;\n      padding: 1.5rem;\n    }\n\n    p {\n      color: var(--boxes-main-color);\n      margin: 0;\n    }\n  }\n}\n\n@mixin stairs {\n  --stairs-icon-size: 3.125rem;\n  --stairs-step-indent: 3.125rem;\n  --stairs-step-gap: 4rem;\n\n  li {\n    --stairs-padding-left: calc(var(--stairs-step-indent) * var(--nth-child));\n    align-items: center;\n    display: flex;\n    gap: 1rem;\n    padding-left: var(--stairs-padding-left);\n    position: relative;\n\n    @media (max-width: $screen-md) {\n      --stairs-step-indent: 0;\n      --stairs-padding-left: var(--stairs-icon-size);\n      --stairs-step-gap: 1rem;\n    }\n\n    &:not(:last-of-type) {\n      margin-bottom: var(--stairs-step-gap);\n    }\n\n    &::before {\n      background: var(--stairs-color);\n      content: \"\";\n      display: block;\n      flex-shrink: 0;\n      height: var(--stairs-icon-size);\n      margin-left: calc(-1 * var(--stairs-icon-size));\n      mask-image: var(--stairs-icon);\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: 80%;\n      width: var(--stairs-icon-size);\n    }\n\n    &:not(:last-of-type)::after {\n      --height: calc(var(--stairs-step-gap) * 1.2);\n      background: linear-gradient(to bottom, var(--stairs-color), transparent);\n      bottom: calc(-1 * var(--height));\n      content: \"\";\n      display: block;\n      height: var(--height);\n      left: calc(var(--stairs-padding-left) - 50px);\n      mask: url(\"../assets/lines.svg\");\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n      position: absolute;\n      width: calc(var(--stairs-icon-size) + var(--stairs-step-indent));\n    }\n  }\n\n  @for $i from 1 through 4 {\n    li:nth-child(#{$i}) {\n      --nth-child: #{$i};\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n@use \"../ui/atoms/button/mixins\" as button;\n@use \"../about/mixins\" as about;\n\n@mixin light-theme {\n  --community-bg-primary: #fcfcfc;\n  --community-bg-secondary: #f2f2f5;\n  --community-text-primary: #000;\n  --community-text-primary-alt: #000;\n  --community-text-secondary: #343434;\n  --community-text-success: #007936;\n  --community-header-text: #696969;\n  --community-header-bg: url(\"../assets/community/people.svg\");\n  --community-header-stats-bg: #e1f5e5;\n  --community-box-shadow:\n    4px -2px 1rem 0 rgba(179, 179, 179, 0.2),\n    4px -4px 1rem 0 rgba(179, 179, 179, 0.15);\n  --community-circle-img-border: #fff;\n  --community-quote-start: url(\"../assets/community/quote-start.svg\");\n  --community-quote-end: url(\"../assets/community/quote-end.svg\");\n  --community-video-bg: url(\"../assets/community/video-bg.svg\");\n  --community-card-bg: #fff;\n  --community-card-header-bg: #e1f5e5;\n  --community-card-border: #e2e2e2;\n  --community-table-border: #e2e2e2;\n  --community-table-row: #f9f9fb;\n  --community-label-bg: #dff7e3;\n  --community-discord-bg: url(\"../assets/community/discord.svg\");\n  --community-calls-bg: url(\"../assets/community/community-calls.svg\");\n}\n\n@mixin dark-theme {\n  --community-bg-primary: #101010;\n  --community-bg-secondary: #1b1b1b;\n  --community-text-primary: #fff;\n  --community-text-primary-alt: #cdcdcd;\n  --community-text-secondary: #cdcdcd;\n  --community-text-success: #8ff295;\n  --community-header-text: #b3b3b3;\n  --community-header-bg: url(\"../assets/community/people-dark.svg\");\n  --community-header-stats-bg: #394035;\n  --community-box-shadow:\n    4px -2px 15px 0 rgba(38, 38, 38, 0.2),\n    4px -4px 15px 0 rgba(38, 38, 38, 0.15);\n  --community-circle-img-border: #4e4e4e;\n  --community-quote-start: url(\"../assets/community/quote-start-dark.svg\");\n  --community-quote-end: url(\"../assets/community/quote-end-dark.svg\");\n  --community-video-bg: url(\"../assets/community/video-bg-dark.svg\");\n  --community-card-bg: #000;\n  --community-card-header-bg: #354039;\n  --community-card-border: #343434;\n  --community-table-border: #1b1b1b;\n  --community-table-row: #1b1b1b;\n  --community-label-bg: #354039;\n  --community-discord-bg: url(\"../assets/community/discord-dark.svg\");\n  --community-calls-bg: url(\"../assets/community/community-calls-dark.svg\");\n}\n\n.light {\n  @include light-theme;\n}\n\n.dark {\n  @include dark-theme;\n}\n\n// OS Default.\n:root:not(.light):not(.dark) {\n  @media (prefers-color-scheme: light) {\n    @include light-theme;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    @include dark-theme;\n  }\n}\n\nmain.community-container {\n  --community-stats-height: 5.75rem;\n  --community-section-gap: 5rem;\n  --max-width: 74rem;\n  --layout-text-primary: var(--community-text-primary);\n\n  background: var(--community-bg-secondary);\n  color: var(--community-text-secondary);\n\n  @include about.layout;\n\n  > header {\n    --header-text-primary: var(--community-text-primary);\n    --header-text-secondary: var(--community-header-text);\n    --header-stats-height: var(--community-stats-height);\n    --header-bg: var(--community-bg-primary);\n\n    @include about.header;\n\n    @media (max-width: $screen-md) {\n      text-align: center;\n    }\n\n    section {\n      background-image: var(--community-header-bg);\n      background-position: bottom calc(var(--community-stats-height) - 1rem)\n        right;\n      background-repeat: no-repeat;\n      background-size: 50%;\n\n      @media (max-width: $screen-md) {\n        background-position: top center;\n        background-size: 80vw;\n        padding-top: 40vw;\n      }\n    }\n\n    ul:first-of-type {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 1rem;\n\n      @media (max-width: $screen-md) {\n        justify-content: center;\n      }\n\n      a {\n        @include button.primary;\n      }\n\n      li:last-child a {\n        --button-color: var(--button-bg);\n        background: transparent;\n      }\n    }\n\n    ul:last-of-type {\n      --stats-bg: var(--community-card-bg);\n      --stats-box-shadow: var(--community-box-shadow);\n      --stats-text-primary: var(--community-text-primary);\n      --stats-stat-bg: var(--community-header-stats-bg);\n      --stats-stat-text: var(--community-text-success);\n\n      @include about.stats;\n    }\n  }\n\n  > section {\n    --community-circle-height: 57rem;\n\n    @include about.section;\n\n    @media (max-width: $screen-md) {\n      /* stylelint-disable-next-line length-zero-no-unit */\n      --community-circle-height: 0rem;\n    }\n\n    &[aria-labelledby=\"meet_our_contributors\"] {\n      grid-template-rows: auto auto auto var(--community-circle-height);\n      margin-top: var(--community-section-gap);\n\n      h2,\n      .section-content > * {\n        grid-column: 2;\n      }\n\n      .section-content {\n        display: contents;\n\n        > ul {\n          // contributor buttons\n\n          display: flex;\n          flex-wrap: wrap;\n          gap: 1rem;\n          margin-top: 1.5rem;\n\n          @media (max-width: $screen-md) {\n            justify-content: center;\n          }\n\n          a {\n            @include button.primary;\n          }\n\n          li:last-child a {\n            --button-color: var(--button-bg);\n            background: transparent;\n          }\n        }\n\n        contributor-list {\n          grid-column: 1;\n          grid-row: 1/5;\n          min-width: 0;\n\n          > ul {\n            display: none;\n          }\n        }\n      }\n    }\n\n    &[aria-labelledby=\"contributor_spotlight\"] {\n      margin-top: calc(\n        var(--community-section-gap) - var(--community-circle-height)\n      );\n\n      h2,\n      .section-content {\n        grid-column: 2;\n      }\n\n      h2 {\n        margin-bottom: 0;\n      }\n\n      .section-content {\n        position: relative;\n\n        &::after {\n          background: linear-gradient(\n            to right,\n            transparent,\n            var(--community-bg-secondary)\n          );\n          bottom: 0;\n          content: \"\";\n          display: block;\n          pointer-events: none;\n          position: absolute;\n          right: 0;\n          top: 0;\n          width: 3rem;\n\n          @media (max-width: $screen-md) {\n            display: none;\n          }\n        }\n      }\n\n      ul {\n        display: flex;\n        gap: 2rem;\n        margin-bottom: 1.5rem;\n        margin-left: -1rem;\n        overflow-x: auto;\n        padding: 2.41rem 1rem;\n        padding-right: 3rem;\n\n        @media (max-width: $screen-md) {\n          margin-left: calc(var(--gutter) * -1);\n          margin-right: calc(var(--gutter) * -1);\n          padding-right: 1rem;\n        }\n      }\n\n      li {\n        background: var(--community-card-bg);\n        border-radius: 0.5rem;\n        box-shadow: var(--community-box-shadow);\n        display: block;\n        flex-shrink: 0;\n        padding: 2.35rem 2.9rem 1.5rem;\n        width: 20rem;\n\n        a {\n          display: block;\n          font-style: italic;\n\n          &::before {\n            content: \"-\";\n          }\n        }\n      }\n\n      blockquote {\n        border: none;\n        padding: 0;\n        position: relative;\n\n        p {\n          color: var(--community-text-secondary);\n          font-style: italic;\n        }\n\n        &::before,\n        &::after {\n          background-image: var(--community-quote-start);\n          background-position: right;\n          background-repeat: no-repeat;\n          background-size: contain;\n          content: \"\";\n          display: block;\n          height: 2em;\n          left: -2.37em;\n          position: absolute;\n          top: -0.69em;\n          width: 2em;\n        }\n\n        &::after {\n          background-image: var(--community-quote-end);\n          background-position: left;\n          bottom: -0.69em;\n          left: auto;\n          right: -2.37em;\n          top: auto;\n        }\n      }\n    }\n\n    &[aria-labelledby=\"learn_how_to_get_started\"] {\n      grid-template-rows: 1fr auto auto auto 1fr;\n      margin-top: var(--community-section-gap);\n\n      &::before {\n        content: \"\";\n        grid-row: 1;\n      }\n\n      .section-content {\n        display: contents;\n      }\n\n      h2,\n      .section-content > * {\n        grid-column: 2;\n      }\n\n      p:last-child {\n        background-image: var(--community-video-bg);\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: contain;\n        // video link\n\n        grid-column: 1;\n        grid-row: 1/6;\n        margin: 0;\n\n        @media (max-width: $screen-md) {\n          display: flex;\n          justify-content: center;\n          margin: 0 auto;\n          max-width: 25rem;\n        }\n\n        a {\n          aspect-ratio: 1;\n          background-image:\n            url(\"../assets/community/youtube-play.svg\"),\n            url(\"../assets/community/video-thumbnail.png\");\n          background-position:\n            43% 50%,\n            36% 50%;\n          background-repeat: no-repeat;\n          background-size: 13%, 60%;\n          clip-path: circle(35%);\n          color: transparent;\n          display: block;\n          overflow: hidden;\n          position: relative;\n          text-indent: -100rem;\n\n          &:focus-visible::after {\n            content: \"\";\n            display: block;\n            height: 30%;\n            left: calc(45% - 40% / 2);\n            outline-color: var(--accent-primary);\n            outline-offset: 1px;\n            outline-style: auto;\n            position: absolute;\n            top: calc(50% - 30% / 2);\n            width: 40%;\n          }\n\n          @media (max-width: $screen-md) {\n            width: 28rem;\n          }\n        }\n      }\n    }\n\n    &[aria-labelledby=\"join_us_in_shaping_a_better_web\"] {\n      display: block;\n      margin-bottom: var(--community-section-gap);\n      margin-top: var(--community-section-gap);\n\n      p {\n        margin-bottom: 2.86rem;\n      }\n\n      ul {\n        --boxes-bg: var(--community-card-bg);\n        --boxes-border: var(--community-card-border);\n        --boxes-shadow: var(--community-box-shadow);\n        --boxes-header-bg: var(--community-card-header-bg);\n\n        @include about.boxes;\n      }\n\n      li a {\n        @include button.primary;\n      }\n    }\n\n    &[aria-labelledby=\"help_us_fix_open_issues\"],\n    &[aria-labelledby=\"help_us_fix_open_issues\"] ~ section {\n      // reset layout/colors for the bottom section\n\n      background: var(--community-bg-primary);\n      color: var(--community-text-primary-alt);\n      display: block;\n      max-width: 100%;\n      padding-bottom: var(--community-section-gap);\n\n      h2,\n      .section-content,\n      .issues-table {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: var(--max-width);\n        padding-left: var(--gutter);\n        padding-right: var(--gutter);\n        width: 100%;\n      }\n    }\n\n    &[aria-labelledby=\"help_us_fix_open_issues\"] {\n      padding-top: var(--community-section-gap);\n\n      .issues-table {\n        margin-top: 1rem;\n      }\n\n      table {\n        background: var(--community-card-bg);\n        border: 1px solid var(--community-table-border);\n        border-collapse: separate;\n        border-radius: 0.5rem;\n        border-spacing: 0;\n        color: var(--community-text-primary);\n      }\n\n      th,\n      td {\n        border: none;\n        padding: 1.5rem;\n\n        @media (max-width: $screen-md) {\n          &:last-of-type {\n            display: none;\n          }\n        }\n      }\n\n      th {\n        background: none;\n        font-size: 1.25rem;\n        font-weight: 500;\n\n        @media (max-width: $screen-md) {\n          display: none;\n        }\n      }\n\n      tbody tr:nth-child(odd) {\n        background: var(--community-table-row);\n      }\n\n      td > div {\n        align-items: baseline;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 1rem 1.5rem;\n      }\n\n      .label {\n        background: var(--community-label-bg);\n        border-radius: 0.25rem;\n        color: var(--community-text-success);\n        font-weight: 500;\n        padding: 0.5rem 1rem;\n      }\n    }\n\n    &[aria-labelledby=\"join_the_conversation\"] {\n      ul {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 1.5rem;\n        margin-bottom: 1.5rem;\n      }\n\n      li {\n        align-items: flex-start;\n        background: var(--community-card-bg);\n        border: 1px solid var(--community-table-border);\n        border-radius: 0.5rem;\n        box-shadow: var(--community-box-shadow);\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: 1.5rem;\n        justify-content: space-between;\n        min-width: min(30rem, 100%);\n        padding: 2rem;\n        padding-left: 8.5rem;\n        position: relative;\n\n        @media (max-width: $screen-md) {\n          padding-left: 5.5rem;\n        }\n\n        &::before {\n          background-image: var(--community-discord-bg);\n          background-repeat: no-repeat;\n          background-size: contain;\n          content: \"\";\n          height: 100%;\n          left: 2rem;\n          position: absolute;\n          width: 5rem;\n\n          @media (max-width: $screen-md) {\n            width: 2rem;\n          }\n        }\n\n        &:last-of-type::before {\n          background-image: var(--community-calls-bg);\n        }\n\n        h3 {\n          font-size: 1.75rem;\n          font-weight: 600;\n\n          @media (max-width: $screen-md) {\n            font-size: 1.25rem;\n          }\n        }\n\n        a {\n          @include button.primary;\n        }\n\n        p {\n          margin: 0;\n        }\n      }\n    }\n  }\n}\n","@mixin _button {\n  --button-font: var(--type-emphasis-m);\n  --button-padding: 0.43rem 1rem;\n  --button-radius: var(--elem-radius, 0.25rem);\n\n  background-color: var(--button-bg);\n  border: 1px solid var(--button-border-color);\n  border-radius: var(--button-radius);\n  color: var(--button-color);\n  display: inline-block;\n  font: var(--button-font);\n  letter-spacing: normal;\n  padding: var(--button-padding);\n  text-align: center;\n  text-decoration: none;\n\n  &.external:after {\n    display: none;\n  }\n\n  &:hover {\n    --button-border-color: var(--button-bg-hover);\n    --button-bg: var(--button-bg-hover);\n  }\n\n  &:active {\n    --button-bg: var(--button-bg-active);\n  }\n}\n\n@mixin primary {\n  --button-bg: var(--button-primary-default);\n  --button-bg-hover: var(--button-primary-hover);\n  --button-bg-active: var(--button-primary-active);\n  --button-border-color: var(--button-primary-default);\n  --button-color: var(--background-primary);\n\n  @include _button;\n}\n\n@mixin secondary {\n  --button-bg: var(--button-secondary-default);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n  --button-border-color: var(--border-primary);\n  --button-color: var(--text-secondary);\n\n  @include _button;\n}\n",".get-involved {\n  background-color: var(--mdn-background-dark);\n\n  section {\n    color: var(--text-primary);\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    line-height: 1.75;\n    margin: 0 auto;\n    max-width: 52rem;\n\n    padding: 2rem 1rem;\n\n    h2 {\n      font-family: var(--font-heading);\n      font-size: 1.3rem;\n      font-weight: 600;\n      line-height: 120%;\n      margin: 0;\n    }\n\n    .get-involved-cta {\n      color: var(--category-color);\n      display: block;\n      margin-top: 1rem;\n    }\n  }\n}\n","blockquote.quote {\n  border: none;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column-reverse;\n  gap: 2rem;\n  margin: 2rem 0;\n  padding: 2rem;\n\n  @media (max-width: 40rem) {\n    flex-wrap: wrap-reverse;\n  }\n\n  p {\n    display: flex;\n    font-style: italic;\n    font-variation-settings: \"slnt\" -10;\n\n    .icon {\n      margin-right: 1rem;\n      margin-top: 0.2rem;\n    }\n  }\n\n  .name {\n    display: inline;\n    font-size: var(--type-base-font-size-rem);\n    margin: 0;\n  }\n}\n",".contributor-spotlight-content-container {\n  margin: 3rem auto;\n  max-width: 52rem;\n  padding: 0 1rem;\n\n  li {\n    line-height: 1.5;\n    list-style-type: disc;\n    margin-bottom: 1rem;\n  }\n\n  ul {\n    padding-left: 1rem;\n  }\n\n  .quote {\n    background-color: var(--category-color-background);\n    color: var(--text-primary);\n\n    .icon {\n      background-color: var(--text-primary);\n    }\n  }\n\n  .profile-image {\n    border-radius: 50%;\n    height: 200px;\n    width: 200px;\n  }\n\n  .profile-header {\n    align-items: center;\n    border-radius: var(--elem-radius);\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n    width: 100%;\n\n    h2 {\n      color: var(--text-primary);\n      margin-bottom: 0;\n      margin-top: 0;\n    }\n\n    .username {\n      background-color: var(--category-color);\n      color: var(--text-invert);\n      font-size: 1.75rem;\n      padding: 0.2rem 0.4rem;\n    }\n  }\n\n  h2 {\n    a {\n      color: var(--text-primary);\n      text-decoration: none;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n@use \"../../ui/base/mdn\" as *;\n\nmain.advertise-with-us {\n  margin-bottom: 3rem;\n  width: 100%;\n\n  .stats-container {\n    background-color: var(--background-primary);\n    color: var(--text-primary);\n    margin-bottom: 3rem;\n    width: 100%;\n  }\n\n  section {\n    margin: 0 auto;\n    max-width: 52rem;\n    padding: 0 1rem;\n\n    &.stats-header {\n      align-items: center;\n      display: flex;\n      flex-direction: column;\n      padding: 0 0.5rem 2rem;\n    }\n\n    h1 {\n      font-size: 3rem;\n      margin-top: 8rem;\n      text-align: center;\n      @include mify;\n\n      &::before {\n        background-color: var(--mdn-color-ads);\n      }\n\n      &::after {\n        text-decoration-color: var(--mdn-color-ads);\n      }\n    }\n\n    .quote {\n      &.owd {\n        background-color: var(--mdn-color-ads);\n        color: var(--background-primary);\n\n        .icon {\n          background-color: var(--background-primary);\n        }\n      }\n\n      &.pab {\n        background-color: var(--background-primary);\n        color: var(--text-primary);\n\n        .icon {\n          background-color: var(--text-primary);\n        }\n      }\n    }\n\n    .stats {\n      display: grid;\n      gap: 0.3em;\n\n      @media (max-width: $screen-md) {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      @media (max-width: $screen-sm) {\n        grid-template-columns: 1fr;\n      }\n\n      @media (min-width: $screen-md) {\n        grid-template-columns: 1fr 1fr 1fr 1fr;\n      }\n\n      li {\n        align-items: center;\n        background: var(--mdn-color-ads);\n        color: var(--background-primary);\n        display: flex;\n        flex-direction: column;\n        padding: 0.5rem 2rem;\n\n        .number {\n          font-size: 3rem;\n\n          svg {\n            transform: translateY(0.125em);\n          }\n        }\n\n        .legend {\n          font-size: 0.8rem;\n          max-width: 5rem;\n          text-align: center;\n        }\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.blog {\n  --background-toc-active: var(--apis-accent-background-color);\n  --category-color: var(--apis-accent-color);\n\n  .top-navigation {\n    --text-link: var(--category-color);\n  }\n}\n\n.blog-container {\n  --author-gap: 1rem;\n  --avatar-size: 3rem;\n  margin: 0 auto;\n  max-width: min(calc(80vw + 4rem), var(--max-width));\n  padding: 2rem 1rem;\n\n  .sponsored {\n    color: var(--icon-primary);\n\n    &::before {\n      background-color: var(--icon-primary);\n      content: \"\";\n      display: inline-block;\n      height: 1em;\n      margin-bottom: -0.15em;\n      margin-right: 0.3em;\n      mask-image: url(\"../assets/icons/note-info.svg\");\n      mask-position: center;\n      mask-repeat: no-repeat;\n      width: 1em;\n    }\n  }\n\n  .date-author,\n  .author {\n    align-content: flex-start;\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  .date-author {\n    column-gap: 1.5rem;\n    padding-left: calc(var(--avatar-size) + var(--author-gap));\n  }\n\n  .author {\n    font-weight: var(--font-body-strong-weight);\n    gap: var(--author-gap);\n    margin-left: calc((var(--avatar-size) + var(--author-gap)) * -1);\n\n    &::after {\n      margin-left: calc(4px - var(--author-gap));\n    }\n\n    img {\n      border: none !important;\n      border-radius: 3rem;\n      height: var(--avatar-size);\n      margin: 0;\n      object-fit: cover;\n      width: var(--avatar-size);\n    }\n  }\n\n  figure.blog-image {\n    margin: 0 auto 2rem;\n    width: fit-content;\n\n    img {\n      background: transparent;\n      border: none !important;\n      margin: 0 0 0.125rem;\n      width: 100%;\n    }\n\n    figcaption {\n      font-size: smaller;\n      margin-left: auto;\n      width: fit-content;\n    }\n  }\n\n  h1 {\n    margin-top: 1rem;\n  }\n\n  &.blog-index {\n    > header {\n      width: 100%;\n\n      > h1 {\n        margin: 0 auto 2rem;\n        width: fit-content;\n\n        &::before {\n          background-color: var(--category-color);\n        }\n\n        &::after {\n          text-decoration-color: var(--category-color);\n        }\n      }\n    }\n\n    .article-list {\n      column-gap: 2rem;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n\n      @media (max-width: $screen-lg) {\n        grid-template-columns: auto;\n      }\n    }\n\n    article {\n      border: 1px solid var(--border-primary);\n      border-radius: 1rem;\n      display: grid;\n      grid-row: span 6;\n      grid-template-rows: subgrid;\n      margin-top: 2rem;\n      padding: 2rem;\n\n      a.button {\n        margin-left: auto;\n        text-decoration: var(--button-bg);\n      }\n\n      header {\n        display: grid;\n        flex-direction: column;\n        grid-row: span 3;\n        grid-template-rows: subgrid;\n\n        figure.blog-image {\n          margin-bottom: 0;\n\n          img {\n            margin-bottom: 0;\n            max-height: 200px;\n            width: auto;\n          }\n        }\n\n        h2:first-of-type {\n          align-self: center;\n          font: var(--type-heading-h3);\n          font-size: 1.75rem;\n          font-weight: 400;\n          margin-bottom: 2.25rem;\n          margin-top: 1.5rem;\n        }\n      }\n\n      p {\n        margin-bottom: 2.25rem;\n        margin-top: 1.5rem;\n      }\n\n      footer {\n        align-items: center;\n        align-self: end;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 1rem;\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.blog-post-container {\n  display: grid;\n  gap: 3rem;\n  grid-template-areas:\n    \"post\"\n    \"newsletter\";\n  padding: 0;\n  width: 100%;\n\n  @media (min-width: $screen-lg) {\n    grid-template-areas:\n      \"post toc\"\n      \"newsletter toc\";\n    grid-template-columns: minmax(auto, 100%) minmax(0, 12rem);\n  }\n\n  @media (min-width: $screen-xl) {\n    grid-template-areas:\n      \"nothing post toc\"\n      \"nothing newsletter toc\";\n    grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr);\n  }\n\n  @media (min-width: $screen-xxl) {\n    grid-template-areas:\n      \"toc post place\"\n      \"toc newsletter place\";\n    grid-template-columns: minmax(15rem, 1fr) minmax(0, 52rem) minmax(\n        15rem,\n        1fr\n      );\n  }\n\n  > .toc-container {\n    --offset: var(--top-nav-height);\n    display: none;\n\n    @media (min-width: $screen-lg) {\n      display: flex;\n      flex-direction: column;\n      grid-area: toc;\n\n      .toc > nav {\n        margin-top: 2rem;\n      }\n    }\n    @media (min-width: $screen-xxl) {\n      display: contents;\n\n      .place.side,\n      .toc {\n        height: max-content;\n        mask-image: linear-gradient(\n          to bottom,\n          rgba(0, 0, 0, 0) 0%,\n          rgb(0, 0, 0) 3rem calc(100% - 3rem),\n          rgba(0, 0, 0, 0) 100%\n        );\n        max-height: calc(100vh - var(--offset));\n        overflow: auto;\n        position: sticky;\n        top: var(--offset);\n      }\n\n      .place.side {\n        grid-area: place;\n        margin-top: 0;\n\n        > .pong-box2,\n        > .pong-box {\n          margin-top: 2rem;\n        }\n      }\n    }\n  }\n\n  > .section-newsletter {\n    grid-area: newsletter;\n  }\n\n  > .blog-post {\n    grid-area: post;\n\n    @media (min-width: $screen-lg) {\n      max-width: 52rem;\n    }\n\n    + .section-newsletter h2 {\n      font: var(--type-heading-h3);\n      margin: 0;\n    }\n\n    .previous-next {\n      display: flex;\n      gap: 1rem;\n\n      @media (max-width: $screen-md) {\n        flex-direction: column-reverse;\n      }\n\n      a {\n        color: var(--text-primary);\n        display: flex;\n        gap: 1rem;\n        text-decoration: none;\n        width: 100%;\n\n        &:hover h2 {\n          text-decoration: underline;\n        }\n\n        &:active {\n          background: none;\n        }\n\n        @media (min-width: $screen-md) {\n          &.previous,\n          &.next {\n            &::before,\n            &::after {\n              align-self: center;\n              background-color: var(--text-primary);\n              flex-shrink: 0;\n              height: 1rem;\n              mask-position: center;\n              mask-repeat: no-repeat;\n              vertical-align: middle;\n              width: 1rem;\n            }\n          }\n\n          &.previous::before {\n            content: \"\";\n            mask-image: url(\"../assets/icons/previous.svg\");\n          }\n\n          &.next::after {\n            content: \"\";\n            mask-image: url(\"../assets/icons/next.svg\");\n          }\n        }\n      }\n\n      article {\n        margin: 0 auto;\n      }\n\n      h2:first-of-type {\n        color: var(--text-link);\n        font-size: 1rem;\n        margin: 0;\n        text-align: center;\n\n        strong {\n          color: var(--text-primary);\n          display: block;\n          font-size: 0.8em;\n          font-weight: normal;\n          line-height: 1.2rem;\n        }\n      }\n    }\n  }\n}\n",".section-newsletter {\n  margin: 0 auto;\n  max-width: 35rem;\n  padding: 2rem;\n\n  input[type=\"email\"],\n  button {\n    width: 100%;\n  }\n\n  form {\n    margin-bottom: 2rem;\n  }\n}\n","svg.topic-icon {\n  circle {\n    fill: var(--background-primary);\n  }\n\n  path {\n    fill: var(--curriculum-color-topic);\n  }\n}\n","@use \"../ui/vars\" as *;\n\n// .with sidebar is needed to\n.curriculum-content-container.curriculum-overview,\n.curriculum-content-container {\n  .curriculum-content {\n    .modules {\n      input[type=\"radio\"]:not(:checked) ~ a.lets-begin,\n      input[type=\"radio\"]:not(:checked) ~ ol.modules-list {\n        display: none;\n      }\n    }\n\n    ol.modules-list-list {\n      display: grid;\n      grid-template-areas:\n        \"started core  extensions\"\n        \"hr      hr    hr\"\n        \"mod     mod   mod\"\n        \"cta     cta   cta\";\n\n      grid-template-columns: auto;\n      margin: 0;\n      padding: 0;\n\n      @media (min-width: $screen-sm) {\n        grid-template-areas:\n          \"started core  extensions spacer\"\n          \"hr      hr    hr         hr\"\n          \"mod     mod   mod        mod\"\n          \"cta     cta   cta        cta\";\n\n        grid-template-columns: auto auto auto 1fr;\n      }\n\n      &::before {\n        border: none;\n        border-top: 1px solid var(--text-inactive);\n        content: \"\";\n        grid-area: hr;\n        margin: 0 0 1.5rem;\n        width: 100%;\n      }\n\n      li.modules-list-list-item {\n        display: contents;\n\n        > input:checked + label {\n          color: var(--text-primary);\n\n          &::before {\n            height: 0;\n            position: absolute;\n            transform: translate3d(-0.75rem, 0.75rem, 0);\n            width: 0;\n          }\n        }\n\n        > input:checked:focus-visible + label {\n          outline-color: var(--accent-primary);\n          outline-offset: 1px;\n          outline-style: auto;\n        }\n\n        > input:not(:checked) + label {\n          color: var(--text-secondary);\n          opacity: 0.775;\n        }\n\n        > label {\n          cursor: pointer;\n          width: max-content;\n        }\n\n        &#modules-0 {\n          > label,\n          > input {\n            grid-area: started;\n          }\n\n          > input:checked + label::before {\n            content: url(\"../assets/icons/curriculum-modules-underline.svg#1\");\n          }\n        }\n\n        &#modules-1 {\n          > label,\n          > input {\n            grid-area: core;\n\n            @media (min-width: $screen-sm) {\n              margin-left: 2rem;\n            }\n          }\n\n          > input:checked + label::before {\n            content: url(\"../assets/icons/curriculum-modules-underline.svg#2\");\n          }\n        }\n\n        &#modules-2 {\n          > label,\n          > input {\n            grid-area: extensions;\n\n            @media (min-width: $screen-sm) {\n              margin-left: 2rem;\n            }\n          }\n\n          > input:checked + label::before {\n            content: url(\"../assets/icons/curriculum-modules-underline.svg#3\");\n          }\n        }\n\n        > ol.modules-list {\n          grid-area: mod;\n          margin: 0;\n        }\n\n        > a.lets-begin {\n          grid-area: cta;\n          margin-left: 0.5rem;\n          margin-top: 2rem;\n          width: fit-content;\n\n          @media (min-width: $screen-md) {\n            margin-left: 0;\n          }\n        }\n      }\n    }\n\n    ol.modules-list {\n      display: grid;\n      flex-wrap: wrap;\n      gap: 1rem;\n      grid-template-columns: 1fr 1fr 1fr;\n      margin: 0;\n      overflow: scroll;\n      padding: 0.5rem;\n      scroll-snap-type: inline mandatory;\n\n      @media (min-width: $screen-md) {\n        overflow: inherit;\n        padding: 0;\n      }\n\n      :focus-visible {\n        outline-offset: -2px;\n      }\n\n      li.module-list-item {\n        --spacing: 1rem;\n        --icon-size: 4rem;\n        display: block;\n\n        > a {\n          background-color: var(--curriculum-bg-color-list-item-body);\n          border: 1px solid var(--curriculum-border-color);\n          border-radius: var(--elem-radius);\n          box-shadow: var(--curriculum-shadow);\n          display: flex;\n          flex-direction: column;\n          justify-self: center;\n          max-width: 20rem;\n          min-width: 15rem;\n          overflow: auto;\n          padding: 0;\n          scroll-snap-align: center;\n          text-decoration: none;\n          width: 100%;\n\n          &:hover {\n            border-color: var(--curriculum-border-color-hover);\n            text-decoration: none;\n          }\n\n          @media (min-width: $screen-md) {\n            min-width: initial;\n          }\n\n          > header {\n            align-items: center;\n            background-color: var(--curriculum-bg-color-list-item-header);\n            display: flex;\n            flex-direction: column;\n            font-weight: var(--font-body-strong-weight);\n            height: 10.5rem;\n            height: calc(3 * var(--spacing) + var(--icon-size) + 2lh);\n            padding: var(--spacing);\n            row-gap: var(--spacing);\n\n            svg.topic-icon {\n              height: var(--icon-size);\n              width: var(--icon-size);\n\n              circle {\n                fill: var(--curriculum-bg-color-list-item-icon);\n              }\n\n              path {\n                fill: var(--curriculum-color-list-item-icon);\n              }\n            }\n\n            > span {\n              color: var(--text-primary);\n              margin: 0 auto;\n              text-align: center;\n            }\n          }\n\n          > section {\n            align-items: center;\n            display: flex;\n            flex-direction: column;\n            font-size: var(--type-smaller-font-size);\n            height: 11rem;\n            justify-content: space-between;\n            padding: var(--spacing);\n\n            p {\n              color: var(--text-secondary);\n              margin: 0;\n              text-align: center;\n            }\n\n            p:last-child {\n              color: var(--curriculum-color-topic);\n              font-weight: 600;\n            }\n          }\n        }\n      }\n\n      @media (min-width: $screen-sm) {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      @media (min-width: $screen-xxl) {\n        grid-template-columns: 1fr 1fr 1fr;\n      }\n    }\n  }\n}\n",".curriculum-prev-next {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 1rem;\n  justify-content: space-between;\n  margin-top: 2rem;\n  width: 100%;\n\n  a {\n    margin: 0.5rem 0;\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.curriculum-content-container.curriculum-module {\n  .curriculum-content {\n    > header {\n      column-gap: 1.5rem;\n      display: grid;\n      grid-template-areas:\n        \". group\"\n        \"icon heading\"\n        \"icon category\";\n      justify-content: flex-start;\n\n      .topic-icon {\n        --background-primary: var(--curriculum-bg-color-topic);\n        align-self: flex-start;\n        grid-area: icon;\n        height: 4rem;\n        width: 4rem;\n\n        + h1 {\n          grid-area: heading;\n          margin-bottom: 0;\n        }\n      }\n\n      p.module-topic {\n        color: var(--curriculum-color-topic);\n        font-size: var(--type-smaller-font-size);\n        grid-area: category;\n        margin: 0;\n        margin-top: 0.5rem;\n\n        &::before {\n          content: \"Category: \";\n        }\n      }\n\n      p.module-group {\n        align-self: center;\n        background-color: var(--curriculum-module-label-bg-color);\n        border-radius: var(--elem-radius);\n        color: var(--curriculum-module-label-color);\n        font-size: var(--type-smaller-font-size);\n        grid-area: group;\n        height: max-content;\n        margin: 0;\n        margin-bottom: 0.25rem;\n        padding: 0.125rem 0.5rem;\n        width: fit-content;\n      }\n    }\n\n    p.curriculum-resources {\n      margin-bottom: 0.5rem;\n      margin-top: 2rem;\n\n      + ul {\n        padding-left: 2rem;\n\n        > li {\n          list-style-image: var(--curriculum-module-mdn-resource);\n\n          &.curriculum-external-li {\n            list-style-image: url(\"../assets/icons/curriculum-ext-resource.svg\");\n          }\n\n          em {\n            background: var(--curriculum-bg-color);\n            border-radius: 1em;\n            color: var(--text-primary);\n            display: inline-block;\n            font-size: 0.5rem;\n            font-weight: bold;\n            line-height: 1.7;\n            padding: 0 0.4em;\n            text-rendering: optimizeLegibility;\n            text-transform: uppercase;\n            vertical-align: super;\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.curriculum {\n  --background-toc-active: var(--curriculum-bg-color);\n  --category-color: var(--curriculum-category-color);\n\n  --curriculum-bg-color-topic: var(--curriculum-bg-color);\n  --curriculum-color-topic: var(--curriculum-color);\n\n  .topic-standards {\n    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-standards);\n    --curriculum-color-topic: var(--curriculum-color-topic-standards);\n    --curriculum-bg-color-list-item-header: var(\n      --curriculum-bg-color-list-item-topic-standards\n    );\n    --curriculum-color-list-item-icon: var(\n      --curriculum-color-list-item-icon-topic-standards\n    );\n    --curriculum-bg-color-list-item-icon: var(\n      --curriculum-bg-color-list-item-icon-topic-standards\n    );\n  }\n\n  .topic-styling {\n    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-styling);\n    --curriculum-color-topic: var(--curriculum-color-topic-styling);\n    --curriculum-bg-color-list-item-header: var(\n      --curriculum-bg-color-list-item-topic-styling\n    );\n    --curriculum-color-list-item-icon: var(\n      --curriculum-color-list-item-icon-topic-styling\n    );\n    --curriculum-bg-color-list-item-icon: var(\n      --curriculum-bg-color-list-item-icon-topic-styling\n    );\n  }\n\n  .topic-scripting {\n    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-scripting);\n    --curriculum-color-topic: var(--curriculum-color-topic-scripting);\n    --curriculum-bg-color-list-item-header: var(\n      --curriculum-bg-color-list-item-topic-scripting\n    );\n    --curriculum-color-list-item-icon: var(\n      --curriculum-color-list-item-icon-topic-scripting\n    );\n    --curriculum-bg-color-list-item-icon: var(\n      --curriculum-bg-color-list-item-icon-topic-scripting\n    );\n  }\n\n  .topic-tooling {\n    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-tooling);\n    --curriculum-color-topic: var(--curriculum-color-topic-tooling);\n    --curriculum-bg-color-list-item-header: var(\n      --curriculum-bg-color-list-item-topic-tooling\n    );\n    --curriculum-color-list-item-icon: var(\n      --curriculum-color-list-item-icon-topic-tooling\n    );\n    --curriculum-bg-color-list-item-icon: var(\n      --curriculum-bg-color-list-item-icon-topic-tooling\n    );\n  }\n\n  .topic-practices {\n    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-practices);\n    --curriculum-color-topic: var(--curriculum-color-topic-practices);\n    --curriculum-bg-color-list-item-header: var(\n      --curriculum-bg-color-list-item-topic-practices\n    );\n    --curriculum-color-list-item-icon: var(\n      --curriculum-color-list-item-icon-topic-practices\n    );\n    --curriculum-bg-color-list-item-icon: var(\n      --curriculum-bg-color-list-item-icon-topic-practices\n    );\n  }\n\n  .curriculum-content {\n    .modules {\n      input[type=\"radio\"]:not(:checked) ~ ol {\n        display: none;\n      }\n    }\n  }\n\n  .article-actions-container {\n    // Duplicated from ../ui/molecules/grids/document-page.scss\n    display: flex;\n  }\n\n  .sidebar {\n    > ol:first-of-type > li:first-of-type {\n      font-size: var(--type-base-font-size-rem);\n      font-weight: bold;\n    }\n\n    li > em {\n      background-color: var(--background-toc-active);\n      border-bottom-right-radius: 0.25rem;\n      border-left: 2px solid var(--category-color);\n      border-top-right-radius: 0.25rem;\n      display: inline-block;\n      font-style: normal;\n      font-variation-settings: normal;\n      font-weight: 600;\n      padding: 0.25rem 0.5rem;\n    }\n  }\n}\n\n.curriculum-content-container {\n  > .curriculum-content {\n    max-width: 100%;\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      a:link,\n      a:visited {\n        color: var(--text-primary);\n        text-decoration: none;\n      }\n\n      a:hover,\n      a:focus {\n        text-decoration: underline;\n      }\n\n      a:active {\n        background-color: transparent;\n      }\n\n      a[href^=\"#\"] {\n        &::before {\n          color: var(--text-inactive);\n          content: \"#\";\n          display: inline-block;\n          font-size: 0.7em;\n          line-height: 1;\n          margin-left: -0.8em;\n          text-decoration: none;\n          visibility: hidden;\n          width: 0.8em;\n        }\n\n        &:hover {\n          &::before {\n            visibility: visible;\n          }\n        }\n      }\n    }\n  }\n\n  &,\n  .button {\n    --button-padding: 1rem;\n  }\n\n  .curriculum-sidebar,\n  .toc,\n  .curriculum-content {\n    padding-bottom: 3rem;\n    padding-top: 3rem;\n  }\n\n  .curriculum-content {\n    a {\n      color: var(--text-link);\n\n      &:link,\n      &:visited {\n        text-decoration: underline;\n\n        &.button {\n          text-decoration: none;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        text-decoration: none;\n      }\n\n      &:visited:not([href^=\"#\"]) {\n        // Distinguish visited links (excl. anchor links).\n        color: var(--text-visited);\n      }\n    }\n\n    ol,\n    ul {\n      li > p {\n        margin: 0;\n      }\n    }\n  }\n\n  &.with-sidebar {\n    > .sidebar-container {\n      padding-top: 4rem;\n    }\n\n    .curriculum-content {\n      grid-area: main;\n    }\n  }\n\n  &.curriculum-overview,\n  &.curriculum-module {\n    .curriculum-content {\n      > header > h1 {\n        margin-bottom: 2rem;\n\n        > span {\n          color: var(--curriculum-color);\n        }\n      }\n\n      .module-contents {\n        > h2 {\n          margin-bottom: 2rem;\n          margin-top: 4rem;\n        }\n      }\n\n      section h2:first-of-type {\n        margin-top: 2rem;\n      }\n\n      blockquote.curriculum-notes {\n        background-color: var(--curriculum-bg-color-note);\n        border: 0;\n        border-radius: var(--elem-radius);\n        margin: 1rem;\n        padding: 1rem;\n\n        ol,\n        ul {\n          padding-left: 1rem;\n\n          li:last-child {\n            margin-bottom: 0;\n          }\n        }\n\n        ol,\n        ul,\n        p {\n          margin-top: 0.5rem;\n        }\n\n        > p:first-child {\n          // The \"Notes:\" paragraph.\n          margin-top: 0;\n        }\n\n        > :last-child {\n          margin-bottom: 0;\n        }\n      }\n\n      p.curriculum-outcomes {\n        display: flex;\n        font-weight: var(--font-body-strong-weight);\n        margin-bottom: 0.5rem;\n\n        &::before {\n          content: url(\"../assets/icons/curriculum-resources.svg\");\n          display: block;\n          height: 24px;\n          margin-right: 0.5rem;\n          width: 24px;\n        }\n      }\n\n      ol,\n      ul {\n        margin: 1rem 0;\n        padding-left: 2rem;\n\n        ol,\n        ul {\n          margin: 0;\n        }\n      }\n\n      li {\n        list-style-type: disc;\n        margin: 0.5rem 0;\n      }\n\n      scrim-inline {\n        aspect-ratio: 1.5;\n        display: block;\n        margin: 0.5rem auto;\n        max-width: 36rem;\n        width: 100%;\n      }\n\n      p:has(> scrim-inline:only-child) {\n        margin: 1rem 0;\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.curriculum-content-container.curriculum-about {\n  .curriculum-content {\n    // Workaround so last toc item works.\n    margin-bottom: 5rem;\n\n    h2#motivation + div {\n      li {\n        list-style-image: var(--curriculum-bullet);\n      }\n    }\n\n    h3 {\n      align-items: center;\n      display: flex;\n      gap: 1.25rem;\n\n      &::before {\n        display: inline-block;\n        height: 2.5rem;\n        width: 2.5rem;\n      }\n\n      &#students::before {\n        content: var(--curriculum-about-students);\n      }\n\n      &#educators::before {\n        content: var(--curriculum-about-educators);\n      }\n\n      &#whats_covered::before {\n        content: var(--curriculum-about-covered);\n      }\n\n      &#level_of_detail::before {\n        content: var(--curriculum-about-detail);\n      }\n\n      &#what_is_not_covered::before {\n        content: var(--curriculum-about-not);\n      }\n    }\n\n    h3#educators + .section-content blockquote:not(.curriculum-notes) {\n      align-items: center;\n      // PDF download banner\n\n      background-color: var(--curriculum-bg-color-note);\n      border: 0;\n      border-radius: var(--elem-radius);\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      margin: 1rem;\n      padding: 1rem;\n\n      > p:last-child a:only-child {\n        --button-bg: var(--button-secondary-default);\n        --button-border-color: var(--border-primary);\n        --button-color: var(--text-secondary);\n        --button-bg-hover: var(--button-secondary-hover);\n        --button-bg-active: var(--button-secondary-active);\n\n        --button-font: var(--type-emphasis-m);\n        --button-padding: 0.43rem 1rem;\n        --button-radius: 0.25rem;\n\n        background-color: var(--button-bg);\n        border: 1px solid var(--button-border-color);\n        border-radius: var(--button-radius);\n        color: var(--button-color);\n        display: inline-block;\n        font: var(--button-font);\n        letter-spacing: normal;\n        padding: var(--button-padding);\n        text-align: center;\n        text-decoration: none;\n\n        &.external:after {\n          display: none;\n        }\n\n        &:hover {\n          --button-border-color: var(--button-bg-hover);\n          --button-bg: var(--button-bg-hover);\n        }\n\n        &:active {\n          --button-bg: var(--button-bg-active);\n        }\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.curriculum-content-container.curriculum-landing {\n  background-color: var(--curriculum-bg-color-landing);\n  margin: 0;\n  max-width: 100%;\n  padding: 0;\n  width: 100%;\n\n  > article {\n    > header,\n    > section {\n      margin: 0 auto 3rem;\n      max-width: min(var(--max-width), 74rem);\n      padding-left: var(--gutter);\n      padding-right: var(--gutter);\n      width: 100%;\n    }\n  }\n\n  .curriculum-content {\n    padding-top: 0;\n\n    ol.modules-list {\n      @media (min-width: $screen-sm) {\n        grid-template-columns: 1fr 1fr;\n      }\n      @media (min-width: $screen-md) {\n        grid-template-columns: 1fr 1fr 1fr;\n      }\n      @media (min-width: $screen-lg) {\n        grid-template-columns: 1fr 1fr 1fr 1fr;\n      }\n    }\n  }\n\n  header.landing-header {\n    display: grid;\n    grid-template-areas: \"copy\" \"svg\";\n    @media (min-width: $screen-md) {\n      grid-template-areas: \"copy svg\";\n      grid-template-columns: 30rem auto;\n    }\n\n    > svg {\n      align-self: end;\n      grid-area: svg;\n      justify-self: end;\n      margin-bottom: 3rem;\n      max-width: 28rem;\n      width: 100%;\n      z-index: 1;\n      @media (min-width: $screen-md) {\n        margin-bottom: 0;\n      }\n\n      #icons-bg {\n        fill: var(--curriculum-bg-color-landing-top-icon);\n      }\n\n      .laptop {\n        fill: var(--curriculum-color-landing-laptop);\n      }\n    }\n\n    > section {\n      grid-area: copy;\n      margin-right: auto;\n      margin-top: 3rem;\n      max-width: 30rem;\n      padding-right: 1rem;\n      @media (min-width: $screen-md) {\n        margin-bottom: 4rem;\n      }\n\n      h1 {\n        color: var(--curriculum-color-topic);\n        font-size: 2rem;\n        margin-bottom: 0.5rem;\n        @media (min-width: $screen-md) {\n          font-size: 2.5rem;\n        }\n      }\n\n      h2 {\n        font-size: 1.25rem;\n        margin-bottom: 1.5rem;\n        margin-top: 0.5rem;\n        @media (min-width: $screen-md) {\n          font-size: 2rem;\n          margin-bottom: 2rem;\n        }\n      }\n\n      p {\n        color: var(--text-secondary);\n      }\n    }\n  }\n\n  .landing-about-container {\n    background-color: var(--curriculum-bg-large-color);\n    margin: 0;\n    margin-top: -6rem;\n    max-width: 100%;\n\n    .landing-about {\n      display: grid;\n      grid-template-areas:\n        \"li\"\n        \"h2\"\n        \"p1\"\n        \"p2\"\n        \"p3\"\n        \"p4\"\n        \"scrim\";\n      grid-template-columns: 1fr;\n      margin: 0 auto 3rem;\n      max-width: min(var(--max-width), 74rem);\n      @media (min-width: $screen-lg) {\n        column-gap: 1rem;\n        grid-template-areas:\n          \"li li    li \"\n          \"h2 .     scrim\"\n          \"p1 .     scrim\"\n          \"p2 .     scrim\"\n          \"p3 arrow scrim\"\n          \"p4 arrow scrim\";\n        grid-template-columns: 1fr 7rem 24rem;\n      }\n\n      h2 {\n        grid-area: h2;\n        margin: 1rem 0;\n      }\n\n      > div.about-content {\n        display: contents;\n\n        ul {\n          align-items: start;\n          background-color: var(--curriculum-bg-color-landing-about-ul);\n          border-radius: var(--elem-radius);\n          box-shadow: var(--curriculum-shadow-landing-about-ul);\n          color: var(--text-secondary);\n          display: grid;\n          grid-area: li;\n          grid-template-columns: auto auto auto;\n          justify-content: center;\n          margin: auto;\n          min-height: 5rem;\n          padding: 1rem;\n          transform: translateY(-1rem);\n          width: 100%;\n          @media (min-width: $screen-sm) {\n            align-items: center;\n            gap: 1rem;\n          }\n          @media (min-width: $screen-md) {\n            justify-content: start;\n          }\n          @media (min-width: $screen-lg) {\n            justify-content: center;\n          }\n\n          > li {\n            margin: 0 0.5rem;\n            text-align: center;\n            @media (min-width: $screen-sm) {\n              margin: 0 1rem;\n              width: max-content;\n            }\n            @media (min-width: $screen-md) {\n              align-items: center;\n              display: inline-flex;\n              gap: 1rem;\n            }\n\n            &::before {\n              display: block;\n              height: 3rem;\n              margin: 0 auto;\n              width: 3rem;\n              @media (min-width: $screen-md) {\n                display: initial;\n                margin: 0;\n              }\n            }\n\n            &:nth-child(1)::before {\n              content: var(--curriculum-landing-about-beginner);\n            }\n\n            &:nth-child(2)::before {\n              content: var(--curriculum-landing-about-pace);\n            }\n\n            &:nth-child(3)::before {\n              content: var(--curriculum-landing-about-free);\n            }\n          }\n        }\n\n        p {\n          align-items: center;\n          color: var(--text-secondary);\n          display: grid;\n          grid-template-columns: auto auto;\n          justify-content: start;\n          margin: 1rem 0;\n\n          &::before {\n            align-self: start;\n            display: block;\n            height: 4rem;\n            width: 4rem;\n          }\n\n          &:nth-child(2) {\n            grid-area: p1;\n\n            &::before {\n              content: var(--curriculum-landing-about-bullet);\n            }\n          }\n\n          &:nth-child(3) {\n            grid-area: p2;\n\n            &::before {\n              content: var(--curriculum-landing-about-bullet);\n            }\n          }\n\n          &:nth-child(4) {\n            grid-area: p3;\n\n            &::before {\n              content: var(--curriculum-landing-about-bullet);\n            }\n          }\n\n          &:nth-child(5) {\n            grid-area: p4;\n\n            a {\n              color: var(--text-primary);\n              font-weight: var(--font-body-strong-weight);\n              margin-left: 4rem;\n              text-decoration: underline;\n\n              &:hover,\n              &:active {\n                text-decoration: none;\n              }\n            }\n          }\n        }\n      }\n\n      > div.arrow {\n        background-image: var(--curriculum-landing-arrow);\n        background-position: center;\n        background-repeat: no-repeat;\n        grid-area: arrow;\n      }\n\n      .scrim-wrapper {\n        display: flex;\n        flex-direction: column;\n        grid-area: scrim;\n        justify-content: center;\n        justify-self: center;\n        margin-top: 1rem;\n        max-width: 24rem;\n\n        @media (min-width: $screen-lg) {\n          justify-self: end;\n          margin-top: 0;\n        }\n\n        .scrim-border {\n          background-image: var(--curriculum-scrim-bg);\n          background-position: bottom right;\n          background-repeat: no-repeat;\n          height: 16rem;\n          width: 100%;\n        }\n\n        scrim-inline {\n          background: #000;\n          display: block;\n          height: 14.25rem;\n          max-width: calc(100vw - var(--gutter) * 2);\n          width: 22rem;\n        }\n\n        p {\n          margin: 0;\n          padding: 1rem 0;\n        }\n      }\n    }\n  }\n\n  .landing-stairway {\n    background-color: var(--background-secondary);\n    margin: 0;\n    max-width: 100%;\n\n    > div {\n      color: var(--text-secondary);\n      display: grid;\n      grid-template-areas: \"a\" \"b\";\n      grid-template-columns: auto;\n      grid-template-rows: auto auto;\n      justify-content: center;\n      margin: 0 auto 3rem;\n      max-width: min(var(--max-width), 74rem);\n      padding: 2rem;\n      padding-left: var(--gutter);\n      padding-right: var(--gutter);\n      width: 100%;\n\n      @media (min-width: $screen-md) {\n        grid-template-columns: min(100%, 34rem);\n      }\n      @media (min-width: $screen-lg) {\n        grid-template-areas: \"a b\";\n        grid-template-columns: 1fr 1.4fr;\n      }\n\n      svg {\n        width: 100%;\n      }\n\n      > #stairway1-container {\n        --fs: clamp(1rem, calc(3 * calc(100vw / 100)), 1.75rem);\n\n        grid-area: a;\n        margin: 0;\n        position: relative;\n        transform: translateX(2vw);\n        width: 100%;\n\n        @media (min-width: $screen-lg) {\n          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);\n        }\n\n        #stairway1 {\n          font-size: var(--fs);\n          left: 32%;\n          position: absolute;\n          top: 18%;\n\n          > span {\n            display: block;\n            line-height: calc(1.25 * var(--fs));\n            text-wrap: nowrap;\n            width: max-content;\n          }\n\n          .color {\n            color: var(--curriculum-color);\n          }\n        }\n      }\n\n      > #stairway2-container {\n        --fs: clamp(0.75rem, calc(1.25 * calc(100vw / 100)), 1rem);\n\n        grid-area: b;\n        position: relative;\n        transform: translateX(-5vw);\n\n        @media (min-width: $screen-md) {\n          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);\n        }\n\n        #stairway2 {\n          font-size: var(--fs);\n          height: 100%;\n          left: 0;\n          margin: 0;\n          position: absolute;\n          top: 0;\n          width: calc(100% + 5vw);\n\n          > span {\n            display: block;\n            line-height: calc(1.25 * var(--fs));\n            max-width: 10rem;\n            position: absolute;\n            text-wrap: wrap;\n            @media (min-width: $screen-md) {\n              max-width: initial;\n              text-wrap: nowrap;\n            }\n          }\n\n          #stair-1 {\n            left: 47%;\n            top: 36%;\n          }\n\n          #stair-2 {\n            left: 33%;\n            top: 52%;\n          }\n\n          #stair-3 {\n            left: 23%;\n            top: 71%;\n          }\n\n          #stair-4 {\n            left: 8%;\n            top: 86%;\n          }\n          @media (min-width: $screen-md) {\n            #stair-1 {\n              left: 35%;\n              top: 53%;\n            }\n\n            #stair-2 {\n              left: 27%;\n              top: 65%;\n            }\n\n            #stair-3 {\n              left: 13%;\n              top: 77%;\n            }\n\n            #stair-4 {\n              left: 0%;\n              top: 90%;\n            }\n          }\n        }\n\n        > svg {\n          &#stairway2large {\n            display: none;\n            grid-area: b;\n            @media (min-width: $screen-md) {\n              display: initial;\n            }\n          }\n\n          &#stairway2small {\n            grid-area: b;\n            max-width: 100%;\n            @media (min-width: $screen-md) {\n              display: none;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  #dont_know_where_toget_started {\n    line-height: 3rem;\n    margin: 1rem auto 5rem;\n    text-align: center;\n    width: fit-content;\n\n    &::after {\n      content: url(\"../assets/icons/curriculum-started-underline.svg\");\n      position: absolute;\n      transform: translate3d(-6em, 1.25rem, 0);\n      width: 6em;\n    }\n\n    ~ div {\n      > ul {\n        display: grid;\n        gap: 1rem;\n        grid-template-areas: \"beginner advanced employ educator\";\n        margin: 0 auto;\n        max-width: 52rem;\n        overflow: scroll;\n        scroll-snap-type: inline mandatory;\n        @media (min-width: $screen-md) {\n          gap: 5rem 4rem;\n          grid-template-areas:\n            \"beginner advanced\"\n            \"employ educator\";\n          grid-template-columns: auto auto;\n        }\n        @media (min-width: $screen-lg) {\n          gap: 5rem 8rem;\n        }\n\n        > li {\n          align-items: center;\n          background-color: var(--curriculum-bg-large-color);\n          border-radius: var(--elem-radius);\n          color: var(--text-secondary);\n          display: grid;\n          gap: 1rem;\n          grid-template-areas:\n            \"i h\"\n            \"p p\"\n            \"c c\";\n          grid-template-columns: 3rem 1fr;\n          grid-template-rows: 4rem minmax(7rem, max-content) max-content;\n          height: max-content;\n          padding: 1rem 0.5rem;\n          scroll-snap-align: center;\n          width: 80vw;\n\n          @media (min-width: $screen-md) {\n            align-items: start;\n            background-color: initial;\n            gap: 1rem 2rem;\n            grid-template-areas:\n              \"i h\"\n              \"i p\"\n              \"i c\";\n            grid-template-columns: auto auto;\n            grid-template-rows: 4rem auto max-content;\n            height: initial;\n            padding: 0;\n            width: initial;\n          }\n\n          &::before {\n            align-self: start;\n            display: inline-block;\n            height: 3rem;\n            width: 3rem;\n            @media (min-width: $screen-md) {\n              grid-area: i;\n              height: 5rem;\n              width: 5rem;\n            }\n          }\n\n          &:nth-child(1)::before {\n            content: var(--curriculum-landing-started-beginner);\n          }\n\n          &:nth-child(2)::before {\n            content: var(--curriculum-landing-started-advanced);\n          }\n\n          &:nth-child(3)::before {\n            content: var(--curriculum-landing-started-employment);\n          }\n\n          &:nth-child(4)::before {\n            content: var(--curriculum-landing-started-educator);\n          }\n\n          h3 {\n            color: var(--text-primary);\n            font-weight: var(--font-body-strong-weight);\n            margin-top: 0;\n          }\n\n          em {\n            align-self: start;\n            grid-area: p;\n          }\n\n          a {\n            // Mimic the button in content as we only have an <a>\n            --button-bg: var(--button-primary-default);\n            --button-bg-hover: var(--button-primary-hover);\n            --button-bg-active: var(--button-primary-active);\n            --button-border-color: var(--button-primary-default);\n            --button-focus-effect: var(--focus-effect);\n            --button-height: var(--form-elem-height, 2rem);\n            --button-color: var(--background-primary);\n            --button-font: var(--type-emphasis-m);\n            --button-radius: var(--elem-radius, 0.25rem);\n            align-items: center;\n            background-color: var(--button-bg);\n            border: 1px solid var(--button-border-color);\n            border-radius: var(--button-radius);\n            color: var(--button-color);\n            cursor: pointer;\n            display: flex;\n            font: var(--button-font);\n            gap: 0.25rem;\n\n            grid-area: c;\n            justify-content: center;\n            justify-self: center;\n            min-height: var(--button-height);\n            padding: 0.5rem;\n            padding-left: var(--button-padding);\n            padding-right: var(--button-padding);\n            position: relative;\n            text-align: center;\n            text-decoration: none;\n            width: fit-content;\n            @media (min-width: $screen-md) {\n              justify-self: start;\n            }\n\n            &:hover {\n              background-color: var(--button-bg-hover, var(--button-bg));\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.curriculum-partner-banner-container {\n  .partner-banner {\n    background-color: var(--curriculum-bg-color-partner);\n    background-image: var(--curriculum-bg-image-partner);\n    background-repeat: no-repeat;\n    border: 1px solid var(--curriculum-border-color);\n    box-shadow: var(--curriculum-shadow);\n    display: grid;\n    grid-template-areas: \"h2\" \"image\" \"p\" \"a\";\n    margin: 1rem auto;\n\n    @media screen and (min-width: $screen-md) {\n      grid-template-areas: \"copy image\";\n      grid-template-columns: 2fr minmax(24rem, 1fr);\n    }\n\n    > picture {\n      align-self: end;\n      grid-area: image;\n      height: max-content;\n      justify-self: center;\n      max-width: max-content;\n      width: 90%;\n      @media screen and (min-width: $screen-md) {\n        justify-self: end;\n        width: 100%;\n      }\n    }\n\n    > section {\n      display: contents;\n      grid-area: copy;\n      padding: 2rem 4rem;\n      @media screen and (min-width: $screen-md) {\n        display: block;\n      }\n\n      > h2 {\n        grid-area: h2;\n        margin: 1rem 0 2rem;\n        text-align: center;\n        @media screen and (min-width: $screen-md) {\n          margin: 0 0 1rem;\n          text-align: left;\n        }\n\n        > a {\n          color: var(--curriculum-category-color);\n          display: inline-block;\n          min-width: max-content;\n\n          &:visited:not([href^=\"#\"]) {\n            color: var(--curriculum-category-color);\n          }\n\n          &::before {\n            content: url(\"../assets/icons/curriculum-partner-underline-small.svg\");\n            position: absolute;\n            transform: translate3d(-0.1em, 0.4em, 0);\n            @media screen and (min-width: $screen-md) {\n              content: url(\"../assets/icons/curriculum-partner-underline-large.svg\");\n            }\n          }\n\n          &:focus,\n          &:visited,\n          &:hover {\n            text-decoration: none;\n\n            &::before {\n              content: none;\n            }\n          }\n\n          &::after {\n            background-color: var(--curriculum-category-color);\n            height: 0.625em;\n            width: 0.625em;\n          }\n        }\n      }\n\n      > p {\n        grid-area: p;\n        margin: 1.5rem 1rem;\n        @media screen and (min-width: $screen-md) {\n          margin: 1rem 0 1.5rem;\n        }\n      }\n\n      > a {\n        color: var(--text-primary);\n        grid-area: a;\n        margin: 1rem;\n        @media screen and (min-width: $screen-md) {\n          margin: 1rem 0 0;\n        }\n      }\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}