body {
  background-color: var(--color-100);
  color: var(--color-900);
}

a {
  color: var(--color-500);
}

a:hover {
  color: var(--color-600);
}


h2 {
  color: var(--color-800);
}

h2::after {
  background-color: var(--color-500);
}


.design-section {
  padding-top: var(--space-2x);
  padding-bottom: var(--space-4x);
}

.design-section > :last-child {
  margin-bottom: 0;
}


.design-title {
  padding-top: var(--space-3x);
  padding-bottom: var(--space-2x);
}

.design-title__name {
  line-height: 2rem;
  font-size: 2rem;
  font-weight: 400;
}

.design-title {
  color: white;
}

.design-title__number {
  font-weight: 500;
  color: var(--color-300);
}

.design-title__bg {
  background-color: var(--color-700);
}

.design-guide {
  padding-top: 0;
  padding-bottom: var(--space-2x);
}

.design-guide__list {
  list-style: none;
  counter-reset: guide;
}

.design-guide__listitem {
  background-color: white;
  margin-bottom: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
}

.design-guide__listitem::before {
  counter-increment: guide;
  content: counter(guide);
  width: 2rem;
  height: 2rem;
  display: flex;
  flex-shrink: 0;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  color: var(--color-500);
  background-color: var(--color-200);
  margin-right: 1rem;
  font-size: 0.875rem;
}

.design-export {
  padding-bottom: var(--space-2x);
}

.design-exportformat {
  border: none;
  display: flex;
  padding: 1rem 0;
}

.design-exportformat__paragraph {
  margin-bottom: 0;
  font-weight: 500;
  width: 6rem;
  margin-right: 3rem;
}

.design-exportformat__label {
  margin-right: 2rem;
}

.design-exportformat__radio {
  margin-right: 0.5rem;
}



.design-exportformat__bg {
  background-color: var(--color-200);
}

.design-exportoutput {
  padding-top: var(--space-1x);
}

.design-exportoutput__list {
  list-style: none;
  margin-bottom: var(--space-1x);
}


.design-exportoutput__listitem {
  display: flex;
}

.design-exportoutput__listitem::before {
  content: "";
  height: var(--space-1x);
  width: 6rem;
  margin-right: 3rem;
  background: red;
}

.design-exportoutput__list--1 .design-exportoutput__listitem--100::before { background-color: var(--p1-color-100); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--200::before { background-color: var(--p1-color-200); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--300::before { background-color: var(--p1-color-300); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--400::before { background-color: var(--p1-color-400); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--500::before { background-color: var(--p1-color-500); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--600::before { background-color: var(--p1-color-600); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--700::before { background-color: var(--p1-color-700); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--800::before { background-color: var(--p1-color-800); } 
.design-exportoutput__list--1 .design-exportoutput__listitem--900::before { background-color: var(--p1-color-900); } 

.design-exportoutput__list--2 .design-exportoutput__listitem--100::before { background-color: var(--p2-color-100); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--200::before { background-color: var(--p2-color-200); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--300::before { background-color: var(--p2-color-300); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--400::before { background-color: var(--p2-color-400); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--500::before { background-color: var(--p2-color-500); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--600::before { background-color: var(--p2-color-600); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--700::before { background-color: var(--p2-color-700); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--800::before { background-color: var(--p2-color-800); } 
.design-exportoutput__list--2 .design-exportoutput__listitem--900::before { background-color: var(--p2-color-900); } 

.design-exportoutput__list--3 .design-exportoutput__listitem--100::before { background-color: var(--p3-color-100); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--200::before { background-color: var(--p3-color-200); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--300::before { background-color: var(--p3-color-300); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--400::before { background-color: var(--p3-color-400); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--500::before { background-color: var(--p3-color-500); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--600::before { background-color: var(--p3-color-600); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--700::before { background-color: var(--p3-color-700); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--800::before { background-color: var(--p3-color-800); } 
.design-exportoutput__list--3 .design-exportoutput__listitem--900::before { background-color: var(--p3-color-900); } 

.design-exportoutput__list--4 .design-exportoutput__listitem--100::before { background-color: var(--p4-color-100); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--200::before { background-color: var(--p4-color-200); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--300::before { background-color: var(--p4-color-300); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--400::before { background-color: var(--p4-color-400); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--500::before { background-color: var(--p4-color-500); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--600::before { background-color: var(--p4-color-600); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--700::before { background-color: var(--p4-color-700); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--800::before { background-color: var(--p4-color-800); } 
.design-exportoutput__list--4 .design-exportoutput__listitem--900::before { background-color: var(--p4-color-900); } 

[data-palettes="1"] .design-exportoutput__list--2,
[data-palettes="1"] .design-exportoutput__list--3,
[data-palettes="1"] .design-exportoutput__list--4,
[data-palettes="2"] .design-exportoutput__list--3,
[data-palettes="2"] .design-exportoutput__list--4,
[data-palettes="3"] .design-exportoutput__list--4 {
  display: none;
}


.design-exportoutput__listitem code {
  font-size: 0.875rem;
  color: var(--color-800);
}

.design-exportoutput__bg {
  background-color: white;
}

.design-ninecolors__colors {
  display: flex;
  margin: var(--space-2x) 0;
}
  
.design-ninecolors__color {
  margin-right: var(--space-1x);
  flex-shrink: 1;
  aspect-ratio: 1/1;
  width: 4.5rem;
  min-height: 2rem;
}

.design-ninecolors__color:last-child {
  margin-right: 0;
}

.design-ninecolors__color--1 { background-color: #556270; }
.design-ninecolors__color--2 { background-color: #4ECDC4; }
.design-ninecolors__color--3 { background-color: #C7F464; }
.design-ninecolors__color--4 { background-color: #FF6B6B; }
.design-ninecolors__color--5 { background-color: #C44D58; }

.design-hsl__bg {
  background-color: white;
}

.design-hsl__figure {
  margin: var(--space-2x) 0;
}

.design-hsl__images {
  display: flex;
}

.design-hsl__image {
  width: calc(50% - var(--space-1x));
  max-width: 21rem;
  height: auto;
  margin-bottom: var(--space-2x);
  margin-right: var(--space-2x);
}

.design-hsl__image:last-child {
  margin-right: 0;
}

.design-hsl__figcaption {
  color: var(--color-800);
  font-size: 0.875rem;
  text-align: center;
  display: block;
}


.design-colorscheme {
  padding-bottom: var(--space-2x);
}

.design-colorscheme__title {
  color: white;
}

.design-colorscheme__paragraph {
  color: var(--color-100);
}

.design-colorscheme__link {
  color: var(--color-300);
}

.design-colorscheme__link:hover {
  color: var(--color-400);
}


.design-colorscheme__bg {
  background-color: var(--color-900);
}

.design-colorscheme__schemes {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2x);
  margin-bottom: var(--space-1x);
}

.design-colorscheme__scheme {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: var(--space-2x);
  margin-bottom: var(--space-2x);
}

.design-colorscheme__scheme-name {
  margin-top: var(--space-1x);
  color: var(--color-200);
  font-size: 0.875rem;
}

.design-colorscheme__colorcircle {
  --size: 8rem;
  height: var(--size);
  width: var(--size);
  font-size: calc(var(--size) / 100);
  position: relative;
}

.design-colorscheme__colorcircle-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100em;
  height: 100em;
  border-radius: 50em;
  z-index: 1;
  opacity: 0.5;
  background: conic-gradient(from 0deg at 50% 50%, 
    hsl(0 100% 50%) 0deg,
    hsl(22.5 100% 50%) 022.5deg,
    hsl(45 100% 50%) 45deg,
    hsl(67.5 100% 50%) 67.5deg,
    hsl(90 100% 50%) 90deg,
    hsl(112.5 100% 50%) 112.5deg,
    hsl(135 100% 50%) 135deg,
    hsl(157.5 100% 50%) 157.5deg,
    hsl(180 100% 50%) 180deg,
    hsl(202.5 100% 50%) 202.5deg,
    hsl(225 100% 50%) 225deg,
    hsl(247.5 100% 50%) 247.5deg,
    hsl(270 100% 50%) 270deg,
    hsl(292.5 100% 50%) 292.5deg,
    hsl(315 100% 50%) 315deg,
    hsl(337.5 100% 50%) 337.5deg,
    hsl(360 100% 50%) 360deg);
}

.design-colorscheme__colorcircle-center {
  position: absolute;
  top: 25em;
  left: 25em;
  width: 50em;
  height: 50em;
  border-radius: 25em;
  z-index: 2;
}

.design-colorscheme__svg-line {
  width: 100em;
  height: 100em;
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
}

.design-colorscheme__svg-line path {
  stroke: white;
  stroke-width: 0.125rem;
}

.design-colorscheme__colorcircle-pin {
  position: absolute;
  width: 12.5em;
  height: 12.5em;
  border-radius: 6.75em;
  border: 0.125rem solid white;
  z-index: 4;
  box-sizing: border-box;
} 
.design-colorscheme__colorcircle-pin--0 {
  background-color: hsl(0 100% 50%);
  top: 6.25em;
  left: 43.75em;
}
.design-colorscheme__colorcircle-pin--30 {
  background-color: hsl(30 100% 50%);
  top: 11.71875em; 
  right: 25.78125em;
}
.design-colorscheme__colorcircle-pin--60 {
  background-color: hsl(60 100% 50%);
  right: 11.71875em; 
  top: 25.78125em;
}
.design-colorscheme__colorcircle-pin--90 {
  background-color: hsl(90 100% 50%);
  right: 6.25em;
  top: 43.75em;
}
.design-colorscheme__colorcircle-pin--120 {
  background-color: hsl(120 100% 50%);
  right: 11.71875em; 
  bottom: 25.78125em;
}
.design-colorscheme__colorcircle-pin--150 {
  background-color: hsl(150 100% 50%);
  bottom: 11.71875em; 
  right: 25.78125em;
}
.design-colorscheme__colorcircle-pin--180 {
  background-color: hsl(180 100% 50%);
  bottom: 6.25em;
  left: 43.75em;
}
.design-colorscheme__colorcircle-pin--210 {
  background-color: hsl(210 100% 50%);
  bottom: 11.71875em; 
  left: 25.78125em;
}
.design-colorscheme__colorcircle-pin--240 {
  background-color: hsl(240 100% 50%);
  left: 11.71875em; 
  bottom: 25.78125em;
}
.design-colorscheme__colorcircle-pin--270 {
  background-color: hsl(270 100% 50%);
  left: 6.25em;
  top: 43.75em;
}
.design-colorscheme__colorcircle-pin--300 {
  background-color: hsl(300 100% 50%);
  left: 11.71875em; 
  top: 25.78125em;
}
.design-colorscheme__colorcircle-pin--330 {
  background-color: hsl(330 100% 50%);
  top: 11.71875em; 
  left: 25.78125em;
}



.design-problems__swatches {
  display: flex;
  margin: var(--space-2x) 0;
}

.design-problems__swatch {
  width: var(--space-4x);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  padding: var(--space-1x) 0;
}

.design-problems__swatch--yellow {
  background-color: hsl(60 90% 60%);
  color: black;
  margin-right: var(--space-1x);
}
.design-problems__swatch--blue {
  background-color: hsl(240 90% 60%);
  color: white;
}

.design-problems__swatch-hue {
  font-size: 0.875rem;
}

.design-problems__swatch-value {
  font-weight: 500;
}

.design-problems__colorscales-container {
  margin: var(--space-2x) 0;
}

.design-problems__colorscales {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--space-1x);
}

.design-problems__colorscale {
  display: flex;
  margin-right: var(--space-1x);
}

.design-problems__colorscale-color {
  height: 2rem;
  width: 2rem;
}


.design-footer {
  color: white;
  padding-bottom: var(--space-2x);
}

.design-footer__bg {
  background-color: var(--color-800);
}

.design-footer__paragraph {
  font-size: 14px;
}

.design-footer__link {
  color: var(--color-300);
}

.design-footer__link:hover {
  color: var(--color-400);
}


.design-footer__reset-button {
  border: 0;
  background-color: var(--color-700);
  color: var(--color-200);
  font-size: 14px;
  font-weight: 400;
  padding: calc(var(--space-1x) / 2);
}

.design-footer__reset-button:hover {
  text-decoration: underline;
}