feat: use color scheme for more than inputs

uses it across the document, so scrollbars are also themed

dev.css

···
 /* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
 
 /* table of contents
-   1. configuration
-   2. dark mode handling
-   3. css reset
-   4. margins for most elements
-   5. font family
-   6. body and selection styling
-   7. typography
-   8. blockquotes
-   9. header
-  10. footer
-  11. buttons and inputs
-  12. code and keyboards
-  13. details
-  14. description lists
-  15. horizontal rules
-  16. fieldsets
-  17. tables
-  18. lists
+	1. configuration
+	2. dark mode handling
+	3. root color scheme
+	4. css reset
+	5. margins for most elements
+	6. font family
+	7. body and selection styling
+	8. typography
+	9. blockquotes
+	10. header
+	11. footer
+	12. buttons and inputs
+	13. code and keyboards
+	14. details
+	15. description lists
+	16. horizontal rules
+	17. fieldsets
+	18. tables
+	19. lists
 */
 
 /* 1. configuration */
···
 		"Segoe UI", sans-serif;
 	--dc-font-mono: "Geist Mono", monospace;
 
-	/* color scheme for inputs */
-	--dc-cs: light;
-
 	/* light colors */
+	--dc-cs: light;
 	--dc-tx-1: #000000;
 	--dc-tx-2: #1a1a1a;
 	--dc-bg-1: #fafafa;
···
 	--dc-ac-tx: #ededed;
 
 	/* dark colors */
+	--dc-d-cs: dark;
 	--dc-d-tx-1: #ededed;
 	--dc-d-tx-2: #a1a1a1;
 	--dc-d-bg-1: #000;
···
 /* 2. dark mode handling */
 @media (prefers-color-scheme: dark) {
 	:root {
+		--dc-cs: var(--dc-d-cs);
 		--dc-tx-1: var(--dc-d-tx-1);
 		--dc-tx-2: var(--dc-d-tx-2);
 		--dc-bg-1: var(--dc-d-bg-1);
···
 		--dc-lkb-tx: var(--dc-d-lkb-tx);
 		--dc-ac-1: var(--dc-d-ac-1);
 		--dc-ac-tx: var(--dc-d-ac-tx);
-
-		/* color scheme for inputs */
-		--dc-cs: dark;
 	}
 }
 
-/* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
+/* 3. root color scheme */
+:root {
+	color-scheme: only var(--dc-cs);
+}
+
+/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
 *,
 *::before,
 *::after {
···
 	isolation: isolate;
 }
 
-/* 4. margins for most elements */
+/* 5. margins for most elements */
 address,
 area,
 article,
···
 	margin-bottom: 1rem;
 }
 
-/* 5. font family */
+/* 6. font family */
 html {
 	font-family: var(--dc-font-sans);
 }
···
 	font-family: var(--dc-font-mono);
 }
 
-/* 6. body and selection styling */
+/* 7. body and selection styling */
 body {
 	margin: 0 auto;
 	max-width: 48rem;
···
 	color: var(--dc-ac-tx);
 }
 
-/* 7. typography */
+/* 8. typography */
 h1,
 h2,
 h3,
···
 	border-radius: 0.25rem;
 }
 
-/* 8. blockquotes */
+/* 9. blockquotes */
 blockquote {
 	padding: 1.25rem;
 	background: var(--dc-bg-2);
···
 	margin-bottom: 0;
 }
 
-/* 9. header */
+/* 10. header */
 header {
 	background: var(--dc-bg-2);
 	border-bottom: 1px solid var(--dc-bg-3);
···
 	content: "• ";
 }
 
-/* 10. footer */
+/* 11. footer */
 footer {
 	border-top: 1px solid var(--dc-bg-3);
 	padding: 0.5rem calc(50vw - 50%);
···
 	border-bottom: 0;
 }
 
-/* 11. buttons and inputs */
+/* 12. buttons and inputs */
 a button,
 button,
 input[type="submit"],
···
 	border-radius: 0.25rem;
 	box-shadow: none;
 	box-sizing: border-box;
-	color-scheme: var(--dc-cs);
 }
 
 textarea {
 	max-width: 100%;
 }
 
-/* 12. code and keyboards */
+/* 13. code and keyboards */
 code,
 samp,
 kbd,
···
 	overflow: auto;
 }
 
-/* 13. details */
+/* 14. details */
 details {
 	padding: 0.5rem 1rem;
 	background: var(--dc-bg-2);
···
 	padding-bottom: 0;
 }
 
-/* 14. description lists */
+/* 15. description lists */
 dt {
 	font-weight: bold;
 }
···
 	content: "→ ";
 }
 
-/* 15. horizontal rules */
+/* 16. horizontal rules */
 hr {
 	border: 0;
 	border-bottom: 1px solid var(--dc-bg-3);
 	margin: 1rem auto;
 }
 
-/* 16. fieldsets */
+/* 17. fieldsets */
 fieldset {
 	margin-top: 1rem;
 	padding: 2rem;
···
 	padding: auto 0.5rem;
 }
 
-/* 17. tables */
+/* 18. tables */
 table {
 	border-collapse: collapse;
 	width: 100%;
···
 	margin-bottom: 0.5rem;
 }
 
-/* 18. lists */
+/* 19. lists */
 ol,
 ul {
 	padding-left: 2rem;