diff --git a/app/components/text-fields.tsx b/app/components/text-fields.tsx
index 973aa51..764652e 100644
--- a/app/components/text-fields.tsx
+++ b/app/components/text-fields.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { TextField } from '../../src/primitive-components/text-field/text-field';
-import { Button } from '../../src/primitive-components/button/button';
+import { TextField } from '../../src/primitive-components/input-components/text-field/text-field';
+import { Button } from '../../src/primitive-components/button-components/button/button';
 
 export function TextFields() {
     return (
diff --git a/app/layout.tsx b/app/layout.tsx
index 7f0cc93..6e80ffb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,3 +1,4 @@
+import '../src/styles/main.css';
 import '../src/styles/generics.css';
 import { Metadata, Viewport } from 'next';
 
diff --git a/app/page.tsx b/app/page.tsx
index 0e1b670..b719300 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,26 +1,35 @@
-import React, { Fragment } from 'react';
-import { Button, Divider } from '../src/primitive-components/components';
+import React from 'react';
+import { Card } from '../src/primitive-components/card/card';
+import { CardActionArea } from '../src/primitive-components/card/card-action-area';
+import { Button } from '../src/primitive-components/button-components/button/button';
+
+const cardStyles = { width: '256px', aspectRatio: 1 };
 
 export default function Page() {
     return (
-        <Fragment>
-            <div className={'m3 m3-wrapper'}>
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'full-width'} />
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'inset'} />
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'middle-inset'} />
-                <div>
-                    <Button disabled>Label</Button>
+        <main>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '8px',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ display: 'flex', gap: '8px' }}>
+                    <Card style={cardStyles} variant={'filled'}>
+                        <CardActionArea>
+                            <h1>Header</h1>
+                        </CardActionArea>
+                        <div>
+                            <Button>label</Button>
+                        </div>
+                    </Card>
+                    <Card style={cardStyles} variant={'outlined'} />
+                    <Card style={cardStyles} variant={'elevated'} />
                 </div>
             </div>
-        </Fragment>
+        </main>
     );
 }
diff --git a/package-lock.json b/package-lock.json
index fa2e783..4906068 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "material-you-react",
+  "name": "google-material-you-ui",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -18,6 +18,7 @@
         "@types/react": "18.2.33",
         "@types/react-dom": "18.2.14",
         "@typescript-eslint/eslint-plugin": "^6.20.0",
+        "autoprefixer": "^10.4.17",
         "eslint": "^8.56.0",
         "eslint-config-next": "^14.1.0",
         "eslint-config-prettier": "^9.1.0",
@@ -29,7 +30,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "i": "^0.3.7",
         "npm": "^10.4.0",
+        "postcss": "^8.4.33",
         "prettier": "3.2.4",
+        "tailwindcss": "^3.4.1",
         "typescript": "~5.2.0"
       }
     },
@@ -41,6 +44,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
@@ -219,6 +234,54 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
@@ -764,6 +827,31 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -923,6 +1011,43 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.17",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
+      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.22.2",
+        "caniuse-lite": "^1.0.30001578",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -958,6 +1083,15 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -979,6 +1113,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.22.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
+      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001580",
+        "electron-to-chromium": "^1.4.648",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/builtin-modules": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
@@ -1033,6 +1199,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001581",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz",
@@ -1067,6 +1242,45 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1088,6 +1302,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1106,6 +1329,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1179,6 +1414,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1191,6 +1432,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1208,6 +1455,12 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.656",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.656.tgz",
+      "integrity": "sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==",
+      "dev": true
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1342,6 +1595,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2160,11 +2422,38 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2562,6 +2851,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2898,6 +3199,15 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2994,6 +3304,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3096,6 +3421,17 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3163,6 +3499,57 @@
         }
       }
     },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/npm/-/npm-10.4.0.tgz",
@@ -3322,7 +3709,6 @@
     },
     "node_modules/npm/node_modules/@colors/colors": {
       "version": "1.5.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "optional": true,
@@ -3332,7 +3718,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3349,7 +3734,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3361,13 +3745,11 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3384,7 +3766,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
       "version": "7.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3399,13 +3780,11 @@
     },
     "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
       "version": "1.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/@npmcli/agent": {
       "version": "2.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3421,7 +3800,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/arborist": {
       "version": "7.3.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3468,7 +3846,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/config": {
       "version": "8.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3487,7 +3864,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/disparity-colors": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3499,7 +3875,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/disparity-colors/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3514,7 +3889,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/fs": {
       "version": "3.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3526,7 +3900,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/git": {
       "version": "5.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3545,7 +3918,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
       "version": "2.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3561,7 +3933,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/map-workspaces": {
       "version": "3.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3576,7 +3947,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3591,7 +3961,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/name-from-folder": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -3600,7 +3969,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/node-gyp": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -3609,7 +3977,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/package-json": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3627,7 +3994,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/promise-spawn": {
       "version": "7.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3639,7 +4005,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/query": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3651,7 +4016,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/run-script": {
       "version": "7.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3667,7 +4031,6 @@
     },
     "node_modules/npm/node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "optional": true,
@@ -3677,7 +4040,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/bundle": {
       "version": "2.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3689,7 +4051,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/core": {
       "version": "0.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3698,7 +4059,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
       "version": "0.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3707,7 +4067,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/sign": {
       "version": "2.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3722,7 +4081,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/tuf": {
       "version": "2.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3735,7 +4093,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/verify": {
       "version": "0.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3749,7 +4106,6 @@
     },
     "node_modules/npm/node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3758,7 +4114,6 @@
     },
     "node_modules/npm/node_modules/@tufjs/models": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3771,7 +4126,6 @@
     },
     "node_modules/npm/node_modules/abbrev": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -3780,7 +4134,6 @@
     },
     "node_modules/npm/node_modules/agent-base": {
       "version": "7.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3792,7 +4145,6 @@
     },
     "node_modules/npm/node_modules/aggregate-error": {
       "version": "3.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3805,7 +4157,6 @@
     },
     "node_modules/npm/node_modules/ansi-regex": {
       "version": "5.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3814,7 +4165,6 @@
     },
     "node_modules/npm/node_modules/ansi-styles": {
       "version": "6.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3826,19 +4176,16 @@
     },
     "node_modules/npm/node_modules/aproba": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/archy": {
       "version": "1.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/are-we-there-yet": {
       "version": "4.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -3847,13 +4194,11 @@
     },
     "node_modules/npm/node_modules/balanced-match": {
       "version": "1.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/bin-links": {
       "version": "4.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3868,7 +4213,6 @@
     },
     "node_modules/npm/node_modules/binary-extensions": {
       "version": "2.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3877,7 +4221,6 @@
     },
     "node_modules/npm/node_modules/brace-expansion": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3886,7 +4229,6 @@
     },
     "node_modules/npm/node_modules/builtins": {
       "version": "5.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3895,7 +4237,6 @@
     },
     "node_modules/npm/node_modules/cacache": {
       "version": "18.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -3918,7 +4259,6 @@
     },
     "node_modules/npm/node_modules/chalk": {
       "version": "5.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3930,7 +4270,6 @@
     },
     "node_modules/npm/node_modules/chownr": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -3939,7 +4278,6 @@
     },
     "node_modules/npm/node_modules/ci-info": {
       "version": "4.0.0",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3954,7 +4292,6 @@
     },
     "node_modules/npm/node_modules/cidr-regex": {
       "version": "4.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -3966,7 +4303,6 @@
     },
     "node_modules/npm/node_modules/clean-stack": {
       "version": "2.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -3975,7 +4311,6 @@
     },
     "node_modules/npm/node_modules/cli-columns": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -3988,7 +4323,6 @@
     },
     "node_modules/npm/node_modules/cli-table3": {
       "version": "0.6.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4003,7 +4337,6 @@
     },
     "node_modules/npm/node_modules/clone": {
       "version": "1.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4012,7 +4345,6 @@
     },
     "node_modules/npm/node_modules/cmd-shim": {
       "version": "6.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -4021,7 +4353,6 @@
     },
     "node_modules/npm/node_modules/color-convert": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4033,13 +4364,11 @@
     },
     "node_modules/npm/node_modules/color-name": {
       "version": "1.1.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/color-support": {
       "version": "1.1.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "bin": {
@@ -4048,7 +4377,6 @@
     },
     "node_modules/npm/node_modules/columnify": {
       "version": "1.6.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4061,19 +4389,16 @@
     },
     "node_modules/npm/node_modules/common-ancestor-path": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/console-control-strings": {
       "version": "1.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/cross-spawn": {
       "version": "7.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4087,7 +4412,6 @@
     },
     "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
       "version": "2.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4102,7 +4426,6 @@
     },
     "node_modules/npm/node_modules/cssesc": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "bin": {
@@ -4114,7 +4437,6 @@
     },
     "node_modules/npm/node_modules/debug": {
       "version": "4.3.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4131,13 +4453,11 @@
     },
     "node_modules/npm/node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/defaults": {
       "version": "1.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4149,7 +4469,6 @@
     },
     "node_modules/npm/node_modules/diff": {
       "version": "5.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-3-Clause",
       "engines": {
@@ -4158,19 +4477,16 @@
     },
     "node_modules/npm/node_modules/eastasianwidth": {
       "version": "0.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/emoji-regex": {
       "version": "8.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/encoding": {
       "version": "0.1.13",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "optional": true,
@@ -4180,7 +4496,6 @@
     },
     "node_modules/npm/node_modules/env-paths": {
       "version": "2.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4189,19 +4504,16 @@
     },
     "node_modules/npm/node_modules/err-code": {
       "version": "2.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/exponential-backoff": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0"
     },
     "node_modules/npm/node_modules/fastest-levenshtein": {
       "version": "1.0.16",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4210,7 +4522,6 @@
     },
     "node_modules/npm/node_modules/foreground-child": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4226,7 +4537,6 @@
     },
     "node_modules/npm/node_modules/fs-minipass": {
       "version": "3.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4238,7 +4548,6 @@
     },
     "node_modules/npm/node_modules/function-bind": {
       "version": "1.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "funding": {
@@ -4247,7 +4556,6 @@
     },
     "node_modules/npm/node_modules/gauge": {
       "version": "5.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4266,7 +4574,6 @@
     },
     "node_modules/npm/node_modules/glob": {
       "version": "10.3.10",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4288,19 +4595,16 @@
     },
     "node_modules/npm/node_modules/graceful-fs": {
       "version": "4.2.11",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/has-unicode": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/hasown": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4312,7 +4616,6 @@
     },
     "node_modules/npm/node_modules/hosted-git-info": {
       "version": "7.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4324,13 +4627,11 @@
     },
     "node_modules/npm/node_modules/http-cache-semantics": {
       "version": "4.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/npm/node_modules/http-proxy-agent": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4343,7 +4644,6 @@
     },
     "node_modules/npm/node_modules/https-proxy-agent": {
       "version": "7.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4356,7 +4656,6 @@
     },
     "node_modules/npm/node_modules/iconv-lite": {
       "version": "0.6.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "optional": true,
@@ -4369,7 +4668,6 @@
     },
     "node_modules/npm/node_modules/ignore-walk": {
       "version": "6.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4381,7 +4679,6 @@
     },
     "node_modules/npm/node_modules/imurmurhash": {
       "version": "0.1.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4390,7 +4687,6 @@
     },
     "node_modules/npm/node_modules/indent-string": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4399,7 +4695,6 @@
     },
     "node_modules/npm/node_modules/ini": {
       "version": "4.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -4408,7 +4703,6 @@
     },
     "node_modules/npm/node_modules/init-package-json": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4426,13 +4720,11 @@
     },
     "node_modules/npm/node_modules/ip": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/ip-regex": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4444,7 +4736,6 @@
     },
     "node_modules/npm/node_modules/is-cidr": {
       "version": "5.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -4456,7 +4747,6 @@
     },
     "node_modules/npm/node_modules/is-core-module": {
       "version": "2.13.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4468,7 +4758,6 @@
     },
     "node_modules/npm/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4477,19 +4766,16 @@
     },
     "node_modules/npm/node_modules/is-lambda": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/isexe": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/jackspeak": {
       "version": "2.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
@@ -4507,7 +4793,6 @@
     },
     "node_modules/npm/node_modules/json-parse-even-better-errors": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4516,7 +4801,6 @@
     },
     "node_modules/npm/node_modules/json-stringify-nice": {
       "version": "1.1.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "funding": {
@@ -4525,7 +4809,6 @@
     },
     "node_modules/npm/node_modules/jsonparse": {
       "version": "1.3.1",
-      "dev": true,
       "engines": [
         "node >= 0.2.0"
       ],
@@ -4534,19 +4817,16 @@
     },
     "node_modules/npm/node_modules/just-diff": {
       "version": "6.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/just-diff-apply": {
       "version": "5.5.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/libnpmaccess": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4559,7 +4839,6 @@
     },
     "node_modules/npm/node_modules/libnpmdiff": {
       "version": "6.0.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4579,7 +4858,6 @@
     },
     "node_modules/npm/node_modules/libnpmexec": {
       "version": "7.0.7",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4601,7 +4879,6 @@
     },
     "node_modules/npm/node_modules/libnpmfund": {
       "version": "5.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4613,7 +4890,6 @@
     },
     "node_modules/npm/node_modules/libnpmhook": {
       "version": "10.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4626,7 +4902,6 @@
     },
     "node_modules/npm/node_modules/libnpmorg": {
       "version": "6.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4639,7 +4914,6 @@
     },
     "node_modules/npm/node_modules/libnpmpack": {
       "version": "6.0.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4654,7 +4928,6 @@
     },
     "node_modules/npm/node_modules/libnpmpublish": {
       "version": "9.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4673,7 +4946,6 @@
     },
     "node_modules/npm/node_modules/libnpmsearch": {
       "version": "7.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4685,7 +4957,6 @@
     },
     "node_modules/npm/node_modules/libnpmteam": {
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4698,7 +4969,6 @@
     },
     "node_modules/npm/node_modules/libnpmversion": {
       "version": "5.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4714,7 +4984,6 @@
     },
     "node_modules/npm/node_modules/lru-cache": {
       "version": "10.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -4723,7 +4992,6 @@
     },
     "node_modules/npm/node_modules/make-fetch-happen": {
       "version": "13.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4745,7 +5013,6 @@
     },
     "node_modules/npm/node_modules/minimatch": {
       "version": "9.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4760,7 +5027,6 @@
     },
     "node_modules/npm/node_modules/minipass": {
       "version": "7.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -4769,7 +5035,6 @@
     },
     "node_modules/npm/node_modules/minipass-collect": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4781,7 +5046,6 @@
     },
     "node_modules/npm/node_modules/minipass-fetch": {
       "version": "3.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4798,7 +5062,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush": {
       "version": "1.0.5",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4810,7 +5073,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4822,7 +5084,6 @@
     },
     "node_modules/npm/node_modules/minipass-json-stream": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4832,7 +5093,6 @@
     },
     "node_modules/npm/node_modules/minipass-json-stream/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4844,7 +5104,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline": {
       "version": "1.2.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4856,7 +5115,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4868,7 +5126,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized": {
       "version": "1.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4880,7 +5137,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4892,7 +5148,6 @@
     },
     "node_modules/npm/node_modules/minizlib": {
       "version": "2.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4905,7 +5160,6 @@
     },
     "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4917,7 +5171,6 @@
     },
     "node_modules/npm/node_modules/mkdirp": {
       "version": "1.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "bin": {
@@ -4929,13 +5182,11 @@
     },
     "node_modules/npm/node_modules/ms": {
       "version": "2.1.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/mute-stream": {
       "version": "1.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -4944,7 +5195,6 @@
     },
     "node_modules/npm/node_modules/negotiator": {
       "version": "0.6.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4953,7 +5203,6 @@
     },
     "node_modules/npm/node_modules/node-gyp": {
       "version": "10.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -4977,7 +5226,6 @@
     },
     "node_modules/npm/node_modules/nopt": {
       "version": "7.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -4992,7 +5240,6 @@
     },
     "node_modules/npm/node_modules/normalize-package-data": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -5007,7 +5254,6 @@
     },
     "node_modules/npm/node_modules/npm-audit-report": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5016,7 +5262,6 @@
     },
     "node_modules/npm/node_modules/npm-bundled": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5028,7 +5273,6 @@
     },
     "node_modules/npm/node_modules/npm-install-checks": {
       "version": "6.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -5040,7 +5284,6 @@
     },
     "node_modules/npm/node_modules/npm-normalize-package-bin": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5049,7 +5292,6 @@
     },
     "node_modules/npm/node_modules/npm-package-arg": {
       "version": "11.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5064,7 +5306,6 @@
     },
     "node_modules/npm/node_modules/npm-packlist": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5076,7 +5317,6 @@
     },
     "node_modules/npm/node_modules/npm-pick-manifest": {
       "version": "9.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5091,7 +5331,6 @@
     },
     "node_modules/npm/node_modules/npm-profile": {
       "version": "9.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5104,7 +5343,6 @@
     },
     "node_modules/npm/node_modules/npm-registry-fetch": {
       "version": "16.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5122,7 +5360,6 @@
     },
     "node_modules/npm/node_modules/npm-user-validate": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "engines": {
@@ -5131,7 +5368,6 @@
     },
     "node_modules/npm/node_modules/npmlog": {
       "version": "7.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5146,7 +5382,6 @@
     },
     "node_modules/npm/node_modules/p-map": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5161,7 +5396,6 @@
     },
     "node_modules/npm/node_modules/pacote": {
       "version": "17.0.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5193,7 +5427,6 @@
     },
     "node_modules/npm/node_modules/parse-conflict-json": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5207,7 +5440,6 @@
     },
     "node_modules/npm/node_modules/path-key": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -5216,7 +5448,6 @@
     },
     "node_modules/npm/node_modules/path-scurry": {
       "version": "1.10.1",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
@@ -5232,7 +5463,6 @@
     },
     "node_modules/npm/node_modules/postcss-selector-parser": {
       "version": "6.0.15",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5245,7 +5475,6 @@
     },
     "node_modules/npm/node_modules/proc-log": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5254,7 +5483,6 @@
     },
     "node_modules/npm/node_modules/promise-all-reject-late": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "funding": {
@@ -5263,7 +5491,6 @@
     },
     "node_modules/npm/node_modules/promise-call-limit": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "funding": {
@@ -5272,13 +5499,11 @@
     },
     "node_modules/npm/node_modules/promise-inflight": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/promise-retry": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5291,7 +5516,6 @@
     },
     "node_modules/npm/node_modules/promzard": {
       "version": "1.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5303,7 +5527,6 @@
     },
     "node_modules/npm/node_modules/qrcode-terminal": {
       "version": "0.12.0",
-      "dev": true,
       "inBundle": true,
       "bin": {
         "qrcode-terminal": "bin/qrcode-terminal.js"
@@ -5311,7 +5534,6 @@
     },
     "node_modules/npm/node_modules/read": {
       "version": "2.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5323,7 +5545,6 @@
     },
     "node_modules/npm/node_modules/read-cmd-shim": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5332,7 +5553,6 @@
     },
     "node_modules/npm/node_modules/read-package-json": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5347,7 +5567,6 @@
     },
     "node_modules/npm/node_modules/read-package-json-fast": {
       "version": "3.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5360,7 +5579,6 @@
     },
     "node_modules/npm/node_modules/retry": {
       "version": "0.12.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -5369,14 +5587,12 @@
     },
     "node_modules/npm/node_modules/safer-buffer": {
       "version": "2.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "optional": true
     },
     "node_modules/npm/node_modules/semver": {
       "version": "7.5.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5391,7 +5607,6 @@
     },
     "node_modules/npm/node_modules/semver/node_modules/lru-cache": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5403,13 +5618,11 @@
     },
     "node_modules/npm/node_modules/set-blocking": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/shebang-command": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5421,7 +5634,6 @@
     },
     "node_modules/npm/node_modules/shebang-regex": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -5430,7 +5642,6 @@
     },
     "node_modules/npm/node_modules/signal-exit": {
       "version": "4.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5442,7 +5653,6 @@
     },
     "node_modules/npm/node_modules/sigstore": {
       "version": "2.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -5459,7 +5669,6 @@
     },
     "node_modules/npm/node_modules/smart-buffer": {
       "version": "4.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -5469,7 +5678,6 @@
     },
     "node_modules/npm/node_modules/socks": {
       "version": "2.7.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5483,7 +5691,6 @@
     },
     "node_modules/npm/node_modules/socks-proxy-agent": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5497,7 +5704,6 @@
     },
     "node_modules/npm/node_modules/spdx-correct": {
       "version": "3.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -5507,13 +5713,11 @@
     },
     "node_modules/npm/node_modules/spdx-exceptions": {
       "version": "2.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "CC-BY-3.0"
     },
     "node_modules/npm/node_modules/spdx-expression-parse": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5523,13 +5727,11 @@
     },
     "node_modules/npm/node_modules/spdx-license-ids": {
       "version": "3.0.16",
-      "dev": true,
       "inBundle": true,
       "license": "CC0-1.0"
     },
     "node_modules/npm/node_modules/ssri": {
       "version": "10.0.5",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5541,7 +5743,6 @@
     },
     "node_modules/npm/node_modules/string-width": {
       "version": "4.2.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5556,7 +5757,6 @@
     "node_modules/npm/node_modules/string-width-cjs": {
       "name": "string-width",
       "version": "4.2.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5570,7 +5770,6 @@
     },
     "node_modules/npm/node_modules/strip-ansi": {
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5583,7 +5782,6 @@
     "node_modules/npm/node_modules/strip-ansi-cjs": {
       "name": "strip-ansi",
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5595,7 +5793,6 @@
     },
     "node_modules/npm/node_modules/supports-color": {
       "version": "9.4.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -5607,7 +5804,6 @@
     },
     "node_modules/npm/node_modules/tar": {
       "version": "6.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5624,7 +5820,6 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
       "version": "2.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5636,7 +5831,6 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5648,7 +5842,6 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/minipass": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5657,19 +5850,16 @@
     },
     "node_modules/npm/node_modules/text-table": {
       "version": "0.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/tiny-relative-date": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/treeverse": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5678,7 +5868,6 @@
     },
     "node_modules/npm/node_modules/tuf-js": {
       "version": "2.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5692,7 +5881,6 @@
     },
     "node_modules/npm/node_modules/unique-filename": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5704,7 +5892,6 @@
     },
     "node_modules/npm/node_modules/unique-slug": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5716,13 +5903,11 @@
     },
     "node_modules/npm/node_modules/util-deprecate": {
       "version": "1.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/validate-npm-package-license": {
       "version": "3.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -5732,7 +5917,6 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-name": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5744,13 +5928,11 @@
     },
     "node_modules/npm/node_modules/walk-up-path": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/wcwidth": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5759,7 +5941,6 @@
     },
     "node_modules/npm/node_modules/which": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5774,7 +5955,6 @@
     },
     "node_modules/npm/node_modules/which/node_modules/isexe": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -5783,7 +5963,6 @@
     },
     "node_modules/npm/node_modules/wide-align": {
       "version": "1.1.5",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5792,7 +5971,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi": {
       "version": "8.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5810,7 +5988,6 @@
     "node_modules/npm/node_modules/wrap-ansi-cjs": {
       "name": "wrap-ansi",
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5827,7 +6004,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5842,7 +6018,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -5854,13 +6029,11 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
       "version": "9.2.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
       "version": "5.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5877,7 +6050,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
       "version": "7.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -5892,7 +6064,6 @@
     },
     "node_modules/npm/node_modules/write-file-atomic": {
       "version": "5.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -5905,7 +6076,6 @@
     },
     "node_modules/npm/node_modules/yallist": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
@@ -5917,6 +6087,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -6170,10 +6349,29 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6189,7 +6387,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -6197,6 +6395,124 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+      "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6295,6 +6611,27 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -6771,6 +7108,50 @@
         }
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6809,6 +7190,43 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -6823,6 +7241,27 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6847,6 +7286,12 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -6979,6 +7424,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -6987,6 +7462,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7182,6 +7663,15 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 82679d8..001e77a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -35,7 +36,9 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "i": "^0.3.7",
     "npm": "^10.4.0",
+    "postcss": "^8.4.33",
     "prettier": "3.2.4",
+    "tailwindcss": "^3.4.1",
     "typescript": "~5.2.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/primitive-components/button-layout/button-layout.tsx b/src/primitive-components/button-components/button-layout/button-layout.tsx
similarity index 90%
rename from src/primitive-components/button-layout/button-layout.tsx
rename to src/primitive-components/button-components/button-layout/button-layout.tsx
index b014c81..e92560c 100644
--- a/src/primitive-components/button-layout/button-layout.tsx
+++ b/src/primitive-components/button-components/button-layout/button-layout.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { bool, string } from 'prop-types';
-import { RippleArea } from '../ripple/ripple-area';
+import { RippleArea } from '../../ripple/ripple-area';
 import { ButtonLayoutProps } from './button-layout.types';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import React, { forwardRef, useId, useRef, useState } from 'react';
 
 export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
diff --git a/src/primitive-components/button-layout/button-layout.types.ts b/src/primitive-components/button-components/button-layout/button-layout.types.ts
similarity index 70%
rename from src/primitive-components/button-layout/button-layout.types.ts
rename to src/primitive-components/button-components/button-layout/button-layout.types.ts
index 1d582b3..33e8298 100644
--- a/src/primitive-components/button-layout/button-layout.types.ts
+++ b/src/primitive-components/button-components/button-layout/button-layout.types.ts
@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
     ButtonHTMLAttributes<HTMLButtonElement>;
diff --git a/src/primitive-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx
similarity index 96%
rename from src/primitive-components/button/button.tsx
rename to src/primitive-components/button-components/button/button.tsx
index 0613843..f2949cb 100644
--- a/src/primitive-components/button/button.tsx
+++ b/src/primitive-components/button-components/button/button.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../components';
+import { Icon } from '../../components';
 import { ButtonProps } from './button.types';
-import { ButtonLayout } from '../button-layout/button-layout';
 import { bool, oneOf, string } from 'prop-types';
+import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
  * Button component
diff --git a/src/primitive-components/button/button.types.ts b/src/primitive-components/button-components/button/button.types.ts
similarity index 83%
rename from src/primitive-components/button/button.types.ts
rename to src/primitive-components/button-components/button/button.types.ts
index 50d8674..e764a3e 100644
--- a/src/primitive-components/button/button.types.ts
+++ b/src/primitive-components/button-components/button/button.types.ts
@@ -1,4 +1,4 @@
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 import { ButtonHTMLAttributes } from 'react';
 
 export interface ButtonMainProps {
diff --git a/src/primitive-components/fab/fab.tsx b/src/primitive-components/button-components/fab/fab.tsx
similarity index 95%
rename from src/primitive-components/fab/fab.tsx
rename to src/primitive-components/button-components/fab/fab.tsx
index 0800b1f..250f045 100644
--- a/src/primitive-components/fab/fab.tsx
+++ b/src/primitive-components/button-components/fab/fab.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../components';
+import { Icon } from '../../components';
 import { FABProps } from './fab.types';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
@@ -54,7 +54,6 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
 FAB.propTypes = {
     icon: string,
     elevated: bool,
-    children: string,
     size: oneOf(['small', 'default', 'large', 'extended']),
     variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
 };
diff --git a/src/primitive-components/fab/fab.types.ts b/src/primitive-components/button-components/fab/fab.types.ts
similarity index 81%
rename from src/primitive-components/fab/fab.types.ts
rename to src/primitive-components/button-components/fab/fab.types.ts
index 8aa3137..aa4e6d4 100644
--- a/src/primitive-components/fab/fab.types.ts
+++ b/src/primitive-components/button-components/fab/fab.types.ts
@@ -1,9 +1,8 @@
 import { ButtonHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export interface FABMainProps {
     icon: string;
-    children?: string;
     disabled?: boolean;
     elevated?: boolean;
     size?: 'small' | 'default' | 'large' | 'extended';
diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/button-components/icon-button/icon-button.tsx
similarity index 98%
rename from src/primitive-components/icon-button/icon-button.tsx
rename to src/primitive-components/button-components/icon-button/icon-button.tsx
index 86bd21b..38ed978 100644
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/src/primitive-components/button-components/icon-button/icon-button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '../components';
+import { Icon } from '../../components';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
diff --git a/src/primitive-components/icon-button/icon-button.types.ts b/src/primitive-components/button-components/icon-button/icon-button.types.ts
similarity index 88%
rename from src/primitive-components/icon-button/icon-button.types.ts
rename to src/primitive-components/button-components/icon-button/icon-button.types.ts
index 5365dd0..6e00925 100644
--- a/src/primitive-components/icon-button/icon-button.types.ts
+++ b/src/primitive-components/button-components/icon-button/icon-button.types.ts
@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export interface IconButtonMainProps {
     icon: string;
diff --git a/src/primitive-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
similarity index 100%
rename from src/primitive-components/segmented-buttons/segmented-buttons.tsx
rename to src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
diff --git a/src/primitive-components/segmented-buttons/segmented-buttons.types.ts b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
similarity index 100%
rename from src/primitive-components/segmented-buttons/segmented-buttons.types.ts
rename to src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
diff --git a/src/primitive-components/card/card-action-area.tsx b/src/primitive-components/card/card-action-area.tsx
new file mode 100644
index 0000000..4d732e2
--- /dev/null
+++ b/src/primitive-components/card/card-action-area.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { RippleArea } from '../ripple/ripple-area';
+import { CardActionAreaProps } from './card.types';
+import { forwardRef, useRef, useState } from 'react';
+import useRippleEffect from '../ripple/hooks/useRippleEffect';
+
+export const CardActionArea = forwardRef<HTMLDivElement, CardActionAreaProps>(
+    ({ centralRipple = false, ripples = true, ...props }, ref) => {
+        const [isActive, setIsActive] = useState<boolean>(false);
+        const ripplesRef = useRef(null);
+        const CardActionAreaEvents = useRippleEffect(
+            ripplesRef,
+            setIsActive,
+            ripples,
+        );
+        const classes =
+            `m3 m3-card-action-area${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <div
+                {...props}
+                {...CardActionAreaEvents}
+                className={classes}
+                ref={ref}
+            >
+                <div className={'m3 m3-card-action-area-content'}>
+                    {props.children}
+                </div>
+                <span className={'m3 m3-card-state-layer'} />
+                {ripples && (
+                    <RippleArea
+                        callback={setIsActive}
+                        central={centralRipple}
+                        ref={ripplesRef}
+                    />
+                )}
+            </div>
+        );
+    },
+);
diff --git a/src/primitive-components/card/card-actions.tsx b/src/primitive-components/card/card-actions.tsx
new file mode 100644
index 0000000..fb40df7
--- /dev/null
+++ b/src/primitive-components/card/card-actions.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CardActions(props) {
+    return (
+        <div></div>
+    );
+}
\ No newline at end of file
diff --git a/src/primitive-components/card/card-content.tsx b/src/primitive-components/card/card-content.tsx
new file mode 100644
index 0000000..b378523
--- /dev/null
+++ b/src/primitive-components/card/card-content.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CardContent(props) {
+    return (
+        <div></div>
+    );
+}
\ No newline at end of file
diff --git a/src/primitive-components/card/card-header.tsx b/src/primitive-components/card/card-header.tsx
new file mode 100644
index 0000000..9bd9b93
--- /dev/null
+++ b/src/primitive-components/card/card-header.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CardHeader(props) {
+    return (
+        <div></div>
+    );
+}
\ No newline at end of file
diff --git a/src/primitive-components/card/card-media.tsx b/src/primitive-components/card/card-media.tsx
new file mode 100644
index 0000000..02ab7b9
--- /dev/null
+++ b/src/primitive-components/card/card-media.tsx
@@ -0,0 +1,21 @@
+// import { forwardRef } from 'react';
+// import { CardMediaProps, CardMedia } from "./card.types";
+
+// export const CardMedia = forwardRef<CardMedia, CardMediaProps>(
+//     ({rounded = true, preview = true, type, ...props}, ref) => {
+//     const classes = `m3 m3-card-media${rounded ? ' media-rounded' : ''}${preview ? ' media-preview' : ''} ${props.className ?? ''}`.trimEnd();
+//     switch (type){
+//         case "audio":
+//             break;
+//         case "iframe":
+//             break;
+//         case "img":
+//             break;
+//         case "picture":
+//             break;
+//         case "video":
+//             break;
+//         default:
+//             break;
+//     }
+// }
\ No newline at end of file
diff --git a/src/primitive-components/card/card.tsx b/src/primitive-components/card/card.tsx
index 59c3185..663bc59 100644
--- a/src/primitive-components/card/card.tsx
+++ b/src/primitive-components/card/card.tsx
@@ -1,20 +1,20 @@
-import React, { forwardRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { CardProps } from './card.types';
+import { Container } from '../container/container';
 
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: 'outlined' | 'filled' | 'elevated';
-}
-
-const Card = forwardRef<HTMLDivElement, CardProps>(
+export const Card = forwardRef<HTMLDivElement, CardProps>(
     ({ variant = 'filled', ...props }, ref) => {
-        const classes =
-            `m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
+        const classes = `m3-card m3-card-${variant} ${props.className ?? ''}`;
 
         return (
-            <div {...props} className={classes} ref={ref}>
+            <Container
+                {...props}
+                className={classes}
+                ref={ref}
+                variant={variant}
+            >
                 {props.children}
-            </div>
+            </Container>
         );
     },
 );
-
-export default Card;
diff --git a/src/primitive-components/card/card.types.ts b/src/primitive-components/card/card.types.ts
new file mode 100644
index 0000000..630d4ed
--- /dev/null
+++ b/src/primitive-components/card/card.types.ts
@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { ContainerProps } from '../container/container.types';
+import { RipplePropsForComponents } from '../ripple/ripple.types';
+
+export interface CardActionAreaProps
+    extends RipplePropsForComponents<HTMLDivElement> {
+    ripples?: boolean;
+}
+
+export interface CardProps extends ContainerProps {}
+
+export interface CardMediaProps extends HTMLAttributes<CardMedia> {
+    type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
+    rounded?: boolean;
+    preview?: boolean;
+}
+
+export type CardMedia = HTMLImageElement &
+    HTMLVideoElement &
+    HTMLPictureElement &
+    HTMLMediaElement &
+    HTMLIFrameElement &
+    HTMLAudioElement;
diff --git a/src/primitive-components/components.tsx b/src/primitive-components/components.tsx
index 60736f6..62e4846 100644
--- a/src/primitive-components/components.tsx
+++ b/src/primitive-components/components.tsx
@@ -1,14 +1,16 @@
-export { FAB } from './fab/fab';
+export { Card } from './card/card';
 export { Icon } from './icon/icon';
-export { Radio } from './radio/radio';
 export { Badge } from './badge/badge';
-export { Switch } from './switch/switch';
-export { Button } from './button/button';
 export { Divider } from './divider/divider';
-export { Checkbox } from './checkbox/checkbox';
+export { Container } from './container/container';
 export { RippleArea } from './ripple/ripple-area';
 export { Ripples, Ripple } from './ripple/ripple';
-export { TextField } from './text-field/text-field';
-export { IconButton } from './icon-button/icon-button';
-export { ButtonLayout } from './button-layout/button-layout';
-export { SegmentedButtons } from './segmented-buttons/segmented-buttons';
+export { FAB } from './button-components/fab/fab';
+export { Radio } from './input-components/radio/radio';
+export { Switch } from './input-components/switch/switch';
+export { Button } from './button-components/button/button';
+export { Checkbox } from './input-components/checkbox/checkbox';
+export { TextField } from './input-components/text-field/text-field';
+export { IconButton } from './button-components/icon-button/icon-button';
+export { ButtonLayout } from './button-components/button-layout/button-layout';
+export { SegmentedButtons } from './button-components/segmented-buttons/segmented-buttons';
diff --git a/src/primitive-components/container/container.tsx b/src/primitive-components/container/container.tsx
new file mode 100644
index 0000000..da1a4d2
--- /dev/null
+++ b/src/primitive-components/container/container.tsx
@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { ContainerProps } from './container.types';
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+    ({ variant = 'filled', ...props }, ref) => {
+        const classes =
+            `m3 m3-container m3-container-${variant} ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <div {...props} className={classes} ref={ref}>
+                {props.children}
+            </div>
+        );
+    },
+);
diff --git a/src/primitive-components/container/container.types.ts b/src/primitive-components/container/container.types.ts
new file mode 100644
index 0000000..d0c7f69
--- /dev/null
+++ b/src/primitive-components/container/container.types.ts
@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'outlined' | 'filled' | 'elevated';
+}
diff --git a/src/primitive-components/checkbox-layout/check-box-layout.tsx b/src/primitive-components/input-components/checkbox-layout/check-box-layout.tsx
similarity index 100%
rename from src/primitive-components/checkbox-layout/check-box-layout.tsx
rename to src/primitive-components/input-components/checkbox-layout/check-box-layout.tsx
diff --git a/src/primitive-components/checkbox-layout/checkbox-layout.types.ts b/src/primitive-components/input-components/checkbox-layout/checkbox-layout.types.ts
similarity index 100%
rename from src/primitive-components/checkbox-layout/checkbox-layout.types.ts
rename to src/primitive-components/input-components/checkbox-layout/checkbox-layout.types.ts
diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/input-components/checkbox/checkbox.tsx
similarity index 93%
rename from src/primitive-components/checkbox/checkbox.tsx
rename to src/primitive-components/input-components/checkbox/checkbox.tsx
index 8c64023..d131ecc 100644
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/input-components/checkbox/checkbox.tsx
@@ -2,8 +2,8 @@
 
 import { bool } from 'prop-types';
 import { CheckboxProps } from './checkbox.types';
-import { RippleArea } from '../ripple/ripple-area';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import { RippleArea } from '../../ripple/ripple-area';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 import {
     forwardRef,
diff --git a/src/primitive-components/checkbox/checkbox.types.ts b/src/primitive-components/input-components/checkbox/checkbox.types.ts
similarity index 74%
rename from src/primitive-components/checkbox/checkbox.types.ts
rename to src/primitive-components/input-components/checkbox/checkbox.types.ts
index 533de2d..e5f27df 100644
--- a/src/primitive-components/checkbox/checkbox.types.ts
+++ b/src/primitive-components/input-components/checkbox/checkbox.types.ts
@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
     RipplePropsForComponents<HTMLInputElement> & {
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/input-components/radio/radio.tsx
similarity index 93%
rename from src/primitive-components/radio/radio.tsx
rename to src/primitive-components/input-components/radio/radio.tsx
index 43fc4d7..c2c5ebb 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/input-components/radio/radio.tsx
@@ -2,9 +2,9 @@
 
 import { bool, string } from 'prop-types';
 import { RadioProps } from './radio.types';
-import { RippleArea } from '../ripple/ripple-area';
+import { RippleArea } from '../../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 /**
diff --git a/src/primitive-components/radio/radio.types.ts b/src/primitive-components/input-components/radio/radio.types.ts
similarity index 76%
rename from src/primitive-components/radio/radio.types.ts
rename to src/primitive-components/input-components/radio/radio.types.ts
index b96139e..5665d70 100644
--- a/src/primitive-components/radio/radio.types.ts
+++ b/src/primitive-components/input-components/radio/radio.types.ts
@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { RipplePropsForComponents } from '../ripple/ripple.types';
+import { RipplePropsForComponents } from '../../ripple/ripple.types';
 
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
     RipplePropsForComponents<HTMLInputElement> & {
diff --git a/src/primitive-components/switch/switch.tsx b/src/primitive-components/input-components/switch/switch.tsx
similarity index 100%
rename from src/primitive-components/switch/switch.tsx
rename to src/primitive-components/input-components/switch/switch.tsx
diff --git a/src/primitive-components/switch/switch.types.ts b/src/primitive-components/input-components/switch/switch.types.ts
similarity index 100%
rename from src/primitive-components/switch/switch.types.ts
rename to src/primitive-components/input-components/switch/switch.types.ts
diff --git a/src/primitive-components/text-field/text-field.tsx b/src/primitive-components/input-components/text-field/text-field.tsx
similarity index 100%
rename from src/primitive-components/text-field/text-field.tsx
rename to src/primitive-components/input-components/text-field/text-field.tsx
diff --git a/src/primitive-components/text-field/text-field.types.ts b/src/primitive-components/input-components/text-field/text-field.types.ts
similarity index 100%
rename from src/primitive-components/text-field/text-field.types.ts
rename to src/primitive-components/input-components/text-field/text-field.types.ts
diff --git a/src/primitive-components/ripple/hooks/useRippleEffect.ts b/src/primitive-components/ripple/hooks/useRippleEffect.ts
index 7ea754f..a35b922 100644
--- a/src/primitive-components/ripple/hooks/useRippleEffect.ts
+++ b/src/primitive-components/ripple/hooks/useRippleEffect.ts
@@ -24,7 +24,11 @@ export type InteractionEventsType = MouseEvent &
     DragEvent &
     FocusEvent;
 
-const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
+const UseRippleEffect = (
+    ref,
+    callback,
+    enabled = true,
+): undefined | RippleEventHandlers => {
     const [mounted, setMounted] = useState<boolean>(false);
 
     useEffect(() => {
@@ -37,6 +41,10 @@ const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
         return;
     }
 
+    if (!enabled) {
+        return;
+    }
+
     const { start, stop } = ref.current;
 
     return {
diff --git a/src/styles/button.css b/src/styles/button-styles/button.css
similarity index 59%
rename from src/styles/button.css
rename to src/styles/button-styles/button.css
index b25345c..e1d57e4 100644
--- a/src/styles/button.css
+++ b/src/styles/button-styles/button.css
@@ -1,74 +1,67 @@
 button:not(.m3-fab, .m3-icon-button) {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  width: min-content;
+  height: min-content;
+  box-sizing: border-box;
   font-size: var(--md-sys-typescale-label-large-font-size);
   font-weight: var(--md-sys-typescale-label-large-font-weight);
   line-height: var(--md-sys-typescale-label-large-line-height);
-  box-sizing: border-box;
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
 }
 button:not(.m3-fab, .m3-icon-button).m3 {
+  gap: 8px;
+  border: none;
   contain: content;
-  box-sizing: border-box;
-  border-radius: 100px;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
   text-align: center;
   padding: 10px 24px;
-  border: none;
-  gap: 8px;
+  align-items: center;
+  flex-direction: row;
+  display: inline-flex;
+  border-radius: 100px;
+  box-sizing: border-box;
+  justify-content: center;
 }
 button:not(.m3-fab, .m3-icon-button).filled {
   background-color: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).filled,
-button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-primary);
+button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-primary);
+  color: var(--md-sys-color-on-primary);
 }
 button:not(.m3-fab, .m3-icon-button).outlined {
   outline-offset: -1px;
-  outline: 1px solid var(--md-sys-color-outline) !important;
   background-color: rgba(0, 0, 0, 0);
   color: var(--md-sys-color-primary);
+  outline: 1px solid var(--md-sys-color-outline) !important;
 }
 button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
 button:not(.m3-fab, .m3-icon-button).text {
-  padding: 10px 12px !important;
   background-color: rgba(0, 0, 0, 0);
+  padding: 10px 12px !important;
   color: var(--md-sys-color-primary);
 }
 button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
 button:not(.m3-fab, .m3-icon-button).elevated {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  background-color: var(--md-sys-color-surface-container-low);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container-low);
 }
 button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
 button:not(.m3-fab, .m3-icon-button).tonal {
-  background-color: var(--md-sys-color-secondary-container);
   color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
 }
 button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-secondary-container);
 }
 button:not(.m3-fab, .m3-icon-button)::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   content: "";
   top: 0;
   bottom: 0;
@@ -77,130 +70,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
   position: absolute;
   background: rgba(0, 0, 0, 0);
 }
-button:not(.m3-fab, .m3-icon-button).filled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
+button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
+button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
   box-shadow: none !important;
 }
 button:not(.m3-fab, .m3-icon-button):active.elevated {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
 }
 button:not(.m3-fab, .m3-icon-button):active.tonal::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
   border-color: var(--md-sys-color-primary) !important;
 }
 button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible:is(
-    .outlined,
-    .text,
-    .elevated
-  )::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 button:not(.m3-fab, .m3-icon-button):hover.elevated {
-  box-shadow:
-    0 2px 6px 2px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 button:not(.m3-fab, .m3-icon-button):hover.filled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):hover:is(
-    .outlined,
-    .text,
-    .elevated
-  )::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
+button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):disabled {
   pointer-events: none;
 }
-button:not(.m3-fab, .m3-icon-button):disabled:is(
-    .filled,
-    .elevated,
-    .tonal,
-    .outlined,
-    .text
-  ) {
+button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
   color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):disabled.elevated {
   box-shadow: none;
 }
 button:not(.m3-fab, .m3-icon-button):disabled.outlined {
-  outline: 1px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+  outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
 }
 
 /*# sourceMappingURL=button.css.map */
diff --git a/src/styles/button-styles/button.css.map b/src/styles/button-styles/button.css.map
new file mode 100644
index 0000000..868d504
--- /dev/null
+++ b/src/styles/button-styles/button.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["button.sass","../mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECRI;EDUA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADRA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC7CA;;ADgDA;EC1CA;;AD6CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC5DA;;AD+DA;ECzDA;;AD4DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
\ No newline at end of file
diff --git a/src/styles/button.sass b/src/styles/button-styles/button.sass
similarity index 98%
rename from src/styles/button.sass
rename to src/styles/button-styles/button.sass
index f1d6f91..b1a6a99 100644
--- a/src/styles/button.sass
+++ b/src/styles/button-styles/button.sass
@@ -1,44 +1,44 @@
-@import "mixins/m3-mixins"
-
 button:not(.m3-fab, .m3-icon-button)
-    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
-    font-family: var(--md-sys-typescale-label-large-font-family-name)
+    width: min-content
+    height: min-content
+    box-sizing: border-box
     font-size: var(--md-sys-typescale-label-large-font-size)
     font-weight: var(--md-sys-typescale-label-large-font-weight)
     line-height: var(--md-sys-typescale-label-large-line-height)
-    box-sizing: border-box
+    font-family: var(--md-sys-typescale-label-large-font-family-name)
+    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
 
     &.m3
+        gap: 8px
+        border: none
         contain: content
-        box-sizing: border-box
-        border-radius: 100px
-        display: inline-flex
-        flex-direction: row
-        justify-content: center
-        align-items: center
         text-align: center
         padding: 10px 24px
-        border: none
-        gap: 8px
+        align-items: center
+        flex-direction: row
+        display: inline-flex
+        border-radius: 100px
+        box-sizing: border-box
+        justify-content: center
 
     &.filled
         background-color: var(--md-sys-color-primary)
         &, & > svg.m3-svg-icon
-            color: var(--md-sys-color-on-primary)
             fill: var(--md-sys-color-on-primary)
+            color: var(--md-sys-color-on-primary)
 
     &.outlined
         outline-offset: -1px
-        outline: 1px solid var(--md-sys-color-outline) !important
         background-color: #00000000
         color: var(--md-sys-color-primary)
+        outline: 1px solid var(--md-sys-color-outline) !important
 
         & > svg.m3-svg-icon
             fill: var(--md-sys-color-primary)
 
     &.text
-        padding: 10px 12px !important
         background-color: #00000000
+        padding: 10px 12px !important
         color: var(--md-sys-color-primary)
 
         & > svg.m3-svg-icon
@@ -46,15 +46,15 @@ button:not(.m3-fab, .m3-icon-button)
 
     &.elevated
         @include elevation-1(false)
-        background-color: var(--md-sys-color-surface-container-low)
         color: var(--md-sys-color-primary)
+        background-color: var(--md-sys-color-surface-container-low)
 
         & > svg.m3-svg-icon
             fill: var(--md-sys-color-primary)
 
     &.tonal
-        background-color: var(--md-sys-color-secondary-container)
         color: var(--md-sys-color-on-secondary-container)
+        background-color: var(--md-sys-color-secondary-container)
 
         & > svg.m3-svg-icon
             fill: var(--md-sys-color-on-secondary-container)
diff --git a/src/styles/button-styles/fabs.css b/src/styles/button-styles/fabs.css
new file mode 100644
index 0000000..d7ab031
--- /dev/null
+++ b/src/styles/button-styles/fabs.css
@@ -0,0 +1,17 @@
+/* Error: Undefined mixin.
+ *    ,
+ * 21 |         @include state-layer
+ *    |         ^^^^^^^^^^^^^^^^^^^^
+ *    '
+ *   fabs.sass 21:9  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Undefined mixin.\a    \2577 \a 21 \2502          @include state-layer\a    \2502          ^^^^^^^^^^^^^^^^^^^^\a    \2575 \a   fabs.sass 21:9  root stylesheet";
+}
diff --git a/src/styles/fabs.css.map b/src/styles/button-styles/fabs.css.map
similarity index 100%
rename from src/styles/fabs.css.map
rename to src/styles/button-styles/fabs.css.map
diff --git a/src/styles/fabs.sass b/src/styles/button-styles/fabs.sass
similarity index 98%
rename from src/styles/fabs.sass
rename to src/styles/button-styles/fabs.sass
index d421e21..e69920c 100644
--- a/src/styles/fabs.sass
+++ b/src/styles/button-styles/fabs.sass
@@ -1,5 +1,3 @@
-@import "mixins/m3-mixins"
-
 button.m3.m3-fab
     transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
 
diff --git a/src/styles/button-styles/icon-button.css b/src/styles/button-styles/icon-button.css
new file mode 100644
index 0000000..a991580
--- /dev/null
+++ b/src/styles/button-styles/icon-button.css
@@ -0,0 +1,134 @@
+button.m3.m3-icon-button {
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  contain: content;
+  border-radius: 50%;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  padding: 0;
+}
+button.m3.m3-icon-button::before {
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+button.m3.m3-icon-button > span.m3-icon {
+  z-index: 25;
+  font-size: 2em;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
+}
+button.m3.m3-icon-button.default {
+  fill: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.default.selected.toggled {
+  fill: var(--md-sys-color-primary);
+}
+button.m3.m3-icon-button.filled {
+  fill: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+}
+button.m3.m3-icon-button.filled.toggled {
+  fill: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+button.m3.m3-icon-button.filled.selected.toggled {
+  fill: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+}
+button.m3.m3-icon-button.tonal.toggled {
+  fill: var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
+  fill: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+}
+button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button.outlined {
+  border: 1px solid var(--md-sys-color-outline);
+  fill: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.outlined:disabled {
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.outlined.toggled.selected:disabled {
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button.outlined.selected.toggled {
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-color: var(--md-sys-color-inverse-surface);
+  fill: var(--md-sys-color-inverse-on-surface);
+}
+button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+}
+button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+
+/*# sourceMappingURL=icon-button.css.map */
diff --git a/src/styles/icon-button.css.map b/src/styles/button-styles/icon-button.css.map
similarity index 100%
rename from src/styles/icon-button.css.map
rename to src/styles/button-styles/icon-button.css.map
diff --git a/src/styles/icon-button.sass b/src/styles/button-styles/icon-button.sass
similarity index 99%
rename from src/styles/icon-button.sass
rename to src/styles/button-styles/icon-button.sass
index 295d021..9b947a9 100644
--- a/src/styles/icon-button.sass
+++ b/src/styles/button-styles/icon-button.sass
@@ -1,5 +1,3 @@
-@import "mixins/m3-mixins"
-
 button.m3.m3-icon-button
     transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
     contain: content
diff --git a/src/styles/button.css.map b/src/styles/button.css.map
deleted file mode 100644
index 48749c7..0000000
--- a/src/styles/button.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
\ No newline at end of file
diff --git a/src/styles/card.css b/src/styles/card.css
new file mode 100644
index 0000000..9a83c75
--- /dev/null
+++ b/src/styles/card.css
@@ -0,0 +1,8 @@
+div.m3.m3-card {
+  min-width: 160px;
+  min-height: 64px;
+  display: flex;
+  border: 2px dashed green;
+}
+
+/*# sourceMappingURL=card.css.map */
diff --git a/src/styles/card.css.map b/src/styles/card.css.map
new file mode 100644
index 0000000..cb5f544
--- /dev/null
+++ b/src/styles/card.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["card.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA","file":"card.css"}
\ No newline at end of file
diff --git a/src/styles/card.sass b/src/styles/card.sass
new file mode 100644
index 0000000..b15c72e
--- /dev/null
+++ b/src/styles/card.sass
@@ -0,0 +1,51 @@
+@import 'mixins/m3-mixins'
+
+div.m3.m3-card-action-area
+    width: 100%
+    height: 100%
+    cursor: pointer
+    contain: content
+    position: relative
+    border-radius: inherit
+    transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
+
+    & > div.m3.m3-card-action-area-content
+        position: absolute
+
+    & > span.m3.m3-card-state-layer
+        width: 100%
+        height: 100%
+        position: absolute
+        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+
+    &:hover
+        & > span.m3.m3-card-state-layer
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
+
+    &:is(&:focus, &:focus-visible, &:focus-within)
+        & > span.m3.m3-card-state-layer
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+
+    &:is(&:focus, &:focus-visible, &:focus-within, &:hover)
+        &:is(.m3-card-outlined, .m3-card-filled)
+            @include elevation-1(false)
+
+        &.m3-card-elevated
+            @include elevation-2(false)
+
+    &:active
+        &:is(.m3-card-outlined, .m3-card-filled)
+            @include elevation-0(true)
+
+        &.m3-card-elevated
+            @include elevation-1(true)
+
+        &:not(&:has(span.m3.m3-ripple-domain))
+            & > span.m3.m3-card-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+
+        & > span.m3.m3-card-state-layer
+            background-color: transparent
+
+        & > span.m3.m3-ripple-domain > .m3.ripple
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
diff --git a/src/styles/checkbox.css b/src/styles/checkbox.css
deleted file mode 100644
index eafbab2..0000000
--- a/src/styles/checkbox.css
+++ /dev/null
@@ -1,190 +0,0 @@
-label.m3.m3-checkbox-label {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
-  position: absolute;
-  width: 2.5rem;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-
-span.m3.m3-checkbox-ripple-layer {
-  z-index: 20;
-  contain: content;
-  border-radius: 50%;
-  position: absolute;
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-input[type="checkbox"].m3.m3-checkbox {
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: content-box;
-  z-index: 10;
-  width: 1.125rem;
-  height: 1.125rem;
-  margin: 0;
-  outline-offset: -0.14rem;
-  border-radius: 0.14rem;
-  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-input[type="checkbox"].m3.m3-checkbox:is(
-    :user-invalid:is(:checked, :indeterminate),
-    .m3.m3-error:is(:checked, :indeterminate)
-  ) {
-  outline-color: var(--md-sys-color-error);
-  background-color: var(--md-sys-color-error);
-}
-input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
-  outline-color: var(--md-sys-color-error);
-}
-input[type="checkbox"].m3.m3-checkbox:is(
-    :checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
-        .m3.m3-error,
-        :disabled
-      ),
-    :indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
-        .m3.m3-error,
-        :disabled
-      )
-  ) {
-  outline-color: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-primary);
-}
-input[type="checkbox"].m3.m3-checkbox:disabled:is(
-    :hover,
-    input[type="checkbox"].m3.m3-checkbox:disabled
-  ) {
-  opacity: 38%;
-  border: 2px solid var(--md-sys-color-on-surface);
-}
-input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
-    :hover,
-    input[type="checkbox"].m3.m3-checkbox:disabled
-  ) {
-  opacity: 38%;
-  background-color: var(--md-sys-color-on-surface);
-}
-input[type="checkbox"].m3.m3-checkbox::after {
-  line-height: 1.125rem;
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-weight: 700;
-  font-size: 1.125rem;
-  color: var(--md-sys-color-on-primary);
-}
-input[type="checkbox"].m3.m3-checkbox:checked::after {
-  content: "done";
-}
-input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
-  content: "check_indeterminate_small";
-}
-input[type="checkbox"].m3.m3-checkbox:hover {
-  outline-color: var(--md-sys-color-on-surface);
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :user-invalid:is(:hover, :indeterminate:hover),
-    .m3.m3-error:hover
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-error) 8%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :user-invalid:is(:active, :indeterminate:active),
-    .m3.m3-error:active
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-error) 12%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :user-invalid:is(:active, :indeterminate:active),
-    .m3.m3-error:active
-  )
-  + span.m3.m3-checkbox-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-error) 20%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :checked:hover,
-    :indeterminate:hover
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-checkbox-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 20%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
-  + span.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 8%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
-}
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
-  + span.m3.m3-checkbox-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 20%,
-    transparent
-  );
-}
-
-/*# sourceMappingURL=checkbox.css.map */
diff --git a/src/styles/container.css b/src/styles/container.css
new file mode 100644
index 0000000..ce6cdd8
--- /dev/null
+++ b/src/styles/container.css
@@ -0,0 +1,17 @@
+/* Error: Undefined mixin.
+ *    ,
+ * 21 |         @include elevation-1(false)
+ *    |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *    '
+ *   container.sass 21:9  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Undefined mixin.\a    \2577 \a 21 \2502          @include elevation-1(false)\a    \2502          ^^^^^^^^^^^^^^^^^^^^^^^^^^^\a    \2575 \a   container.sass 21:9  root stylesheet";
+}
diff --git a/src/styles/container.css.map b/src/styles/container.css.map
new file mode 100644
index 0000000..4ac8d4b
--- /dev/null
+++ b/src/styles/container.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"container.css"}
\ No newline at end of file
diff --git a/src/styles/container.sass b/src/styles/container.sass
new file mode 100644
index 0000000..c130e77
--- /dev/null
+++ b/src/styles/container.sass
@@ -0,0 +1,20 @@
+@import "mixins/m3-mixins"
+
+div.m3.m3-container
+    display: block
+    border-radius: 12px
+    position: relative
+    contain: content
+    transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
+
+    &.m3-container-filled
+        background-color: var(--md-sys-color-surface-container-highest)
+
+    &.m3-container-outlined
+        background-color: var(--md-sys-color-surface)
+        outline-offset: -1px
+        outline: 1px solid var(--md-sys-color-outline-variant)
+
+    &.m3-container-elevated
+        @include elevation-1(false)
+        background-color: var(--md-sys-color-surface-container-low)
\ No newline at end of file
diff --git a/src/styles/fabs.css b/src/styles/fabs.css
deleted file mode 100644
index 9f380c0..0000000
--- a/src/styles/fabs.css
+++ /dev/null
@@ -1,211 +0,0 @@
-button.m3.m3-fab {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-}
-button.m3.m3-fab > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-}
-button.m3.m3-fab.m3 {
-  contain: content;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  border: none;
-  gap: 12px;
-}
-button.m3.m3-fab::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0);
-}
-button.m3.m3-fab.surface {
-  background-color: var(--md-sys-color-surface-container-high);
-  color: var(--md-sys-color-primary);
-}
-button.m3.m3-fab.surface:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab.surface > svg.m3-svg-icon {
-  fill: var(--md-sys-color-primary);
-}
-button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-fab.primary {
-  background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-on-primary-container);
-}
-button.m3.m3-fab.primary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab.primary > svg.m3-svg-icon {
-  fill: var(--md-sys-color-on-primary-container);
-}
-button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-fab.secondary {
-  background-color: var(--md-sys-color-secondary-container);
-  color: var(--md-sys-color-on-secondary-container);
-}
-button.m3.m3-fab.secondary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab.secondary > svg.m3-svg-icon {
-  fill: var(--md-sys-color-on-secondary-container);
-}
-button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-fab.tertiary {
-  background-color: var(--md-sys-color-tertiary-container);
-  color: var(--md-sys-color-on-tertiary-container);
-}
-button.m3.m3-fab.tertiary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab.tertiary > svg.m3-svg-icon {
-  fill: var(--md-sys-color-on-tertiary-container);
-}
-button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-tertiary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-fab.m3-small-fab {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  padding: 11px;
-  font-size: 24px;
-}
-button.m3.m3-fab.m3-default-fab {
-  width: 56px;
-  height: 56px;
-  border-radius: 16px;
-  padding: 19px;
-  font-size: 24px;
-}
-button.m3.m3-fab.m3-large-fab {
-  width: 96px;
-  height: 96px;
-  border-radius: 28px;
-  padding: 34.5px;
-  font-size: 36px;
-}
-button.m3.m3-fab.m3-extended-fab {
-  width: auto;
-  height: 56px;
-  border-radius: 16px;
-  padding: 19px;
-  font-size: 24px;
-}
-button.m3.m3-fab:not(.without-elevation):is(
-    .surface,
-    .primary,
-    .secondary,
-    .tertiary
-  ):hover {
-  box-shadow:
-    0 2px 3px 0 rgba(0, 0, 0, 0.3),
-    0 6px 10px 4px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab:not(.without-elevation):is(
-    .surface,
-    .primary,
-    .secondary,
-    .tertiary
-  ):active {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
-}
-button.m3.m3-fab:hover.surface::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
-}
-button.m3.m3-fab:hover.primary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary-container) 8%,
-    transparent
-  );
-}
-button.m3.m3-fab:hover.secondary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 8%,
-    transparent
-  );
-}
-button.m3.m3-fab:hover.tertiary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-tertiary-container) 8%,
-    transparent
-  );
-}
-button.m3.m3-fab:focus-visible.surface::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
-}
-button.m3.m3-fab:focus-visible.primary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-fab:focus-visible.secondary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-fab:focus-visible.tertiary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-tertiary-container) 12%,
-    transparent
-  );
-}
-
-/*# sourceMappingURL=fabs.css.map */
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 05a0824..67bfd94 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -1,407 +1,210 @@
-@import url(./themes/tokens.css);
-@import url(./themes/colors.module.css);
-@import url(./themes/typography.module.css);
+@import "./themes/tokens.css";
+@import "./themes/colors.module.css";
+@import "./themes/typography.module.css";
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
-button.m3.m3-fab {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
-  button.m3.m3-fab > span.m3-icon {
-    font-family: Material-Symbols-Outlined-Regular, sans-serif; }
-  button.m3.m3-fab.m3 {
-    contain: content;
-    box-sizing: border-box;
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    border: none;
-    gap: 12px; }
-  button.m3.m3-fab::before {
-    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-    content: "";
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
-    background: #00000000; }
-  button.m3.m3-fab.surface {
-    background-color: var(--md-sys-color-surface-container-high);
-    color: var(--md-sys-color-primary); }
-    button.m3.m3-fab.surface:not(.without-elevation) {
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
-    button.m3.m3-fab.surface > svg.m3-svg-icon {
-      fill: var(--md-sys-color-primary); }
-    button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
-      background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button.m3.m3-fab.primary {
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container); }
-    button.m3.m3-fab.primary:not(.without-elevation) {
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
-    button.m3.m3-fab.primary > svg.m3-svg-icon {
-      fill: var(--md-sys-color-on-primary-container); }
-    button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
-      background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
-  button.m3.m3-fab.secondary {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container); }
-    button.m3.m3-fab.secondary:not(.without-elevation) {
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
-    button.m3.m3-fab.secondary > svg.m3-svg-icon {
-      fill: var(--md-sys-color-on-secondary-container); }
-    button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
-      background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button.m3.m3-fab.tertiary {
-    background-color: var(--md-sys-color-tertiary-container);
-    color: var(--md-sys-color-on-tertiary-container); }
-    button.m3.m3-fab.tertiary:not(.without-elevation) {
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
-    button.m3.m3-fab.tertiary > svg.m3-svg-icon {
-      fill: var(--md-sys-color-on-tertiary-container); }
-    button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
-      background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
-  button.m3.m3-fab.m3-small-fab {
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
-    padding: 11px;
-    font-size: 24px; }
-  button.m3.m3-fab.m3-default-fab {
-    width: 56px;
-    height: 56px;
-    border-radius: 16px;
-    padding: 19px;
-    font-size: 24px; }
-  button.m3.m3-fab.m3-large-fab {
-    width: 96px;
-    height: 96px;
-    border-radius: 28px;
-    padding: 34.5px;
-    font-size: 36px; }
-  button.m3.m3-fab.m3-extended-fab {
-    width: auto;
-    height: 56px;
-    border-radius: 16px;
-    padding: 19px;
-    font-size: 24px; }
-  button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); }
-  button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; }
-  button.m3.m3-fab:hover.surface::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
-  button.m3.m3-fab:hover.primary::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); }
-  button.m3.m3-fab:hover.secondary::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
-  button.m3.m3-fab:hover.tertiary::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }
-  button.m3.m3-fab:focus-visible.surface::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button.m3.m3-fab:focus-visible.primary::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
-  button.m3.m3-fab:focus-visible.secondary::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button.m3.m3-fab:focus-visible.tertiary::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
+div.m3.m3-card-action-area {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  contain: content;
+  position: relative;
+  border-radius: inherit;
+  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-card-action-area > div.m3.m3-card-action-area-content {
+  position: absolute;
+}
+div.m3.m3-card-action-area > span.m3.m3-card-state-layer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within) > span.m3.m3-card-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover):is(.m3-card-outlined, .m3-card-filled) {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+}
+div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover).m3-card-elevated {
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+}
+div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) {
+  box-shadow: none !important;
+}
+div.m3.m3-card-action-area:active.m3-card-elevated {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
+}
+div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+div.m3.m3-card-action-area:active > span.m3.m3-card-state-layer {
+  background-color: transparent;
+}
+div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
 
 svg.m3.m3-svg-icon > text {
   alignment-baseline: central;
-  text-anchor: middle; }
+  text-anchor: middle;
+}
 svg.m3.m3-svg-icon > text.m3-size-12px {
   width: 12px;
   aspect-ratio: 1;
   line-height: 12px;
-  font-size: 12px; }
+  font-size: 12px;
+}
 svg.m3.m3-svg-icon > text.m3-size-16px {
   width: 16px;
   aspect-ratio: 1;
   line-height: 16px;
-  font-size: 16px; }
+  font-size: 16px;
+}
 svg.m3.m3-svg-icon > text.m3-size-20px {
   width: 20px;
   aspect-ratio: 1;
   line-height: 20px;
-  font-size: 20px; }
+  font-size: 20px;
+}
 svg.m3.m3-svg-icon > text.m3-size-24px {
   width: 24px;
   aspect-ratio: 1;
   line-height: 24px;
-  font-size: 24px; }
+  font-size: 24px;
+}
 svg.m3.m3-svg-icon > text.m3-size-28px {
   width: 28px;
   aspect-ratio: 1;
   line-height: 28px;
-  font-size: 28px; }
+  font-size: 28px;
+}
 svg.m3.m3-svg-icon > text.m3-size-32px {
   width: 32px;
   aspect-ratio: 1;
   line-height: 32px;
-  font-size: 32px; }
+  font-size: 32px;
+}
 svg.m3.m3-svg-icon > text.m3-size-36px {
   width: 36px;
   aspect-ratio: 1;
   line-height: 36px;
-  font-size: 36px; }
+  font-size: 36px;
+}
 svg.m3.m3-svg-icon > text.m3-size-40px {
   width: 40px;
   aspect-ratio: 1;
   line-height: 40px;
-  font-size: 40px; }
+  font-size: 40px;
+}
 svg.m3.m3-svg-icon > text.m3-size-48px {
   width: 48px;
   aspect-ratio: 1;
   line-height: 48px;
-  font-size: 48px; }
+  font-size: 48px;
+}
 svg.m3.m3-svg-icon > text.m3-Outlined {
-  font-family: Material-Symbols-Outlined-Regular; }
+  font-family: Material-Symbols-Outlined-Regular;
+}
 svg.m3.m3-svg-icon > text.m3-Rounded {
-  font-family: Material-Symbols-Rounded-Regular; }
+  font-family: Material-Symbols-Rounded-Regular;
+}
 svg.m3.m3-svg-icon > text.m3-Sharp {
-  font-family: Material-Symbols-Sharp-Regular; }
-
-div.m3.m3-radio {
-  width: 20px;
-  height: 20px;
-  align-items: center;
-  display: inline-flex;
-  justify-content: center; }
-  div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
-    z-index: 5; }
-  div.m3.m3-radio > span.m3.m3-radio-state-layer {
-    width: 40px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    position: absolute;
-    pointer-events: none;
-    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
-  div.m3.m3-radio > input[type="radio"].m3.m3-radio {
-    margin: 0;
-    width: 20px;
-    height: 20px;
-    aspect-ratio: 1;
-    cursor: pointer;
-    appearance: none;
-    position: absolute; }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
-      background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
-      background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-      div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
-      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
-      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
-      div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
-        background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:disabled:is(:not(:checked), &:checked) ~ svg > circle.m3-radio-outline {
-      stroke-opacity: 38%;
-      stroke: var(--md-sys-color-on-surface); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
-      fill-opacity: 38%;
-      fill: var(--md-sys-color-on-surface); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
-      stroke: var(--md-sys-color-on-surface-variant); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
-      fill-opacity: 0;
-      fill: var(--md-sys-color-primary); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
-      stroke: var(--md-sys-color-primary); }
-    div.m3.m3-radio > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
-      fill-opacity: 1;
-      fill: var(--md-sys-color-primary); }
-  div.m3.m3-radio svg {
-    margin: 0;
-    width: 20px;
-    z-index: 10;
-    border-radius: 50%;
-    pointer-events: none;
-    aspect-ratio: inherit; }
-    div.m3.m3-radio svg > circle {
-      transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1); }
-      div.m3.m3-radio svg > circle.m3-radio-outline {
-        r: 9px;
-        fill: black;
-        fill-opacity: 0;
-        stroke-width: 2px;
-        stroke: var(--md-sys-color-on-surface-variant); }
-      div.m3.m3-radio svg > circle.m3-radio-state {
-        r: 5px; }
+  font-family: Material-Symbols-Sharp-Regular;
+}
 
 svg.m3.m3-badge {
   position: absolute;
-  background-color: var(--md-sys-color-error); }
-  svg.m3.m3-badge.disable-value {
-    padding: 0;
-    height: 6px;
-    width: 6px;
-    border-radius: 3px; }
-    svg.m3.m3-badge.disable-value > text {
-      display: none; }
-  svg.m3.m3-badge {
-    border-radius: 8px;
-    height: 16px; }
-  svg.m3.m3-badge > text {
-    fill: var(--md-sys-color-on-error);
-    font-size: var(--md-sys-typescale-label-small-font-size);
-    font-weight: var(--md-sys-typescale-label-small-font-weight);
-    line-height: var(--md-sys-typescale-label-small-line-height);
-    font-optical-sizing: none;
-    alignment-baseline: central;
-    text-anchor: middle;
-    display: flex;
-    align-items: center;
-    justify-content: center; }
+  background-color: var(--md-sys-color-error);
+}
+svg.m3.m3-badge.disable-value {
+  padding: 0;
+  height: 6px;
+  width: 6px;
+  border-radius: 3px;
+}
+svg.m3.m3-badge.disable-value > text {
+  display: none;
+}
+svg.m3.m3-badge {
+  border-radius: 8px;
+  height: 16px;
+}
+svg.m3.m3-badge > text {
+  fill: var(--md-sys-color-on-error);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  font-optical-sizing: none;
+  alignment-baseline: central;
+  text-anchor: middle;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 @font-face {
   font-family: Material-Symbols-Rounded-Regular;
   src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
+}
 @font-face {
   font-family: Material-Symbols-Outlined-Regular;
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
+  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
+}
 @font-face {
   font-family: Material-Symbols-Sharp-Regular;
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
+  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
+}
 @font-face {
   font-family: Roboto;
   font-face-name: Thin;
   font-weight: 100;
-  src: url("./font/Roboto-Thin.ttf"); }
+  src: url("./font/Roboto-Thin.ttf");
+}
 @font-face {
   font-family: Roboto;
   font-face-name: Light;
   font-weight: 300;
-  src: url("./font/Roboto-Light.ttf"); }
+  src: url("./font/Roboto-Light.ttf");
+}
 @font-face {
   font-family: Roboto;
   font-face-name: Regular;
   font-weight: 400;
-  src: url("./font/Roboto-Regular.ttf"); }
+  src: url("./font/Roboto-Regular.ttf");
+}
 @font-face {
   font-family: Roboto;
   font-face-name: Medium;
   font-weight: 500;
-  src: url("./font/Roboto-Medium.ttf"); }
+  src: url("./font/Roboto-Medium.ttf");
+}
 @font-face {
   font-family: Roboto;
   font-face-name: Bold;
   font-weight: 700;
-  src: url("./font/Roboto-Bold.ttf"); }
+  src: url("./font/Roboto-Bold.ttf");
+}
 @font-face {
   font-family: Roboto;
   font-face-name: Black;
   font-weight: 900;
-  src: url("./font/Roboto-Black.ttf"); }
-button:not(.m3-fab, .m3-icon-button) {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
-  font-size: var(--md-sys-typescale-label-large-font-size);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-  box-sizing: border-box; }
-  button:not(.m3-fab, .m3-icon-button).m3 {
-    contain: content;
-    box-sizing: border-box;
-    border-radius: 100px;
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 10px 24px;
-    border: none;
-    gap: 8px; }
-  button:not(.m3-fab, .m3-icon-button).filled {
-    background-color: var(--md-sys-color-primary); }
-    button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
-      color: var(--md-sys-color-on-primary);
-      fill: var(--md-sys-color-on-primary); }
-  button:not(.m3-fab, .m3-icon-button).outlined {
-    outline-offset: -1px;
-    outline: 1px solid var(--md-sys-color-outline) !important;
-    background-color: #00000000;
-    color: var(--md-sys-color-primary); }
-    button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
-      fill: var(--md-sys-color-primary); }
-  button:not(.m3-fab, .m3-icon-button).text {
-    padding: 10px 12px !important;
-    background-color: #00000000;
-    color: var(--md-sys-color-primary); }
-    button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
-      fill: var(--md-sys-color-primary); }
-  button:not(.m3-fab, .m3-icon-button).elevated {
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    background-color: var(--md-sys-color-surface-container-low);
-    color: var(--md-sys-color-primary); }
-    button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
-      fill: var(--md-sys-color-primary); }
-  button:not(.m3-fab, .m3-icon-button).tonal {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container); }
-    button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
-      fill: var(--md-sys-color-on-secondary-container); }
-  button:not(.m3-fab, .m3-icon-button)::before {
-    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-    content: "";
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
-    background: #00000000; }
-  button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
-    background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
-    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
-    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
-    box-shadow: none !important; }
-  button:not(.m3-fab, .m3-icon-button):active.elevated {
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
-  button:not(.m3-fab, .m3-icon-button):active.tonal::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
-    border-color: var(--md-sys-color-primary) !important; }
-  button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
-  button:not(.m3-fab, .m3-icon-button):hover.elevated {
-    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
-  button:not(.m3-fab, .m3-icon-button):hover.filled::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
-  button:not(.m3-fab, .m3-icon-button):disabled {
-    pointer-events: none; }
-    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
-      color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
-    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
-      background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
-    button:not(.m3-fab, .m3-icon-button):disabled.elevated {
-      box-shadow: none; }
-    button:not(.m3-fab, .m3-icon-button):disabled.outlined {
-      outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }
-
+  src: url("./font/Roboto-Black.ttf");
+}
 .m3.m3-ripple-domain {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 20;
-  pointer-events: none; }
+  pointer-events: none;
+}
 
 .m3.ripple {
   position: absolute;
@@ -415,401 +218,337 @@ button:not(.m3-fab, .m3-icon-button) {
   animation-name: rippleAppearanceAnimation;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   animation-duration: 0.55s;
-  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
-  .m3.ripple.visible {
-    opacity: 1 !important; }
+  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.m3.ripple.visible {
+  opacity: 1 !important;
+}
 
 @keyframes rippleAppearanceAnimation {
   0% {
-    transform: scale3d(0, 0, 0); }
+    transform: scale3d(0, 0, 0);
+  }
   100% {
-    transform: scale3d(1, 1, 1); } }
-div.m3.m3-switch {
-  margin: 4px;
-  gap: 20px;
-  box-sizing: content-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 52px;
-  height: 32px; }
-  div.m3.m3-switch > svg {
-    overflow: visible;
-    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    width: 52px;
-    height: 32px; }
-    div.m3.m3-switch > svg > g {
-      transform: translate(11.5%, 81%);
-      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-      div.m3.m3-switch > svg > g > text {
-        font-family: Material-Symbols-Outlined-Regular;
-        font-size: 20px; }
-    div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
-      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      cy: 50%;
-      cx: 16px; }
-    div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
-      r: 20px;
-      fill-opacity: 0; }
-    div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
-      r: 8px; }
-    div.m3.m3-switch > svg > rect.m3.m3-switch-track {
-      transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      stroke-width: 2px;
-      border-radius: 16px;
-      rx: 15px;
-      width: 50px;
-      height: 30px; }
-  div.m3.m3-switch > input.m3 {
-    cursor: pointer;
-    appearance: none;
-    opacity: 0 !important;
-    margin: 0;
-    width: 52px;
-    height: 32px;
-    position: absolute; }
-    div.m3.m3-switch > input.m3:disabled {
-      cursor: not-allowed; }
-    div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
-      fill: var(--md-sys-color-outline); }
-    div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
-      transform: translate(50%, 81%); }
-    div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
-      fill: var(--md-sys-color-on-primary); }
-    div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
-      fill: var(--md-sys-color-on-primary); }
-    div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
-      fill: var(--md-sys-color-on-primary-container); }
-    div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
-      fill: var(--md-sys-color-surface); }
-    div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
-      r: 12px; }
-    div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
-      opacity: 0; }
-    div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
-      cx: calc(100% - 16px); }
-    div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
-      opacity: 0; }
-    div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler {
-      r: 14px; }
-    div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
-      fill: var(--md-sys-color-on-surface);
-      fill-opacity: 38%; }
-    div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
-      fill: var(--md-sys-color-primary-container); }
-    div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-      fill: var(--md-sys-color-primary);
-      fill-opacity: 8%; }
-    div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
-      fill: var(--md-sys-color-on-surface-variant); }
-    div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-      fill: var(--md-sys-color-on-surface);
-      fill-opacity: 8%; }
-    div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-      fill: var(--md-sys-color-primary);
-      fill-opacity: 12%; }
-    div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-      fill: var(--md-sys-color-on-surface);
-      fill-opacity: 12%; }
-    div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
-      rx: 16px;
-      width: 52px;
-      height: 32px;
-      stroke-width: 0; }
-    div.m3.m3-switch > input.m3:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
-      x: 1px;
-      y: 1px; }
-    div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
-      stroke: var(--md-sys-color-outline);
-      fill: var(--md-sys-color-surface-container-highest); }
-    div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
-      stroke: var(--md-sys-color-primary);
-      fill: var(--md-sys-color-primary); }
-    div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
-      fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); }
-    div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
-      stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-      fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); }
-    div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
-      transform: translateX(38.5%);
-      fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
-    div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
-      stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
-      fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
-
+    transform: scale3d(1, 1, 1);
+  }
+}
 hr.m3.m3-divider {
   border: none;
   outline: 0.5px solid var(--md-sys-color-outline-variant);
   position: relative;
-  margin: 0; }
-  hr.m3.m3-divider.vertical {
-    height: auto;
-    writing-mode: vertical-lr; }
-    hr.m3.m3-divider.vertical.inset {
-      margin-inline-start: 16px; }
-    hr.m3.m3-divider.vertical.middle-inset {
-      margin-inline: 16px; }
-  hr.m3.m3-divider.horizontal {
-    width: auto;
-    writing-mode: horizontal-tb; }
-    hr.m3.m3-divider.horizontal.inset {
-      margin-inline-start: 16px; }
-    hr.m3.m3-divider.horizontal.middle-inset {
-      margin-inline: 16px; }
-
-label.m3.m3-checkbox-label {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-  width: 18px;
-  height: 18px; }
-  label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
-    position: absolute;
-    width: 2.5rem;
-    aspect-ratio: inherit;
-    border-radius: 50%;
-    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
-
-span.m3.m3-checkbox-ripple-layer {
-  z-index: 20;
-  width: 2.5rem;
-  height: 2.5rem;
-  contain: content;
-  border-radius: 50%;
-  position: absolute; }
-
-input[type="checkbox"].m3.m3-checkbox {
   margin: 0;
-  z-index: 10;
-  display: flex;
-  width: 1.125rem;
-  height: 1.125rem;
-  appearance: none;
-  position: absolute;
-  align-items: center;
-  border-radius: 0.14rem;
-  box-sizing: content-box;
-  justify-content: center;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
-  input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state {
-    transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
-    color: var(--md-sys-color-on-surface-variant); }
-  input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
-    background: var(--md-sys-color-on-error); }
-    input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state {
-      color: var(--md-sys-color-error); }
-  input[type="checkbox"].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state {
-    color: var(--md-sys-color-error); }
-  input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) {
-    background: var(--md-sys-color-on-primary); }
-    input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state {
-      color: var(--md-sys-color-primary); }
-  input[type="checkbox"].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state {
-    color: var(--md-sys-color-on-surface); }
-  input[type="checkbox"].m3.m3-checkbox:disabled ~ *:is(:hover, &, :checked) {
-    opacity: 38%; }
-  input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state {
-    pointer-events: none;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 24px;
-    font-family: Material-Symbols-Outlined-Regular, sans-serif;
-    font-weight: 700;
-    font-size: 24px;
-    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
-  input[type="checkbox"].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before {
-    content: "check_box_outline_blank"; }
-  input[type="checkbox"].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before {
-    content: "indeterminate_check_box"; }
-  input[type="checkbox"].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before {
-    content: "check_box"; }
-  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer {
-    background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent); }
-  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
-    background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); }
-    input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
-      background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent); }
-  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
-  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-    input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
-      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); }
-  input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
-  input[type="checkbox"].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
-    input[type="checkbox"].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
-      background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
+}
+hr.m3.m3-divider.vertical {
+  height: auto;
+  writing-mode: vertical-lr;
+}
+hr.m3.m3-divider.vertical.inset {
+  margin-inline-start: 16px;
+}
+hr.m3.m3-divider.vertical.middle-inset {
+  margin-inline: 16px;
+}
+hr.m3.m3-divider.horizontal {
+  width: auto;
+  writing-mode: horizontal-tb;
+}
+hr.m3.m3-divider.horizontal.inset {
+  margin-inline-start: 16px;
+}
+hr.m3.m3-divider.horizontal.middle-inset {
+  margin-inline: 16px;
+}
 
-div.m3.m3-text-field {
+div.m3.m3-container {
+  display: block;
+  border-radius: 12px;
   position: relative;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
+  contain: content;
+  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-container.m3-container-filled {
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+div.m3.m3-container.m3-container-outlined {
+  background-color: var(--md-sys-color-surface);
+  outline-offset: -1px;
+  outline: 1px solid var(--md-sys-color-outline-variant);
+}
+div.m3.m3-container.m3-container-elevated {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: var(--md-sys-color-surface-container-low);
+}
+
+button.m3.m3-fab {
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+}
+button.m3.m3-fab > span.m3-icon {
+  font-family: Material-Symbols-Outlined-Regular, sans-serif;
+}
+button.m3.m3-fab.m3 {
+  contain: content;
   box-sizing: border-box;
-  margin: 0; }
-  div.m3.m3-text-field span.m3-icon.icon-before {
-    align-self: start; }
-  div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
-    line-height: var(--md-sys-typescale-body-large-line-height);
-    font-size: var(--md-sys-typescale-body-large-font-size); }
-  div.m3.m3-text-field + span.m3-text-field-supporting-text {
-    display: flex;
-    line-height: var(--md-sys-typescale-body-small-line-height);
-    font-size: var(--md-sys-typescale-body-small-font-size);
-    color: var(--md-sys-color-on-surface-variant);
-    margin: 4px 16px 2px 16px; }
-  div.m3.m3-text-field > label {
-    padding-inline: 4px;
-    pointer-events: none;
-    transform: translate(16px, 0);
-    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-    position: absolute; }
-  div.m3.m3-text-field > input {
-    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-    background-color: transparent;
-    border: none; }
-  div.m3.m3-text-field > span.m3-icon {
-    position: absolute;
-    align-self: end;
-    margin: 12px;
-    width: 24px;
-    line-height: 24px;
-    font-size: 24px;
-    display: inherit;
-    align-items: center;
-    justify-content: inherit;
-    cursor: pointer;
-    color: var(--md-sys-color-on-surface-variant);
-    font-family: Material-Symbols-Outlined-Regular, serif; }
-  div.m3.m3-text-field > span.m3-text-field-state-layer {
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    position: absolute; }
-  div.m3.m3-text-field > input, div.m3.m3-text-field > label {
-    color: var(--md-sys-color-on-surface); }
-  div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
-    color: var(--md-sys-color-on-surface-variant); }
-  div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
-    outline: none;
-    caret-color: var(--md-sys-color-primary); }
-  div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
-    opacity: 38%; }
-  div.m3.m3-text-field.filled {
-    contain: content;
-    border-radius: 4px 4px 0 0; }
-    div.m3.m3-text-field.filled > input {
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      border-radius: 4px 4px 0 0;
-      background-color: var(--md-sys-color-surface-container-highest);
-      box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); }
-      div.m3.m3-text-field.filled > input.with-after-icon {
-        padding: 24px 48px 8px 16px; }
-      div.m3.m3-text-field.filled > input.with-before-icon {
-        padding: 24px 16px 8px 48px; }
-      div.m3.m3-text-field.filled > input.with-before-icon + label {
-        margin-left: 32px; }
-      div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
-        padding: 24px 16px 8px; }
-      div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
-        padding: 24px 48px 8px 48px; }
-    div.m3.m3-text-field.filled > label.raised {
-      transform: translate(12px, -12px);
-      line-height: var(--md-sys-typescale-body-small-line-height);
-      font-size: var(--md-sys-typescale-body-small-font-size); }
-    div.m3.m3-text-field.filled > input:required:user-invalid {
-      caret-color: var(--md-sys-color-error); }
-      div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
-        box-shadow: inset 0 -3px 0 var(--md-sys-color-error); }
-      div.m3.m3-text-field.filled > input:required:user-invalid {
-        box-shadow: inset 0 -1px 0 var(--md-sys-color-error); }
-    div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
-      color: var(--md-sys-color-error); }
-    div.m3.m3-text-field.filled > input:focus-visible {
-      outline-offset: 3px;
-      box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); }
-    div.m3.m3-text-field.filled > input:focus-visible + label {
-      color: var(--md-sys-color-primary); }
-    div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
-      transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
-  div.m3.m3-text-field.outlined > fieldset {
-    margin: 0;
-    position: absolute;
-    border-radius: 4px;
-    pointer-events: none;
-    padding-inline: 12px;
-    border: 1px solid var(--md-sys-color-outline);
-    inset: -7.5px 0px 0px 0px;
-    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
-    div.m3.m3-text-field.outlined > fieldset > legend > span {
-      width: 100%; }
-    div.m3.m3-text-field.outlined > fieldset > legend {
-      opacity: 0;
-      width: 0;
-      padding: 0;
-      pointer-events: none;
-      border: 0 solid transparent;
-      transition: 0.05s cubic-bezier(0.2, 0, 0, 1); }
-    div.m3.m3-text-field.outlined > fieldset > legend.raised {
-      border-inline-width: 6px;
-      border-style: solid;
-      border-color: transparent;
-      width: auto;
-      visibility: visible; }
-  div.m3.m3-text-field.outlined > input {
-    box-sizing: border-box;
-    border-radius: 4px; }
-    div.m3.m3-text-field.outlined > input.with-after-icon {
-      padding: 16px 48px 16px 16px; }
-    div.m3.m3-text-field.outlined > input.with-before-icon {
-      padding: 16px 16px 16px 48px; }
-    div.m3.m3-text-field.outlined > input.with-before-icon + label {
-      transform: translate(48px, 0); }
-    div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
-      padding: 16px; }
-    div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
-      padding: 16px 48px; }
-  div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
-    border: 3px solid var(--md-sys-color-primary); }
-  div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-inline-width: 5.5px;
-    border-style: solid;
-    border-color: transparent; }
-  div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-inline-width: 7.5px;
-    border-style: solid;
-    border-color: transparent; }
-  div.m3.m3-text-field.outlined > input:focus-visible + label {
-    color: var(--md-sys-color-primary); }
-  div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
-    line-height: var(--md-sys-typescale-body-small-line-height);
-    font-size: var(--md-sys-typescale-body-small-font-size); }
-  div.m3.m3-text-field.outlined > label.raised {
-    transform: translate(16px, -27px) !important; }
-  div.m3.m3-text-field.outlined > input:required:user-invalid {
-    caret-color: var(--md-sys-color-error); }
-  div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
-    color: var(--md-sys-color-error); }
-  div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
-    border: 3px solid var(--md-sys-color-error); }
-  div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
-    border: 1px solid var(--md-sys-color-error); }
-  div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
-    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-    border-color: var(--md-sys-color-on-surface); }
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: none;
+  gap: 12px;
+}
+button.m3.m3-fab::before {
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  content: "";
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  background: rgba(0, 0, 0, 0);
+}
+button.m3.m3-fab.surface {
+  background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-primary);
+}
+button.m3.m3-fab.surface:not(.without-elevation) {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+button.m3.m3-fab.surface > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
+button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-fab.primary {
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+button.m3.m3-fab.primary:not(.without-elevation) {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+button.m3.m3-fab.primary > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-primary-container);
+}
+button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
+}
+button.m3.m3-fab.secondary {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+button.m3.m3-fab.secondary:not(.without-elevation) {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+button.m3.m3-fab.secondary > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-secondary-container);
+}
+button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button.m3.m3-fab.tertiary {
+  background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+}
+button.m3.m3-fab.tertiary:not(.without-elevation) {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+button.m3.m3-fab.tertiary > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-tertiary-container);
+}
+button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
+}
+button.m3.m3-fab.m3-small-fab {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  padding: 11px;
+  font-size: 24px;
+}
+button.m3.m3-fab.m3-default-fab {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  padding: 19px;
+  font-size: 24px;
+}
+button.m3.m3-fab.m3-large-fab {
+  width: 96px;
+  height: 96px;
+  border-radius: 28px;
+  padding: 34.5px;
+  font-size: 36px;
+}
+button.m3.m3-fab.m3-extended-fab {
+  width: auto;
+  height: 56px;
+  border-radius: 16px;
+  padding: 19px;
+  font-size: 24px;
+}
+button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
+}
+button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
+}
+button.m3.m3-fab:hover.surface::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+button.m3.m3-fab:hover.primary::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
+}
+button.m3.m3-fab:hover.secondary::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
+}
+button.m3.m3-fab:hover.tertiary::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
+}
+button.m3.m3-fab:focus-visible.surface::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-fab:focus-visible.primary::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
+}
+button.m3.m3-fab:focus-visible.secondary::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button.m3.m3-fab:focus-visible.tertiary::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
+}
+
+button:not(.m3-fab, .m3-icon-button) {
+  width: min-content;
+  height: min-content;
+  box-sizing: border-box;
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+}
+button:not(.m3-fab, .m3-icon-button).m3 {
+  gap: 8px;
+  border: none;
+  contain: content;
+  text-align: center;
+  padding: 10px 24px;
+  align-items: center;
+  flex-direction: row;
+  display: inline-flex;
+  border-radius: 100px;
+  box-sizing: border-box;
+  justify-content: center;
+}
+button:not(.m3-fab, .m3-icon-button).filled {
+  background-color: var(--md-sys-color-primary);
+}
+button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-primary);
+  color: var(--md-sys-color-on-primary);
+}
+button:not(.m3-fab, .m3-icon-button).outlined {
+  outline-offset: -1px;
+  background-color: rgba(0, 0, 0, 0);
+  color: var(--md-sys-color-primary);
+  outline: 1px solid var(--md-sys-color-outline) !important;
+}
+button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
+button:not(.m3-fab, .m3-icon-button).text {
+  background-color: rgba(0, 0, 0, 0);
+  padding: 10px 12px !important;
+  color: var(--md-sys-color-primary);
+}
+button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
+button:not(.m3-fab, .m3-icon-button).elevated {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container-low);
+}
+button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
+button:not(.m3-fab, .m3-icon-button).tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+}
+button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-secondary-container);
+}
+button:not(.m3-fab, .m3-icon-button)::before {
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  content: "";
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  background: rgba(0, 0, 0, 0);
+}
+button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
+  box-shadow: none !important;
+}
+button:not(.m3-fab, .m3-icon-button):active.elevated {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
+}
+button:not(.m3-fab, .m3-icon-button):active.tonal::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
+  border-color: var(--md-sys-color-primary) !important;
+}
+button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+}
+button:not(.m3-fab, .m3-icon-button):hover.elevated {
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+}
+button:not(.m3-fab, .m3-icon-button):hover.filled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):disabled {
+  pointer-events: none;
+}
+button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+button:not(.m3-fab, .m3-icon-button):disabled.elevated {
+  box-shadow: none;
+}
+button:not(.m3-fab, .m3-icon-button):disabled.outlined {
+  outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+}
 
 button.m3.m3-icon-button {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
@@ -823,106 +562,707 @@ button.m3.m3-icon-button {
   width: 40px;
   height: 40px;
   border: none;
-  padding: 0; }
-  button.m3.m3-icon-button::before {
-    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-    content: "";
-    width: 100%;
-    height: 100%;
-    position: absolute; }
-  button.m3.m3-icon-button > span.m3-icon {
-    z-index: 25;
-    font-size: 2em;
-    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; }
-  button.m3.m3-icon-button.default {
-    fill: var(--md-sys-color-on-surface-variant);
-    background-color: #00000000; }
-  button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
-    fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-    background-color: #00000000; }
-  button.m3.m3-icon-button.default.selected.toggled {
-    fill: var(--md-sys-color-primary); }
-  button.m3.m3-icon-button.filled {
-    fill: var(--md-sys-color-on-primary);
-    background-color: var(--md-sys-color-primary); }
-  button.m3.m3-icon-button.filled.toggled {
-    fill: var(--md-sys-color-primary);
-    background-color: var(--md-sys-color-surface-container-highest); }
-  button.m3.m3-icon-button.filled.selected.toggled {
-    fill: var(--md-sys-color-on-primary);
-    background-color: var(--md-sys-color-primary); }
-  button.m3.m3-icon-button.tonal.toggled {
-    fill: var(--md-sys-color-on-surface-variant);
-    background-color: var(--md-sys-color-surface-container-highest); }
-  button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
-    fill: var(--md-sys-color-on-secondary-container);
-    background-color: var(--md-sys-color-secondary-container); }
-  button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
-    fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
-  button.m3.m3-icon-button.outlined {
-    border: 1px solid var(--md-sys-color-outline);
-    fill: var(--md-sys-color-on-surface-variant);
-    background-color: #00000000; }
-  button.m3.m3-icon-button.outlined:disabled {
-    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-    fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-    background-color: #00000000; }
-  button.m3.m3-icon-button.outlined.toggled.selected:disabled {
-    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
-    fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
-  button.m3.m3-icon-button.outlined.selected.toggled {
-    border: 1px solid #00000000;
-    background-color: var(--md-sys-color-inverse-surface);
-    fill: var(--md-sys-color-inverse-on-surface); }
-  button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
-  button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
-  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); }
-  button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
-  button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
-  button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
-  button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
-  button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
-  button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
-  button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
-  button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
-  button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
-  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
-  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  padding: 0;
+}
+button.m3.m3-icon-button::before {
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+button.m3.m3-icon-button > span.m3-icon {
+  z-index: 25;
+  font-size: 2em;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
+}
+button.m3.m3-icon-button.default {
+  fill: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.default.selected.toggled {
+  fill: var(--md-sys-color-primary);
+}
+button.m3.m3-icon-button.filled {
+  fill: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+}
+button.m3.m3-icon-button.filled.toggled {
+  fill: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+button.m3.m3-icon-button.filled.selected.toggled {
+  fill: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+}
+button.m3.m3-icon-button.tonal.toggled {
+  fill: var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
+  fill: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+}
+button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button.outlined {
+  border: 1px solid var(--md-sys-color-outline);
+  fill: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.outlined:disabled {
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  background-color: rgba(0, 0, 0, 0);
+}
+button.m3.m3-icon-button.outlined.toggled.selected:disabled {
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button.outlined.selected.toggled {
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-color: var(--md-sys-color-inverse-surface);
+  fill: var(--md-sys-color-inverse-on-surface);
+}
+button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+}
+button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+}
+
+div.m3.m3-radio {
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
+  z-index: 5;
+}
+div.m3.m3-radio > span.m3.m3-radio-state-layer {
+  width: 40px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio {
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  aspect-ratio: 1;
+  cursor: pointer;
+  appearance: none;
+  position: absolute;
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
+  stroke-opacity: 38%;
+  stroke: var(--md-sys-color-on-surface);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
+  fill-opacity: 38%;
+  fill: var(--md-sys-color-on-surface);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
+  stroke: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
+  fill-opacity: 0;
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
+  stroke: var(--md-sys-color-primary);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
+  fill-opacity: 1;
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-radio svg {
+  margin: 0;
+  width: 20px;
+  z-index: 10;
+  border-radius: 50%;
+  pointer-events: none;
+  aspect-ratio: inherit;
+}
+div.m3.m3-radio svg > circle {
+  transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-radio svg > circle.m3-radio-outline {
+  r: 9px;
+  fill: black;
+  fill-opacity: 0;
+  stroke-width: 2px;
+  stroke: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-radio svg > circle.m3-radio-state {
+  r: 5px;
+}
+
+div.m3.m3-switch {
+  margin: 4px;
+  gap: 20px;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 32px;
+}
+div.m3.m3-switch > svg {
+  overflow: visible;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  width: 52px;
+  height: 32px;
+}
+div.m3.m3-switch > svg > g {
+  transform: translate(11.5%, 81%);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+div.m3.m3-switch > svg > g > text {
+  font-family: Material-Symbols-Outlined-Regular;
+  font-size: 20px;
+}
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cy: 50%;
+  cx: 16px;
+}
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
+  r: 20px;
+  fill-opacity: 0;
+}
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
+  r: 8px;
+}
+div.m3.m3-switch > svg > rect.m3.m3-switch-track {
+  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  stroke-width: 2px;
+  border-radius: 16px;
+  rx: 15px;
+  width: 50px;
+  height: 30px;
+}
+div.m3.m3-switch > input.m3 {
+  cursor: pointer;
+  appearance: none;
+  opacity: 0 !important;
+  margin: 0;
+  width: 52px;
+  height: 32px;
+  position: absolute;
+}
+div.m3.m3-switch > input.m3:disabled {
+  cursor: not-allowed;
+}
+div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-outline);
+}
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
+  transform: translate(50%, 81%);
+}
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-primary);
+}
+div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
+  fill: var(--md-sys-color-on-primary);
+}
+div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
+  fill: var(--md-sys-color-on-primary-container);
+}
+div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-surface);
+}
+div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
+  r: 12px;
+}
+div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
+  opacity: 0;
+}
+div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+  cx: calc(100% - 16px);
+}
+div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
+  opacity: 0;
+}
+div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
+  r: 14px;
+}
+div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 38%;
+}
+div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-primary-container);
+}
+div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-primary);
+  fill-opacity: 8%;
+}
+div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 8%;
+}
+div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-primary);
+  fill-opacity: 12%;
+}
+div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 12%;
+}
+div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
+  rx: 16px;
+  width: 52px;
+  height: 32px;
+  stroke-width: 0;
+}
+div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
+  x: 1px;
+  y: 1px;
+}
+div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
+  stroke: var(--md-sys-color-outline);
+  fill: var(--md-sys-color-surface-container-highest);
+}
+div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
+  stroke: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
+  fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
+}
+div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
+}
+div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
+  transform: translateX(38.5%);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+}
+div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+
+label.m3.m3-checkbox-label {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  width: 18px;
+  height: 18px;
+}
+label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
+  position: absolute;
+  width: 2.5rem;
+  aspect-ratio: inherit;
+  border-radius: 50%;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+
+span.m3.m3-checkbox-ripple-layer {
+  z-index: 20;
+  width: 2.5rem;
+  height: 2.5rem;
+  contain: content;
+  border-radius: 50%;
+  position: absolute;
+}
+
+input[type=checkbox].m3.m3-checkbox {
+  margin: 0;
+  z-index: 10;
+  display: flex;
+  width: 1.125rem;
+  height: 1.125rem;
+  appearance: none;
+  position: absolute;
+  align-items: center;
+  border-radius: 0.14rem;
+  box-sizing: content-box;
+  justify-content: center;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
+  transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
+  color: var(--md-sys-color-on-surface-variant);
+}
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
+  background: var(--md-sys-color-on-error);
+}
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-error);
+}
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-error);
+}
+input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
+  background: var(--md-sys-color-on-primary);
+}
+input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-primary);
+}
+input[type=checkbox].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-on-surface);
+}
+input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled ~ *, :checked) {
+  opacity: 38%;
+}
+input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
+  pointer-events: none;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 24px;
+  font-family: Material-Symbols-Outlined-Regular, sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+input[type=checkbox].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before {
+  content: "check_box_outline_blank";
+}
+input[type=checkbox].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before {
+  content: "indeterminate_check_box";
+}
+input[type=checkbox].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before {
+  content: "check_box";
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
+}
+
+div.m3.m3-text-field {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin: 0;
+}
+div.m3.m3-text-field span.m3-icon.icon-before {
+  align-self: start;
+}
+div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+}
+div.m3.m3-text-field + span.m3-text-field-supporting-text {
+  display: flex;
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  color: var(--md-sys-color-on-surface-variant);
+  margin: 4px 16px 2px 16px;
+}
+div.m3.m3-text-field > label {
+  padding-inline: 4px;
+  pointer-events: none;
+  transform: translate(16px, 0);
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+  position: absolute;
+}
+div.m3.m3-text-field > input {
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+  background-color: transparent;
+  border: none;
+}
+div.m3.m3-text-field > span.m3-icon {
+  position: absolute;
+  align-self: end;
+  margin: 12px;
+  width: 24px;
+  line-height: 24px;
+  font-size: 24px;
+  display: inherit;
+  align-items: center;
+  justify-content: inherit;
+  cursor: pointer;
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: Material-Symbols-Outlined-Regular, serif;
+}
+div.m3.m3-text-field > span.m3-text-field-state-layer {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+}
+div.m3.m3-text-field > input, div.m3.m3-text-field > label {
+  color: var(--md-sys-color-on-surface);
+}
+div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
+  outline: none;
+  caret-color: var(--md-sys-color-primary);
+}
+div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
+  opacity: 38%;
+}
+div.m3.m3-text-field.filled {
+  contain: content;
+  border-radius: 4px 4px 0 0;
+}
+div.m3.m3-text-field.filled > input {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 4px 4px 0 0;
+  background-color: var(--md-sys-color-surface-container-highest);
+  box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-text-field.filled > input.with-after-icon {
+  padding: 24px 48px 8px 16px;
+}
+div.m3.m3-text-field.filled > input.with-before-icon {
+  padding: 24px 16px 8px 48px;
+}
+div.m3.m3-text-field.filled > input.with-before-icon + label {
+  margin-left: 32px;
+}
+div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
+  padding: 24px 16px 8px;
+}
+div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
+  padding: 24px 48px 8px 48px;
+}
+div.m3.m3-text-field.filled > label.raised {
+  transform: translate(12px, -12px);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+}
+div.m3.m3-text-field.filled > input:required:user-invalid {
+  caret-color: var(--md-sys-color-error);
+}
+div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
+  box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
+}
+div.m3.m3-text-field.filled > input:required:user-invalid {
+  box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
+}
+div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
+  color: var(--md-sys-color-error);
+}
+div.m3.m3-text-field.filled > input:focus-visible {
+  outline-offset: 3px;
+  box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
+}
+div.m3.m3-text-field.filled > input:focus-visible + label {
+  color: var(--md-sys-color-primary);
+}
+div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+div.m3.m3-text-field.outlined > fieldset {
+  margin: 0;
+  position: absolute;
+  border-radius: 4px;
+  pointer-events: none;
+  padding-inline: 12px;
+  border: 1px solid var(--md-sys-color-outline);
+  inset: -7.5px 0px 0px 0px;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-text-field.outlined > fieldset > legend > span {
+  width: 100%;
+}
+div.m3.m3-text-field.outlined > fieldset > legend {
+  opacity: 0;
+  width: 0;
+  padding: 0;
+  pointer-events: none;
+  border: 0 solid transparent;
+  transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-text-field.outlined > fieldset > legend.raised {
+  border-inline-width: 6px;
+  border-style: solid;
+  border-color: transparent;
+  width: auto;
+  visibility: visible;
+}
+div.m3.m3-text-field.outlined > input {
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+div.m3.m3-text-field.outlined > input.with-after-icon {
+  padding: 16px 48px 16px 16px;
+}
+div.m3.m3-text-field.outlined > input.with-before-icon {
+  padding: 16px 16px 16px 48px;
+}
+div.m3.m3-text-field.outlined > input.with-before-icon + label {
+  transform: translate(48px, 0);
+}
+div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
+  padding: 16px;
+}
+div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
+  padding: 16px 48px;
+}
+div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
+  border: 3px solid var(--md-sys-color-primary);
+}
+div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-inline-width: 5.5px;
+  border-style: solid;
+  border-color: transparent;
+}
+div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-inline-width: 7.5px;
+  border-style: solid;
+  border-color: transparent;
+}
+div.m3.m3-text-field.outlined > input:focus-visible + label {
+  color: var(--md-sys-color-primary);
+}
+div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+}
+div.m3.m3-text-field.outlined > label.raised {
+  transform: translate(16px, -27px) !important;
+}
+div.m3.m3-text-field.outlined > input:required:user-invalid {
+  caret-color: var(--md-sys-color-error);
+}
+div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
+  color: var(--md-sys-color-error);
+}
+div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
+  border: 3px solid var(--md-sys-color-error);
+}
+div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
+  border: 1px solid var(--md-sys-color-error);
+}
+div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+  border-color: var(--md-sys-color-on-surface);
+}
 
 html {
   font-family: Roboto, serif;
   color: var(--md-sys-color-on-surface);
-  background-color: var(--md-sys-color-surface-container); }
+  background-color: var(--md-sys-color-surface-container);
+}
 
 .m3 {
-  user-select: none; }
+  user-select: none;
+}
 
 .m3.m3-wrapper {
   position: relative;
   display: block;
   background-color: var(--md-sys-color-surface);
-  border-radius: 25px; }
+  border-radius: 25px;
+}
 
 /*# sourceMappingURL=generics.css.map */
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index a2c4862..02b48fc 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1,7 +1 @@
-{
-"version": 3,
-"mappings": "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",
-"sources": ["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],
-"names": [],
-"file": "generics.css"
-}
+{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAmBQ;AACA;AACA;AACA;AACA;ACrBR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECWA;;ADRA;ECcA;;ADVA;ECJA;;ADOA;ECDA;;ADKI;EACI;;AAER;EACI;;AAEJ;EACI;;;AE9CR;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;;AAEA;EACI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ACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EZCI;EACA;EACA;EACA;EACA;EYHA;EACA;;AACA;EZIA;EACA;EACA;EACA;EACA;;;AYLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACpGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;Af9LhB;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index 0a65e8a..ba07b43 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -1,15 +1,22 @@
-@import "fabs"
+@import "card"
 @import "icon"
-@import "radio"
 @import "badge"
 @import "fonts"
-@import "button"
 @import "ripple"
-@import "swtich"
 @import "divider"
-@import "checkbox"
-@import "text-field"
-@import "icon-button"
+@import "container"
+
+@import "mixins/m3-mixins"
+
+@import "button-styles/fabs"
+@import "button-styles/button"
+@import "button-styles/icon-button"
+
+@import "input-styles/radio"
+@import "input-styles/swtich"
+@import "input-styles/checkbox"
+@import "input-styles/text-field"
+
 @import "./themes/tokens.css"
 @import "./themes/colors.module.css"
 @import "./themes/typography.module.css"
diff --git a/src/styles/icon-button.css b/src/styles/icon-button.css
deleted file mode 100644
index 6173d2b..0000000
--- a/src/styles/icon-button.css
+++ /dev/null
@@ -1,268 +0,0 @@
-button.m3.m3-icon-button {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  contain: content;
-  border-radius: 50%;
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  padding: 0;
-}
-button.m3.m3-icon-button::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-button.m3.m3-icon-button > span.m3-icon {
-  z-index: 25;
-  font-size: 2em;
-  font-variation-settings:
-    "FILL" 0,
-    "wght" 500,
-    "GRAD" 0,
-    "opsz" 48;
-}
-button.m3.m3-icon-button.default {
-  fill: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.default:disabled,
-button.m3.m3-icon-button.default.selected:disabled,
-button.m3.m3-icon-button.default.selected.toggled:disabled {
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 38%,
-    transparent
-  );
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.default.selected.toggled {
-  fill: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.filled {
-  fill: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.filled.toggled {
-  fill: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-button.m3.m3-icon-button.filled.selected.toggled {
-  fill: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.tonal.toggled {
-  fill: var(--md-sys-color-on-surface-variant);
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-button.m3.m3-icon-button.tonal.selected.toggled,
-button.m3.m3-icon-button.tonal {
-  fill: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-}
-button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
-  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button.outlined {
-  border: 1px solid var(--md-sys-color-outline);
-  fill: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.outlined:disabled {
-  border: 1px solid
-    color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 38%,
-    transparent
-  );
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.outlined.toggled.selected:disabled {
-  border: 1px solid
-    color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
-  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button.outlined.selected.toggled {
-  border: 1px solid rgba(0, 0, 0, 0);
-  background-color: var(--md-sys-color-inverse-surface);
-  fill: var(--md-sys-color-inverse-on-surface);
-}
-button.m3.m3-icon-button.filled:not(:disabled)
-  > .m3.m3-ripple-domain
-  > .m3.ripple,
-button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button.filled:not(:disabled).toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
-    .outlined
-  ).toggled.selected
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
-    .default
-  ).toggled.selected
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-inverse-on-surface) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button.tonal:not(:disabled)
-  > .m3.m3-ripple-domain
-  > .m3.ripple,
-button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button.tonal:not(:disabled).toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 8%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:hover:not(:disabled).filled::before,
-button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 8%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
-button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 8%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 8%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled):is(
-    .default,
-    .outlined
-  )::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
-button.m3.m3-icon-button:focus-visible:not(
-    :disabled
-  ).filled.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
-button.m3.m3-icon-button:focus-visible:not(
-    :disabled
-  ).tonal.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
-}
-
-/*# sourceMappingURL=icon-button.css.map */
diff --git a/src/styles/input-styles/checkbox.css b/src/styles/input-styles/checkbox.css
new file mode 100644
index 0000000..878a477
--- /dev/null
+++ b/src/styles/input-styles/checkbox.css
@@ -0,0 +1,17 @@
+/* Error: Undefined mixin.
+ *   ,
+ * 4 |     @include m3-label-mixin
+ *   |     ^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   checkbox.sass 4:5  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Undefined mixin.\a   \2577 \a 4 \2502      @include m3-label-mixin\a   \2502      ^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   checkbox.sass 4:5  root stylesheet";
+}
diff --git a/src/styles/checkbox.css.map b/src/styles/input-styles/checkbox.css.map
similarity index 100%
rename from src/styles/checkbox.css.map
rename to src/styles/input-styles/checkbox.css.map
diff --git a/src/styles/checkbox.sass b/src/styles/input-styles/checkbox.sass
similarity index 99%
rename from src/styles/checkbox.sass
rename to src/styles/input-styles/checkbox.sass
index b7661b3..50f009c 100644
--- a/src/styles/checkbox.sass
+++ b/src/styles/input-styles/checkbox.sass
@@ -1,5 +1,3 @@
-@import "mixins/m3-mixins"
-
 label.m3.m3-checkbox-label
     @include m3-label-mixin
     width: 18px
diff --git a/src/styles/input-styles/radio.css b/src/styles/input-styles/radio.css
new file mode 100644
index 0000000..9635c7d
--- /dev/null
+++ b/src/styles/input-styles/radio.css
@@ -0,0 +1,91 @@
+@import "../mixins/m3-mixins.css";
+div.m3.m3-radio {
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
+  z-index: 5;
+}
+div.m3.m3-radio > span.m3.m3-radio-state-layer {
+  width: 40px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio {
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  aspect-ratio: 1;
+  cursor: pointer;
+  appearance: none;
+  position: absolute;
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
+  stroke-opacity: 38%;
+  stroke: var(--md-sys-color-on-surface);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
+  fill-opacity: 38%;
+  fill: var(--md-sys-color-on-surface);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
+  stroke: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
+  fill-opacity: 0;
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
+  stroke: var(--md-sys-color-primary);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
+  fill-opacity: 1;
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-radio svg {
+  margin: 0;
+  width: 20px;
+  z-index: 10;
+  border-radius: 50%;
+  pointer-events: none;
+  aspect-ratio: inherit;
+}
+div.m3.m3-radio svg > circle {
+  transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-radio svg > circle.m3-radio-outline {
+  r: 9px;
+  fill: black;
+  fill-opacity: 0;
+  stroke-width: 2px;
+  stroke: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-radio svg > circle.m3-radio-state {
+  r: 5px;
+}
+
+/*# sourceMappingURL=radio.css.map */
diff --git a/src/styles/input-styles/radio.css.map b/src/styles/input-styles/radio.css.map
new file mode 100644
index 0000000..83a9f7a
--- /dev/null
+++ b/src/styles/input-styles/radio.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["radio.sass"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI","file":"radio.css"}
\ No newline at end of file
diff --git a/src/styles/radio.sass b/src/styles/input-styles/radio.sass
similarity index 99%
rename from src/styles/radio.sass
rename to src/styles/input-styles/radio.sass
index a28fb13..c2e0e7d 100644
--- a/src/styles/radio.sass
+++ b/src/styles/input-styles/radio.sass
@@ -1,5 +1,3 @@
-@import "mixins/m3-mixins"
-
 div.m3.m3-radio
     width: 20px
     height: 20px
diff --git a/src/styles/swtich.css b/src/styles/input-styles/swtich.css
similarity index 100%
rename from src/styles/swtich.css
rename to src/styles/input-styles/swtich.css
diff --git a/src/styles/swtich.css.map b/src/styles/input-styles/swtich.css.map
similarity index 100%
rename from src/styles/swtich.css.map
rename to src/styles/input-styles/swtich.css.map
diff --git a/src/styles/swtich.sass b/src/styles/input-styles/swtich.sass
similarity index 100%
rename from src/styles/swtich.sass
rename to src/styles/input-styles/swtich.sass
diff --git a/src/styles/text-field.css b/src/styles/input-styles/text-field.css
similarity index 100%
rename from src/styles/text-field.css
rename to src/styles/input-styles/text-field.css
diff --git a/src/styles/text-field.css.map b/src/styles/input-styles/text-field.css.map
similarity index 100%
rename from src/styles/text-field.css.map
rename to src/styles/input-styles/text-field.css.map
diff --git a/src/styles/text-field.sass b/src/styles/input-styles/text-field.sass
similarity index 100%
rename from src/styles/text-field.sass
rename to src/styles/input-styles/text-field.sass
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..8029042
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,3 @@
+
+@tailwind utilities;
+@tailwind components;
\ No newline at end of file
diff --git a/src/styles/radio.css b/src/styles/radio.css
deleted file mode 100644
index 038157b..0000000
--- a/src/styles/radio.css
+++ /dev/null
@@ -1,115 +0,0 @@
-label.m3.m3-radio-label {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
-  position: absolute;
-  width: 2.5rem;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-
-input[type="radio"].m3.m3-radio {
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  width: 20px;
-  margin: 0;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-input[type="radio"].m3.m3-radio::after {
-  content: "";
-  width: 10px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-}
-input[type="radio"].m3.m3-radio:disabled {
-  border: 2px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-input[type="radio"].m3.m3-radio:checked {
-  border: 2px solid var(--md-sys-color-primary);
-}
-input[type="radio"].m3.m3-radio:checked::after {
-  background-color: var(--md-sys-color-primary);
-}
-input[type="radio"].m3.m3-radio:checked:disabled {
-  border: 2px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-input[type="radio"].m3.m3-radio:checked:disabled::after {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 38%,
-    transparent
-  );
-}
-input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
-}
-input[type="radio"].m3.m3-radio:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
-}
-input[type="radio"].m3.m3-radio:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-radio-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 20%,
-    transparent
-  );
-}
-input[type="radio"].m3.m3-radio:not(:disabled):hover
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 8%,
-    transparent
-  );
-}
-input[type="radio"].m3.m3-radio:not(:disabled):active
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
-}
-input[type="radio"].m3.m3-radio:not(:disabled):active
-  + span.m3.m3-radio-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 20%,
-    transparent
-  );
-}
-
-/*# sourceMappingURL=radio.css.map */
diff --git a/src/styles/radio.css.map b/src/styles/radio.css.map
deleted file mode 100644
index 4dffd1e..0000000
--- a/src/styles/radio.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["radio.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"radio.css"}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..4739d36
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        './app/**/*.{js,ts,jsx,tsx,mdx}',
+        './pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './components/**/*.{js,ts,jsx,tsx,mdx}',
+
+        // Or if using `src` directory:
+        './src/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/primitive-components/*.{js,ts,jsx,tsx,mdx}',
+        './src/primitive-components/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};