/* IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

.mp {
  /* https://unpkg.com/browse/@manifoldco/mercury/static/styles.css */

  /* (c)olors */
  --c-black: 0, 0%, 0%;
  --c-blue: 224.0425531914894, 75.80645161290323%, 48.627450980392155%;
  --c-border-gray: 210, 5.357142857142836%, 78.03921568627452%;
  --c-gray-dark: 210, 4.395604395604395%, 35.68627450980392%;
  --c-gray-darker: 210, 12.280701754385966%, 22.352941176470587%;
  --c-gray-light: 240, 1.4925373134328308%, 86.86274509803921%;
  --c-gray-lighter: 240, 2.7027027027026946%, 92.74509803921569%;
  --c-gray-lightest: 240, 6.666666666666654%, 97.05882352941177%;
  --c-gray: 240, 2.752293577981655%, 57.25490196078431%;
  --c-green: 169.48905109489053, 58.29787234042554%, 46.07843137254902%;
  --c-muted-blue: 218.1818181818182, 94.2857142857143%, 93.13725490196079%;
  --c-muted-green: 156.85714285714286, 62.499999999999964%, 78.03921568627452%;
  --c-muted-orange: 24.666666666666657, 100%, 82.35294117647058%;
  --c-muted-purple: 261.00000000000006, 71.42857142857146%, 89.01960784313725%;
  --c-muted-red: 345.7627118644068, 100%, 88.4313725490196%;
  --c-muted-teal: 188.88888888888889, 75.00000000000004%, 85.88235294117648%;
  --c-muted-yellow: 48.857142857142854, 100%, 86.27450980392157%;
  --c-orange: 29.714285714285715, 91.30434782608697%, 54.90196078431373%;
  --c-purple: 260.4347826086956, 60.52631578947367%, 55.294117647058826%;
  --c-red: 346.4088397790055, 73.87755102040816%, 48.03921568627451%;
  --c-teal: 188.4375, 85.71428571428571%, 43.92156862745098%;
  --c-white: 0, 0%, 100%;
  --c-yellow: 48.55491329479769, 100%, 66.07843137254902%;
  --c-yellow: 48.55491329479769, 100%, 66.07843137254902%;

  /* (f)ont */
  --f-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* (g)radients */
  --g-blue: linear-gradient(
    225deg,
    hsla(199.62264150943395, 63.34661354581673%, 50.78431372549019%, 1) 0%,
    hsla(239.2941176470588, 34.97942386831276%, 47.64705882352941%, 1) 100%
  );
  --g-blue-muted: linear-gradient(
    225deg,
    hsla(199.99999999999997, 100%, 84.70588235294117%, 1) 0%,
    hsla(238.96551724137933, 100%, 88.62745098039215%, 1) 100%
  );
  --g-brand: linear-gradient(
    45deg,
    hsla(350, 64.07766990291263%, 59.6078431372549%, 1) 0%,
    hsla(293.76623376623377, 35.15981735159818%, 42.94117647058824%, 1) 100%
  );
  --g-brand-muted: linear-gradient(
    45deg,
    hsla(348.83720930232556, 54.43037974683547%, 84.50980392156863%, 1) 0%,
    hsla(294.5454545454545, 29.72972972972973%, 85.49019607843138%, 1) 100%
  );
  --g-green: linear-gradient(
    237deg,
    hsla(152.14285714285714, 45.528455284552855%, 51.76470588235295%, 1) 7%,
    hsla(199.62264150943395, 63.34661354581673%, 50.78431372549019%, 1) 111%
  );
  --g-green-muted: linear-gradient(
    237deg,
    hsla(150.8571428571429, 63.636363636363704%, 89.21568627450979%, 1) 7%,
    hsla(200, 100%, 91.76470588235294%, 1) 111%
  );
  --g-manifold: linear-gradient(
    240deg,
    hsla(340.3404255319149, 99.15611814345992%, 53.529411764705884%, 1) -12%,
    hsla(271.875, 38.095238095238095%, 49.411764705882355%, 1) 24%,
    hsla(199.62264150943395, 63.85542168674698%, 48.82352941176471%, 1) 70%,
    hsla(21.52173913043478, 97.87234042553192%, 63.13725490196078%, 1) 86%,
    hsla(44.39999999999999, 98.03921568627452%, 60%, 1) 123%
  );
  --g-orange: linear-gradient(
    48deg,
    hsla(336.75889328063244, 100%, 50.3921568627451%, 1) -34%,
    hsla(51.17647058823529, 98.07692307692308%, 59.21568627450981%, 1) 112%
  );
  --g-orange-muted: linear-gradient(
    45deg,
    hsla(17.25, 80.00000000000004%, 80.3921568627451%, 1) -11%,
    hsla(38.999999999999986, 100%, 92.15686274509804%, 1) 112%
  );
  --g-purple: linear-gradient(
    225deg,
    hsla(261.70212765957444, 100%, 72.35294117647058%, 1) 0%,
    hsla(248.30188679245285, 70.04405286343612%, 55.490196078431374%, 1) 100%
  );
  --g-purple-muted: linear-gradient(
    225deg,
    hsla(261.8181818181818, 100%, 93.52941176470588%, 1) 0%,
    hsla(247.99999999999997, 100%, 88.23529411764706%, 1) 100%
  );
  --g-red: linear-gradient(
    45deg,
    hsla(353.7037037037037, 86.17021276595743%, 36.86274509803922%, 1) 0%,
    hsla(342.4752475247525, 100%, 60.3921568627451%, 1) 100%
  );
  --g-red-muted: linear-gradient(
    225deg,
    hsla(0, 100%, 85.09803921568627%, 1) 0%,
    hsla(336.8852459016394, 96.82539682539684%, 75.29411764705883%, 1) 100%
  );
  --g-yellow: linear-gradient(
    43deg,
    hsla(38.3756345177665, 100%, 61.372549019607845%, 1) -3%,
    hsla(48.47682119205298, 100%, 70.3921568627451%, 1) 100%
  );
  --g-yellow-muted: linear-gradient(
    44deg,
    hsla(38.49056603773584, 100%, 79.2156862745098%, 1) -3%,
    hsla(49.0909090909091, 100%, 91.37254901960785%, 1) 108%
  );

  /* (s)hadows */
  --s-far: 0 6px 10px hsla(0, 0%, 0%, 0.15000000596046448);
  --s-far-filter: drop-shadow(0 6px 5px hsla(0, 0%, 0%, 0.15000000596046448));

  /* Internal component vars */
  --button-color: var(--c-blue);
  --button-text-color: var(--c-white);
  --empty-color: var(--c-gray);
  --check-color: var(--c-blue);

  --table-block-spacing: 12px;
  --table-box-shadow: 0 2px 8px hsla(var(--c-black) 0.0699445);
  --table-border-radius: 6px;
  --table-solid-border: 1px solid hsl(var(--c-gray-light));
  --table-dashed-border: 1px dashed hsl(var(--c-gray-lighter));
  --table-metered-border: 1px solid hsl(240, 1%, 87%);

  box-shadow: var(--table-box-shadow);
  color: hsl(var(--c-gray-darker));
  display: grid;
  font-family: var(--f-body);
  font-size: 16px;
  grid-auto-flow: column;
  grid-template: repeat(var(--table-rows), -webkit-min-content) / repeat(
      var(--table-columns),
      minmax(220px, 250px)
    );
  grid-template: repeat(var(--table-rows), min-content) / repeat(
      var(--table-columns),
      minmax(220px, 250px)
    );
  overflow-x: auto
}

.mp [pattern='[0-9]*'] {
    font-family: var(--f-mono);
  }

.mp--button {
  background: hsl(var(--button-color));
  border-radius: var(--table-border-radius);
  box-sizing: border-box;
  color: hsl(var(--button-text-color));
  flex: 1;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  padding: 13px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%
}

.mp--button:visited {
    color: hsl(var(--button-text-color));
  }

.mp--button:hover {
    background: hsla(var(--button-color), 0.85);
  }

.mp--cell {
  align-items: center;
  border-bottom: var(--table-dashed-border);
  border-right: var(--table-solid-border);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2rem;
  padding: 0.5rem 1rem;
  text-align: center;
  width: 100%;
  word-wrap: break-word
}

.mp--cell[data-column-first][data-row-first] {
    border-top-left-radius: var(--table-border-radius);
  }

.mp--cell[data-column-first][data-row-last] {
    border-bottom-left-radius: var(--table-border-radius);
  }

.mp--cell[data-column-last][data-row-first] {
    border-top-right-radius: var(--table-border-radius);
  }

.mp--cell[data-column-last][data-row-last] {
    border-bottom-right-radius: var(--table-border-radius);
  }

.mp--cell__sticky {
  color: hsl(var(--c-black));
  flex-direction: row;
  left: 0;
  position: -webkit-sticky;
  position: sticky;
  text-align: left;
  z-index: 1;
}

.mp--cell__block {
  display: block;
  padding: var(--table-block-spacing);
}

.mp--cell__body {
  background: hsl(var(--c-white));
  border-bottom: var(--table-dashed-border);
  box-sizing: border-box;
}

.mp--cell__th {
  background: hsl(var(--c-white));
  border-bottom: var(--table-dashed-border);
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.0125em;
  line-height: 1.5;
  padding: 0.5rem 1rem;
  word-wrap: break-word;
}

.mp--cell__thead {
  background: hsl(var(--c-gray-lightest));
  border-bottom: var(--table-solid-border);
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  justify-content: flex-start;
  letter-spacing: -0.0125em;
  line-height: 1.2;
  padding: 1rem;
  text-align: center;
  word-wrap: break-word;
}

.mp--cell__al {
  justify-content: flex-start;
}

.mp--cell__bts {
  border-top: var(--table-solid-border);
}

.mp--cell__bbs {
  border-bottom: var(--table-solid-border);
}

.mp--cell__bls {
  border-left: var(--table-solid-border);
}

/**
 * Check
 */

.mp--check {
  fill: hsl(var(--c-blue));
  height: 1.5em;
  width: 1.5em;
}

/**
 * Loading
 */

@-webkit-keyframes load {
  50% {
    opacity: 0.5;
    transform: translateY(-25%);
  }
}

@keyframes load {
  50% {
    opacity: 0.5;
    transform: translateY(-25%);
  }
}

.mp--loading {
  display: flex;
  margin-top: 0.5rem;
}

.mp--loading__dot {
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-iteration-count: 200;
          animation-iteration-count: 200;
  -webkit-animation-name: load;
          animation-name: load;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
          animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  background: hsl(var(--c-gray));
  border-radius: 4px;
  height: 0.5rem;
  margin-left: 0.125rem;
  margin-right: 0.125rem;
  opacity: 0.2;
  pointer-events: none;
  width: 0.5rem;
}

/**
 * Empty Cell
 */

.mp--empty-cell {
  color: hsl(var(--empty-color));
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

/**
 * Metered
 */

.mp--metered {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.mp--metered__header {
  color: hsl(var(--empty-color));
  display: grid;
  font-size: 11px;
  grid-template-columns: 1fr 1fr;
}

.mp--metered__header-text {
  margin: 6px 0;
  text-transform: uppercase;
}

.mp--metered__header-tar {
  text-align: right;
}

.mp--metered__cost-tiers {
  border-top: var(--table-metered-border);
  color: var(--c-gray-darker);
  display: grid;
  font-size: 14px;
  grid-template-columns: 1fr 1fr;
  line-height: 1.2;
}

.mp--metered__cost-tiers__text {
  margin: 6px 0;
}

.mp--metered__cost-tiers__last {
  text-align: right;
}

/**
 * Numeric Range
 */

.mp--numeric-range__desc {
  color: hsl(var(--c-gray));
  font-size: 12px;
}

.mp--numeric-range__input {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background: hsl(var(--c-white));
  border: 1px solid hsl(var(--c-gray));
  border-radius: 3px;
  box-sizing: border-box;
  color: inherit;
  font-size: 14px;
  min-width: 100%;
  padding: 0.5em;
  transition: border-color 150ms linear, color 150ms linear
}

.mp--numeric-range__input::-webkit-inner-spin-button,
  .mp--numeric-range__input::-webkit-outer-spin-button {
    display: none;
  }

.mp--numeric-range__input:focus,
  .mp--numeric-range__input:hover {
    color: hsl(var(--c-blue));
    border-color: hsl(var(--c-blue));
  }

/**
 * Plan
 */

.mp--plan-cost {
  color: hsl(var(--c-gray-darker));
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  margin: 0.5rem 0 0 0;
}

.mp--plan-subtext {
  color: hsl(var(--c-gray));
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0.25rem;
}

/**
 * Select
 */

.mp--select {
  align-items: center;
  background: hsl(var(--c-white));
  border-radius: 3px;
  color: hsl(var(--default-color));
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  min-height: 2rem;
  position: relative;
  width: 100%;
}

.mp--select__chevron {
  border-left: 1px solid currentColor;
  fill: var(--default-chevron-color);
  padding: 0 4px;
  pointer-events: none;
  transition: fill var(--transition), border-color var(--transition);
  width: 20px;
}

.mp--select__border {
  background: transparent;
  border-radius: 3px;
  border: 1px solid hsl(var(--c-gray));
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: border-color 150ms linear;
}

.mp--select__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  display: flex;
  flex-grow: 1;
  font-size: 1em;
  height: 100%;
  outline: none;
  padding: 0 0 0 0.375rem;
  text-indent: 0;
  transition: color 150ms linear
}

.mp--select__input::-ms-expand {
    display: none;
  }

.mp--select[focus-within] {
  color: hsl(var(--c-blue))
}

.mp--select:focus-within {
  color: hsl(var(--c-blue))
}

.mp--select[focus-within] .mp--select__border {
    border-color: hsl(var(--c-blue));
  }

.mp--select:focus-within .mp--select__border {
    border-color: hsl(var(--c-blue));
  }

.mp--select[focus-within] .mp--select__chevron {
    fill: hsl(var(--c-blue));
  }

.mp--select:focus-within .mp--select__chevron {
    fill: hsl(var(--c-blue));
  }

/**
 * Skeleton
 */

@-webkit-keyframes shimmer {
  to {
    transform: translateX(100%); /* line width shouldn’t be more than this */
  }
}

@keyframes shimmer {
  to {
    transform: translateX(100%); /* line width shouldn’t be more than this */
  }
}

.mp--skeleton {
  border-radius: 2px;
  color: transparent;
  display: inline-block;
  line-height: 1;
  overflow: hidden;
  position: relative
}

.mp--skeleton::before {
    background-image: linear-gradient(
      hsla(0, 0%, 0%, 0.1),
      hsla(0, 0%, 0%, 0.1) 1em,
      hsla(0, 0%, 0%, 0) 1em,
      hsla(0, 0%, 0%, 0) 1.4em
    );
    background-repeat: repeat-y;
    background-size: 100% 1.4em;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
  }

.mp--skeleton::after {
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-name: shimmer;
            animation-name: shimmer;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    background-image: linear-gradient(
      60deg,
      transparent 50%,
      hsla(0, 0%, 100%, 0.5),
      transparent 60%
    );
    background-repeat: no-repeat;
    content: '';
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 0;
    width: 60em; /* derived from font size */
  }

/**
 * Toggle
 */

.mp--toggle {
  align-items: center;
  display: flex;
  margin: -0.5rem;
  overflow: hidden;
  padding: 0.5rem
}

.mp--toggle[focus-within] {
    color: hsl(var(--c-blue));
  }

.mp--toggle:focus-within {
    color: hsl(var(--c-blue));
  }

.mp--toggle__toggle {
  --switch-size: 1rem;

  background-color: hsl(var(--c-gray-lighter));
  border-radius: 2rem;
  height: calc(0.5rem + var(--switch-size));
  min-width: calc(2.5 * var(--switch-size));
  position: relative;
  transition: background-color 150ms linear;
  width: calc(2.5 * var(--switch-size))
}

.mp--toggle__toggle::before {
    border: 2px solid transparent;
    border-radius: 2rem;
    bottom: -0.25rem;
    content: '';
    left: -0.25rem;
    pointer-events: none;
    position: absolute;
    right: -0.25rem;
    top: -0.25rem;
    transition: border-color 150ms linear;
  }

.mp--toggle__toggle::after {
    background-color: hsl(var(--c-gray));
    border-radius: 50%;
    content: '';
    height: var(--switch-size);
    left: 0.25rem;
    position: absolute;
    top: 0.25rem;
    transform: translateX(0);
    transition: color 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1);
    width: var(--switch-size);
  }

.mp--toggle__input {
  position: absolute;
  right: 100vw
}

.mp--toggle__input:focus ~ .mp--toggle__toggle::before {
        border-color: hsl(var(--c-blue));
      }

.mp--toggle__input:checked ~ .mp--toggle__toggle {
    background-color: hsl(var(--c-muted-blue))
  }

.mp--toggle__input:checked ~ .mp--toggle__toggle::after {
      background-color: hsl(var(--c-blue));
      transform: translateX(100%);
    }