@nanoporetech-digital/components 8.0.0-alpha.5 → 8.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/cjs/nano-alert.cjs.entry.js +2 -2
  2. package/dist/cjs/nano-avatar_5.cjs.entry.js +1 -1
  3. package/dist/cjs/nano-breadcrumb.cjs.entry.js +2 -2
  4. package/dist/cjs/nano-details.cjs.entry.js +1 -1
  5. package/dist/cjs/nano-dialog.cjs.entry.js +1 -1
  6. package/dist/cjs/nano-dropdown_2.cjs.entry.js +1 -1
  7. package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
  8. package/dist/cjs/nano-nav-item.cjs.entry.js +1 -1
  9. package/dist/cjs/{slot-Hlplqf1Z.js → slot-DJxvnd35.js} +5 -5
  10. package/dist/collection/components/alert/alert.css +1 -1
  11. package/dist/collection/components/breadcrumb/breadcrumb.css +132 -1
  12. package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
  13. package/dist/collection/utils/slot.js +5 -5
  14. package/dist/components/nano-alert.js +1 -1
  15. package/dist/components/nano-breadcrumb.js +2 -2
  16. package/dist/components/slot.js +5 -5
  17. package/dist/esm/nano-alert.entry.js +2 -2
  18. package/dist/esm/nano-avatar_5.entry.js +1 -1
  19. package/dist/esm/nano-breadcrumb.entry.js +2 -2
  20. package/dist/esm/nano-details.entry.js +1 -1
  21. package/dist/esm/nano-dialog.entry.js +1 -1
  22. package/dist/esm/nano-dropdown_2.entry.js +1 -1
  23. package/dist/esm/nano-in-page-nav.entry.js +1 -1
  24. package/dist/esm/nano-nav-item.entry.js +1 -1
  25. package/dist/esm/{slot-DYFgWo5f.js → slot-Db9r1aLM.js} +5 -5
  26. package/dist/nano-components/nano-alert.entry.js +1 -1
  27. package/dist/nano-components/nano-avatar_5.entry.js +1 -1
  28. package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
  29. package/dist/nano-components/nano-components.css +3 -125
  30. package/dist/nano-components/nano-details.entry.js +1 -1
  31. package/dist/nano-components/nano-dialog.entry.js +1 -1
  32. package/dist/nano-components/nano-dropdown_2.entry.js +1 -1
  33. package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
  34. package/dist/nano-components/nano-nav-item.entry.js +1 -1
  35. package/dist/nano-components/slot-Db9r1aLM.js +4 -0
  36. package/dist/style/components.css +1 -1
  37. package/dist/style/components.css.map +1 -1
  38. package/dist/style/nano.css +1 -1
  39. package/dist/style/nano.css.map +1 -1
  40. package/docs-json.json +1 -1
  41. package/hydrate/index.js +8 -8
  42. package/hydrate/index.mjs +8 -8
  43. package/package.json +2 -2
  44. package/dist/nano-components/slot-DYFgWo5f.js +0 -4
package/dist/style/nano.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../node_modules/@nanoporetech-digital/style/dist/core.css","../src/components/footer/footer.light-dom.scss","../src/components/alert/alert.light-dom.scss","../src/components/sortable/sortable.light-dom.scss","../src/components/cta/cta.light-dom.scss","../src/components/card/card.light-dom.scss","../node_modules/@nanoporetech-digital/style/dist/_mixins.scss","../src/components/tag/tag.light-dom.scss","../src/components/content-links/content-links.light-dom.scss","../src/components/badge/badge.light-dom.scss","../src/components/card-carousel/card-carousel.light-dom.scss","../src/components/global-nav/global-nav.light-dom.scss","../src/components/avatar/avatar.light-dom.scss","../src/components/in-page-nav/in-page-nav.light-dom.scss","../src/components/collapsible-comparison/collapsible-comparison.light-dom.scss","../src/components/menu/menu.light-dom.scss","../src/components/icon-item/icon-item.light-dom.scss","../src/components/tabs/tabs.light-dom.scss","../src/components/tooltip/tooltip.light-dom.scss","../src/components/table/table.light-dom.scss","../src/components/breadcrumb/breadcrumb.light-dom.scss","../src/global/style/nano-components.scss","../src/global/style/utilities/_mixins.scss"],"names":[],"mappings":"AAAA,+4uBCCE,wNACE,2CACA,uCACA,2CACA,iDACA,4BCJJ,kBACE,kBACE,eACA,kCACA,kBACA,qBACA,oBAGA,sBACE,oBACA,mBAGF,sBACE,oBACA,qBAGF,sBACE,kBACA,mBAGF,sBACE,kBACA,sBC1BN,kBACE,4BACE,UAGF,wBACE,WACA,2BACA,iCACA,UACA,kBAGF,gCACE,oCAGF,+BACE,+BACA,8CCrBJ,kBACE,SAGE,uCACA,2CACA,iDACA,kDACA,8BACA,iBACA,sBACA,qBACA,oBAGA,yCACA,8CACA,8BACA,qBACA,wBACA,qBACA,mBACA,mBAEA,iBAEA,iCACE,qBAIF,kBACE,mBACA,mBAGF,yBACE,oBACA,sBACA,sBACA,eAEA,2DAEE,6BAIJ,wBACE,aACA,sBACA,eAMF,4FAEE,wCACA,+BACA,0CACA,2CACA,iCAGF,sDAEE,uCACA,qCACA,2CACA,4CACA,8BAGF,0HAEE,wCACA,+BACA,yCACA,2CACA,iCAGF,oDAEE,uCACA,oCACA,0CACA,2CACA,8BAGF,wHAEE,uCACA,+BACA,yCACA,0CACA,iCAGF,sDAEE,uCACA,qCACA,2CACA,4CACA,8BAGF,0HAEE,wCACA,+BACA,0CACA,2CACA,iCAGF,kDAEE,sCACA,6CACA,8BAGF,gDAEE,uCACA,8CACA,8BACA,iBACA,mBAIF,uHAEE,qCACA,yBACA,qBACA,sBACA,uBAEA,YAEA,gQAEE,qCAEA,YAKJ,sFAEE,wCACA,2BACA,oCACA,sBACA,uBACA,iCAEA,mBAEA,8LAEE,mBAKJ,+BACE,2BAEA,SACA,gBACA,kBACA,oBACA,mBACA,8BACA,eACA,mBACA,sBACA,sCACA,mCACA,6CACA,+BACA,gDACA,2BACA,0CACA,2BACA,gCACA,kDACA,gCAEA,6CACE,+BACA,6CAGF,qCACE,4CAGF,sCACE,6CAIF,uCACE,WACA,+BACA,+BACA,kBACA,cACA,eACA,kBACA,gCACA,wBACA,wCACA,KACE,qFAEF,kCACA,gDACA,mCAEA,gBACE,GACE,cAMN,sCACE,WACA,4BACA,sBACA,6BACA,4BACA,mCACA,2BACA,kDACA,sBACA,qBACA,wBACA,yBACA,yCAGF,gGAEE,cACA,6BACA,cAMF,8EACE,+CACA,sBAEA,qKAGE,2BAEA,mLACE,yCAKN,2EACE,+CACA,sBAEA,+JAGE,6BAEA,6KACE,yCACA,SACA,0BAKN,yEACE,+CACA,sBACA,mBACA,mBAIE,yKACE,yBAKN,2EACE,+CACA,sBACA,mBACA,mBAIE,6KACE,wBAKN,+EACE,gDACA,sBACA,mBACA,mBAGF,2EACE,4CACA,kBACA,sBACA,mBACA,mBAIF,sHACE,+CACA,sBAGA,2BAEA,qIACE,4CACA,sBACA,mBACA,mBAGA,oCAGF,qXAEE,gDACA,sBACA,mBACA,mBAGA,qCC3WV,kBACE,UACE,sBACA,kBACA,8BAIA,oBACA,mBAEA,2BACA,kBACA,aACA,8CACA,4DACA,eACA,2BACA,mBAEA,mBACE,mBAQF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAMF,YACE,mBACA,yBACA,uBAGF,wBACE,iBAGF,iBACE,cAIF,oCACE,oCAGA,+CACE,uCAMF,mDACE,yCAIJ,qBACE,QAGF,uBACE,QACA,kBAGF,yBACE,QACA,kBAGF,wBACE,QACA,aACA,mBACA,eAGF,6BACE,0DAGF,kBACE,kBAMA,wNACE,mBACA,qBAGF,0PACE,qCACA,0BAKA,sSACE,mBACA,qBAGF,gUACE,qCACA,0BAIJ,0dAEE,WACA,cACA,kBACA,QACA,0BACA,eACA,iBACA,gBACA,eACA,gBACA,iCAGF,0OACE,gBAIF,gQACE,iCACA,iCAGF,kPACE,kBACA,UAOJ,qCACE,wBAIF,qDACE,wBAOA,yCACE,4BAKF,mCACE,cAGF,uCACE,cACA,cAGF,2BACE,mCACE,4BAGF,uCACE,6BAMJ,wCACE,oBACA,eACA,mBACA,8BAGF,yCACE,8BAOJ,2DCxNF,2CACA,kCACA,0CD2NE,oDC3MF,sCACA,2CACA,gDDgNI,mFCxNJ,sCACA,2CACA,yCD2NI,4ECzMJ,mCACA,2CACA,gDD6ME,uCACE,8BAMF,0BACE,6BAEA,iCAEA,iIAGE,8BACA,gCAGF,qCACE,iBAGF,2FChQJ,2CACA,uCACA,0CDmQI,oFC3OJ,mCACA,2CACA,gDDiPI,+EACE,oBACA,eAEA,sFACE,WACA,cACA,sBACA,gBACA,8BACA,8CACA,sBACA,qBACA,wBACA,yBACA,yCAKN,yBACE,oCACA,0CACA,kCAEA,kCACE,uCACA,+BACA,wCACA,0CACA,iCAIJ,8BACE,oCACA,yCACA,qCAGF,6DAEE,+BACA,0CACA,wCAEA,mGACE,qCAGF,+EACE,wCACA,+BACA,yCACA,0CACA,iCAIJ,8BACE,oCACA,0CACA,yCEtWN,kBACE,SAEE,wCACA,wCACA,yCACA,wDACA,6BACA,sBACA,8CACA,oDAGA,gDACA,iDAQA,qBACA,uBACA,wBACA,uBACA,2BACA,+BACA,yCACA,+BACA,qCACA,qBACA,kBACA,eAGA,mCACA,6BACA,8CAtBA,qBACE,0BACA,uCACA,mDAqBF,2BAEE,UACA,cACA,uBAGF,mBACE,aACA,WACA,8BACA,mBACA,uBAEA,oCACE,aAGF,+BACE,YAIJ,wEACE,WACA,cACA,wBAIF,qCAEE,UAGF,wDAGE,mBACA,2BACA,6BAGF,iDAEE,eACA,iCAGF,mDAEE,kCAGF,mDACE,+BACA,8CChGN,kBACE,mBAEE,6CACA,gDACA,8CACA,+CACA,kCACA,iBACA,6CAGA,iBACA,wBACA,sCACA,2CACA,2CACA,gDACA,qBAGA,qBACE,UACA,oBACA,uBACA,aACA,8BACA,mBACA,uBACA,2BACA,iDACA,+CACA,gCAEA,4BACE,WACA,sBACA,6BACA,4BACA,8CACA,sBACA,qBACA,wBACA,yBAGF,4BACE,oBACA,eACA,4BACA,iDACA,+CAEA,mCACE,uCAIJ,uBACE,mCAKJ,qBACE,oBACA,eACA,wBAEA,4BACE,mCAGF,2CACE,2CAGF,uDAEE,0BACA,gCAEA,qEACE,qCAIJ,mCACE,+BACA,8CCvFR,kBACE,WHwDA,oCACA,2CACA,gDGvDE,qBACA,mBACA,6CACA,+BACA,qBAEA,aACE,cACA,sBAEA,oBACE,WACA,kBACA,QACA,WACA,YACA,sBACA,+BAIJ,kBACE,kBAGF,wBACE,0DAGF,kDACE,qCACA,kCAEA,8EACE,oCAGF,8EACE,qCAGF,8EACE,qCAGF,8EACE,qCAIJ,0BACE,oCACA,kCAEA,wCACE,oCAGF,wCACE,oCAGF,wCACE,qCAGF,wCACE,qCAIJ,0BACE,qCACA,kCAEA,wCACE,oCAGF,wCACE,qCAGF,wCACE,qCAGF,wCACE,qCAIJ,0BACE,qCACA,kCAEA,wCACE,oCAGF,wCACE,qCAGF,wCACE,qCAGF,wCACE,qCAIJ,yBACE,oCACA,kCAEA,uCACE,mCAGF,uCACE,oCAGF,uCACE,oCAGF,uCACE,oCAIJ,qCACE,sCAIJ,2BACE,GACE,4DAGF,KACE,+DCrJN,kBACE,4DACE,UJWF,2CACA,mCACA,2CITE,cAIA,oCACE,4BAGF,wCACE,4BCfN,kBACE,wRAIE,oBAIA,kOAGE,mBAOF,oHAEE,kCAGF,uJAEE,wCAGF,yJAEE,yCAGF,6MAEE,kBAEA,6NACE,WACA,kBACA,sDACA,eACA,eACA,2BACA,kCACA,0BACA,+DAIJ,6FACE,sDAEA,yOAEE,kCAIJ,4MAGE,oDAGF,oGACE,wBACA,iBACA,kBACA,WACA,eACA,gHAGF,gHACE,uBAGF,4GACE,oCACA,kCACA,+BACA,qBACA,qBACA,YACA,iCAGF,mNAEE,gDACA,eACA,QACA,oBACA,WAGF,sEACE,aAGF,wGACE,aACA,2BACA,wDAEA,6HACE,iCAEA,uBAHF,6HAII,iCAGF,sBAPF,6HAQI,2BAIJ,+hBL9FJ,2CACA,uCACA,0CK+FM,uBACA,yDAGF,0GACE,qBAEA,gHACE,0BAIJ,2GACE,SACA,UAEA,8GACE,gBACA,gBACA,wCACA,0CAIJ,wHACE,qDACA,aACA,sBACA,2BACA,oCACA,kCAEA,0CARF,wHASI,cACA,cAGF,iuBACE,SACA,YAGF,2IACE,cAIJ,0HACE,2BAEA,8IACE,UAGF,4HACE,cACA,wCASN,qJAEE,iCAGF,iKAEE,sCAGF,mKAEE,wCAGF,yQAGE,mDAGF,yGACE,0CACA,iBACA,gBACA,kBACA,QAGF,6GACE,aACA,sBACA,2BACA,yCAEA,+GACE,qBACA,0CAEA,qHACE,0BAIJ,wjBLlMJ,sCACA,2CACA,gDKmMM,wCAGF,gHACE,SACA,UAEA,mHACE,gBACA,gBACA,wCACA,0CAIJ,+HACE,4CAGF,6HACE,sEACA,2CAIJ,2EACE,cACA,qCACA,aACA,2BACA,mBACA,eACA,iBAEA,iFACE,0CAGF,mFACE,WACA,sBACA,sBACA,gBACA,eACA,8CACA,sBACA,qBACA,wBACA,cACA,sDC3RR,kBACE,YACE,eAEA,oBACA,mBACA,uBACA,kBACA,wBACA,4BACA,uBACA,+CACA,+BACA,2CACA,kCACA,iBACA,sBACA,+CACA,gBAEA,0BACE,uBACA,yBACA,cAGF,gBACE,4CACA,kBC9BN,kBACE,2CAEE,kEACA,6CACA,gDACA,yCACA,sDACA,sDACA,yCACA,yCACA,8CACA,mDACA,6CACA,mDAGA,mBACA,2CACA,qCACA,qCAEA,oDACE,mBAGF,yIAGE,UAGF,8CACE,aACA,sBACA,gBAIF,yDACE,gEAGF,6CACE,eAEA,mDACE,0BAGF,2DACE,+BACA,6CAIJ,+DACE,SACA,4BACA,aACA,sBACA,oBACA,wBACA,iBACA,sDAEA,iEACE,wBAEA,wEACE,yCACA,0BAGF,uEACE,8BAKN,qHAEE,8CACA,oBAEA,yHACE,sCAGF,uIACE,uBAGF,yJACE,4BAGF,wVAEE,UAIJ,2JAEE,2DAGF,iHACE,wBAGF,wDACE,aACA,4BACA,mDACA,mCAEA,YAEA,6JAEE,yCACA,0BACA,2BAGF,gFACE,aAGF,+IAEE,UAGF,uJAEE,oCAGF,6IAEE,2BACA,+BACA,+BACA,qCAEA,yJACE,0BAKN,4DACE,oCAEA,qJAEE,0BAIJ,uKAEE,iCAGF,qLAEE,oCACA,oBACA,gBACA,iCACA,2BC5KN,kBACE,iEACE,qCACA,8CACA,gDAEA,oEROF,2CACA,mCACA,2CQLE,wIAEE,SAGF,wIRgBF,sCACA,2CACA,yCQbE,oEACE,yCACA,+CACA,eAGF,oEACE,2CAGF,oEACE,UACA,SAGF,kFACE,gBAEA,qFACE,SACA,2CAIJ,8EACE,aACA,mBAGF,8EACE,4BACA,oCACA,mCACA,aAEA,YAEA,yLAEE,2BAGF,kXAIE,aACA,8BACA,mCAGF,+LAEE,aAGF,2LAEE,iCAGF,qLAEE,+CAGF,iFACE,gBACA,4CAEA,oFACE,oCC3FV,kBAEI,kEACE,mBAEA,cACA,2DAEA,2IACE,yDAGF,iFTyBJ,sCACA,2CACA,gDSvBI,iGACE,WACA,qBACA,sBACA,sBACA,sBACA,qBACA,iBACA,gBACA,4CACA,mCACA,UACA,yCACA,qBAGF,2GACE,UAIJ,+BACE,2CACA,qCAGF,0DACE,wBAIF,yNAGE,6CAEA,qCACA,2BAKF,oTAGE,6CAEA,kCACA,+CAKF,uTAGE,4CAEA,kCACA,+CAIF,gPAGE,uCAEA,aACA,gDACA,+BAKF,qQAGE,gDAGF,yDACE,mCAGF,kEACE,iBAEA,uGACE,mCAIJ,+EACE,kBACA,oBACA,oBACA,qBACA,iBACA,UACA,UACA,iGACA,kCACA,6BAGF,2FACE,UACA,+BACA,iGAGF,sFACE,uBACA,aACA,2BACA,mBACA,eACA,iBACA,2DAEA,8FACE,WACA,sBACA,sBACA,gBACA,eACA,4CACA,sBACA,qBACA,wBACA,cACA,oCCpJR,kBACE,eACE,8CAEA,aACA,0BACA,qBACA,iBACA,2BAEA,2BACE,gDAGF,wGAEE,0CAGF,wEACE,0CAGF,mDACE,yCAGF,wDAEE,UVJJ,2CACA,uCACA,0CUMI,qCACA,kBAGF,+BACE,UVDJ,sCACA,2CACA,gDUGI,kBAGF,2BACE,qCAIF,0BACE,oBACA,iDACA,+BAEA,8HAEE,+BAEA,0TAEE,WACA,kBAIJ,mFACE,mCAEA,uLAEE,WAGF,mGACE,WAIJ,+CACE,cAGF,sCACE,cACA,cAGF,qEAEE,iBACA,kBACA,WACA,cAGF,0CACE,iBACA,WACA,cAKJ,iDAEE,eACA,0BACA,qCAIA,uBACE,qCAEA,sCACE,qCAKN,sCACE,sCCvHJ,iEACE,aACA,uBACA,mBACA,OAIC,kFACC,yBAGF,kEACE,sBACA,gCAGF,6JAEE,oBAGF,+JAEE,qBAGF,wFACE,qBAGF,0FACE,qBAKF,+KAEE,wBAGF,4EX1BF,2CACA,kCACA,0CW2BI,qBClDN,kBAEI,sGACE,oCAGF,oDACE,eACA,iBACA,qCAGF,qDACE,oBCXN,kBACE,+BACE,wCACA,4GACA,oDACA,4DACA,6CACA,iCACA,gCAGA,WAEA,gBACA,cACA,2BAEA,wCACE,YAGF,4EACE,8CAOA,uBAJF,6CAKI,+CAIA,4BADF,mEAEI,+CAKN,uDAGE,mBAEA,8GAEE,eAGF,qFAEE,cACA,qBACA,+CACA,+CAGF,6EAEE,+CACA,+CACA,kBAGF,6DACE,uCAMJ,6CACE,eAEA,2DACE,kBAGF,0DACE,iDAGF,mDACE,iDAGF,4PAIE,WACA,kBACA,QAMJ,0CACE,gBACA,4BACA,uCAGF,gDACE,kBAGF,gGAEE,WAGF,gDACE,UACA,gBAGE,oCADF,sGAEI,6DAGF,6CALF,sGAOI,6DAKJ,sHAEE,gBAEA,oIACE,WACA,kBACA,iBACA,oBACA,iCACA,kBAEA,qCARF,oIASI,oBAGF,sCAZF,oIAaI,oBAKN,sEACE,mBACA,yFAGF,oEACE,qBACA,0FAOF,4BAEE,gIACE,+BACA,6BAGF,wKACE,4BACA,4BAKN,uBAEE,oFACE,+BACA,6BAGF,4HACE,4BACA,4BAIJ,wGACE,gBACA,4BACA,UAEA,6CAGE,sHACE,WACA,kBACA,iDACA,oBACA,+CACA,iDACA,mCAGF,wJACE,kDACA,qBAKN,gGACE,0CAGF,4FACE,sCACA,UAGF,wCAKI,oPACE,WACA,kBACA,iBACA,oBACA,iCACA,kBAEA,qCARF,oPASI,oBAGF,sCAZF,oPAaI,oBAIJ,2HACE,mBACA,sFAGF,yHACE,qBACA,yFClQV,kBACE,gBAEE,6CACA,mDACA,uDACA,sDACA,8CACA,6CAEA,6BACE,2BACA,2BACA,iBACA,uBAGF,yDAEE,gBACA,UACA,SACA,aACA,mBAGF,iDAEE,aACA,mBACA,2BACA,mCACA,2CACA,iBACA,mBAGF,oFAEE,YACA,gCACA,0BAGF,uBACE,wBAGF,6BACE,kCAGF,gCACE,+BACA,6CACA,UAGF,6BACE,8BAGF,8BACE,aACA,mBACA,mCAGF,8BACE,iBACA,aAGE,mDACE,iCAGF,iDACE,iCAKN,gCACE,iBACA,aACA,8BACA,mBACA,sDACA,wBACA,yCACA,eACA,iBACA,YACA,mCAEA,sDACE,0BAEA,6DACE,YACA,gCACA,0BAIJ,8CACE,+BACA,6CAIJ,8BACE,uBACA,wDAEA,oCACE,yBAIJ,0CACE,sBACE,aAGF,8BACE,cAGF,sCACE,sBAGF,qCACE,aAGF,6CACE,qBAGF,6BACE,sDAGF,6CACE,qBACA,oCC/HR,kBAGE,MCqQA,szFDzOA,yKAYE,8BAIA,ogDA0CE,kBAGF,gCACE,mBAIJ,4FAGE,aAGF,gCACE,cACA,6EAGF,2CACE,aAGF,eACE,8BAGF,cACE,8BAEA,kDACE,aAIJ,yBACE,UAGF,wBACE,UACA,eACA,cAGF,kBACE,mBAEA,8BACE,oBAGF,8BACE,oBAGF,2BACE,qBAIJ,oCACE,kBACE,2DAGF,uBACE,4BAKJ,yCACE,uBACE,2DACA","file":"nano.css","sourcesContent":["@layer reset, tokens, themes, globals, components, utilities, application;@layer reset{*,*::before,*::after{box-sizing:border-box}html{text-size-adjust:none}body{line-height:1.5;min-block-size:100vh}body,h1,h2,h3,h4,h5,p,figure,picture{margin:0}hr{block-size:1px;border-width:0;box-sizing:content-box}img,picture{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}[hidden]{display:none !important}iframe{display:block}}@layer tokens{:root{--nano-color-grey-mono-1600: rgb(24 24 24 / 100%);--nano-color-grey-mono-1550: rgb(30 30 30 / 100%);--nano-color-grey-mono-1500: rgb(38 38 38 / 100%);--nano-color-grey-mono-1400: rgb(51 51 51 / 100%);--nano-color-grey-mono-1300: rgb(66 66 66 / 100%);--nano-color-grey-mono-1200: rgb(84 84 83 / 100%);--nano-color-grey-mono-1100: rgb(99 99 99 / 100%);--nano-color-grey-mono-1000: rgb(118 118 117 / 100%);--nano-color-grey-mono-900: rgb(135 135 135 / 100%);--nano-color-grey-mono-800: rgb(150 150 149 / 100%);--nano-color-grey-mono-700: rgb(166 166 166 / 100%);--nano-color-grey-mono-400: rgb(215 214 213 / 100%);--nano-color-grey-mono-300: rgb(231 230 228 / 100%);--nano-color-grey-mono-200: rgb(241 240 238 / 100%);--nano-color-grey-mono-100: rgb(246 245 244 / 100%);--nano-color-grey-mono-075: rgb(249 248 248 / 100%);--nano-color-grey-mono-050: rgb(252 252 251 / 100%);--nano-color-blue-cerulean-1600: rgb(0 26 40 / 100%);--nano-color-blue-cerulean-1500: rgb(1 41 63 / 100%);--nano-color-blue-cerulean-1400: rgb(1 54 83 / 100%);--nano-color-blue-cerulean-1300: rgb(1 71 106 / 100%);--nano-color-blue-cerulean-1200: rgb(1 89 127 / 100%);--nano-color-blue-cerulean-1100: rgb(1 106 146 / 100%);--nano-color-blue-cerulean-1000: rgb(0 127 168 / 100%);--nano-color-blue-cerulean-900: rgb(32 146 183 / 100%);--nano-color-blue-cerulean-800: rgb(58 161 195 / 100%);--nano-color-blue-cerulean-700: rgb(85 178 207 / 100%);--nano-color-blue-cerulean-300: rgb(186 238 251 / 100%);--nano-color-blue-cerulean-100: rgb(226 249 255 / 100%);--nano-color-blue-cerulean-075: rgb(234 251 255 / 100%);--nano-color-blue-cerulean-050: rgb(247 253 255 / 100%);--nano-color-violet-ink-1600: rgb(12 14 75 / 100%);--nano-color-violet-ink-1500: rgb(19 22 117 / 100%);--nano-color-violet-ink-1400: rgb(27 31 147 / 100%);--nano-color-violet-ink-1300: rgb(47 48 168 / 100%);--nano-color-violet-ink-1200: rgb(67 67 189 / 100%);--nano-color-violet-ink-1100: rgb(85 82 207 / 100%);--nano-color-violet-ink-1000: rgb(106 103 221 / 100%);--nano-color-violet-ink-900: rgb(124 123 228 / 100%);--nano-color-violet-ink-800: rgb(139 141 234 / 100%);--nano-color-violet-ink-700: rgb(156 159 241 / 100%);--nano-color-violet-ink-600: rgb(173 178 247 / 100%);--nano-color-violet-ink-500: rgb(189 195 253 / 100%);--nano-color-violet-ink-400: rgb(206 212 255 / 100%);--nano-color-violet-ink-300: rgb(225 228 255 / 100%);--nano-color-violet-ink-200: rgb(238 240 255 / 100%);--nano-color-violet-ink-100: rgb(244 245 255 / 100%);--nano-color-violet-ink-075: rgb(247 248 255 / 100%);--nano-color-green-leaf-1600: rgb(1 27 32 / 100%);--nano-color-green-leaf-1500: rgb(1 43 51 / 100%);--nano-color-green-leaf-1400: rgb(1 57 67 / 100%);--nano-color-green-leaf-1300: rgb(2 73 87 / 100%);--nano-color-green-leaf-1200: rgb(2 93 106 / 100%);--nano-color-green-leaf-1100: rgb(1 111 110 / 100%);--nano-color-green-leaf-1000: rgb(1 134 113 / 100%);--nano-color-green-leaf-900: rgb(29 151 131 / 100%);--nano-color-green-leaf-800: rgb(52 167 146 / 100%);--nano-color-green-leaf-700: rgb(78 183 162 / 100%);--nano-color-green-leaf-600: rgb(104 200 178 / 100%);--nano-color-green-leaf-200: rgb(197 253 232 / 100%);--nano-color-green-leaf-075: rgb(222 254 242 / 100%);--nano-color-green-leaf-050: rgb(238 255 249 / 100%);--nano-color-red-brick-1600: rgb(51 8 10 / 100%);--nano-color-red-brick-1500: rgb(79 13 16 / 100%);--nano-color-red-brick-1400: rgb(103 17 21 / 100%);--nano-color-red-brick-1300: rgb(132 21 27 / 100%);--nano-color-red-brick-1200: rgb(161 32 36 / 100%);--nano-color-red-brick-1100: rgb(185 46 48 / 100%);--nano-color-red-brick-1000: rgb(210 67 70 / 100%);--nano-color-red-brick-900: rgb(222 93 96 / 100%);--nano-color-red-brick-800: rgb(229 116 120 / 100%);--nano-color-red-brick-700: rgb(235 139 144 / 100%);--nano-color-red-brick-400: rgb(255 201 203 / 100%);--nano-color-red-brick-300: rgb(255 221 222 / 100%);--nano-color-red-brick-100: rgb(255 241 242 / 100%);--nano-color-yellow-lime-1000: #6e7d17;--nano-color-yellow-lime-500: rgb(184 210 39 / 100%);--nano-color-yellow-lime-200: rgb(224 255 50 / 100%);--nano-color-yellow-lime-100: rgb(236 255 131 / 100%);--nano-color-yellow-lime-075: rgb(242 255 172 / 100%);--nano-color-yellow-lime-050: rgb(250 255 223 / 100%);--nano-color-orange-1600: rgb(47 13 2 / 100%);--nano-color-orange-1500: rgb(74 20 3 / 100%);--nano-color-orange-1400: rgb(97 27 4 / 100%);--nano-color-orange-1300: rgb(125 34 5 / 100%);--nano-color-orange-1200: rgb(148 52 4 / 100%);--nano-color-orange-1100: rgb(168 68 4 / 100%);--nano-color-orange-1000: rgb(192 87 3 / 100%);--nano-color-orange-900: rgb(210 107 3 / 100%);--nano-color-orange-800: rgb(226 124 3 / 100%);--nano-color-orange-600: rgb(255 162 14 / 100%);--nano-color-orange-400: rgb(254 206 136 / 100%);--nano-color-orange-300: rgb(254 226 189 / 100%);--nano-color-orange-200: rgb(254 239 225 / 100%);--nano-color-orange-100: rgb(254 243 233 / 100%);--nano-color-orange-075: rgb(254 247 240 / 100%);--nano-color-basic-white: rgb(255 255 255 / 100%);--nano-color-basic-white-rgb: 255 255 255;--nano-color-basic-black: rgb(0 0 0 / 100%);--nano-color-basic-black-rgb: 0 0 0}}@layer tokens{:root{--nano-font-sans: \"Noto Sans\", \"Noto Sans Fallback: Arial\", arial, sans-serif;--nano-font-mono: SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;--nano-font-serif: Georgia, \"Times New Roman\", serif;--nano-font-size-2xs: 0.75rem;--nano-font-size-xs: 0.875rem;--nano-font-size-small: 1rem;--nano-font-size-sm: var(--nano-font-size-small);--nano-font-size-medium: 1.125rem;--nano-font-size-md: var(--nano-font-size-medium);--nano-font-size-l: 1.375rem;--nano-font-size-lg: var(--nano-font-size-l);--nano-font-size-xl: 1.6875rem;--nano-font-size-2xl: 2.5rem;--nano-font-size-3xl: 3.25rem;--nano-font-weight-light: 300;--nano-font-weight-normal: 400;--nano-font-weight-bold: 700;--nano-letter-spacing-denser: -0.03em;--nano-letter-spacing-dense: -0.015em;--nano-letter-spacing-normal: normal;--nano-letter-spacing-loose: 0.025em;--nano-letter-spacing-looser: 0.0375em;--nano-line-height-denser: 1.2;--nano-line-height-dense: 1.4;--nano-line-height-normal: 1.6;--nano-line-height-loose: 1.8;--nano-line-height-looser: 2}@media(width <= 767px){:root{--nano-font-size-l: 1.3125rem;--nano-font-size-xl: 1.5rem;--nano-font-size-2xl: 2.125rem;--nano-font-size-3xl: 2.625rem}}:root[lang^=ja-]{--nano-font-sans: \"Noto Sans JP\", \"Noto Sans JP Fallback: Arial\", arial, sans-serif}:root[lang^=zh-]{--nano-font-sans: \"Noto Sans SC\", \"Noto Sans SC Fallback: Arial\", arial, sans-serif}}@layer tokens{:root{--nano-spacing-xs: 0.3125rem;--nano-spacing-sm: 0.625rem;--nano-spacing-l3: var(--nano-spacing-sm);--nano-spacing-md: 1.25rem;--nano-spacing-l2: var(--nano-spacing-md);--nano-spacing-l: 1.875rem;--nano-spacing-xl: 2.5rem;--nano-spacing-l1-default: var(--nano-spacing-xl);--nano-spacing-2xl: 3.75rem;--nano-spacing-l1-feature: var(--nano-spacing-2xl)}@media(width <= 1024px){:root{--nano-spacing-l1-feature: 3.125rem;--nano-spacing-l1-default: var(--nano-spacing-l);--nano-spacing-l2: var(--nano-spacing-md);--nano-spacing-l3: var(--nano-spacing-sm)}}@media(width <= 767px){:root{--nano-spacing-l1-feature: var(--nano-spacing-xl);--nano-spacing-l1-default: var(--nano-spacing-md);--nano-spacing-l: var(--nano-spacing-md);--nano-spacing-l2: var(--nano-spacing-sm);--nano-spacing-l3: var(--nano-spacing-sm)}}}@layer tokens{:root{--nano-border-radius-small: 0.1875rem;--nano-border-radius-medium: 0.25rem;--nano-border-radius-large: 0.5rem;--nano-border-radius-x-large: 1rem;--nano-border-radius-circle: 50%;--nano-border-radius-pill: 9999px;--nano-transition-x-fast: 120ms;--nano-transition-fast: 300ms;--nano-transition-medium: 500ms;--nano-transition-slow: 700ms;--nano-transition-x-slow: 1000ms;--nano-focus-ring-color: var(--nano-color-blue-cerulean-700);--nano-focus-ring-style: solid;--nano-focus-ring-width: 3px;--nano-focus-ring: var(--nano-focus-ring-style) var(--nano-focus-ring-width) var(--nano-focus-ring-color);--nano-focus-ring-offset: 1px;--nano-icon-size-small: 16px;--nano-pictogram-size-small: 24px;--nano-pictogram-size-medium: 32px;--nano-icon-size-large: 32px;--nano-pictogram-size-large: 48px;--nano-pictogram-size-x-large: 64px;--nano-image-ratio-landscape: 16/9;--nano-image-ratio-square: 1/1;--nano-image-ratio-portrait: 3/4;--nano-z-index-raised: 5;--nano-z-index-menubar: 10;--nano-z-index-mask: 50;--nano-z-index-dropdown: 300;--nano-z-index-modal: 700;--nano-z-index-alert: 800;--nano-z-index-tooltip: 1000;--nano-overlay-background-color: rgb(0 0 0 / 43%);--nano-overlay-blur: 3px}}@font-face{font-display:swap;font-family:\"Noto Sans JP\";font-style:normal;font-weight:300;src:url(\"./assets/font/jp/noto-sans-jp-v53-japanese_latin-300.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans JP\";font-style:normal;font-weight:400;src:url(\"./assets/font/jp/noto-sans-jp-v53-japanese_latin-regular.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans JP\";font-style:normal;font-weight:700;src:url(\"./assets/font/jp/noto-sans-jp-v53-japanese_latin-700.woff2\") format(\"woff2\")}@font-face{font-family:\"Noto Sans JP Fallback: Arial\";src:local(\"Arial\");size-adjust:110%;ascent-override:101%;descent-override:23%;line-gap-override:4%}@font-face{font-display:swap;font-family:\"Noto Sans SC\";font-style:normal;font-weight:300;src:url(\"./assets/font/sc/noto-sans-sc-v37-chinese-simplified_latin-300.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans SC\";font-style:normal;font-weight:400;src:url(\"./assets/font/sc/noto-sans-sc-v37-chinese-simplified_latin-regular.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans SC\";font-style:normal;font-weight:700;src:url(\"./assets/font/sc/noto-sans-sc-v37-chinese-simplified_latin-700.woff2\") format(\"woff2\")}@font-face{font-family:\"Noto Sans SC Fallback: Arial\";src:local(\"Arial\");size-adjust:110%;ascent-override:101%;descent-override:23%;line-gap-override:4%}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:normal;font-weight:300;src:url(\"./assets/font/latin/noto-sans-v39-latin-300.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:italic;font-weight:300;src:url(\"./assets/font/latin/noto-sans-v39-latin-300italic.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:normal;font-weight:400;src:url(\"./assets/font/latin/noto-sans-v38-latin-regular.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:italic;font-weight:400;src:url(\"./assets/font/latin/noto-sans-v38-latin-italic.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:normal;font-weight:700;src:url(\"./assets/font/latin/noto-sans-v38-latin-700.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:italic;font-weight:700;src:url(\"./assets/font/latin/noto-sans-v38-latin-700italic.woff2\") format(\"woff2\")}@font-face{font-family:\"Noto Sans SC Fallback: Arial\";src:local(\"Arial\");size-adjust:110%;ascent-override:101%;descent-override:23%;line-gap-override:4%}@layer globals{html{font-family:var(--nano-font-sans);font-weight:400;background-color:var(--nano-color-base-0);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}html[lang^=ja-] em,html[lang^=ja-] i,html[lang^=zh-] em,html[lang^=zh-] i{font-style:normal !important}::selection{background-color:var(--nano-color-primary-300);color:var(--nano-color-neutral-1400)}:target{scroll-margin-block:5ex}h1,h2,h3,h4,h5{text-wrap:balance;margin-block-end:var(--nano-spacing-md)}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child),h4:not(:first-child),h5:not(:first-child){margin-block-start:var(--nano-spacing-l)}h1.hero{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-3xl);line-height:var(--nano-line-height-denser)}h1{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-2xl);line-height:var(--nano-line-height-denser)}h2{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}h3{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}h4{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}h5{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold)}p{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);margin-block-end:var(--nano-spacing-md)}ol,ul{padding-inline-start:var(--nano-spacing-md);margin-block:var(--nano-spacing-sm) var(--nano-spacing-md)}li{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);margin-block-end:var(--nano-spacing-sm)}li:last-child{margin-block-end:var(--nano-spacing-md)}blockquote{border-inline-start:3px solid var(--nano-color-primary-1000);padding-inline-start:var(--nano-spacing-xl);display:flex;flex-direction:column;gap:var(--nano-spacing-sm);margin:0;margin-block-end:var(--nano-spacing-md)}blockquote>*:not(cite){font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);letter-spacing:var(--nano-letter-spacing-looser);margin-block-end:var(--nano-spacing-md);font-weight:var(--nano-font-weight-light);margin-block:0}blockquote cite{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);font-style:normal}figure{display:table;border-collapse:separate;border-spacing:0}figure figcaption{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);background-color:var(--nano-color-basic-black);color:var(--nano-color-basic-white);padding:var(--nano-spacing-md);display:table-caption;caption-side:bottom}button,input,label{line-height:var(--nano-line-height-denser)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:var(--nano-color-neutral-300);margin-block:.5em;margin-inline:0;padding:0}hr+p,.horizontal-rule+p,.content-divider+p{margin-block:var(--nano-spacing-md)}a{color:var(--nano-color-primary-1000)}a:focus,button:focus{outline:none}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:root{--table-padding: var(--nano-spacing-md);--table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));--table-border-color: var(--nano-color-neutral-200);--table-border-color-header: var(--nano-color-primary-1000);--table-background: var(--nano-color-base-0)}table{color:var(--nano-color-neutral-1400);border-collapse:separate;border-spacing:0;text-align:start}table.compact{--table-padding: var(--table-compact-padding)}table .content-center{text-align:center}table .content-end{text-align:end}table caption{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);text-align:start;margin-block-end:var(--nano-spacing-l1-default);max-inline-size:80vw}table th{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;background-color:var(--table-background);padding:var(--table-padding);text-align:start;font-weight:800;vertical-align:top}table td{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);background-color:var(--table-background);padding:var(--table-padding);text-align:start;vertical-align:top}table thead :where(td,th){border-block-end:2px solid var(--table-border-color-header);vertical-align:bottom}@container scroll-state(stuck: top){table thead :where(td,th){border-block-end-width:3px}}table tbody :where(td,th){border-block-end:1px solid var(--table-border-color)}table tfoot :where(td,th){border-block-start:2px solid var(--table-border-color-header);border-block-end:2px solid var(--table-border-color-header)}}@layer utilities{.n-text-hero{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-3xl);line-height:var(--nano-line-height-denser)}.n-text-quote{font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);letter-spacing:var(--nano-letter-spacing-looser);margin-block-end:var(--nano-spacing-md);font-weight:var(--nano-font-weight-light)}.n-text-2xl{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-2xl);line-height:var(--nano-line-height-denser)}.n-text-xl{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.n-text-lg{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}.n-text-md{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.n-text,.n-text-normal{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.n-text-sm,.n-text-small{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.n-text-xs{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.n-img-landscape{aspect-ratio:var(--nano-image-ratio-landscape);object-fit:cover}.n-img-4x3{aspect-ratio:4/3;object-fit:cover}.n-img-square{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover}.n-img-portrait{aspect-ratio:var(--nano-image-ratio-portrait);object-fit:cover}.n-img-avatar{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover;border-radius:var(--nano-border-radius-circle)}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar){color:rgba(0,0,0,0);-webkit-box-decoration-break:clone;box-decoration-break:clone;background-color:rgba(0,0,0,0);background-image:linear-gradient(to right, var(--nano-color-neutral-300) 33%, var(--nano-color-neutral-50), var(--nano-color-neutral-300) 66%);background-size:300% .7em;animation:skeleton-shimmer 2s infinite ease-in-out;user-select:none;pointer-events:none;width:fit-content}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar) img{opacity:0}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar):is(h1,h2,h3,h4,h5,h6,p,span,a){display:inline;border-radius:4px}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar):is(h1,h2,h3,h4,h5,h6,p,span,a)::before{content:\"\";display:block;margin-block-start:inherit;padding-block-start:inherit}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar):is(h1,h2,h3,h4,h5,h6,p,span,a)::after{content:\"\";display:block;margin-block-end:inherit;padding-block-end:inherit}.n-loader-skeleton *{text-decoration:none !important}@keyframes skeleton-shimmer{from{background-position:100%}to{background-position:0%}}.n-content-divider{block-size:4px;background-color:var(--nano-color-neutral-100)}.n-visually-hidden:not(:focus,:active,:focus-within),.visually-hidden:not(:focus,:active,:focus-within){clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}}/*# sourceMappingURL=core.css.map */\n",":where(nano-footer, .nano-footer) {\n h1, h2, h3, h4, h5, h6 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-medium);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-normal);\n margin: var(--header-margin);\n }\n}","@use '../../global/style/nano-theme/tokens/layers';\n\n@layer components {\n .nano-toast-stack {\n position: fixed;\n z-index: var(--nano-z-index-modal);\n inline-size: 28rem;\n max-inline-size: 100%;\n max-block-size: 100%;\n // overflow: clip;\n\n &--tr {\n inset-block-start: 0;\n inset-inline-end: 0;\n }\n\n &--tl {\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n &--br {\n inset-block-end: 0;\n inset-inline-end: 0;\n }\n\n &--bl {\n inset-block-end: 0;\n inset-inline-start: 0;\n }\n }\n}","@use '../../global/style/nano-theme/tokens' as tokens;\n\n@layer components {\n .nano-sortable__placeholder {\n opacity: 0;\n }\n\n .nano-sortable__dragged {\n opacity: .6;\n cursor: grabbing !important;\n box-shadow: var(--nano-shadow-l2);\n z-index: 1;\n position: relative;\n }\n\n .nano-sortable__keyboard-handle {\n background: var(--nano-color-base-0);\n }\n\n .nano-sortable__handle-dragged {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n}","@layer components {\n nano-cta {\n // dynamically calculate a11y / wcag compliant color based on the background\n // --color: #{'lch(from var(--bg) calc((49.44 - l) * infinity) 0 0)'};\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-blue-cerulean-1000);\n --bg-hover: var(--nano-color-blue-cerulean-1100);\n --bg-active: var(--nano-color-blue-cerulean-1200);\n --border: 1px solid var(--bg);\n --icon-size: 1em;\n --padding-v: 0.4375em;\n --padding-h: 1.125em;\n --spinner-size: 1em;\n\n // Internal - don't advertise\n --font-size: var(--nano-font-size-small);\n --line-height: var(--nano-line-height-normal);\n --gap: var(--nano-spacing-sm);\n --icon-display: none;\n --loading-display: none;\n --loading-opacity: 0;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 1;\n\n display: contents;\n\n &:has(.nano-internal-cta) {\n display: inline-block;\n }\n\n // flip icon for RTL\n &:dir(rtl) {\n --flip-icon-ltr: 1;\n --flip-icon-rtl: 0;\n }\n\n &[group=\"balanced\"] {\n display: inline-grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--gap);\n\n a,\n button {\n justify-content: space-evenly;\n }\n }\n\n &[group=\"stacked\"] {\n display: flex;\n flex-direction: column;\n gap: var(--gap);\n }\n\n // Variations\n\n // Themes + Variants\n &[secondary]:not([secondary=\"false\"]),\n :is([secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-primary-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-primary-100);\n --bg-active: var(--nano-color-primary-300);\n --border: 1px solid var(--color);\n }\n\n &[theme=\"success\"],\n :is([theme=\"success\"]) {\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-success-1000);\n --bg-hover: var(--nano-color-success-1100);\n --bg-active: var(--nano-color-success-1200);\n --border: 1px solid var(--bg);\n }\n\n &[theme=\"success\"][secondary]:not([secondary=\"false\"]),\n :is([theme=\"success\"][secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-success-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-success-75);\n --bg-active: var(--nano-color-success-200);\n --border: 1px solid var(--color);\n }\n\n &[theme=\"danger\"],\n :is([theme=\"danger\"]) {\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-danger-1000);\n --bg-hover: var(--nano-color-danger-1100);\n --bg-active: var(--nano-color-danger-1200);\n --border: 1px solid var(--bg);\n }\n\n &[theme=\"danger\"][secondary]:not([secondary=\"false\"]),\n :is([theme=\"danger\"][secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-danger-1200);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-danger-300);\n --bg-active: var(--nano-color-danger-400);\n --border: 1px solid var(--color);\n }\n\n &[theme=\"warning\"],\n :is([theme=\"warning\"]) {\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-warning-1000);\n --bg-hover: var(--nano-color-warning-1100);\n --bg-active: var(--nano-color-warning-1200);\n --border: 1px solid var(--bg);\n }\n\n &[theme=\"warning\"][secondary]:not([secondary=\"false\"]),\n :is([theme=\"warning\"][secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-warning-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-warning-200);\n --bg-active: var(--nano-color-warning-300);\n --border: 1px solid var(--color);\n }\n\n &[size=\"medium\"],\n :is([size=\"medium\"]) {\n --font-size: var(--nano-font-size-xs);\n --line-height: var(--nano-line-height-dense);\n --gap: var(--nano-spacing-xs);\n }\n\n &[size=\"small\"],\n :is([size=\"small\"]) {\n --font-size: var(--nano-font-size-2xs);\n --line-height: var(--nano-line-height-denser);\n --gap: var(--nano-spacing-xs);\n --padding-h: 1em;\n --padding-v: 0.5em;\n }\n\n // Loading state - can be placed on wrapper or nested elements\n &:is([loading], [loading=\"true\"]):not([loading=\"false\"]),\n :is([loading], [loading=\"true\"]):not([loading=\"false\"]) {\n --text-color: transparent !important;\n --loading-display: block;\n --loading-opacity: 1;\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n\n cursor: wait;\n\n a,\n button {\n --text-color: transparent !important;\n\n cursor: wait;\n }\n }\n\n // Disabled state - derived from attributes of nested elements\n :is([disabled], [disabled=\"true\"]):not([disabled=\"false\"]),\n a:not([href]) {\n --color: var(--nano-color-neutral-1200);\n --text-color: var(--color);\n --bg: var(--nano-color-neutral-100);\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --border: 1px solid var(--color);\n\n cursor: not-allowed;\n\n a,\n button {\n cursor: not-allowed;\n }\n }\n\n // Base style\n :is(a, button, .button) {\n --text-color: var(--color);\n\n margin: 0;\n appearance: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--bg) !important;\n color: var(--text-color) !important;\n border-radius: var(--nano-border-radius-pill);\n line-height: var(--line-height);\n letter-spacing: var(--nano-letter-spacing-loose);\n font-size: var(--font-size);\n padding: var(--padding-v) var(--padding-h);\n gap: var(--nano-spacing-sm);\n border: var(--border) !important;\n transition: color var(--nano-transition-fast) ease;\n text-decoration: none !important;\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n\n &:hover {\n background-color: var(--bg-hover) !important;\n }\n\n &:active {\n background-color: var(--bg-active) !important;\n }\n\n // Loading spinner\n &::before {\n content: '';\n display: var(--loading-display);\n opacity: var(--loading-opacity);\n position: absolute;\n padding: 2.5px;\n aspect-ratio: 1;\n border-radius: 50%;\n inline-size: var(--spinner-size);\n background: var(--color);\n inset: calc(50% - (var(--spinner-size) / 2));\n mask:\n conic-gradient(#0000, #000) subtract,\n conic-gradient(#000 0 0) content-box;\n animation: load 1s linear infinite;\n transition: all var(--nano-transition-fast) ease;\n transition-behavior: allow-discrete;\n\n @keyframes load {\n to {\n rotate: 1turn\n }\n }\n }\n\n // Internal icon\n &::after {\n content: '';\n display: var(--icon-display);\n background-size: cover;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n background-color: var(--text-color);\n mask-image: var(--icon-svg);\n transition: color var(--nano-transition-fast) ease;\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n margin-inline-start: auto;\n rotate: calc(180deg * var(--flip-icon-ltr));\n }\n\n :which(nano-icon, .nano-icon),\n svg {\n color: inherit;\n inline-size: var(--icon-size);\n margin: auto 0;\n }\n }\n\n // Built-in Icons\n &:not([icon=\"false\"], :has(a nano-icon, a .nano-icon, a svg)) {\n &[icon=\"forward\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n\n a,\n button {\n // custom chevron padding-right as it has naturally has more whitespace\n padding-inline-end: 0.8125em;\n\n &::after {\n rotate: calc(180deg * var(--flip-icon-ltr));\n }\n }\n }\n\n &[icon=\"back\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n\n a,\n button {\n // custom chevron padding-right as it has naturally has more whitespace\n padding-inline-start: 0.8125em;\n\n &::after {\n rotate: calc(180deg * var(--flip-icon-rtl));\n order: -1;\n margin-inline-start: unset;\n }\n }\n }\n\n &[icon=\"up\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n a,\n button {\n &::after {\n transform: rotate(270deg);\n }\n }\n }\n\n &[icon=\"down\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n a,\n button {\n &::after {\n transform: rotate(90deg);\n }\n }\n }\n\n &[icon=\"download\"] {\n --icon-svg: var(--nano-component-icon-download);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n }\n\n &[icon=\"open\"] {\n --icon-svg: var(--nano-component-icon-open);\n --icon-size: .9em;\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n }\n\n // Auto icons based on anchor attributes\n &:not([icon]) a[href]:not([href=\"\"], [icon], [href^=\"#\"]) {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n\n // Custom chevron padding-right as it has naturally has more whitespace\n padding-inline-end: 0.8125em;\n\n &[target=\"_blank\"] {\n --icon-svg: var(--nano-component-icon-open);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n // reset padding\n padding-inline-end: var(--padding-h);\n }\n\n &[download],\n &:is([href$=\".pdf\"], [href$=\".zip\"], [href$=\".doc\"], [href$=\".docx\"], [href$=\".xls\"], [href$=\".xlsx\"], [href$=\".ppt\"], [href$=\".pptx\"]) {\n --icon-svg: var(--nano-component-icon-download);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n // reset padding\n padding-inline-end: var(--padding-h);\n }\n }\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n nano-card {\n --color: currentColor;\n --bg: transparent;\n --gap: var(--nano-spacing-md);\n\n // internal\n\n --content-margin: 0;\n --flip-icon-ltr: 0;\n\n container-type: inline-size;\n position: relative;\n display: grid;\n grid-template-columns: minmax(197px, 31%) auto;\n grid-template-rows: repeat(calc(var(--row-count) - 1), auto);\n gap: var(--gap);\n background-color: var(--bg);\n color: var(--color);\n\n &:dir(rtl) {\n --flip-icon-ltr: 1;\n }\n\n // in-order to have an image that automatically spans all rows\n // we need to set an explicit row number (https://github.com/w3c/csswg-drafts/issues/2402)\n // This is a workaround; count the number of items - minus the image, this equals the number of rows.\n // Monitor if this is enough\n\n &:has(> :last-child:nth-child(1), > article > :last-child:nth-child(1)) {\n --row-count: 1;\n }\n\n &:has(> :last-child:nth-child(2), > article > :last-child:nth-child(2)) {\n --row-count: 2;\n }\n\n &:has(> :last-child:nth-child(3), > article > :last-child:nth-child(3)) {\n --row-count: 3;\n }\n\n &:has(> :last-child:nth-child(4), > article > :last-child:nth-child(4)) {\n --row-count: 4;\n }\n\n &:has(> :last-child:nth-child(5), > article > :last-child:nth-child(5)) {\n --row-count: 5;\n }\n\n &:has(> :last-child:nth-child(6), > article > :last-child:nth-child(6)) {\n --row-count: 6;\n }\n\n &:has(> :last-child:nth-child(7), > article > :last-child:nth-child(7)) {\n --row-count: 7;\n }\n\n //// CONTENT ////\n\n // reset spacing as we want it controlled via 'gap'\n * {\n margin-block: unset;\n margin-block-start: unset;\n margin-block-end: unset;\n }\n\n >*:not([slot]) {\n display: contents;\n }\n\n [slot] {\n display: block;\n }\n\n // image never has margin\n [slot]:not([slot=\"img\"], ul) {\n margin-inline: var(--content-margin);\n\n // last element might need margin\n &:last-child {\n margin-block-end: var(--content-margin);\n }\n }\n\n // no image? First element might need margin\n &:not(:has([slot=\"img\"])) {\n [slot]:first-child {\n margin-block-start: var(--content-margin);\n }\n }\n\n [slot=\"img\"] {\n order: 1;\n }\n\n [slot=\"title\"] {\n order: 2;\n text-wrap: balance;\n }\n\n [slot=\"content\"] {\n order: 3;\n text-wrap: balance;\n }\n\n [slot=\"footer\"] {\n order: 4;\n display: flex;\n align-items: center;\n gap: var(--gap);\n }\n\n nano-content-links {\n --color-border: rgb(var(--nano-color-base-rgb-1000) / 7%);\n }\n\n address {\n font-style: normal;\n }\n\n // if there's one `<a />` or `<button />` make the whole card clickable\n &:has(a:only-of-type):not(:has(button, nano-icon-button, input)),\n &:not([variant=\"product\"]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) {\n a {\n color: var(--color);\n text-decoration: none;\n }\n\n &:hover [slot=\"title\"] {\n color: var(--nano-color-primary-1000);\n text-decoration: underline;\n }\n\n // multiple title elements - only underline / colour the first one\n &:hover:has([slot=\"title\"] > * ~ *) {\n [slot=\"title\"] {\n color: var(--color);\n text-decoration: none;\n }\n\n [slot=\"title\"]> :first-child {\n color: var(--nano-color-primary-1000);\n text-decoration: underline;\n }\n }\n\n button::before,\n a::before {\n content: '';\n display: block;\n position: absolute;\n inset: 0;\n touch-action: manipulation;\n cursor: pointer;\n inline-size: 100%;\n block-size: 100%;\n animation: none;\n border-radius: 0;\n z-index: var(--enable-card-click);\n }\n\n nano-cta>* {\n position: static;\n }\n\n // hover state for promo cards\n &[variant^=\"promo\"]:hover {\n box-shadow: var(--nano-shadow-l0);\n background-color: var(--bg-hover);\n }\n\n nano-tooltip>* {\n position: relative;\n z-index: 2;\n }\n }\n\n // Disable whole card clicking for multiple links; edge cases\n\n // link slot element (e.g. <a slot=\"title\"><h2>...) and a link in the content\n &:has(a[slot]):has([slot] a) {\n --enable-card-click: -1;\n }\n\n // link in content and a link in the footer\n &:has([slot=\"content\"] a):has([slot=\"footer\"] a) {\n --enable-card-click: -1;\n }\n\n\n //// LAYOUT ////\n\n &:not([layout=\"landscape\"]) {\n [slot] {\n grid-column: 1 / -1 !important;\n }\n }\n\n &[layout=\"landscape\"] {\n [slot] {\n grid-column: 2;\n }\n\n [slot=\"img\"] {\n grid-column: 1;\n grid-row: 1/-1;\n }\n\n @container (width < 417px) {\n [slot] {\n grid-column: 1 / -1 !important;\n }\n\n [slot=\"img\"] {\n grid-column: 1 / -1 !important;\n }\n }\n }\n\n &[variant=\"product\"] {\n [slot=\"title\"] {\n display: inline-flex;\n gap: var(--gap);\n align-items: center;\n justify-content: space-between;\n }\n\n [slot=\"footer\"] {\n justify-content: space-between;\n }\n }\n\n //// SIZING ////\n\n\n [slot=\"title\"],\n [slot=\"title\"]> :first-child {\n @include styleMx.h3;\n }\n\n [slot=\"content\"],\n [slot=\"content\"]>* {\n @include styleMx.p;\n }\n\n &[size=\"small\"] {\n\n [slot=\"title\"],\n [slot=\"title\"]> :first-child {\n @include styleMx.h5;\n }\n\n [slot=\"content\"],\n [slot=\"content\"]>* {\n @include styleMx.text-small;\n }\n }\n\n &[variant=\"product\"][size=\"small\"] {\n --gap: var(--nano-spacing-sm);\n }\n\n //// PROMO CARDS ////\n\n // common promo setup and default theme\n &[variant^=\"promo\"] {\n --content-margin: var(--gap);\n\n box-shadow: var(--nano-shadow-l1);\n\n [slot=\"title\"],\n [slot=\"title\"]:hover,\n &:hover [slot=\"title\"] {\n color: var(--color) !important;\n text-decoration: none !important;\n }\n\n nano-cta>* {\n inline-size: 100%;\n }\n\n [slot=\"title\"],\n [slot=\"title\"]> :first-child {\n @include styleMx.h4;\n }\n\n [slot=\"content\"],\n [slot=\"content\"]>* {\n @include styleMx.text-small;\n }\n }\n\n // promos without a cta and with a link title, get a chevron\n &[variant^=\"promo\"]:not(:has(nano-cta)):has(a[slot=\"title\"]) {\n a[slot=\"title\"] {\n display: inline-flex;\n gap: var(--gap);\n\n &::after {\n content: '';\n display: block;\n background-size: cover;\n inline-size: 1em;\n background-color: var(--color);\n mask-image: var(--nano-component-icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n margin-inline-start: auto;\n rotate: calc(180deg * var(--flip-icon-ltr));\n }\n }\n }\n\n &[variant=\"promo\"] {\n --bg: var(--nano-color-notice-1200);\n --bg-hover: var(--nano-color-notice-1000);\n --color: var(--nano-color-base-0);\n\n nano-cta {\n --color: var(--nano-color-notice-1000);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-notice-75);\n --bg-active: var(--nano-color-notice-200);\n --border: 1px solid var(--color);\n }\n }\n\n &[variant=\"promo-aero\"] {\n --bg: var(--nano-color-success-200);\n --bg-hover: var(--nano-color-success-75);\n --color: var(--nano-color-base-1000);\n }\n\n &[variant=\"promo-plain\"],\n &[variant=\"promo-grey\"] {\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-neutral-100);\n --color: var(--nano-color-neutral-1400);\n\n &:hover [slot=\"title\"] {\n color: var(--nano-color-primary-1000);\n }\n\n nano-cta {\n --color: var(--nano-color-primary-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-primary-50);\n --bg-active: var(--nano-color-primary-75);\n --border: 1px solid var(--color);\n }\n }\n\n &[variant=\"promo-grey\"] {\n --bg: var(--nano-color-neutral-100);\n --bg-hover: var(--nano-color-neutral-200);\n --color: var(--nano-color-neutral-1400);\n }\n }\n}","/** Typography */\n\n@mixin hero {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-3xl);\n line-height: var(--nano-line-height-denser);\n}\n\n@mixin h1 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-2xl);\n line-height: var(--nano-line-height-denser);\n}\n\n@mixin h2 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n}\n\n@mixin h3 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-l);\n line-height: var(--nano-line-height-dense);\n}\n\n@mixin h4 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-medium);\n line-height: var(--nano-line-height-dense);\n}\n\n@mixin h5 {\n font-size: var(--nano-font-size-small);\n line-height: var(--nano-line-height-normal);\n font-weight: var(--nano-font-weight-bold);\n}\n\n@mixin p {\n font-size: var(--nano-font-size-small);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin quote {\n font-size: var(--nano-font-size-l);\n line-height: var(--nano-line-height-dense);\n letter-spacing: var(--nano-letter-spacing-looser);\n margin-block-end: var(--nano-spacing-md);\n font-weight: var(--nano-font-weight-light);\n}\n\n@mixin text-small {\n font-size: var(--nano-font-size-xs);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin text-xs {\n font-size: var(--nano-font-size-2xs);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n}\n","@layer components {\n nano-tag {\n // Base\n --background: var(--nano-color-base-50);\n --color: var(--nano-color-primary-1100);\n --stroke: var(--nano-color-primary-1000);\n --color-non-interactive: var(--nano-color-neutral-1400);\n --padding: 0.125rem 0.375rem;\n --font-size: 0.625rem;\n --line-height: var(--nano-line-height-denser);\n --letter-spacing: var(--nano-letter-spacing-denser);\n\n // Stateful (interactive elements only)\n --bg-color-hover: var(--nano-color-primary-100);\n --bg-color-active: var(--nano-color-primary-300);\n\n &[size='large'] {\n --padding: 0.25rem 0.5rem;\n --font-size: var(--nano-font-size-2xs);\n --letter-spacing: var(--nano-letter-spacing-loose);\n }\n\n display: inline-block;\n block-size: fit-content;\n inline-size: fit-content;\n padding: var(--padding);\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--nano-font-weight-bold);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n word-wrap: break-word;\n text-align: center;\n cursor: default;\n\n // Default colours for tags without interactive elements\n color: var(--color-non-interactive);\n background: var(--background);\n border: 1px solid var(--color-non-interactive);\n\n &>a,\n &>button {\n all: unset;\n display: block;\n padding: var(--padding);\n }\n\n &[closable] {\n display: flex;\n gap: 0.25rem;\n justify-content: space-between;\n align-items: center;\n padding: var(--padding);\n\n nano-icon-button {\n --padding: 0;\n }\n\n &[size='large'] {\n gap: 0.375rem;\n }\n }\n\n &[closable]:not(:has(nano-icon-button, .nano-icon-button))::after {\n content: '';\n display: block;\n min-inline-size: 0.625rem;\n }\n\n // Overrides for interactive elements\n &:has(a),\n &:has(button) {\n padding: 0;\n }\n\n &:has(a),\n &:has(button),\n &[closable] {\n color: var(--color);\n border-color: var(--stroke);\n background: var(--background);\n }\n\n &:has(a:hover),\n &:has(button:hover) {\n cursor: pointer;\n background: var(--bg-color-hover);\n }\n\n &:has(a:active),\n &:has(button:active) {\n background: var(--bg-color-active);\n }\n\n &:has(a:focus-visible, button:focus-visible) {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n}","@layer components {\n nano-content-links {\n // Variables\n --text-color: var(--nano-color-neutral-1400);\n --color-disabled: var(--nano-color-neutral-800);\n --color-border: var(--nano-color-neutral-200);\n --color-active: var(--nano-color-primary-1000);\n --padding: var(--nano-spacing-sm);\n --icon-size: 1em;\n --icon-color: var(--nano-color-primary-1200);\n\n // Base styling\n display: contents;\n color: var(--text-color);\n font-size: var(--nano-font-size-small);\n font-weight: var(--nano-font-weight-normal);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n word-wrap: break-word;\n\n // if we have elements that aren't anchor tags, apply the same styling but make them non-interactive\n & > * {\n all: unset;\n inline-size: stretch;\n block-size: fit-content;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--padding);\n gap: var(--nano-spacing-md);\n border-block-start: 1px solid var(--color-border);\n border-block-end: 1px solid var(--color-border);\n text-decoration: none !important;\n\n &::after {\n content: '';\n background-size: cover;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n mask-image: var(--nano-component-icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n margin-inline-start: auto;\n }\n\n &:not(a) {\n pointer-events: none;\n cursor: default;\n color: var(--color-disabled);\n border-block-start: 1px solid var(--color-border);\n border-block-end: 1px solid var(--color-border);\n\n &::after {\n background-color: var(--color-disabled);\n }\n }\n\n & + * {\n border-block-start: none !important;\n }\n }\n\n // Only anchor tags are allowed to be interactive\n & > a {\n pointer-events: auto;\n cursor: pointer;\n color: var(--text-color);\n\n &::after {\n background-color: var(--icon-color);\n }\n\n &[target='_blank']::after {\n mask-image: var(--nano-component-icon-open);\n }\n\n &:hover,\n &:active {\n color: var(--color-active);\n text-decoration: underline solid;\n\n &::after {\n background-color: var(--color-active);\n }\n }\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n nano-badge {\n @include styleMx.text-xs;\n\n background: var(--bg);\n color: var(--color);\n border-radius: var(--nano-border-radius-pill);\n padding: 0.15em 0.65em !important;\n display: inline-block;\n\n a {\n color: inherit;\n border-radius: inherit;\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background-color: transparent;\n }\n }\n\n &:has(a) {\n position: relative;\n }\n\n &:has(a):hover {\n background-color: color-mix(in srgb, var(--bg), black 10%);\n }\n\n &:not([theme]), &[theme=\"primary\"] {\n --bg: var(--nano-color-primary-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-primary-700);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-primary-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-primary-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-primary-1200);\n }\n }\n\n &[theme=\"neutral\"] {\n --bg: var(--nano-color-neutral-900);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-neutral-700);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-neutral-900);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-neutral-1000);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-neutral-1200);\n }\n }\n\n &[theme=\"success\"] {\n --bg: var(--nano-color-success-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-success-600);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-success-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-success-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-success-1200);\n }\n }\n\n &[theme=\"warning\"] {\n --bg: var(--nano-color-warning-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-warning-600);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-warning-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-warning-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-warning-1200);\n }\n }\n\n &[theme=\"danger\"] {\n --bg: var(--nano-color-danger-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-danger-800);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-danger-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-danger-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-danger-1200);\n }\n }\n\n &[pulse]:not([pulse=\"false\"]) {\n animation: pulse-animation 2s infinite;\n } \n }\n\n @keyframes pulse-animation {\n 0% {\n box-shadow: 0 0 0 0 rgb(var(--nano-color-base-rgb-1000) / 20%);\n }\n\n 100% {\n box-shadow: 0 0 0 1em rgb(var(--nano-color-base-rgb-1000) / 0%);\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n :where(nano-card-carousel, .nano-card-carousel) > [slot=\"title\"] {\n all: unset;\n\n @include styleMx.h2;\n\n line-height: 1;\n }\n\n nano-card-carousel nano-card {\n [slot] {\n opacity: var(--text-opacity)\n }\n\n [slot=\"img\"] {\n opacity: var(--img-opacity);\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as text;\n\n@layer components {\n .nano-theme-dark :where(nano-global-nav, .nano-global-nav)::part(logo),\n .nano-theme-dark :where(nano-global-nav, .nano-global-nav) [part~=\"logo\"],\n :where(nano-global-nav, .nano-global-nav).nano-theme-dark::part(logo),\n :where(nano-global-nav, .nano-global-nav).nano-theme-dark [part~=\"logo\"] {\n filter: invert(100%);\n }\n\n :where(nano-global-nav, .nano-global-nav) {\n & > a,\n :where(nano-nav-item, .nano-nav-item)::part(label),\n :where(nano-nav-item, .nano-nav-item) [part~=\"label\"] {\n white-space: nowrap;\n }\n }\n\n // nano-nav-item styling when in the bar menu\n\n :where(nano-global-nav, .nano-global-nav).bar-menu {\n nano-nav-item,\n & > a {\n color: var(--main-menu-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item):hover,\n & > a:hover {\n color: var(--main-menu-hover-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item):active,\n & > a:active {\n color: var(--main-menu-active-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(trigger),\n :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"] {\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n background-color: var(--main-menu-active-border-color);\n block-size: 4px;\n inset-inline: 0;\n inset-block-end: -1.5625rem;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0 center;\n transition: transform var(--nano-transition-x-fast) ease-in-out;\n }\n }\n\n :where(nano-nav-item, .nano-nav-item)[open] {\n color: var(--main-menu-active-border-color) !important;\n\n &::part(trigger)::before,\n & [part~=\"trigger\"]::before {\n transform: translateZ(0) scaleX(1);\n }\n }\n\n a.active,\n nano-nav-item.active,\n nano-nav-item[selected] {\n color: var( --main-menu-active-text-color) !important;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal) {\n inset-block-start: -500%;\n inline-size: 100%;\n position: absolute;\n z-index: -2;\n inset-inline: 0;\n transition: inset-block-start var(--nano-transition-fast) ease-in-out, opacity var(--nano-transition-x-fast) ease;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal modal--open) {\n inset-block-start: 100%;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal-content) {\n background: var(--nano-color-base-0);\n color: var(--nano-color-base-1000);\n padding: var(--nano-spacing-xl);\n inline-size: 91.25rem; // 1460px\n max-inline-size: 100%;\n margin: auto;\n box-shadow: var(--nano-shadow-l2);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal-mask),\n :where(nano-nav-item, .nano-nav-item) [part~=\"modal-mask\"] {\n background: var(--nano-overlay-background-color);\n position: fixed;\n inset: 0;\n min-block-size: 100%;\n z-index: -1;\n }\n\n [slot=\"close-button\"] {\n display: none;\n }\n\n :where(nano-nav-item, .nano-nav-item) [slot=\"secondary\"] {\n display: grid;\n gap: var(--nano-spacing-xl);\n grid-template: auto / repeat(auto-fit, minmax(200px, 1fr));\n\n &:has(.gn__focus-area) {\n grid-template: auto / 1fr 1fr 26rem;\n\n @media (width < 1200px) {\n grid-template-columns: 1fr 26rem;\n }\n\n @media (width < 830px) {\n grid-template-columns: 1fr;\n }\n }\n\n h1, h2, h3, h4, .gn__title {\n @include text.h4;\n\n padding-block-end: 1rem;\n border-block-end: 1px solid var(--nano-color-neutral-100);\n }\n\n a {\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n\n li {\n margin-inline: 0;\n list-style: none;\n margin-block-end: var(--nano-spacing-sm);\n line-height: var(--nano-line-height-dense);\n }\n }\n\n .gn__focus-area {\n padding: var(--nano-spacing-xl) var(--nano-spacing-l);\n display: flex;\n flex-direction: column;\n gap: var(--nano-spacing-sm);\n background: var(--nano-color-base-0);\n color: var(--nano-color-base-1000);\n \n @media (width < 1200px) and (width > 830px) {\n grid-column: 2;\n grid-row: 1 / 3;\n }\n\n h1, h2, h3, h4, h5, p {\n margin: 0;\n border: none;\n }\n\n nano-content-links {\n display: block;\n }\n }\n\n .gn__link-columns {\n gap: var(--nano-spacing-xl);\n\n &:has(> :nth-child(6)) {\n columns: 2;\n } \n\n & > * {\n display: block;\n margin-block-end: var(--nano-spacing-sm);\n }\n }\n }\n }\n \n // nano-nav-item styling when in the overflow menu\n\n :where(nano-global-nav, .nano-global-nav).overflow-menu {\n :where(nano-nav-item, .nano-nav-item),\n & > a {\n color: var(--overflow-text-color);\n }\n \n :where(nano-nav-item, .nano-nav-item):hover,\n & > a:hover {\n color: var(--overflowhover-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item):active,\n & > a:active {\n color: var(--overflow-active-text-color);\n }\n\n a.active,\n :where(nano-nav-item, .nano-nav-item).active,\n :where(nano-nav-item, .nano-nav-item)[selected] {\n color: var( --overflow-active-text-color) !important;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal) {\n background-color: var(--overflow-bg-color);\n inline-size: 100%;\n block-size: 100%;\n position: absolute;\n inset: 0;\n }\n\n :where(nano-nav-item, .nano-nav-item) [slot=\"secondary\"] {\n display: flex;\n flex-direction: column;\n gap: var(--nano-spacing-md);\n padding-block-end: var(--nano-spacing-md);\n\n a {\n text-decoration: none;\n color: var(--nano-color-blue-cerulean-700);\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n h1, h2, h3, h4, .gn__title {\n @include text.p;\n\n margin-block-end: var(--nano-spacing-sm);\n }\n\n ul {\n margin: 0;\n padding: 0;\n\n li {\n margin-inline: 0;\n list-style: none;\n margin-block-end: var(--nano-spacing-sm);\n line-height: var(--nano-line-height-dense);\n }\n }\n\n .gn__link-columns {\n padding-inline-start: var(--nano-spacing-md);\n }\n\n .gn__focus-area {\n border-block-start: 1px solid rgb(var(--nano-color-base-rgb-1000) / 10%);\n padding-block-start: var(--nano-spacing-md);\n }\n }\n\n [slot=\"close-button\"] {\n color: inherit;\n padding-block: var(--nano-spacing-md);\n display: flex;\n gap: var(--nano-spacing-sm);\n align-items: center;\n cursor: pointer;\n inline-size: 100%;\n \n &:hover {\n color: var(--nano-color-blue-cerulean-700);\n }\n\n &::before {\n content: '';\n margin-inline-start: 0;\n background-size: cover;\n inline-size: 1em;\n block-size: 1em;\n mask-image: var(--nano-component-icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n rotate: 180deg;\n background-color: var(--nano-color-blue-cerulean-700);\n }\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n nano-avatar {\n --size: 2.5rem;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n inline-size: var(--size);\n min-inline-size: var(--size);\n block-size: var(--size);\n background-color: var(--nano-color-neutral-400);\n font-size: calc(var(--size) * 0.5);\n font-weight: var(--nano-font-weight-normal);\n color: var(--nano-color-neutral-0);\n user-select: none;\n vertical-align: middle;\n border-radius: var(--nano-border-radius-circle);\n overflow: hidden;\n \n &:empty::before {\n content: attr(initials);\n text-transform: uppercase;\n line-height: 1;\n }\n\n img {\n aspect-ratio: var(--nano-image-ratio-square);\n object-fit: cover;\n }\n }\n}","@layer components {\n :where(nano-in-page-nav, .nano-in-page-nav) {\n // Variables\n --color-bottom-border: rgb(var(--nano-color-base-rgb-1000) / 10%);\n --color-text: var(--nano-color-neutral-1400);\n --color-primary: var(--nano-color-primary-1100);\n --color-text-hover: var(--color-primary);\n --color-border-active: var(--nano-color-primary-1000);\n --border-active: 3px solid var(--color-border-active);\n --color-bg: var(--nano-color-primary-75);\n --font-size: var(--nano-font-size-small);\n --font-weight: var(--nano-font-weight-normal);\n --font-weight-active: var(--nano-font-weight-bold);\n --line-height: var(--nano-line-height-dense);\n --letter-spacing: var(--nano-letter-spacing-loose);\n\n // Internal variables\n --flip-icon-ltr: 1;\n --list-gap: calc(var(--spacing-l2) / 1.25);\n --spacing-l2: var(--nano-spacing-l2);\n --spacing-l3: var(--nano-spacing-l3);\n\n &:dir(rtl) {\n --flip-icon-ltr: 0;\n }\n\n a,\n ul,\n li {\n all: unset;\n }\n\n ul {\n display: flex;\n flex-direction: column;\n list-style: none;\n }\n\n // only the outer-most list\n ul:not(ul ul) {\n padding: 0 var(--spacing-l2) var(--spacing-l3) var(--spacing-l2);\n }\n\n a {\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n\n ul > li:not(ul > li li) {\n margin: 0;\n padding: var(--spacing-l2) 0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n inline-size: 100%;\n border-block-end: 1px solid var(--color-bottom-border);\n\n a {\n color: var(--color-text);\n\n &.active {\n border-inline-start: var(--border-active);\n padding-inline-start: 1rem;\n }\n\n &:hover {\n color: var(--color-text-hover);\n }\n }\n }\n\n ul > li > ul,\n ul > li > nano-details > ul {\n padding: var(--list-gap) 0 0 var(--spacing-l2);\n gap: var(--list-gap);\n\n a {\n color: var(--color-primary) !important;\n }\n\n a.active {\n padding-inline-start: 0;\n }\n\n &:has(nano-details) {\n padding-inline-start: 1.1rem;\n }\n\n nano-details::part(header),\n nano-details [part~=\"header\"] {\n padding: 0;\n }\n }\n\n ul > li > ul > li > nano-details > ul,\n ul > li > nano-details > ul > li > nano-details > ul {\n padding: var(--list-gap) 0 0 var(--nano-spacing-l1-default);\n }\n\n nano-details nano-details:not(nano-details nano-details nano-details) {\n color: var(--color-text);\n }\n\n nano-details {\n --padding: 0;\n --btn-bg-color: transparent;\n --btn-bg-color--open: var(--nano-color-primary-75);\n --btn-bg-color--hover: transparent;\n\n border: none; \n\n .active::part(header),\n .active [part~=\"header\"] {\n border-inline-start: var(--border-active);\n padding-inline-start: 1rem;\n color: var(--color-primary);\n }\n\n &[open] > [slot=\"icon-start\"] {\n rotate: 90deg;\n }\n\n &::part(content),\n & [part~=\"content\"] {\n padding: 0;\n }\n\n &::part(icon--start),\n & [part~=\"icon--start\"] {\n margin-inline-end: var(--spacing-l3);\n }\n\n &::part(header),\n & [part~=\"header\"] {\n font-size: var(--font-size);\n line-height: var(--line-height);\n font-weight: var(--font-weight);\n letter-spacing: var(--letter-spacing);\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .details-wrapper {\n --btn-text-color: var(--color-text);\n\n &::part(header),\n & [part~=\"header\"] {\n padding: var(--spacing-l2);\n }\n }\n\n &:has(.details-wrapper[open])::part(root),\n &:has(.details-wrapper[open]) [part~=\"root\"] {\n box-shadow: var(--nano-shadow-l1);\n }\n\n .details-wrapper.sticky.stuck[open]::part(header),\n .details-wrapper.sticky.stuck [part~=\"header\"] {\n z-index: var(--nano-z-index-menubar);\n inset-block-start: 0;\n position: sticky;\n box-shadow: var(--nano-shadow-l1);\n padding: var(--spacing-l2);\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins';\n\n@layer components {\n :where(nano-collapsible-comparison, .nano-collapsible-comparison) {\n --color-bg: var(--nano-color-base-0);\n --color-border: var(--nano-color-neutral-200);\n --outer-spacing: var(--nano-spacing-l1-default);\n\n h2 {\n @include mixins.h2;\n }\n\n h2,\n h4 {\n margin: 0;\n }\n \n h3,\n h4 {\n @include mixins.h5;\n }\n\n h3 {\n padding-block-end: var(--nano-spacing-md);\n border-block-end: 1px solid var(--color-border);\n margin-block: 0;\n }\n\n h4 {\n font-weight: var(--nano-font-weight-normal);\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n ul[slot='content'] {\n list-style: none;\n\n & > li {\n margin: 0;\n padding-block-start: var(--nano-spacing-md);\n }\n }\n\n [slot=\"label\"] {\n display: flex;\n align-items: center;\n }\n\n nano-details {\n --btn-bg-color: transparent;\n --btn-bg-color--active: transparent;\n --btn-bg-color--hover: transparent;\n --padding: 0;\n\n border: none;\n\n &::part(header),\n & [part~=\"header\"] {\n color: var(--color-primary);\n }\n\n &::part(label),\n & [part~=\"label\"],\n &::part(content),\n & [part~=\"content\"] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--nano-spacing-l1-default);\n }\n\n &::part(icon--end),\n & [part~=\"icon--end\"] {\n display: none;\n }\n\n &::part(content),\n & [part~=\"content\"] {\n padding: var(--nano-spacing-md) 0;\n }\n\n &::part(body),\n & [part~=\"body\"] {\n border-block-end: 1px solid var(--color-border);\n }\n\n ul {\n list-style: disc;\n padding-inline-start: var(--nano-spacing-md);\n\n li {\n font-size: var(--nano-font-size-xs);\n }\n }\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n :where(nano-menu, .nano-menu) {\n :where(nano-nav-item, .nano-nav-item) {\n --padding: inherit;\n\n display: block;\n border-block-start: 1px solid var(--nano-color-neutral-200);\n\n &:not(:has(+ nano-nav-item), :has(+ nano-dropdown), :has(+ nano-content-links)) {\n border-block-end: 1px solid var(--nano-color-neutral-200);\n }\n\n &::part(trigger) {\n @include styleMx.p;\n }\n\n &[checkbox]::part(label)::before {\n content: \"\";\n display: inline-block;\n vertical-align: middle;\n background-size: cover;\n mask-repeat: no-repeat;\n mask-position: center;\n inline-size: 0.8em;\n block-size: 0.8em;\n mask-image: var(--nano-component-icon-check);\n background-color: var(--icon-color);\n opacity: 0;\n margin-inline-end: var(--nano-spacing-sm);\n align-content: center;\n }\n\n &[checkbox][selected]::part(label)::before {\n opacity: 1;\n }\n }\n\n a {\n font-size: calc(var(--font-size) - 0.125rem);\n color: var(--nano-color-primary-1100);\n }\n\n :where(nano-icon, .nano-icon) {\n color: var(--icon-color);\n }\n\n // default styles for nav-item trigger, nav-item close-button and content-link <a>s\n :where(nano-nav-item, .nano-nav-item)::part(trigger),\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"],\n nano-content-links a {\n --icon-color: var(--nano-color-primary-1000); \n\n color: var(--nano-color-neutral-1400);\n font-size: var(--font-size);\n }\n\n // hover state for <a>, nav-item trigger and nav-item close-button\n // when not disabled and not key-board focused\n a:hover:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=\"close-button\"]:hover:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):hover:not(:focus-visible) {\n --icon-color: var(--nano-color-primary-1100);\n\n color: var(--nano-color-base-1000);\n background-color: var(--nano-color-neutral-100);\n }\n\n // active state for <a>, nav-item trigger and nav-item close-button\n // when not disabled and not key-board focused\n a:active:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=\"close-button\"]:active:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):active:not(:focus-visible) {\n --icon-color: var(--nano-color-primary-800);\n\n color: var(--nano-color-base-1000);\n background-color: var(--nano-color-neutral-200);\n }\n \n // focused state for <a>, nav-item trigger and nav-item close-button\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"]:focus-visible,\n :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible,\n a:focus-visible {\n --icon-color: var(--nano-color-base-0);\n\n outline: none;\n background-color: var(--nano-color-primary-1000);\n color: var(--nano-color-base-0);\n }\n\n // active state for <a>, nav-item trigger and nav-item close-button\n // when keyboard focused\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"]:focus-visible:active,\n :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible:active,\n a:focus-visible:active {\n background-color: var(--nano-color-primary-1200);\n }\n\n nano-content-links a::after {\n background-color: var(--icon-color);\n }\n\n :where(nano-dropdown, .nano-dropdown) {\n display: contents;\n\n :where(nano-nav-item, .nano-nav-item) {\n --padding: var(--nav-item-padding);\n }\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal) {\n position: absolute;\n min-block-size: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;\n transform: translate3d(100%, 0, 0);\n background: var(--background);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal modal--open) {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;\n }\n\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"] {\n padding: var(--padding);\n display: flex;\n gap: var(--nano-spacing-md);\n align-items: center;\n cursor: pointer;\n inline-size: 100%;\n border-block-start: 1px solid var(--nano-color-neutral-200);\n\n &::before {\n content: '';\n margin-inline-start: 0;\n background-size: cover;\n inline-size: 1em;\n block-size: 1em;\n mask-image: var(--nano-component-icon-caret);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n rotate: 180deg;\n background-color: var(--icon-color);\n }\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins';\n\n@layer components {\n nano-icon-item {\n --icon-dims: var(--nano-pictogram-size-large);\n\n display: grid;\n grid-template-columns: 1fr;\n justify-items: center;\n inline-size: 100%;\n gap: var(--nano-spacing-md);\n\n &[size='large'] {\n --icon-dims: var(--nano-pictogram-size-x-large);\n }\n\n &:has([slot='icon']):has([slot='heading']),\n &:has([slot='icon']):has([slot='content']) {\n grid-template-rows: repeat(2, min-content);\n }\n\n &:has([slot='icon']):has([slot='heading']):has([slot='content']) {\n grid-template-rows: repeat(3, min-content);\n }\n\n nano-icon, .nano-icon {\n --icon-size: var(--icon-dims) !important;\n }\n\n a:not(p > a),\n [slot='heading'] {\n all: unset;\n\n @include mixins.h4;\n\n color: var(--nano-color-neutral-1400);\n text-align: center;\n }\n\n p[slot='content'] {\n all: unset;\n\n @include mixins.p;\n\n text-align: center;\n }\n\n [slot='icon'] {\n color: var(--nano-color-primary-1000);\n }\n\n // landscape styles\n &[landscape] {\n justify-items: start;\n grid-template-columns: min-content 1fr !important;\n row-gap: var(--nano-spacing-sm);\n\n &:has([slot='icon']):has([slot='heading']),\n &:has([slot='icon']):has([slot='content']) {\n grid-template-rows: min-content;\n\n [slot='heading'],\n p[slot='content'] {\n grid-row: 1;\n align-self: center;\n }\n }\n\n &:has([slot='icon']):has([slot='heading']):has([slot='content']) {\n grid-template-rows: min-content 1fr;\n\n a,\n [slot='heading'] {\n grid-row: 1;\n }\n\n p[slot='content'] {\n grid-row: 2;\n }\n }\n\n nano-icon[slot='icon'] {\n grid-column: 1;\n }\n\n [slot='icon'] {\n grid-column: 1;\n grid-row: 1 / -1;\n }\n\n a,\n [slot='heading'] {\n text-align: start;\n align-self: center;\n grid-row: 1;\n grid-column: 2;\n }\n\n p[slot='content'] {\n text-align: start;\n grid-row: 2;\n grid-column: 2;\n }\n }\n\n // link styles\n a,\n a > [slot='heading'] {\n cursor: pointer;\n text-decoration: underline;\n color: var(--nano-color-primary-1000);\n }\n\n a {\n &:hover {\n color: var(--nano-color-primary-1200);\n\n [slot='heading'] {\n color: var(--nano-color-primary-1200);\n }\n }\n }\n\n &:has(a:hover) nano-icon {\n color: var(--nano-color-primary-1200);\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins' as style;\n\n// just stuff to co-ordinate the composition of components ... it's easier than ::slotted / :host-context\n\n:where(nano-tab-group, .nano-tab-group) {\n &[equal-tab-size] .nano-tab {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n }\n\n &[placement=\"start\"] {\n &[equal-tab-size] .nano-tab {\n justify-content: flex-end;\n }\n\n .nano-tab {\n border-block-end: none;\n border-inline-end: var(--border); \n }\n\n .nano-tab::part(base),\n .nano-tab [part~=\"base\"] {\n justify-content: end;\n }\n\n .nano-tab::part(label),\n .nano-tab [part~=\"label\"] { \n align-items: flex-end;\n }\n\n .nano-tab:not([disabled]):hover {\n border-color: inherit;\n }\n\n .nano-tab:not([disabled])[active] {\n border-color: inherit;\n }\n }\n\n &[placement=\"top\"][size=\"large\"] {\n &::part(tabs__wrapper),\n & [part~=\"tabs__wrapper\"] {\n --scroll-btn-size: 2rem;\n }\n\n .nano-tab {\n @include style.h3;\n\n --padding: 1.5625rem;\n } \n }\n}","@layer components {\n :where(nano-tooltip, .nano-tooltip) {\n [slot=\"content\"], [slot=\"content\"] * {\n font-size: var(--nano-font-size-2xs);\n } \n \n ul[slot=\"content\"] {\n margin-block: 0;\n padding-inline: 0;\n margin-inline: var(--nano-spacing-md);\n }\n\n [slot=\"content\"] li {\n margin-block-end: 0;\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as style;\n\n@layer components {\n :where(nano-table, .nano-table) {\n --table-padding: var(--nano-spacing-md);\n --table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n --table-border-color: var(--nano-color-neutral-200);\n --table-border-color-header: var(--nano-color-primary-1000);\n --table-background: var(--nano-color-base-0);\n --table-wrapper-max-height: 80vh;\n --table-wrapper-max-width: 100%;\n\n // internal\n --isLtR: 1;\n \n overflow-y: clip;\n display: block;\n container-type: inline-size;\n\n &:dir(rtl) {\n --isLtR: -1;\n }\n\n &[compact]:not([compact=\"false\"], [compact=\"auto\"]) {\n --table-padding: var(--table-compact-padding);\n }\n\n &[compact=\"auto\"] {\n // if compact `auto` set smaller padding if either `scrollable` and component is < 500px \n // OR screen width is < 500px\n\n @media (width <= 500px) {\n --table-padding: var(--table-compact-padding);\n }\n\n .nano-table__overflow {\n @container (width <= 500px) {\n --table-padding: var(--table-compact-padding);\n }\n }\n }\n\n &:not([scrollable=\"false\"]) {\n // rendering table in a scrollable container\n\n overflow-y: visible;\n\n &:has([sticky=\"start\"], [sticky=\"end\"]) .nano-masked-overflow {\n // `scrollable` = rendered in a `nano-masked-overflow`. When there are sticky columns, hide the overflow fade\n --fade-size: 0;\n }\n\n &:not(.nano-table--props-ready) {\n // mitigate CLS - before `nano-masked-overflow` ready, set the max-width and max-height to the component itself\n overflow: auto;\n scrollbar-width: thin;\n max-inline-size: var(--table-wrapper-max-width);\n max-block-size: var(--table-wrapper-max-height);\n }\n\n .nano-table__overflow {\n // `scrollable` and `nano-masked-overflow` ready \n max-inline-size: var(--table-wrapper-max-width);\n max-block-size: var(--table-wrapper-max-height);\n position: relative;\n } \n\n table {\n margin-block-end: var(--nano-spacing-l);\n }\n }\n \n /// CLICKABLE ROWS ///\n\n tr[clickable] {\n cursor: pointer;\n\n &:not([sticky]) {\n position: relative;\n }\n\n &:focus-within {\n --table-background: var(--nano-color-primary-50);\n }\n\n &:hover {\n --table-background: var(--nano-color-primary-75);\n }\n\n input[type=\"checkbox\"]::after, \n nano-checkbox::after,\n a::after,\n button::after {\n content: '';\n position: absolute;\n inset: 0;\n }\n }\n\n /// STICKY ROWS ///\n\n tr[sticky] { \n position: sticky;\n container-type: scroll-state;\n inset-block-start: var(--sticky-top, 0);\n }\n\n tfoot tr[sticky] {\n inset-block-end: 0;\n }\n\n tfoot tr[sticky],\n thead tr[sticky] {\n z-index: 10;\n }\n\n tbody tr[sticky] {\n z-index: 5;\n overflow-y: clip;\n\n td, th {\n @container scroll-state(stuck: top) {\n border-block-end: 1px solid var(--table-border-color-header);\n }\n\n @supports (not (container-type: scroll-state)) {\n // fallback - just show border all the time\n border-block-end: 1px solid var(--table-border-color-header);\n }\n } \n\n \n td[sticky], \n th[sticky] { \n overflow-y: clip;\n\n &::after {\n content: '';\n visibility: hidden;\n inline-size: 10px;\n inset-block-start: 0;\n block-size: var(--section-height);\n position: absolute;\n\n @container scroll-state(stuck: left) {\n visibility: visible;\n }\n\n @container scroll-state(stuck: right) {\n visibility: visible;\n }\n }\n }\n\n [sticky=\"start\"]::after {\n inset-inline-end: 0;\n box-shadow: calc(4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n\n [sticky=\"end\"]::after {\n inset-inline-start: 0;\n box-shadow: calc(-4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n }\n\n /// STICKY COLUMNS ///\n \n .nano-table__overflow {\n @container (width <= 500px) {\n // this ensures on small screens only one sticky column is allowed\n td[sticky], th[sticky] {\n --sticky-start: 0px !important;\n --sticky-end: 0px !important;\n }\n\n td[sticky]:not(:first-of-type), th[sticky]:not(:first-of-type) {\n position: initial !important;\n z-index: initial !important;\n }\n }\n }\n\n @media (width <= 500px) {\n // this ensures on small screens only one sticky column is allowed\n td[sticky], th[sticky] {\n --sticky-start: 0px !important;\n --sticky-end: 0px !important;\n }\n\n td[sticky]:not(:first-of-type), th[sticky]:not(:first-of-type) {\n position: initial !important;\n z-index: initial !important;\n }\n }\n\n :where(thead, tbody) td[sticky], th[sticky] {\n position: sticky;\n container-type: scroll-state;\n z-index: 2;\n\n @supports (not (container-type: scroll-state)) {\n // default sticky start / end - white 'glow' effect that's there all the time\n // no sticky top / bottom because there's a border so no need\n &::after {\n content: '';\n position: absolute;\n box-shadow: 14px 0 14px 0 var(--table-background);\n inset-inline: auto 0;\n block-size: calc(100% - var(--nano-spacing-md));\n inset-block-start: calc(var(--nano-spacing-md) / 2);\n inline-size: var(--nano-spacing-md);\n }\n\n &:is([sticky=\"end\"])::after {\n box-shadow: -14px 0 14px 0 var(--table-background);\n inset-inline: 0 auto;\n }\n }\n }\n \n td[sticky=\"start\"], th[sticky=\"start\"] {\n inset-inline-start: var(--sticky-start, 0);\n }\n\n td[sticky=\"end\"], th[sticky=\"end\"] {\n inset-inline-end: var(--sticky-end, 0);\n z-index: 3;\n }\n\n @supports (container-type: scroll-state) {\n // modern sticky \n // start / end get a shadow\n\n :where(thead, tbody) tr:has([sticky=\"start\"],[sticky=\"end\"]):first-of-type {\n [sticky=\"start\"]::after, [sticky=\"end\"]::after { \n content: '';\n visibility: hidden;\n inline-size: 10px;\n inset-block-start: 0;\n block-size: var(--section-height);\n position: absolute;\n\n @container scroll-state(stuck: left) {\n visibility: visible;\n }\n\n @container scroll-state(stuck: right) {\n visibility: visible;\n }\n }\n\n [sticky=\"start\"]::after {\n inset-inline-end: 0;\n box-shadow: calc(4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n\n [sticky=\"end\"]::after {\n inset-inline-start: 0;\n box-shadow: calc(-4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n }\n }\n }\n}","@layer components {\n nano-breadcrumb {\n // Theme variables\n --text-color: var(--nano-color-primary-1000);\n --text-color-hover: var(--nano-color-primary-1200);\n --text-color-secondary: var(--nano-color-neutral-1400);\n --text-color-disabled: var(--nano-color-neutral-1000);\n --border-color: var(--nano-color-neutral-400);\n --trigger-bg-color: var(--nano-color-base-0);\n\n .breadcrumbs {\n container-type: inline-size;\n container-name: breadcrumbs;\n inline-size: 100%;\n max-inline-size: 1346px;\n }\n\n ol,\n nano-menu::part(base) {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: row;\n }\n\n li,\n nano-nav-item {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: var(--nano-font-size-xs);\n line-height: var(--nano-line-height-normal);\n text-wrap: nowrap;\n margin-block-end: 0;\n }\n\n li:not(.return-only li)::after,\n nano-nav-item::after {\n content: '/';\n margin: 0 var(--nano-spacing-xs);\n color: var(--border-color);\n }\n\n a.link {\n color: var(--text-color);\n }\n\n a:not(.link) {\n color: var(--text-color-secondary);\n }\n\n a:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n }\n\n a.link:hover {\n color: var(--text-color-hover);\n }\n\n a.return.link {\n display: flex;\n align-items: center;\n gap: calc(var(--nano-spacing-sm) / 2);\n }\n\n nano-dropdown {\n inline-size: 100%;\n display: none;\n\n &[open] {\n &::part(trigger) {\n box-shadow: var(--nano-shadow-l1);\n }\n\n &::part(panel) {\n box-shadow: var(--nano-shadow-l1);\n }\n }\n }\n\n .trigger-button {\n inline-size: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n color: var(--text-color);\n background-color: var(--trigger-bg-color);\n cursor: pointer;\n text-align: start;\n border: none;\n font-size: var(--nano-font-size-xs);\n\n .trigger-button_label {\n text-decoration: underline;\n\n &::after {\n content: '/';\n margin: 0 var(--nano-spacing-xs);\n color: var(--border-color);\n }\n }\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n\n .trigger-icon {\n transform: rotate(0deg);\n transition: var(--nano-transition-x-fast) ease transform;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n\n @container breadcrumbs (max-width: 768px) {\n .main {\n display: none;\n }\n\n nano-dropdown {\n display: block;\n }\n\n nano-menu::part(base) {\n flex-direction: column;\n }\n\n nano-nav-item::after {\n display: none;\n }\n\n .trigger-button_label::after {\n display: inline-block;\n }\n\n .return-only {\n padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n }\n\n nano-nav-item::part(trigger) {\n text-decoration: none;\n color: var(--text-color-secondary);\n }\n }\n }\n}\n","@use './utilities/mixins' as mx;\n@use '../../components/footer/footer.light-dom';\n@use '../../components/alert/alert.light-dom';\n@use '../../components/sortable/sortable.light-dom';\n@use '../../components/cta/cta.light-dom';\n@use '../../components/card/card.light-dom';\n@use '../../components/tag/tag.light-dom';\n@use '../../components/content-links/content-links.light-dom';\n@use '../../components/badge/badge.light-dom';\n@use '../../components/card-carousel/card-carousel.light-dom';\n@use '../../components/global-nav/global-nav.light-dom';\n@use '../../components/avatar/avatar.light-dom';\n@use '../../components/in-page-nav/in-page-nav.light-dom';\n@use '../../components/collapsible-comparison/collapsible-comparison.light-dom';\n@use '../../components/menu/menu.light-dom';\n@use '../../components/icon-item/icon-item.light-dom';\n@use '../../components/tabs/tabs.light-dom';\n@use '../../components/tooltip/tooltip.light-dom';\n@use '../../components/table/table.light-dom';\n@use '../../components/breadcrumb/breadcrumb.light-dom';\n\n@layer components {\n // global styles required for nano components\n\n :root {\n // Chevron icon\n @include mx.svg-css-variable(\n '--nano-component-icon-chevron',\n \"<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><g><path fill='white' d='M4.18457 15.8496C4.06179 15.7374 4.00044 15.584 4.00044 15.43C4.00044 15.291 4.05065 15.1521 4.15221 15.0421L10.6195 8.00301L4.15207 0.959231C3.9378 0.727093 3.9512 0.364958 4.18443 0.151748C4.41655 -0.0625328 4.77688 -0.0480332 4.99114 0.183555L11.8477 7.61197C12.0508 7.83182 12.0508 8.16767 11.8477 8.38766L4.99114 15.8161C4.77594 16.046 4.41669 16.0639 4.18457 15.8496Z'/></g></svg>\"\n );\n // Download icon\n @include mx.svg-css-variable(\n '--nano-component-icon-download',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M272 16c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 313.4L139.3 228.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l128 128c6.2 6.2 16.4 6.2 22.6 0l128-128c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L272 329.4 272 16zM140.1 320L64 320c-35.3 0-64 28.7-64 64l0 64c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64l-76.1 0-32 32L448 352c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l108.1 0-32-32zM432 416a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z'/></svg>\"\n );\n // Open new icon\n @include mx.svg-css-variable(\n '--nano-component-icon-open',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z'/></svg>\"\n );\n // Check icon\n @include mx.svg-css-variable(\n '--nano-component-icon-check',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z'/></svg>\"\n );\n // Caret icon\n @include mx.svg-css-variable(\n '--nano-component-icon-caret',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z'/></svg>\"\n );\n }\n\n nano-intersection-observe,\n nano-resize-observe,\n nano-global-search-results,\n // add css-only component tags here\n nano-cta, \n nano-card,\n nano-tag, \n nano-content-links,\n nano-badge,\n nano-avatar,\n nano-icon-item,\n nano-table {\n visibility: visible !important;\n }\n\n body:not(.nano-eager) {\n nano-algolia-filter,\n nano-algolia-input,\n nano-algolia-pagination,\n nano-algolia-results,\n nano-details,\n nano-accordion,\n nano-grid-item,\n nano-menu,\n nano-masked-overflow,\n nano-range,\n nano-rating,\n nano-slide,\n nano-slides,\n nano-date-input,\n nano-global-nav,\n nano-menu-drawer,\n nano-checkbox,\n nano-checkbox-group,\n nano-grid,\n nano-option,\n nano-algolia,\n nano-date-picker,\n nano-select,\n nano-dropdown,\n nano-nav-item,\n nano-input,\n nano-icon,\n nano-tab-content,\n nano-tab,\n nano-hero,\n nano-img,\n nano-datalist,\n nano-split-pane,\n nano-file-upload,\n nano-data-table,\n nano-alert,\n nano-dialog,\n nano-drawer,\n nano-footer,\n nano-in-page-nav,\n nano-collapsible-comparison,\n nano-breadcrumb {\n visibility: hidden;\n }\n\n .hydrated {\n visibility: inherit;\n }\n }\n\n nano-alert:not(.hydrated):not([open]),\n nano-dialog:not(.hydrated),\n nano-drawer:not(.hydrated) {\n display: none;\n }\n\n nano-alert[open]:not(.hydrated) {\n display: block;\n min-height: calc(var(--nano-pictogram-size-large) + (var(--nano-spacing-md) * 2));\n }\n\n nano-tooltip:not(.hydrated) [slot='content'] {\n display: none;\n }\n\n nano-animation {\n visibility: inherit !important;\n }\n\n nano-dropdown {\n visibility: inherit !important;\n\n &:not(.hydrated) :not([slot='trigger']) {\n display: none;\n }\n }\n\n nano-slides:not([ready]) {\n opacity: 0;\n }\n\n nano-slide:not([ready]) {\n opacity: 0;\n block-size: 1px;\n display: block;\n }\n\n nano-progress-bar {\n --height: 0.625rem;\n\n &[size=\"small\"] {\n --height: 0.3125rem;\n }\n\n &[size=\"large\"] {\n --height: 0.9375rem;\n }\n\n progress {\n height: var(--height);\n }\n }\n\n @supports (scrollbar-gutter: stable) {\n .nano-scroll-lock {\n scrollbar-gutter: var(--nano-scroll-lock-gutter) !important;\n }\n\n .nano-scroll-lock body {\n overflow: hidden !important;\n }\n }\n\n /** This can go away once Safari has scrollbar-gutter support. */\n @supports not (scrollbar-gutter: stable) {\n .nano-scroll-lock body {\n padding-inline-end: var(--nano-scroll-lock-size) !important;\n overflow: hidden !important;\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n@use 'sass:string';\n@use 'globals';\n@use 'functions' as fn;\n\n@mixin input-cover() {\n inset-block: 0;\n inset-inline: auto;\n margin: 0;\n inline-size: 100%;\n block-size: 100%;\n border: 0;\n background: transparent;\n cursor: pointer;\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n clip-path: inset(50%);\n overflow: hidden;\n pointer-events: none;\n visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n clip-path: inset(50%);\n block-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n inline-size: 1px;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map.keys($map);\n\n @return list.nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: globals.$screen-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: globals.$screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: globals.$screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: globals.$screen-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: index($breakpoint-names, $name);\n\n @return if(\n $n < length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-max($name, $breakpoints: globals.$screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: globals.$screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin host($hostCtx: null) {\n $root: #{&};\n\n @if $hostCtx {\n @at-root :host(#{$hostCtx}) {\n #{$root} {\n @content;\n }\n }\n }\n\n @else {\n @at-root :host {\n #{$root} {\n @content;\n }\n }\n }\n}\n\n@mixin rtl-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}:dir(rtl)) {\n @if string.length($root) > 0 {\n #{$root} { @content; }\n }\n\n @else {\n @content;\n }\n }\n\n @at-root :host-context([dir=\"rtl\"]) {\n @if string.length($root) > 0 {\n #{$root} { @content; }\n }\n\n @else {\n @content;\n }\n }\n}\n\n\n@mixin rtl() {\n $root: #{&};\n\n @at-root #{$root + '[dir=rtl]'} {\n @content;\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: fn.url-encode($svg);\n $viewBox: fn.str-split(fn.str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl !=true or $viewBox==null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n }\n\n @else {\n $transform: \"transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: fn.str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: fn.str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: fn.str-replace(\n $flipped-url,\n '<polygon',\n '<polygon #{$transform}'\n );\n $flipped-url: fn.url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n@mixin svg-css-variable($icon-name, $svg) {\n $url: fn.url-encode($svg);\n\n #{$icon-name}: url('data:image/svg+xml;charset=utf-8,#{$url}');\n}\n\n@mixin background-position(\n $horizontal,\n $horizontal-amount: null,\n $vertical: null,\n $vertical-amount: null\n) {\n @if $horizontal==start or $horizontal==end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n\n @if $horizontal==start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n }\n\n @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position:\n $horizontal-ltr $horizontal-amount $vertical\n $vertical-amount;\n }\n\n @include rtl() {\n background-position:\n $horizontal-rtl $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n\n @else {\n @include multi-dir() {\n background-position:\n $horizontal $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis==start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n\n @include rtl() {\n transform-origin: right $y-axis;\n }\n }\n\n @else if $x-axis==end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n\n @include rtl() {\n transform-origin: left $y-axis;\n }\n }\n\n @else if $x-axis==left or $x-axis==right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n }\n\n @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (fn.str-index($transform, translate3d)) {\n $transform: fn.str-replace($transform, 'translate3d(');\n $transform: fn.str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: list.nth($coordinates, 1);\n $y: list.nth($coordinates, 2);\n $z: list.nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n }\n\n @else {\n @if $extra==null {\n $extra: $transform;\n }\n\n @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x== '0' or $x==null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n }\n\n @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n\n@mixin hide-scrollbar() {\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n inline-size: 0;\n block-size: 0;\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../node_modules/@nanoporetech-digital/style/dist/core.css","../src/components/footer/footer.light-dom.scss","../src/components/alert/alert.light-dom.scss","../src/components/sortable/sortable.light-dom.scss","../src/components/cta/cta.light-dom.scss","../src/components/card/card.light-dom.scss","../node_modules/@nanoporetech-digital/style/dist/_mixins.scss","../src/components/tag/tag.light-dom.scss","../src/components/content-links/content-links.light-dom.scss","../src/components/badge/badge.light-dom.scss","../src/components/card-carousel/card-carousel.light-dom.scss","../src/components/global-nav/global-nav.light-dom.scss","../src/components/avatar/avatar.light-dom.scss","../src/components/in-page-nav/in-page-nav.light-dom.scss","../src/components/collapsible-comparison/collapsible-comparison.light-dom.scss","../src/components/menu/menu.light-dom.scss","../src/components/icon-item/icon-item.light-dom.scss","../src/components/tabs/tabs.light-dom.scss","../src/components/tooltip/tooltip.light-dom.scss","../src/components/table/table.light-dom.scss","../src/global/style/nano-components.scss","../src/global/style/utilities/_mixins.scss"],"names":[],"mappings":"AAAA,+4uBCCE,wNACE,2CACA,uCACA,2CACA,iDACA,4BCJJ,kBACE,kBACE,eACA,kCACA,kBACA,qBACA,oBAGA,sBACE,oBACA,mBAGF,sBACE,oBACA,qBAGF,sBACE,kBACA,mBAGF,sBACE,kBACA,sBC1BN,kBACE,4BACE,UAGF,wBACE,WACA,2BACA,iCACA,UACA,kBAGF,gCACE,oCAGF,+BACE,+BACA,8CCrBJ,kBACE,SAGE,uCACA,2CACA,iDACA,kDACA,8BACA,iBACA,sBACA,qBACA,oBAGA,yCACA,8CACA,8BACA,qBACA,wBACA,qBACA,mBACA,mBAEA,iBAEA,iCACE,qBAIF,kBACE,mBACA,mBAGF,yBACE,oBACA,sBACA,sBACA,eAEA,2DAEE,6BAIJ,wBACE,aACA,sBACA,eAMF,4FAEE,wCACA,+BACA,0CACA,2CACA,iCAGF,sDAEE,uCACA,qCACA,2CACA,4CACA,8BAGF,0HAEE,wCACA,+BACA,yCACA,2CACA,iCAGF,oDAEE,uCACA,oCACA,0CACA,2CACA,8BAGF,wHAEE,uCACA,+BACA,yCACA,0CACA,iCAGF,sDAEE,uCACA,qCACA,2CACA,4CACA,8BAGF,0HAEE,wCACA,+BACA,0CACA,2CACA,iCAGF,kDAEE,sCACA,6CACA,8BAGF,gDAEE,uCACA,8CACA,8BACA,iBACA,mBAIF,uHAEE,qCACA,yBACA,qBACA,sBACA,uBAEA,YAEA,gQAEE,qCAEA,YAKJ,sFAEE,wCACA,2BACA,oCACA,sBACA,uBACA,iCAEA,mBAEA,8LAEE,mBAKJ,+BACE,2BAEA,SACA,gBACA,kBACA,oBACA,mBACA,8BACA,eACA,mBACA,sBACA,sCACA,mCACA,6CACA,+BACA,gDACA,2BACA,0CACA,2BACA,gCACA,kDACA,gCAEA,6CACE,+BACA,6CAGF,qCACE,4CAGF,sCACE,6CAIF,uCACE,WACA,+BACA,+BACA,kBACA,cACA,eACA,kBACA,gCACA,wBACA,wCACA,KACE,qFAEF,kCACA,gDACA,mCAEA,gBACE,GACE,cAMN,sCACE,WACA,4BACA,sBACA,6BACA,4BACA,mCACA,2BACA,kDACA,sBACA,qBACA,wBACA,yBACA,yCAGF,gGAEE,cACA,6BACA,cAMF,8EACE,+CACA,sBAEA,qKAGE,2BAEA,mLACE,yCAKN,2EACE,+CACA,sBAEA,+JAGE,6BAEA,6KACE,yCACA,SACA,0BAKN,yEACE,+CACA,sBACA,mBACA,mBAIE,yKACE,yBAKN,2EACE,+CACA,sBACA,mBACA,mBAIE,6KACE,wBAKN,+EACE,gDACA,sBACA,mBACA,mBAGF,2EACE,4CACA,kBACA,sBACA,mBACA,mBAIF,sHACE,+CACA,sBAGA,2BAEA,qIACE,4CACA,sBACA,mBACA,mBAGA,oCAGF,qXAEE,gDACA,sBACA,mBACA,mBAGA,qCC3WV,kBACE,UACE,sBACA,kBACA,8BAIA,oBACA,mBAEA,2BACA,kBACA,aACA,8CACA,4DACA,eACA,2BACA,mBAEA,mBACE,mBAQF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAGF,2EACE,eAMF,YACE,mBACA,yBACA,uBAGF,wBACE,iBAGF,iBACE,cAIF,oCACE,oCAGA,+CACE,uCAMF,mDACE,yCAIJ,qBACE,QAGF,uBACE,QACA,kBAGF,yBACE,QACA,kBAGF,wBACE,QACA,aACA,mBACA,eAGF,6BACE,0DAGF,kBACE,kBAMA,wNACE,mBACA,qBAGF,0PACE,qCACA,0BAKA,sSACE,mBACA,qBAGF,gUACE,qCACA,0BAIJ,0dAEE,WACA,cACA,kBACA,QACA,0BACA,eACA,iBACA,gBACA,eACA,gBACA,iCAGF,0OACE,gBAIF,gQACE,iCACA,iCAGF,kPACE,kBACA,UAOJ,qCACE,wBAIF,qDACE,wBAOA,yCACE,4BAKF,mCACE,cAGF,uCACE,cACA,cAGF,2BACE,mCACE,4BAGF,uCACE,6BAMJ,wCACE,oBACA,eACA,mBACA,8BAGF,yCACE,8BAOJ,2DCxNF,2CACA,kCACA,0CD2NE,oDC3MF,sCACA,2CACA,gDDgNI,mFCxNJ,sCACA,2CACA,yCD2NI,4ECzMJ,mCACA,2CACA,gDD6ME,uCACE,8BAMF,0BACE,6BAEA,iCAEA,iIAGE,8BACA,gCAGF,qCACE,iBAGF,2FChQJ,2CACA,uCACA,0CDmQI,oFC3OJ,mCACA,2CACA,gDDiPI,+EACE,oBACA,eAEA,sFACE,WACA,cACA,sBACA,gBACA,8BACA,8CACA,sBACA,qBACA,wBACA,yBACA,yCAKN,yBACE,oCACA,0CACA,kCAEA,kCACE,uCACA,+BACA,wCACA,0CACA,iCAIJ,8BACE,oCACA,yCACA,qCAGF,6DAEE,+BACA,0CACA,wCAEA,mGACE,qCAGF,+EACE,wCACA,+BACA,yCACA,0CACA,iCAIJ,8BACE,oCACA,0CACA,yCEtWN,kBACE,SAEE,wCACA,wCACA,yCACA,wDACA,6BACA,sBACA,8CACA,oDAGA,gDACA,iDAQA,qBACA,uBACA,wBACA,uBACA,2BACA,+BACA,yCACA,+BACA,qCACA,qBACA,kBACA,eAGA,mCACA,6BACA,8CAtBA,qBACE,0BACA,uCACA,mDAqBF,2BAEE,UACA,cACA,uBAGF,mBACE,aACA,WACA,8BACA,mBACA,uBAEA,oCACE,aAGF,+BACE,YAIJ,wEACE,WACA,cACA,wBAIF,qCAEE,UAGF,wDAGE,mBACA,2BACA,6BAGF,iDAEE,eACA,iCAGF,mDAEE,kCAGF,mDACE,+BACA,8CChGN,kBACE,mBAEE,6CACA,gDACA,8CACA,+CACA,kCACA,iBACA,6CAGA,iBACA,wBACA,sCACA,2CACA,2CACA,gDACA,qBAGA,qBACE,UACA,oBACA,uBACA,aACA,8BACA,mBACA,uBACA,2BACA,iDACA,+CACA,gCAEA,4BACE,WACA,sBACA,6BACA,4BACA,8CACA,sBACA,qBACA,wBACA,yBAGF,4BACE,oBACA,eACA,4BACA,iDACA,+CAEA,mCACE,uCAIJ,uBACE,mCAKJ,qBACE,oBACA,eACA,wBAEA,4BACE,mCAGF,2CACE,2CAGF,uDAEE,0BACA,gCAEA,qEACE,qCAIJ,mCACE,+BACA,8CCvFR,kBACE,WHwDA,oCACA,2CACA,gDGvDE,qBACA,mBACA,6CACA,+BACA,qBAEA,aACE,cACA,sBAEA,oBACE,WACA,kBACA,QACA,WACA,YACA,sBACA,+BAIJ,kBACE,kBAGF,wBACE,0DAGF,kDACE,qCACA,kCAEA,8EACE,oCAGF,8EACE,qCAGF,8EACE,qCAGF,8EACE,qCAIJ,0BACE,oCACA,kCAEA,wCACE,oCAGF,wCACE,oCAGF,wCACE,qCAGF,wCACE,qCAIJ,0BACE,qCACA,kCAEA,wCACE,oCAGF,wCACE,qCAGF,wCACE,qCAGF,wCACE,qCAIJ,0BACE,qCACA,kCAEA,wCACE,oCAGF,wCACE,qCAGF,wCACE,qCAGF,wCACE,qCAIJ,yBACE,oCACA,kCAEA,uCACE,mCAGF,uCACE,oCAGF,uCACE,oCAGF,uCACE,oCAIJ,qCACE,sCAIJ,2BACE,GACE,4DAGF,KACE,+DCrJN,kBACE,4DACE,UJWF,2CACA,mCACA,2CITE,cAIA,oCACE,4BAGF,wCACE,4BCfN,kBACE,wRAIE,oBAIA,kOAGE,mBAOF,oHAEE,kCAGF,uJAEE,wCAGF,yJAEE,yCAGF,6MAEE,kBAEA,6NACE,WACA,kBACA,sDACA,eACA,eACA,2BACA,kCACA,0BACA,+DAIJ,6FACE,sDAEA,yOAEE,kCAIJ,4MAGE,oDAGF,oGACE,wBACA,iBACA,kBACA,WACA,eACA,gHAGF,gHACE,uBAGF,4GACE,oCACA,kCACA,+BACA,qBACA,qBACA,YACA,iCAGF,mNAEE,gDACA,eACA,QACA,oBACA,WAGF,sEACE,aAGF,wGACE,aACA,2BACA,wDAEA,6HACE,iCAEA,uBAHF,6HAII,iCAGF,sBAPF,6HAQI,2BAIJ,+hBL9FJ,2CACA,uCACA,0CK+FM,uBACA,yDAGF,0GACE,qBAEA,gHACE,0BAIJ,2GACE,SACA,UAEA,8GACE,gBACA,gBACA,wCACA,0CAIJ,wHACE,qDACA,aACA,sBACA,2BACA,oCACA,kCAEA,0CARF,wHASI,cACA,cAGF,iuBACE,SACA,YAGF,2IACE,cAIJ,0HACE,2BAEA,8IACE,UAGF,4HACE,cACA,wCASN,qJAEE,iCAGF,iKAEE,sCAGF,mKAEE,wCAGF,yQAGE,mDAGF,yGACE,0CACA,iBACA,gBACA,kBACA,QAGF,6GACE,aACA,sBACA,2BACA,yCAEA,+GACE,qBACA,0CAEA,qHACE,0BAIJ,wjBLlMJ,sCACA,2CACA,gDKmMM,wCAGF,gHACE,SACA,UAEA,mHACE,gBACA,gBACA,wCACA,0CAIJ,+HACE,4CAGF,6HACE,sEACA,2CAIJ,2EACE,cACA,qCACA,aACA,2BACA,mBACA,eACA,iBAEA,iFACE,0CAGF,mFACE,WACA,sBACA,sBACA,gBACA,eACA,8CACA,sBACA,qBACA,wBACA,cACA,sDC3RR,kBACE,YACE,eAEA,oBACA,mBACA,uBACA,kBACA,wBACA,4BACA,uBACA,+CACA,+BACA,2CACA,kCACA,iBACA,sBACA,+CACA,gBAEA,0BACE,uBACA,yBACA,cAGF,gBACE,4CACA,kBC9BN,kBACE,2CAEE,kEACA,6CACA,gDACA,yCACA,sDACA,sDACA,yCACA,yCACA,8CACA,mDACA,6CACA,mDAGA,mBACA,2CACA,qCACA,qCAEA,oDACE,mBAGF,yIAGE,UAGF,8CACE,aACA,sBACA,gBAIF,yDACE,gEAGF,6CACE,eAEA,mDACE,0BAGF,2DACE,+BACA,6CAIJ,+DACE,SACA,4BACA,aACA,sBACA,oBACA,wBACA,iBACA,sDAEA,iEACE,wBAEA,wEACE,yCACA,0BAGF,uEACE,8BAKN,qHAEE,8CACA,oBAEA,yHACE,sCAGF,uIACE,uBAGF,yJACE,4BAGF,wVAEE,UAIJ,2JAEE,2DAGF,iHACE,wBAGF,wDACE,aACA,4BACA,mDACA,mCAEA,YAEA,6JAEE,yCACA,0BACA,2BAGF,gFACE,aAGF,+IAEE,UAGF,uJAEE,oCAGF,6IAEE,2BACA,+BACA,+BACA,qCAEA,yJACE,0BAKN,4DACE,oCAEA,qJAEE,0BAIJ,uKAEE,iCAGF,qLAEE,oCACA,oBACA,gBACA,iCACA,2BC5KN,kBACE,iEACE,qCACA,8CACA,gDAEA,oEROF,2CACA,mCACA,2CQLE,wIAEE,SAGF,wIRgBF,sCACA,2CACA,yCQbE,oEACE,yCACA,+CACA,eAGF,oEACE,2CAGF,oEACE,UACA,SAGF,kFACE,gBAEA,qFACE,SACA,2CAIJ,8EACE,aACA,mBAGF,8EACE,4BACA,oCACA,mCACA,aAEA,YAEA,yLAEE,2BAGF,kXAIE,aACA,8BACA,mCAGF,+LAEE,aAGF,2LAEE,iCAGF,qLAEE,+CAGF,iFACE,gBACA,4CAEA,oFACE,oCC3FV,kBAEI,kEACE,mBAEA,cACA,2DAEA,2IACE,yDAGF,iFTyBJ,sCACA,2CACA,gDSvBI,iGACE,WACA,qBACA,sBACA,sBACA,sBACA,qBACA,iBACA,gBACA,4CACA,mCACA,UACA,yCACA,qBAGF,2GACE,UAIJ,+BACE,2CACA,qCAGF,0DACE,wBAGF,yFACE,OAIF,yNAGE,6CAEA,qCACA,2BAKF,oTAGE,6CAEA,kCACA,+CAKF,uTAGE,4CAEA,kCACA,+CAIF,gPAGE,uCAEA,aACA,gDACA,+BAKF,qQAGE,gDAGF,yDACE,mCAGF,kEACE,iBAEA,uGACE,mCAIJ,+EACE,kBACA,oBACA,oBACA,qBACA,iBACA,UACA,UACA,iGACA,kCACA,6BAGF,2FACE,UACA,+BACA,iGAGF,sFACE,uBACA,aACA,2BACA,mBACA,eACA,iBACA,2DAEA,8FACE,WACA,sBACA,sBACA,gBACA,eACA,4CACA,sBACA,qBACA,wBACA,cACA,oCCxJR,kBACE,eACE,8CAEA,aACA,0BACA,qBACA,iBACA,2BAEA,2BACE,gDAGF,wGAEE,0CAGF,wEACE,0CAGF,mDACE,yCAGF,wDAEE,UVJJ,2CACA,uCACA,0CUMI,qCACA,kBAGF,+BACE,UVDJ,sCACA,2CACA,gDUGI,kBAGF,2BACE,qCAIF,0BACE,oBACA,iDACA,+BAEA,8HAEE,+BAEA,0TAEE,WACA,kBAIJ,mFACE,mCAEA,uLAEE,WAGF,mGACE,WAIJ,+CACE,cAGF,sCACE,cACA,cAGF,qEAEE,iBACA,kBACA,WACA,cAGF,0CACE,iBACA,WACA,cAKJ,iDAEE,eACA,0BACA,qCAIA,uBACE,qCAEA,sCACE,qCAKN,sCACE,sCCvHJ,iEACE,aACA,uBACA,mBACA,OAIC,kFACC,yBAGF,kEACE,sBACA,gCAGF,6JAEE,oBAGF,+JAEE,qBAGF,wFACE,qBAGF,0FACE,qBAKF,+KAEE,wBAGF,4EX1BF,2CACA,kCACA,0CW2BI,qBClDN,kBAEI,sGACE,oCAGF,oDACE,eACA,iBACA,qCAGF,qDACE,oBCXN,kBACE,+BACE,wCACA,4GACA,oDACA,4DACA,6CACA,iCACA,gCAGA,WAEA,gBACA,cACA,2BAEA,wCACE,YAGF,4EACE,8CAOA,uBAJF,6CAKI,+CAIA,4BADF,mEAEI,+CAKN,uDAGE,mBAEA,8GAEE,eAGF,qFAEE,cACA,qBACA,+CACA,+CAGF,6EAEE,+CACA,+CACA,kBAGF,6DACE,uCAMJ,6CACE,eAEA,2DACE,kBAGF,0DACE,iDAGF,mDACE,iDAGF,4PAIE,WACA,kBACA,QAMJ,0CACE,gBACA,4BACA,uCAGF,gDACE,kBAGF,gGAEE,WAGF,gDACE,UACA,gBAGE,oCADF,sGAEI,6DAGF,6CALF,sGAOI,6DAKJ,sHAEE,gBAEA,oIACE,WACA,kBACA,iBACA,oBACA,iCACA,kBAEA,qCARF,oIASI,oBAGF,sCAZF,oIAaI,oBAKN,sEACE,mBACA,yFAGF,oEACE,qBACA,0FAOF,4BAEE,gIACE,+BACA,6BAGF,wKACE,4BACA,4BAKN,uBAEE,oFACE,+BACA,6BAGF,4HACE,4BACA,4BAIJ,wGACE,gBACA,4BACA,UAEA,6CAGE,sHACE,WACA,kBACA,iDACA,oBACA,+CACA,iDACA,mCAGF,wJACE,kDACA,qBAKN,gGACE,0CAGF,4FACE,sCACA,UAGF,wCAKI,oPACE,WACA,kBACA,iBACA,oBACA,iCACA,kBAEA,qCARF,oPASI,oBAGF,sCAZF,oPAaI,oBAIJ,2HACE,mBACA,sFAGF,yHACE,qBACA,yFC7OV,kBAGE,MCqQA,szFDzOA,yKAYE,8BAIA,ogDA0CE,kBAGF,gCACE,mBAIJ,4FAGE,aAGF,gCACE,cACA,6EAGF,2CACE,aAGF,eACE,8BAGF,cACE,8BAEA,kDACE,aAIJ,yBACE,UAGF,wBACE,UACA,eACA,cAGF,kBACE,mBAEA,8BACE,oBAGF,8BACE,oBAGF,2BACE,qBAIJ,oCACE,kBACE,2DAGF,uBACE,4BAKJ,yCACE,uBACE,2DACA","file":"nano.css","sourcesContent":["@layer reset, tokens, themes, globals, components, utilities, application;@layer reset{*,*::before,*::after{box-sizing:border-box}html{text-size-adjust:none}body{line-height:1.5;min-block-size:100vh}body,h1,h2,h3,h4,h5,p,figure,picture{margin:0}hr{block-size:1px;border-width:0;box-sizing:content-box}img,picture{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}[hidden]{display:none !important}iframe{display:block}}@layer tokens{:root{--nano-color-grey-mono-1600: rgb(24 24 24 / 100%);--nano-color-grey-mono-1550: rgb(30 30 30 / 100%);--nano-color-grey-mono-1500: rgb(38 38 38 / 100%);--nano-color-grey-mono-1400: rgb(51 51 51 / 100%);--nano-color-grey-mono-1300: rgb(66 66 66 / 100%);--nano-color-grey-mono-1200: rgb(84 84 83 / 100%);--nano-color-grey-mono-1100: rgb(99 99 99 / 100%);--nano-color-grey-mono-1000: rgb(118 118 117 / 100%);--nano-color-grey-mono-900: rgb(135 135 135 / 100%);--nano-color-grey-mono-800: rgb(150 150 149 / 100%);--nano-color-grey-mono-700: rgb(166 166 166 / 100%);--nano-color-grey-mono-400: rgb(215 214 213 / 100%);--nano-color-grey-mono-300: rgb(231 230 228 / 100%);--nano-color-grey-mono-200: rgb(241 240 238 / 100%);--nano-color-grey-mono-100: rgb(246 245 244 / 100%);--nano-color-grey-mono-075: rgb(249 248 248 / 100%);--nano-color-grey-mono-050: rgb(252 252 251 / 100%);--nano-color-blue-cerulean-1600: rgb(0 26 40 / 100%);--nano-color-blue-cerulean-1500: rgb(1 41 63 / 100%);--nano-color-blue-cerulean-1400: rgb(1 54 83 / 100%);--nano-color-blue-cerulean-1300: rgb(1 71 106 / 100%);--nano-color-blue-cerulean-1200: rgb(1 89 127 / 100%);--nano-color-blue-cerulean-1100: rgb(1 106 146 / 100%);--nano-color-blue-cerulean-1000: rgb(0 127 168 / 100%);--nano-color-blue-cerulean-900: rgb(32 146 183 / 100%);--nano-color-blue-cerulean-800: rgb(58 161 195 / 100%);--nano-color-blue-cerulean-700: rgb(85 178 207 / 100%);--nano-color-blue-cerulean-300: rgb(186 238 251 / 100%);--nano-color-blue-cerulean-100: rgb(226 249 255 / 100%);--nano-color-blue-cerulean-075: rgb(234 251 255 / 100%);--nano-color-blue-cerulean-050: rgb(247 253 255 / 100%);--nano-color-violet-ink-1600: rgb(12 14 75 / 100%);--nano-color-violet-ink-1500: rgb(19 22 117 / 100%);--nano-color-violet-ink-1400: rgb(27 31 147 / 100%);--nano-color-violet-ink-1300: rgb(47 48 168 / 100%);--nano-color-violet-ink-1200: rgb(67 67 189 / 100%);--nano-color-violet-ink-1100: rgb(85 82 207 / 100%);--nano-color-violet-ink-1000: rgb(106 103 221 / 100%);--nano-color-violet-ink-900: rgb(124 123 228 / 100%);--nano-color-violet-ink-800: rgb(139 141 234 / 100%);--nano-color-violet-ink-700: rgb(156 159 241 / 100%);--nano-color-violet-ink-600: rgb(173 178 247 / 100%);--nano-color-violet-ink-500: rgb(189 195 253 / 100%);--nano-color-violet-ink-400: rgb(206 212 255 / 100%);--nano-color-violet-ink-300: rgb(225 228 255 / 100%);--nano-color-violet-ink-200: rgb(238 240 255 / 100%);--nano-color-violet-ink-100: rgb(244 245 255 / 100%);--nano-color-violet-ink-075: rgb(247 248 255 / 100%);--nano-color-green-leaf-1600: rgb(1 27 32 / 100%);--nano-color-green-leaf-1500: rgb(1 43 51 / 100%);--nano-color-green-leaf-1400: rgb(1 57 67 / 100%);--nano-color-green-leaf-1300: rgb(2 73 87 / 100%);--nano-color-green-leaf-1200: rgb(2 93 106 / 100%);--nano-color-green-leaf-1100: rgb(1 111 110 / 100%);--nano-color-green-leaf-1000: rgb(1 134 113 / 100%);--nano-color-green-leaf-900: rgb(29 151 131 / 100%);--nano-color-green-leaf-800: rgb(52 167 146 / 100%);--nano-color-green-leaf-700: rgb(78 183 162 / 100%);--nano-color-green-leaf-600: rgb(104 200 178 / 100%);--nano-color-green-leaf-200: rgb(197 253 232 / 100%);--nano-color-green-leaf-075: rgb(222 254 242 / 100%);--nano-color-green-leaf-050: rgb(238 255 249 / 100%);--nano-color-red-brick-1600: rgb(51 8 10 / 100%);--nano-color-red-brick-1500: rgb(79 13 16 / 100%);--nano-color-red-brick-1400: rgb(103 17 21 / 100%);--nano-color-red-brick-1300: rgb(132 21 27 / 100%);--nano-color-red-brick-1200: rgb(161 32 36 / 100%);--nano-color-red-brick-1100: rgb(185 46 48 / 100%);--nano-color-red-brick-1000: rgb(210 67 70 / 100%);--nano-color-red-brick-900: rgb(222 93 96 / 100%);--nano-color-red-brick-800: rgb(229 116 120 / 100%);--nano-color-red-brick-700: rgb(235 139 144 / 100%);--nano-color-red-brick-400: rgb(255 201 203 / 100%);--nano-color-red-brick-300: rgb(255 221 222 / 100%);--nano-color-red-brick-100: rgb(255 241 242 / 100%);--nano-color-yellow-lime-1000: #6e7d17;--nano-color-yellow-lime-500: rgb(184 210 39 / 100%);--nano-color-yellow-lime-200: rgb(224 255 50 / 100%);--nano-color-yellow-lime-100: rgb(236 255 131 / 100%);--nano-color-yellow-lime-075: rgb(242 255 172 / 100%);--nano-color-yellow-lime-050: rgb(250 255 223 / 100%);--nano-color-orange-1600: rgb(47 13 2 / 100%);--nano-color-orange-1500: rgb(74 20 3 / 100%);--nano-color-orange-1400: rgb(97 27 4 / 100%);--nano-color-orange-1300: rgb(125 34 5 / 100%);--nano-color-orange-1200: rgb(148 52 4 / 100%);--nano-color-orange-1100: rgb(168 68 4 / 100%);--nano-color-orange-1000: rgb(192 87 3 / 100%);--nano-color-orange-900: rgb(210 107 3 / 100%);--nano-color-orange-800: rgb(226 124 3 / 100%);--nano-color-orange-600: rgb(255 162 14 / 100%);--nano-color-orange-400: rgb(254 206 136 / 100%);--nano-color-orange-300: rgb(254 226 189 / 100%);--nano-color-orange-200: rgb(254 239 225 / 100%);--nano-color-orange-100: rgb(254 243 233 / 100%);--nano-color-orange-075: rgb(254 247 240 / 100%);--nano-color-basic-white: rgb(255 255 255 / 100%);--nano-color-basic-white-rgb: 255 255 255;--nano-color-basic-black: rgb(0 0 0 / 100%);--nano-color-basic-black-rgb: 0 0 0}}@layer tokens{:root{--nano-font-sans: \"Noto Sans\", \"Noto Sans Fallback: Arial\", arial, sans-serif;--nano-font-mono: SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;--nano-font-serif: Georgia, \"Times New Roman\", serif;--nano-font-size-2xs: 0.75rem;--nano-font-size-xs: 0.875rem;--nano-font-size-small: 1rem;--nano-font-size-sm: var(--nano-font-size-small);--nano-font-size-medium: 1.125rem;--nano-font-size-md: var(--nano-font-size-medium);--nano-font-size-l: 1.375rem;--nano-font-size-lg: var(--nano-font-size-l);--nano-font-size-xl: 1.6875rem;--nano-font-size-2xl: 2.5rem;--nano-font-size-3xl: 3.25rem;--nano-font-weight-light: 300;--nano-font-weight-normal: 400;--nano-font-weight-bold: 700;--nano-letter-spacing-denser: -0.03em;--nano-letter-spacing-dense: -0.015em;--nano-letter-spacing-normal: normal;--nano-letter-spacing-loose: 0.025em;--nano-letter-spacing-looser: 0.0375em;--nano-line-height-denser: 1.2;--nano-line-height-dense: 1.4;--nano-line-height-normal: 1.6;--nano-line-height-loose: 1.8;--nano-line-height-looser: 2}@media(width <= 767px){:root{--nano-font-size-l: 1.3125rem;--nano-font-size-xl: 1.5rem;--nano-font-size-2xl: 2.125rem;--nano-font-size-3xl: 2.625rem}}:root[lang^=ja-]{--nano-font-sans: \"Noto Sans JP\", \"Noto Sans JP Fallback: Arial\", arial, sans-serif}:root[lang^=zh-]{--nano-font-sans: \"Noto Sans SC\", \"Noto Sans SC Fallback: Arial\", arial, sans-serif}}@layer tokens{:root{--nano-spacing-xs: 0.3125rem;--nano-spacing-sm: 0.625rem;--nano-spacing-l3: var(--nano-spacing-sm);--nano-spacing-md: 1.25rem;--nano-spacing-l2: var(--nano-spacing-md);--nano-spacing-l: 1.875rem;--nano-spacing-xl: 2.5rem;--nano-spacing-l1-default: var(--nano-spacing-xl);--nano-spacing-2xl: 3.75rem;--nano-spacing-l1-feature: var(--nano-spacing-2xl)}@media(width <= 1024px){:root{--nano-spacing-l1-feature: 3.125rem;--nano-spacing-l1-default: var(--nano-spacing-l);--nano-spacing-l2: var(--nano-spacing-md);--nano-spacing-l3: var(--nano-spacing-sm)}}@media(width <= 767px){:root{--nano-spacing-l1-feature: var(--nano-spacing-xl);--nano-spacing-l1-default: var(--nano-spacing-md);--nano-spacing-l: var(--nano-spacing-md);--nano-spacing-l2: var(--nano-spacing-sm);--nano-spacing-l3: var(--nano-spacing-sm)}}}@layer tokens{:root{--nano-border-radius-small: 0.1875rem;--nano-border-radius-medium: 0.25rem;--nano-border-radius-large: 0.5rem;--nano-border-radius-x-large: 1rem;--nano-border-radius-circle: 50%;--nano-border-radius-pill: 9999px;--nano-transition-x-fast: 120ms;--nano-transition-fast: 300ms;--nano-transition-medium: 500ms;--nano-transition-slow: 700ms;--nano-transition-x-slow: 1000ms;--nano-focus-ring-color: var(--nano-color-blue-cerulean-700);--nano-focus-ring-style: solid;--nano-focus-ring-width: 3px;--nano-focus-ring: var(--nano-focus-ring-style) var(--nano-focus-ring-width) var(--nano-focus-ring-color);--nano-focus-ring-offset: 1px;--nano-icon-size-small: 16px;--nano-pictogram-size-small: 24px;--nano-pictogram-size-medium: 32px;--nano-icon-size-large: 32px;--nano-pictogram-size-large: 48px;--nano-pictogram-size-x-large: 64px;--nano-image-ratio-landscape: 16/9;--nano-image-ratio-square: 1/1;--nano-image-ratio-portrait: 3/4;--nano-z-index-raised: 5;--nano-z-index-menubar: 10;--nano-z-index-mask: 50;--nano-z-index-dropdown: 300;--nano-z-index-modal: 700;--nano-z-index-alert: 800;--nano-z-index-tooltip: 1000;--nano-overlay-background-color: rgb(0 0 0 / 43%);--nano-overlay-blur: 3px}}@font-face{font-display:swap;font-family:\"Noto Sans JP\";font-style:normal;font-weight:300;src:url(\"./assets/font/jp/noto-sans-jp-v53-japanese_latin-300.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans JP\";font-style:normal;font-weight:400;src:url(\"./assets/font/jp/noto-sans-jp-v53-japanese_latin-regular.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans JP\";font-style:normal;font-weight:700;src:url(\"./assets/font/jp/noto-sans-jp-v53-japanese_latin-700.woff2\") format(\"woff2\")}@font-face{font-family:\"Noto Sans JP Fallback: Arial\";src:local(\"Arial\");size-adjust:110%;ascent-override:101%;descent-override:23%;line-gap-override:4%}@font-face{font-display:swap;font-family:\"Noto Sans SC\";font-style:normal;font-weight:300;src:url(\"./assets/font/sc/noto-sans-sc-v37-chinese-simplified_latin-300.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans SC\";font-style:normal;font-weight:400;src:url(\"./assets/font/sc/noto-sans-sc-v37-chinese-simplified_latin-regular.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans SC\";font-style:normal;font-weight:700;src:url(\"./assets/font/sc/noto-sans-sc-v37-chinese-simplified_latin-700.woff2\") format(\"woff2\")}@font-face{font-family:\"Noto Sans SC Fallback: Arial\";src:local(\"Arial\");size-adjust:110%;ascent-override:101%;descent-override:23%;line-gap-override:4%}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:normal;font-weight:300;src:url(\"./assets/font/latin/noto-sans-v39-latin-300.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:italic;font-weight:300;src:url(\"./assets/font/latin/noto-sans-v39-latin-300italic.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:normal;font-weight:400;src:url(\"./assets/font/latin/noto-sans-v38-latin-regular.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:italic;font-weight:400;src:url(\"./assets/font/latin/noto-sans-v38-latin-italic.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:normal;font-weight:700;src:url(\"./assets/font/latin/noto-sans-v38-latin-700.woff2\") format(\"woff2\")}@font-face{font-display:swap;font-family:\"Noto Sans\";font-style:italic;font-weight:700;src:url(\"./assets/font/latin/noto-sans-v38-latin-700italic.woff2\") format(\"woff2\")}@font-face{font-family:\"Noto Sans SC Fallback: Arial\";src:local(\"Arial\");size-adjust:110%;ascent-override:101%;descent-override:23%;line-gap-override:4%}@layer globals{html{font-family:var(--nano-font-sans);font-weight:400;background-color:var(--nano-color-base-0);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}html[lang^=ja-] em,html[lang^=ja-] i,html[lang^=zh-] em,html[lang^=zh-] i{font-style:normal !important}::selection{background-color:var(--nano-color-primary-300);color:var(--nano-color-neutral-1400)}:target{scroll-margin-block:5ex}h1,h2,h3,h4,h5{text-wrap:balance;margin-block-end:var(--nano-spacing-md)}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child),h4:not(:first-child),h5:not(:first-child){margin-block-start:var(--nano-spacing-l)}h1.hero{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-3xl);line-height:var(--nano-line-height-denser)}h1{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-2xl);line-height:var(--nano-line-height-denser)}h2{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}h3{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}h4{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}h5{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold)}p{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);margin-block-end:var(--nano-spacing-md)}ol,ul{padding-inline-start:var(--nano-spacing-md);margin-block:var(--nano-spacing-sm) var(--nano-spacing-md)}li{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);margin-block-end:var(--nano-spacing-sm)}li:last-child{margin-block-end:var(--nano-spacing-md)}blockquote{border-inline-start:3px solid var(--nano-color-primary-1000);padding-inline-start:var(--nano-spacing-xl);display:flex;flex-direction:column;gap:var(--nano-spacing-sm);margin:0;margin-block-end:var(--nano-spacing-md)}blockquote>*:not(cite){font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);letter-spacing:var(--nano-letter-spacing-looser);margin-block-end:var(--nano-spacing-md);font-weight:var(--nano-font-weight-light);margin-block:0}blockquote cite{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);font-style:normal}figure{display:table;border-collapse:separate;border-spacing:0}figure figcaption{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);background-color:var(--nano-color-basic-black);color:var(--nano-color-basic-white);padding:var(--nano-spacing-md);display:table-caption;caption-side:bottom}button,input,label{line-height:var(--nano-line-height-denser)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:var(--nano-color-neutral-300);margin-block:.5em;margin-inline:0;padding:0}hr+p,.horizontal-rule+p,.content-divider+p{margin-block:var(--nano-spacing-md)}a{color:var(--nano-color-primary-1000)}a:focus,button:focus{outline:none}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:root{--table-padding: var(--nano-spacing-md);--table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));--table-border-color: var(--nano-color-neutral-200);--table-border-color-header: var(--nano-color-primary-1000);--table-background: var(--nano-color-base-0)}table{color:var(--nano-color-neutral-1400);border-collapse:separate;border-spacing:0;text-align:start}table.compact{--table-padding: var(--table-compact-padding)}table .content-center{text-align:center}table .content-end{text-align:end}table caption{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);text-align:start;margin-block-end:var(--nano-spacing-l1-default);max-inline-size:80vw}table th{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;background-color:var(--table-background);padding:var(--table-padding);text-align:start;font-weight:800;vertical-align:top}table td{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);background-color:var(--table-background);padding:var(--table-padding);text-align:start;vertical-align:top}table thead :where(td,th){border-block-end:2px solid var(--table-border-color-header);vertical-align:bottom}@container scroll-state(stuck: top){table thead :where(td,th){border-block-end-width:3px}}table tbody :where(td,th){border-block-end:1px solid var(--table-border-color)}table tfoot :where(td,th){border-block-start:2px solid var(--table-border-color-header);border-block-end:2px solid var(--table-border-color-header)}}@layer utilities{.n-text-hero{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-3xl);line-height:var(--nano-line-height-denser)}.n-text-quote{font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);letter-spacing:var(--nano-letter-spacing-looser);margin-block-end:var(--nano-spacing-md);font-weight:var(--nano-font-weight-light)}.n-text-2xl{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-2xl);line-height:var(--nano-line-height-denser)}.n-text-xl{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.n-text-lg{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}.n-text-md{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.n-text,.n-text-normal{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.n-text-sm,.n-text-small{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.n-text-xs{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.n-img-landscape{aspect-ratio:var(--nano-image-ratio-landscape);object-fit:cover}.n-img-4x3{aspect-ratio:4/3;object-fit:cover}.n-img-square{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover}.n-img-portrait{aspect-ratio:var(--nano-image-ratio-portrait);object-fit:cover}.n-img-avatar{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover;border-radius:var(--nano-border-radius-circle)}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar){color:rgba(0,0,0,0);-webkit-box-decoration-break:clone;box-decoration-break:clone;background-color:rgba(0,0,0,0);background-image:linear-gradient(to right, var(--nano-color-neutral-300) 33%, var(--nano-color-neutral-50), var(--nano-color-neutral-300) 66%);background-size:300% .7em;animation:skeleton-shimmer 2s infinite ease-in-out;user-select:none;pointer-events:none;width:fit-content}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar) img{opacity:0}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar):is(h1,h2,h3,h4,h5,h6,p,span,a){display:inline;border-radius:4px}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar):is(h1,h2,h3,h4,h5,h6,p,span,a)::before{content:\"\";display:block;margin-block-start:inherit;padding-block-start:inherit}.n-loader-skeleton *:not(:has(*:not(img))):not(nano-spinner,nano-progress-bar):is(h1,h2,h3,h4,h5,h6,p,span,a)::after{content:\"\";display:block;margin-block-end:inherit;padding-block-end:inherit}.n-loader-skeleton *{text-decoration:none !important}@keyframes skeleton-shimmer{from{background-position:100%}to{background-position:0%}}.n-content-divider{block-size:4px;background-color:var(--nano-color-neutral-100)}.n-visually-hidden:not(:focus,:active,:focus-within),.visually-hidden:not(:focus,:active,:focus-within){clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}}/*# sourceMappingURL=core.css.map */\n",":where(nano-footer, .nano-footer) {\n h1, h2, h3, h4, h5, h6 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-medium);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-normal);\n margin: var(--header-margin);\n }\n}","@use '../../global/style/nano-theme/tokens/layers';\n\n@layer components {\n .nano-toast-stack {\n position: fixed;\n z-index: var(--nano-z-index-modal);\n inline-size: 28rem;\n max-inline-size: 100%;\n max-block-size: 100%;\n // overflow: clip;\n\n &--tr {\n inset-block-start: 0;\n inset-inline-end: 0;\n }\n\n &--tl {\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n &--br {\n inset-block-end: 0;\n inset-inline-end: 0;\n }\n\n &--bl {\n inset-block-end: 0;\n inset-inline-start: 0;\n }\n }\n}","@use '../../global/style/nano-theme/tokens' as tokens;\n\n@layer components {\n .nano-sortable__placeholder {\n opacity: 0;\n }\n\n .nano-sortable__dragged {\n opacity: .6;\n cursor: grabbing !important;\n box-shadow: var(--nano-shadow-l2);\n z-index: 1;\n position: relative;\n }\n\n .nano-sortable__keyboard-handle {\n background: var(--nano-color-base-0);\n }\n\n .nano-sortable__handle-dragged {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n}","@layer components {\n nano-cta {\n // dynamically calculate a11y / wcag compliant color based on the background\n // --color: #{'lch(from var(--bg) calc((49.44 - l) * infinity) 0 0)'};\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-blue-cerulean-1000);\n --bg-hover: var(--nano-color-blue-cerulean-1100);\n --bg-active: var(--nano-color-blue-cerulean-1200);\n --border: 1px solid var(--bg);\n --icon-size: 1em;\n --padding-v: 0.4375em;\n --padding-h: 1.125em;\n --spinner-size: 1em;\n\n // Internal - don't advertise\n --font-size: var(--nano-font-size-small);\n --line-height: var(--nano-line-height-normal);\n --gap: var(--nano-spacing-sm);\n --icon-display: none;\n --loading-display: none;\n --loading-opacity: 0;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 1;\n\n display: contents;\n\n &:has(.nano-internal-cta) {\n display: inline-block;\n }\n\n // flip icon for RTL\n &:dir(rtl) {\n --flip-icon-ltr: 1;\n --flip-icon-rtl: 0;\n }\n\n &[group=\"balanced\"] {\n display: inline-grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--gap);\n\n a,\n button {\n justify-content: space-evenly;\n }\n }\n\n &[group=\"stacked\"] {\n display: flex;\n flex-direction: column;\n gap: var(--gap);\n }\n\n // Variations\n\n // Themes + Variants\n &[secondary]:not([secondary=\"false\"]),\n :is([secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-primary-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-primary-100);\n --bg-active: var(--nano-color-primary-300);\n --border: 1px solid var(--color);\n }\n\n &[theme=\"success\"],\n :is([theme=\"success\"]) {\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-success-1000);\n --bg-hover: var(--nano-color-success-1100);\n --bg-active: var(--nano-color-success-1200);\n --border: 1px solid var(--bg);\n }\n\n &[theme=\"success\"][secondary]:not([secondary=\"false\"]),\n :is([theme=\"success\"][secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-success-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-success-75);\n --bg-active: var(--nano-color-success-200);\n --border: 1px solid var(--color);\n }\n\n &[theme=\"danger\"],\n :is([theme=\"danger\"]) {\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-danger-1000);\n --bg-hover: var(--nano-color-danger-1100);\n --bg-active: var(--nano-color-danger-1200);\n --border: 1px solid var(--bg);\n }\n\n &[theme=\"danger\"][secondary]:not([secondary=\"false\"]),\n :is([theme=\"danger\"][secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-danger-1200);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-danger-300);\n --bg-active: var(--nano-color-danger-400);\n --border: 1px solid var(--color);\n }\n\n &[theme=\"warning\"],\n :is([theme=\"warning\"]) {\n --color: var(--nano-color-basic-white);\n --bg: var(--nano-color-warning-1000);\n --bg-hover: var(--nano-color-warning-1100);\n --bg-active: var(--nano-color-warning-1200);\n --border: 1px solid var(--bg);\n }\n\n &[theme=\"warning\"][secondary]:not([secondary=\"false\"]),\n :is([theme=\"warning\"][secondary]):not([secondary=\"false\"]) {\n --color: var(--nano-color-warning-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-warning-200);\n --bg-active: var(--nano-color-warning-300);\n --border: 1px solid var(--color);\n }\n\n &[size=\"medium\"],\n :is([size=\"medium\"]) {\n --font-size: var(--nano-font-size-xs);\n --line-height: var(--nano-line-height-dense);\n --gap: var(--nano-spacing-xs);\n }\n\n &[size=\"small\"],\n :is([size=\"small\"]) {\n --font-size: var(--nano-font-size-2xs);\n --line-height: var(--nano-line-height-denser);\n --gap: var(--nano-spacing-xs);\n --padding-h: 1em;\n --padding-v: 0.5em;\n }\n\n // Loading state - can be placed on wrapper or nested elements\n &:is([loading], [loading=\"true\"]):not([loading=\"false\"]),\n :is([loading], [loading=\"true\"]):not([loading=\"false\"]) {\n --text-color: transparent !important;\n --loading-display: block;\n --loading-opacity: 1;\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n\n cursor: wait;\n\n a,\n button {\n --text-color: transparent !important;\n\n cursor: wait;\n }\n }\n\n // Disabled state - derived from attributes of nested elements\n :is([disabled], [disabled=\"true\"]):not([disabled=\"false\"]),\n a:not([href]) {\n --color: var(--nano-color-neutral-1200);\n --text-color: var(--color);\n --bg: var(--nano-color-neutral-100);\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --border: 1px solid var(--color);\n\n cursor: not-allowed;\n\n a,\n button {\n cursor: not-allowed;\n }\n }\n\n // Base style\n :is(a, button, .button) {\n --text-color: var(--color);\n\n margin: 0;\n appearance: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--bg) !important;\n color: var(--text-color) !important;\n border-radius: var(--nano-border-radius-pill);\n line-height: var(--line-height);\n letter-spacing: var(--nano-letter-spacing-loose);\n font-size: var(--font-size);\n padding: var(--padding-v) var(--padding-h);\n gap: var(--nano-spacing-sm);\n border: var(--border) !important;\n transition: color var(--nano-transition-fast) ease;\n text-decoration: none !important;\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n\n &:hover {\n background-color: var(--bg-hover) !important;\n }\n\n &:active {\n background-color: var(--bg-active) !important;\n }\n\n // Loading spinner\n &::before {\n content: '';\n display: var(--loading-display);\n opacity: var(--loading-opacity);\n position: absolute;\n padding: 2.5px;\n aspect-ratio: 1;\n border-radius: 50%;\n inline-size: var(--spinner-size);\n background: var(--color);\n inset: calc(50% - (var(--spinner-size) / 2));\n mask:\n conic-gradient(#0000, #000) subtract,\n conic-gradient(#000 0 0) content-box;\n animation: load 1s linear infinite;\n transition: all var(--nano-transition-fast) ease;\n transition-behavior: allow-discrete;\n\n @keyframes load {\n to {\n rotate: 1turn\n }\n }\n }\n\n // Internal icon\n &::after {\n content: '';\n display: var(--icon-display);\n background-size: cover;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n background-color: var(--text-color);\n mask-image: var(--icon-svg);\n transition: color var(--nano-transition-fast) ease;\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n margin-inline-start: auto;\n rotate: calc(180deg * var(--flip-icon-ltr));\n }\n\n :which(nano-icon, .nano-icon),\n svg {\n color: inherit;\n inline-size: var(--icon-size);\n margin: auto 0;\n }\n }\n\n // Built-in Icons\n &:not([icon=\"false\"], :has(a nano-icon, a .nano-icon, a svg)) {\n &[icon=\"forward\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n\n a,\n button {\n // custom chevron padding-right as it has naturally has more whitespace\n padding-inline-end: 0.8125em;\n\n &::after {\n rotate: calc(180deg * var(--flip-icon-ltr));\n }\n }\n }\n\n &[icon=\"back\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n\n a,\n button {\n // custom chevron padding-right as it has naturally has more whitespace\n padding-inline-start: 0.8125em;\n\n &::after {\n rotate: calc(180deg * var(--flip-icon-rtl));\n order: -1;\n margin-inline-start: unset;\n }\n }\n }\n\n &[icon=\"up\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n a,\n button {\n &::after {\n transform: rotate(270deg);\n }\n }\n }\n\n &[icon=\"down\"] {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n a,\n button {\n &::after {\n transform: rotate(90deg);\n }\n }\n }\n\n &[icon=\"download\"] {\n --icon-svg: var(--nano-component-icon-download);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n }\n\n &[icon=\"open\"] {\n --icon-svg: var(--nano-component-icon-open);\n --icon-size: .9em;\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n }\n\n // Auto icons based on anchor attributes\n &:not([icon]) a[href]:not([href=\"\"], [icon], [href^=\"#\"]) {\n --icon-svg: var(--nano-component-icon-chevron);\n --icon-display: block;\n\n // Custom chevron padding-right as it has naturally has more whitespace\n padding-inline-end: 0.8125em;\n\n &[target=\"_blank\"] {\n --icon-svg: var(--nano-component-icon-open);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n // reset padding\n padding-inline-end: var(--padding-h);\n }\n\n &[download],\n &:is([href$=\".pdf\"], [href$=\".zip\"], [href$=\".doc\"], [href$=\".docx\"], [href$=\".xls\"], [href$=\".xlsx\"], [href$=\".ppt\"], [href$=\".pptx\"]) {\n --icon-svg: var(--nano-component-icon-download);\n --icon-display: block;\n --flip-icon-ltr: 0;\n --flip-icon-rtl: 0;\n\n // reset padding\n padding-inline-end: var(--padding-h);\n }\n }\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n nano-card {\n --color: currentColor;\n --bg: transparent;\n --gap: var(--nano-spacing-md);\n\n // internal\n\n --content-margin: 0;\n --flip-icon-ltr: 0;\n\n container-type: inline-size;\n position: relative;\n display: grid;\n grid-template-columns: minmax(197px, 31%) auto;\n grid-template-rows: repeat(calc(var(--row-count) - 1), auto);\n gap: var(--gap);\n background-color: var(--bg);\n color: var(--color);\n\n &:dir(rtl) {\n --flip-icon-ltr: 1;\n }\n\n // in-order to have an image that automatically spans all rows\n // we need to set an explicit row number (https://github.com/w3c/csswg-drafts/issues/2402)\n // This is a workaround; count the number of items - minus the image, this equals the number of rows.\n // Monitor if this is enough\n\n &:has(> :last-child:nth-child(1), > article > :last-child:nth-child(1)) {\n --row-count: 1;\n }\n\n &:has(> :last-child:nth-child(2), > article > :last-child:nth-child(2)) {\n --row-count: 2;\n }\n\n &:has(> :last-child:nth-child(3), > article > :last-child:nth-child(3)) {\n --row-count: 3;\n }\n\n &:has(> :last-child:nth-child(4), > article > :last-child:nth-child(4)) {\n --row-count: 4;\n }\n\n &:has(> :last-child:nth-child(5), > article > :last-child:nth-child(5)) {\n --row-count: 5;\n }\n\n &:has(> :last-child:nth-child(6), > article > :last-child:nth-child(6)) {\n --row-count: 6;\n }\n\n &:has(> :last-child:nth-child(7), > article > :last-child:nth-child(7)) {\n --row-count: 7;\n }\n\n //// CONTENT ////\n\n // reset spacing as we want it controlled via 'gap'\n * {\n margin-block: unset;\n margin-block-start: unset;\n margin-block-end: unset;\n }\n\n >*:not([slot]) {\n display: contents;\n }\n\n [slot] {\n display: block;\n }\n\n // image never has margin\n [slot]:not([slot=\"img\"], ul) {\n margin-inline: var(--content-margin);\n\n // last element might need margin\n &:last-child {\n margin-block-end: var(--content-margin);\n }\n }\n\n // no image? First element might need margin\n &:not(:has([slot=\"img\"])) {\n [slot]:first-child {\n margin-block-start: var(--content-margin);\n }\n }\n\n [slot=\"img\"] {\n order: 1;\n }\n\n [slot=\"title\"] {\n order: 2;\n text-wrap: balance;\n }\n\n [slot=\"content\"] {\n order: 3;\n text-wrap: balance;\n }\n\n [slot=\"footer\"] {\n order: 4;\n display: flex;\n align-items: center;\n gap: var(--gap);\n }\n\n nano-content-links {\n --color-border: rgb(var(--nano-color-base-rgb-1000) / 7%);\n }\n\n address {\n font-style: normal;\n }\n\n // if there's one `<a />` or `<button />` make the whole card clickable\n &:has(a:only-of-type):not(:has(button, nano-icon-button, input)),\n &:not([variant=\"product\"]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) {\n a {\n color: var(--color);\n text-decoration: none;\n }\n\n &:hover [slot=\"title\"] {\n color: var(--nano-color-primary-1000);\n text-decoration: underline;\n }\n\n // multiple title elements - only underline / colour the first one\n &:hover:has([slot=\"title\"] > * ~ *) {\n [slot=\"title\"] {\n color: var(--color);\n text-decoration: none;\n }\n\n [slot=\"title\"]> :first-child {\n color: var(--nano-color-primary-1000);\n text-decoration: underline;\n }\n }\n\n button::before,\n a::before {\n content: '';\n display: block;\n position: absolute;\n inset: 0;\n touch-action: manipulation;\n cursor: pointer;\n inline-size: 100%;\n block-size: 100%;\n animation: none;\n border-radius: 0;\n z-index: var(--enable-card-click);\n }\n\n nano-cta>* {\n position: static;\n }\n\n // hover state for promo cards\n &[variant^=\"promo\"]:hover {\n box-shadow: var(--nano-shadow-l0);\n background-color: var(--bg-hover);\n }\n\n nano-tooltip>* {\n position: relative;\n z-index: 2;\n }\n }\n\n // Disable whole card clicking for multiple links; edge cases\n\n // link slot element (e.g. <a slot=\"title\"><h2>...) and a link in the content\n &:has(a[slot]):has([slot] a) {\n --enable-card-click: -1;\n }\n\n // link in content and a link in the footer\n &:has([slot=\"content\"] a):has([slot=\"footer\"] a) {\n --enable-card-click: -1;\n }\n\n\n //// LAYOUT ////\n\n &:not([layout=\"landscape\"]) {\n [slot] {\n grid-column: 1 / -1 !important;\n }\n }\n\n &[layout=\"landscape\"] {\n [slot] {\n grid-column: 2;\n }\n\n [slot=\"img\"] {\n grid-column: 1;\n grid-row: 1/-1;\n }\n\n @container (width < 417px) {\n [slot] {\n grid-column: 1 / -1 !important;\n }\n\n [slot=\"img\"] {\n grid-column: 1 / -1 !important;\n }\n }\n }\n\n &[variant=\"product\"] {\n [slot=\"title\"] {\n display: inline-flex;\n gap: var(--gap);\n align-items: center;\n justify-content: space-between;\n }\n\n [slot=\"footer\"] {\n justify-content: space-between;\n }\n }\n\n //// SIZING ////\n\n\n [slot=\"title\"],\n [slot=\"title\"]> :first-child {\n @include styleMx.h3;\n }\n\n [slot=\"content\"],\n [slot=\"content\"]>* {\n @include styleMx.p;\n }\n\n &[size=\"small\"] {\n\n [slot=\"title\"],\n [slot=\"title\"]> :first-child {\n @include styleMx.h5;\n }\n\n [slot=\"content\"],\n [slot=\"content\"]>* {\n @include styleMx.text-small;\n }\n }\n\n &[variant=\"product\"][size=\"small\"] {\n --gap: var(--nano-spacing-sm);\n }\n\n //// PROMO CARDS ////\n\n // common promo setup and default theme\n &[variant^=\"promo\"] {\n --content-margin: var(--gap);\n\n box-shadow: var(--nano-shadow-l1);\n\n [slot=\"title\"],\n [slot=\"title\"]:hover,\n &:hover [slot=\"title\"] {\n color: var(--color) !important;\n text-decoration: none !important;\n }\n\n nano-cta>* {\n inline-size: 100%;\n }\n\n [slot=\"title\"],\n [slot=\"title\"]> :first-child {\n @include styleMx.h4;\n }\n\n [slot=\"content\"],\n [slot=\"content\"]>* {\n @include styleMx.text-small;\n }\n }\n\n // promos without a cta and with a link title, get a chevron\n &[variant^=\"promo\"]:not(:has(nano-cta)):has(a[slot=\"title\"]) {\n a[slot=\"title\"] {\n display: inline-flex;\n gap: var(--gap);\n\n &::after {\n content: '';\n display: block;\n background-size: cover;\n inline-size: 1em;\n background-color: var(--color);\n mask-image: var(--nano-component-icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n margin-inline-start: auto;\n rotate: calc(180deg * var(--flip-icon-ltr));\n }\n }\n }\n\n &[variant=\"promo\"] {\n --bg: var(--nano-color-notice-1200);\n --bg-hover: var(--nano-color-notice-1000);\n --color: var(--nano-color-base-0);\n\n nano-cta {\n --color: var(--nano-color-notice-1000);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-notice-75);\n --bg-active: var(--nano-color-notice-200);\n --border: 1px solid var(--color);\n }\n }\n\n &[variant=\"promo-aero\"] {\n --bg: var(--nano-color-success-200);\n --bg-hover: var(--nano-color-success-75);\n --color: var(--nano-color-base-1000);\n }\n\n &[variant=\"promo-plain\"],\n &[variant=\"promo-grey\"] {\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-neutral-100);\n --color: var(--nano-color-neutral-1400);\n\n &:hover [slot=\"title\"] {\n color: var(--nano-color-primary-1000);\n }\n\n nano-cta {\n --color: var(--nano-color-primary-1100);\n --bg: var(--nano-color-base-0);\n --bg-hover: var(--nano-color-primary-50);\n --bg-active: var(--nano-color-primary-75);\n --border: 1px solid var(--color);\n }\n }\n\n &[variant=\"promo-grey\"] {\n --bg: var(--nano-color-neutral-100);\n --bg-hover: var(--nano-color-neutral-200);\n --color: var(--nano-color-neutral-1400);\n }\n }\n}","/** Typography */\n\n@mixin hero {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-3xl);\n line-height: var(--nano-line-height-denser);\n}\n\n@mixin h1 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-2xl);\n line-height: var(--nano-line-height-denser);\n}\n\n@mixin h2 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n}\n\n@mixin h3 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-l);\n line-height: var(--nano-line-height-dense);\n}\n\n@mixin h4 {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-medium);\n line-height: var(--nano-line-height-dense);\n}\n\n@mixin h5 {\n font-size: var(--nano-font-size-small);\n line-height: var(--nano-line-height-normal);\n font-weight: var(--nano-font-weight-bold);\n}\n\n@mixin p {\n font-size: var(--nano-font-size-small);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin quote {\n font-size: var(--nano-font-size-l);\n line-height: var(--nano-line-height-dense);\n letter-spacing: var(--nano-letter-spacing-looser);\n margin-block-end: var(--nano-spacing-md);\n font-weight: var(--nano-font-weight-light);\n}\n\n@mixin text-small {\n font-size: var(--nano-font-size-xs);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin text-xs {\n font-size: var(--nano-font-size-2xs);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n}\n","@layer components {\n nano-tag {\n // Base\n --background: var(--nano-color-base-50);\n --color: var(--nano-color-primary-1100);\n --stroke: var(--nano-color-primary-1000);\n --color-non-interactive: var(--nano-color-neutral-1400);\n --padding: 0.125rem 0.375rem;\n --font-size: 0.625rem;\n --line-height: var(--nano-line-height-denser);\n --letter-spacing: var(--nano-letter-spacing-denser);\n\n // Stateful (interactive elements only)\n --bg-color-hover: var(--nano-color-primary-100);\n --bg-color-active: var(--nano-color-primary-300);\n\n &[size='large'] {\n --padding: 0.25rem 0.5rem;\n --font-size: var(--nano-font-size-2xs);\n --letter-spacing: var(--nano-letter-spacing-loose);\n }\n\n display: inline-block;\n block-size: fit-content;\n inline-size: fit-content;\n padding: var(--padding);\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--nano-font-weight-bold);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n word-wrap: break-word;\n text-align: center;\n cursor: default;\n\n // Default colours for tags without interactive elements\n color: var(--color-non-interactive);\n background: var(--background);\n border: 1px solid var(--color-non-interactive);\n\n &>a,\n &>button {\n all: unset;\n display: block;\n padding: var(--padding);\n }\n\n &[closable] {\n display: flex;\n gap: 0.25rem;\n justify-content: space-between;\n align-items: center;\n padding: var(--padding);\n\n nano-icon-button {\n --padding: 0;\n }\n\n &[size='large'] {\n gap: 0.375rem;\n }\n }\n\n &[closable]:not(:has(nano-icon-button, .nano-icon-button))::after {\n content: '';\n display: block;\n min-inline-size: 0.625rem;\n }\n\n // Overrides for interactive elements\n &:has(a),\n &:has(button) {\n padding: 0;\n }\n\n &:has(a),\n &:has(button),\n &[closable] {\n color: var(--color);\n border-color: var(--stroke);\n background: var(--background);\n }\n\n &:has(a:hover),\n &:has(button:hover) {\n cursor: pointer;\n background: var(--bg-color-hover);\n }\n\n &:has(a:active),\n &:has(button:active) {\n background: var(--bg-color-active);\n }\n\n &:has(a:focus-visible, button:focus-visible) {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n}","@layer components {\n nano-content-links {\n // Variables\n --text-color: var(--nano-color-neutral-1400);\n --color-disabled: var(--nano-color-neutral-800);\n --color-border: var(--nano-color-neutral-200);\n --color-active: var(--nano-color-primary-1000);\n --padding: var(--nano-spacing-sm);\n --icon-size: 1em;\n --icon-color: var(--nano-color-primary-1200);\n\n // Base styling\n display: contents;\n color: var(--text-color);\n font-size: var(--nano-font-size-small);\n font-weight: var(--nano-font-weight-normal);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n word-wrap: break-word;\n\n // if we have elements that aren't anchor tags, apply the same styling but make them non-interactive\n & > * {\n all: unset;\n inline-size: stretch;\n block-size: fit-content;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--padding);\n gap: var(--nano-spacing-md);\n border-block-start: 1px solid var(--color-border);\n border-block-end: 1px solid var(--color-border);\n text-decoration: none !important;\n\n &::after {\n content: '';\n background-size: cover;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n mask-image: var(--nano-component-icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n margin-inline-start: auto;\n }\n\n &:not(a) {\n pointer-events: none;\n cursor: default;\n color: var(--color-disabled);\n border-block-start: 1px solid var(--color-border);\n border-block-end: 1px solid var(--color-border);\n\n &::after {\n background-color: var(--color-disabled);\n }\n }\n\n & + * {\n border-block-start: none !important;\n }\n }\n\n // Only anchor tags are allowed to be interactive\n & > a {\n pointer-events: auto;\n cursor: pointer;\n color: var(--text-color);\n\n &::after {\n background-color: var(--icon-color);\n }\n\n &[target='_blank']::after {\n mask-image: var(--nano-component-icon-open);\n }\n\n &:hover,\n &:active {\n color: var(--color-active);\n text-decoration: underline solid;\n\n &::after {\n background-color: var(--color-active);\n }\n }\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n nano-badge {\n @include styleMx.text-xs;\n\n background: var(--bg);\n color: var(--color);\n border-radius: var(--nano-border-radius-pill);\n padding: 0.15em 0.65em !important;\n display: inline-block;\n\n a {\n color: inherit;\n border-radius: inherit;\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background-color: transparent;\n }\n }\n\n &:has(a) {\n position: relative;\n }\n\n &:has(a):hover {\n background-color: color-mix(in srgb, var(--bg), black 10%);\n }\n\n &:not([theme]), &[theme=\"primary\"] {\n --bg: var(--nano-color-primary-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-primary-700);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-primary-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-primary-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-primary-1200);\n }\n }\n\n &[theme=\"neutral\"] {\n --bg: var(--nano-color-neutral-900);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-neutral-700);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-neutral-900);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-neutral-1000);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-neutral-1200);\n }\n }\n\n &[theme=\"success\"] {\n --bg: var(--nano-color-success-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-success-600);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-success-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-success-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-success-1200);\n }\n }\n\n &[theme=\"warning\"] {\n --bg: var(--nano-color-warning-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-warning-600);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-warning-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-warning-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-warning-1200);\n }\n }\n\n &[theme=\"danger\"] {\n --bg: var(--nano-color-danger-1000);\n --color: var(--nano-color-base-0);\n\n &[strength=\"4\"] {\n --bg: var(--nano-color-danger-800);\n }\n\n &[strength=\"3\"] {\n --bg: var(--nano-color-danger-1000);\n }\n\n &[strength=\"2\"] {\n --bg: var(--nano-color-danger-1100);\n }\n\n &[strength=\"1\"] {\n --bg: var(--nano-color-danger-1200);\n }\n }\n\n &[pulse]:not([pulse=\"false\"]) {\n animation: pulse-animation 2s infinite;\n } \n }\n\n @keyframes pulse-animation {\n 0% {\n box-shadow: 0 0 0 0 rgb(var(--nano-color-base-rgb-1000) / 20%);\n }\n\n 100% {\n box-shadow: 0 0 0 1em rgb(var(--nano-color-base-rgb-1000) / 0%);\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n :where(nano-card-carousel, .nano-card-carousel) > [slot=\"title\"] {\n all: unset;\n\n @include styleMx.h2;\n\n line-height: 1;\n }\n\n nano-card-carousel nano-card {\n [slot] {\n opacity: var(--text-opacity)\n }\n\n [slot=\"img\"] {\n opacity: var(--img-opacity);\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as text;\n\n@layer components {\n .nano-theme-dark :where(nano-global-nav, .nano-global-nav)::part(logo),\n .nano-theme-dark :where(nano-global-nav, .nano-global-nav) [part~=\"logo\"],\n :where(nano-global-nav, .nano-global-nav).nano-theme-dark::part(logo),\n :where(nano-global-nav, .nano-global-nav).nano-theme-dark [part~=\"logo\"] {\n filter: invert(100%);\n }\n\n :where(nano-global-nav, .nano-global-nav) {\n & > a,\n :where(nano-nav-item, .nano-nav-item)::part(label),\n :where(nano-nav-item, .nano-nav-item) [part~=\"label\"] {\n white-space: nowrap;\n }\n }\n\n // nano-nav-item styling when in the bar menu\n\n :where(nano-global-nav, .nano-global-nav).bar-menu {\n nano-nav-item,\n & > a {\n color: var(--main-menu-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item):hover,\n & > a:hover {\n color: var(--main-menu-hover-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item):active,\n & > a:active {\n color: var(--main-menu-active-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(trigger),\n :where(nano-nav-item, .nano-nav-item) [part~=\"trigger\"] {\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n background-color: var(--main-menu-active-border-color);\n block-size: 4px;\n inset-inline: 0;\n inset-block-end: -1.5625rem;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0 center;\n transition: transform var(--nano-transition-x-fast) ease-in-out;\n }\n }\n\n :where(nano-nav-item, .nano-nav-item)[open] {\n color: var(--main-menu-active-border-color) !important;\n\n &::part(trigger)::before,\n & [part~=\"trigger\"]::before {\n transform: translateZ(0) scaleX(1);\n }\n }\n\n a.active,\n nano-nav-item.active,\n nano-nav-item[selected] {\n color: var( --main-menu-active-text-color) !important;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal) {\n inset-block-start: -500%;\n inline-size: 100%;\n position: absolute;\n z-index: -2;\n inset-inline: 0;\n transition: inset-block-start var(--nano-transition-fast) ease-in-out, opacity var(--nano-transition-x-fast) ease;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal modal--open) {\n inset-block-start: 100%;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal-content) {\n background: var(--nano-color-base-0);\n color: var(--nano-color-base-1000);\n padding: var(--nano-spacing-xl);\n inline-size: 91.25rem; // 1460px\n max-inline-size: 100%;\n margin: auto;\n box-shadow: var(--nano-shadow-l2);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal-mask),\n :where(nano-nav-item, .nano-nav-item) [part~=\"modal-mask\"] {\n background: var(--nano-overlay-background-color);\n position: fixed;\n inset: 0;\n min-block-size: 100%;\n z-index: -1;\n }\n\n [slot=\"close-button\"] {\n display: none;\n }\n\n :where(nano-nav-item, .nano-nav-item) [slot=\"secondary\"] {\n display: grid;\n gap: var(--nano-spacing-xl);\n grid-template: auto / repeat(auto-fit, minmax(200px, 1fr));\n\n &:has(.gn__focus-area) {\n grid-template: auto / 1fr 1fr 26rem;\n\n @media (width < 1200px) {\n grid-template-columns: 1fr 26rem;\n }\n\n @media (width < 830px) {\n grid-template-columns: 1fr;\n }\n }\n\n h1, h2, h3, h4, .gn__title {\n @include text.h4;\n\n padding-block-end: 1rem;\n border-block-end: 1px solid var(--nano-color-neutral-100);\n }\n\n a {\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n\n li {\n margin-inline: 0;\n list-style: none;\n margin-block-end: var(--nano-spacing-sm);\n line-height: var(--nano-line-height-dense);\n }\n }\n\n .gn__focus-area {\n padding: var(--nano-spacing-xl) var(--nano-spacing-l);\n display: flex;\n flex-direction: column;\n gap: var(--nano-spacing-sm);\n background: var(--nano-color-base-0);\n color: var(--nano-color-base-1000);\n \n @media (width < 1200px) and (width > 830px) {\n grid-column: 2;\n grid-row: 1 / 3;\n }\n\n h1, h2, h3, h4, h5, p {\n margin: 0;\n border: none;\n }\n\n nano-content-links {\n display: block;\n }\n }\n\n .gn__link-columns {\n gap: var(--nano-spacing-xl);\n\n &:has(> :nth-child(6)) {\n columns: 2;\n } \n\n & > * {\n display: block;\n margin-block-end: var(--nano-spacing-sm);\n }\n }\n }\n }\n \n // nano-nav-item styling when in the overflow menu\n\n :where(nano-global-nav, .nano-global-nav).overflow-menu {\n :where(nano-nav-item, .nano-nav-item),\n & > a {\n color: var(--overflow-text-color);\n }\n \n :where(nano-nav-item, .nano-nav-item):hover,\n & > a:hover {\n color: var(--overflowhover-text-color);\n }\n\n :where(nano-nav-item, .nano-nav-item):active,\n & > a:active {\n color: var(--overflow-active-text-color);\n }\n\n a.active,\n :where(nano-nav-item, .nano-nav-item).active,\n :where(nano-nav-item, .nano-nav-item)[selected] {\n color: var( --overflow-active-text-color) !important;\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal) {\n background-color: var(--overflow-bg-color);\n inline-size: 100%;\n block-size: 100%;\n position: absolute;\n inset: 0;\n }\n\n :where(nano-nav-item, .nano-nav-item) [slot=\"secondary\"] {\n display: flex;\n flex-direction: column;\n gap: var(--nano-spacing-md);\n padding-block-end: var(--nano-spacing-md);\n\n a {\n text-decoration: none;\n color: var(--nano-color-blue-cerulean-700);\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n h1, h2, h3, h4, .gn__title {\n @include text.p;\n\n margin-block-end: var(--nano-spacing-sm);\n }\n\n ul {\n margin: 0;\n padding: 0;\n\n li {\n margin-inline: 0;\n list-style: none;\n margin-block-end: var(--nano-spacing-sm);\n line-height: var(--nano-line-height-dense);\n }\n }\n\n .gn__link-columns {\n padding-inline-start: var(--nano-spacing-md);\n }\n\n .gn__focus-area {\n border-block-start: 1px solid rgb(var(--nano-color-base-rgb-1000) / 10%);\n padding-block-start: var(--nano-spacing-md);\n }\n }\n\n [slot=\"close-button\"] {\n color: inherit;\n padding-block: var(--nano-spacing-md);\n display: flex;\n gap: var(--nano-spacing-sm);\n align-items: center;\n cursor: pointer;\n inline-size: 100%;\n \n &:hover {\n color: var(--nano-color-blue-cerulean-700);\n }\n\n &::before {\n content: '';\n margin-inline-start: 0;\n background-size: cover;\n inline-size: 1em;\n block-size: 1em;\n mask-image: var(--nano-component-icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n rotate: 180deg;\n background-color: var(--nano-color-blue-cerulean-700);\n }\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n nano-avatar {\n --size: 2.5rem;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n inline-size: var(--size);\n min-inline-size: var(--size);\n block-size: var(--size);\n background-color: var(--nano-color-neutral-400);\n font-size: calc(var(--size) * 0.5);\n font-weight: var(--nano-font-weight-normal);\n color: var(--nano-color-neutral-0);\n user-select: none;\n vertical-align: middle;\n border-radius: var(--nano-border-radius-circle);\n overflow: hidden;\n \n &:empty::before {\n content: attr(initials);\n text-transform: uppercase;\n line-height: 1;\n }\n\n img {\n aspect-ratio: var(--nano-image-ratio-square);\n object-fit: cover;\n }\n }\n}","@layer components {\n :where(nano-in-page-nav, .nano-in-page-nav) {\n // Variables\n --color-bottom-border: rgb(var(--nano-color-base-rgb-1000) / 10%);\n --color-text: var(--nano-color-neutral-1400);\n --color-primary: var(--nano-color-primary-1100);\n --color-text-hover: var(--color-primary);\n --color-border-active: var(--nano-color-primary-1000);\n --border-active: 3px solid var(--color-border-active);\n --color-bg: var(--nano-color-primary-75);\n --font-size: var(--nano-font-size-small);\n --font-weight: var(--nano-font-weight-normal);\n --font-weight-active: var(--nano-font-weight-bold);\n --line-height: var(--nano-line-height-dense);\n --letter-spacing: var(--nano-letter-spacing-loose);\n\n // Internal variables\n --flip-icon-ltr: 1;\n --list-gap: calc(var(--spacing-l2) / 1.25);\n --spacing-l2: var(--nano-spacing-l2);\n --spacing-l3: var(--nano-spacing-l3);\n\n &:dir(rtl) {\n --flip-icon-ltr: 0;\n }\n\n a,\n ul,\n li {\n all: unset;\n }\n\n ul {\n display: flex;\n flex-direction: column;\n list-style: none;\n }\n\n // only the outer-most list\n ul:not(ul ul) {\n padding: 0 var(--spacing-l2) var(--spacing-l3) var(--spacing-l2);\n }\n\n a {\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n }\n }\n\n ul > li:not(ul > li li) {\n margin: 0;\n padding: var(--spacing-l2) 0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n inline-size: 100%;\n border-block-end: 1px solid var(--color-bottom-border);\n\n a {\n color: var(--color-text);\n\n &.active {\n border-inline-start: var(--border-active);\n padding-inline-start: 1rem;\n }\n\n &:hover {\n color: var(--color-text-hover);\n }\n }\n }\n\n ul > li > ul,\n ul > li > nano-details > ul {\n padding: var(--list-gap) 0 0 var(--spacing-l2);\n gap: var(--list-gap);\n\n a {\n color: var(--color-primary) !important;\n }\n\n a.active {\n padding-inline-start: 0;\n }\n\n &:has(nano-details) {\n padding-inline-start: 1.1rem;\n }\n\n nano-details::part(header),\n nano-details [part~=\"header\"] {\n padding: 0;\n }\n }\n\n ul > li > ul > li > nano-details > ul,\n ul > li > nano-details > ul > li > nano-details > ul {\n padding: var(--list-gap) 0 0 var(--nano-spacing-l1-default);\n }\n\n nano-details nano-details:not(nano-details nano-details nano-details) {\n color: var(--color-text);\n }\n\n nano-details {\n --padding: 0;\n --btn-bg-color: transparent;\n --btn-bg-color--open: var(--nano-color-primary-75);\n --btn-bg-color--hover: transparent;\n\n border: none; \n\n .active::part(header),\n .active [part~=\"header\"] {\n border-inline-start: var(--border-active);\n padding-inline-start: 1rem;\n color: var(--color-primary);\n }\n\n &[open] > [slot=\"icon-start\"] {\n rotate: 90deg;\n }\n\n &::part(content),\n & [part~=\"content\"] {\n padding: 0;\n }\n\n &::part(icon--start),\n & [part~=\"icon--start\"] {\n margin-inline-end: var(--spacing-l3);\n }\n\n &::part(header),\n & [part~=\"header\"] {\n font-size: var(--font-size);\n line-height: var(--line-height);\n font-weight: var(--font-weight);\n letter-spacing: var(--letter-spacing);\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .details-wrapper {\n --btn-text-color: var(--color-text);\n\n &::part(header),\n & [part~=\"header\"] {\n padding: var(--spacing-l2);\n }\n }\n\n &:has(.details-wrapper[open])::part(root),\n &:has(.details-wrapper[open]) [part~=\"root\"] {\n box-shadow: var(--nano-shadow-l1);\n }\n\n .details-wrapper.sticky.stuck[open]::part(header),\n .details-wrapper.sticky.stuck [part~=\"header\"] {\n z-index: var(--nano-z-index-menubar);\n inset-block-start: 0;\n position: sticky;\n box-shadow: var(--nano-shadow-l1);\n padding: var(--spacing-l2);\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins';\n\n@layer components {\n :where(nano-collapsible-comparison, .nano-collapsible-comparison) {\n --color-bg: var(--nano-color-base-0);\n --color-border: var(--nano-color-neutral-200);\n --outer-spacing: var(--nano-spacing-l1-default);\n\n h2 {\n @include mixins.h2;\n }\n\n h2,\n h4 {\n margin: 0;\n }\n \n h3,\n h4 {\n @include mixins.h5;\n }\n\n h3 {\n padding-block-end: var(--nano-spacing-md);\n border-block-end: 1px solid var(--color-border);\n margin-block: 0;\n }\n\n h4 {\n font-weight: var(--nano-font-weight-normal);\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n ul[slot='content'] {\n list-style: none;\n\n & > li {\n margin: 0;\n padding-block-start: var(--nano-spacing-md);\n }\n }\n\n [slot=\"label\"] {\n display: flex;\n align-items: center;\n }\n\n nano-details {\n --btn-bg-color: transparent;\n --btn-bg-color--active: transparent;\n --btn-bg-color--hover: transparent;\n --padding: 0;\n\n border: none;\n\n &::part(header),\n & [part~=\"header\"] {\n color: var(--color-primary);\n }\n\n &::part(label),\n & [part~=\"label\"],\n &::part(content),\n & [part~=\"content\"] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--nano-spacing-l1-default);\n }\n\n &::part(icon--end),\n & [part~=\"icon--end\"] {\n display: none;\n }\n\n &::part(content),\n & [part~=\"content\"] {\n padding: var(--nano-spacing-md) 0;\n }\n\n &::part(body),\n & [part~=\"body\"] {\n border-block-end: 1px solid var(--color-border);\n }\n\n ul {\n list-style: disc;\n padding-inline-start: var(--nano-spacing-md);\n\n li {\n font-size: var(--nano-font-size-xs);\n }\n }\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins' as styleMx;\n\n@layer components {\n :where(nano-menu, .nano-menu) {\n :where(nano-nav-item, .nano-nav-item) {\n --padding: inherit;\n\n display: block;\n border-block-start: 1px solid var(--nano-color-neutral-200);\n\n &:not(:has(+ nano-nav-item), :has(+ nano-dropdown), :has(+ nano-content-links)) {\n border-block-end: 1px solid var(--nano-color-neutral-200);\n }\n\n &::part(trigger) {\n @include styleMx.p;\n }\n\n &[checkbox]::part(label)::before {\n content: \"\";\n display: inline-block;\n vertical-align: middle;\n background-size: cover;\n mask-repeat: no-repeat;\n mask-position: center;\n inline-size: 0.8em;\n block-size: 0.8em;\n mask-image: var(--nano-component-icon-check);\n background-color: var(--icon-color);\n opacity: 0;\n margin-inline-end: var(--nano-spacing-sm);\n align-content: center;\n }\n\n &[checkbox][selected]::part(label)::before {\n opacity: 1;\n }\n }\n\n a {\n font-size: calc(var(--font-size) - 0.125rem);\n color: var(--nano-color-primary-1100);\n }\n\n :where(nano-icon, .nano-icon) {\n color: var(--icon-color);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(trigger-wrapper) {\n flex: 1;\n }\n\n // default styles for nav-item trigger, nav-item close-button and content-link <a>s\n :where(nano-nav-item, .nano-nav-item)::part(trigger),\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"],\n nano-content-links a {\n --icon-color: var(--nano-color-primary-1000); \n\n color: var(--nano-color-neutral-1400);\n font-size: var(--font-size);\n }\n\n // hover state for <a>, nav-item trigger and nav-item close-button\n // when not disabled and not key-board focused\n a:hover:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=\"close-button\"]:hover:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):hover:not(:focus-visible) {\n --icon-color: var(--nano-color-primary-1100);\n\n color: var(--nano-color-base-1000);\n background-color: var(--nano-color-neutral-100);\n }\n\n // active state for <a>, nav-item trigger and nav-item close-button\n // when not disabled and not key-board focused\n a:active:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled]) [slot=\"close-button\"]:active:not(:focus-visible),\n :where(nano-nav-item, .nano-nav-item):not([disabled])::part(trigger):active:not(:focus-visible) {\n --icon-color: var(--nano-color-primary-800);\n\n color: var(--nano-color-base-1000);\n background-color: var(--nano-color-neutral-200);\n }\n \n // focused state for <a>, nav-item trigger and nav-item close-button\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"]:focus-visible,\n :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible,\n a:focus-visible {\n --icon-color: var(--nano-color-base-0);\n\n outline: none;\n background-color: var(--nano-color-primary-1000);\n color: var(--nano-color-base-0);\n }\n\n // active state for <a>, nav-item trigger and nav-item close-button\n // when keyboard focused\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"]:focus-visible:active,\n :where(nano-nav-item, .nano-nav-item)::part(trigger):focus-visible:active,\n a:focus-visible:active {\n background-color: var(--nano-color-primary-1200);\n }\n\n nano-content-links a::after {\n background-color: var(--icon-color);\n }\n\n :where(nano-dropdown, .nano-dropdown) {\n display: contents;\n\n :where(nano-nav-item, .nano-nav-item) {\n --padding: var(--nav-item-padding);\n }\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal) {\n position: absolute;\n min-block-size: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;\n transform: translate3d(100%, 0, 0);\n background: var(--background);\n }\n\n :where(nano-nav-item, .nano-nav-item)::part(modal modal--open) {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: opacity var(--nano-transition-x-fast) ease, transform var(--nano-transition-fast) ease;\n }\n\n :where(nano-nav-item, .nano-nav-item) [slot=\"close-button\"] {\n padding: var(--padding);\n display: flex;\n gap: var(--nano-spacing-md);\n align-items: center;\n cursor: pointer;\n inline-size: 100%;\n border-block-start: 1px solid var(--nano-color-neutral-200);\n\n &::before {\n content: '';\n margin-inline-start: 0;\n background-size: cover;\n inline-size: 1em;\n block-size: 1em;\n mask-image: var(--nano-component-icon-caret);\n mask-repeat: no-repeat;\n mask-position: center;\n transform-origin: center;\n rotate: 180deg;\n background-color: var(--icon-color);\n }\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins';\n\n@layer components {\n nano-icon-item {\n --icon-dims: var(--nano-pictogram-size-large);\n\n display: grid;\n grid-template-columns: 1fr;\n justify-items: center;\n inline-size: 100%;\n gap: var(--nano-spacing-md);\n\n &[size='large'] {\n --icon-dims: var(--nano-pictogram-size-x-large);\n }\n\n &:has([slot='icon']):has([slot='heading']),\n &:has([slot='icon']):has([slot='content']) {\n grid-template-rows: repeat(2, min-content);\n }\n\n &:has([slot='icon']):has([slot='heading']):has([slot='content']) {\n grid-template-rows: repeat(3, min-content);\n }\n\n nano-icon, .nano-icon {\n --icon-size: var(--icon-dims) !important;\n }\n\n a:not(p > a),\n [slot='heading'] {\n all: unset;\n\n @include mixins.h4;\n\n color: var(--nano-color-neutral-1400);\n text-align: center;\n }\n\n p[slot='content'] {\n all: unset;\n\n @include mixins.p;\n\n text-align: center;\n }\n\n [slot='icon'] {\n color: var(--nano-color-primary-1000);\n }\n\n // landscape styles\n &[landscape] {\n justify-items: start;\n grid-template-columns: min-content 1fr !important;\n row-gap: var(--nano-spacing-sm);\n\n &:has([slot='icon']):has([slot='heading']),\n &:has([slot='icon']):has([slot='content']) {\n grid-template-rows: min-content;\n\n [slot='heading'],\n p[slot='content'] {\n grid-row: 1;\n align-self: center;\n }\n }\n\n &:has([slot='icon']):has([slot='heading']):has([slot='content']) {\n grid-template-rows: min-content 1fr;\n\n a,\n [slot='heading'] {\n grid-row: 1;\n }\n\n p[slot='content'] {\n grid-row: 2;\n }\n }\n\n nano-icon[slot='icon'] {\n grid-column: 1;\n }\n\n [slot='icon'] {\n grid-column: 1;\n grid-row: 1 / -1;\n }\n\n a,\n [slot='heading'] {\n text-align: start;\n align-self: center;\n grid-row: 1;\n grid-column: 2;\n }\n\n p[slot='content'] {\n text-align: start;\n grid-row: 2;\n grid-column: 2;\n }\n }\n\n // link styles\n a,\n a > [slot='heading'] {\n cursor: pointer;\n text-decoration: underline;\n color: var(--nano-color-primary-1000);\n }\n\n a {\n &:hover {\n color: var(--nano-color-primary-1200);\n\n [slot='heading'] {\n color: var(--nano-color-primary-1200);\n }\n }\n }\n\n &:has(a:hover) nano-icon {\n color: var(--nano-color-primary-1200);\n }\n }\n}\n","@use '@nanoporetech-digital/style/dist/mixins' as style;\n\n// just stuff to co-ordinate the composition of components ... it's easier than ::slotted / :host-context\n\n:where(nano-tab-group, .nano-tab-group) {\n &[equal-tab-size] .nano-tab {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n }\n\n &[placement=\"start\"] {\n &[equal-tab-size] .nano-tab {\n justify-content: flex-end;\n }\n\n .nano-tab {\n border-block-end: none;\n border-inline-end: var(--border); \n }\n\n .nano-tab::part(base),\n .nano-tab [part~=\"base\"] {\n justify-content: end;\n }\n\n .nano-tab::part(label),\n .nano-tab [part~=\"label\"] { \n align-items: flex-end;\n }\n\n .nano-tab:not([disabled]):hover {\n border-color: inherit;\n }\n\n .nano-tab:not([disabled])[active] {\n border-color: inherit;\n }\n }\n\n &[placement=\"top\"][size=\"large\"] {\n &::part(tabs__wrapper),\n & [part~=\"tabs__wrapper\"] {\n --scroll-btn-size: 2rem;\n }\n\n .nano-tab {\n @include style.h3;\n\n --padding: 1.5625rem;\n } \n }\n}","@layer components {\n :where(nano-tooltip, .nano-tooltip) {\n [slot=\"content\"], [slot=\"content\"] * {\n font-size: var(--nano-font-size-2xs);\n } \n \n ul[slot=\"content\"] {\n margin-block: 0;\n padding-inline: 0;\n margin-inline: var(--nano-spacing-md);\n }\n\n [slot=\"content\"] li {\n margin-block-end: 0;\n }\n }\n}","@use '@nanoporetech-digital/style/dist/mixins' as style;\n\n@layer components {\n :where(nano-table, .nano-table) {\n --table-padding: var(--nano-spacing-md);\n --table-compact-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n --table-border-color: var(--nano-color-neutral-200);\n --table-border-color-header: var(--nano-color-primary-1000);\n --table-background: var(--nano-color-base-0);\n --table-wrapper-max-height: 80vh;\n --table-wrapper-max-width: 100%;\n\n // internal\n --isLtR: 1;\n \n overflow-y: clip;\n display: block;\n container-type: inline-size;\n\n &:dir(rtl) {\n --isLtR: -1;\n }\n\n &[compact]:not([compact=\"false\"], [compact=\"auto\"]) {\n --table-padding: var(--table-compact-padding);\n }\n\n &[compact=\"auto\"] {\n // if compact `auto` set smaller padding if either `scrollable` and component is < 500px \n // OR screen width is < 500px\n\n @media (width <= 500px) {\n --table-padding: var(--table-compact-padding);\n }\n\n .nano-table__overflow {\n @container (width <= 500px) {\n --table-padding: var(--table-compact-padding);\n }\n }\n }\n\n &:not([scrollable=\"false\"]) {\n // rendering table in a scrollable container\n\n overflow-y: visible;\n\n &:has([sticky=\"start\"], [sticky=\"end\"]) .nano-masked-overflow {\n // `scrollable` = rendered in a `nano-masked-overflow`. When there are sticky columns, hide the overflow fade\n --fade-size: 0;\n }\n\n &:not(.nano-table--props-ready) {\n // mitigate CLS - before `nano-masked-overflow` ready, set the max-width and max-height to the component itself\n overflow: auto;\n scrollbar-width: thin;\n max-inline-size: var(--table-wrapper-max-width);\n max-block-size: var(--table-wrapper-max-height);\n }\n\n .nano-table__overflow {\n // `scrollable` and `nano-masked-overflow` ready \n max-inline-size: var(--table-wrapper-max-width);\n max-block-size: var(--table-wrapper-max-height);\n position: relative;\n } \n\n table {\n margin-block-end: var(--nano-spacing-l);\n }\n }\n \n /// CLICKABLE ROWS ///\n\n tr[clickable] {\n cursor: pointer;\n\n &:not([sticky]) {\n position: relative;\n }\n\n &:focus-within {\n --table-background: var(--nano-color-primary-50);\n }\n\n &:hover {\n --table-background: var(--nano-color-primary-75);\n }\n\n input[type=\"checkbox\"]::after, \n nano-checkbox::after,\n a::after,\n button::after {\n content: '';\n position: absolute;\n inset: 0;\n }\n }\n\n /// STICKY ROWS ///\n\n tr[sticky] { \n position: sticky;\n container-type: scroll-state;\n inset-block-start: var(--sticky-top, 0);\n }\n\n tfoot tr[sticky] {\n inset-block-end: 0;\n }\n\n tfoot tr[sticky],\n thead tr[sticky] {\n z-index: 10;\n }\n\n tbody tr[sticky] {\n z-index: 5;\n overflow-y: clip;\n\n td, th {\n @container scroll-state(stuck: top) {\n border-block-end: 1px solid var(--table-border-color-header);\n }\n\n @supports (not (container-type: scroll-state)) {\n // fallback - just show border all the time\n border-block-end: 1px solid var(--table-border-color-header);\n }\n } \n\n \n td[sticky], \n th[sticky] { \n overflow-y: clip;\n\n &::after {\n content: '';\n visibility: hidden;\n inline-size: 10px;\n inset-block-start: 0;\n block-size: var(--section-height);\n position: absolute;\n\n @container scroll-state(stuck: left) {\n visibility: visible;\n }\n\n @container scroll-state(stuck: right) {\n visibility: visible;\n }\n }\n }\n\n [sticky=\"start\"]::after {\n inset-inline-end: 0;\n box-shadow: calc(4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n\n [sticky=\"end\"]::after {\n inset-inline-start: 0;\n box-shadow: calc(-4px * var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n }\n\n /// STICKY COLUMNS ///\n \n .nano-table__overflow {\n @container (width <= 500px) {\n // this ensures on small screens only one sticky column is allowed\n td[sticky], th[sticky] {\n --sticky-start: 0px !important;\n --sticky-end: 0px !important;\n }\n\n td[sticky]:not(:first-of-type), th[sticky]:not(:first-of-type) {\n position: initial !important;\n z-index: initial !important;\n }\n }\n }\n\n @media (width <= 500px) {\n // this ensures on small screens only one sticky column is allowed\n td[sticky], th[sticky] {\n --sticky-start: 0px !important;\n --sticky-end: 0px !important;\n }\n\n td[sticky]:not(:first-of-type), th[sticky]:not(:first-of-type) {\n position: initial !important;\n z-index: initial !important;\n }\n }\n\n :where(thead, tbody) td[sticky], th[sticky] {\n position: sticky;\n container-type: scroll-state;\n z-index: 2;\n\n @supports (not (container-type: scroll-state)) {\n // default sticky start / end - white 'glow' effect that's there all the time\n // no sticky top / bottom because there's a border so no need\n &::after {\n content: '';\n position: absolute;\n box-shadow: 14px 0 14px 0 var(--table-background);\n inset-inline: auto 0;\n block-size: calc(100% - var(--nano-spacing-md));\n inset-block-start: calc(var(--nano-spacing-md) / 2);\n inline-size: var(--nano-spacing-md);\n }\n\n &:is([sticky=\"end\"])::after {\n box-shadow: -14px 0 14px 0 var(--table-background);\n inset-inline: 0 auto;\n }\n }\n }\n \n td[sticky=\"start\"], th[sticky=\"start\"] {\n inset-inline-start: var(--sticky-start, 0);\n }\n\n td[sticky=\"end\"], th[sticky=\"end\"] {\n inset-inline-end: var(--sticky-end, 0);\n z-index: 3;\n }\n\n @supports (container-type: scroll-state) {\n // modern sticky \n // start / end get a shadow\n\n :where(thead, tbody) tr:has([sticky=\"start\"],[sticky=\"end\"]):first-of-type {\n [sticky=\"start\"]::after, [sticky=\"end\"]::after { \n content: '';\n visibility: hidden;\n inline-size: 10px;\n inset-block-start: 0;\n block-size: var(--section-height);\n position: absolute;\n\n @container scroll-state(stuck: left) {\n visibility: visible;\n }\n\n @container scroll-state(stuck: right) {\n visibility: visible;\n }\n }\n\n [sticky=\"start\"]::after {\n inset-inline-end: 0;\n box-shadow: calc(4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n\n [sticky=\"end\"]::after {\n inset-inline-start: 0;\n box-shadow: calc(-4px * var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000) / 25%);\n }\n }\n }\n }\n}","@use './utilities/mixins' as mx;\n@use '../../components/footer/footer.light-dom';\n@use '../../components/alert/alert.light-dom';\n@use '../../components/sortable/sortable.light-dom';\n@use '../../components/cta/cta.light-dom';\n@use '../../components/card/card.light-dom';\n@use '../../components/tag/tag.light-dom';\n@use '../../components/content-links/content-links.light-dom';\n@use '../../components/badge/badge.light-dom';\n@use '../../components/card-carousel/card-carousel.light-dom';\n@use '../../components/global-nav/global-nav.light-dom';\n@use '../../components/avatar/avatar.light-dom';\n@use '../../components/in-page-nav/in-page-nav.light-dom';\n@use '../../components/collapsible-comparison/collapsible-comparison.light-dom';\n@use '../../components/menu/menu.light-dom';\n@use '../../components/icon-item/icon-item.light-dom';\n@use '../../components/tabs/tabs.light-dom';\n@use '../../components/tooltip/tooltip.light-dom';\n@use '../../components/table/table.light-dom';\n@use '../../components/breadcrumb/breadcrumb.light-dom';\n\n@layer components {\n // global styles required for nano components\n\n :root {\n // Chevron icon\n @include mx.svg-css-variable(\n '--nano-component-icon-chevron',\n \"<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><g><path fill='white' d='M4.18457 15.8496C4.06179 15.7374 4.00044 15.584 4.00044 15.43C4.00044 15.291 4.05065 15.1521 4.15221 15.0421L10.6195 8.00301L4.15207 0.959231C3.9378 0.727093 3.9512 0.364958 4.18443 0.151748C4.41655 -0.0625328 4.77688 -0.0480332 4.99114 0.183555L11.8477 7.61197C12.0508 7.83182 12.0508 8.16767 11.8477 8.38766L4.99114 15.8161C4.77594 16.046 4.41669 16.0639 4.18457 15.8496Z'/></g></svg>\"\n );\n // Download icon\n @include mx.svg-css-variable(\n '--nano-component-icon-download',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M272 16c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 313.4L139.3 228.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l128 128c6.2 6.2 16.4 6.2 22.6 0l128-128c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L272 329.4 272 16zM140.1 320L64 320c-35.3 0-64 28.7-64 64l0 64c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64l-76.1 0-32 32L448 352c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l108.1 0-32-32zM432 416a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z'/></svg>\"\n );\n // Open new icon\n @include mx.svg-css-variable(\n '--nano-component-icon-open',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z'/></svg>\"\n );\n // Check icon\n @include mx.svg-css-variable(\n '--nano-component-icon-check',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z'/></svg>\"\n );\n // Caret icon\n @include mx.svg-css-variable(\n '--nano-component-icon-caret',\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z'/></svg>\"\n );\n }\n\n nano-intersection-observe,\n nano-resize-observe,\n nano-global-search-results,\n // add css-only component tags here\n nano-cta, \n nano-card,\n nano-tag, \n nano-content-links,\n nano-badge,\n nano-avatar,\n nano-icon-item,\n nano-table {\n visibility: visible !important;\n }\n\n body:not(.nano-eager) {\n nano-algolia-filter,\n nano-algolia-input,\n nano-algolia-pagination,\n nano-algolia-results,\n nano-details,\n nano-accordion,\n nano-grid-item,\n nano-menu,\n nano-masked-overflow,\n nano-range,\n nano-rating,\n nano-slide,\n nano-slides,\n nano-date-input,\n nano-global-nav,\n nano-menu-drawer,\n nano-checkbox,\n nano-checkbox-group,\n nano-grid,\n nano-option,\n nano-algolia,\n nano-date-picker,\n nano-select,\n nano-dropdown,\n nano-nav-item,\n nano-input,\n nano-icon,\n nano-tab-content,\n nano-tab,\n nano-hero,\n nano-img,\n nano-datalist,\n nano-split-pane,\n nano-file-upload,\n nano-data-table,\n nano-alert,\n nano-dialog,\n nano-drawer,\n nano-footer,\n nano-in-page-nav,\n nano-collapsible-comparison,\n nano-breadcrumb {\n visibility: hidden;\n }\n\n .hydrated {\n visibility: inherit;\n }\n }\n\n nano-alert:not(.hydrated):not([open]),\n nano-dialog:not(.hydrated),\n nano-drawer:not(.hydrated) {\n display: none;\n }\n\n nano-alert[open]:not(.hydrated) {\n display: block;\n min-height: calc(var(--nano-pictogram-size-large) + (var(--nano-spacing-md) * 2));\n }\n\n nano-tooltip:not(.hydrated) [slot='content'] {\n display: none;\n }\n\n nano-animation {\n visibility: inherit !important;\n }\n\n nano-dropdown {\n visibility: inherit !important;\n\n &:not(.hydrated) :not([slot='trigger']) {\n display: none;\n }\n }\n\n nano-slides:not([ready]) {\n opacity: 0;\n }\n\n nano-slide:not([ready]) {\n opacity: 0;\n block-size: 1px;\n display: block;\n }\n\n nano-progress-bar {\n --height: 0.625rem;\n\n &[size=\"small\"] {\n --height: 0.3125rem;\n }\n\n &[size=\"large\"] {\n --height: 0.9375rem;\n }\n\n progress {\n height: var(--height);\n }\n }\n\n @supports (scrollbar-gutter: stable) {\n .nano-scroll-lock {\n scrollbar-gutter: var(--nano-scroll-lock-gutter) !important;\n }\n\n .nano-scroll-lock body {\n overflow: hidden !important;\n }\n }\n\n /** This can go away once Safari has scrollbar-gutter support. */\n @supports not (scrollbar-gutter: stable) {\n .nano-scroll-lock body {\n padding-inline-end: var(--nano-scroll-lock-size) !important;\n overflow: hidden !important;\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n@use 'sass:string';\n@use 'globals';\n@use 'functions' as fn;\n\n@mixin input-cover() {\n inset-block: 0;\n inset-inline: auto;\n margin: 0;\n inline-size: 100%;\n block-size: 100%;\n border: 0;\n background: transparent;\n cursor: pointer;\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n clip-path: inset(50%);\n overflow: hidden;\n pointer-events: none;\n visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n clip-path: inset(50%);\n block-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n inline-size: 1px;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map.keys($map);\n\n @return list.nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: globals.$screen-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: globals.$screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: globals.$screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: globals.$screen-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: index($breakpoint-names, $name);\n\n @return if(\n $n < length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-max($name, $breakpoints: globals.$screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: globals.$screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin host($hostCtx: null) {\n $root: #{&};\n\n @if $hostCtx {\n @at-root :host(#{$hostCtx}) {\n #{$root} {\n @content;\n }\n }\n }\n\n @else {\n @at-root :host {\n #{$root} {\n @content;\n }\n }\n }\n}\n\n@mixin rtl-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}:dir(rtl)) {\n @if string.length($root) > 0 {\n #{$root} { @content; }\n }\n\n @else {\n @content;\n }\n }\n\n @at-root :host-context([dir=\"rtl\"]) {\n @if string.length($root) > 0 {\n #{$root} { @content; }\n }\n\n @else {\n @content;\n }\n }\n}\n\n\n@mixin rtl() {\n $root: #{&};\n\n @at-root #{$root + '[dir=rtl]'} {\n @content;\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: fn.url-encode($svg);\n $viewBox: fn.str-split(fn.str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl !=true or $viewBox==null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n }\n\n @else {\n $transform: \"transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: fn.str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: fn.str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: fn.str-replace(\n $flipped-url,\n '<polygon',\n '<polygon #{$transform}'\n );\n $flipped-url: fn.url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n@mixin svg-css-variable($icon-name, $svg) {\n $url: fn.url-encode($svg);\n\n #{$icon-name}: url('data:image/svg+xml;charset=utf-8,#{$url}');\n}\n\n@mixin background-position(\n $horizontal,\n $horizontal-amount: null,\n $vertical: null,\n $vertical-amount: null\n) {\n @if $horizontal==start or $horizontal==end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n\n @if $horizontal==start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n }\n\n @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position:\n $horizontal-ltr $horizontal-amount $vertical\n $vertical-amount;\n }\n\n @include rtl() {\n background-position:\n $horizontal-rtl $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n\n @else {\n @include multi-dir() {\n background-position:\n $horizontal $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis==start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n\n @include rtl() {\n transform-origin: right $y-axis;\n }\n }\n\n @else if $x-axis==end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n\n @include rtl() {\n transform-origin: left $y-axis;\n }\n }\n\n @else if $x-axis==left or $x-axis==right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n }\n\n @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (fn.str-index($transform, translate3d)) {\n $transform: fn.str-replace($transform, 'translate3d(');\n $transform: fn.str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: list.nth($coordinates, 1);\n $y: list.nth($coordinates, 2);\n $z: list.nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n }\n\n @else {\n @if $extra==null {\n $extra: $transform;\n }\n\n @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x== '0' or $x==null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n }\n\n @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n\n@mixin hide-scrollbar() {\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n inline-size: 0;\n block-size: 0;\n }\n}\n"]}
package/docs-json.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-06-27T14:28:01",
2
+ "timestamp": "2025-06-28T12:18:31",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.35.1-dev.1750682262.1ce9541",