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}
 54
 55h1 {
 56  font-size: 1.5rem;
 57  line-height: 2rem;
 58}
 59
 60h2 {
 61  font-size: 1.25rem;
 62  line-height: 1.75rem;
 63  margin-bottom: 1rem;
 64}
 65
 66p {
 67  margin: 1.5rem 0;
 68  line-height: 1.5;
 69}
 70
 71ul {
 72  line-height: 1.3;
 73}
 74
 75button {
 76  background-color: var(--color-primary);
 77  color: var(--base);
 78  border-radius: var(--border-radius);
 79  border: none;
 80  padding: 0.5rem 1rem;
 81  cursor: pointer;
 82  font-weight: bold;
 83  transition: all 0.2s ease;
 84
 85  input + & {
 86    border-top-left-radius: 0;
 87    border-bottom-left-radius: 0;
 88  }
 89
 90  &:hover {
 91    opacity: 0.7;
 92  }
 93}
 94
 95input {
 96  border-radius: var(--border-radius);
 97  padding: 0.4rem;
 98
 99  &:has(+ button) {
100    border-top-right-radius: 0;
101    border-bottom-right-radius: 0;
102  }
103}
104
105a {
106  color: var(--color-primary);
107  text-decoration: none;
108}
109
110a:hover {
111  color: #818cf8;
112  text-decoration: underline;
113}
114
115.message {
116  background-color: var(--color-primary-light);
117  border-radius: var(--border-radius);
118  padding: 1rem;
119
120  &.error {
121    background-color: color-mix(in srgb, var(--red) 20%, var(--color-bg));
122  }
123}
124
125ul:has(input[type="checkbox"]) {
126  padding-left: 0;
127}
128
129li {
130  &:has(> input[type="checkbox"]) {
131    margin-top: 1rem;
132    list-style: none;
133
134    & input {
135      margin-right: 1rem;
136      width: 1rem;
137      height: 1rem;
138    }
139  }
140}