/* Entry point for your PostCSS build */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: var(--background);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  color: var(--text);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  padding-bottom: 1.25rem;
}
a {
  color: inherit;
}
:root {
  --red-base: 255, 59, 48;
  --red: rgb(var(--red-base));
  --red4: #ff746d;
  --red3: #ff918b;
  --red2: #ffaea9;
  --red1: #ffcac7;
  --orange-base: 255, 149, 0;
  --orange: rgb(var(--orange-base));
  --orange4: #ffaa33;
  --orange3: #ffb54d;
  --orange2: #ffbf66;
  --orange1: #ffca80;
  --yellow-base: 255, 204, 0;
  --yellow: rgb(var(--yellow-base));
  --yellow4: #ffd633;
  --yellow3: #ffdb4d;
  --yellow2: #ffe066;
  --yellow1: #ffe680;
  --green-base: 52, 199, 89;
  --green: rgb(var(--green-base));
  --green4: #59d478;
  --green3: #6dd988;
  --green2: #81de99;
  --green1: #95e3a9;
  --mint-base: 0, 199, 190;
  --mint: rgb(var(--mint-base));
  --mint4: #00efe4;
  --mint3: #04fff4;
  --mint2: #18fff5;
  --mint1: #2cfff5;
  --teal-base: 48, 176, 199;
  --teal: rgb(var(--teal-base));
  --teal4: #53c2d5;
  --teal3: #67c9da;
  --teal2: #7bd0df;
  --teal1: #8fd7e4;
  --cyan-base: 50, 173, 199;
  --cyan: rgb(var(--cyan-base));
  --cyan4: #56bfd5;
  --cyan3: #6ac6da;
  --cyan2: #7ecedf;
  --cyan1: #92d5e4;
  --blue-base: 0, 122, 255;
  --blue: rgb(var(--blue-base));
  --blue4: #3395ff;
  --blue3: #4da2ff;
  --blue2: #66afff;
  --blue1: #80bdff;
  --indigo-base: 88, 86, 214;
  --indigo: rgb(var(--indigo-base));
  --indigo4: #8886e2;
  --indigo3: #a09ee8;
  --indigo2: #b7b7ed;
  --indigo1: #cfcff3;
  --purple-base: 175, 82, 222;
  --purple: rgb(var(--purple-base));
  --purple4: #c785e8;
  --purple3: #d29fed;
  --purple2: #deb8f1;
  --purple1: #ead2f6;
  --pink-base: 255, 45, 85;
  --pink: rgb(var(--pink-base));
  --pink4: #ff6986;
  --pink3: #ff879e;
  --pink2: #ffa5b6;
  --pink1: #ffc3ce;
  --brown-base: 162, 132, 94;
  --brown: rgb(var(--brown-base));
  --brown4: #b59d7e;
  --brown3: #bea98f;
  --brown2: #c7b69f;
  --brown1: #d1c2af;
  --gray: #8e8e93;
  --gray2: #aeaeb2;
  --gray3: #c7c7cc;
  --gray4: #d1d1d6;
  --gray5: #e5e5ea;
  --gray6: #f2f2f7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --red-base: 255, 69, 58;
    --red: rgb(var(--red-base));
    --red4: #ff8079;
    --red3: #ff9e98;
    --red2: #ffbbb7;
    --red1: #ffd9d7;
    --orange-base: 255, 159, 10;
    --orange: rgb(var(--orange-base));
    --orange4: #ffb43f;
    --orange3: #ffbe5a;
    --orange2: #ffc974;
    --orange1: #ffd38f;
    --yellow-base: 255, 214, 10;
    --yellow: rgb(var(--yellow-base));
    --yellow4: #ffdf3f;
    --yellow3: #ffe35a;
    --yellow2: #ffe874;
    --yellow1: #ffec8f;
    --green-base: 48, 209, 88;
    --green: rgb(var(--green-base));
    --green4: #5ada7a;
    --green3: #6fdf8b;
    --green2: #84e49c;
    --green1: #99e8ad;
    --mint-base: 99, 230, 226;
    --mint: rgb(var(--mint-base));
    --mint4: #9cefed;
    --mint3: #b8f4f2;
    --mint2: #d4f8f7;
    --mint1: #f1fdfc;
    --teal-base: 64, 200, 224;
    --teal: rgb(var(--teal-base));
    --teal4: #72d6e8;
    --teal3: #8addec;
    --teal2: #a3e5f0;
    --teal1: #bcecf4;
    --cyan-base: 100, 210, 255;
    --cyan: rgb(var(--cyan-base));
    --cyan4: #abe7ff;
    --cyan3: #cff1ff;
    --cyan2: #f2fbff;
    --cyan1: #ffffff;
    --blue-base: 10, 132, 255;
    --blue: rgb(var(--blue-base));
    --blue4: #3f9fff;
    --blue3: #5aacff;
    --blue2: #74b9ff;
    --blue1: #8fc7ff;
    --indigo-base: 94, 92, 230;
    --indigo: rgb(var(--indigo-base));
    --indigo4: #9594ef;
    --indigo3: #b1b0f3;
    --indigo2: #ccccf7;
    --indigo1: #e8e8fb;
    --purple-base: 191, 90, 242;
    --purple: rgb(var(--purple-base));
    --purple4: #d798f7;
    --purple3: #e3b6f9;
    --purple2: #efd5fc;
    --purple1: #fbf4fe;
    --pink-base: 255, 55, 95;
    --pink: rgb(var(--pink-base));
    --pink4: #ff7591;
    --pink3: #ff94a9;
    --pink2: #ffb3c2;
    --pink1: #ffd2db;
    --brown-base: 172, 142, 104;
    --brown: rgb(var(--brown-base));
    --brown4: #c0a98c;
    --brown3: #c9b69d;
    --brown2: #d3c3af;
    --brown1: #ddd1c1;
    --gray: #98989d;
    --gray2: #636366;
    --gray3: #48484a;
    --gray4: #3a3a36;
    --gray5: #2c2c2e;
    --gray6: #1c1c1e;
  }
}
:root {
  --background: #fff;
  --text: #222;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #262c34;
    --text: #aaa;
  }
}
form .field {
  display: flex;
  gap: 1rem;
}
form .field-heading {
  width: 12rem;
}
form .label {
  font-weight: bold;
}
form .hint {
  color: var(--gray);
}
form .field-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
form .field-item .hint {
  margin-left: 1.75rem;
}
form .field-item + .field-item {
  margin-top: 1rem;
}
.form-actions {
  border-top: 1px solid var(--gray4);
  margin-left: 13rem;
  margin-top: 2rem;
  padding-top: 1rem;
}
.form-actions button {
  border: none;
  font-size: inherit;
  padding: 1rem 2rem;
  background: var(--blue);
  color: #fff;
  font-weight: bold;
  border-radius: 1rem;
  cursor: pointer;
}
:is(.form-actions button):hover {
    background: var(--blue4);
  }
.field input[type="checkbox"],
.field input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;

  width: 1.25rem;
  height: 1.25rem;
  background: var(--gray2);
  cursor: pointer;
}
.field input[type="checkbox"] {
  border-radius: 0.3125rem;
}
:is(.field input[type="checkbox"]):checked {
    background: var(--blue) url("/assets/check-de0eb0cf.svg") center center no-repeat;
  }
.field input[type="radio"] {
  border-radius: 100%;
}
:is(.field input[type="radio"]):checked {
    background: var(--blue) url("/assets/radio-774894e8.svg") center center no-repeat;
  }
.ui-panels {
  display: flex;
  gap: 2rem;
  padding: 3rem;
}
.ui-panels aside {
  background: #efefef;
  padding: 1rem;
  border-radius: 1rem;
  width: 12rem;
}
.ui-panels aside ul {
  list-style-position: inside;
  font-size: 0.85rem;
}