@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
ul,
ol,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 17px;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

small {
  font-size: 0.65em;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --cyan-100: #008f97;
  --cyan-400: #013D40;
  --green-100: #8be77c;
  --green-200: #80d572;
  --green-300: #14a800;
  --green-400: #00a870;
  --green-400-hsl: 160deg 100% 33%;
  --red-100: #C84D4A;
  --red-200: #A13C37;
  --red-300: #762A29;
  --red-400: #551F1F;
  --gray-100: #FDFDFD;
  --gray-200: #F9F9F8;
  --gray-300: #F2F2F1;
  --gray-400: #E9E9E7;
  --gray-500: #DBDBDB;
  --gray-600: #989898;
  --gray-700: #707376;
  --gray-800: #363636;
  --gray-900: #161921;
  --gray-100-hsl: 0deg 0% 99%;
  --gray-200-hsl: 60deg 8% 97%;
  --gray-300-hsl: 60deg 4% 95%;
  --gray-400-hsl: 60deg 4% 91%;
  --gray-600-hsl: 60deg 0% 60%;
  --gray-700-hsl: 60deg 0% 40%;
  --gray-800-hsl: 60deg 0% 21%;
  --gray-900-hsl: 60deg 0% 10%;
}

[data-theme=dark] {
  --gray-100: #191919;
  --gray-200: #363636;
  --gray-300: #666666;
  --gray-400: #989898;
  --gray-600: #E9E9E7;
  --gray-700: #F2F2F1;
  --gray-800: #F9F9F8;
  --gray-900: #FDFDFD;
  --gray-100-hsl: 60deg 0% 10%;
  --gray-200-hsl: 60deg 0% 21%;
  --gray-300-hsl: 60deg 0% 40%;
  --gray-400-hsl: 60deg 0% 60%;
  --gray-600-hsl: 60deg 4% 91%;
  --gray-700-hsl: 60deg 4% 95%;
  --gray-800-hsl: 60deg 8% 97%;
  --gray-900-hsl: 0deg 0% 99%;
}

:root {
  --theme-accent: var(--green-400);
  --theme-accent-hsl: var(--green-400-hsl);
  --theme-border: var(--gray-500);
  --theme-input: var(--gray-900);
  --theme-highlight: var(--gray-900);
  --theme-foreground: var(--gray-700);
  --theme-foreground-hsl: var(--gray-700-hsl);
  --theme-background: var(--gray-200);
  --theme-background-hsl: var(--gray-200-hsl);
  --theme-danger: var(--red-200);
  --theme-danger-hsl: var(--red-200-hsl);
  --theme-success: var(--cyan-200);
  --theme-success-hsl: var(--cyan-200-hsl);
  --step--200: var(--step--2);
  --step--300: var(--step--1);
  --step--400: var(--step-0);
  --step--500: var(--step-1);
  --step--600: var(--step-2);
  --step--700: var(--step-3);
  --step--800: var(--step-4);
  --step--900: var(--step-5);
  --space-100: var(--space-3xs);
  --space-200: var(--space-2xs);
  --space-300: var(--space-xs);
  --space-400: var(--space-s);
  --space-500: var(--space-m);
  --space-600: var(--space-l);
  --space-700: var(--space-xl);
  --space-800: var(--space-2xl);
  --space-900: var(--space-3xl);
  --space-100-200: var(--space-3xs-2xs);
  --space-200-300: var(--space-2xs-xs);
  --space-300-400: var(--space-xs-s);
  --space-400-500: var(--space-s-m);
  --space-500-600: var(--space-m-l);
  --space-600-700: var(--space-l-xl);
  --space-700-800: var(--space-xl-2xl);
  --space-800-900: var(--space-2xl-3xl);
  --transition-duration-base: 0.2s;
  --transition-ease-base: ease;
  --transition-base: all var(--transition-ease-base) var(--transition-duration-base);
}

/* @link https://utopia.fyi/space/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --fc-3xs-min: (var(--fc-s-min) * 0.25);
  --fc-3xs-max: (var(--fc-s-max) * 0.25);
  --fc-2xs-min: (var(--fc-s-min) * 0.5);
  --fc-2xs-max: (var(--fc-s-max) * 0.5);
  --fc-xs-min: (var(--fc-s-min) * 0.75);
  --fc-xs-max: (var(--fc-s-max) * 0.75);
  --fc-s-min: (var(--f-0-min, 21));
  --fc-s-max: (var(--f-0-max, 24));
  --fc-m-min: (var(--fc-s-min) * 1.5);
  --fc-m-max: (var(--fc-s-max) * 1.5);
  --fc-l-min: (var(--fc-s-min) * 2);
  --fc-l-max: (var(--fc-s-max) * 2);
  --fc-xl-min: (var(--fc-s-min) * 3);
  --fc-xl-max: (var(--fc-s-max) * 3);
  --fc-2xl-min: (var(--fc-s-min) * 4);
  --fc-2xl-max: (var(--fc-s-max) * 4);
  --fc-3xl-min: (var(--fc-s-min) * 6);
  --fc-3xl-max: (var(--fc-s-max) * 6);
  /* T-shirt sizes */
  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  /* One-up pairs */
  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  /* Custom pairs */
  --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
}

/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-screen: 100vw;
  --fluid-bp: calc(
      (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --f--2-min: 14.58;
  --f--2-max: 15.36;
  --step--2: calc(
      ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) *
      var(--fluid-bp)
  );
  --f--1-min: 17.50;
  --f--1-max: 19.20;
  --step--1: calc(
      ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
      var(--fluid-bp)
  );
  --f-0-min: 21.00;
  --f-0-max: 24.00;
  --step-0: calc(
      ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );
  --f-1-min: 25.20;
  --f-1-max: 30.00;
  --step-1: calc(
      ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );
  --f-2-min: 30.24;
  --f-2-max: 37.50;
  --step-2: calc(
      ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );
  --f-3-min: 36.29;
  --f-3-max: 46.88;
  --step-3: calc(
      ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
      var(--fluid-bp)
  );
  --f-4-min: 43.55;
  --f-4-max: 58.59;
  --step-4: calc(
      ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
      var(--fluid-bp)
  );
  --f-5-min: 52.25;
  --f-5-max: 73.24;
  --step-5: calc(
      ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) *
      var(--fluid-bp)
  );
}

/**
 * @utility aspect-ratio
 * @description
 *
 * A class for augmenting image ratios
 * @property {number} --aspect-ratio--horizontal The element's aspect ratio
 * @property {number} --aspect-ratio--vertical The element's aspect ratio
 */
.aspect-ratio {
  --aspect-ratio--horizontal: 16;
  --aspect-ratio--vertical: 9;
  padding-bottom: 177.7777777778%;
  padding-bottom: calc(var(--aspect-ratio--horizontal) / var(--aspect-ratio--vertical) * 100%);
  position: relative;
}
.aspect-ratio > * {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aspect-ratio > img,
.aspect-ratio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * @utility centered
 * @description
 *
 * A class to be positioned absolutely over any element
 * @property {string} --centered--margin The minimum space between the element and the inside edges of the positioning container over which it is placed (where `.breakout` is not applied)
 * @exception .breakout Whether the element is allowed to break out of the container over which it is positioned
 * @exception .fixed Will position the element relative the viewport
 */
.centered {
  --centered--margin: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centered:not(.breakout) {
  max-width: calc(100% - var(--centered--margin) * 2);
  max-height: calc(100% - var(--centered--margin) * 2);
  overflow: auto;
}
.centered.fixed {
  position: fixed;
}

/**
 * @utility cover
 *
 * @description
 * An element for covering a block-level element horizontally allowing up to 3 childrens (header, .cover-main and footer)
 * @property {string} --cover--space The minimum space between and around all of the child elements
 * @property {string} --cover--min-height The minimum height for the **Cover**
 * @exception .cover-main Class to specify the children which is gonna be in the middle of the cover
 */
.cover {
  --cover--space: var(--space-400);
  --cover--min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: var(--cover--min-height);
  padding: var(--space-400);
  padding: var(--cover--space);
}
.cover > * {
  margin-top: var(--space-400);
  margin-top: var(--cover--space);
  margin-bottom: var(--space-400);
  margin-bottom: var(--cover--space);
}
.cover :first-child:not(.cover--main) {
  margin-top: 0;
}
.cover :last-child:not(.cover--main) {
  margin-bottom: 0;
}
.cover > .cover--main {
  margin-top: auto;
  margin-bottom: auto;
}

/**
 * @utility fixed-n-fluid
 *
 * @description
 * A class for placing two elements side-by-side. If space permits, the fixed element has a set width, and the companion takes up the rest of the available horizontal space. If not, the elements are collapsed into a single column, each taking up 100% of the horizontal space.
 * @property {string} --fixed-n-fluid--width Represents the width of the fixed element _when_ adjacent. If not set (`null`) it defaults to the fixed element's content width
 * @property {string} --fixed-n-fluid--breakpoint A CSS **percentage** value. The minimum width of the content element in the horizontal configuration
 * @property {string} --fixed-n-fluid--gap A CSS margin value representing the space between the two elements
 * @exception .no-stretch Class make the adjacent elements adopt their natural height
 */
.fixed-n-fluid {
  --fixed-n-fluid--width: 20rem;
  --fixed-n-fluid--breakpoint: 50%;
  --fixed-n-fluid--gap: var(--space-400);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fixed-n-fluid--gap);
}
.fixed-n-fluid.no-stretch {
  align-items: flex-start;
}
.fixed-n-fluid > :first-child {
  flex-basis: var(--fixed-n-fluid--width);
  flex-grow: 1;
}
.fixed-n-fluid > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--fixed-n-fluid--breakpoint);
}

/**
 * @utility fluid-n-fixed
 *
 * @description
 * A class for placing two elements side-by-side. If space permits, the fixed element has a set width, and the companion takes up the rest of the available horizontal space. If not, the elements are collapsed into a single column, each taking up 100% of the horizontal space.
 * @property {string} --fluid-n-fixed--width Represents the width of the fixed element _when_ adjacent. If not set (`null`) it defaults to the fixed element's content width
 * @property {string} --fluid-n-fixed--breakpoint A CSS **percentage** value. The minimum width of the content element in the horizontal configuration
 * @property {string} --fluid-n-fixed--gap A CSS margin value representing the space between the two elements
 */
.fluid-n-fixed {
  --fluid-n-fixed--width: 20rem;
  --fluid-n-fixed--breakpoint: 50%;
  --fluid-n-fixed--gap: var(--space-400);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fluid-n-fixed--gap);
}
.fluid-n-fixed > :last-child {
  flex-basis: var(--fluid-n-fixed--width);
  flex-grow: 1;
}
.fluid-n-fixed > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--fluid-n-fixed--breakpoint);
}

/**
 * @utility flex-block
 *
 * @description
 * A class for adding white space (margin) between (block) elements
 * @property {string} --flex-block--space A CSS `margin` value
 * @exception .flex-block-centered class will center the block elements
 * @exception .flex-block-split Class on a child element will push the subsequent blocks to the bottom
 */
.flex-block {
  --flex-block--space: var(--space-400);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.flex-block.flex-block-centered {
  align-items: center;
}
.flex-block.flex-block-fluid {
  width: 100%;
}
.flex-block:only-child {
  block-size: 100%;
}
.flex-block > * + * {
  margin-block-start: var(--flex-block--space);
}
.flex-block > .flex-block--split {
  margin-block-end: auto;
}
.flex-block.flex-block-100 > * + * {
  margin-block-start: var(--space-100);
}
.flex-block.flex-block-200 > * + * {
  margin-block-start: var(--space-200);
}
.flex-block.flex-block-300 > * + * {
  margin-block-start: var(--space-300);
}
.flex-block.flex-block-400 > * + * {
  margin-block-start: var(--space-400);
}
.flex-block.flex-block-500 > * + * {
  margin-block-start: var(--space-500);
}
.flex-block.flex-block-600 > * + * {
  margin-block-start: var(--space-600);
}
.flex-block.flex-block-700 > * + * {
  margin-block-start: var(--space-700);
}
.flex-block.flex-block-800 > * + * {
  margin-block-start: var(--space-800);
}
.flex-block.flex-block-900 > * + * {
  margin-block-start: var(--space-900);
}

/**
 * @utility flex-inline
 *
 * @description
 * A class for adding white space (margin) between (inline) elements
 * @property {string} --flex-inline-space A CSS `margin` value
 * @exception .flex-inline-fluid Class to cover the whole space available
 */
.flex-inline {
  --flex-inline--justify: "flex-start";
  --flex-inline--gap: var(--space-400);
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-inline--gap);
  justify-content: var(--flex-inline--justify);
  align-items: center;
}
.flex-inline.flex-inline-fluid {
  justify-content: stretch;
}

/**
 * @utility grid
 * @description
 *
 * A class for creating a responsive grid using the CSS Grid module
 * @property {string} --grid--min-item-width A CSS length value representing the min width grid items
 * should have before wrapping an item into the next line
 * @property {string} --grid--gap The space between grid cells
 * @exception {string} .grid-fill Class will make stop stretching the gird items to fill the available space
 */
.grid {
  --grid--gap: var(--space-400);
  --grid--min-item-width: var(--space-400);
  display: grid;
  grid-gap: var(--grid--gap);
}
@supports (width: min(10rem, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid--min-item-width), 100%), 1fr));
  }
}
@supports (width: min(10rem, 100%)) {
  .grid.grid-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid--min-item-width), 100%), 1fr));
  }
}

.icon {
  height: 0.75em;
  /* ↓ Override the em value with `1cap`
  where `cap` is supported */
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

.with-icon {
  /* ↓ Set the `inline-flex` context,
  which eliminates the word space */
  display: inline-flex;
  align-items: baseline;
}

.with-icon .icon {
  /* ↓ Use the logical margin property
  and a --space variable with a fallback */
  margin-inline-end: var(--space, 0.5em);
}

/**
 * @utility reel
 *
 * @description
 * A class to show an undefined amount of inline elements
 * @property {string} --reel--width The width of each item (child element) in the Reel
 * @property {string} --reel--space The space between Reel items (child elements)
 * @property {string}--reel--height The height of the Reel itself
 * @exception .no-bar Whether to display the scrollbar
 */
.reel {
  --reel--width: 10rem;
  --reel--space: var(--space-400);
  --reel--height: auto;
  display: flex;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
}
.reel::-webkit-scrollbar {
  height: 1rem;
}
.reel > * {
  flex: 0 0 var(--reel--width);
}
.reel > img {
  height: 100%;
  flex-basis: auto;
  width: auto;
}
.reel > * + * {
  margin-left: var(--reel--space);
}
.reel.overflowing:not(.no-bar) {
  padding-bottom: var(--reel--space);
}
.reel.no-bar {
  scrollbar-width: none;
}
.reel.no-bar::-webkit-scrollbar {
  display: none;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/**
 * @utility transposer
 *
 * @description
 * Switch directly between horizontal and vertical layouts at a given (container width-based) breakpoint
 * @property {string} --transposer-breakpoint -A CSS `width` value (representing the 'container breakpoint')
 * @property {string} --transposer--gap A CSS `margin` value
 */
.transposer {
  --transposer--breakpoint: 60ch;
  --transposer--gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--transposer--gap);
}
.transposer > * {
  flex-grow: 1;
  flex-basis: calc((var(--transposer--breakpoint) - 100%) * 999);
}

.wrapper {
  --wrapper--padding-inline: var(--space-400);
  --wrapper--padding-block: var(--space-400);
  --wrapper--max-width: 60ch;
  padding: var(--space-400);
  padding-block: var(--wrapper--padding-block);
  padding-inline: var(--wrapper--padding-inline);
  max-width: 60ch;
  max-inline-size: var(--wrapper--max-width);
}
.wrapper.wrapper-fluid {
  --wrapper--max-width: 100%;
}
.wrapper.wrapper-centered {
  margin-left: auto;
  margin-right: auto;
}

.button {
  --color-text: var(--theme-accent);
  --color-text-hover: var(--theme-accent);
  --color-background: transparent;
  --color-background-hover: hsl(var(--theme-accent-hsl) / 0.15);
  --color-border: var(--theme-accent);
  --color-border-hover: var(--theme-accent);
  font-size: 16px;
  font-weight: 700;
  padding: 19px 56px;
  white-space: nowrap;
  text-transform: uppercase;
  border: solid 0.15em;
  outline-offset: 0.3em;
  color: var(--color-text);
  background-color: var(--color-background);
  border-color: var(--color-border);
  transition: var(--transition-base);
  transition-property: transform;
  cursor: pointer;
}
.button[disabled] {
  pointer-events: none;
  opacity: 0.6;
}
.button:active {
  transform: scale(0.9);
}
.button:hover, .button:focus, .button:focus-visible {
  color: var(--color-text-hover);
  background-color: var(--color-background-hover);
  border-color: var(--color-border-hover);
}
.button[data-type=quiet] {
  --color-background: transparent;
  --color-border: transparent;
  --color-border-hover: transparent;
}
.button[data-type=solid] {
  --color-text: var(--theme-background);
  --color-text-hover: var(--theme-background);
  --color-background: var(--theme-accent);
  --color-background-hover: hsl(var(--theme-accent-hsl) / 0.85);
  --color-border: var(--theme-accent);
  --color-border-hover: transparent;
}
.button[data-theme=danger] {
  --theme-accent: var(--theme-danger);
  --theme-accent-hsl: var(--theme-danger-hsl);
  color: var(--color-text);
}
.button[data-theme=success] {
  --theme-accent: var(--theme-success);
  --theme-accent-hsl: var(--theme-success-hsl);
  color: var(--color-text);
}
.button:before {
  content: "";
  display: inline-block;
  height: 1.3rem;
  vertical-align: middle;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-check:checked + .button,
.btn-check + .button.active,
.btn-check + .button.show,
.btn-check + .button:first-child:active,
:not(.btn-check) + .button:active {
  --color-background: var(--cyan-400);
  --color-text: var(--theme-background);
  --color-border: transparent;
  --color-text-hover: white;
  pointer-events: none;
  /*color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);*/
}

.btn-check:focus-visible + .button {
  outline: 0;
  box-shadow: 0 0 0 2px hsl(var(--theme-accent-hsl)/0.25);
}

.btn-check + .button svg {
  fill: currentColor;
}

.freight-calculator table, .freight-calculator h4, .freight-calculator disclosure-toggle {
  display: none;
}
.freight-calculator[data-completed] table, .freight-calculator[data-completed] h4, .freight-calculator[data-completed] disclosure-toggle {
  display: table;
}
.freight-calculator .freight-calculator__result {
  color: white;
  background-color: var(--cyan-400);
}
.freight-calculator .freight-calculator__result [name=result] {
  font-size: 48px;
}
.freight-calculator .freight-calculator__status {
  opacity: 0.6;
  font-size: 0.75em;
}
.freight-calculator [data-dirty=true] {
  opacity: 0.6;
}
.freight-calculator h4 {
  opacity: 0.6;
}
.freight-calculator table {
  font-size: 0.8em;
  width: 100%;
}
.freight-calculator table th {
  text-align: left;
  width: 100%;
  opacity: 0.6;
  font-weight: 500;
}
.freight-calculator table td {
  white-space: nowrap;
  text-align: right;
}
.freight-calculator .totalTransport td {
  font-weight: 700;
}
.freight-calculator .total td, .freight-calculator .taxes td {
  font-weight: 700;
  color: #ff9075;
}

.fluid {
  width: 100%;
}

.transition-fade {
  opacity: 1;
  transform: translateY(0%);
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.is-leaving .transition-fade {
  opacity: 0;
  transform: translateY(-30px);
}

:root {
  font-size: var(--step--300);
}

body {
  color: var(--theme-foreground);
  background-color: var(--theme-background);
}

[data-theme=danger] {
  color: var(--theme-danger);
}

[data-theme=success] {
  color: var(--theme-success);
}

input, select {
  --color-text: var(--theme-input);
  --color-text-hover: var(--color-text);
  --color-background: transparent;
  --color-background-hover: transparent;
  --color-border: var(--theme-border);
  --color-border-hover: var(--theme-foreground);
  font-size: 1rem;
  font-weight: 400;
  height: 50px;
  padding: 0;
  line-height: 50px;
  border-width: 0 0 1px 0;
  outline-offset: 0.3em;
  color: var(--color-text);
  background-color: var(--color-background);
  border-color: var(--color-border);
}
input[disabled], select[disabled] {
  pointer-events: none;
  opacity: 0.6;
}
input:hover, input:focus, input:focus-visible, select:hover, select:focus, select:focus-visible {
  color: var(--color-text-hover);
  background-color: var(--color-background-hover);
  border-color: var(--color-border-hover);
  outline: none;
}
input[data-type=solid], select[data-type=solid] {
  --color-text: var(--theme-foreground);
  --color-text-hover: var(--color-text);
  --color-background: hsl(var(--theme-foreground-hsl) / 0.1);
  --color-background-hover: hsl(var(--theme-foreground-hsl) / 0.2);
  --color-border: transparent;
  --color-border-hover: transparent;
}
input[data-theme=danger], select[data-theme=danger] {
  --theme-foreground: var(--theme-danger);
  --theme-foreground-hsl: var(--theme-danger-hsl);
}
input[data-theme=success], select[data-theme=success] {
  --theme-foreground: var(--theme-success);
  --theme-foreground-hsl: var(--theme-success-hsl);
}

[role=tablist] {
  text-align: center;
}

[role=tablist] li {
  display: inline-block;
  line-height: 64px;
}

[role=tabpanel]:focus-visible {
  outline-color: hsl(var(--theme-accent-hsl)/0.25);
}

/*[role="tablist"] [aria-selected] {
    border: 2px solid;
    background: #fff;
    border-bottom: 0;
    position: relative;
    top: 2px;
}

*:focus {
    outline: none;
    box-shadow: inset 0 0 0 4px lightBlue;
}*/
@media (max-width: 550px) {
  [role=tablist] li {
    display: block;
    position: static;
  }
  [role=tablist] label {
    display: block;
    width: 100%;
    line-height: 0;
  }
  [role=tablist] li + li {
    margin-top: 3px;
  }
}

/*# sourceMappingURL=styles.css.map */