npm - @nanoporetech-digital/components - Versions diffs - 7.9.2 → 8.0.0-alpha.1 - Mend

@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

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 (1782) hide show

package/dist/stencil.config.js CHANGED Viewed

@@ -1,13 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { postcss } from "@stencil-community/postcss";
 import { sass } from "@stencil/sass";
 import { reactOutputTarget } from "@stencil/react-output-target";
 import autoprefixer from "autoprefixer";
-import scssVariable from "rollup-plugin-sass-variables";
-import { vueOutputTarget } from "./generators/vue";
-import { generateJsonDocs } from "./generators/custom-element-doc-generator";
+import { vueOutputTarget } from "./plugins/stencil/vue-output";
+import { webTypesOutputTarget } from "@stencil-community/web-types-output-target";
+// import { generateJsonDocs } from './plugins/stencil/custom-element-docs';
 const vueComponentModels = [
     {
         elements: [
@@ -37,8 +37,8 @@ const vueComponentModels = [
 ];
 export const config = {
     namespace: 'nano-components',
-    sourceMap: true,
-    preamble: 'Web Components for Nanopore digital Web Apps',
+    sourceMap: false,
+    preamble: 'Custom elements for Nanopore-Digital Web applications',
     outputTargets: [
         {
             type: 'dist-hydrate-script',
@@ -68,6 +68,18 @@ export const config = {
                     src: '../src/assets',
                     dest: './nano-assets',
                 },
+                {
+                    src: '../src/components/icon/device',
+                    dest: './nano-assets/icon/device',
+                },
+                {
+                    src: '../src/components/icon/pictogram',
+                    dest: './nano-assets/icon/pictogram',
+                },
+                {
+                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/brands',
+                    dest: './nano-assets/fontawesome-pro/svgs/brands',
+                },
                 {
                     src: '../node_modules/@fortawesome/fontawesome-pro/svgs/light',
                     dest: './nano-assets/fontawesome-pro/svgs/light',
@@ -81,14 +93,14 @@ export const config = {
                     dest: './nano-assets/fontawesome-pro/svgs/solid',
                 },
                 {
-                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/duotone',
-                    dest: './nano-assets/fontawesome-pro/svgs/duotone',
+                    src: '../node_modules/@nanoporetech-digital/style/dist/assets/font',
+                    dest: './nano-assets/font',
                 },
                 { src: '**/*.html' },
                 { src: '**/*.css' },
                 {
-                    src: '../themes',
-                    dest: './themes',
+                    src: '../style',
+                    dest: './style',
                 },
             ],
         },
@@ -104,6 +116,14 @@ export const config = {
                     src: '../src/assets',
                     dest: '../nano-assets',
                 },
+                {
+                    src: '../src/components/icon/device',
+                    dest: '../nano-assets/icon/device',
+                },
+                {
+                    src: '../src/components/icon/pictogram',
+                    dest: '../nano-assets/icon/pictogram',
+                },
                 {
                     src: '../node_modules/@fortawesome/fontawesome-pro/svgs/brands',
                     dest: '../nano-assets/fontawesome-pro/svgs/brands',
@@ -125,41 +145,48 @@ export const config = {
                     dest: '../nano-assets/fontawesome-pro/svgs/duotone',
                 },
                 {
-                    src: '../themes',
-                    dest: '../themes',
+                    src: '../node_modules/@nanoporetech-digital/style/dist/assets/font',
+                    dest: '../nano-assets/font',
+                },
+                {
+                    src: '../style',
+                    dest: '../style',
                 },
             ],
         },
         { type: 'docs-readme' },
         { type: 'docs-vscode', file: 'docs-vscode.json' },
         { type: 'docs-json', file: 'docs-json.json' },
-        {
-            type: 'custom',
-            generator: generateJsonDocs,
-            name: 'custom-element-docs',
-        },
+        webTypesOutputTarget(),
+        // {
+        //   type: 'custom',
+        //   generator: generateJsonDocs,
+        //   name: 'custom-element-docs',
+        // },
     ],
     globalStyle: 'src/global/style/nano-components.scss',
     globalScript: 'src/global/script/global.ts',
     plugins: [
-        sass(),
-        scssVariable(),
+        sass({
+            includePaths: ['./node_modules']
+        }),
         postcss({
             injectGlobalPaths: [
                 'src/global/style/defaults/border-box.css',
                 'src/global/style/defaults/hidden.css',
+                'src/global/style/defaults/reduced-motion.css',
             ],
             plugins: [
                 autoprefixer({
                     overrideBrowserslist: ['>0.8%', 'not op_mini all'],
                 }),
-            ],
+            ]
         }),
     ],
     devServer: {
         initialLoadUrl: '/components',
     },
-    watchIgnoredRegex: /(docs-[a-zA-Z.]+)|(CHANGELOG.md|stats.html|custom-elements.json|stencil-stats.json|package-lock.json)|([a-zA-Z0-9-]+-e-2-e.*)/,
+    watchIgnoredRegex: /(docs-[a-zA-Z.]+)|(CHANGELOG.md|stats.html|custom-elements.json|stencil-stats.json|package-lock.json|web-types.json)|([a-zA-Z0-9-]+-e-2-e.*)/,
     testing: {
         testRegex: ['\\.(spec)\\.(tsx|ts|js)$'],
         testPathIgnorePatterns: [
@@ -179,6 +206,6 @@ export const config = {
         experimentalScopedSlotChanges: true,
         experimentalSlotFixes: true,
         scriptDataOpts: true,
+        addGlobalStyleToComponents: false,
     },
 };
-//# sourceMappingURL=stencil.config.js.map

package/dist/stencil.config.prod.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { config as devConfig } from "./stencil.config";
 const prodConfig = {
@@ -13,5 +13,7 @@ const prodConfig = {
 if (devConfig.plugins) {
     prodConfig.plugins = [...devConfig.plugins, ...(prodConfig.plugins || [])];
 }
+if (devConfig.outputTargets) {
+    prodConfig.outputTargets = devConfig.outputTargets.filter(target => target.type !== 'www');
+}
 export const config = prodConfig;
-//# sourceMappingURL=stencil.config.prod.js.map

package/dist/style/components.css ADDED Viewed

@@ -0,0 +1 @@

+ :where(nano-footer,.nano-footer) h1,:where(nano-footer,.nano-footer) h2,:where(nano-footer,.nano-footer) h3,:where(nano-footer,.nano-footer) h4,:where(nano-footer,.nano-footer) h5,:where(nano-footer,.nano-footer) h6{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-normal);margin:var(--header-margin)}@layer components{.nano-toast-stack{position:fixed;z-index:var(--nano-z-index-modal);inline-size:28rem;max-inline-size:100%;max-block-size:100%}.nano-toast-stack--tr{inset-block-start:0;inset-inline-end:0}.nano-toast-stack--tl{inset-block-start:0;inset-inline-start:0}.nano-toast-stack--br{inset-block-end:0;inset-inline-end:0}.nano-toast-stack--bl{inset-block-end:0;inset-inline-start:0}}@layer components{.nano-sortable__placeholder{opacity:0}.nano-sortable__dragged{opacity:.6;cursor:grabbing !important;box-shadow:var(--nano-shadow-l2);z-index:1;position:relative}.nano-sortable__keyboard-handle{background:var(--nano-color-base-0)}.nano-sortable__handle-dragged{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}}@layer components{nano-cta{--color: var(--nano-color-basic-white);--bg: var(--nano-color-blue-cerulean-1000);--bg-hover: var(--nano-color-blue-cerulean-1100);--bg-active: var(--nano-color-blue-cerulean-1200);--border: 1px solid var(--bg);--icon-size: 1em;--padding-v: 0.4375em;--padding-h: 1.125em;--spinner-size: 1em;--font-size: var(--nano-font-size-small);--line-height: var(--nano-line-height-normal);--gap: var(--nano-spacing-sm);--icon-display: none;--loading-display: none;--loading-opacity: 0;--flip-icon-ltr: 0;--flip-icon-rtl: 1;display:contents}nano-cta:has(.nano-internal-cta){display:inline-block}nano-cta:dir(rtl){--flip-icon-ltr: 1;--flip-icon-rtl: 0}nano-cta[group=balanced]{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--gap)}nano-cta[group=balanced] a,nano-cta[group=balanced] button{justify-content:space-evenly}nano-cta[group=stacked]{display:flex;flex-direction:column;gap:var(--gap)}nano-cta[secondary]:not([secondary=false]),nano-cta :is([secondary]):not([secondary=false]){--color: var(--nano-color-primary-1100);--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-primary-100);--bg-active: var(--nano-color-primary-300);--border: 1px solid var(--color)}nano-cta[theme=success],nano-cta :is([theme=success]){--color: var(--nano-color-basic-white);--bg: var(--nano-color-success-1000);--bg-hover: var(--nano-color-success-1100);--bg-active: var(--nano-color-success-1200);--border: 1px solid var(--bg)}nano-cta[theme=success][secondary]:not([secondary=false]),nano-cta :is([theme=success][secondary]):not([secondary=false]){--color: var(--nano-color-success-1100);--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-success-75);--bg-active: var(--nano-color-success-200);--border: 1px solid var(--color)}nano-cta[theme=danger],nano-cta :is([theme=danger]){--color: var(--nano-color-basic-white);--bg: var(--nano-color-danger-1000);--bg-hover: var(--nano-color-danger-1100);--bg-active: var(--nano-color-danger-1200);--border: 1px solid var(--bg)}nano-cta[theme=danger][secondary]:not([secondary=false]),nano-cta :is([theme=danger][secondary]):not([secondary=false]){--color: var(--nano-color-danger-1200);--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-danger-300);--bg-active: var(--nano-color-danger-400);--border: 1px solid var(--color)}nano-cta[theme=warning],nano-cta :is([theme=warning]){--color: var(--nano-color-basic-white);--bg: var(--nano-color-warning-1000);--bg-hover: var(--nano-color-warning-1100);--bg-active: var(--nano-color-warning-1200);--border: 1px solid var(--bg)}nano-cta[theme=warning][secondary]:not([secondary=false]),nano-cta :is([theme=warning][secondary]):not([secondary=false]){--color: var(--nano-color-warning-1100);--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-warning-200);--bg-active: var(--nano-color-warning-300);--border: 1px solid var(--color)}nano-cta[size=medium],nano-cta :is([size=medium]){--font-size: var(--nano-font-size-xs);--line-height: var(--nano-line-height-dense);--gap: var(--nano-spacing-xs)}nano-cta[size=small],nano-cta :is([size=small]){--font-size: var(--nano-font-size-2xs);--line-height: var(--nano-line-height-denser);--gap: var(--nano-spacing-xs);--padding-h: 1em;--padding-v: 0.5em}nano-cta:is([loading],[loading=true]):not([loading=false]),nano-cta :is([loading],[loading=true]):not([loading=false]){--text-color: transparent !important;--loading-display: block;--loading-opacity: 1;--bg-hover: var(--bg);--bg-active: var(--bg);cursor:wait}nano-cta:is([loading],[loading=true]):not([loading=false]) a,nano-cta:is([loading],[loading=true]):not([loading=false]) button,nano-cta :is([loading],[loading=true]):not([loading=false]) a,nano-cta :is([loading],[loading=true]):not([loading=false]) button{--text-color: transparent !important;cursor:wait}nano-cta :is(button[disabled],button[disabled=true]):not(button[disabled=false]),nano-cta a:not([href]){--color: var(--nano-color-neutral-1200);--text-color: var(--color);--bg: var(--nano-color-neutral-100);--bg-hover: var(--bg);--bg-active: var(--bg);--border: 1px solid var(--color);cursor:not-allowed}nano-cta :is(button[disabled],button[disabled=true]):not(button[disabled=false]) a,nano-cta :is(button[disabled],button[disabled=true]):not(button[disabled=false]) button,nano-cta a:not([href]) a,nano-cta a:not([href]) button{cursor:not-allowed}nano-cta a,nano-cta button{--text-color: var(--color);margin:0;appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;vertical-align:middle;background-color:var(--bg) !important;color:var(--text-color) !important;border-radius:var(--nano-border-radius-pill);line-height:var(--line-height);letter-spacing:var(--nano-letter-spacing-loose);font-size:var(--font-size);padding:var(--padding-v) var(--padding-h);gap:var(--nano-spacing-sm);border:var(--border) !important;transition:color var(--nano-transition-fast) ease;text-decoration:none !important}nano-cta a:focus-visible,nano-cta button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-cta a:hover,nano-cta button:hover{background-color:var(--bg-hover) !important}nano-cta a:active,nano-cta button:active{background-color:var(--bg-active) !important}nano-cta a::before,nano-cta button::before{content:"";display:var(--loading-display);opacity:var(--loading-opacity);position:absolute;padding:2.5px;aspect-ratio:1;border-radius:50%;inline-size:var(--spinner-size);background:var(--color);inset:calc(50% - var(--spinner-size)/2);mask:conic-gradient(rgba(0, 0, 0, 0), #000) subtract,conic-gradient(#000 0 0) content-box;animation:load 1s linear infinite;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}@keyframes load{to{rotate:1turn}}nano-cta a::after,nano-cta button::after{content:"";display:var(--icon-display);background-size:cover;inline-size:var(--icon-size);block-size:var(--icon-size);background-color:var(--text-color);mask-image:var(--icon-svg);transition:color var(--nano-transition-fast) ease;mask-repeat:no-repeat;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg*var(--flip-icon-ltr))}nano-cta a :which(nano-icon, .nano-icon),nano-cta a svg,nano-cta button :which(nano-icon, .nano-icon),nano-cta button svg{color:inherit;inline-size:var(--icon-size);margin:auto 0}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=forward]{--icon-svg: var(--nano-component-icon-chevron);--icon-display: block}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=forward] a,nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=forward] button{padding-inline-end:.8125em}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=forward] a::after,nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=forward] button::after{rotate:calc(180deg*var(--flip-icon-ltr))}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=back]{--icon-svg: var(--nano-component-icon-chevron);--icon-display: block}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=back] a,nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=back] button{padding-inline-start:.8125em}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=back] a::after,nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=back] button::after{rotate:calc(180deg*var(--flip-icon-rtl));order:-1;margin-inline-start:unset}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=up]{--icon-svg: var(--nano-component-icon-chevron);--icon-display: block;--flip-icon-ltr: 0;--flip-icon-rtl: 0}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=up] a::after,nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=up] button::after{transform:rotate(270deg)}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=down]{--icon-svg: var(--nano-component-icon-chevron);--icon-display: block;--flip-icon-ltr: 0;--flip-icon-rtl: 0}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=down] a::after,nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=down] button::after{transform:rotate(90deg)}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=download]{--icon-svg: var(--nano-component-icon-download);--icon-display: block;--flip-icon-ltr: 0;--flip-icon-rtl: 0}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg))[icon=open]{--icon-svg: var(--nano-component-icon-open);--icon-size: .9em;--icon-display: block;--flip-icon-ltr: 0;--flip-icon-rtl: 0}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg)):not([icon]) a[href]:not([href=""],[icon],[href^="#"]){--icon-svg: var(--nano-component-icon-chevron);--icon-display: block;padding-inline-end:.8125em}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg)):not([icon]) a[href]:not([href=""],[icon],[href^="#"])[target=_blank]{--icon-svg: var(--nano-component-icon-open);--icon-display: block;--flip-icon-ltr: 0;--flip-icon-rtl: 0;padding-inline-end:var(--padding-h)}nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg)):not([icon]) a[href]:not([href=""],[icon],[href^="#"])[download],nano-cta:not([icon=false],:has(a nano-icon,a .nano-icon,a svg)):not([icon]) a[href]:not([href=""],[icon],[href^="#"]):is([href$=".pdf"],[href$=".zip"],[href$=".doc"],[href$=".docx"],[href$=".xls"],[href$=".xlsx"],[href$=".ppt"],[href$=".pptx"]){--icon-svg: var(--nano-component-icon-download);--icon-display: block;--flip-icon-ltr: 0;--flip-icon-rtl: 0;padding-inline-end:var(--padding-h)}}@layer components{nano-card{--color: currentColor;--bg: transparent;--gap: var(--nano-spacing-md);--content-margin: 0;--flip-icon-ltr: 0;container-type:inline-size;position:relative;display:grid;grid-template-columns:minmax(197px, 31%) auto;grid-template-rows:repeat(calc(var(--row-count) - 1), auto);gap:var(--gap);background-color:var(--bg);color:var(--color)}nano-card:dir(rtl){--flip-icon-ltr: 1}nano-card:has(>:last-child:nth-child(1),>article>:last-child:nth-child(1)){--row-count: 1}nano-card:has(>:last-child:nth-child(2),>article>:last-child:nth-child(2)){--row-count: 2}nano-card:has(>:last-child:nth-child(3),>article>:last-child:nth-child(3)){--row-count: 3}nano-card:has(>:last-child:nth-child(4),>article>:last-child:nth-child(4)){--row-count: 4}nano-card:has(>:last-child:nth-child(5),>article>:last-child:nth-child(5)){--row-count: 5}nano-card:has(>:last-child:nth-child(6),>article>:last-child:nth-child(6)){--row-count: 6}nano-card:has(>:last-child:nth-child(7),>article>:last-child:nth-child(7)){--row-count: 7}nano-card *{margin-block:unset;margin-block-start:unset;margin-block-end:unset}nano-card>*:not([slot]){display:contents}nano-card [slot]{display:block}nano-card [slot]:not([slot=img],ul){margin-inline:var(--content-margin)}nano-card [slot]:not([slot=img],ul):last-child{margin-block-end:var(--content-margin)}nano-card:not(:has([slot=img])) [slot]:first-child{margin-block-start:var(--content-margin)}nano-card [slot=img]{order:1}nano-card [slot=title]{order:2;text-wrap:balance}nano-card [slot=content]{order:3;text-wrap:balance}nano-card [slot=footer]{order:4;display:flex;align-items:center;gap:var(--gap)}nano-card nano-content-links{--color-border: rgb(var(--nano-color-base-rgb-1000) / 7%)}nano-card address{font-style:normal}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)) a,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])) a{color:var(--color);text-decoration:none}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)):hover [slot=title],nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])):hover [slot=title]{color:var(--nano-color-primary-1000);text-decoration:underline}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)):hover:has([slot=title]>*~*) [slot=title],nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])):hover:has([slot=title]>*~*) [slot=title]{color:var(--color);text-decoration:none}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)):hover:has([slot=title]>*~*) [slot=title]>:first-child,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])):hover:has([slot=title]>*~*) [slot=title]>:first-child{color:var(--nano-color-primary-1000);text-decoration:underline}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)) button::before,nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)) a::before,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])) button::before,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])) a::before{content:"";display:block;position:absolute;inset:0;touch-action:manipulation;cursor:pointer;inline-size:100%;block-size:100%;animation:none;border-radius:0;z-index:var(--enable-card-click)}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)) nano-cta>*,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])) nano-cta>*{position:static}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input))[variant^=promo]:hover,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading]))[variant^=promo]:hover{box-shadow:var(--nano-shadow-l0);background-color:var(--bg-hover)}nano-card:has(a:only-of-type):not(:has(button,nano-icon-button,input)) nano-tooltip>*,nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,:has(a,nano-icon-button,input,nano-cta[loading])) nano-tooltip>*{position:relative;z-index:2}nano-card:has(a[slot]):has([slot] a){--enable-card-click: -1}nano-card:has([slot=content] a):has([slot=footer] a){--enable-card-click: -1}nano-card:not([layout=landscape]) [slot]{grid-column:1/-1 !important}nano-card[layout=landscape] [slot]{grid-column:2}nano-card[layout=landscape] [slot=img]{grid-column:1;grid-row:1/-1}@container (width < 417px){nano-card[layout=landscape] [slot]{grid-column:1/-1 !important}nano-card[layout=landscape] [slot=img]{grid-column:1/-1 !important}}nano-card[variant=product] [slot=title]{display:inline-flex;gap:var(--gap);align-items:center;justify-content:space-between}nano-card[variant=product] [slot=footer]{justify-content:space-between}nano-card [slot=title],nano-card [slot=title]>:first-child{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}nano-card [slot=content],nano-card [slot=content]>*{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}nano-card[size=small] [slot=title],nano-card[size=small] [slot=title]>:first-child{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold)}nano-card[size=small] [slot=content],nano-card[size=small] [slot=content]>*{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}nano-card[variant=product][size=small]{--gap: var(--nano-spacing-sm)}nano-card[variant^=promo]{--content-margin: var(--gap);box-shadow:var(--nano-shadow-l1)}nano-card[variant^=promo] [slot=title],nano-card[variant^=promo] [slot=title]:hover,nano-card[variant^=promo]:hover [slot=title]{color:var(--color) !important;text-decoration:none !important}nano-card[variant^=promo] nano-cta>*{inline-size:100%}nano-card[variant^=promo] [slot=title],nano-card[variant^=promo] [slot=title]>:first-child{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}nano-card[variant^=promo] [slot=content],nano-card[variant^=promo] [slot=content]>*{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}nano-card[variant^=promo]:not(:has(nano-cta)):has(a[slot=title]) a[slot=title]{display:inline-flex;gap:var(--gap)}nano-card[variant^=promo]:not(:has(nano-cta)):has(a[slot=title]) a[slot=title]::after{content:"";display:block;background-size:cover;inline-size:1em;background-color:var(--color);mask-image:var(--nano-component-icon-chevron);mask-repeat:no-repeat;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg*var(--flip-icon-ltr))}nano-card[variant=promo]{--bg: var(--nano-color-notice-1200);--bg-hover: var(--nano-color-notice-1000);--color: var(--nano-color-base-0)}nano-card[variant=promo] nano-cta{--color: var(--nano-color-notice-1000);--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-notice-75);--bg-active: var(--nano-color-notice-200);--border: 1px solid var(--color)}nano-card[variant=promo-aero]{--bg: var(--nano-color-success-200);--bg-hover: var(--nano-color-success-75);--color: var(--nano-color-base-1000)}nano-card[variant=promo-plain],nano-card[variant=promo-grey]{--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-neutral-100);--color: var(--nano-color-neutral-1400)}nano-card[variant=promo-plain]:hover [slot=title],nano-card[variant=promo-grey]:hover [slot=title]{color:var(--nano-color-primary-1000)}nano-card[variant=promo-plain] nano-cta,nano-card[variant=promo-grey] nano-cta{--color: var(--nano-color-primary-1100);--bg: var(--nano-color-base-0);--bg-hover: var(--nano-color-primary-50);--bg-active: var(--nano-color-primary-75);--border: 1px solid var(--color)}nano-card[variant=promo-grey]{--bg: var(--nano-color-neutral-100);--bg-hover: var(--nano-color-neutral-200);--color: var(--nano-color-neutral-1400)}}@layer components{nano-tag{--background: var(--nano-color-base-50);--color: var(--nano-color-primary-1100);--stroke: var(--nano-color-primary-1000);--color-non-interactive: var(--nano-color-neutral-1400);--padding: 0.125rem 0.375rem;--font-size: 0.625rem;--line-height: var(--nano-line-height-denser);--letter-spacing: var(--nano-letter-spacing-denser);--bg-color-hover: var(--nano-color-primary-100);--bg-color-active: var(--nano-color-primary-300);display:inline-block;block-size:fit-content;inline-size:fit-content;padding:var(--padding);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--nano-font-weight-bold);line-height:var(--line-height);letter-spacing:var(--letter-spacing);word-wrap:break-word;text-align:center;cursor:default;color:var(--color-non-interactive);background:var(--background);border:1px solid var(--color-non-interactive)}nano-tag[size=large]{--padding: 0.25rem 0.5rem;--font-size: var(--nano-font-size-2xs);--letter-spacing: var(--nano-letter-spacing-loose)}nano-tag>a,nano-tag>button{all:unset;display:block;padding:var(--padding)}nano-tag[closable]{display:flex;gap:.25rem;justify-content:space-between;align-items:center;padding:var(--padding)}nano-tag[closable] nano-icon-button{--padding: 0}nano-tag[closable][size=large]{gap:.375rem}nano-tag[closable]:not(:has(nano-icon-button,.nano-icon-button))::after{content:"";display:block;min-inline-size:.625rem}nano-tag:has(a),nano-tag:has(button){padding:0}nano-tag:has(a),nano-tag:has(button),nano-tag[closable]{color:var(--color);border-color:var(--stroke);background:var(--background)}nano-tag:has(a:hover),nano-tag:has(button:hover){cursor:pointer;background:var(--bg-color-hover)}nano-tag:has(a:active),nano-tag:has(button:active){background:var(--bg-color-active)}nano-tag:has(a:focus-visible,button:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}}@layer components{nano-content-links{--text-color: var(--nano-color-neutral-1400);--color-disabled: var(--nano-color-neutral-800);--color-border: var(--nano-color-neutral-200);--color-active: var(--nano-color-primary-1000);--padding: var(--nano-spacing-sm);--icon-size: 1em;--icon-color: var(--nano-color-primary-1200);display:contents;color:var(--text-color);font-size:var(--nano-font-size-small);font-weight:var(--nano-font-weight-normal);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);word-wrap:break-word}nano-content-links>*{all:unset;inline-size:stretch;block-size:fit-content;display:flex;justify-content:space-between;align-items:center;padding:var(--padding);gap:var(--nano-spacing-md);border-block-start:1px solid var(--color-border);border-block-end:1px solid var(--color-border);text-decoration:none !important}nano-content-links>*::after{content:"";background-size:cover;inline-size:var(--icon-size);block-size:var(--icon-size);mask-image:var(--nano-component-icon-chevron);mask-repeat:no-repeat;mask-position:center;transform-origin:center;margin-inline-start:auto}nano-content-links>*:not(a){pointer-events:none;cursor:default;color:var(--color-disabled);border-block-start:1px solid var(--color-border);border-block-end:1px solid var(--color-border)}nano-content-links>*:not(a)::after{background-color:var(--color-disabled)}nano-content-links>*+*{border-block-start:none !important}nano-content-links>a{pointer-events:auto;cursor:pointer;color:var(--text-color)}nano-content-links>a::after{background-color:var(--icon-color)}nano-content-links>a[target=_blank]::after{mask-image:var(--nano-component-icon-open)}nano-content-links>a:hover,nano-content-links>a:active{color:var(--color-active);text-decoration:underline solid}nano-content-links>a:hover::after,nano-content-links>a:active::after{background-color:var(--color-active)}nano-content-links>a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}}@layer components{nano-badge{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);background:var(--bg);color:var(--color);border-radius:var(--nano-border-radius-pill);padding:.15em .65em !important;display:inline-block}nano-badge a{color:inherit;border-radius:inherit}nano-badge a::after{content:"";position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;background-color:rgba(0,0,0,0)}nano-badge:has(a){position:relative}nano-badge:has(a):hover{background-color:color-mix(in srgb, var(--bg), black 10%)}nano-badge:not([theme]),nano-badge[theme=primary]{--bg: var(--nano-color-primary-1000);--color: var(--nano-color-base-0)}nano-badge:not([theme])[strength="4"],nano-badge[theme=primary][strength="4"]{--bg: var(--nano-color-primary-700)}nano-badge:not([theme])[strength="3"],nano-badge[theme=primary][strength="3"]{--bg: var(--nano-color-primary-1000)}nano-badge:not([theme])[strength="2"],nano-badge[theme=primary][strength="2"]{--bg: var(--nano-color-primary-1100)}nano-badge:not([theme])[strength="1"],nano-badge[theme=primary][strength="1"]{--bg: var(--nano-color-primary-1200)}nano-badge[theme=neutral]{--bg: var(--nano-color-neutral-900);--color: var(--nano-color-base-0)}nano-badge[theme=neutral][strength="4"]{--bg: var(--nano-color-neutral-700)}nano-badge[theme=neutral][strength="3"]{--bg: var(--nano-color-neutral-900)}nano-badge[theme=neutral][strength="2"]{--bg: var(--nano-color-neutral-1000)}nano-badge[theme=neutral][strength="1"]{--bg: var(--nano-color-neutral-1200)}nano-badge[theme=success]{--bg: var(--nano-color-success-1000);--color: var(--nano-color-base-0)}nano-badge[theme=success][strength="4"]{--bg: var(--nano-color-success-600)}nano-badge[theme=success][strength="3"]{--bg: var(--nano-color-success-1000)}nano-badge[theme=success][strength="2"]{--bg: var(--nano-color-success-1100)}nano-badge[theme=success][strength="1"]{--bg: var(--nano-color-success-1200)}nano-badge[theme=warning]{--bg: var(--nano-color-warning-1000);--color: var(--nano-color-base-0)}nano-badge[theme=warning][strength="4"]{--bg: var(--nano-color-warning-600)}nano-badge[theme=warning][strength="3"]{--bg: var(--nano-color-warning-1000)}nano-badge[theme=warning][strength="2"]{--bg: var(--nano-color-warning-1100)}nano-badge[theme=warning][strength="1"]{--bg: var(--nano-color-warning-1200)}nano-badge[theme=danger]{--bg: var(--nano-color-danger-1000);--color: var(--nano-color-base-0)}nano-badge[theme=danger][strength="4"]{--bg: var(--nano-color-danger-800)}nano-badge[theme=danger][strength="3"]{--bg: var(--nano-color-danger-1000)}nano-badge[theme=danger][strength="2"]{--bg: var(--nano-color-danger-1100)}nano-badge[theme=danger][strength="1"]{--bg: var(--nano-color-danger-1200)}nano-badge[pulse]:not([pulse=false]){animation:pulse-animation 2s infinite}@keyframes pulse-animation{0%{box-shadow:0 0 0 0 rgb(var(--nano-color-base-rgb-1000)/20%)}100%{box-shadow:0 0 0 1em rgb(var(--nano-color-base-rgb-1000)/0%)}}}@layer components{:where(nano-card-carousel,.nano-card-carousel)>[slot=title]{all:unset;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);line-height:1}nano-card-carousel nano-card [slot]{opacity:var(--text-opacity)}nano-card-carousel nano-card [slot=img]{opacity:var(--img-opacity)}}@layer components{.nano-theme-dark :where(nano-global-nav,.nano-global-nav)::part(logo),.nano-theme-dark :where(nano-global-nav,.nano-global-nav) [part~=logo],:where(nano-global-nav,.nano-global-nav).nano-theme-dark::part(logo),:where(nano-global-nav,.nano-global-nav).nano-theme-dark [part~=logo]{filter:invert(100%)}:where(nano-global-nav,.nano-global-nav)>a,:where(nano-global-nav,.nano-global-nav) :where(nano-nav-item,.nano-nav-item)::part(label),:where(nano-global-nav,.nano-global-nav) :where(nano-nav-item,.nano-nav-item) [part~=label]{white-space:nowrap}:where(nano-global-nav,.nano-global-nav).bar-menu nano-nav-item,:where(nano-global-nav,.nano-global-nav).bar-menu>a{color:var(--main-menu-text-color)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item):hover,:where(nano-global-nav,.nano-global-nav).bar-menu>a:hover{color:var(--main-menu-hover-text-color)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item):active,:where(nano-global-nav,.nano-global-nav).bar-menu>a:active{color:var(--main-menu-active-text-color)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)::part(trigger),:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [part~=trigger]{position:relative}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)::part(trigger)::before,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [part~=trigger]::before{content:"";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:0;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)[open]{color:var(--main-menu-active-border-color) !important}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)[open]::part(trigger)::before,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)[open] [part~=trigger]::before{transform:translateZ(0) scaleX(1)}:where(nano-global-nav,.nano-global-nav).bar-menu a.active,:where(nano-global-nav,.nano-global-nav).bar-menu nano-nav-item.active,:where(nano-global-nav,.nano-global-nav).bar-menu nano-nav-item[selected]{color:var(--main-menu-active-text-color) !important}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)::part(modal){inset-block-start:-500%;inline-size:100%;position:absolute;z-index:-2;inset-inline:0;transition:inset-block-start var(--nano-transition-fast) ease-in-out,opacity var(--nano-transition-x-fast) ease}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)::part(modal modal--open){inset-block-start:100%}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)::part(modal-content){background:var(--nano-color-base-0);color:var(--nano-color-base-1000);padding:var(--nano-spacing-xl);inline-size:91.25rem;max-inline-size:100%;margin:auto;box-shadow:var(--nano-shadow-l2)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item)::part(modal-mask),:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [part~=modal-mask]{background:var(--nano-overlay-background-color);position:fixed;inset:0;min-block-size:100%;z-index:-1}:where(nano-global-nav,.nano-global-nav).bar-menu [slot=close-button]{display:none}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary]{display:grid;gap:var(--nano-spacing-xl);grid-template:auto/repeat(auto-fit, minmax(200px, 1fr))}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary]:has(.gn__focus-area){grid-template:auto/1fr 1fr 26rem}@media(width < 1200px){:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary]:has(.gn__focus-area){grid-template-columns:1fr 26rem}}@media(width < 830px){:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary]:has(.gn__focus-area){grid-template-columns:1fr}}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h1,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h2,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h3,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h4,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__title{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense);padding-block-end:1rem;border-block-end:1px solid var(--nano-color-neutral-100)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] a{text-decoration:none}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] a:hover{text-decoration:underline}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] ul{margin:0;padding:0}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] ul li{margin-inline:0;list-style:none;margin-block-end:var(--nano-spacing-sm);line-height:var(--nano-line-height-dense)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area{padding:var(--nano-spacing-xl) var(--nano-spacing-l);display:flex;flex-direction:column;gap:var(--nano-spacing-sm);background:var(--nano-color-base-0);color:var(--nano-color-base-1000)}@media(width < 1200px)and (width > 830px){:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area{grid-column:2;grid-row:1/3}}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area h1,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area h2,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area h3,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area h4,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area h5,:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area p{margin:0;border:none}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area nano-content-links{display:block}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__link-columns{gap:var(--nano-spacing-xl)}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__link-columns:has(>:nth-child(6)){columns:2}:where(nano-global-nav,.nano-global-nav).bar-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__link-columns>*{display:block;margin-block-end:var(--nano-spacing-sm)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item),:where(nano-global-nav,.nano-global-nav).overflow-menu>a{color:var(--overflow-text-color)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item):hover,:where(nano-global-nav,.nano-global-nav).overflow-menu>a:hover{color:var(--overflowhover-text-color)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item):active,:where(nano-global-nav,.nano-global-nav).overflow-menu>a:active{color:var(--overflow-active-text-color)}:where(nano-global-nav,.nano-global-nav).overflow-menu a.active,:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item).active,:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item)[selected]{color:var(--overflow-active-text-color) !important}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item)::part(modal){background-color:var(--overflow-bg-color);inline-size:100%;block-size:100%;position:absolute;inset:0}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary]{display:flex;flex-direction:column;gap:var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] a{text-decoration:none;color:var(--nano-color-blue-cerulean-700)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] a:hover{text-decoration:underline}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h1,:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h2,:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h3,:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] h4,:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__title{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)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] ul{margin:0;padding:0}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] ul li{margin-inline:0;list-style:none;margin-block-end:var(--nano-spacing-sm);line-height:var(--nano-line-height-dense)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__link-columns{padding-inline-start:var(--nano-spacing-md)}:where(nano-global-nav,.nano-global-nav).overflow-menu :where(nano-nav-item,.nano-nav-item) [slot=secondary] .gn__focus-area{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block-start:var(--nano-spacing-md)}:where(nano-global-nav,.nano-global-nav).overflow-menu [slot=close-button]{color:inherit;padding-block:var(--nano-spacing-md);display:flex;gap:var(--nano-spacing-sm);align-items:center;cursor:pointer;inline-size:100%}:where(nano-global-nav,.nano-global-nav).overflow-menu [slot=close-button]:hover{color:var(--nano-color-blue-cerulean-700)}:where(nano-global-nav,.nano-global-nav).overflow-menu [slot=close-button]::before{content:"";margin-inline-start:0;background-size:cover;inline-size:1em;block-size:1em;mask-image:var(--nano-component-icon-chevron);mask-repeat:no-repeat;mask-position:center;transform-origin:center;rotate:180deg;background-color:var(--nano-color-blue-cerulean-700)}}@layer components{nano-avatar{--size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;position:relative;inline-size:var(--size);block-size:var(--size);background-color:var(--nano-color-neutral-400);font-size:calc(var(--size)*.5);font-weight:var(--nano-font-weight-normal);color:var(--nano-color-neutral-0);user-select:none;vertical-align:middle;border-radius:var(--nano-border-radius-circle);overflow:hidden}nano-avatar:empty::before{content:attr(initials);text-transform:uppercase;line-height:1}nano-avatar img{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover}}@layer components{:where(nano-in-page-nav,.nano-in-page-nav){--color-bottom-border: rgb(var(--nano-color-base-rgb-1000) / 10%);--color-text: var(--nano-color-neutral-1400);--color-primary: var(--nano-color-primary-1100);--color-text-hover: var(--color-primary);--color-border-active: var(--nano-color-primary-1000);--border-active: 3px solid var(--color-border-active);--color-bg: var(--nano-color-primary-75);--font-size: var(--nano-font-size-small);--font-weight: var(--nano-font-weight-normal);--font-weight-active: var(--nano-font-weight-bold);--line-height: var(--nano-line-height-dense);--letter-spacing: var(--nano-letter-spacing-loose);--flip-icon-ltr: 1;--list-gap: calc(var(--spacing-l2) / 1.25);--spacing-l2: var(--nano-spacing-l2);--spacing-l3: var(--nano-spacing-l3)}:where(nano-in-page-nav,.nano-in-page-nav):dir(rtl){--flip-icon-ltr: 0}:where(nano-in-page-nav,.nano-in-page-nav) a,:where(nano-in-page-nav,.nano-in-page-nav) ul,:where(nano-in-page-nav,.nano-in-page-nav) li{all:unset}:where(nano-in-page-nav,.nano-in-page-nav) ul{display:flex;flex-direction:column;list-style:none}:where(nano-in-page-nav,.nano-in-page-nav) ul:not(ul ul){padding:0 var(--spacing-l2) var(--spacing-l3) var(--spacing-l2)}:where(nano-in-page-nav,.nano-in-page-nav) a{cursor:pointer}:where(nano-in-page-nav,.nano-in-page-nav) a:hover{text-decoration:underline}:where(nano-in-page-nav,.nano-in-page-nav) a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:where(nano-in-page-nav,.nano-in-page-nav) ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%;border-block-end:1px solid var(--color-bottom-border)}:where(nano-in-page-nav,.nano-in-page-nav) ul>li:not(ul>li li) a{color:var(--color-text)}:where(nano-in-page-nav,.nano-in-page-nav) ul>li:not(ul>li li) a.active{border-inline-start:var(--border-active);padding-inline-start:1rem}:where(nano-in-page-nav,.nano-in-page-nav) ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul,:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul a,:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul a{color:var(--color-primary) !important}:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul a.active,:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul a.active{padding-inline-start:0}:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul:has(nano-details),:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul:has(nano-details){padding-inline-start:1.1rem}:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul nano-details::part(header),:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul nano-details [part~=header],:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul nano-details::part(header),:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul nano-details [part~=header]{padding:0}:where(nano-in-page-nav,.nano-in-page-nav) ul>li>ul>li>nano-details>ul,:where(nano-in-page-nav,.nano-in-page-nav) ul>li>nano-details>ul>li>nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-l1-default)}:where(nano-in-page-nav,.nano-in-page-nav) nano-details nano-details:not(nano-details nano-details nano-details){color:var(--color-text)}:where(nano-in-page-nav,.nano-in-page-nav) nano-details{--padding: 0;--btn-bg-color: transparent;--btn-bg-color--open: var(--nano-color-primary-75);--btn-bg-color--hover: transparent;border:none}:where(nano-in-page-nav,.nano-in-page-nav) nano-details .active::part(header),:where(nano-in-page-nav,.nano-in-page-nav) nano-details .active [part~=header]{border-inline-start:var(--border-active);padding-inline-start:1rem;color:var(--color-primary)}:where(nano-in-page-nav,.nano-in-page-nav) nano-details[open]>[slot=icon-start]{rotate:90deg}:where(nano-in-page-nav,.nano-in-page-nav) nano-details::part(content),:where(nano-in-page-nav,.nano-in-page-nav) nano-details [part~=content]{padding:0}:where(nano-in-page-nav,.nano-in-page-nav) nano-details::part(icon--start),:where(nano-in-page-nav,.nano-in-page-nav) nano-details [part~=icon--start]{margin-inline-end:var(--spacing-l3)}:where(nano-in-page-nav,.nano-in-page-nav) nano-details::part(header),:where(nano-in-page-nav,.nano-in-page-nav) nano-details [part~=header]{font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}:where(nano-in-page-nav,.nano-in-page-nav) nano-details::part(header):hover,:where(nano-in-page-nav,.nano-in-page-nav) nano-details [part~=header]:hover{text-decoration:underline}:where(nano-in-page-nav,.nano-in-page-nav) .details-wrapper{--btn-text-color: var(--color-text)}:where(nano-in-page-nav,.nano-in-page-nav) .details-wrapper::part(header),:where(nano-in-page-nav,.nano-in-page-nav) .details-wrapper [part~=header]{padding:var(--spacing-l2)}:where(nano-in-page-nav,.nano-in-page-nav):has(.details-wrapper[open])::part(root),:where(nano-in-page-nav,.nano-in-page-nav):has(.details-wrapper[open]) [part~=root]{box-shadow:var(--nano-shadow-l1)}:where(nano-in-page-nav,.nano-in-page-nav) .details-wrapper.sticky.stuck[open]::part(header),:where(nano-in-page-nav,.nano-in-page-nav) .details-wrapper.sticky.stuck [part~=header]{z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}}@layer components{:where(nano-collapsible-comparison,.nano-collapsible-comparison){--color-bg: var(--nano-color-base-0);--color-border: var(--nano-color-neutral-200);--outer-spacing: var(--nano-spacing-l1-default)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) h2{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) h2,:where(nano-collapsible-comparison,.nano-collapsible-comparison) h4{margin:0}:where(nano-collapsible-comparison,.nano-collapsible-comparison) h3,:where(nano-collapsible-comparison,.nano-collapsible-comparison) h4{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) h3{padding-block-end:var(--nano-spacing-md);border-block-end:1px solid var(--color-border);margin-block:0}:where(nano-collapsible-comparison,.nano-collapsible-comparison) h4{font-weight:var(--nano-font-weight-normal)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) ul{padding:0;margin:0}:where(nano-collapsible-comparison,.nano-collapsible-comparison) ul[slot=content]{list-style:none}:where(nano-collapsible-comparison,.nano-collapsible-comparison) ul[slot=content]>li{margin:0;padding-block-start:var(--nano-spacing-md)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) [slot=label]{display:flex;align-items:center}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details{--btn-bg-color: transparent;--btn-bg-color--active: transparent;--btn-bg-color--hover: transparent;--padding: 0;border:none}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details::part(header),:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details [part~=header]{color:var(--color-primary)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details::part(label),:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details [part~=label],:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details::part(content),:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details [part~=content]{display:grid;grid-template-columns:1fr 1fr;gap:var(--nano-spacing-l1-default)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details::part(icon--end),:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details [part~=icon--end]{display:none}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details::part(content),:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details [part~=content]{padding:var(--nano-spacing-md) 0}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details::part(body),:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details [part~=body]{border-block-end:1px solid var(--color-border)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details ul{list-style:disc;padding-inline-start:var(--nano-spacing-md)}:where(nano-collapsible-comparison,.nano-collapsible-comparison) nano-details ul li{font-size:var(--nano-font-size-xs)}}@layer components{:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item){--padding: inherit;display:block;border-block-start:1px solid var(--nano-color-neutral-200)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item):not(:has(+nano-nav-item),:has(+nano-dropdown),:has(+nano-content-links)){border-block-end:1px solid var(--nano-color-neutral-200)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)::part(trigger){font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)[checkbox]::part(label)::before{content:"";display:inline-block;vertical-align:middle;background-size:cover;mask-repeat:no-repeat;mask-position:center;inline-size:.8em;block-size:.8em;mask-image:var(--nano-component-icon-check);background-color:var(--icon-color);opacity:0;margin-inline-end:var(--nano-spacing-sm);align-content:center}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)[checkbox][selected]::part(label)::before{opacity:1}:where(nano-menu,.nano-menu) a{font-size:calc(var(--font-size) - .125rem);color:var(--nano-color-primary-1100)}:where(nano-menu,.nano-menu) :where(nano-icon,.nano-icon){color:var(--icon-color)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)::part(trigger),:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item) [slot=close-button],:where(nano-menu,.nano-menu) nano-content-links a{--icon-color: var(--nano-color-primary-1000);color:var(--nano-color-neutral-1400);font-size:var(--font-size)}:where(nano-menu,.nano-menu) a:hover:not(:focus-visible),:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item):not([disabled]) [slot=close-button]:hover:not(:focus-visible),:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item):not([disabled])::part(trigger):hover:not(:focus-visible){--icon-color: var(--nano-color-primary-1100);color:var(--nano-color-base-1000);background-color:var(--nano-color-neutral-100)}:where(nano-menu,.nano-menu) a:active:not(:focus-visible),:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item):not([disabled]) [slot=close-button]:active:not(:focus-visible),:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item):not([disabled])::part(trigger):active:not(:focus-visible){--icon-color: var(--nano-color-primary-800);color:var(--nano-color-base-1000);background-color:var(--nano-color-neutral-200)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item) [slot=close-button]:focus-visible,:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)::part(trigger):focus-visible,:where(nano-menu,.nano-menu) a:focus-visible{--icon-color: var(--nano-color-base-0);outline:none;background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item) [slot=close-button]:focus-visible:active,:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)::part(trigger):focus-visible:active,:where(nano-menu,.nano-menu) a:focus-visible:active{background-color:var(--nano-color-primary-1200)}:where(nano-menu,.nano-menu) nano-content-links a::after{background-color:var(--icon-color)}:where(nano-menu,.nano-menu) :where(nano-dropdown,.nano-dropdown){display:contents}:where(nano-menu,.nano-menu) :where(nano-dropdown,.nano-dropdown) :where(nano-nav-item,.nano-nav-item){--padding: var(--nav-item-padding)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)::part(modal){position:absolute;min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity var(--nano-transition-x-fast) ease,transform var(--nano-transition-fast) ease;transform:translate3d(100%, 0, 0);background:var(--background)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item)::part(modal modal--open){opacity:1;transform:translate3d(0, 0, 0);transition:opacity var(--nano-transition-x-fast) ease,transform var(--nano-transition-fast) ease}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item) [slot=close-button]{padding:var(--padding);display:flex;gap:var(--nano-spacing-md);align-items:center;cursor:pointer;inline-size:100%;border-block-start:1px solid var(--nano-color-neutral-200)}:where(nano-menu,.nano-menu) :where(nano-nav-item,.nano-nav-item) [slot=close-button]::before{content:"";margin-inline-start:0;background-size:cover;inline-size:1em;block-size:1em;mask-image:var(--nano-component-icon-caret);mask-repeat:no-repeat;mask-position:center;transform-origin:center;rotate:180deg;background-color:var(--icon-color)}}@layer components{nano-icon-item{--icon-dims: var(--nano-pictogram-size-large);display:grid;grid-template-columns:1fr;justify-items:center;inline-size:100%;gap:var(--nano-spacing-md)}nano-icon-item[size=large]{--icon-dims: var(--nano-pictogram-size-x-large)}nano-icon-item:has([slot=icon]):has([slot=heading]),nano-icon-item:has([slot=icon]):has([slot=content]){grid-template-rows:repeat(2, min-content)}nano-icon-item:has([slot=icon]):has([slot=heading]):has([slot=content]){grid-template-rows:repeat(3, min-content)}nano-icon-item nano-icon,nano-icon-item .nano-icon{--icon-size: var(--icon-dims) !important}nano-icon-item a:not(p>a),nano-icon-item [slot=heading]{all:unset;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense);color:var(--nano-color-neutral-1400);text-align:center}nano-icon-item p[slot=content]{all:unset;font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-align:center}nano-icon-item [slot=icon]{color:var(--nano-color-primary-1000)}nano-icon-item[landscape]{justify-items:start;grid-template-columns:min-content 1fr !important;row-gap:var(--nano-spacing-sm)}nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]),nano-icon-item[landscape]:has([slot=icon]):has([slot=content]){grid-template-rows:min-content}nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]) [slot=heading],nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]) p[slot=content],nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) [slot=heading],nano-icon-item[landscape]:has([slot=icon]):has([slot=content]) p[slot=content]{grid-row:1;align-self:center}nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]){grid-template-rows:min-content 1fr}nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) a,nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) [slot=heading]{grid-row:1}nano-icon-item[landscape]:has([slot=icon]):has([slot=heading]):has([slot=content]) p[slot=content]{grid-row:2}nano-icon-item[landscape] nano-icon[slot=icon]{grid-column:1}nano-icon-item[landscape] [slot=icon]{grid-column:1;grid-row:1/-1}nano-icon-item[landscape] a,nano-icon-item[landscape] [slot=heading]{text-align:start;align-self:center;grid-row:1;grid-column:2}nano-icon-item[landscape] p[slot=content]{text-align:start;grid-row:2;grid-column:2}nano-icon-item a,nano-icon-item a>[slot=heading]{cursor:pointer;text-decoration:underline;color:var(--nano-color-primary-1000)}nano-icon-item a:hover{color:var(--nano-color-primary-1200)}nano-icon-item a:hover [slot=heading]{color:var(--nano-color-primary-1200)}nano-icon-item:has(a:hover) nano-icon{color:var(--nano-color-primary-1200)}}:where(nano-tab-group,.nano-tab-group)[equal-tab-size] .nano-tab{display:flex;justify-content:center;align-items:center;flex:1}:where(nano-tab-group,.nano-tab-group)[placement=start][equal-tab-size] .nano-tab{justify-content:flex-end}:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab{border-block-end:none;border-inline-end:var(--border)}:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab::part(base),:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab [part~=base]{justify-content:end}:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab::part(label),:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab [part~=label]{align-items:flex-end}:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab:not([disabled]):hover{border-color:inherit}:where(nano-tab-group,.nano-tab-group)[placement=start] .nano-tab:not([disabled])[active]{border-color:inherit}:where(nano-tab-group,.nano-tab-group)[placement=top][size=large]::part(tabs__wrapper),:where(nano-tab-group,.nano-tab-group)[placement=top][size=large] [part~=tabs__wrapper]{--scroll-btn-size: 2rem}:where(nano-tab-group,.nano-tab-group)[placement=top][size=large] .nano-tab{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense);--padding: 1.5625rem}@layer components{:where(nano-tooltip,.nano-tooltip) [slot=content],:where(nano-tooltip,.nano-tooltip) [slot=content] *{font-size:var(--nano-font-size-2xs)}:where(nano-tooltip,.nano-tooltip) ul[slot=content]{margin-block:0;padding-inline:0;margin-inline:var(--nano-spacing-md)}:where(nano-tooltip,.nano-tooltip) [slot=content] li{margin-block-end:0}}@layer components{:where(nano-table,.nano-table){--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-wrapper-max-height: 80vh;--table-wrapper-max-width: 100%;--isLtR: 1;overflow-y:clip;display:block;container-type:inline-size}:where(nano-table,.nano-table):dir(rtl){--isLtR: -1}:where(nano-table,.nano-table)[compact]:not([compact=false],[compact=auto]){--table-padding: var(--table-compact-padding)}@media(width <= 500px){:where(nano-table,.nano-table)[compact=auto]{--table-padding: var(--table-compact-padding)}}@container (width <= 500px){:where(nano-table,.nano-table)[compact=auto] .nano-table__overflow{--table-padding: var(--table-compact-padding)}}:where(nano-table,.nano-table):not([scrollable=false]){overflow-y:visible}:where(nano-table,.nano-table):not([scrollable=false]):has([sticky=start],[sticky=end]) .nano-masked-overflow{--fade-size: 0}:where(nano-table,.nano-table):not([scrollable=false]):not(.nano-table--props-ready){overflow:auto;scrollbar-width:thin;max-inline-size:var(--table-wrapper-max-width);max-block-size:var(--table-wrapper-max-height)}:where(nano-table,.nano-table):not([scrollable=false]) .nano-table__overflow{max-inline-size:var(--table-wrapper-max-width);max-block-size:var(--table-wrapper-max-height);position:relative}:where(nano-table,.nano-table):not([scrollable=false]) table{margin-block-end:var(--nano-spacing-l)}:where(nano-table,.nano-table) tr[clickable]{cursor:pointer}:where(nano-table,.nano-table) tr[clickable]:not([sticky]){position:relative}:where(nano-table,.nano-table) tr[clickable]:focus-within{--table-background: var(--nano-color-primary-50)}:where(nano-table,.nano-table) tr[clickable]:hover{--table-background: var(--nano-color-primary-75)}:where(nano-table,.nano-table) tr[clickable] input[type=checkbox]::after,:where(nano-table,.nano-table) tr[clickable] nano-checkbox::after,:where(nano-table,.nano-table) tr[clickable] a::after,:where(nano-table,.nano-table) tr[clickable] button::after{content:"";position:absolute;inset:0}:where(nano-table,.nano-table) tr[sticky]{position:sticky;container-type:scroll-state;inset-block-start:var(--sticky-top, 0)}:where(nano-table,.nano-table) tfoot tr[sticky]{inset-block-end:0}:where(nano-table,.nano-table) tfoot tr[sticky],:where(nano-table,.nano-table) thead tr[sticky]{z-index:10}:where(nano-table,.nano-table) tbody tr[sticky]{z-index:5;overflow-y:clip}@container scroll-state(stuck: top){:where(nano-table,.nano-table) tbody tr[sticky] td,:where(nano-table,.nano-table) tbody tr[sticky] th{border-block-end:1px solid var(--table-border-color-header)}}@supports not (container-type: scroll-state){:where(nano-table,.nano-table) tbody tr[sticky] td,:where(nano-table,.nano-table) tbody tr[sticky] th{border-block-end:1px solid var(--table-border-color-header)}}:where(nano-table,.nano-table) tbody tr[sticky] td[sticky],:where(nano-table,.nano-table) tbody tr[sticky] th[sticky]{overflow-y:clip}:where(nano-table,.nano-table) tbody tr[sticky] td[sticky]::after,:where(nano-table,.nano-table) tbody tr[sticky] th[sticky]::after{content:"";visibility:hidden;inline-size:10px;inset-block-start:0;block-size:var(--section-height);position:absolute}@container scroll-state(stuck: left){:where(nano-table,.nano-table) tbody tr[sticky] td[sticky]::after,:where(nano-table,.nano-table) tbody tr[sticky] th[sticky]::after{visibility:visible}}@container scroll-state(stuck: right){:where(nano-table,.nano-table) tbody tr[sticky] td[sticky]::after,:where(nano-table,.nano-table) tbody tr[sticky] th[sticky]::after{visibility:visible}}:where(nano-table,.nano-table) tbody tr[sticky] [sticky=start]::after{inset-inline-end:0;box-shadow:calc(4px*var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%)}:where(nano-table,.nano-table) tbody tr[sticky] [sticky=end]::after{inset-inline-start:0;box-shadow:calc(-4px*var(--isLtR)) -3px 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%)}@container (width <= 500px){:where(nano-table,.nano-table) .nano-table__overflow td[sticky],:where(nano-table,.nano-table) .nano-table__overflow th[sticky]{--sticky-start: 0px !important;--sticky-end: 0px !important}:where(nano-table,.nano-table) .nano-table__overflow td[sticky]:not(:first-of-type),:where(nano-table,.nano-table) .nano-table__overflow th[sticky]:not(:first-of-type){position:initial !important;z-index:initial !important}}@media(width <= 500px){:where(nano-table,.nano-table) td[sticky],:where(nano-table,.nano-table) th[sticky]{--sticky-start: 0px !important;--sticky-end: 0px !important}:where(nano-table,.nano-table) td[sticky]:not(:first-of-type),:where(nano-table,.nano-table) th[sticky]:not(:first-of-type){position:initial !important;z-index:initial !important}}:where(nano-table,.nano-table) :where(thead,tbody) td[sticky],:where(nano-table,.nano-table) th[sticky]{position:sticky;container-type:scroll-state;z-index:2}@supports not (container-type: scroll-state){:where(nano-table,.nano-table) :where(thead,tbody) td[sticky]::after,:where(nano-table,.nano-table) th[sticky]::after{content:"";position:absolute;box-shadow:14px 0 14px 0 var(--table-background);inset-inline:auto 0;block-size:calc(100% - var(--nano-spacing-md));inset-block-start:calc(var(--nano-spacing-md)/2);inline-size:var(--nano-spacing-md)}:where(nano-table,.nano-table) :where(thead,tbody) td[sticky]:is([sticky=end])::after,:where(nano-table,.nano-table) th[sticky]:is([sticky=end])::after{box-shadow:-14px 0 14px 0 var(--table-background);inset-inline:0 auto}}:where(nano-table,.nano-table) td[sticky=start],:where(nano-table,.nano-table) th[sticky=start]{inset-inline-start:var(--sticky-start, 0)}:where(nano-table,.nano-table) td[sticky=end],:where(nano-table,.nano-table) th[sticky=end]{inset-inline-end:var(--sticky-end, 0);z-index:3}@supports(container-type: scroll-state){:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=start]::after,:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=end]::after{content:"";visibility:hidden;inline-size:10px;inset-block-start:0;block-size:var(--section-height);position:absolute}@container scroll-state(stuck: left){:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=start]::after,:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=end]::after{visibility:visible}}@container scroll-state(stuck: right){:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=start]::after,:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=end]::after{visibility:visible}}:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=start]::after{inset-inline-end:0;box-shadow:calc(4px*var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%)}:where(nano-table,.nano-table) :where(thead,tbody) tr:has([sticky=start],[sticky=end]):first-of-type [sticky=end]::after{inset-inline-start:0;box-shadow:calc(-4px*var(--isLtR)) 0 4px -2px rgb(var(--nano-color-base-rgb-1000)/25%)}}}@layer components{:root{--nano-component-icon-chevron:url("data:image/svg+xml;charset=utf-8,<svg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'><g><path%20fill='white'%20d='M4.18457%2015.8496C4.06179%2015.7374%204.00044%2015.584%204.00044%2015.43C4.00044%2015.291%204.05065%2015.1521%204.15221%2015.0421L10.6195%208.00301L4.15207%200.959231C3.9378%200.727093%203.9512%200.364958%204.18443%200.151748C4.41655%20-0.0625328%204.77688%20-0.0480332%204.99114%200.183555L11.8477%207.61197C12.0508%207.83182%2012.0508%208.16767%2011.8477%208.38766L4.99114%2015.8161C4.77594%2016.046%204.41669%2016.0639%204.18457%2015.8496Z'/></g></svg>");--nano-component-icon-download:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='white'%20d='M272%2016c0-8.8-7.2-16-16-16s-16%207.2-16%2016l0%20313.4L139.3%20228.7c-6.2-6.2-16.4-6.2-22.6%200s-6.2%2016.4%200%2022.6l128%20128c6.2%206.2%2016.4%206.2%2022.6%200l128-128c6.2-6.2%206.2-16.4%200-22.6s-16.4-6.2-22.6%200L272%20329.4%20272%2016zM140.1%20320L64%20320c-35.3%200-64%2028.7-64%2064l0%2064c0%2035.3%2028.7%2064%2064%2064l384%200c35.3%200%2064-28.7%2064-64l0-64c0-35.3-28.7-64-64-64l-76.1%200-32%2032L448%20352c17.7%200%2032%2014.3%2032%2032l0%2064c0%2017.7-14.3%2032-32%2032L64%20480c-17.7%200-32-14.3-32-32l0-64c0-17.7%2014.3-32%2032-32l108.1%200-32-32zM432%20416a24%2024%200%201%200%20-48%200%2024%2024%200%201%200%2048%200z'/></svg>");--nano-component-icon-open:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='white'%20d='M336%200c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016l121.4%200L212.7%20276.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200L480%2054.6%20480%20176c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-160c0-8.8-7.2-16-16-16L336%200zM64%2032C28.7%2032%200%2060.7%200%2096L0%20448c0%2035.3%2028.7%2064%2064%2064l352%200c35.3%200%2064-28.7%2064-64l0-144c0-8.8-7.2-16-16-16s-16%207.2-16%2016l0%20144c0%2017.7-14.3%2032-32%2032L64%20480c-17.7%200-32-14.3-32-32L32%2096c0-17.7%2014.3-32%2032-32l144%200c8.8%200%2016-7.2%2016-16s-7.2-16-16-16L64%2032z'/></svg>");--nano-component-icon-check:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'><path%20d='M443.3%20100.7c6.2%206.2%206.2%2016.4%200%2022.6l-272%20272c-6.2%206.2-16.4%206.2-22.6%200l-144-144c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L160%20361.4%20420.7%20100.7c6.2-6.2%2016.4-6.2%2022.6%200z'/></svg>");--nano-component-icon-caret:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20512'><path%20d='M246.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8%2016.6-19.8%2029.6l0%20256c0%2012.9%207.8%2024.6%2019.8%2029.6s25.7%202.2%2034.9-6.9l128-128z'/></svg>")}nano-intersection-observe,nano-resize-observe,nano-global-search-results,nano-cta,nano-card,nano-tag,nano-content-links,nano-badge,nano-avatar,nano-icon-item,nano-masked-overflow,nano-table{visibility:visible !important}body:not(.nano-eager) nano-algolia-filter,body:not(.nano-eager) nano-algolia-input,body:not(.nano-eager) nano-algolia-pagination,body:not(.nano-eager) nano-algolia-results,body:not(.nano-eager) nano-details,body:not(.nano-eager) nano-accordion,body:not(.nano-eager) nano-grid-item,body:not(.nano-eager) nano-menu,body:not(.nano-eager) nano-range,body:not(.nano-eager) nano-rating,body:not(.nano-eager) nano-slide,body:not(.nano-eager) nano-slides,body:not(.nano-eager) nano-date-input,body:not(.nano-eager) nano-global-nav,body:not(.nano-eager) nano-menu-drawer,body:not(.nano-eager) nano-checkbox,body:not(.nano-eager) nano-checkbox-group,body:not(.nano-eager) nano-grid,body:not(.nano-eager) nano-option,body:not(.nano-eager) nano-algolia,body:not(.nano-eager) nano-date-picker,body:not(.nano-eager) nano-select,body:not(.nano-eager) nano-dropdown,body:not(.nano-eager) nano-nav-item,body:not(.nano-eager) nano-input,body:not(.nano-eager) nano-icon,body:not(.nano-eager) nano-tab-content,body:not(.nano-eager) nano-tab,body:not(.nano-eager) nano-hero,body:not(.nano-eager) nano-img,body:not(.nano-eager) nano-datalist,body:not(.nano-eager) nano-split-pane,body:not(.nano-eager) nano-file-upload,body:not(.nano-eager) nano-data-table,body:not(.nano-eager) nano-alert,body:not(.nano-eager) nano-dialog,body:not(.nano-eager) nano-drawer,body:not(.nano-eager) nano-footer,body:not(.nano-eager) nano-in-page-nav,body:not(.nano-eager) nano-collapsible-comparison,body:not(.nano-eager) nano-breadcrumb{visibility:hidden}body:not(.nano-eager) .hydrated{visibility:inherit}nano-alert:not(.hydrated):not([open]),nano-dialog:not(.hydrated),nano-drawer:not(.hydrated){display:none}nano-alert[open]:not(.hydrated){display:block;min-height:calc(var(--nano-pictogram-size-large) + var(--nano-spacing-md)*2)}nano-tooltip:not(.hydrated) [slot=content]{display:none}nano-animation{visibility:inherit !important}nano-dropdown{visibility:inherit !important}nano-dropdown:not(.hydrated) :not([slot=trigger]){display:none}nano-slides:not([ready]){opacity:0}nano-slide:not([ready]){opacity:0;block-size:1px;display:block}@supports(scrollbar-gutter: stable){.nano-scroll-lock{scrollbar-gutter:var(--nano-scroll-lock-gutter) !important}.nano-scroll-lock body{overflow:hidden !important}}@supports not (scrollbar-gutter: stable){.nano-scroll-lock body{padding-inline-end:var(--nano-scroll-lock-size) !important;overflow:hidden !important}}}/*# sourceMappingURL=components.css.map */

package/dist/style/components.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../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":"AACE,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,wGAEE,wCACA,2BACA,oCACA,sBACA,uBACA,iCAEA,mBAEA,kOAEE,mBAKJ,2BAEE,2BAEA,SACA,gBACA,kBACA,oBACA,mBACA,8BACA,eACA,mBACA,sBACA,sCACA,mCACA,6CACA,+BACA,gDACA,2BACA,0CACA,2BACA,gCACA,kDACA,gCAEA,uDACE,+BACA,6CAGF,uCACE,4CAGF,yCACE,6CAIF,2CACE,WACA,+BACA,+BACA,kBACA,cACA,eACA,kBACA,gCACA,wBACA,wCACA,KACE,qFAEF,kCACA,gDACA,mCAEA,gBACE,GACE,cAMN,yCACE,WACA,4BACA,sBACA,6BACA,4BACA,mCACA,2BACA,kDACA,sBACA,qBACA,wBACA,yBACA,yCAGF,0HAEE,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,qCC5WV,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,uBACA,+CACA,+BACA,2CACA,kCACA,iBACA,sBACA,+CACA,gBAEA,0BACE,uBACA,yBACA,cAGF,gBACE,4CACA,kBC7BN,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,yFC9OV,kBAGE,MCsQA,szFD1OA,8LAaE,8BAIA,y9CAyCE,kBAGF,gCACE,mBAIJ,4FAGE,aAGF,gCACE,cACA,6EAGF,2CACE,aAGF,eACE,8BAGF,cACE,8BAEA,kDACE,aAIJ,yBACE,UAGF,wBACE,UACA,eACA,cAGF,oCACE,kBACE,2DAGF,uBACE,4BAKJ,yCACE,uBACE,2DACA","file":"components.css","sourcesContent":[":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(button[disabled], button[disabled=\"true\"]):not(button[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 a,\n 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 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}","@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\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-masked-overflow,\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-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 @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/dist/style/core.css ADDED Viewed

@@ -0,0 +1 @@

+ @layer reset, tokens, themes, globals, components, utilities;@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-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-shadow-ls: inset -2px 0 4px rgb(0 0 0 / 20%);--nano-shadow-l0: 0 0 4px rgb(0 0 0 / 25%);--nano-shadow-l1: 0 2px 5px rgb(0 0 0 / 15%);--nano-shadow-l2: 0 4px 10px rgb(0 0 0 / 15%);--nano-shadow-l3: 0 8px 20px rgb(0 0 0 / 20%);--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("../nano-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("../nano-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("../nano-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:106%;ascent-override:107%;descent-override:26%;line-gap-override:4%}@font-face{font-display:swap;font-family:"Noto Sans SC";font-style:normal;font-weight:300;src:url("../nano-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("../nano-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("../nano-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:106%;ascent-override:107%;descent-override:26%;line-gap-override:4%}@font-face{font-display:swap;font-family:"Noto Sans";font-style:normal;font-weight:300;src:url("../nano-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("../nano-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("../nano-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("../nano-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("../nano-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("../nano-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:106%;ascent-override:107%;descent-override:26%;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:flex;flex-direction:column}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-base-1000);color:var(--nano-color-base-0);padding:var(--nano-spacing-md)}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}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{.hero{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-3xl);line-height:var(--nano-line-height-denser)}.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)}.text-2xl{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-2xl);line-height:var(--nano-line-height-denser)}.text-xl{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.text-lg{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}.text-md{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.text-normal{font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.text-sm,.text-small{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.text-xs{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.image-landscape{aspect-ratio:var(--nano-image-ratio-landscape);object-fit:cover}.image-square{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover}.image-portrait{aspect-ratio:var(--nano-image-ratio-portrait);object-fit:cover}.avatar{aspect-ratio:var(--nano-image-ratio-square);object-fit:cover;border-radius:var(--nano-border-radius-circle)}.content-divider{block-size:4px;background-color:var(--nano-color-neutral-100)}.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 */