:root {

  --p1-hue:330;

  --p1-saturation-100:60;
  --p1-lightness-100:97;

  --p1-saturation-200:67;
  --p1-lightness-200:93;

  --p1-saturation-300:80;
  --p1-lightness-300:82;

  --p1-saturation-400:76;
  --p1-lightness-400:69;

  --p1-saturation-500:74;
  --p1-lightness-500:50;

  --p1-saturation-600:77;
  --p1-lightness-600:39;

  --p1-saturation-700:81;
  --p1-lightness-700:29;

  --p1-saturation-800:88;
  --p1-lightness-800:20;

  --p1-saturation-900:88;
  --p1-lightness-900:10;


  --p1-color-100: hsl(var(--p1-hue) calc(var(--p1-saturation-100) * 1%) calc(var(--p1-lightness-100) * 1%));
  --p1-color-200: hsl(var(--p1-hue) calc(var(--p1-saturation-200) * 1%) calc(var(--p1-lightness-200) * 1%));
  --p1-color-300: hsl(var(--p1-hue) calc(var(--p1-saturation-300) * 1%) calc(var(--p1-lightness-300) * 1%));
  --p1-color-400: hsl(var(--p1-hue) calc(var(--p1-saturation-400) * 1%) calc(var(--p1-lightness-400) * 1%));
  --p1-color-500: hsl(var(--p1-hue) calc(var(--p1-saturation-500) * 1%) calc(var(--p1-lightness-500) * 1%));
  --p1-color-600: hsl(var(--p1-hue) calc(var(--p1-saturation-600) * 1%) calc(var(--p1-lightness-600) * 1%));
  --p1-color-700: hsl(var(--p1-hue) calc(var(--p1-saturation-700) * 1%) calc(var(--p1-lightness-700) * 1%));
  --p1-color-800: hsl(var(--p1-hue) calc(var(--p1-saturation-800) * 1%) calc(var(--p1-lightness-800) * 1%));
  --p1-color-900: hsl(var(--p1-hue) calc(var(--p1-saturation-900) * 1%) calc(var(--p1-lightness-900) * 1%));


  --p2-hue:0;

  --p2-saturation-100:87;
  --p2-lightness-100:97;

  --p2-saturation-200:85;
  --p2-lightness-200:92;

  --p2-saturation-300:90;
  --p2-lightness-300:80;

  --p2-saturation-400:81;
  --p2-lightness-400:67;

  --p2-saturation-500:72;
  --p2-lightness-500:54;

  --p2-saturation-600:66;
  --p2-lightness-600:42;

  --p2-saturation-700:73;
  --p2-lightness-700:31;

  --p2-saturation-800:88;
  --p2-lightness-800:20;

  --p2-saturation-900:88;
  --p2-lightness-900:10;



  --p2-color-100: hsl(var(--p2-hue) calc(var(--p2-saturation-100) * 1%) calc(var(--p2-lightness-100) * 1%));
  --p2-color-200: hsl(var(--p2-hue) calc(var(--p2-saturation-200) * 1%) calc(var(--p2-lightness-200) * 1%));
  --p2-color-300: hsl(var(--p2-hue) calc(var(--p2-saturation-300) * 1%) calc(var(--p2-lightness-300) * 1%));
  --p2-color-400: hsl(var(--p2-hue) calc(var(--p2-saturation-400) * 1%) calc(var(--p2-lightness-400) * 1%));
  --p2-color-500: hsl(var(--p2-hue) calc(var(--p2-saturation-500) * 1%) calc(var(--p2-lightness-500) * 1%));
  --p2-color-600: hsl(var(--p2-hue) calc(var(--p2-saturation-600) * 1%) calc(var(--p2-lightness-600) * 1%));
  --p2-color-700: hsl(var(--p2-hue) calc(var(--p2-saturation-700) * 1%) calc(var(--p2-lightness-700) * 1%));
  --p2-color-800: hsl(var(--p2-hue) calc(var(--p2-saturation-800) * 1%) calc(var(--p2-lightness-800) * 1%));
  --p2-color-900: hsl(var(--p2-hue) calc(var(--p2-saturation-900) * 1%) calc(var(--p2-lightness-900) * 1%));
  


  --p3-hue:165;

  --p3-saturation-100:60;
  --p3-lightness-100:97;

  --p3-saturation-200:50;
  --p3-lightness-200:93;

  --p3-saturation-300:35;
  --p3-lightness-300:73;

  --p3-saturation-400:30;
  --p3-lightness-400:53;

  --p3-saturation-500:100;
  --p3-lightness-500:26;

  --p3-saturation-600:96;
  --p3-lightness-600:22;

  --p3-saturation-700:93;
  --p3-lightness-700:16;

  --p3-saturation-800:92;
  --p3-lightness-800:14;

  --p3-saturation-900:88;
  --p3-lightness-900:10;


  --p3-color-100: hsl(var(--p3-hue) calc(var(--p3-saturation-100) * 1%) calc(var(--p3-lightness-100) * 1%));
  --p3-color-200: hsl(var(--p3-hue) calc(var(--p3-saturation-200) * 1%) calc(var(--p3-lightness-200) * 1%));
  --p3-color-300: hsl(var(--p3-hue) calc(var(--p3-saturation-300) * 1%) calc(var(--p3-lightness-300) * 1%));
  --p3-color-400: hsl(var(--p3-hue) calc(var(--p3-saturation-400) * 1%) calc(var(--p3-lightness-400) * 1%));
  --p3-color-500: hsl(var(--p3-hue) calc(var(--p3-saturation-500) * 1%) calc(var(--p3-lightness-500) * 1%));
  --p3-color-600: hsl(var(--p3-hue) calc(var(--p3-saturation-600) * 1%) calc(var(--p3-lightness-600) * 1%));
  --p3-color-700: hsl(var(--p3-hue) calc(var(--p3-saturation-700) * 1%) calc(var(--p3-lightness-700) * 1%));
  --p3-color-800: hsl(var(--p3-hue) calc(var(--p3-saturation-800) * 1%) calc(var(--p3-lightness-800) * 1%));
  --p3-color-900: hsl(var(--p3-hue) calc(var(--p3-saturation-900) * 1%) calc(var(--p3-lightness-900) * 1%));
  


  --p4-hue:268;

  --p4-saturation-100:60;
  --p4-lightness-100:97;

  --p4-saturation-200:67;
  --p4-lightness-200:94;

  --p4-saturation-300:90;
  --p4-lightness-300:84;

  --p4-saturation-400:95;
  --p4-lightness-400:74;

  --p4-saturation-500:96;
  --p4-lightness-500:63;

  --p4-saturation-600:57;
  --p4-lightness-600:49;

  --p4-saturation-700:60;
  --p4-lightness-700:35;

  --p4-saturation-800:63;
  --p4-lightness-800:22;

  --p4-saturation-900:88;
  --p4-lightness-900:10;
  

  --p4-color-100: hsl(var(--p4-hue) calc(var(--p4-saturation-100) * 1%) calc(var(--p4-lightness-100) * 1%));
  --p4-color-200: hsl(var(--p4-hue) calc(var(--p4-saturation-200) * 1%) calc(var(--p4-lightness-200) * 1%));
  --p4-color-300: hsl(var(--p4-hue) calc(var(--p4-saturation-300) * 1%) calc(var(--p4-lightness-300) * 1%));
  --p4-color-400: hsl(var(--p4-hue) calc(var(--p4-saturation-400) * 1%) calc(var(--p4-lightness-400) * 1%));
  --p4-color-500: hsl(var(--p4-hue) calc(var(--p4-saturation-500) * 1%) calc(var(--p4-lightness-500) * 1%));
  --p4-color-600: hsl(var(--p4-hue) calc(var(--p4-saturation-600) * 1%) calc(var(--p4-lightness-600) * 1%));
  --p4-color-700: hsl(var(--p4-hue) calc(var(--p4-saturation-700) * 1%) calc(var(--p4-lightness-700) * 1%));
  --p4-color-800: hsl(var(--p4-hue) calc(var(--p4-saturation-800) * 1%) calc(var(--p4-lightness-800) * 1%));
  --p4-color-900: hsl(var(--p4-hue) calc(var(--p4-saturation-900) * 1%) calc(var(--p4-lightness-900) * 1%));



  --hue:var(--p1-hue);

  --saturation-100:var(--p1-saturation-100);
  --lightness-100:var(--p1-lightness-100);

  --saturation-200:var(--p1-saturation-200);
  --lightness-200:var(--p1-lightness-200);

  --saturation-300:var(--p1-saturation-300);
  --lightness-300:var(--p1-lightness-300);

  --saturation-400:var(--p1-saturation-400);
  --lightness-400:var(--p1-lightness-400);

  --saturation-500:var(--p1-saturation-500);
  --lightness-500:var(--p1-lightness-500);

  --saturation-600:var(--p1-saturation-600);
  --lightness-600:var(--p1-lightness-600);

  --saturation-700:var(--p1-saturation-700);
  --lightness-700:var(--p1-lightness-700);

  --saturation-800:var(--p1-saturation-800);
  --lightness-800:var(--p1-lightness-800);

  --saturation-900:var(--p1-saturation-900);
  --lightness-900:var(--p1-lightness-900);


  --color-0: #fff;
  --color-100: hsl(var(--hue) calc(var(--saturation-100) * 1%) calc(var(--lightness-100) * 1%));
  --color-200: hsl(var(--hue) calc(var(--saturation-200) * 1%) calc(var(--lightness-200) * 1%));
  --color-300: hsl(var(--hue) calc(var(--saturation-300) * 1%) calc(var(--lightness-300) * 1%));
  --color-400: hsl(var(--hue) calc(var(--saturation-400) * 1%) calc(var(--lightness-400) * 1%));
  --color-500: hsl(var(--hue) calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%));
  --color-600: hsl(var(--hue) calc(var(--saturation-600) * 1%) calc(var(--lightness-600) * 1%));
  --color-700: hsl(var(--hue) calc(var(--saturation-700) * 1%) calc(var(--lightness-700) * 1%));
  --color-800: hsl(var(--hue) calc(var(--saturation-800) * 1%) calc(var(--lightness-800) * 1%));
  --color-900: hsl(var(--hue) calc(var(--saturation-900) * 1%) calc(var(--lightness-900) * 1%));

  --palettes:2;
  --active-navigation:palette;
  --active-step:none;
  --active-palette:1;
  --active-format:hex;


  --saturation-focused:none;
  --lightness-focused:none;
  --color-focused: hsl(var(--hue) calc(var(--saturation-focused) * 1%) calc(var(--lightness-focused) * 1%));

}


/* ------------------------- */


* {
  margin: 0;
  padding: 0;
}



body, 
button,
input, 
select,
textarea {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

code {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
}

body {
  --space-1x: 1.5rem;
  --space-2x: calc(var(--space-1x) * 2); 
  --space-3x: calc(var(--space-1x) * 3);
  --space-4x: calc(var(--space-1x) * 4);
  --swatch: 2rem;
  --swatch-2: calc(var(--swatch) * 2);
  --swatch-9: calc(var(--swatch) * 9);
  --swatch-11: calc(var(--swatch) * 11);
  --swatch-13: calc(var(--swatch) * 13);
  font-size: 1rem;
  line-height: var(--space-1x);
  font-weight: 300;
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(22rem, 45rem) minmax(2rem, 1fr) var(--swatch-13) var(--swatch);
}

body > * {
  grid-column: 2 / span 1;
}

.bg__left {
  grid-column: 1 / span 1;
}

.bg__right {
  grid-column: 3 / span 3;
}

strong {
  font-weight: 600;
}

a {
  font-weight: 500;
  text-underline-offset: 0.125rem;
  transition: color 0.15s;
}

p {
  margin-bottom: var(--space-1x);
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-1x);
  padding-bottom: 1rem;
}

h2::after {
  content: "";
  display: block;
  height: 0.25rem;
  width: 3rem;
  margin-top: 0.75rem;
}



.setup {
  position: fixed;
  width: var(--swatch-13);
  background: white;
  max-height: calc(100vh - var(--swatch-2));
  overflow-y: auto;
  overflow-x: hidden;
  top: var(--swatch);
  right: var(--swatch);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row-reverse;
}

@media (min-width: 92em) {
  body {
    --space-1x: 1.5rem;
    font-size: 1.125rem;
    grid-template-columns: 1fr 45rem 6rem 33rem 1fr;
    --swatch: 3rem;
  }

  .setup {
    right: auto;
    left: calc(50% + 9rem);
  }
}


.preload * {
  transition: none !important;
}



.screen-reader {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}