1:root {
  2  --rosewater: #dc8a78;
  3  --flamingo: #dd7878;
  4  --pink: #ea76cb;
  5  --mauve: #8839ef;
  6  --red: #d20f39;
  7  --maroon: #e64553;
  8  --peach: #fe640b;
  9  --yellow: #df8e1d;
 10  --green: #40a02b;
 11  --teal: #179299;
 12  --sky: #04a5e5;
 13  --sapphire: #209fb5;
 14  --blue: #1e66f5;
 15  --lavender: #7287fd;
 16  --text: #4c4f69;
 17  --subtext1: #5c5f77;
 18  --subtext0: #6c6f85;
 19  --overlay2: #7c7f93;
 20  --overlay1: #8c8fa1;
 21  --overlay0: #9ca0b0;
 22  --surface2: #acb0be;
 23  --surface1: #bcc0cc;
 24  --surface0: #ccd0da;
 25  --base: #eff1f5;
 26  --mantle: #e6e9ef;
 27  --crust: #dce0e8;
 28  --inverted-text: var(--base);
 29  --selection-color: var(--blue);
 30  --color-primary: var(--lavender);
 31  --color-bg: var(--base);
 32  --color-primary-light: color-mix(
 33    in srgb,
 34    var(--color-primary) 20%,
 35    var(--color-bg)
 36  );
 37  --text-primary: var(--text);
 38  --text-secondary: var(--subtext1);
 39
 40  --border-radius: 8px;
 41}
 42
 43body {
 44  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 45    Bitstream Vera Sans Mono, Courier New, monospace, serif;
 46  background-color: var(--color-bg);
 47  color: var(--text-primary);
 48}
 49
 50main {
 51  max-width: 40rem;
 52  margin: 0 auto;
 53  padding: 2rem 0 4rem;
 54}
 55
 56h1 {
 57  font-size: 1.5rem;
 58  line-height: 2rem;
 59}
 60
 61h2 {
 62  font-size: 1.25rem;
 63  line-height: 1.75rem;
 64  margin-bottom: 1rem;
 65}
 66
 67p {
 68  margin: 1.5rem 0;
 69  line-height: 1.5;
 70}
 71
 72ul {
 73  line-height: 1.3;
 74}
 75
 76button {
 77  background-color: var(--color-primary);
 78  color: var(--base);
 79  border-radius: var(--border-radius);
 80  border: none;
 81  padding: 0.5rem 1rem;
 82  cursor: pointer;
 83
 84  input + & {
 85    border-top-left-radius: 0;
 86    border-bottom-left-radius: 0;
 87  }
 88
 89  &:hover {
 90    opacity: 0.7;
 91  }
 92}
 93
 94input {
 95  border-radius: var(--border-radius);
 96  padding: 0.4rem;
 97
 98  &:has(+ button) {
 99    border-top-right-radius: 0;
100    border-bottom-right-radius: 0;
101  }
102}
103
104a {
105  color: var(--color-primary);
106  text-decoration: none;
107}
108
109a:hover {
110  color: #818cf8;
111  text-decoration: underline;
112}
113
114.message {
115  background-color: var(--color-primary-light);
116  border-radius: var(--border-radius);
117  padding: 1rem;
118
119  &.error {
120    background-color: color-mix(in srgb, var(--red) 20%, var(--color-bg));
121  }
122}
123
124ul {
125  padding-left: 0;
126}
127
128li {
129  &:has(> input[type="checkbox"]) {
130    margin-top: 1rem;
131    list-style: none;
132
133    & input {
134      margin-right: 1rem;
135      width: 1rem;
136      height: 1rem;
137    }
138  }
139}