@area17/a17-tailwind-plugins/docs/tailwind.css

A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies

/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--spacing:1px;--font-weight-bold:700;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--breakpoint:"xs";--container-width:unset;--inner-gutter:10px;--outer-gutter:20px;--grid-columns:4;--env:"dev";--grid-column-bg:#7fffff40}@media (min-width:544px){:root{--breakpoint:"sm";--container-width:unset;--inner-gutter:15px;--outer-gutter:30px;--grid-columns:4}}@media (min-width:650px){:root{--breakpoint:"md";--container-width:unset;--inner-gutter:20px;--outer-gutter:40px;--grid-columns:8}}@media (min-width:990px){:root{--breakpoint:"lg";--container-width:unset;--inner-gutter:30px;--outer-gutter:40px;--grid-columns:12}}@media (min-width:1300px){:root{--breakpoint:"xl";--container-width:unset;--inner-gutter:40px;--outer-gutter:40px;--grid-columns:12}}@media (min-width:1520px){:root{--breakpoint:"xxl";--container-width:1440px;--inner-gutter:40px;--outer-gutter:0px;--grid-columns:12}}:root{--color-white:#fff;--color-grey-3:#f8f8f8;--color-grey-5:#f2f2f2;--color-grey-10:#e6e6e6;--color-grey-15:#d9d9d9;--color-grey-30:#b3b3b3;--color-grey-54:#757575;--color-grey-90:#1a1a1a;--color-black:#000;--color-blue-01:#0a152b;--color-blue-02:#001f5c;--color-blue-03:#004f91;--color-blue-04:#313bfb;--color-blue-05:#81eef3;--color-blue-06:#add8e6;--color-red-01:red;--font-sans:SuisseIntl,Helvetica,Arial,sans-serif;--font-serif:"Times New Roman",Georgia,serif;--font-mono:"Lucida Console",Courier,monospace;--f-h1-font-family:var(--font-sans);--f-h1-font-weight:500;--f-h1-font-size:2rem;--f-h1-line-height:1.2;--f-h1-letter-spacing:-.02em;--f-h1--moz-osx-font-smoothing:grayscale;--f-h1--webkit-font-smoothing:antialiased;--f-h1---bold-weight:500;--f-h2-font-family:var(--font-sans);--f-h2-font-weight:500;--f-h2-font-size:1.25rem;--f-h2-line-height:1.2;--f-h2-letter-spacing:-.02em;--f-h2--moz-osx-font-smoothing:grayscale;--f-h2--webkit-font-smoothing:antialiased;--f-h2---bold-weight:500;--f-h3-font-family:var(--font-sans);--f-h3-font-weight:500;--f-h3-font-size:1rem;--f-h3-line-height:1.2;--f-h3-letter-spacing:-.02em;--f-h3--moz-osx-font-smoothing:grayscale;--f-h3--webkit-font-smoothing:antialiased;--f-h3---bold-weight:500;--f-h4-font-family:var(--font-sans);--f-h4-font-weight:600;--f-h4-font-size:.875rem;--f-h4-line-height:1.2;--f-h4-letter-spacing:-.02em;--f-h4--moz-osx-font-smoothing:grayscale;--f-h4--webkit-font-smoothing:antialiased;--f-h4---bold-weight:600;--f-body-font-family:var(--font-sans);--f-body-font-size:.875rem;--f-body-line-height:1.7;--f-body--moz-osx-font-smoothing:grayscale;--f-body--webkit-font-smoothing:antialiased;--f-body---bold-weight:600;--f-ui-font-family:var(--font-sans);--f-ui-font-size:.75rem;--f-ui-line-height:1.2;--f-ui-font-weight:400;--f-code-font-family:var(--font-mono);--f-code-font-size:.875rem;--f-code-line-height:1.2;--f-code-font-weight:400}@media (min-width:650px){:root{--f-h1-font-size:2.25rem;--f-h2-font-size:1.5rem;--f-h3-font-size:1.25rem;--f-h4-font-size:1rem;--f-body-font-size:1rem}}@media (min-width:990px){:root{--f-h1-font-size:3rem;--f-h2-font-size:1.75rem}}:root{--spacing-outer-1:4rem;--spacing-inner-1:1.5rem;--spacing-inner-2:1rem}@media (min-width:650px){:root{--spacing-inner-1:2.5rem;--spacing-inner-2:1.5rem}}@media (min-width:990px){:root{--spacing-outer-1:6rem;--spacing-inner-1:4rem;--spacing-inner-2:2rem}}}@layer components{.show-grid{--grid-column-bg:#0000000d;position:relative}.show-grid:after{z-index:1;width:calc(var(--container-width,100%) - (2*var(--outer-gutter,0)));background:repeating-linear-gradient(90deg,var(--grid-column-bg),var(--grid-column-bg)calc((100% - (((var(--grid-columns) - 1)*var(--inner-gutter))))/var(--grid-columns)),#0000 calc((100% - (((var(--grid-columns) - 1)*var(--inner-gutter))))/var(--grid-columns)),#0000 calc((100% - (((var(--grid-columns) - 1)*var(--inner-gutter))))/var(--grid-columns) + var(--inner-gutter)));pointer-events:none;--tw-content:"";content:var(--tw-content);inset-inline:0;width:100%;height:100%;margin:0 auto;position:absolute;top:0;bottom:0}.blockquote{background-color:var(--color-grey-5);padding-block:calc(var(--spacing)*20)}.blockquote blockquote{padding-inline:calc(var(--spacing)*20);display:block}@media (min-width:650px){.blockquote blockquote{padding-inline:calc(var(--spacing)*40)}}.blockquote blockquote p{font-style:italic}.blockquote blockquote p:first-child{margin-top:calc(var(--spacing)*0);position:relative}.blockquote blockquote p:first-child:before{content:open-quote;top:calc(var(--spacing)*0);right:100%;left:calc(var(--spacing)*-8);position:absolute}.blockquote blockquote p:last-child:after{content:close-quote}.blockquote figcaption{margin-top:calc(var(--spacing)*8);padding-inline:calc(var(--spacing)*20);display:block}@media (min-width:650px){.blockquote figcaption{padding-inline:calc(var(--spacing)*40)}}.blockquote cite{font-style:normal}.blockquote cite:before{content:"—";margin-right:calc(var(--spacing)*8)}.code-example{background-color:var(--color-grey-90);display:block}.code-example .code-example-filename{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-blue-05);padding-inline:calc(var(--spacing)*20);padding-block:calc(var(--spacing)*12);font-family:var(--f-ui-font-family);font-weight:var(--f-ui-font-weight);font-size:var(--f-ui-font-size);line-height:var(--f-ui-line-height);letter-spacing:var(--f-ui-letter-spacing);-moz-osx-font-smoothing:var(--f-ui--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-ui--webkit-font-smoothing);color:var(--color-white);min-width:160px;display:inline-block}.code-example .code-example-filename b,.code-example .code-example-filename strong{font-weight:var(--f-ui---bold-weight,bold)}.code-example .code-example-code{background-color:var(--color-grey-90);font-family:var(--f-code-font-family);font-weight:var(--f-code-font-weight);font-size:var(--f-code-font-size);line-height:var(--f-code-line-height);letter-spacing:var(--f-code-letter-spacing);-moz-osx-font-smoothing:var(--f-code--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-code--webkit-font-smoothing);color:var(--color-grey-3);display:block}.code-example .code-example-code b,.code-example .code-example-code strong{font-weight:var(--f-code---bold-weight,bold)}.code-example .code-example-code code{max-height:calc(var(--spacing)*600);background-color:var(--color-grey-90);scrollbar-color:var(--grey-54)var(--grey-90);scrollbar-width:thin;overflow:auto}.code-example .code-example-code code::-webkit-scrollbar{width:8px;height:8px}.code-example .code-example-code code::-webkit-scrollbar-track{background:var(--grey-90)}.code-example .code-example-code code::-webkit-scrollbar-thumb{background:var(--grey-54);width:8px;height:8px}.copy h2{font-family:var(--f-h2-font-family);font-weight:var(--f-h2-font-weight);font-size:var(--f-h2-font-size);line-height:var(--f-h2-line-height);letter-spacing:var(--f-h2-letter-spacing);-moz-osx-font-smoothing:var(--f-h2--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-h2--webkit-font-smoothing)}.copy h2 b,.copy h2 strong{font-weight:var(--f-h2---bold-weight,bold)}.copy h2:not(:first-child){margin-top:calc(var(--spacing)*56);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-grey-30);padding-top:calc(var(--spacing)*48)}.copy h3{margin-top:calc(var(--spacing)*40);font-family:var(--f-h3-font-family);font-weight:var(--f-h3-font-weight);font-size:var(--f-h3-font-size);line-height:var(--f-h3-line-height);letter-spacing:var(--f-h3-letter-spacing);-moz-osx-font-smoothing:var(--f-h3--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-h3--webkit-font-smoothing)}.copy h3 b,.copy h3 strong{font-weight:var(--f-h3---bold-weight,bold)}.copy h4{margin-top:calc(var(--spacing)*40);font-family:var(--f-h4-font-family);font-weight:var(--f-h4-font-weight);font-size:var(--f-h4-font-size);line-height:var(--f-h4-line-height);letter-spacing:var(--f-h4-letter-spacing);-moz-osx-font-smoothing:var(--f-h4--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-h4--webkit-font-smoothing)}.copy h4 b,.copy h4 strong{font-weight:var(--f-h4---bold-weight,bold)}.copy p{margin-top:calc(var(--spacing)*20);font-family:var(--f-body-font-family);font-weight:var(--f-body-font-weight);font-size:var(--f-body-font-size);line-height:var(--f-body-line-height);letter-spacing:var(--f-body-letter-spacing);-moz-osx-font-smoothing:var(--f-body--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-body--webkit-font-smoothing)}.copy p b,.copy p strong{font-weight:var(--f-body---bold-weight,bold)}.copy p:first-child{margin-top:calc(var(--spacing)*0)}.copy ul{margin-top:calc(var(--spacing)*20);padding-left:calc(var(--spacing)*16);font-family:var(--f-body-font-family);font-weight:var(--f-body-font-weight);font-size:var(--f-body-font-size);line-height:var(--f-body-line-height);letter-spacing:var(--f-body-letter-spacing);-moz-osx-font-smoothing:var(--f-body--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-body--webkit-font-smoothing);list-style-type:disc}.copy ul b,.copy ul strong{font-weight:var(--f-body---bold-weight,bold)}.copy ul ul{margin-top:calc(var(--spacing)*0)}.copy ol{margin-top:calc(var(--spacing)*20);padding-left:calc(var(--spacing)*16);font-family:var(--f-body-font-family);font-weight:var(--f-body-font-weight);font-size:var(--f-body-font-size);line-height:var(--f-body-line-height);letter-spacing:var(--f-body-letter-spacing);-moz-osx-font-smoothing:var(--f-body--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-body--webkit-font-smoothing);list-style-type:decimal}.copy ol b,.copy ol strong{font-weight:var(--f-body---bold-weight,bold)}.copy .code-example{margin-top:calc(var(--spacing)*20)}.copy code:not([class]){background-color:var(--color-white);padding-inline:calc(var(--spacing)*8);padding-top:calc(var(--spacing)*4);padding-bottom:calc(var(--spacing)*2);font-family:var(--f-code-font-family);font-weight:var(--f-code-font-weight);font-size:var(--f-code-font-size);line-height:var(--f-code-line-height);letter-spacing:var(--f-code-letter-spacing);-moz-osx-font-smoothing:var(--f-code--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-code--webkit-font-smoothing);color:var(--color-black)}.copy code:not([class]) b,.copy code:not([class]) strong{font-weight:var(--f-code---bold-weight,bold)}.copy pre:not([class]){margin-top:calc(var(--spacing)*20);max-height:calc(var(--spacing)*400);font-family:var(--f-code-font-family);font-weight:var(--f-code-font-weight);font-size:var(--f-code-font-size);line-height:var(--f-code-line-height);letter-spacing:var(--f-code-letter-spacing);-moz-osx-font-smoothing:var(--f-code--moz-osx-font-smoothing);-webkit-font-smoothing:var(--f-code--webkit-font-smoothing);display:block;overflow-y:scroll}.copy pre:not([class]) b,.copy pre:not([class]) strong{font-weight:var(--f-code---bold-weight,bold)}.copy pre:not([class]) code:not([class]){padding:calc(var(--spacing)*8);display:block}.copy a{color:var(--color-blue-03);text-decoration-line:underline}.copy a:hover,.copy a:focus{color:var(--color-grey-90)}.copy hr{margin-block:calc(var(--spacing)*40);border-color:var(--color-grey-30)}.copy .blockquote{margin-top:calc(var(--spacing)*20)}@media (min-width:768px){.copy>:not(.code-example,h2,hr){max-width:80%}}@media (min-width:1024px){.copy>:not(.code-example,h2,hr){max-width:60%}}.copy table{margin-top:calc(var(--spacing)*20)}.copy th,.copy td{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--color-grey-30);padding-inline:calc(var(--spacing)*10);padding-bottom:calc(var(--spacing)*4)}.copy th:first-child,.copy td:first-child{border-left-style:var(--tw-border-style);border-left-width:0;padding-inline-start:calc(var(--spacing)*0)}.copy th:last-child,.copy td:last-child{padding-inline-end:calc(var(--spacing)*0)}}@layer utilities{.dev-tools-grid{z-index:1;width:calc(var(--container-width,100%) - (2*var(--outer-gutter,0)));background:repeating-linear-gradient(90deg,var(--grid-column-bg),var(--grid-column-bg)calc((100% - (((var(--grid-columns) - 1)*var(--inner-gutter))))/var(--grid-columns)),#0000 calc((100% - (((var(--grid-columns) - 1)*var(--inner-gutter))))/var(--grid-columns)),#0000 calc((100% - (((var(--grid-columns) - 1)*var(--inner-gutter))))/var(--grid-columns) + var(--inner-gutter)));pointer-events:none;inset-inline:0;height:100%;margin:0 auto;position:fixed;top:0;bottom:0}.grid-line-yfull>*{position:relative}.grid-line-yfull>:before,.grid-line-yfull>:after{z-index:0;pointer-events:none;position:absolute}.grid-line-yfull>:after{content:"";inset-inline-start:0;inset-inline-end:calc(var(--inner-gutter)/-2);top:var(--gridline-y-top,calc(var(--inner-gutter)/-1));border-inline-start:0 solid #0000;border-inline-end:var(--gridline-y-width,0)solid var(--gridline-y-color,transparent);bottom:0}.grid-line-yfull.grid-line-x>:after,.grid-line-yfull.grid-line-xfull>:after{inset-inline-start:0;inset-inline-end:calc(var(--inner-gutter)/-2);top:var(--gridline-y-top,calc(var(--inner-gutter)/-2));bottom:var(--gridline-y-bottom,calc(var(--inner-gutter)/-2));border-inline-start:0 solid #0000;border-inline-end:var(--gridline-y-width,0)solid var(--gridline-y-color,transparent)}.grid-line-x>*{position:relative}.grid-line-x>:before,.grid-line-x>:after{z-index:0;pointer-events:none;position:absolute}.grid-line-x>:before{content:"";inset-inline-start:var(--gridline-x-start,0);inset-inline-end:var(--gridline-x-end,0);top:0;bottom:var(--gridline-x-bottom,calc(var(--inner-gutter)/-2));border-top:0 solid #0000;border-bottom:var(--gridline-x-width,0)solid var(--gridline-x-color,transparent)}.grid-line-xfull>*{position:relative}.grid-line-xfull>:before,.grid-line-xfull>:after{z-index:0;pointer-events:none;position:absolute}.grid-line-xfull>:before{content:"";inset-inline-start:var(--gridline-x-start,calc(var(--inner-gutter)/-2));inset-inline-end:var(--gridline-x-end,calc(var(--inner-gutter)/-2));top:0;bottom:var(--gridline-x-bottom,calc(var(--inner-gutter)/-2));border-top:0 solid #0000;border-bottom:var(--gridline-x-width,0)solid var(--gridline-x-color,transparent)}.grid-line-y>*{position:relative}.grid-line-y>:before,.grid-line-y>:after{z-index:0;pointer-events:none;position:absolute}.grid-line-y>:after{content:"";border-inline-start:0 solid #0000;border-inline-end:var(--gridline-y-width,0)solid var(--gridline-y-color,transparent);inset-inline-start:0;inset-inline-end:calc(var(--inner-gutter)/-2);top:0;bottom:0}.keyline-l-primary{--keyline-l-color:var(--color-grey-90);--keyline-r-color:transparent;position:relative}.keyline-l-primary:before{content:"";z-index:0;border-left:1px solid var(--keyline-l-color,transparent);border-right:1px solid var(--keyline-r-color,transparent);pointer-events:none;inset-inline-start:calc(var(--inner-gutter)/-2 - 1px);inset-inline-end:calc(var(--inner-gutter)/-2);position:absolute;top:0;bottom:0}.keyline-r-primary{--keyline-l-color:transparent;--keyline-r-color:var(--color-grey-90);position:relative}.keyline-r-primary:before{content:"";z-index:0;border-left:1px solid var(--keyline-l-color,transparent);border-right:1px solid var(--keyline-r-color,transparent);pointer-events:none;inset-inline-start:calc(var(--inner-gutter)/-2 - 1px);inset-inline-end:calc(var(--inner-gutter)/-2);position:absolute;top:0;bottom:0}.background-fill{--background-fill-bg:inherit;position:relative}.background-fill:before{content:"";z-index:-1;background-color:var(--background-fill-bg,inherit);pointer-events:none;inset-inline-start:50%;width:100vw;margin-inline-start:-50vw;position:absolute;top:0;bottom:0}.background-fill-accent{--background-fill-bg:var(--color-blue-03);position:relative}.background-fill-accent:before{content:"";z-index:-1;background-color:var(--background-fill-bg,inherit);pointer-events:none;inset-inline-start:50%;width:100vw;margin-inline-start:-50vw;position:absolute;top:0;bottom:0}.background-fill-header{--background-fill-bg:var(--color-grey-10);position:relative}.background-fill-header:before{content:"";z-index:-1;background-color:var(--background-fill-bg,inherit);pointer-events:none;inset-inline-start:50%;width:100vw;margin-inline-start:-50vw;position:absolute;top:0;bottom:0}.stroke-full-top{--stroke-full-thickness:.0625em;--stroke-full-style:solid;--stroke-full-color:inherit;position:relative}.stroke-full-top:after{content:"";z-index:-1;pointer-events:none;border-bottom:var(--stroke-full-thickness,.0625em)var(--stroke-full-style,solid)var(--stroke-full-color,inherit);inset-inline-start:50%;width:100vw;margin-inline-start:-50vw;position:absolute;top:0;bottom:100%}.stroke-full-bottom{--stroke-full-thickness:.0625em;--stroke-full-style:solid;--stroke-full-color:inherit;position:relative}.stroke-full-bottom:after{content:"";z-index:-1;pointer-events:none;border-top:var(--stroke-full-thickness,.0625em)var(--stroke-full-style,solid)var(--stroke-full-color,inherit);inset-inline-start:50%;width:100vw;margin-inline-start:-50vw;position:absolute;top:100%}.dev-tools{z-index:2147483647;inset-inline-start:0;font-size:0;position:fixed;bottom:0}.dev-tools:before{content:var(--breakpoint)" • " var(--env);z-index:2;color:#fff;white-space:nowrap;pointer-events:none;inset-inline-start:0;background:green;padding:4px 5px;font:12px/1 sans-serif;position:absolute;bottom:100%}.grid-line-x-0>*{position:relative}.grid-line-x-0>:before,.grid-line-x-0>:after{z-index:0;pointer-events:none;position:absolute}.grid-line-x-0>:before{content:none}.grid-line-y-0>*{position:relative}.grid-line-y-0>:before,.grid-line-y-0>:after{z-index:0;pointer-events:none;position:absolute}.grid-line-y-0>:after{content:none}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.dev-tools-toggle{z-index:2;color:#0000;width:30px;height:30px;font:0/0 a;appearance:none;cursor:pointer;background:#000;border:0;position:relative}.dev-tools-toggle:before,.dev-tools-toggle:after{content:"";inset-inline-start:8px;border-inline:1px solid #fff;width:5px;height:10px;position:absolute;top:10px}.dev-tools-toggle:after{inset-inline-start:16px}.container[class]{width:calc(var(--container-width,100%) - (2*var(--breakout-container-outer-gutter,var(--container-outer-gutter,var(--outer-gutter,0)))));margin-left:auto;margin-right:auto}.container[class]>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.container[class]>.breakout[class],.breakout[class],.container[class]>.breakout[class]{--breakout-outer-gutter:max(var(--outer-gutter),calc((100% - var(--container-width,100%))/2));--breakout-container-outer-gutter:var(--outer-gutter);width:calc(100vw - var(--scrollbar-visible-width,0px));margin-inline-start:calc((100vw - var(--scrollbar-visible-width,0px))/-2);position:relative;inset-inline-start:50%}.ratio{--ratio:100%;display:block;position:relative;overflow:hidden}.ratio:before{content:"";width:100%;height:0;padding-bottom:var(--ratio);display:block}.ratio>[class*=ratio-content]{width:100%;height:100%;position:absolute;inset:0}.ratio-free:before,.ratio-free:after{content:unset}.ratio-free>[class*=ratio-content]{width:auto;height:auto;position:static;inset:auto}.ratio-free>[class*=ratio-content][class*=w-full]{width:100%}.ratio-free>[class*=ratio-content][class*=h-auto]{height:auto}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.grid-line-yfull.grid-line-x>:after,.grid-line-yfull.grid-line-xfull>:after{inset-inline-start:0;inset-inline-end:calc(var(--inner-gutter)/-2);top:var(--gridline-y-top,calc(var(--inner-gutter)/-2));bottom:var(--gridline-y-bottom,calc(var(--inner-gutter)/-2));border-inline-start:0 solid #0000;border-inline-end:var(--gridline-y-width,0)solid var(--gridline-y-color,transparent)}.start-cols-2{inset-inline-start:calc(((((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.end-cols-4{inset-inline-end:calc(((((4/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (4/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.top-0{top:calc(var(--spacing)*0)}.top-40{top:calc(var(--spacing)*40)}.top-56{top:calc(var(--spacing)*56)}.top-60{top:calc(var(--spacing)*60)}.top-\[var\(--offset\)\]{top:var(--offset)}.right-0{right:calc(var(--spacing)*0)}.right-full{right:100%}.-left-8{left:calc(var(--spacing)*-8)}.-left-99999{left:calc(var(--spacing)*-99999)}.left-0{left:calc(var(--spacing)*0)}.left-\[-99999px\]{left:-99999px}.left-cols-1{left:calc(((((1/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (1/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.left-cols-1\/3{left:calc(((33.333% - (var(--inner-gutter)*max(.666,var(--cols-container,0)))) + var(--inner-gutter)))}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1/span 1}.grid-col-span-2{--container-grid-columns:2;grid-column:span 2/span 2}.grid-col-span-3{--container-grid-columns:3;grid-column:span 3/span 3}.grid-col-span-6{--container-grid-columns:6;grid-column:span 6/span 6}.grid-col-span-8{--container-grid-columns:8;grid-column:span 8/span 8}.grid-col-span-9{--container-grid-columns:9;grid-column:span 9/span 9}.grid-col-start-1{grid-column-start:1}.grid-col-start-4{grid-column-start:4}.grid-col-end-1{grid-column-end:1}.grid-col-end-13{grid-column-end:13}.row-span-3{grid-row:span 3/span 3}.row-span-full{grid-row:1/-1}.row-end-3{grid-row-end:3}.ratio-expandable:before{float:left;width:1px;margin-inline-start:-1px}.ratio-expandable:after{content:"";clear:both;display:table}.container{width:100%}@media (min-width:0){.container{max-width:0}}@media (min-width:544px){.container{max-width:544px}}@media (min-width:650px){.container{max-width:650px}}@media (min-width:990px){.container{max-width:990px}}@media (min-width:1300px){.container{max-width:1300px}}@media (min-width:1520px){.container{max-width:1520px}}.m-0{margin:calc(var(--spacing)*0)}.mx-40{margin-inline:calc(var(--spacing)*40)}.mx-auto{margin-inline:auto}.mx-cols-1{margin-inline:calc(((((1/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (1/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.mx-cols-3{margin-inline:calc(((((3/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (3/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.mx-outer-1{margin-inline:var(--spacing-outer-1)}.my-40{margin-block:calc(var(--spacing)*40)}.ms-0{margin-inline-start:calc(var(--spacing)*0)}.ms-cols-2{margin-inline-start:calc(((((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.me-cols-2{margin-inline-end:calc(((((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.-mt-\(--spacing-outer-1\){margin-top:calc(var(--spacing-outer-1)*-1)}.mt-\(--spacing-outer-1\){margin-top:var(--spacing-outer-1)}.mt-0{margin-top:calc(var(--spacing)*0)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-16{margin-top:calc(var(--spacing)*16)}.mt-20{margin-top:calc(var(--spacing)*20)}.mt-40{margin-top:calc(var(--spacing)*40)}.mt-56{margin-top:calc(var(--spacing)*56)}.mt-60{margin-top:calc(var(--spacing)*60)}.mt-outer-1{margin-top:var(--spacing-outer-1)}.mr-8{margin-right:calc(var(--spacing)*8)}.mr-cols-1{margin-right:calc(((((1/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (1/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.mr-cols-2{margin-right:calc(((((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.mr-cols-vw-2{margin-right:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*2) + (1*var(--inner-gutter)))}.mb-16{margin-bottom:calc(var(--spacing)*16)}.mb-60{margin-bottom:calc(var(--spacing)*60)}.cols-container{margin-left:calc(var(--inner-gutter)*-1);flex-flow:wrap;display:flex}.cols-container>[class*=-cols]{--cols-container:1;margin-left:var(--inner-gutter)}.cols-container>.ml-0,.cols-container>.ms-0{margin-left:0}.ml-0{margin-left:calc(var(--spacing)*0)}.ml-16{margin-left:calc(var(--spacing)*16)}.ml-auto{margin-left:auto}.ml-cols-2{margin-left:calc(((((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.ml-cols-2\/3{margin-left:calc(((66.666% - (var(--inner-gutter)*max(.333,var(--cols-container,0)))) + var(--inner-gutter)))}.ml-cols-no-gutter-2{margin-left:calc(((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.ml-cols-vw-2{margin-left:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*2) + (1*var(--inner-gutter)))}.full-bleed-scroller-reset{display:unset;flex-flow:unset;flex-wrap:unset;overflow-x:unset}.full-bleed-scroller-reset:before,.full-bleed-scroller-reset:after{content:none;flex:unset;width:unset}.full-bleed-scroller{gap:var(--inner-gutter);flex-flow:row;display:flex;overflow:auto hidden}.full-bleed-scroller:before,.full-bleed-scroller:after{content:"";width:calc(var(--breakout-outer-gutter,var(--outer-gutter,0px)) - var(--inner-gutter,0px));flex:none}.grid-layout{grid-template-columns:repeat(var(--container-grid-columns,var(--grid-columns)),1fr);grid-gap:var(--inner-gutter);display:grid}.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-none::-webkit-scrollbar{display:none}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.scrollbar-thin{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-thin::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-thin::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-thin::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-thin::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-thin-collapse{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-thin-collapse::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-thin-collapse::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-thin-collapse::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-thin-collapse::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-thin-collapse::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-thumb-bg-column-alt{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-thumb-bg-column-alt::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-thumb-bg-column-alt::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-thumb-bg-column-alt::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-thumb-bg-column-alt::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-thumb-bg-column-alt::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-thumb-primary{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-thumb-primary::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-thumb-primary::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-thumb-primary::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-thumb-primary::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-thumb-primary::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-thumb-red-01{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-thumb-red-01::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-thumb-red-01::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-thumb-red-01::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-thumb-red-01::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-thumb-red-01::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-track-bg-column{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-track-bg-column::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-track-bg-column::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-track-bg-column::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-track-bg-column::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-track-bg-column::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-track-grey-15{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-track-grey-15::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-track-grey-15::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-track-grey-15::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-track-grey-15::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-track-grey-15::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.scrollbar-track-primary{--scrollbar-bg:#fafafa;--scrollbar-fg:#c1c1c1;--scrollbar-border:#e8e8e8;scrollbar-color:var(--scrollbar-fg)var(--scrollbar-bg)}.scrollbar-track-primary::-webkit-scrollbar{width:var(--scrollbar-width,unset);height:var(--scrollbar-width,unset)}.scrollbar-track-primary::-webkit-scrollbar-track{background:var(--scrollbar-bg)}.scrollbar-track-primary::-webkit-scrollbar-track:horizontal{border-block-start:1px solid var(--scrollbar-border);border-block-end:1px solid var(--scrollbar-border)}.scrollbar-track-primary::-webkit-scrollbar-track:vertical{border-inline-start:1px solid var(--scrollbar-border);border-inline-end:1px solid var(--scrollbar-border)}.scrollbar-track-primary::-webkit-scrollbar-thumb{background:var(--scrollbar-fg);border:var(--scrollbar-padding,4px)solid transparent;background-clip:content-box;border-radius:20px}.h-0{height:calc(var(--spacing)*0)}.h-1{height:calc(var(--spacing)*1)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-28{height:calc(var(--spacing)*28)}.h-32{height:calc(var(--spacing)*32)}.h-36{height:calc(var(--spacing)*36)}.h-40{height:calc(var(--spacing)*40)}.h-44{height:calc(var(--spacing)*44)}.h-48{height:calc(var(--spacing)*48)}.h-52{height:calc(var(--spacing)*52)}.h-56{height:calc(var(--spacing)*56)}.h-60{height:calc(var(--spacing)*60)}.h-64{height:calc(var(--spacing)*64)}.h-68{height:calc(var(--spacing)*68)}.h-72{height:calc(var(--spacing)*72)}.h-76{height:calc(var(--spacing)*76)}.h-80{height:calc(var(--spacing)*80)}.h-84{height:calc(var(--spacing)*84)}.h-88{height:calc(var(--spacing)*88)}.h-92{height:calc(var(--spacing)*92)}.h-96{height:calc(var(--spacing)*96)}.h-100{height:calc(var(--spacing)*100)}.h-120{height:calc(var(--spacing)*120)}.h-400{height:calc(var(--spacing)*400)}.h-600{height:calc(var(--spacing)*600)}.h-auto{height:auto}.max-h-400{max-height:calc(var(--spacing)*400)}.max-h-600{max-height:calc(var(--spacing)*600)}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-40{min-height:calc(var(--spacing)*40)}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-1{width:calc(var(--spacing)*1)}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-24{width:calc(var(--spacing)*24)}.w-28{width:calc(var(--spacing)*28)}.w-32{width:calc(var(--spacing)*32)}.w-36{width:calc(var(--spacing)*36)}.w-40{width:calc(var(--spacing)*40)}.w-44{width:calc(var(--spacing)*44)}.w-48{width:calc(var(--spacing)*48)}.w-52{width:calc(var(--spacing)*52)}.w-56{width:calc(var(--spacing)*56)}.w-60{width:calc(var(--spacing)*60)}.w-64{width:calc(var(--spacing)*64)}.w-68{width:calc(var(--spacing)*68)}.w-72{width:calc(var(--spacing)*72)}.w-76{width:calc(var(--spacing)*76)}.w-80{width:calc(var(--spacing)*80)}.w-84{width:calc(var(--spacing)*84)}.w-88{width:calc(var(--spacing)*88)}.w-92{width:calc(var(--spacing)*92)}.w-96{width:calc(var(--spacing)*96)}.w-100{width:calc(var(--spacing)*100)}.w-400{width:calc(var(--spacing)*400)}.w-600{width:calc(var(--spacing)*600)}.w-cols-1{width:calc(((1/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (1/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-1\/2{width:calc(50% - (var(--inner-gutter)*max(.5,var(--cols-container,0))))}.w-cols-1\/3{width:calc(33.333% - (var(--inner-gutter)*max(.666,var(--cols-container,0))))}.w-cols-1\/4{width:calc(25% - (var(--inner-gutter)*max(.75,var(--cols-container,0))))}.w-cols-2{width:calc(((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-2\/3{width:calc(66.666% - (var(--inner-gutter)*max(.333,var(--cols-container,0))))}.w-cols-3{width:calc(((3/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (3/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-3\/4{width:calc(75% - (var(--inner-gutter)*max(.25,var(--cols-container,0))))}.w-cols-4{width:calc(((4/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (4/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-5{width:calc(((5/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (5/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-6{width:calc(((6/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (6/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-7{width:calc(((7/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (7/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-8{width:calc(((8/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (8/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-9{width:calc(((9/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (9/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-10{width:calc(((10/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (10/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-11{width:calc(((11/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (11/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-12{width:calc(((12/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (12/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter))))}.w-cols-vw-1{width:calc(((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns))))}.w-cols-vw-2{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*2) + (1*var(--inner-gutter)))}.w-cols-vw-3{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*3) + (2*var(--inner-gutter)))}.w-cols-vw-4{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*4) + (3*var(--inner-gutter)))}.w-cols-vw-5{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*5) + (4*var(--inner-gutter)))}.w-cols-vw-6{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*6) + (5*var(--inner-gutter)))}.w-cols-vw-7{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*7) + (6*var(--inner-gutter)))}.w-cols-vw-8{width:calc((((var(--container-width,100vw - var(--scrollbar-visible-width,0px)) - (((var(--grid-columns) - 1)*var(--inner-gutter)) + (2*var(--outer-gutter))))/(var(--grid-columns)))*8) + (7*var(--inner-gutter)))}.w-full{width:100%}.breakout[class]>.w-outer-gutter{width:var(--breakout-outer-gutter)}.\!max-w-full{max-width:100%!important}.container{max-width:100%}.max-w-400{max-width:calc(var(--spacing)*400)}.max-w-full{max-width:100%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.appearance-none{appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-gutter{grid-gap:var(--inner-gutter);gap:var(--inner-gutter)}.gap-x-gutter{grid-column-gap:var(--inner-gutter);column-gap:var(--inner-gutter)}.gap-x-0{column-gap:calc(var(--spacing)*0)}.gap-y-gutter{grid-row-gap:var(--inner-gutter);row-gap:var(--inner-gutter)}.gap-y-20{row-gap:calc(var(--spacing)*20)}.gap-y-48{row-gap:calc(var(--spacing)*48)}.gap-y-80{row-gap:calc(var(--spacing)*80)}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-scroll{overflow-y:scroll}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-l-1{border-left-style:var(--tw-border-style);border-left-width:1px}.border-code-example-filename{border-color:var(--color-blue-05)}.border-primary{border-color:var(--color-grey-90)}.border-secondary{border-color:var(--color-grey-30)}.border-tertiary{border-color:var(--color-grey-54)}.border-t-secondary{border-top-color:var(--color-grey-30)}.bg-accent{background-color:var(--color-blue-03)}.bg-banner{background-color:var(--color-grey-90)}.bg-code{background-color:var(--color-white)}.bg-code-example{background-color:var(--color-grey-90)}.bg-column{background-color:var(--color-blue-05)}.bg-column-alt{background-color:var(--color-blue-04)}.bg-container-demo{background-color:var(--color-white)}.bg-header,.bg-primary{background-color:var(--color-grey-10)}.bg-quote{background-color:var(--color-grey-5)}.p-\(--spacing-inner-1\){padding:var(--spacing-inner-1)}.p-8{padding:calc(var(--spacing)*8)}.p-20{padding:calc(var(--spacing)*20)}.p-inner-1{padding:var(--spacing-inner-1)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-10{padding-inline:calc(var(--spacing)*10)}.px-20{padding-inline:calc(var(--spacing)*20)}.py-2{padding-block:calc(var(--spacing)*2)}.py-12{padding-block:calc(var(--spacing)*12)}.py-20{padding-block:calc(var(--spacing)*20)}.py-24{padding-block:calc(var(--spacing)*24)}.py-40{padding-block:calc(var(--spacing)*40)}.breakout[class].px-outer-gutter,.breakout[class]>.px-outer-gutter{padding-inline-start:var(--breakout-outer-gutter);padding-inline-end:var(--breakout-outer-gutter)}.breakout[class].pl-outer-gutter,.breakout[class]>.pl-outer-gutter{padding-inline-start:var(--breakout-outer-gutter)}.ps-0{padding-inline-start:calc(var(--spacing)*0)}.ps-cols-2{padding-inline-start:calc(((((2/var(--container-grid-columns,var(--grid-columns)))*(100% - (var(--inner-gutter)*var(--cols-container,0)))) - (var(--inner-gutter) - (2/var(--container-grid-columns,var(--grid-columns))*var(--inner-gutter)))) + var(--inner-gutter)))}.ps-inner-1{padding-inline-start:var(--spacing-inner-1)}.breakout[class].pr-outer-gutter,.breakout[class]>.pr-outer-gutter{padding-inline-end:var(--breakout-outer-gutter)}.pe-0{padding-inline-end:calc(var(--spacing)*0)}.