首页 发现 帮助
登录
Liontix
/
Scheduler-Frontend
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

added beercss and some templates

liontix 10 月之前
父节点
c002263f1b
当前提交
4cecb8d407
共有 16 个文件被更改，包括 5072 次插入 和 1 次删除
合并视图 显示文件统计
  1. 2 1
      package.json
  2. 3 0
      src/app.html
  3. 15 0
      src/lib/dbdata.ts
  4. 2 0
      src/lib/index.ts
  5. 58 0
      src/lib/modules/EventTables.svelte
  6. 22 0
      src/routes/+layout.svelte
  7. 1 0
      src/routes/+page.svelte
  8. 34 0
      src/routes/bookings/+page.svelte
  9. 19 0
      src/routes/events/+page.svelte
  10. 4257 0
      static/beer.css
  11. 659 0
      static/beer.js
  12. 0 0
      static/beer.min.css
  13. 0 0
      static/beer.min.js
  14. 二进制
      static/material-symbols-outlined.woff2
  15. 二进制
      static/material-symbols-rounded.woff2
  16. 二进制
      static/material-symbols-sharp.woff2

+ 2 - 1
package.json
查看文件 

@@ -30,6 +30,7 @@
 
 		"vite": "^6.0.0"
 
 		"vite": "^6.0.0"
 
 	},
 
 	},
 
 	"dependencies": {
 
 	"dependencies": {
 
-		"@sveltejs/adapter-vercel": "^5.5.2"
 
+		"@sveltejs/adapter-vercel": "^5.5.2",
 
+		"beercss": "^3.8.0"
 
 	}
 
 	}
 
 }
 
 }

+ 3 - 0
src/app.html
查看文件 

@@ -3,6 +3,9 @@
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8" />
 
 		<meta charset="utf-8" />
 
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 
+		<link href="%sveltekit.assets%/beer.min.css" rel="stylesheet">
 
+		<script type="module" src="%sveltekit.assets%/beer.min.js"></script>
 
+
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 		%sveltekit.head%
 
 		%sveltekit.head%
 
 	</head>
 
 	</head>

+ 15 - 0
src/lib/dbdata.ts
查看文件 

@@ -0,0 +1,15 @@
 
+export interface Appointment {
 
+    _id: string;
 
+    user: string;
 
+    title: string;
 
+    description: string;
 
+    dueDate: Date;
 
+    place: string;
 
+    duration: number;
 
+    times: AppointmentTimes[];
 
+}  
+
 
+export interface AppointmentTimes {
 
+    date: Date;
 
+    available: boolean;
 
+}

+ 2 - 0
src/lib/index.ts
查看文件 

@@ -1 +1,3 @@
 
 // place files you want to import through the `$lib` alias in this folder.
 
 // place files you want to import through the `$lib` alias in this folder.
 
+export const api_host = "http://localhost:3000";
 
+export let authToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY3OTIxYTcyMTNiM2NkYjc5NGZmNzQ2MiIsImlhdCI6MTczNzcyOTYwMiwiZXhwIjoxNzM3NzUxMjAyfQ.-TlU0izsSJnZYE79yG01fcRgzgBirZBJBsiQf2alwZ4";

+ 58 - 0
src/lib/modules/EventTables.svelte
查看文件 

@@ -0,0 +1,58 @@
 
+<script lang="ts">
 
+	import { api_host, authToken } from "$lib";
 
+	import type { Appointment } from "$lib/dbdata";
 
+	import { onMount } from "svelte";
 
+
 
+    let appointmentData: Appointment[] = [];
 
+    let ready: boolean = false;
 
+
 
+    async function fetchAppointments() {
 
+        try {
 
+            const response = await fetch(`${api_host}/api/users/appointments`, {
 
+                method: "GET",
 
+                headers: {
 
+                    "Authorization": "Bearer " + authToken
 
+                },
 
+            });
 
+
 
+            if (!response.ok) {
 
+                throw new Error(`HTTP error! Status: ${response.status}`);
 
+            }
 
+
 
+            const data: Appointment[] = await response.json();
 
+            appointmentData = data;
 
+        } catch (error) {
 
+            console.log('Error during fetch:', error);
 
+        }
 
+    }
 
+
 
+
 
+    onMount(async () => {
 
+       await fetchAppointments();
 
+       ready = true;
 
+    });
 
+
 
+</script>
 
+
 
+{#each appointmentData as data}
 
+    <tr>
 
+        <td>{data.title}</td>
 
+        <td class="center-align">14/21</td>
 
+        <td class="center-align">
 
+            <button class="medium">
 
+                <span>Sperren</span>
 
+            </button>
 
+        </td>
 
+        <td class="center-align">
 
+            <button class="medium secondary">
 
+                <span>Bearbeiten</span>
 
+            </button>
 
+        </td>
 
+
 
+        <td class="center-align">
 
+            <button class="medium red">
 
+                <span>Loeschen</span>
 
+            </button>
 
+        </td>
 
+    </tr> 
+{/each}

+ 22 - 0
src/routes/+layout.svelte
查看文件 

@@ -0,0 +1,22 @@
 
+<main class="responsive max">
 
+    <nav>
 
+        <h5 class="max center-align">Booker</h5>
 
+    </nav>
 
+
 
+    <slot/>
 
+
 
+    <nav class="bottom no-space tabbed medium">
 
+        <a href="/bookings">
 
+            <i>event_note</i>
 
+            <span>Termine</span>
 
+        </a>
 
+        <a href="/events">
 
+            <i>list</i>
 
+            <span>Buchungen</span>
 
+        </a>
 
+        <a href="./pagecreator.html">
 
+            <i>library_add</i>
 
+            <span>Neue Buchung</span>
 
+        </a>
 
+    </nav>
 
+</main>

+ 1 - 0
src/routes/+page.svelte
查看文件 

@@ -14,6 +14,7 @@
 
 
 
     onMount(async () => {
 
     onMount(async () => {
 
         await getMessage();
 
         await getMessage();
 
+         
     });
 
     });
 
 </script>
 
 </script>

+ 34 - 0
src/routes/bookings/+page.svelte
查看文件 

@@ -0,0 +1,34 @@
 
+<table class="border large-space large-text">
 
+    <thead>
 
+        <tr>
 
+            <th class="min center-align">Datum</th>
 
+            <th class="min center-align">Zeit</th>
 
+            <th class="min center-align">Dauer</th>
 
+            <th class="min center-align">Teilnehmer</th>
 
+            <th class="min center-align">Thema</th>
 
+        </tr>
 
+    </thead>
 
+    <tbody>
 
+        <tr>
 
+            <td class="center-align">19.01.2025</td>
 
+            <td class="center-align">14.30</td>
 
+            <td class="center-align">15 Min</td>
 
+            <td class="center-align">Herr Schulte</td>
 
+            <td class="center-align">Elternsprechtag 7d</td>
 
+        </tr>
 
+        <tr>
 
+            <td class="center-align">19.01.2025</td>
 
+            <td class="center-align">14.45</td>
 
+            <td class="center-align">30 Min</td>
 
+            <td class="center-align">Frau Schulte</td>
 
+            <td class="center-align">Elternsprechtag 7d</td>
 
+        </tr>
 
+        <tr>
 
+            <td class="center-align">19.01.2025</td>
 
+            <td class="center-align">15.15</td>
 
+            <td class="center-align">1 Std.</td>
 
+            <td class="center-align">Herr Schulte</td>
 
+            <td class="center-align">Elternsprechtag 7d</td>
 
+        </tr>
 
+    </tbody>
 
+</table>

+ 19 - 0
src/routes/events/+page.svelte
查看文件 

@@ -0,0 +1,19 @@
 
+<script lang="ts">
 
+	import EventTables from "$lib/modules/EventTables.svelte";
 
+</script>
 
+
 
+<h3 class="center-align top-padding bottom-padding">Termine</h3>
 
+<table class="border large-space large-text">
 
+    <thead>
 
+        <tr>
 
+            <th class="min">Thema</th>
 
+            <th class="min center-align">Teilnehmer</th>
 
+            <th class="min center-align">Sperren</th>
 
+            <th class="min center-align">Bearbeiten</th>
 
+            <th class="min center-align">Loeschen</th>
 
+        </tr>
 
+    </thead>
 
+    <tbody>
 
+        <EventTables />
 
+    </tbody>
 
+</table>

+ 4257 - 0
static/beer.css
查看文件 

@@ -0,0 +1,4257 @@
 
+:root {
 
+  --size: 16px;
 
+  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
 
+  --font-icon: "Material Symbols Outlined";
 
+  --speed1: 0.1s;
 
+  --speed2: 0.2s;
 
+  --speed3: 0.3s;
 
+  --speed4: 0.4s;
 
+  --active: rgb(128 128 128 / 0.192);
 
+  --overlay: rgb(0 0 0 / 0.5);
 
+  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
 
+  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
 
+  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
 
+  --top: env(safe-area-inset-top);
 
+  --bottom: env(safe-area-inset-bottom);
 
+  --left: env(safe-area-inset-left);
 
+  --right: env(safe-area-inset-right);
 
+}
 
+:root,
 
+body.light {
 
+  --primary: #6750a4;
 
+  --on-primary: #ffffff;
 
+  --primary-container: #e9ddff;
 
+  --on-primary-container: #22005d;
 
+  --secondary: #625b71;
 
+  --on-secondary: #ffffff;
 
+  --secondary-container: #e8def8;
 
+  --on-secondary-container: #1e192b;
 
+  --tertiary: #7e5260;
 
+  --on-tertiary: #ffffff;
 
+  --tertiary-container: #ffd9e3;
 
+  --on-tertiary-container: #31101d;
 
+  --error: #ba1a1a;
 
+  --on-error: #ffffff;
 
+  --error-container: #ffdad6;
 
+  --on-error-container: #410002;
 
+  --background: #fffbff;
 
+  --on-background: #1c1b1e;
 
+  --surface: #fdf8fd;
 
+  --on-surface: #1c1b1e;
 
+  --surface-variant: #e7e0eb;
 
+  --on-surface-variant: #49454e;
 
+  --outline: #7a757f;
 
+  --outline-variant: #cac4cf;
 
+  --shadow: #000000;
 
+  --scrim: #000000;
 
+  --inverse-surface: #313033;
 
+  --inverse-on-surface: #f4eff4;
 
+  --inverse-primary: #cfbcff;
 
+  --surface-dim: #ddd8dd;
 
+  --surface-bright: #fdf8fd;
 
+  --surface-container-lowest: #ffffff;
 
+  --surface-container-low: #f7f2f7;
 
+  --surface-container: #f2ecf1;
 
+  --surface-container-high: #ece7eb;
 
+  --surface-container-highest: #e6e1e6;
 
+}
 
+body.dark {
 
+  --primary: #cfbcff;
 
+  --on-primary: #381e72;
 
+  --primary-container: #4f378a;
 
+  --on-primary-container: #e9ddff;
 
+  --secondary: #cbc2db;
 
+  --on-secondary: #332d41;
 
+  --secondary-container: #4a4458;
 
+  --on-secondary-container: #e8def8;
 
+  --tertiary: #efb8c8;
 
+  --on-tertiary: #4a2532;
 
+  --tertiary-container: #633b48;
 
+  --on-tertiary-container: #ffd9e3;
 
+  --error: #ffb4ab;
 
+  --on-error: #690005;
 
+  --error-container: #93000a;
 
+  --on-error-container: #ffb4ab;
 
+  --background: #1c1b1e;
 
+  --on-background: #e6e1e6;
 
+  --surface: #141316;
 
+  --on-surface: #e6e1e6;
 
+  --surface-variant: #49454e;
 
+  --on-surface-variant: #cac4cf;
 
+  --outline: #948f99;
 
+  --outline-variant: #49454e;
 
+  --shadow: #000000;
 
+  --scrim: #000000;
 
+  --inverse-surface: #e6e1e6;
 
+  --inverse-on-surface: #313033;
 
+  --inverse-primary: #6750a4;
 
+  --surface-dim: #141316;
 
+  --surface-bright: #3a383c;
 
+  --surface-container-lowest: #0f0e11;
 
+  --surface-container-low: #1c1b1e;
 
+  --surface-container: #201f22;
 
+  --surface-container-high: #2b292d;
 
+  --surface-container-highest: #363438;
 
+}
 
+/* outlined icons */
 
+@font-face {
 
+  font-family: "Material Symbols Outlined";
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  font-display: block;
 
+  src:
 
+    url("material-symbols-outlined.woff2") format("woff2"),
 
+    url("https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 
+}
 
+/* rounded icons */
 
+@font-face {
 
+  font-family: "Material Symbols Rounded";
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  font-display: block;
 
+  src:
 
+    url("material-symbols-rounded.woff2") format("woff2"),
 
+    url("https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 
+}
 
+/* sharp icons */
 
+@font-face {
 
+  font-family: "Material Symbols Sharp";
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  font-display: block;
 
+  src:
 
+    url("material-symbols-sharp.woff2") format("woff2"),
 
+    url("https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 
+}
 
+* {
 
+  -webkit-tap-highlight-color: transparent;
 
+  position: relative;
 
+  vertical-align: middle;
 
+  color: inherit;
 
+  margin: 0;
 
+  padding: 0;
 
+  border-radius: inherit;
 
+  box-sizing: border-box;
 
+}
 
+body {
 
+  color: var(--on-surface);
 
+  background-color: var(--surface);
 
+  overflow-x: hidden;
 
+}
 
+label {
 
+  font-size: 0.75rem;
 
+  vertical-align: baseline;
 
+}
 
+a,
 
+b,
 
+i,
 
+span,
 
+strong,
 
+em,
 
+code {
 
+  vertical-align: baseline;
 
+}
 
+a,
 
+button,
 
+.button {
 
+  cursor: pointer;
 
+  text-decoration: none;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  border: none;
 
+  font-family: inherit;
 
+  outline: inherit;
 
+  justify-content: center;
 
+}
 
+a,
 
+button,
 
+.button,
 
+i,
 
+label {
 
+  user-select: none;
 
+}
 
+body ::-webkit-scrollbar,
 
+body ::-webkit-scrollbar-thumb,
 
+body ::-webkit-scrollbar-button {
 
+  background: none;
 
+  inline-size: 0.4rem;
 
+  block-size: 0.4rem;
 
+}
 
+body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 
+  background: var(--outline);
 
+  border-radius: 1rem;
 
+}
 
+* + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul) {
 
+  margin-block-start: 1rem;
 
+}
 
+:is(a, button, .button, .chip):focus-visible {
 
+  outline: 0.125rem solid var(--primary);
 
+  outline-offset: 0.25rem;
 
+}
 
+.transparent {
 
+  background-color: transparent !important;
 
+  box-shadow: none !important;
 
+  color: inherit !important;
 
+}
 
+.primary {
 
+  background-color: var(--primary) !important;
 
+  color: var(--on-primary) !important;
 
+}
 
+.primary-text {
 
+  color: var(--primary) !important;
 
+}
 
+.primary-border {
 
+  border-color: var(--primary) !important;
 
+}
 
+.primary-container {
 
+  background-color: var(--primary-container) !important;
 
+  color: var(--on-primary-container) !important;
 
+}
 
+.secondary {
 
+  background-color: var(--secondary) !important;
 
+  color: var(--on-secondary) !important;
 
+}
 
+.secondary-text {
 
+  color: var(--secondary) !important;
 
+}
 
+.secondary-border {
 
+  border-color: var(--secondary) !important;
 
+}
 
+.secondary-container {
 
+  background-color: var(--secondary-container) !important;
 
+  color: var(--on-secondary-container) !important;
 
+}
 
+.tertiary {
 
+  background-color: var(--tertiary) !important;
 
+  color: var(--on-tertiary) !important;
 
+}
 
+.tertiary-text {
 
+  color: var(--tertiary) !important;
 
+}
 
+.tertiary-border {
 
+  border-color: var(--tertiary) !important;
 
+}
 
+.tertiary-container {
 
+  background-color: var(--tertiary-container) !important;
 
+  color: var(--on-tertiary-container) !important;
 
+}
 
+.error {
 
+  background-color: var(--error) !important;
 
+  color: var(--on-error) !important;
 
+}
 
+.error-text {
 
+  color: var(--error) !important;
 
+}
 
+.error-border {
 
+  border-color: var(--error) !important;
 
+}
 
+.error-container {
 
+  background-color: var(--error-container) !important;
 
+  color: var(--on-error-container) !important;
 
+}
 
+.background {
 
+  background-color: var(--background) !important;
 
+  color: var(--on-background) !important;
 
+}
 
+.surface,
 
+.surface-dim,
 
+.surface-bright,
 
+.surface-container-lowest,
 
+.surface-container-low,
 
+.surface-container,
 
+.surface-container-high,
 
+.surface-container-highest {
 
+  background-color: var(--surface) !important;
 
+  color: var(--on-surface) !important;
 
+}
 
+.surface-variant {
 
+  background-color: var(--surface-variant) !important;
 
+  color: var(--on-surface-variant) !important;
 
+}
 
+.inverse-surface {
 
+  background-color: var(--inverse-surface);
 
+  color: var(--inverse-on-surface);
 
+}
 
+.inverse-primary {
 
+  background-color: var(--inverse-primary);
 
+  color: var(--primary);
 
+}
 
+.inverse-primary-text {
 
+  color: var(--inverse-primary) !important;
 
+}
 
+.inverse-primary-border {
 
+  border-color: var(--inverse-primary) !important;
 
+}
 
+.surface-dim {
 
+  background-color: var(--surface-dim) !important;
 
+}
 
+.surface-bright {
 
+  background-color: var(--surface-bright) !important;
 
+}
 
+.surface-container-lowest {
 
+  background-color: var(--surface-container-lowest) !important;
 
+}
 
+.surface-container-low {
 
+  background-color: var(--surface-container-low) !important;
 
+}
 
+.surface-container {
 
+  background-color: var(--surface-container) !important;
 
+}
 
+.surface-container-high {
 
+  background-color: var(--surface-container-high) !important;
 
+}
 
+.surface-container-highest {
 
+  background-color: var(--surface-container-highest) !important;
 
+}
 
+.surface-container-low {
 
+  background-color: var(--surface-container-low) !important;
 
+}
 
+.black {
 
+  background-color: #000 !important;
 
+}
 
+.black-border {
 
+  border-color: #000 !important;
 
+}
 
+.black-text {
 
+  color: #000 !important;
 
+}
 
+.white {
 
+  background-color: #FFF !important;
 
+}
 
+.white-border {
 
+  border-color: #FFF !important;
 
+}
 
+.white-text {
 
+  color: #FFF !important;
 
+}
 
+.transparent-border {
 
+  border-color: transparent !important;
 
+}
 
+.transparent-text {
 
+  color: transparent !important;
 
+}
 
+.fill:not(i) {
 
+  background-color: var(--surface-variant) !important;
 
+  color: var(--on-surface-variant) !important;
 
+}
 
+.middle-align {
 
+  display: flex;
 
+  align-items: center !important;
 
+}
 
+.bottom-align {
 
+  display: flex;
 
+  align-items: flex-end !important;
 
+}
 
+.top-align {
 
+  display: flex;
 
+  align-items: flex-start !important;
 
+}
 
+.left-align {
 
+  text-align: start;
 
+  justify-content: flex-start !important;
 
+}
 
+.right-align {
 
+  text-align: end;
 
+  justify-content: flex-end !important;
 
+}
 
+.center-align {
 
+  text-align: center;
 
+  justify-content: center !important;
 
+}
 
+.red,
 
+.red6 {
 
+  background-color: #F44336 !important;
 
+}
 
+.red-border {
 
+  border-color: #F44336 !important;
 
+}
 
+.red-text {
 
+  color: #F44336 !important;
 
+}
 
+.red1 {
 
+  background-color: #FFEBEE !important;
 
+}
 
+.red2 {
 
+  background-color: #FFCDD2 !important;
 
+}
 
+.red3 {
 
+  background-color: #EF9A9A !important;
 
+}
 
+.red4 {
 
+  background-color: #E57373 !important;
 
+}
 
+.red5 {
 
+  background-color: #EF5350 !important;
 
+}
 
+.red7 {
 
+  background-color: #E53935 !important;
 
+}
 
+.red8 {
 
+  background-color: #D32F2F !important;
 
+}
 
+.red9 {
 
+  background-color: #C62828 !important;
 
+}
 
+.red10 {
 
+  background-color: #B71C1C !important;
 
+}
 
+.pink,
 
+.pink6 {
 
+  background-color: #E91E63 !important;
 
+}
 
+.pink-border {
 
+  border-color: #E91E63 !important;
 
+}
 
+.pink-text {
 
+  color: #E91E63 !important;
 
+}
 
+.pink1 {
 
+  background-color: #FCE4EC !important;
 
+}
 
+.pink2 {
 
+  background-color: #F8BBD0 !important;
 
+}
 
+.pink3 {
 
+  background-color: #F48FB1 !important;
 
+}
 
+.pink4 {
 
+  background-color: #F06292 !important;
 
+}
 
+.pink5 {
 
+  background-color: #EC407A !important;
 
+}
 
+.pink7 {
 
+  background-color: #D81B60 !important;
 
+}
 
+.pink8 {
 
+  background-color: #C2185B !important;
 
+}
 
+.pink9 {
 
+  background-color: #AD1457 !important;
 
+}
 
+.pink10 {
 
+  background-color: #880E4F !important;
 
+}
 
+.purple,
 
+.purple6 {
 
+  background-color: #9C27B0 !important;
 
+}
 
+.purple-border {
 
+  border-color: #9C27B0 !important;
 
+}
 
+.purple-text {
 
+  color: #9C27B0 !important;
 
+}
 
+.purple1 {
 
+  background-color: #F3E5F5 !important;
 
+}
 
+.purple2 {
 
+  background-color: #E1BEE7 !important;
 
+}
 
+.purple3 {
 
+  background-color: #CE93D8 !important;
 
+}
 
+.purple4 {
 
+  background-color: #BA68C8 !important;
 
+}
 
+.purple5 {
 
+  background-color: #AB47BC !important;
 
+}
 
+.purple7 {
 
+  background-color: #8E24AA !important;
 
+}
 
+.purple8 {
 
+  background-color: #7B1FA2 !important;
 
+}
 
+.purple9 {
 
+  background-color: #6A1B9A !important;
 
+}
 
+.purple10 {
 
+  background-color: #4A148C !important;
 
+}
 
+.deep-purple,
 
+.deep-purple6 {
 
+  background-color: #673AB7 !important;
 
+}
 
+.deep-purple-border {
 
+  border-color: #673AB7 !important;
 
+}
 
+.deep-purple-text {
 
+  color: #673AB7 !important;
 
+}
 
+.deep-purple1 {
 
+  background-color: #EDE7F6 !important;
 
+}
 
+.deep-purple2 {
 
+  background-color: #D1C4E9 !important;
 
+}
 
+.deep-purple3 {
 
+  background-color: #B39DDB !important;
 
+}
 
+.deep-purple4 {
 
+  background-color: #9575CD !important;
 
+}
 
+.deep-purple5 {
 
+  background-color: #7E57C2 !important;
 
+}
 
+.deep-purple7 {
 
+  background-color: #5E35B1 !important;
 
+}
 
+.deep-purple8 {
 
+  background-color: #512DA8 !important;
 
+}
 
+.deep-purple9 {
 
+  background-color: #4527A0 !important;
 
+}
 
+.deep-purple10 {
 
+  background-color: #311B92 !important;
 
+}
 
+.indigo,
 
+.indigo6 {
 
+  background-color: #3F51B5 !important;
 
+}
 
+.indigo-border {
 
+  border-color: #3F51B5 !important;
 
+}
 
+.indigo-text {
 
+  color: #3F51B5 !important;
 
+}
 
+.indigo1 {
 
+  background-color: #E8EAF6 !important;
 
+}
 
+.indigo2 {
 
+  background-color: #C5CAE9 !important;
 
+}
 
+.indigo3 {
 
+  background-color: #9FA8DA !important;
 
+}
 
+.indigo4 {
 
+  background-color: #7986CB !important;
 
+}
 
+.indigo5 {
 
+  background-color: #5C6BC0 !important;
 
+}
 
+.indigo7 {
 
+  background-color: #3949AB !important;
 
+}
 
+.indigo8 {
 
+  background-color: #303F9F !important;
 
+}
 
+.indigo9 {
 
+  background-color: #283593 !important;
 
+}
 
+.indigo10 {
 
+  background-color: #1A237E !important;
 
+}
 
+.blue,
 
+.blue6 {
 
+  background-color: #2196F3 !important;
 
+}
 
+.blue-border {
 
+  border-color: #2196F3 !important;
 
+}
 
+.blue-text {
 
+  color: #2196F3 !important;
 
+}
 
+.blue1 {
 
+  background-color: #E3F2FD !important;
 
+}
 
+.blue2 {
 
+  background-color: #BBDEFB !important;
 
+}
 
+.blue3 {
 
+  background-color: #90CAF9 !important;
 
+}
 
+.blue4 {
 
+  background-color: #64B5F6 !important;
 
+}
 
+.blue5 {
 
+  background-color: #42A5F5 !important;
 
+}
 
+.blue7 {
 
+  background-color: #1E88E5 !important;
 
+}
 
+.blue8 {
 
+  background-color: #1976D2 !important;
 
+}
 
+.blue9 {
 
+  background-color: #1565C0 !important;
 
+}
 
+.blue10 {
 
+  background-color: #0D47A1 !important;
 
+}
 
+.light-blue,
 
+.light-blue6 {
 
+  background-color: #03A9F4 !important;
 
+}
 
+.light-blue-border {
 
+  border-color: #03A9F4 !important;
 
+}
 
+.light-blue-text {
 
+  color: #03A9F4 !important;
 
+}
 
+.light-blue1 {
 
+  background-color: #E1F5FE !important;
 
+}
 
+.light-blue2 {
 
+  background-color: #B3E5FC !important;
 
+}
 
+.light-blue3 {
 
+  background-color: #81D4FA !important;
 
+}
 
+.light-blue4 {
 
+  background-color: #4FC3F7 !important;
 
+}
 
+.light-blue5 {
 
+  background-color: #29B6F6 !important;
 
+}
 
+.light-blue7 {
 
+  background-color: #039BE5 !important;
 
+}
 
+.light-blue8 {
 
+  background-color: #0288D1 !important;
 
+}
 
+.light-blue9 {
 
+  background-color: #0277BD !important;
 
+}
 
+.light-blue10 {
 
+  background-color: #01579B !important;
 
+}
 
+.cyan,
 
+.cyan6 {
 
+  background-color: #00BCD4 !important;
 
+}
 
+.cyan-border {
 
+  border-color: #00BCD4 !important;
 
+}
 
+.cyan-text {
 
+  color: #00BCD4 !important;
 
+}
 
+.cyan1 {
 
+  background-color: #E0F7FA !important;
 
+}
 
+.cyan2 {
 
+  background-color: #B2EBF2 !important;
 
+}
 
+.cyan3 {
 
+  background-color: #80DEEA !important;
 
+}
 
+.cyan4 {
 
+  background-color: #4DD0E1 !important;
 
+}
 
+.cyan5 {
 
+  background-color: #26C6DA !important;
 
+}
 
+.cyan7 {
 
+  background-color: #00ACC1 !important;
 
+}
 
+.cyan8 {
 
+  background-color: #0097A7 !important;
 
+}
 
+.cyan9 {
 
+  background-color: #00838F !important;
 
+}
 
+.cyan10 {
 
+  background-color: #006064 !important;
 
+}
 
+.teal,
 
+.teal6 {
 
+  background-color: #009688 !important;
 
+}
 
+.teal-border {
 
+  border-color: #009688 !important;
 
+}
 
+.teal-text {
 
+  color: #009688 !important;
 
+}
 
+.teal1 {
 
+  background-color: #E0F2F1 !important;
 
+}
 
+.teal2 {
 
+  background-color: #B2DFDB !important;
 
+}
 
+.teal3 {
 
+  background-color: #80CBC4 !important;
 
+}
 
+.teal4 {
 
+  background-color: #4DB6AC !important;
 
+}
 
+.teal5 {
 
+  background-color: #26A69A !important;
 
+}
 
+.teal7 {
 
+  background-color: #00897B !important;
 
+}
 
+.teal8 {
 
+  background-color: #00796B !important;
 
+}
 
+.teal9 {
 
+  background-color: #00695C !important;
 
+}
 
+.teal10 {
 
+  background-color: #004D40 !important;
 
+}
 
+.green,
 
+.green6 {
 
+  background-color: #4CAF50 !important;
 
+}
 
+.green-border {
 
+  border-color: #4CAF50 !important;
 
+}
 
+.green-text {
 
+  color: #4CAF50 !important;
 
+}
 
+.green1 {
 
+  background-color: #E8F5E9 !important;
 
+}
 
+.green2 {
 
+  background-color: #C8E6C9 !important;
 
+}
 
+.green3 {
 
+  background-color: #A5D6A7 !important;
 
+}
 
+.green4 {
 
+  background-color: #81C784 !important;
 
+}
 
+.green5 {
 
+  background-color: #66BB6A !important;
 
+}
 
+.green7 {
 
+  background-color: #43A047 !important;
 
+}
 
+.green8 {
 
+  background-color: #388E3C !important;
 
+}
 
+.green9 {
 
+  background-color: #2E7D32 !important;
 
+}
 
+.green10 {
 
+  background-color: #1B5E20 !important;
 
+}
 
+.light-green,
 
+.light-green6 {
 
+  background-color: #8BC34A !important;
 
+}
 
+.light-green-border {
 
+  border-color: #8BC34A !important;
 
+}
 
+.light-green-text {
 
+  color: #8BC34A !important;
 
+}
 
+.light-green1 {
 
+  background-color: #F1F8E9 !important;
 
+}
 
+.light-green2 {
 
+  background-color: #DCEDC8 !important;
 
+}
 
+.light-green3 {
 
+  background-color: #C5E1A5 !important;
 
+}
 
+.light-green4 {
 
+  background-color: #AED581 !important;
 
+}
 
+.light-green5 {
 
+  background-color: #9CCC65 !important;
 
+}
 
+.light-green7 {
 
+  background-color: #7CB342 !important;
 
+}
 
+.light-green8 {
 
+  background-color: #689F38 !important;
 
+}
 
+.light-green9 {
 
+  background-color: #558B2F !important;
 
+}
 
+.light-green10 {
 
+  background-color: #33691E !important;
 
+}
 
+.lime,
 
+.lime6 {
 
+  background-color: #CDDC39 !important;
 
+}
 
+.lime-border {
 
+  border-color: #CDDC39 !important;
 
+}
 
+.lime-text {
 
+  color: #CDDC39 !important;
 
+}
 
+.lime1 {
 
+  background-color: #F9FBE7 !important;
 
+}
 
+.lime2 {
 
+  background-color: #F0F4C3 !important;
 
+}
 
+.lime3 {
 
+  background-color: #E6EE9C !important;
 
+}
 
+.lime4 {
 
+  background-color: #DCE775 !important;
 
+}
 
+.lime5 {
 
+  background-color: #D4E157 !important;
 
+}
 
+.lime7 {
 
+  background-color: #C0CA33 !important;
 
+}
 
+.lime8 {
 
+  background-color: #AFB42B !important;
 
+}
 
+.lime9 {
 
+  background-color: #9E9D24 !important;
 
+}
 
+.lime10 {
 
+  background-color: #827717 !important;
 
+}
 
+.yellow,
 
+.yellow6 {
 
+  background-color: #FFEB3B !important;
 
+}
 
+.yellow-border {
 
+  border-color: #FFEB3B !important;
 
+}
 
+.yellow-text {
 
+  color: #FFEB3B !important;
 
+}
 
+.yellow1 {
 
+  background-color: #FFFDE7 !important;
 
+}
 
+.yellow2 {
 
+  background-color: #FFF9C4 !important;
 
+}
 
+.yellow3 {
 
+  background-color: #FFF59D !important;
 
+}
 
+.yellow4 {
 
+  background-color: #FFF176 !important;
 
+}
 
+.yellow5 {
 
+  background-color: #FFEE58 !important;
 
+}
 
+.yellow7 {
 
+  background-color: #FDD835 !important;
 
+}
 
+.yellow8 {
 
+  background-color: #FBC02D !important;
 
+}
 
+.yellow9 {
 
+  background-color: #F9A825 !important;
 
+}
 
+.yellow10 {
 
+  background-color: #F57F17 !important;
 
+}
 
+.amber,
 
+.amber6 {
 
+  background-color: #FFC107 !important;
 
+}
 
+.amber-border {
 
+  border-color: #FFC107 !important;
 
+}
 
+.amber-text {
 
+  color: #FFC107 !important;
 
+}
 
+.amber1 {
 
+  background-color: #FFF8E1 !important;
 
+}
 
+.amber2 {
 
+  background-color: #FFECB3 !important;
 
+}
 
+.amber3 {
 
+  background-color: #FFE082 !important;
 
+}
 
+.amber4 {
 
+  background-color: #FFD54F !important;
 
+}
 
+.amber5 {
 
+  background-color: #FFCA28 !important;
 
+}
 
+.amber7 {
 
+  background-color: #FFB300 !important;
 
+}
 
+.amber8 {
 
+  background-color: #FFA000 !important;
 
+}
 
+.amber9 {
 
+  background-color: #FF8F00 !important;
 
+}
 
+.amber10 {
 
+  background-color: #FF6F00 !important;
 
+}
 
+.orange,
 
+.orange6 {
 
+  background-color: #FF9800 !important;
 
+}
 
+.orange-border {
 
+  border-color: #FF9800 !important;
 
+}
 
+.orange-text {
 
+  color: #FF9800 !important;
 
+}
 
+.orange1 {
 
+  background-color: #FFF3E0 !important;
 
+}
 
+.orange2 {
 
+  background-color: #FFE0B2 !important;
 
+}
 
+.orange3 {
 
+  background-color: #FFCC80 !important;
 
+}
 
+.orange4 {
 
+  background-color: #FFB74D !important;
 
+}
 
+.orange5 {
 
+  background-color: #FFA726 !important;
 
+}
 
+.orange7 {
 
+  background-color: #FB8C00 !important;
 
+}
 
+.orange8 {
 
+  background-color: #F57C00 !important;
 
+}
 
+.orange9 {
 
+  background-color: #EF6C00 !important;
 
+}
 
+.orange10 {
 
+  background-color: #E65100 !important;
 
+}
 
+.deep-orange,
 
+.deep-orange6 {
 
+  background-color: #FF5722 !important;
 
+}
 
+.deep-orange-border {
 
+  border-color: #FF5722 !important;
 
+}
 
+.deep-orange-text {
 
+  color: #FF5722 !important;
 
+}
 
+.deep-orange1 {
 
+  background-color: #FBE9E7 !important;
 
+}
 
+.deep-orange2 {
 
+  background-color: #FFCCBC !important;
 
+}
 
+.deep-orange3 {
 
+  background-color: #FFAB91 !important;
 
+}
 
+.deep-orange4 {
 
+  background-color: #FF8A65 !important;
 
+}
 
+.deep-orange5 {
 
+  background-color: #FF7043 !important;
 
+}
 
+.deep-orange7 {
 
+  background-color: #F4511E !important;
 
+}
 
+.deep-orange8 {
 
+  background-color: #E64A19 !important;
 
+}
 
+.deep-orange9 {
 
+  background-color: #D84315 !important;
 
+}
 
+.deep-orange10 {
 
+  background-color: #BF360C !important;
 
+}
 
+.brown,
 
+.brown6 {
 
+  background-color: #795548 !important;
 
+}
 
+.brown-border {
 
+  border-color: #795548 !important;
 
+}
 
+.brown-text {
 
+  color: #795548 !important;
 
+}
 
+.brown1 {
 
+  background-color: #EFEBE9 !important;
 
+}
 
+.brown2 {
 
+  background-color: #D7CCC8 !important;
 
+}
 
+.brown3 {
 
+  background-color: #BCAAA4 !important;
 
+}
 
+.brown4 {
 
+  background-color: #A1887F !important;
 
+}
 
+.brown5 {
 
+  background-color: #8D6E63 !important;
 
+}
 
+.brown7 {
 
+  background-color: #6D4C41 !important;
 
+}
 
+.brown8 {
 
+  background-color: #5D4037 !important;
 
+}
 
+.brown9 {
 
+  background-color: #4E342E !important;
 
+}
 
+.brown10 {
 
+  background-color: #3E2723 !important;
 
+}
 
+.blue-grey,
 
+.blue-grey6 {
 
+  background-color: #607D8B !important;
 
+}
 
+.blue-grey-border {
 
+  border-color: #607D8B !important;
 
+}
 
+.blue-grey-text {
 
+  color: #607D8B !important;
 
+}
 
+.blue-grey1 {
 
+  background-color: #ECEFF1 !important;
 
+}
 
+.blue-grey2 {
 
+  background-color: #CFD8DC !important;
 
+}
 
+.blue-grey3 {
 
+  background-color: #B0BEC5 !important;
 
+}
 
+.blue-grey4 {
 
+  background-color: #90A4AE !important;
 
+}
 
+.blue-grey5 {
 
+  background-color: #78909C !important;
 
+}
 
+.blue-grey7 {
 
+  background-color: #546E7A !important;
 
+}
 
+.blue-grey8 {
 
+  background-color: #455A64 !important;
 
+}
 
+.blue-grey9 {
 
+  background-color: #37474F !important;
 
+}
 
+.blue-grey10 {
 
+  background-color: #263238 !important;
 
+}
 
+.grey,
 
+.grey6 {
 
+  background-color: #9E9E9E !important;
 
+}
 
+.grey-border {
 
+  border-color: #9E9E9E !important;
 
+}
 
+.grey-text {
 
+  color: #9E9E9E !important;
 
+}
 
+.grey1 {
 
+  background-color: #FAFAFA !important;
 
+}
 
+.grey2 {
 
+  background-color: #F5F5F5 !important;
 
+}
 
+.grey3 {
 
+  background-color: #EEE !important;
 
+}
 
+.grey4 {
 
+  background-color: #E0E0E0 !important;
 
+}
 
+.grey5 {
 
+  background-color: #BDBDBD !important;
 
+}
 
+.grey7 {
 
+  background-color: #757575 !important;
 
+}
 
+.grey8 {
 
+  background-color: #616161 !important;
 
+}
 
+.grey9 {
 
+  background-color: #424242 !important;
 
+}
 
+.grey10 {
 
+  background-color: #212121 !important;
 
+}
 
+.horizontal {
 
+  display: inline-flex;
 
+  flex-direction: row !important;
 
+  gap: 1rem;
 
+  inline-size: auto !important;
 
+  max-inline-size: none !important;
 
+}
 
+.horizontal > * {
 
+  margin-block: 0 !important;
 
+}
 
+.vertical {
 
+  display: flex;
 
+  flex-direction: column !important;
 
+}
 
+:is(a, button, .button, .chip).vertical {
 
+  display: inline-flex;
 
+  gap: 0.25rem;
 
+  block-size: auto !important;
 
+  max-block-size: none !important;
 
+  padding-block: 0.5rem;
 
+}
 
+.vertical > * {
 
+  margin-inline: 0 !important;
 
+}
 
+.no-elevate {
 
+  box-shadow: none !important;
 
+}
 
+.small-elevate,
 
+.elevate {
 
+  box-shadow: var(--elevate1) !important;
 
+}
 
+.medium-elevate {
 
+  box-shadow: var(--elevate2) !important;
 
+}
 
+.large-elevate {
 
+  box-shadow: var(--elevate3) !important;
 
+}
 
+.round {
 
+  border-radius: var(---round);
 
+}
 
+.small-round,
 
+.medium-round,
 
+.large-round {
 
+  border-radius: var(---round) !important;
 
+}
 
+.top-round,
 
+.bottom-round,
 
+.left-round,
 
+.right-round,
 
+.medium-round,
 
+.round {
 
+  ---round: 2rem;
 
+}
 
+.small-round {
 
+  ---round: 0.5rem;
 
+}
 
+.large-round {
 
+  ---round: 3.5rem;
 
+}
 
+.no-round,
 
+.square,
 
+.top-round,
 
+.bottom-round,
 
+.left-round,
 
+.right-round {
 
+  border-radius: 0 !important;
 
+}
 
+.top-round {
 
+  border-start-start-radius: var(---round) !important;
 
+  border-start-end-radius: var(---round) !important;
 
+}
 
+.bottom-round {
 
+  border-end-end-radius: var(---round) !important;
 
+  border-end-start-radius: var(---round) !important;
 
+}
 
+.left-round {
 
+  border-start-start-radius: var(---round) !important;
 
+  border-end-start-radius: var(---round) !important;
 
+}
 
+.right-round {
 
+  border-start-end-radius: var(---round) !important;
 
+  border-end-end-radius: var(---round) !important;
 
+}
 
+.circle {
 
+  border-radius: 50%;
 
+}
 
+:is(button, .button, .chip).circle {
 
+  border-radius: 2.5rem;
 
+}
 
+:is(.circle, .square):not(i, img, video, svg),
 
+:is(.circle, .square).chip.medium {
 
+  block-size: 2.5rem;
 
+  inline-size: 2.5rem;
 
+  padding: 0;
 
+}
 
+:is(.circle, .square) > span {
 
+  display: none;
 
+}
 
+:is(.circle, .square).small:not(i, img, video, svg),
 
+:is(.circle, .square).chip {
 
+  block-size: 2rem;
 
+  inline-size: 2rem;
 
+}
 
+:is(.circle, .square).large:not(i, img, video, svg) {
 
+  block-size: 3rem;
 
+  inline-size: 3rem;
 
+}
 
+:is(.circle, .square).extra:not(i, img, video, svg) {
 
+  block-size: 3.5rem;
 
+  inline-size: 3.5rem;
 
+}
 
+:is(.circle, .square).round {
 
+  border-radius: 1rem !important;
 
+}
 
+.border:not(table, .field) {
 
+  box-sizing: border-box;
 
+  border: 0.0625rem solid var(--outline);
 
+  background-color: transparent;
 
+  box-shadow: none;
 
+}
 
+.no-border {
 
+  border-color: transparent !important;
 
+}
 
+:is(nav, .row, dialog.max, header.fixed, footer.fixed, menu > a, menu.max, table, .tabs):not(.round) {
 
+  border-radius: 0;
 
+}
 
+[class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
 
+  margin: var(---margin) !important;
 
+}
 
+[class*=margin] {
 
+  ---margin: 1rem;
 
+}
 
+.no-margin {
 
+  ---margin: 0;
 
+}
 
+.auto-margin {
 
+  ---margin: auto;
 
+}
 
+.tiny-margin {
 
+  ---margin: 0.25rem;
 
+}
 
+.small-margin {
 
+  ---margin: 0.5rem;
 
+}
 
+.large-margin {
 
+  ---margin: 1.5rem;
 
+}
 
+.left-margin,
 
+.horizontal-margin {
 
+  margin-inline-start: var(---margin) !important;
 
+}
 
+.right-margin,
 
+.horizontal-margin {
 
+  margin-inline-end: var(---margin) !important;
 
+}
 
+.top-margin,
 
+.vertical-margin {
 
+  margin-block-start: var(---margin) !important;
 
+}
 
+.bottom-margin,
 
+.vertical-margin {
 
+  margin-block-end: var(---margin) !important;
 
+}
 
+.no-opacity {
 
+  opacity: 1 !important;
 
+}
 
+.opacity {
 
+  opacity: 0 !important;
 
+}
 
+.small-opacity {
 
+  opacity: 0.75 !important;
 
+}
 
+.medium-opacity {
 
+  opacity: 0.5 !important;
 
+}
 
+.large-opacity {
 
+  opacity: 0.25 !important;
 
+}
 
+[class*=padding]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
 
+  padding: var(---padding) !important;
 
+}
 
+[class*=padding] {
 
+  ---padding: 1rem;
 
+}
 
+.no-padding {
 
+  ---padding: 0;
 
+}
 
+.tiny-padding {
 
+  ---padding: 0.25rem;
 
+}
 
+.small-padding {
 
+  ---padding: 0.5rem;
 
+}
 
+.large-padding {
 
+  ---padding: 1.5rem;
 
+}
 
+.left-padding,
 
+.horizontal-padding {
 
+  padding-inline-start: var(---padding) !important;
 
+}
 
+.right-padding,
 
+.horizontal-padding {
 
+  padding-inline-end: var(---padding) !important;
 
+}
 
+.top-padding,
 
+.vertical-padding {
 
+  padding-block-start: var(---padding) !important;
 
+}
 
+.bottom-padding,
 
+.vertical-padding {
 
+  padding-block-end: var(---padding) !important;
 
+}
 
+.front {
 
+  z-index: 10 !important;
 
+}
 
+.back {
 
+  z-index: -10 !important;
 
+}
 
+.left {
 
+  inset-inline-start: 0;
 
+}
 
+.right {
 
+  inset-inline-end: 0;
 
+}
 
+.top {
 
+  inset-block-start: 0;
 
+}
 
+.bottom {
 
+  inset-block-end: 0;
 
+}
 
+.center {
 
+  inset-inline-start: 50%;
 
+  transform: translateX(-50%);
 
+}
 
+[dir=rtl] .center {
 
+  transform: translateX(50%);
 
+}
 
+.middle {
 
+  inset-block-start: 50%;
 
+  transform: translateY(-50%);
 
+}
 
+.middle.center {
 
+  transform: translate(-50%, -50%);
 
+}
 
+[dir=rtl] .middle.center {
 
+  transform: translate(50%, -50%);
 
+}
 
+.ripple {
 
+  ---duration: 600ms;
 
+}
 
+.fast-ripple {
 
+  ---duration: 200ms;
 
+}
 
+.slow-ripple {
 
+  ---duration: 1800ms;
 
+}
 
+.ripple-js {
 
+  position: absolute;
 
+  inset: 0;
 
+  pointer-events: none;
 
+  overflow: hidden;
 
+}
 
+.ripple-js > div {
 
+  position: absolute;
 
+  border-radius: 50%;
 
+  background: currentColor;
 
+  opacity: 0.3;
 
+  transform: scale(0);
 
+  animation: to-ripple var(---duration) linear;
 
+}
 
+@keyframes to-ripple {
 
+  to {
 
+    transform: scale(4);
 
+    opacity: 0;
 
+  }
 
+}
 
+.scroll {
 
+  overflow: auto;
 
+}
 
+.no-scroll {
 
+  overflow: hidden;
 
+}
 
+[class*=width] {
 
+  max-inline-size: 100%;
 
+}
 
+.auto-width {
 
+  inline-size: auto;
 
+}
 
+.small-width {
 
+  inline-size: 12rem !important;
 
+}
 
+.medium-width {
 
+  inline-size: 24rem !important;
 
+}
 
+.large-width {
 
+  inline-size: 36rem !important;
 
+}
 
+.auto-height {
 
+  block-size: auto;
 
+}
 
+.small-height {
 
+  block-size: 12rem !important;
 
+}
 
+.medium-height {
 
+  block-size: 24rem !important;
 
+}
 
+.large-height {
 
+  block-size: 36rem !important;
 
+}
 
+.wrap {
 
+  display: block;
 
+  white-space: normal;
 
+}
 
+.no-wrap:not(menu) {
 
+  display: flex;
 
+  white-space: nowrap;
 
+}
 
+.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
 
+  block-size: 0.5rem;
 
+}
 
+:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip) {
 
+  block-size: 1rem;
 
+}
 
+.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
 
+  block-size: 2rem;
 
+}
 
+.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
 
+  block-size: 3rem;
 
+}
 
+.responsive {
 
+  inline-size: -webkit-fill-available;
 
+  inline-size: -moz-available;
 
+}
 
+@media only screen and (max-width: 600px) {
 
+  .m:not(.s),
 
+  .l:not(.s),
 
+  .m.l:not(.s) {
 
+    display: none;
 
+  }
 
+}
 
+@media only screen and (min-width: 601px) and (max-width: 992px) {
 
+  .s:not(.m),
 
+  .l:not(.m),
 
+  .s.l:not(.m) {
 
+    display: none;
 
+  }
 
+}
 
+@media only screen and (min-width: 993px) {
 
+  .m:not(.l),
 
+  .s:not(.l),
 
+  .m.s:not(.l) {
 
+    display: none;
 
+  }
 
+}
 
+html {
 
+  font-size: var(--size);
 
+}
 
+body {
 
+  font-family: var(--font);
 
+  font-size: 0.875rem;
 
+  line-height: 1.5rem;
 
+  letter-spacing: 0.0313rem;
 
+}
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6 {
 
+  font-weight: 400;
 
+  display: block;
 
+  align-items: center;
 
+  line-height: normal;
 
+}
 
+h1 {
 
+  font-size: 3.5625rem;
 
+}
 
+h2 {
 
+  font-size: 2.8125rem;
 
+}
 
+h3 {
 
+  font-size: 2.25rem;
 
+}
 
+h4 {
 
+  font-size: 2rem;
 
+}
 
+h5 {
 
+  font-size: 1.75rem;
 
+}
 
+h6 {
 
+  font-size: 1.5rem;
 
+}
 
+h1.small {
 
+  font-size: 3.0625rem;
 
+}
 
+h2.small {
 
+  font-size: 2.3125rem;
 
+}
 
+h3.small {
 
+  font-size: 1.75rem;
 
+}
 
+h4.small {
 
+  font-size: 1.5rem;
 
+}
 
+h5.small {
 
+  font-size: 1.25rem;
 
+}
 
+h6.small {
 
+  font-size: 1rem;
 
+}
 
+h1.large {
 
+  font-size: 4.0625rem;
 
+}
 
+h2.large {
 
+  font-size: 3.3125rem;
 
+}
 
+h3.large {
 
+  font-size: 2.75rem;
 
+}
 
+h4.large {
 
+  font-size: 2.5rem;
 
+}
 
+h5.large {
 
+  font-size: 2.25rem;
 
+}
 
+h6.large {
 
+  font-size: 2rem;
 
+}
 
+.link {
 
+  color: var(--primary) !important;
 
+}
 
+.inverse-link {
 
+  color: var(--inverse-primary) !important;
 
+}
 
+.truncate {
 
+  overflow: hidden;
 
+  white-space: nowrap !important;
 
+  text-overflow: ellipsis;
 
+  flex: inherit;
 
+}
 
+.truncate > * {
 
+  white-space: nowrap !important;
 
+}
 
+.small-text {
 
+  font-size: 0.75rem;
 
+}
 
+.medium-text {
 
+  font-size: 0.875rem;
 
+}
 
+.large-text {
 
+  font-size: 1rem;
 
+}
 
+.upper {
 
+  text-transform: uppercase;
 
+}
 
+.lower {
 
+  text-transform: lowercase;
 
+}
 
+.capitalize {
 
+  text-transform: capitalize;
 
+}
 
+.bold {
 
+  font-weight: bold;
 
+}
 
+.overline {
 
+  text-decoration: line-through;
 
+}
 
+.underline {
 
+  text-decoration: underline;
 
+}
 
+.italic {
 
+  font-style: italic;
 
+}
 
+p {
 
+  margin: 0.5rem 0;
 
+}
 
+.no-line {
 
+  line-height: normal;
 
+}
 
+.tiny-line {
 
+  line-height: 1.25rem;
 
+}
 
+.small-line {
 
+  line-height: 1.5rem;
 
+}
 
+.medium-line {
 
+  line-height: 1.75rem;
 
+}
 
+.large-line {
 
+  line-height: 2rem;
 
+}
 
+.extra-line {
 
+  line-height: 2.25rem;
 
+}
 
+pre {
 
+  border-radius: 0;
 
+  background-color: var(--surface-container);
 
+  white-space: pre-wrap;
 
+  padding: 1rem;
 
+  border-inline-start: 0.25rem solid var(--primary);
 
+  font-family: inherit;
 
+}
 
+blockquote {
 
+  border-radius: 0;
 
+  padding: 1rem;
 
+  border-inline-start: 0.25rem solid var(--primary);
 
+  font-family: inherit;
 
+}
 
+code {
 
+  border-radius: 0;
 
+  background-color: var(--surface-container);
 
+  white-space: pre-wrap;
 
+  padding: 0.25rem;
 
+}
 
+pre > code,
 
+blockquote > code {
 
+  padding: 0;
 
+}
 
+.scroll > code {
 
+  white-space: pre;
 
+}
 
+pre:has(> code){
 
+  direction: ltr;
 
+  text-align: start;
 
+}
 
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
 
+  content: "";
 
+  position: absolute;
 
+  inset: 0;
 
+  z-index: 1;
 
+  border-radius: inherit;
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  background-position: center;
 
+  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
 
+  opacity: 0;
 
+  transition: none;
 
+}
 
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
 
+  background-size: 15000%;
 
+  opacity: 0.1;
 
+  transition: background-size var(--speed2) linear;
 
+}
 
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
 
+  background-size: 5000%;
 
+  opacity: 0;
 
+  transition: none;
 
+}
 
+.no-wave::after,
 
+.no-wave:is(:hover, :active)::after {
 
+  display: none;
 
+}
 
+.badge {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  position: absolute;
 
+  font-size: 0.6875rem;
 
+  text-transform: none;
 
+  z-index: 2;
 
+  padding: 0 0.25rem;
 
+  min-block-size: 1rem;
 
+  min-inline-size: 1rem;
 
+  background-color: var(--error);
 
+  color: var(--on-error);
 
+  line-height: normal;
 
+  border-radius: 1rem;
 
+  inset: 50% auto auto 50%;
 
+  transform: translate(0, -100%);
 
+  font-family: var(--font);
 
+}
 
+.badge.top {
 
+  transform: translate(-50%, -100%);
 
+}
 
+.badge.bottom {
 
+  transform: translate(-50%, 0);
 
+}
 
+.badge.left {
 
+  transform: translate(-100%, -50%);
 
+}
 
+.badge.right {
 
+  transform: translate(0, -50%);
 
+}
 
+.badge.top.left {
 
+  transform: translate(-100%, -100%);
 
+}
 
+.badge.bottom.left {
 
+  transform: translate(-100%, 0);
 
+}
 
+.badge.top.right {
 
+  transform: translate(0, -100%);
 
+}
 
+.badge.bottom.right {
 
+  transform: translate(0, 0);
 
+}
 
+.badge.border {
 
+  border-color: var(--error);
 
+  color: var(--error);
 
+  background-color: var(--surface);
 
+}
 
+.badge:is(.circle, .square) {
 
+  text-align: center;
 
+  inline-size: auto;
 
+  block-size: auto;
 
+  padding: 0 0.25rem;
 
+  border-radius: 1rem;
 
+}
 
+.badge.square {
 
+  border-radius: 0;
 
+}
 
+.badge.min > * {
 
+  display: none;
 
+}
 
+.badge.min {
 
+  clip-path: circle(18.75% at 50% 50%);
 
+}
 
+nav:is(.left, .right, .top, .bottom) > a > .badge,
 
+nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
 
+  inset: 1rem auto auto 50%;
 
+}
 
+.badge.none {
 
+  inset: auto !important;
 
+  transform: none;
 
+  position: relative;
 
+  margin: 0 0.125rem;
 
+}
 
+:is(button, .button, .chip) > .badge.none {
 
+  margin: 0 -0.5rem;
 
+}
 
+.button,
 
+button {
 
+  box-sizing: content-box;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  block-size: 2.5rem;
 
+  min-inline-size: 2.5rem;
 
+  font-size: 0.875rem;
 
+  font-weight: 500;
 
+  color: var(--on-primary);
 
+  padding: 0 1.5rem;
 
+  background-color: var(--primary);
 
+  margin: 0 0.5rem;
 
+  border-radius: 1.25rem;
 
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
 
+  user-select: none;
 
+  gap: 1rem;
 
+  line-height: normal;
 
+}
 
+:is(button, .button).small {
 
+  block-size: 2rem;
 
+  min-inline-size: 2rem;
 
+  border-radius: 1rem;
 
+}
 
+:is(button, .button).large {
 
+  block-size: 3rem;
 
+  min-inline-size: 3rem;
 
+  border-radius: 1.5rem;
 
+}
 
+:is(.button, button):is(.extra, .extend) {
 
+  block-size: 3.5rem;
 
+  min-inline-size: 3.5rem;
 
+  font-size: 1rem;
 
+  border-radius: 1.75rem;
 
+}
 
+:is(button, .button).border {
 
+  border-color: var(--outline);
 
+  color: var(--primary);
 
+}
 
+:is(button, .button):not(.border, .chip):hover {
 
+  box-shadow: var(--elevate1);
 
+}
 
+.extend > span {
 
+  display: none;
 
+}
 
+.extend:is(:hover, .active) {
 
+  inline-size: auto;
 
+  padding: 0 1.5rem;
 
+}
 
+.extend:is(:hover, .active) > i + span {
 
+  display: inherit;
 
+  margin-inline-start: 1.5rem;
 
+}
 
+.extend:is(:hover, .active) > :is(img, svg) + span {
 
+  display: inherit;
 
+  margin-inline-start: 2.5rem;
 
+}
 
+:is(.button, button)[disabled] {
 
+  opacity: 0.5;
 
+  cursor: not-allowed;
 
+}
 
+.button[disabled] {
 
+  pointer-events: none;
 
+}
 
+:is(.button, button)[disabled]::before,
 
+:is(.button, button)[disabled]::after {
 
+  display: none;
 
+}
 
+:is(.button, button).fill {
 
+  background-color: var(--secondary-container) !important;
 
+  color: var(--on-secondary-container) !important;
 
+}
 
+:is(.button, button).vertical {
 
+  border-radius: 2rem;
 
+}
 
+article {
 
+  box-shadow: var(--elevate1);
 
+  background-color: var(--surface-container-low);
 
+  color: var(--on-surface);
 
+  padding: 1rem;
 
+  border-radius: 0.75rem;
 
+  display: block;
 
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
 
+}
 
+article.small {
 
+  block-size: 12rem;
 
+}
 
+article.medium {
 
+  block-size: 20rem;
 
+}
 
+article.large {
 
+  block-size: 32rem;
 
+}
 
+.chip {
 
+  box-sizing: border-box;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  block-size: 2rem;
 
+  min-inline-size: 2rem;
 
+  font-size: 0.875rem;
 
+  font-weight: 500;
 
+  background-color: transparent;
 
+  border: 0.0625rem solid var(--outline-variant);
 
+  color: var(--on-surface-variant);
 
+  padding: 0 1rem;
 
+  margin: 0 0.5rem;
 
+  text-transform: none;
 
+  border-radius: 0.5rem;
 
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
 
+  user-select: none;
 
+  gap: 1rem;
 
+  line-height: normal;
 
+  letter-spacing: normal;
 
+}
 
+.chip.fill:hover {
 
+  box-shadow: var(--elevate1);
 
+}
 
+.chip.medium {
 
+  block-size: 2.5rem;
 
+  min-inline-size: 2.5rem;
 
+  border-radius: 0.5rem;
 
+}
 
+.chip.large {
 
+  block-size: 3rem;
 
+  min-inline-size: 3rem;
 
+  border-radius: 0.5rem;
 
+}
 
+.chip.fill {
 
+  background-color: var(--secondary-container) !important;
 
+  border: none;
 
+}
 
+.chip.round.small {
 
+  border-radius: 1rem;
 
+}
 
+.chip.round {
 
+  border-radius: 1.25rem;
 
+}
 
+.chip.round.large {
 
+  border-radius: 1.5rem;
 
+}
 
+main.responsive {
 
+  flex: 1;
 
+  padding: 0.5rem;
 
+  overflow-x: hidden;
 
+}
 
+:is(main, header, footer, section).responsive {
 
+  max-inline-size: 75rem;
 
+  margin: 0 auto;
 
+}
 
+:is(main, header, footer, section).responsive.max {
 
+  max-inline-size: 100%;
 
+}
 
+*:has(> main.responsive) {
 
+  display: flex;
 
+  flex-direction: column;
 
+  min-block-size: 100vh;
 
+}
 
+*:has(> nav.bottom:not(.s, .m, .l)) {
 
+  padding-block-end: calc(var(--bottom) + 5rem);
 
+}
 
+*:has(> nav.top:not(.s, .m, .l)) {
 
+  padding-block-start: calc(var(--top) + 5rem);
 
+}
 
+*:has(> nav.left:not(.s, .m, .l)) {
 
+  padding-inline-start: calc(var(--left) + 5rem);
 
+}
 
+*:has(> nav.right:not(.s, .m, .l)) {
 
+  padding-inline-end: calc(var(--right) + 5rem);
 
+}
 
+*:has(> nav.drawer.left:not(.s, .m, .l)) {
 
+  padding-inline-start: calc(var(--left) + 20rem);
 
+}
 
+*:has(> nav.drawer.right:not(.s, .m, .l)) {
 
+  padding-inline-end: calc(var(--right) + 20rem);
 
+}
 
+nav.top:not(.s, .m, .l) ~ header.fixed {
 
+  inset-block-start: 5rem;
 
+}
 
+nav.bottom:not(.s, .m, .l) ~ footer.fixed {
 
+  inset-block-end: 5rem;
 
+}
 
+:not(main):has(> aside) {
 
+  overflow: auto;
 
+}
 
+aside {
 
+  z-index: 1;
 
+}
 
+aside:not(.fixed, .absolute).right {
 
+  float: right;
 
+}
 
+aside:not(.fixed, .absolute).left {
 
+  float: left;
 
+}
 
+@media only screen and (max-width: 600px) {
 
+  *:has(> nav.s.bottom) {
 
+    padding-block-end: calc(var(--bottom) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.s.top) {
 
+    padding-block-start: calc(var(--top) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.s.left) {
 
+    padding-inline-start: calc(var(--left) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.s.right) {
 
+    padding-inline-end: calc(var(--right) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.s.drawer.left) {
 
+    padding-inline-start: calc(var(--left) + 20rem);
 
+  }
 
+
 
+  *:has(> nav.s.drawer.right) {
 
+    padding-inline-end: calc(var(--right) + 20rem);
 
+  }
 
+
 
+  nav.s.top ~ header.fixed {
 
+    inset-block-start: 5rem;
 
+  }
 
+
 
+  nav.s.bottom ~ footer.fixed {
 
+    inset-block-end: 5rem;
 
+  }
 
+}
 
+@media only screen and (min-width: 601px) and (max-width: 992px) {
 
+  *:has(> nav.m.bottom) {
 
+    padding-block-end: calc(var(--bottom) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.m.top) {
 
+    padding-block-start: calc(var(--top) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.m.left) {
 
+    padding-inline-start: calc(var(--left) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.m.right) {
 
+    padding-inline-end: calc(var(--right) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.m.drawer.left) {
 
+    padding-inline-start: calc(var(--left) + 20rem);
 
+  }
 
+
 
+  *:has(> nav.m.drawer.right) {
 
+    padding-inline-end: calc(var(--right) + 20rem);
 
+  }
 
+
 
+  nav.m.top ~ header.fixed {
 
+    inset-block-start: 5rem;
 
+  }
 
+
 
+  nav.m.bottom ~ footer.fixed {
 
+    inset-block-end: 5rem;
 
+  }
 
+}
 
+@media only screen and (min-width: 993px) {
 
+  *:has(> nav.l.bottom) {
 
+    padding-block-end: calc(var(--bottom) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.l.top) {
 
+    padding-block-start: calc(var(--top) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.l.left) {
 
+    padding-inline-start: calc(var(--left) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.l.right) {
 
+    padding-inline-end: calc(var(--right) + 5rem);
 
+  }
 
+
 
+  *:has(> nav.l.drawer.left) {
 
+    padding-inline-start: calc(var(--left) + 20rem);
 
+  }
 
+
 
+  *:has(> nav.l.drawer.right) {
 
+    padding-inline-end: calc(var(--right) + 20rem);
 
+  }
 
+
 
+  nav.l.top ~ header.fixed {
 
+    inset-block-start: 5rem;
 
+  }
 
+
 
+  nav.l.bottom ~ footer.fixed {
 
+    inset-block-end: 5rem;
 
+  }
 
+}
 
+@media only screen and (max-width: 600px) {
 
+  main.responsive {
 
+    padding-inline: calc(var(--left) + 0.5rem) calc(var(--right) + 0.5rem);
 
+  }
 
+}
 
+dialog {
 
+  display: block;
 
+  visibility: hidden;
 
+  border: none;
 
+  opacity: 0;
 
+  position: fixed;
 
+  box-shadow: var(--elevate2);
 
+  color: var(--on-surface);
 
+  background-color: var(--surface-container-high);
 
+  padding: 1.5rem;
 
+  z-index: 100;
 
+  inset: 10% auto auto 50%;
 
+  min-inline-size: 20rem;
 
+  max-inline-size: 100%;
 
+  max-block-size: 80%;
 
+  overflow-x: hidden;
 
+  overflow-y: auto;
 
+  transition: all var(--speed3), 0s background-color;
 
+  border-radius: 1.75rem;
 
+  transform: translate(-50%, -4rem);
 
+  outline: none;
 
+}
 
+dialog::backdrop {
 
+  display: none;
 
+}
 
+dialog.small {
 
+  inline-size: 25%;
 
+  block-size: 25%;
 
+}
 
+dialog.medium {
 
+  inline-size: 50%;
 
+  block-size: 50%;
 
+}
 
+dialog.large {
 
+  inline-size: 75%;
 
+  block-size: 75%;
 
+}
 
+dialog:is(.active, [open]) {
 
+  visibility: visible;
 
+  opacity: 1;
 
+  transform: translate(-50%, 0);
 
+}
 
+dialog.top {
 
+  opacity: 1;
 
+  padding: 1rem;
 
+  inset: 0 auto auto 0;
 
+  block-size: auto;
 
+  inline-size: 100%;
 
+  min-inline-size: auto;
 
+  max-block-size: 100%;
 
+  transform: translateY(-100%);
 
+  border-radius: 0 0 1rem 1rem;
 
+}
 
+[dir=rtl] dialog.right,
 
+dialog.left {
 
+  opacity: 1;
 
+  padding: 1rem;
 
+  inset: 0 auto auto 0;
 
+  inline-size: auto;
 
+  block-size: 100%;
 
+  max-block-size: 100%;
 
+  border-radius: 0 1rem 1rem 0;
 
+  background-color: var(--surface);
 
+  transform: translateX(-100%);
 
+}
 
+[dir=rtl] dialog.left,
 
+dialog.right {
 
+  opacity: 1;
 
+  padding: 1rem;
 
+  inset: 0 0 auto auto;
 
+  inline-size: auto;
 
+  block-size: 100%;
 
+  max-block-size: 100%;
 
+  border-radius: 1rem 0 0 1rem;
 
+  background-color: var(--surface);
 
+  transform: translateX(100%);
 
+}
 
+dialog.bottom {
 
+  opacity: 1;
 
+  padding: 1rem;
 
+  inset: auto auto 0 0;
 
+  block-size: auto;
 
+  inline-size: 100%;
 
+  min-inline-size: auto;
 
+  max-block-size: 100%;
 
+  transform: translateY(100%);
 
+  border-radius: 1rem 1rem 0 0;
 
+}
 
+dialog.max {
 
+  inset: 0 auto auto 0;
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  max-inline-size: 100%;
 
+  max-block-size: 100%;
 
+  transform: translateY(4rem);
 
+  background-color: var(--surface);
 
+}
 
+dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
 
+  transform: translate(0, 0);
 
+}
 
+dialog.small:is(.left, .right) {
 
+  inline-size: 20rem;
 
+}
 
+dialog.medium:is(.left, .right) {
 
+  inline-size: 32rem;
 
+}
 
+dialog.large:is(.left, .right) {
 
+  inline-size: 44rem;
 
+}
 
+dialog.small:is(.top, .bottom) {
 
+  block-size: 16rem;
 
+}
 
+dialog.medium:is(.top, .bottom) {
 
+  block-size: 24rem;
 
+}
 
+dialog.large:is(.top, .bottom) {
 
+  block-size: 32rem;
 
+}
 
+hr,
 
+[class*=divider] {
 
+  all: unset;
 
+  min-inline-size: 1.5rem;
 
+  min-block-size: auto;
 
+  block-size: 0.0625rem;
 
+  background-color: var(--outline-variant);
 
+  display: block;
 
+}
 
+hr + *,
 
+[class*=divider] + * {
 
+  margin: 0 !important;
 
+}
 
+hr.medium,
 
+.medium-divider {
 
+  margin: 1rem 0 !important;
 
+}
 
+hr.large,
 
+.large-divider {
 
+  margin: 1.5rem 0 !important;
 
+}
 
+hr.small,
 
+.small-divider {
 
+  margin: 0.5rem 0 !important;
 
+}
 
+hr.vertical,
 
+.divider.vertical {
 
+  min-inline-size: auto;
 
+  min-block-size: 1.5rem;
 
+  inline-size: 0.0625rem;
 
+}
 
+summary.none {
 
+  list-style-type: none;
 
+}
 
+summary.none::-webkit-details-marker {
 
+  display: none;
 
+}
 
+summary {
 
+  cursor: pointer;
 
+}
 
+summary:focus {
 
+  outline: none;
 
+}
 
+.field {
 
+  ---size: 3rem;
 
+  ---start: 1.2rem;
 
+
 
+  block-size: var(---size);
 
+  margin-block-end: 2rem;
 
+  border-radius: 0.25rem 0.25rem 0 0;
 
+}
 
+.grid > * > .field {
 
+  margin-block-end: 1rem;
 
+}
 
+.grid > * > .field + .field {
 
+  margin-block-start: 2rem;
 
+}
 
+.grid.no-space > * > .field + .field {
 
+  margin-block-start: 1rem;
 
+}
 
+.grid.medium-space > * > .field + .field {
 
+  margin-block-start: 2.5rem;
 
+}
 
+.grid.large-space > * > .field + .field {
 
+  margin-block-start: 3rem;
 
+}
 
+.field.small {
 
+  ---size: 2.5rem;
 
+  ---start: 1rem;
 
+}
 
+.field.large {
 
+  ---size: 3.5rem;
 
+  ---start: 1.4rem;
 
+}
 
+.field.extra {
 
+  ---size: 4rem;
 
+  ---start: 1.6rem;
 
+}
 
+.field.border {
 
+  border-radius: 0.25rem;
 
+}
 
+.field.round.small {
 
+  border-radius: 1.25rem;
 
+}
 
+.field.round {
 
+  border-radius: 1.5rem;
 
+}
 
+.field.round.large {
 
+  border-radius: 1.75rem;
 
+}
 
+.field.round.extra {
 
+  border-radius: 2rem;
 
+}
 
+/* icon */
 
+.field > :is(i, img, svg, progress, a:not(.helper, .error)) {
 
+  position: absolute;
 
+  inset: 50% auto auto auto;
 
+  transform: translateY(-50%);
 
+  cursor: pointer;
 
+  z-index: 0;
 
+  inline-size: 1.5rem;
 
+  block-size: 1.5rem;
 
+}
 
+.field > :is(i, img, svg, progress, a:not(.helper, .error)),
 
+[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child {
 
+  inset: 50% 1rem auto auto;
 
+}
 
+.field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child,
 
+[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)) {
 
+  inset: 50% auto auto 1rem;
 
+}
 
+.field.invalid > i {
 
+  color: var(--error);
 
+}
 
+.field > progress.circle {
 
+  inset-block-start: calc(50% - 0.75rem) !important;
 
+  border-width: 0.1875rem;
 
+}
 
+.field > a:not(.helper, .error) {
 
+  z-index: 10;
 
+}
 
+.field > a > :is(i, img, svg, progress, a:not(.helper, .error)) {
 
+  inline-size: 1.5rem;
 
+  block-size: 1.5rem;
 
+}
 
+/* input, textarea and select */
 
+.field > :is(input, textarea, select) {
 
+  all: unset;
 
+  position: relative;
 
+  display: flex;
 
+  align-items: center;
 
+  box-sizing: border-box;
 
+  border-radius: inherit;
 
+  border: 0.0625rem solid transparent;
 
+  padding: 0 0.9375rem;
 
+  font-family: inherit;
 
+  font-size: 1rem;
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  outline: none;
 
+  z-index: 1;
 
+  background: none;
 
+  resize: none;
 
+  text-align: start;
 
+  cursor: text;
 
+}
 
+input::-webkit-date-and-time-value {
 
+  text-align: start;
 
+}
 
+:is(input, select, textarea):-webkit-autofill {
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: var(--on-surface);
 
+}
 
+.field > :is(input, textarea, select):focus {
 
+  border: 0.125rem solid transparent;
 
+  padding: 0 0.875rem;
 
+}
 
+.field.min > textarea {
 
+  overflow: hidden;
 
+  position: absolute;
 
+  inset: 0;
 
+  max-block-size: 12rem;
 
+}
 
+input[type=file],
 
+input[type=color],
 
+:not(.field) > input[type^=date],
 
+:not(.field) > input[type^=time],
 
+input::-webkit-calendar-picker-indicator {
 
+  opacity: 0;
 
+  position: absolute;
 
+  inset: 0;
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  margin: 0;
 
+  padding: 0;
 
+  border: 0;
 
+  outline: 0;
 
+  z-index: 2 !important;
 
+}
 
+input::-webkit-search-decoration,
 
+input::-webkit-search-cancel-button,
 
+input::-webkit-search-results-button,
 
+input::-webkit-search-results-decoration,
 
+input::-webkit-inner-spin-button,
 
+input::-webkit-outer-spin-button {
 
+  display: none;
 
+}
 
+input[type=number] {
 
+  appearance: textfield;
 
+}
 
+.field.border > :is(input, textarea, select) {
 
+  border-color: var(--outline);
 
+}
 
+.field.border > :is(input, textarea, select):focus {
 
+  border-color: var(--primary);
 
+}
 
+.field.round > :is(input, textarea, select) {
 
+  padding-inline: 1.4376rem;
 
+}
 
+.field.round > :is(input, textarea, select):focus {
 
+  padding-inline: 1.375rem;
 
+}
 
+.field.prefix > :is(input, textarea, select) {
 
+  padding-inline-start: 2.9375rem;
 
+}
 
+.field.prefix > .slider {
 
+  margin-inline-start: 3.5rem;
 
+}
 
+.field.prefix > :is(input, textarea, select):focus {
 
+  padding-inline-start: 2.875rem;
 
+}
 
+.field.suffix > :is(input, textarea, select) {
 
+  padding-inline-end: 2.9375rem;
 
+}
 
+.field.suffix > .slider {
 
+  margin-inline-end: 3.5rem;
 
+}
 
+.field.suffix > :is(input, textarea, select):focus {
 
+  padding-inline-end: 2.875rem;
 
+}
 
+.field:not(.border, .round) > :is(input, textarea, select) {
 
+  border-block-end-color: var(--outline);
 
+}
 
+.field:not(.border, .round) > :is(input, textarea, select):focus {
 
+  border-block-end-color: var(--primary);
 
+}
 
+.field.round:not(.border, .fill) > :is(input, textarea, select),
 
+.field.round:not(.border) > :is(input, textarea, select):focus {
 
+  box-shadow: var(--elevate1);
 
+}
 
+.field.round:not(.border, .fill) > :is(input, textarea, select):focus {
 
+  box-shadow: var(--elevate2);
 
+}
 
+.field.invalid:not(.border, .round) > :is(input, textarea, select),
 
+.field.invalid:not(.border, .round) > :is(input, textarea, select):focus {
 
+  border-block-end-color: var(--error);
 
+}
 
+.field.invalid.border > :is(input, textarea, select),
 
+.field.invalid.border > :is(input, textarea, select):focus {
 
+  border-color: var(--error);
 
+}
 
+.field:has(> :disabled) {
 
+  opacity: 0.5;
 
+  cursor: not-allowed;
 
+}
 
+.field > :disabled {
 
+  cursor: not-allowed;
 
+}
 
+.field.textarea.small:not(.min) {
 
+  ---size: 4.5rem;
 
+}
 
+.field.textarea:not(.min) {
 
+  ---size: 5.5rem;
 
+}
 
+.field.textarea.large:not(.min) {
 
+  ---size: 6.5rem;
 
+}
 
+.field.textarea.extra:not(.min) {
 
+  ---size: 7.5rem;
 
+}
 
+.field > select {
 
+  user-select: none;
 
+}
 
+.field > select > option {
 
+  background-color: var(--surface-container);
 
+  color: var(--on-surface);
 
+}
 
+.field.label > :is(input, select) {
 
+  padding-block-start: 1rem;
 
+}
 
+.field.label.border:not(.fill) > :is(input, select) {
 
+  padding-block-start: 0;
 
+}
 
+.field > textarea {
 
+  padding-block-start: var(---start);
 
+  white-space: pre-wrap;
 
+}
 
+.field > textarea:focus {
 
+  padding-block-start: calc(var(---start) - 0.06rem);
 
+}
 
+.field:not(.label) > textarea,
 
+.field.border.label:not(.fill) > textarea {
 
+  padding-block-start: calc(var(---start) - 0.5rem);
 
+}
 
+.field:not(.label) > textarea:focus,
 
+.field.border.label:not(.fill) > textarea:focus {
 
+  padding-block-start: calc(var(---start) - 0.56rem);
 
+}
 
+/* label */
 
+.field.label > label {
 
+  position: absolute;
 
+  inset: -0.5rem auto auto 1rem;
 
+  display: flex;
 
+  inline-size: calc(100% - 5rem);
 
+  block-size: 4rem;
 
+  line-height: 4rem;
 
+  font-size: 1rem;
 
+  transition: all 0.2s;
 
+  gap: 0.25rem;
 
+  white-space: nowrap;
 
+}
 
+[dir=rtl] .field.label > label {
 
+  inset: -0.5rem 1rem auto auto;
 
+}
 
+.field.label.small > label {
 
+  block-size: 3.5rem;
 
+  line-height: 3.5rem;
 
+}
 
+.field.label.large > label {
 
+  block-size: 4.5rem;
 
+  line-height: 4.5rem;
 
+}
 
+.field.label.extra > label {
 
+  block-size: 5rem;
 
+  line-height: 5rem;
 
+}
 
+.field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
 
+  inset-inline-start: 1rem;
 
+}
 
+.field.label.round > label,
 
+.field.label.border.prefix.round:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
 
+  inset-inline-start: 1.5rem;
 
+}
 
+.field.label.prefix > label {
 
+  inset-inline-start: 3rem;
 
+}
 
+.field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
 
+  block-size: 2.5rem;
 
+  line-height: 2.5rem;
 
+  font-size: 0.75rem;
 
+}
 
+.field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
 
+  block-size: 1rem;
 
+  line-height: 1rem;
 
+}
 
+.field.label.border:not(.fill) > label::after {
 
+  content: "";
 
+  display: block;
 
+  margin-block-start: 0.5rem;
 
+  border-block-start: 0.0625rem solid var(--outline);
 
+  block-size: 1rem;
 
+  transition: none;
 
+  flex: auto;
 
+}
 
+.field.label.border:not(.fill) > :focus + label::after {
 
+  border-block-start: 0.125rem solid var(--primary);
 
+}
 
+.field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
 
+.field.label.border:not(.fill) > select {
 
+  clip-path: polygon(-2% -2%, 0.75rem -2%, 0.75rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -2%, 102% -2%, 102% 102%, -2% 102%);
 
+}
 
+[dir=rtl] .field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
 
+[dir=rtl] .field.label.border:not(.fill) > select {
 
+  clip-path: polygon(-2% -2%, 5rem -2%, 5rem 0.5rem, calc(100% - 0.75rem) 0.5rem, calc(100% - 0.75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
 
+}
 
+.field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
 
+.field.label.border.round:not(.fill) > select {
 
+  clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -2%, 102% -2%, 102% 102%, -2% 102%);
 
+}
 
+[dir=rtl] .field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
 
+[dir=rtl] .field.label.border.round:not(.fill) > select {
 
+  clip-path: polygon(-2% -2%, 5rem -2%, 5rem 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
 
+}
 
+.field.label > :focus + label {
 
+  color: var(--primary);
 
+}
 
+.field.label.invalid > label,
 
+.field.label.invalid > label::after {
 
+  color: var(--error) !important;
 
+  border-color: var(--error) !important;
 
+}
 
+.field.label > label > a {
 
+  block-size: inherit;
 
+  line-height: inherit;
 
+  inline-size: 1rem;
 
+}
 
+.field.label > label > a > :is(i, img, svg) {
 
+  block-size: 1rem;
 
+  line-height: 1rem;
 
+  inline-size: 1rem;
 
+  font-size: 1rem;
 
+}
 
+/* helper */
 
+.field > :is(.helper, .error) {
 
+  position: absolute;
 
+  inset: auto auto 0 1rem;
 
+  transform: translateY(100%);
 
+  font-size: 0.75rem;
 
+  background: none !important;
 
+  padding-block-start: 0.125rem;
 
+}
 
+[dir=rtl] .field > :is(.helper, .error) {
 
+  inset: auto 1rem 0 auto;
 
+}
 
+a.helper {
 
+  color: var(--primary);
 
+}
 
+.field > .error {
 
+  color: var(--error) !important;
 
+}
 
+.field.round > :is(.helper, .error) {
 
+  inset-inline-start: 1.5rem;
 
+}
 
+.field.invalid > .helper {
 
+  display: none;
 
+}
 
+table td > .field {
 
+  margin: 0;
 
+}
 
+fieldset {
 
+  border-radius: 0.25rem;
 
+  padding: 1rem;
 
+  border: 0.0625rem solid var(--outline-variant);
 
+}
 
+fieldset > legend {
 
+  margin: 0 -0.25rem;
 
+  padding: 0 0.25rem;
 
+}
 
+fieldset > legend + * {
 
+  margin-block-start: 0 !important;
 
+}
 
+.grid {
 
+  ---gap: 1rem;
 
+
 
+  display: grid;
 
+  grid-template-columns: repeat(12, calc(8.33% - var(---gap) + (var(---gap) / 12)));
 
+  gap: var(---gap);
 
+}
 
+.grid.no-space {
 
+  ---gap: 0rem;
 
+}
 
+.grid.medium-space {
 
+  ---gap: 1.5rem;
 
+}
 
+.grid.large-space {
 
+  ---gap: 2rem;
 
+}
 
+.grid > * {
 
+  margin: 0;
 
+}
 
+.s1 {
 
+  grid-area: auto/span 1;
 
+}
 
+.s2 {
 
+  grid-area: auto/span 2;
 
+}
 
+.s3 {
 
+  grid-area: auto/span 3;
 
+}
 
+.s4 {
 
+  grid-area: auto/span 4;
 
+}
 
+.s5 {
 
+  grid-area: auto/span 5;
 
+}
 
+.s6 {
 
+  grid-area: auto/span 6;
 
+}
 
+.s7 {
 
+  grid-area: auto/span 7;
 
+}
 
+.s8 {
 
+  grid-area: auto/span 8;
 
+}
 
+.s9 {
 
+  grid-area: auto/span 9;
 
+}
 
+.s10 {
 
+  grid-area: auto/span 10;
 
+}
 
+.s11 {
 
+  grid-area: auto/span 11;
 
+}
 
+.s12 {
 
+  grid-area: auto/span 12;
 
+}
 
+@media only screen and (min-width: 601px) {
 
+  .m1 {
 
+    grid-area: auto/span 1;
 
+  }
 
+
 
+  .m2 {
 
+    grid-area: auto/span 2;
 
+  }
 
+
 
+  .m3 {
 
+    grid-area: auto/span 3;
 
+  }
 
+
 
+  .m4 {
 
+    grid-area: auto/span 4;
 
+  }
 
+
 
+  .m5 {
 
+    grid-area: auto/span 5;
 
+  }
 
+
 
+  .m6 {
 
+    grid-area: auto/span 6;
 
+  }
 
+
 
+  .m7 {
 
+    grid-area: auto/span 7;
 
+  }
 
+
 
+  .m8 {
 
+    grid-area: auto/span 8;
 
+  }
 
+
 
+  .m9 {
 
+    grid-area: auto/span 9;
 
+  }
 
+
 
+  .m10 {
 
+    grid-area: auto/span 10;
 
+  }
 
+
 
+  .m11 {
 
+    grid-area: auto/span 11;
 
+  }
 
+
 
+  .m12 {
 
+    grid-area: auto/span 12;
 
+  }
 
+}
 
+@media only screen and (min-width: 993px) {
 
+  .l1 {
 
+    grid-area: auto/span 1;
 
+  }
 
+
 
+  .l2 {
 
+    grid-area: auto/span 2;
 
+  }
 
+
 
+  .l3 {
 
+    grid-area: auto/span 3;
 
+  }
 
+
 
+  .l4 {
 
+    grid-area: auto/span 4;
 
+  }
 
+
 
+  .l5 {
 
+    grid-area: auto/span 5;
 
+  }
 
+
 
+  .l6 {
 
+    grid-area: auto/span 6;
 
+  }
 
+
 
+  .l7 {
 
+    grid-area: auto/span 7;
 
+  }
 
+
 
+  .l8 {
 
+    grid-area: auto/span 8;
 
+  }
 
+
 
+  .l9 {
 
+    grid-area: auto/span 9;
 
+  }
 
+
 
+  .l10 {
 
+    grid-area: auto/span 10;
 
+  }
 
+
 
+  .l11 {
 
+    grid-area: auto/span 11;
 
+  }
 
+
 
+  .l12 {
 
+    grid-area: auto/span 12;
 
+  }
 
+}
 
+i,
 
+:is(.checkbox, .radio, .switch) > span::before,
 
+.icon > span > i {
 
+  ---size: 1.5rem;
 
+
 
+  font-family: var(--font-icon);
 
+  font-weight: normal;
 
+  font-style: normal;
 
+  font-size: var(---size);
 
+  letter-spacing: normal;
 
+  text-transform: none;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  white-space: nowrap;
 
+  word-wrap: normal;
 
+  direction: ltr;
 
+  font-feature-settings: "liga";
 
+  -webkit-font-smoothing: antialiased;
 
+  vertical-align: middle;
 
+  text-align: center;
 
+  overflow: hidden;
 
+  inline-size: var(---size);
 
+  min-inline-size: var(---size);
 
+  block-size: var(---size);
 
+  min-block-size: var(---size);
 
+  box-sizing: content-box;
 
+  line-height: normal;
 
+}
 
+i.tiny {
 
+  ---size: 1rem;
 
+}
 
+.chip > i,
 
+i.small {
 
+  ---size: 1.25rem;
 
+}
 
+i.medium {
 
+  ---size: 1.5rem;
 
+}
 
+i.large {
 
+  ---size: 1.75rem;
 
+}
 
+i.extra {
 
+  ---size: 2rem;
 
+}
 
+i.fill,
 
+a.row:is(:hover, :focus) > i,
 
+.transparent:is(:hover, :focus) > i {
 
+  font-variation-settings: "FILL" 1;
 
+}
 
+i > :is(img, svg) {
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  background-size: 100%;
 
+  border-radius: inherit;
 
+  position: absolute;
 
+  inset: 0 auto auto 0;
 
+  padding: inherit;
 
+}
 
+i[class*=fa-] {
 
+  font-size: calc(var(---size) * 0.85);
 
+  line-height: normal;
 
+  block-size: auto;
 
+  min-block-size: auto;
 
+}
 
+.absolute {
 
+  position: absolute;
 
+}
 
+.fixed {
 
+  position: fixed;
 
+}
 
+:is(.absolute, .fixed).left.right {
 
+  inline-size: auto;
 
+}
 
+:is(.absolute, .fixed).left.right.small {
 
+  block-size: 20rem;
 
+}
 
+:is(.absolute, .fixed).left.right.medium {
 
+  block-size: 28rem;
 
+}
 
+:is(.absolute, .fixed).left.right.large {
 
+  block-size: 44rem;
 
+}
 
+:is(.absolute, .fixed).top.bottom.small {
 
+  inline-size: 20rem;
 
+}
 
+:is(.absolute, .fixed).top.bottom.medium {
 
+  inline-size: 28rem;
 
+}
 
+:is(.absolute, .fixed).top.bottom.large {
 
+  inline-size: 44rem;
 
+}
 
+header,
 
+footer {
 
+  display: flex;
 
+  justify-content: center;
 
+  flex-direction: column;
 
+  min-block-size: 4rem;
 
+  padding: 0 1rem;
 
+  background-color: var(--surface-container);
 
+}
 
+main ~ footer {
 
+  min-block-size: 5rem;
 
+}
 
+:is(header, footer).fixed.responsive {
 
+  z-index: 12;
 
+}
 
+:is(header, footer, menu > *).fixed {
 
+  position: sticky;
 
+  inset: 0;
 
+  z-index: 11;
 
+  background-color: inherit;
 
+}
 
+:is(dialog, menu, nav, article) > :is(header, footer) {
 
+  background-color: inherit;
 
+  padding: 0;
 
+}
 
+:is(dialog, article, [class*=padding]) > :is(header, footer).fixed {
 
+  ---translateY: 1rem;
 
+
 
+  transform: translateY(var(---translateY));
 
+}
 
+:is(dialog, article, [class*=padding]) > header.fixed {
 
+  transform: translateY(calc(-1 * var(---translateY)));
 
+}
 
+.no-padding > :is(header, footer).fixed {
 
+  transform: none;
 
+}
 
+.small-padding > :is(header, footer).fixed {
 
+  ---translateY: 0.5rem;
 
+}
 
+:is(.large-padding, dialog:not(.left, .right, .top, .bottom)) > :is(header, footer).fixed {
 
+  ---translateY: 1.5rem;
 
+}
 
+svg {
 
+  fill: currentcolor;
 
+}
 
+:is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .responsive) {
 
+  object-fit: cover;
 
+  object-position: center;
 
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
 
+  block-size: 3rem;
 
+  inline-size: 3rem;
 
+}
 
+:is(img, svg, video).round {
 
+  border-radius: 0.5rem;
 
+}
 
+:is(img, svg, video).tiny {
 
+  block-size: 2rem;
 
+  inline-size: 2rem;
 
+}
 
+:is(img, svg, video).small {
 
+  block-size: 2.5rem;
 
+  inline-size: 2.5rem;
 
+}
 
+:is(img, svg, video).large {
 
+  block-size: 3.5rem;
 
+  inline-size: 3.5rem;
 
+}
 
+:is(img, svg, video).extra {
 
+  block-size: 4rem;
 
+  inline-size: 4rem;
 
+}
 
+:is(img, svg, video).responsive {
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  margin: 0 auto;
 
+}
 
+:is(button, .button, .chip):not(.transparent) > .responsive {
 
+  border: 0.25rem solid transparent;
 
+}
 
+:is(button, .button, .chip.medium) > .responsive {
 
+  inline-size: 2.5rem;
 
+}
 
+:is(button.small, .button.small, .chip:not(.medium)) > .responsive {
 
+  inline-size: 2rem;
 
+}
 
+:is(button, .button, .chip).large > .responsive {
 
+  inline-size: 3rem;
 
+}
 
+:is(button, .button, .chip).extra > .responsive {
 
+  inline-size: 3.5rem;
 
+}
 
+:is(img, svg, video).responsive.tiny {
 
+  inline-size: 100%;
 
+  block-size: 4rem;
 
+}
 
+:is(img, svg, video).responsive.small {
 
+  inline-size: 100%;
 
+  block-size: 8rem;
 
+}
 
+:is(img, svg, video).responsive.medium {
 
+  inline-size: 100%;
 
+  block-size: 12rem;
 
+}
 
+:is(img, svg, video).responsive.large {
 
+  inline-size: 100%;
 
+  block-size: 16rem;
 
+}
 
+:is(img, svg, video).responsive.extra {
 
+  inline-size: 100%;
 
+  block-size: 20rem;
 
+}
 
+:is(img, svg, video).responsive.round {
 
+  border-radius: 2rem;
 
+}
 
+:is(img, svg, video).empty-state {
 
+  max-inline-size: 100%;
 
+  inline-size: 24rem;
 
+}
 
+:is(button, .button, .chip, .field) > :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra),
 
+.tabs :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
 
+  min-inline-size: 1.5rem;
 
+  max-inline-size: 1.5rem;
 
+  min-block-size: 1.5rem;
 
+  max-block-size: 1.5rem;
 
+}
 
+:is(button, .button, .chip) > :is(i, img, svg),
 
+:is(button, .button, .chip) > .responsive {
 
+  margin: 0 -0.5rem;
 
+}
 
+:is(button, .button) > .responsive {
 
+  margin-inline-start: -1.5rem;
 
+}
 
+:is(button, .button) > span + .responsive {
 
+  margin-inline-start: -0.5rem;
 
+  margin-inline-end: -1.5rem;
 
+}
 
+.chip > .responsive {
 
+  margin-inline-start: -1rem;
 
+}
 
+.chip > span + .responsive {
 
+  margin-inline-start: -0.5rem;
 
+  margin-inline-end: -1rem;
 
+}
 
+:is(.circle, .square) > .responsive {
 
+  margin: 0;
 
+}
 
+.extend > :is(.responsive, i) {
 
+  margin: 0;
 
+  position: absolute;
 
+  inset-inline: 1rem;
 
+  z-index: 1;
 
+}
 
+.extend > .responsive {
 
+  inset-inline: 0;
 
+  inline-size: 3.5rem;
 
+}
 
+.extend.border > .responsive {
 
+  inline-size: 3.375rem;
 
+}
 
+menu > li {
 
+  all: unset;
 
+}
 
+menu {
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  position: absolute;
 
+  box-shadow: var(--elevate2);
 
+  background-color: var(--surface-container);
 
+  z-index: 11;
 
+  inset: auto auto 0 0;
 
+  inline-size: 100%;
 
+  max-block-size: 50vh;
 
+  max-inline-size: none !important;
 
+  overflow-x: hidden;
 
+  overflow-y: auto;
 
+  font-size: 0.875rem;
 
+  font-weight: normal;
 
+  text-transform: none;
 
+  color: var(--on-surface);
 
+  line-height: normal;
 
+  text-align: start;
 
+  border-radius: 0.25rem;
 
+  transform: scale(0.8) translateY(120%);
 
+  transition: all var(--speed2), 0s background-color;
 
+}
 
+[dir=rtl] menu {
 
+  inset: auto 0 0 auto;
 
+}
 
+menu.no-wrap {
 
+  inline-size: max-content;
 
+  white-space: nowrap !important;
 
+}
 
+menu.active,
 
+menu:not([data-ui]):active,
 
+:not(menu, [data-ui]):focus-within > menu,
 
+menu > :is(a, li, nav):hover + menu,
 
+menu > menu:hover {
 
+  opacity: 1;
 
+  visibility: visible;
 
+  transform: scale(1) translateY(100%);
 
+}
 
+menu * {
 
+  white-space: inherit !important;
 
+}
 
+menu > :is(a, nav, li > a, li > nav) {
 
+  padding: 0.5rem 1rem;
 
+  min-block-size: 3rem;
 
+  flex: 1;
 
+  margin: 0 !important;
 
+}
 
+menu > :is(a, li > a):not(.row) {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: flex-start;
 
+}
 
+menu > :is(a, nav, li > a, li > nav):is(:hover, :focus, .active) {
 
+  background-color: var(--active);
 
+}
 
+menu.min {
 
+  inset: 0 0 auto 0;
 
+  transform: none !important;
 
+  border-radius: inherit;
 
+}
 
+[dir=rtl] menu.min.right,
 
+menu.min.left {
 
+  inset: 0 0 auto auto;
 
+}
 
+[dir=rtl] menu.min.left,
 
+menu.min.right {
 
+  inset: 0 auto auto 0;
 
+}
 
+menu.max {
 
+  position: fixed;
 
+  inset: 0;
 
+  block-size: 100%;
 
+  max-block-size: none;
 
+  min-block-size: auto;
 
+  z-index: 100;
 
+  transform: none !important;
 
+}
 
+menu.no-wrap:is(.min, .max) {
 
+  min-inline-size: 16rem;
 
+}
 
+[dir=rtl] menu.right,
 
+menu.left {
 
+  inset: auto 0 0 auto;
 
+}
 
+[dir=rtl] menu.left,
 
+menu.right {
 
+  inset: auto auto 0 0;
 
+}
 
+menu:has(> menu),
 
+menu > menu {
 
+  ---child: 1;
 
+  ---type: 0;
 
+
 
+  overflow: unset;
 
+  white-space: nowrap;
 
+  inline-size: auto;
 
+  min-inline-size: 12rem;
 
+  max-block-size: none;
 
+}
 
+menu > menu,
 
+menu > menu.right,
 
+[dir=rtl] menu > menu.left {
 
+  inset: auto auto calc(3rem * (var(---child) - var(---type))) 100%;
 
+}
 
+[dir=rtl] menu > menu,
 
+[dir=rtl] menu > menu.right,
 
+menu > menu.left {
 
+  inset: auto 100% calc(3rem * (var(---child) - var(---type))) auto;
 
+}
 
+menu > :nth-last-child(2) {
 
+  ---child: 2;
 
+}
 
+menu > :nth-last-child(3) {
 
+  ---child: 3;
 
+}
 
+menu > :nth-last-child(4) {
 
+  ---child: 4;
 
+}
 
+menu > :nth-last-child(5) {
 
+  ---child: 5;
 
+}
 
+menu > :nth-last-child(6) {
 
+  ---child: 6;
 
+}
 
+menu > :nth-last-child(7) {
 
+  ---child: 7;
 
+}
 
+menu > :nth-last-child(8) {
 
+  ---child: 8;
 
+}
 
+menu > :nth-last-child(9) {
 
+  ---child: 9;
 
+}
 
+menu > :nth-last-child(10) {
 
+  ---child: 10;
 
+}
 
+menu > :nth-last-child(11) {
 
+  ---child: 11;
 
+}
 
+menu > :nth-last-of-type(2) {
 
+  ---type: 1;
 
+}
 
+menu > :nth-last-of-type(3) {
 
+  ---type: 2;
 
+}
 
+menu > :nth-last-of-type(4) {
 
+  ---type: 3;
 
+}
 
+menu > :nth-last-of-type(5) {
 
+  ---type: 4;
 
+}
 
+menu > :nth-last-of-type(6) {
 
+  ---type: 5;
 
+}
 
+menu > :nth-last-of-type(7) {
 
+  ---type: 6;
 
+}
 
+menu > :nth-last-of-type(8) {
 
+  ---type: 7;
 
+}
 
+menu > :nth-last-of-type(9) {
 
+  ---type: 8;
 
+}
 
+menu > :nth-last-of-type(10) {
 
+  ---type: 9;
 
+}
 
+menu > :nth-last-of-type(11) {
 
+  ---type: 10;
 
+}
 
+nav > :is(ol, ul),
 
+nav > :is(ol, ul) > li {
 
+  all: unset;
 
+}
 
+nav,
 
+.row,
 
+a.row,
 
+nav.drawer > :is(a, label),
 
+nav.drawer > :is(ol, ul) > li > :is(a, label) {
 
+  display: flex;
 
+  align-items: center;
 
+  align-self: normal;
 
+  text-align: start;
 
+  justify-content: flex-start;
 
+  white-space: nowrap;
 
+  gap: 1rem;
 
+}
 
+a.row,
 
+nav.row {
 
+  min-block-size: 3rem;
 
+  margin: 0;
 
+}
 
+:is(nav, .row, .max) > :only-child,
 
+nav > :is(ol, ul) > li > :only-child {
 
+  margin: 0;
 
+}
 
+:is(nav, .row) > * {
 
+  margin: 0;
 
+  white-space: normal;
 
+  flex: none;
 
+}
 
+:is(nav, .row).no-space {
 
+  gap: 0;
 
+}
 
+:is(nav, .row).no-space:not(.vertical) > .border + .border {
 
+  border-inline-start: 0;
 
+}
 
+:is(nav, .row).no-space.vertical > .border + .border {
 
+  border-top: 0;
 
+}
 
+:is(nav, .row).medium-space {
 
+  gap: 1.5rem;
 
+}
 
+:is(nav, .row).large-space {
 
+  gap: 2rem;
 
+}
 
+:is(nav, .row) > .max,
 
+:is(nav, .row) > :is(ol, ul) > .max,
 
+nav.drawer > :is(a, label) > .max,
 
+nav.drawer > :is(ol, ul) > li > :is(a, label) > .max {
 
+  flex: 1;
 
+}
 
+:is(nav, .row).wrap {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+}
 
+:is(header, footer) > :is(nav, .row) {
 
+  min-block-size: inherit;
 
+}
 
+:is(nav, .row) > .border.no-margin + .border.no-margin {
 
+  border-inline-start: 0;
 
+}
 
+nav:is(.left, .right, .top, .bottom) {
 
+  border: 0;
 
+  position: fixed;
 
+  color: var(--on-surface);
 
+  transform: none;
 
+  z-index: 100;
 
+  block-size: auto;
 
+  inline-size: auto;
 
+  text-align: center;
 
+  padding: 0.5rem 1rem;
 
+  inset: var(--top) var(--right) var(--bottom) var(--left);
 
+  margin: 0;
 
+}
 
+nav:is(.left, .right) {
 
+  inline-size: 5rem;
 
+  justify-content: flex-start;
 
+  flex-direction: column;
 
+  background-color: var(--surface);
 
+}
 
+nav:is(.top, .bottom) {
 
+  block-size: 5rem;
 
+  justify-content: center;
 
+  flex-direction: row;
 
+  background-color: var(--surface-container);
 
+}
 
+nav.top {
 
+  inset-block-end: auto;
 
+}
 
+nav.left {
 
+  inset-inline-end: auto;
 
+}
 
+nav.right {
 
+  inset-inline-start: auto;
 
+}
 
+nav.bottom {
 
+  inset-block-start: auto;
 
+}
 
+nav.drawer {
 
+  flex-direction: column;
 
+  align-items: normal;
 
+  inline-size: 20rem;
 
+  gap: 0;
 
+  padding: 0.5rem 1rem;
 
+}
 
+nav.drawer:is(.min, .max) {
 
+  inline-size: auto;
 
+}
 
+nav.drawer.max {
 
+  inline-size: 100%;
 
+}
 
+:is(nav, .row) > header {
 
+  background-color: inherit;
 
+}
 
+nav:is(.left, .right) > header {
 
+  transform: translateY(-0.5rem);
 
+}
 
+nav.drawer > header {
 
+  transform: translateY(-0.75rem);
 
+  min-block-size: 4.5rem;
 
+  align-self: stretch;
 
+}
 
+nav.drawer > :is(a, label),
 
+nav.drawer > :is(ol, ul) > li > :is(a, label),
 
+:is(a.row, nav.row):is(.wave, .slow-ripple, .ripple, .fast-ripple) {
 
+  padding: 0.75rem;
 
+  font-size: inherit;
 
+}
 
+nav.drawer > a,
 
+nav.drawer > :is(ol, ul) > li > a {
 
+  border-radius: 2rem;
 
+}
 
+nav.drawer > a:is(:hover, .active),
 
+nav.drawer > :is(ol, ul) > li > a:is(:hover, .active) {
 
+  background-color: var(--secondary-container);
 
+}
 
+nav.drawer > a:is(:hover, :focus, .active) > i,
 
+nav.drawer > :is(ol, ul) > li > a:is(:hover, :focus, .active) > i {
 
+  font-variation-settings: "FILL" 1;
 
+}
 
+nav > :is(ol, ul) {
 
+  all: inherit;
 
+  flex: auto;
 
+}
 
+nav:not(.left, .right, .bottom, .top) > :is(ol, ul) {
 
+  padding: 0;
 
+}
 
+nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip),
 
+nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
 
+  align-self: center;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 0.25rem;
 
+  line-height: normal;
 
+}
 
+nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip),
 
+nav:is(.top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
 
+  inline-size: 3.5rem;
 
+}
 
+nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip) > i,
 
+nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) > i {
 
+  padding: 0.25rem;
 
+  border-radius: 2rem;
 
+  transition: padding var(--speed1) linear;
 
+  margin: 0 auto;
 
+}
 
+nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip):is(:hover, :focus, .active) > i,
 
+nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip):is(:hover, :focus, .active) > i {
 
+  background-color: var(--secondary-container);
 
+  color: var(--on-secondary-container);
 
+  padding: 0.25rem 1rem;
 
+  font-variation-settings: "FILL" 1;
 
+}
 
+:is(nav, .row):is(.left-align, .top-align, .vertical) {
 
+  justify-content: flex-start;
 
+}
 
+:is(nav, .row):is(.right-align, .bottom-align) {
 
+  justify-content: flex-end;
 
+}
 
+:is(nav, .row):is(.center-align, .middle-align) {
 
+  justify-content: center;
 
+}
 
+:is(nav, .row):is(.left-align, .top-align, .vertical).vertical {
 
+  align-items: flex-start;
 
+}
 
+:is(nav, .row):is(.right-align, .bottom-align).vertical {
 
+  align-items: flex-end;
 
+}
 
+:is(nav, .row):is(.center-align, .middle-align).vertical {
 
+  align-items: center;
 
+}
 
+:is(.drawer, .vertical) > :is(li, [class*=divider], hr):not(.vertical),
 
+:is(.drawer, .vertical) > :is(ol, ul) > li:not(.vertical) {
 
+  align-self: stretch;
 
+}
 
+nav:not(.left, .right) > .space {
 
+  inline-size: 0.5rem;
 
+}
 
+nav:not(.left, .right) > .medium-space {
 
+  inline-size: 1rem;
 
+}
 
+nav:not(.left, .right) > .large-space {
 
+  inline-size: 1.5rem;
 
+}
 
+nav.tabbed {
 
+  background-color: var(--surface-container);
 
+  border-radius: 4rem !important;
 
+  gap: 0rem;
 
+  block-size: 4rem;
 
+}
 
+nav.tabbed.small {
 
+  block-size: 3rem;
 
+}
 
+nav.tabbed.large {
 
+  block-size: 5rem;
 
+}
 
+nav.tabbed > a {
 
+  border-radius: inherit;
 
+  block-size: inherit;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  padding-inline: 1rem;
 
+  gap: 0.5rem;
 
+  font-size: 1rem;
 
+  flex: 1;
 
+}
 
+nav.tabbed > a.active {
 
+  background-color: var(--primary-container);
 
+}
 
+:not(nav) > :is(ul, ol) {
 
+  all: revert;
 
+}
 
+:is(.scroll, .no-scroll, .no-space, .tabs, .tabbed) > :focus-visible {
 
+  outline: 0.125rem solid var(--primary);
 
+  outline-offset: -0.125rem;
 
+}
 
+@media only screen and (max-width: 600px) {
 
+  nav.top,
 
+  nav.bottom {
 
+    justify-content: space-around;
 
+  }
 
+}
 
+.overlay {
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  position: fixed;
 
+  inset: 0;
 
+  color: var(--on-surface);
 
+  background-color: var(--overlay);
 
+  z-index: 100;
 
+  transition: all var(--speed3), 0s background-color;
 
+}
 
+.overlay.active {
 
+  opacity: 1;
 
+  visibility: visible;
 
+}
 
+.page {
 
+  ---transform: translate(0, 0);
 
+
 
+  opacity: 0;
 
+  position: absolute;
 
+  display: none;
 
+}
 
+.page.active {
 
+  opacity: 1;
 
+  position: inherit;
 
+  display: inherit;
 
+  animation: var(--speed4) to-page ease;
 
+}
 
+.page.active.top {
 
+  ---transform: translate(0, -4rem);
 
+}
 
+.page.active.bottom {
 
+  ---transform: translate(0, 4rem);
 
+}
 
+.page.active.left {
 
+  ---transform: translate(-4rem, 0);
 
+}
 
+.page.active.right {
 
+  ---transform: translate(4rem, 0);
 
+}
 
+@keyframes to-page {
 
+  from {
 
+    opacity: 0;
 
+    transform: var(---transform);
 
+  }
 
+
 
+  to {
 
+    opacity: 1;
 
+    transform: translate(0, 0);
 
+  }
 
+}
 
+progress {
 
+  position: relative;
 
+  inline-size: 100%;
 
+  block-size: 0.5rem;
 
+  color: var(--primary);
 
+  background: var(--primary-container);
 
+  border-radius: 1rem;
 
+  flex: none;
 
+  border: none;
 
+  overflow: hidden;
 
+  writing-mode: horizontal-tb;
 
+  direction: ltr;
 
+  -webkit-appearance: none;
 
+}
 
+progress.small {
 
+  inline-size: 4rem;
 
+}
 
+progress.medium {
 
+  inline-size: 8rem;
 
+}
 
+progress.large {
 
+  inline-size: 12rem;
 
+}
 
+progress:not(.circle, [value])::after {
 
+  content: "";
 
+  position: absolute;
 
+  inset: 0;
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+  clip-path: none;
 
+  background: currentcolor;
 
+  animation: 1.6s to-linear ease infinite;
 
+}
 
+progress:not(.circle, [value])::-moz-progress-bar {
 
+  animation: 1.6s to-linear ease infinite;
 
+}
 
+progress:not(.circle, [value])::-webkit-progress-value {
 
+  animation: 1.6s to-linear ease infinite;
 
+}
 
+progress::-webkit-progress-bar {
 
+  background: none;
 
+}
 
+progress::-webkit-progress-value {
 
+  background: currentcolor;
 
+}
 
+progress::-moz-progress-bar {
 
+  background: currentcolor;
 
+}
 
+progress.circle {
 
+  display: inline-block;
 
+  inline-size: 2.5rem;
 
+  block-size: 2.5rem;
 
+  border-radius: 50%;
 
+  border-width: 0.3rem;
 
+  border-style: solid;
 
+  border-color: currentcolor;
 
+  animation: 1.6s to-circular linear infinite;
 
+  background: none;
 
+  flex: none;
 
+}
 
+progress.circle::-moz-progress-bar {
 
+  background: none;
 
+}
 
+progress.circle.small {
 
+  inline-size: 1.5rem;
 
+  block-size: 1.5rem;
 
+  border-width: 0.2rem;
 
+}
 
+progress.circle.large {
 
+  inline-size: 3.5rem;
 
+  block-size: 3.5rem;
 
+  border-width: 0.4rem;
 
+}
 
+:is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
 
+  flex: auto;
 
+}
 
+progress.max {
 
+  display: unset;
 
+  position: absolute;
 
+  inline-size: 100% !important;
 
+  block-size: 100% !important;
 
+  color: var(--active);
 
+  background: none;
 
+  inset: 0;
 
+  border-radius: inherit;
 
+  animation: none;
 
+  writing-mode: horizontal-tb;
 
+}
 
+progress:is(.horizontal, .vertical, .max) {
 
+  display: unset;
 
+  inline-size: 100% !important;
 
+}
 
+progress.vertical {
 
+  writing-mode: vertical-lr;
 
+}
 
+progress.max.vertical {
 
+  transform: rotate(-180deg);
 
+}
 
+progress.max + * {
 
+  margin-block-start: 0;
 
+}
 
+:is(.button, button, .chip) > progress.circle {
 
+  color: inherit;
 
+}
 
+@supports (-moz-appearance:none) {
 
+  progress.max.vertical {
 
+    transform: none;
 
+  }
 
+}
 
+@keyframes to-linear {
 
+  0% {
 
+    margin-inline-start: 0%;
 
+    inline-size: 0%;
 
+  }
 
+
 
+  50% {
 
+    margin-inline-start: 0%;
 
+    inline-size: 100%;
 
+  }
 
+
 
+  100% {
 
+    margin-inline-start: 100%;
 
+    inline-size: 0%;
 
+  }
 
+}
 
+@keyframes to-circular {
 
+  0% {
 
+    transform: rotate(0deg);
 
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
 
+  }
 
+
 
+  20% {
 
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
 
+  }
 
+
 
+  30% {
 
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
 
+  }
 
+
 
+  40% {
 
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
 
+  }
 
+
 
+  50% {
 
+    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
 
+  }
 
+
 
+  60% {
 
+    clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 100%);
 
+  }
 
+
 
+  70% {
 
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%);
 
+  }
 
+
 
+  80% {
 
+    clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%);
 
+  }
 
+
 
+  90% {
 
+    transform: rotate(360deg);
 
+    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
 
+  }
 
+
 
+  100% {
 
+    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
 
+  }
 
+}
 
+/* checkbox, radio, switch */
 
+.checkbox,
 
+.radio,
 
+.switch {
 
+  direction: ltr;
 
+  inline-size: auto;
 
+  block-size: auto;
 
+  line-height: normal;
 
+  white-space: nowrap;
 
+  cursor: pointer;
 
+  display: inline-flex;
 
+  align-items: center;
 
+}
 
+:is(.checkbox, .radio) > input {
 
+  inline-size: 1.5rem;
 
+  block-size: 1.5rem;
 
+  opacity: 0;
 
+}
 
+.switch > input {
 
+  inline-size: 3.25rem;
 
+  block-size: 2rem;
 
+  opacity: 0;
 
+}
 
+:is(.checkbox, .radio, .switch) > span {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  color: var(--on-surface);
 
+  font-size: 0.875rem;
 
+}
 
+:is(.checkbox, .radio) > span:not(:empty) {
 
+  padding-inline-start: 0.25rem;
 
+}
 
+:is(.checkbox, .radio, .switch) > span::before,
 
+.icon > span > i,
 
+:is(.checkbox, .radio) > span::after {
 
+  content: '';
 
+  inline-size: 1.5rem;
 
+  block-size: 1.5rem;
 
+  box-sizing: border-box;
 
+  margin: 0 auto;
 
+  outline: none;
 
+  color: var(--primary);
 
+  position: absolute;
 
+  inset: auto auto auto -1.5rem;
 
+  border-radius: 50%;
 
+  user-select: none;
 
+  z-index: 1;
 
+}
 
+.switch > span::before,
 
+.switch.icon > span > i {
 
+  position: absolute;
 
+  inset: 50% auto auto 0;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  border-radius: 50%;
 
+  transition: all var(--speed2);
 
+  font-size: 1rem;
 
+  user-select: none;
 
+  min-inline-size: auto;
 
+  content: "";
 
+  color: var(--surface-variant);
 
+  background-color: var(--outline);
 
+}
 
+.switch > span::before,
 
+.switch.icon > span > i {
 
+  transform: translate(-3rem, -50%) scale(0.6);
 
+}
 
+.switch.icon > span > i {
 
+  transform: translate(-3rem, -50%) scale(1);
 
+}
 
+.checkbox > span::before {
 
+  content: "check_box_outline_blank";
 
+}
 
+.checkbox > input:checked + span::before {
 
+  content: "check_box";
 
+  font-variation-settings: "FILL" 1;
 
+}
 
+.checkbox > input:indeterminate + span::before {
 
+  content: "indeterminate_check_box";
 
+}
 
+.radio > span::before {
 
+  content: "radio_button_unchecked";
 
+}
 
+.radio > input:checked + span::before {
 
+  content: "radio_button_checked";
 
+}
 
+:is(.radio, .checkbox, .switch).icon > span::before {
 
+  content: "" !important;
 
+  font-variation-settings: unset !important;
 
+}
 
+:is(.checkbox, .radio) > span::after {
 
+  transition: all var(--speed1);
 
+  background-color: currentColor;
 
+  box-shadow: 0 0 0 0 currentColor;
 
+  opacity: 0;
 
+}
 
+:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
 
+:is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
 
+  box-shadow: 0 0 0 0.5rem currentColor;
 
+  opacity: 0.1;
 
+}
 
+.switch > input:not(:disabled):is(:focus, :hover) + span::before,
 
+.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
 
+  box-shadow: 0 0 0 0.5rem var(--active);
 
+}
 
+:is(.checkbox, .radio) > input:checked + span::before,
 
+:is(.checkbox, .radio).icon > input:checked + span > i {
 
+  color: var(--primary);
 
+}
 
+.icon > input:checked + span > i:first-child,
 
+.icon > span > i:last-child {
 
+  opacity: 0;
 
+}
 
+.icon > input:checked + span > i:last-child,
 
+.icon > span > i:first-child {
 
+  opacity: 1;
 
+}
 
+.switch > input:checked + span::after {
 
+  border: none;
 
+  background-color: var(--primary);
 
+}
 
+.switch > input:checked + span::before,
 
+.switch.icon > input:checked + span > i {
 
+  content: "check";
 
+  color: var(--primary);
 
+  background-color: var(--on-primary);
 
+}
 
+.switch > input:checked + span::before,
 
+.switch.icon > input:checked + span > i {
 
+  transform: translate(-1.75rem, -50%) scale(1);
 
+}
 
+:is(.checkbox, .radio, .switch) > input:disabled + span {
 
+  opacity: 0.5;
 
+  cursor: not-allowed;
 
+}
 
+.switch > span::after {
 
+  content: "";
 
+  position: absolute;
 
+  inset: 50% auto auto 0;
 
+  background-color: var(--active);
 
+  border: 0.125rem solid var(--outline);
 
+  box-sizing: border-box;
 
+  inline-size: 3.25rem;
 
+  block-size: 2rem;
 
+  border-radius: 2rem;
 
+}
 
+.switch > span::after {
 
+  transform: translate(-3.25rem, -50%);
 
+}
 
+.field > :is(nav, .row) {
 
+  flex-grow: 1;
 
+  padding: 0 1rem;
 
+}
 
+.field.round > :is(nav, .row) {
 
+  flex-grow: 1;
 
+  padding: 0 1.5rem;
 
+}
 
+[dir=rtl] .switch {
 
+  transform: scale(-1);
 
+}
 
+[dir=rtl] .switch > span::before,
 
+[dir=rtl] .switch.icon > span > i {
 
+  transform: translate(-3rem, -50%) scale(-0.6);
 
+}
 
+[dir=rtl] .switch.icon > span > i {
 
+  transform: translate(-3rem, -50%) scale(-1);
 
+}
 
+[dir=rtl] .switch > input:checked + span::before,
 
+[dir=rtl] .switch.icon > input:checked + span > i {
 
+  transform: translate(-1.75rem, -50%) scale(-1);
 
+}
 
+.switch > :focus-visible + span::after {
 
+  outline: 0.125rem solid var(--primary);
 
+  outline-offset: 0.25rem;
 
+}
 
+:is(.checkbox, .radio) > :focus-visible + span::before {
 
+  outline: 0.125rem solid var(--primary);
 
+  outline-offset: 0.375rem;
 
+}
 
+.slider {
 
+  ---start: 0%;
 
+  ---end: 0%;
 
+  ---value1: "";
 
+  ---value2: "";
 
+
 
+  display: flex;
 
+  align-items: center !important;
 
+  inline-size: auto;
 
+  block-size: 1.25rem;
 
+  margin: 1.125rem;
 
+  flex: none;
 
+  direction: ltr;
 
+}
 
+[dir=rtl] .slider {
 
+  transform: scaleX(-1);
 
+}
 
+.slider.vertical {
 
+  flex-direction: row !important;
 
+  margin: 0.5rem auto !important;
 
+  padding: 50% 0;
 
+  transform: rotate(-90deg);
 
+  inline-size: 100%;
 
+}
 
+.slider.small {
 
+  inline-size: 4rem;
 
+}
 
+.slider.medium {
 
+  inline-size: 8rem;
 
+}
 
+.slider.large {
 
+  inline-size: 12rem;
 
+}
 
+.slider > input {
 
+  appearance: none;
 
+  box-shadow: none;
 
+  border: none;
 
+  outline: none;
 
+  pointer-events: none;
 
+  inline-size: 100%;
 
+  block-size: 1rem;
 
+  background: none;
 
+  z-index: 1;
 
+  padding: 0;
 
+  margin: 0;
 
+  transform: rotate(0deg);
 
+}
 
+.slider > input:only-of-type {
 
+  pointer-events: all;
 
+}
 
+.slider > input + input {
 
+  position: absolute;
 
+}
 
+.slider > input::-webkit-slider-thumb {
 
+  appearance: none;
 
+  box-shadow: none;
 
+  border: none;
 
+  outline: none;
 
+  pointer-events: all;
 
+  block-size: 2.75rem;
 
+  inline-size: 0.25rem;
 
+  border-radius: 0.25rem;
 
+  background: var(--primary);
 
+  cursor: grab;
 
+  margin: 0;
 
+}
 
+.slider > input::-webkit-slider-thumb:active {
 
+  cursor: grabbing;
 
+}
 
+.slider > input::-moz-range-thumb {
 
+  appearance: none;
 
+  box-shadow: none;
 
+  border: none;
 
+  outline: none;
 
+  pointer-events: all;
 
+  block-size: 2.75rem;
 
+  inline-size: 0.25rem;
 
+  border-radius: 0.25rem;
 
+  background: var(--primary);
 
+  cursor: grab;
 
+  margin: 0;
 
+}
 
+.slider > input::-moz-range-thumb:active {
 
+  cursor: grabbing;
 
+}
 
+.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
 
+  transform: scaleX(0.6);
 
+}
 
+.slider > input:not(:disabled):is(:focus)::-moz-range-thumb {
 
+  transform: scaleX(0.6);
 
+}
 
+.slider > input:disabled {
 
+  cursor: not-allowed;
 
+  opacity: 1;
 
+}
 
+.slider > input:disabled::-webkit-slider-thumb {
 
+  background: #9E9E9E;
 
+  cursor: not-allowed;
 
+}
 
+.slider > input:disabled::-moz-range-thumb {
 
+  background: #9E9E9E;
 
+  cursor: not-allowed;
 
+}
 
+.slider > input:disabled ~ span {
 
+  background: #9E9E9E;
 
+}
 
+.slider > span {
 
+  position: absolute;
 
+  block-size: 1rem;
 
+  border-radius: 1rem 0 0 1rem;
 
+  background: var(--primary);
 
+  z-index: 0;
 
+  inset: calc(50% - 0.5rem) var(---end) auto var(---start);
 
+  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
 
+}
 
+.slider > input[type=range] + input[type=range] ~ span {
 
+  border-radius: 0;
 
+  clip-path: polygon(0.5rem 0, max(0.5rem, calc(100% - 0.5rem)) 0, max(0.5rem, calc(100% - 0.5rem)) 100%, 0.5rem 100%);
 
+}
 
+.field > .slider {
 
+  inline-size: 100%;
 
+}
 
+.slider::before {
 
+  content: "";
 
+  position: absolute;
 
+  inline-size: 100%;
 
+  block-size: 1rem;
 
+  border-radius: 1rem;
 
+  background: var(--primary-container);
 
+  clip-path: polygon(calc(var(---start) - 0.5rem) 0, 0 0, 0 100%, calc(var(---start) - 0.5rem) 100%, calc(var(---start) - 0.5rem) 0, calc(100% - var(---end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(---end) + 0.5rem) 100%, calc(100% - var(---end) + 0.5rem) 0);
 
+}
 
+.slider:has(> [disabled])::before {
 
+  background: var(--active);
 
+}
 
+.slider > .tooltip {
 
+  visibility: hidden !important;
 
+  opacity: 0 !important;
 
+  inset: 0 auto auto calc(100% - var(---end));
 
+  border-radius: 2rem;
 
+  transition: top var(--speed2) ease, opacity var(--speed2) ease;
 
+  transform: translate(-50%, -50%) !important;
 
+  padding: 0.75rem 1rem;
 
+}
 
+[dir=rtl] .slider > .tooltip {
 
+  transform: translate(-50%, -50%) scaleX(-1) !important;
 
+}
 
+.slider > .tooltip + .tooltip {
 
+  inset: 0.25rem calc(100% - var(---start)) auto auto;
 
+  transform: translate(50%, -50%) !important;
 
+}
 
+[dir=rtl] .slider > .tooltip + .tooltip {
 
+  transform: translate(50%, -50%) scaleX(-1) !important;
 
+}
 
+.slider > .tooltip::before {
 
+  content: var(---value1);
 
+}
 
+.slider > .tooltip + .tooltip::before {
 
+  content: var(---value2);
 
+}
 
+.slider > :focus ~ .tooltip {
 
+  inset-block-start: -1rem !important;
 
+  opacity: 1 !important;
 
+  visibility: visible !important;
 
+}
 
+.slider.vertical > .tooltip {
 
+  display: none;
 
+}
 
+:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
 
+  flex: auto;
 
+}
 
+.slider.max,
 
+.slider.max.vertical,
 
+.slider.max > input,
 
+.slider.max.vertical > input {
 
+  all: unset;
 
+  margin: 0 !important;
 
+  position: absolute;
 
+  color: var(--primary);
 
+  inset: 0;
 
+  border-radius: inherit;
 
+  overflow: hidden;
 
+  z-index: 2;
 
+  cursor: grab;
 
+  inline-size: 100%;
 
+  block-size: 100%;
 
+}
 
+.slider.max::before {
 
+  display: none;
 
+}
 
+.slider.max.vertical > input {
 
+  writing-mode: vertical-lr;
 
+  transform: rotate(-180deg);
 
+}
 
+.slider.max > input::-webkit-slider-thumb {
 
+  opacity: 0;
 
+  inline-size: 1rem;
 
+  block-size: 100vh;
 
+  transform: none !important;
 
+}
 
+.slider.max > input::-moz-range-thumb {
 
+  opacity: 0;
 
+  inline-size: 1rem;
 
+  block-size: 100vh;
 
+  transform: none !important;
 
+}
 
+.slider.max > span {
 
+  block-size: auto !important;
 
+  inset: 0 var(---end) 0 var(---start);
 
+  clip-path: none;
 
+  background: currentcolor;
 
+  border-radius: 0;
 
+}
 
+.slider.max.vertical > span {
 
+  inset: var(---end) 0 var(---start) 0;
 
+}
 
+.slider > input:focus-visible::-webkit-slider-thumb {
 
+  outline: 0.1875rem solid var(--primary);
 
+  outline-offset: 0.25rem;
 
+}
 
+.slider > input:focus-visible::-moz-range-thumb {
 
+  outline: 0.1875rem solid var(--primary);
 
+  outline-offset: 0.25rem;
 
+}
 
+.slider.max > input:focus-visible {
 
+  outline: 0.1875rem solid var(--primary);
 
+  outline-offset: -0.125rem;
 
+}
 
+@media (pointer: coarse) {
 
+  .slider > :hover ~ .tooltip {
 
+    inset-block-start: -1rem !important;
 
+    opacity: 1 !important;
 
+    visibility: visible !important;
 
+  }
 
+}
 
+.snackbar {
 
+  position: fixed;
 
+  inset: auto auto 6rem 50%;
 
+  inline-size: 80%;
 
+  block-size: auto;
 
+  z-index: 200;
 
+  visibility: hidden;
 
+  display: flex;
 
+  box-shadow: var(--elevate2);
 
+  color: var(--inverse-on-surface);
 
+  background-color: var(--inverse-surface);
 
+  padding: 1rem;
 
+  opacity: 1;
 
+  cursor: pointer;
 
+  text-align: start;
 
+  align-items: center;
 
+  border-radius: 0.25rem;
 
+  gap: 0.5rem;
 
+  transition: all var(--speed2);
 
+  transform: translate(-50%, 1rem);
 
+  opacity: 0;
 
+}
 
+.snackbar.top {
 
+  inset: 6rem auto auto 50%;
 
+}
 
+.snackbar.active {
 
+  visibility: visible;
 
+  transform: translate(-50%, 0);
 
+  opacity: 1;
 
+}
 
+.snackbar > .max {
 
+  flex: auto;
 
+}
 
+@media only screen and (min-width: 993px) {
 
+  .snackbar {
 
+    inline-size: 40%;
 
+  }
 
+}
 
+table {
 
+  inline-size: 100%;
 
+  border-spacing: 0;
 
+  font-size: 0.875rem;
 
+  text-align: start;
 
+}
 
+.scroll > table,
 
+table :is(thead, tbody, tfoot, tr, th, td) {
 
+  background-color: inherit;
 
+  color: inherit;
 
+}
 
+:is(th, td) {
 
+  inline-size: auto;
 
+  text-align: inherit;
 
+  padding: 0.5rem;
 
+}
 
+:is(th, td) > * {
 
+  vertical-align: middle;
 
+}
 
+table.border > tbody > tr:not(:last-child) > td,
 
+thead > tr > th {
 
+  border-block-end: 0.0625rem solid var(--outline);
 
+}
 
+tfoot > tr > th {
 
+  border-block-start: 0.0625rem solid var(--outline);
 
+}
 
+table.stripes > tbody > tr:nth-child(odd) {
 
+  background-color: var(--active);
 
+}
 
+table.no-space :is(th, td) {
 
+  padding: 0;
 
+}
 
+table.medium-space :is(th, td) {
 
+  padding: 0.75rem;
 
+}
 
+table.large-space :is(th, td) {
 
+  padding: 1rem;
 
+}
 
+table > .fixed,
 
+th.fixed {
 
+  position: sticky;
 
+  z-index: 1;
 
+  inset-block-start: 0;
 
+}
 
+tfoot.fixed,
 
+tfoot th.fixed {
 
+  inset-block-end: 0;
 
+}
 
+:is(td, th).min {
 
+  inline-size: 0.1%;
 
+  white-space: nowrap;
 
+}
 
+.tabs {
 
+  display: flex;
 
+  white-space: nowrap;
 
+  border-block-end: 0.0625rem solid var(--surface-variant);
 
+}
 
+.tabs:not(.left-align, .right-align, .center-align) {
 
+  justify-content: space-around;
 
+}
 
+.tabs > a {
 
+  display: flex;
 
+  font-size: 0.875rem;
 
+  font-weight: 500;
 
+  color: var(--on-surface-variant);
 
+  padding: 0.5rem 1rem;
 
+  text-align: center;
 
+  min-block-size: 3rem;
 
+  inline-size: 100%;
 
+  gap: 0.25rem;
 
+}
 
+.tabs.small > a {
 
+  min-block-size: 2rem;
 
+}
 
+.tabs.large > a {
 
+  min-block-size: 4rem;
 
+}
 
+.tabs > a.active,
 
+.tabs > a.active > i {
 
+  color: var(--primary);
 
+}
 
+.tabs > a.active::before {
 
+  content: '';
 
+  position: absolute;
 
+  inset: auto 0 0 0;
 
+  block-size: 0.125rem;
 
+  background-color: var(--primary);
 
+}
 
+.tabs.min > a.active::before {
 
+  margin: 0 auto;
 
+  max-inline-size: min(100%, 4rem);
 
+}
 
+.tabs:is(.left-align, .center-align, .right-align) > a {
 
+  inline-size: auto;
 
+}
 
+.tooltip {
 
+  ---space: -0.5rem;
 
+
 
+  visibility: hidden;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 0.5rem;
 
+  background-color: var(--inverse-surface);
 
+  color: var(--inverse-on-surface);
 
+  font-size: 0.75rem;
 
+  text-align: center;
 
+  border-radius: 0.25rem;
 
+  padding: 0.5rem;
 
+  position: absolute;
 
+  z-index: 3;
 
+  inset: 0 auto auto 50%;
 
+  inline-size: auto;
 
+  white-space: nowrap;
 
+  font-weight: 500;
 
+  opacity: 0;
 
+  transition: all var(--speed2);
 
+  line-height: normal;
 
+  transform: translate(-50%, -100%) scale(0.9);
 
+}
 
+.tooltip.left {
 
+  inset: 50% auto auto 0;
 
+  transform: translate(-100%, -50%) scale(0.9);
 
+}
 
+.tooltip.right {
 
+  inset: 50% 0 auto auto;
 
+  transform: translate(100%, -50%) scale(0.9);
 
+}
 
+.tooltip.bottom {
 
+  inset: auto auto 0 50%;
 
+  transform: translate(-50%, 100%) scale(0.9);
 
+}
 
+.tooltip.small {
 
+  inline-size: 8rem;
 
+  white-space: normal;
 
+}
 
+.tooltip.medium {
 
+  inline-size: 12rem;
 
+  white-space: normal;
 
+}
 
+.tooltip.large {
 
+  inline-size: 16rem;
 
+  white-space: normal;
 
+}
 
+:hover > .tooltip {
 
+  visibility: visible;
 
+  opacity: 1;
 
+  transform: translate(-50%, -100%) scale(1);
 
+}
 
+:hover > .tooltip.left {
 
+  transform: translate(-100%, -50%) scale(1);
 
+}
 
+:hover > .tooltip.right {
 
+  transform: translate(100%, -50%) scale(1);
 
+}
 
+:hover > .tooltip.bottom {
 
+  transform: translate(-50%, 100%) scale(1);
 
+}
 
+.tooltip.no-space {
 
+  ---space: 0;
 
+}
 
+.tooltip.medium-space {
 
+  ---space: -1rem;
 
+}
 
+.tooltip.large-space {
 
+  ---space: -1.5rem;
 
+}
 
+.tooltip:not(.left, .right, .bottom) {
 
+  margin-block-start: var(---space) !important;
 
+}
 
+.tooltip.left,
 
+.tooltip.right {
 
+  margin-inline: var(---space) !important;
 
+}
 
+.tooltip.bottom {
 
+  margin-block-end: var(---space) !important;
 
+}
 
+menu:active ~ .tooltip,
 
+:is(button, .button):focus > menu ~ .tooltip,
 
+.field > :focus ~ menu ~ .tooltip {
 
+  visibility: hidden;
 
+}
 
+.slider > .tooltip {
 
+  ---space: -1.25rem;
 
+}
 
+.slider.vertical > .tooltip {
 
+  ---space: -0.75rem;
 
+}
 
+.slider.vertical > .tooltip:is(.left, .right) {
 
+  ---space: -0.5rem;
 
+}
 
+.tooltip.max {
 
+  display: block;
 
+  font-size: inherit;
 
+  white-space: normal;
 
+  text-align: start;
 
+  inline-size: 20rem;
 
+  border-radius: 0.5rem;
 
+  padding: 1rem;
 
+  box-shadow: var(--elevate2);
 
+}
 
+[class*=blur],
 
+[class*=blur].light {
 
+  ---blur: 1rem;
 
+  -webkit-backdrop-filter: blur(var(---blur));
 
+  backdrop-filter: blur(var(---blur));
 
+  color: var(--on-surface);
 
+  background-color: rgb(255 255 255 / 0.5);
 
+}
 
+.dark [class*=blur],
 
+[class*=blur].dark {
 
+  background-color: rgb(0 0 0 / 0.5);
 
+}
 
+.small-blur {
 
+  ---blur: 0.5rem;
 
+}
 
+.large-blur {
 
+  ---blur: 1.5rem;
 
+}
 
+.shadow {
 
+  background-color: #00000050;
 
+}
 
+:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
 
+  background-color: transparent !important;
 
+}
 
+.left-shadow {
 
+  background-image: linear-gradient(to right, black, transparent);
 
+}
 
+.right-shadow {
 
+  background-image: linear-gradient(to left, black, transparent);
 
+}
 
+.bottom-shadow {
 
+  background-image: linear-gradient(to top, black, transparent);
 
+}
 
+.top-shadow {
 
+  background-image: linear-gradient(to bottom, black, transparent);
 
+}

+ 659 - 0
static/beer.js
查看文件 

@@ -0,0 +1,659 @@
 
+const _emptyNodeList = [];
 
+function isTouchable() {
 
+  return window.matchMedia("(pointer: coarse)").matches;
 
+}
 
+function isDark() {
 
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
 
+}
 
+async function wait(milliseconds) {
 
+  await new Promise((resolve) => setTimeout(resolve, milliseconds));
 
+}
 
+function guid() {
 
+  return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
 
+    const r = Math.random() * 16 | 0;
 
+    const v = c === "x" ? r : r & 3 | 8;
 
+    return v.toString(16);
 
+  });
 
+}
 
+function query(selector, element) {
 
+  try {
 
+    return typeof selector === "string" ? (element ?? document).querySelector(selector) : selector;
 
+  } catch {
 
+    return null;
 
+  }
 
+}
 
+function queryAll(selector, element) {
 
+  try {
 
+    return typeof selector === "string" ? (element ?? document).querySelectorAll(selector) : selector ?? _emptyNodeList;
 
+  } catch {
 
+    return _emptyNodeList;
 
+  }
 
+}
 
+function hasClass(element, name) {
 
+  return (element == null ? void 0 : element.classList.contains(name)) ?? false;
 
+}
 
+function hasTag(element, name) {
 
+  var _a;
 
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === name;
 
+}
 
+function hasType(element, name) {
 
+  var _a;
 
+  return ((_a = element == null ? void 0 : element.type) == null ? void 0 : _a.toLowerCase()) === name;
 
+}
 
+function addClass(element, name) {
 
+  if (element instanceof NodeList)
 
+    for (let i = 0; i < element.length; i++)
 
+      element[i].classList.add(name);
 
+  else
 
+    element == null ? void 0 : element.classList.add(name);
 
+}
 
+function removeClass(element, name) {
 
+  if (element instanceof NodeList)
 
+    for (let i = 0; i < element.length; i++)
 
+      element[i].classList.remove(name);
 
+  else
 
+    element == null ? void 0 : element.classList.remove(name);
 
+}
 
+function on(element, name, callback, useCapture = true) {
 
+  if (element == null ? void 0 : element.addEventListener)
 
+    element.addEventListener(name, callback, useCapture);
 
+}
 
+function off(element, name, callback, useCapture = true) {
 
+  if (element == null ? void 0 : element.removeEventListener)
 
+    element.removeEventListener(name, callback, useCapture);
 
+}
 
+function insertBefore(newElement, element) {
 
+  var _a;
 
+  (_a = element == null ? void 0 : element.parentNode) == null ? void 0 : _a.insertBefore(newElement, element);
 
+}
 
+function prev(element) {
 
+  return element == null ? void 0 : element.previousElementSibling;
 
+}
 
+function next(element) {
 
+  return element == null ? void 0 : element.nextElementSibling;
 
+}
 
+function parent(element) {
 
+  return element == null ? void 0 : element.parentElement;
 
+}
 
+function create(htmlAttributesAsJson) {
 
+  const element = document.createElement("div");
 
+  for (let i = 0, keys = Object.keys(htmlAttributesAsJson), n = keys.length; i < n; i++) {
 
+    const key = keys[i];
 
+    const value = htmlAttributesAsJson[key];
 
+    element.setAttribute(key, value);
 
+  }
 
+  return element;
 
+}
 
+function blurActiveElement() {
 
+  var _a;
 
+  (_a = document.activeElement) == null ? void 0 : _a.blur();
 
+}
 
+function queryAllDataUi(id) {
 
+  return queryAll('[data-ui="#' + id + '"]');
 
+}
 
+function queryDataUi(id) {
 
+  return query('[data-ui="#' + id + '"]');
 
+}
 
+function updateAllClickable(element) {
 
+  if (element.id && hasClass(element, "page"))
 
+    element = queryDataUi(element.id) ?? element;
 
+  const container = parent(element);
 
+  if (!hasClass(container, "tabs") && !hasClass(container, "tabbed") && !hasTag(container, "nav"))
 
+    return;
 
+  const as = queryAll("a", container);
 
+  for (let i = 0; i < as.length; i++)
 
+    removeClass(as[i], "active");
 
+  addClass(element, "active");
 
+}
 
+function updatePlaceholder(element) {
 
+  if (!element.placeholder)
 
+    element.placeholder = " ";
 
+}
 
+function onClickLabel(e) {
 
+  const label = e.currentTarget;
 
+  const field = parent(label);
 
+  const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", field);
 
+  if (input)
 
+    input.focus();
 
+}
 
+function onFocusInput(e) {
 
+  const input = e.currentTarget;
 
+  updateInput(input);
 
+}
 
+function onBlurInput(e) {
 
+  const input = e.currentTarget;
 
+  updateInput(input);
 
+}
 
+function onChangeFile(e) {
 
+  const input = e.currentTarget;
 
+  updateFile(input);
 
+}
 
+function onChangeColor(e) {
 
+  const input = e.currentTarget;
 
+  updateColor(input);
 
+}
 
+function onKeydownFile(e) {
 
+  const input = e.currentTarget;
 
+  updateFile(input, e);
 
+}
 
+function onKeydownColor(e) {
 
+  const input = e.currentTarget;
 
+  updateColor(input, e);
 
+}
 
+function onInputTextarea(e) {
 
+  const textarea = e.currentTarget;
 
+  updateTextarea(textarea);
 
+}
 
+function onPasswordIconClick(e) {
 
+  var _a;
 
+  const icon = e.currentTarget;
 
+  const input = query("input", parent(icon));
 
+  if (input && ((_a = icon.textContent) == null ? void 0 : _a.includes("visibility")))
 
+    input.type = input.type === "password" ? "text" : "password";
 
+}
 
+function updateAllLabels() {
 
+  const labels = queryAll(".field > label");
 
+  for (let i = 0; i < labels.length; i++)
 
+    on(labels[i], "click", onClickLabel);
 
+}
 
+function updateAllInputs() {
 
+  const inputs = queryAll(".field > input:not([type=file], [type=color], [type=range])");
 
+  for (let i = 0; i < inputs.length; i++) {
 
+    on(inputs[i], "focus", onFocusInput);
 
+    on(inputs[i], "blur", onBlurInput);
 
+    updateInput(inputs[i]);
 
+  }
 
+}
 
+function updateAllSelects() {
 
+  const selects = queryAll(".field > select");
 
+  for (let i = 0; i < selects.length; i++) {
 
+    on(selects[i], "focus", onFocusInput);
 
+    on(selects[i], "blur", onBlurInput);
 
+  }
 
+}
 
+function updateAllFiles() {
 
+  const files = queryAll(".field > input[type=file]");
 
+  for (let i = 0; i < files.length; i++) {
 
+    on(files[i], "change", onChangeFile);
 
+    updateFile(files[i]);
 
+  }
 
+}
 
+function updateAllColors() {
 
+  const colors = queryAll(".field > input[type=color]");
 
+  for (let i = 0; i < colors.length; i++) {
 
+    on(colors[i], "change", onChangeColor);
 
+    updateColor(colors[i]);
 
+  }
 
+}
 
+function updateAllTextareas() {
 
+  const textareas = queryAll(".field.textarea > textarea");
 
+  for (let i = 0; i < textareas.length; i++) {
 
+    on(textareas[i], "focus", onFocusInput);
 
+    on(textareas[i], "blur", onBlurInput);
 
+    on(textareas[i], "input", onInputTextarea);
 
+    updateTextarea(textareas[i]);
 
+  }
 
+}
 
+function updateAllPasswordIcons() {
 
+  const icons = queryAll("input[type=password] ~ :is(i, a)");
 
+  for (let i = 0; i < icons.length; i++)
 
+    on(icons[i], "click", onPasswordIconClick);
 
+}
 
+function updateInput(input) {
 
+  if (hasType(input, "number") && !input.value)
 
+    input.value = "";
 
+  updatePlaceholder(input);
 
+}
 
+function updateFile(input, e) {
 
+  if ((e == null ? void 0 : e.key) === "Enter") {
 
+    const previousInput = prev(input);
 
+    if (!hasType(previousInput, "file"))
 
+      return;
 
+    previousInput.click();
 
+    return;
 
+  }
 
+  const nextInput = next(input);
 
+  if (!hasType(nextInput, "text"))
 
+    return;
 
+  nextInput.value = input.files ? Array.from(input.files).map((x) => x.name).join(", ") : "";
 
+  nextInput.readOnly = true;
 
+  on(nextInput, "keydown", onKeydownFile, false);
 
+  updateInput(nextInput);
 
+}
 
+function updateColor(input, e) {
 
+  if ((e == null ? void 0 : e.key) === "Enter") {
 
+    const previousInput = prev(input);
 
+    if (!hasType(previousInput, "color"))
 
+      return;
 
+    previousInput.click();
 
+    return;
 
+  }
 
+  const nextInput = next(input);
 
+  if (!hasType(nextInput, "text"))
 
+    return;
 
+  nextInput.readOnly = true;
 
+  nextInput.value = input.value;
 
+  on(nextInput, "keydown", onKeydownColor, false);
 
+  updateInput(nextInput);
 
+}
 
+function updateTextarea(textarea) {
 
+  updatePlaceholder(textarea);
 
+  const field = parent(textarea);
 
+  field.removeAttribute("style");
 
+  if (hasClass(field, "min"))
 
+    field.style.setProperty("---size", `${Math.max(textarea.scrollHeight, field.offsetHeight)}px`);
 
+}
 
+function updateAllFields() {
 
+  updateAllLabels();
 
+  updateAllInputs();
 
+  updateAllSelects();
 
+  updateAllFiles();
 
+  updateAllColors();
 
+  updateAllTextareas();
 
+  updateAllPasswordIcons();
 
+}
 
+function onInputDocument(e) {
 
+  const input = e.target;
 
+  if (!hasTag(input, "input") && !hasTag(input, "select"))
 
+    return;
 
+  if (input.type === "range") {
 
+    input.focus();
 
+    updateRange(input);
 
+  } else {
 
+    updateAllRanges();
 
+  }
 
+}
 
+function onFocusRange(e) {
 
+  if (!isTouchable())
 
+    return;
 
+  const input = e.target;
 
+  const label = parent(input);
 
+  if (hasClass(label, "vertical"))
 
+    document.body.classList.add("no-scroll");
 
+}
 
+function onBlurRange(e) {
 
+  if (!isTouchable())
 
+    return;
 
+  const input = e.target;
 
+  const label = parent(input);
 
+  if (hasClass(label, "vertical"))
 
+    document.body.classList.remove("no-scroll");
 
+}
 
+function updateAllRanges() {
 
+  const body = document.body;
 
+  const ranges = queryAll(".slider > input[type=range]");
 
+  if (!ranges.length)
 
+    off(body, "input", onInputDocument, false);
 
+  else
 
+    on(body, "input", onInputDocument, false);
 
+  for (let i = 0; i < ranges.length; i++)
 
+    updateRange(ranges[i]);
 
+}
 
+function updateRange(input) {
 
+  on(input, "focus", onFocusRange);
 
+  on(input, "blur", onBlurRange);
 
+  const label = parent(input);
 
+  const bar = query("span", label);
 
+  const inputs = queryAll("input", label);
 
+  if (!inputs.length || !bar)
 
+    return;
 
+  const rootSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size")) || 16;
 
+  const thumb = hasClass(label, "max") ? 0 : 0.25 * rootSize * 100 / inputs[0].offsetWidth;
 
+  const percents = [];
 
+  const values = [];
 
+  for (let i = 0, n = inputs.length; i < n; i++) {
 
+    const min = parseFloat(inputs[i].min) || 0;
 
+    const max = parseFloat(inputs[i].max) || 100;
 
+    const value = parseFloat(inputs[i].value) || 0;
 
+    const percent2 = (value - min) * 100 / (max - min);
 
+    const fix = thumb / 2 - thumb * percent2 / 100;
 
+    percents.push(percent2 + fix);
 
+    values.push(value);
 
+  }
 
+  let percent = percents[0];
 
+  let start2 = 0;
 
+  let end = 100 - start2 - percent;
 
+  let value1 = values[0];
 
+  let value2 = values[1] || 0;
 
+  if (inputs.length > 1) {
 
+    percent = Math.abs(percents[1] - percents[0]);
 
+    start2 = percents[1] > percents[0] ? percents[0] : percents[1];
 
+    end = 100 - start2 - percent;
 
+    if (value2 > value1) {
 
+      value1 = values[1] || 0;
 
+      value2 = values[0];
 
+    }
 
+  }
 
+  label.style.setProperty("---start", `${start2}%`);
 
+  label.style.setProperty("---end", `${end}%`);
 
+  label.style.setProperty("---value1", `'${value1}'`);
 
+  label.style.setProperty("---value2", `'${value2}'`);
 
+}
 
+function updateAllSliders() {
 
+  updateAllRanges();
 
+}
 
+const _lastTheme = {
 
+  light: "",
 
+  dark: ""
 
+};
 
+function getMode() {
 
+  var _a;
 
+  return ((_a = document == null ? void 0 : document.body) == null ? void 0 : _a.classList.contains("dark")) ? "dark" : "light";
 
+}
 
+function lastTheme() {
 
+  if (_lastTheme.light && _lastTheme.dark)
 
+    return _lastTheme;
 
+  const body = document.body;
 
+  const light = document.createElement("body");
 
+  light.className = "light";
 
+  body.appendChild(light);
 
+  const dark = document.createElement("body");
 
+  dark.className = "dark";
 
+  body.appendChild(dark);
 
+  const fromLight = getComputedStyle(light);
 
+  const fromDark = getComputedStyle(dark);
 
+  const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--surface-variant", "--on-surface-variant", "--outline", "--outline-variant", "--shadow", "--scrim", "--inverse-surface", "--inverse-on-surface", "--inverse-primary", "--surface-dim", "--surface-bright", "--surface-container-lowest", "--surface-container-low", "--surface-container", "--surface-container-high", "--surface-container-highest"];
 
+  for (let i = 0, n = variables.length; i < n; i++) {
 
+    _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
 
+    _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
 
+  }
 
+  body.removeChild(light);
 
+  body.removeChild(dark);
 
+  return _lastTheme;
 
+}
 
+function updateTheme(source) {
 
+  const context = globalThis;
 
+  const body = document.body;
 
+  if (!source || !context.materialDynamicColors)
 
+    return lastTheme();
 
+  const mode = getMode();
 
+  if (source.light && source.dark) {
 
+    _lastTheme.light = source.light;
 
+    _lastTheme.dark = source.dark;
 
+    body.setAttribute("style", source[mode]);
 
+    return source;
 
+  }
 
+  return context.materialDynamicColors(source).then((theme) => {
 
+    const toCss = (data) => {
 
+      let style = "";
 
+      for (let i = 0, keys = Object.keys(data), n = keys.length; i < n; i++) {
 
+        const key = keys[i];
 
+        const value = data[key];
 
+        const kebabCase = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 
+        style += "--" + kebabCase + ":" + value + ";";
 
+      }
 
+      return style;
 
+    };
 
+    _lastTheme.light = toCss(theme.light);
 
+    _lastTheme.dark = toCss(theme.dark);
 
+    body.setAttribute("style", _lastTheme[mode]);
 
+    return _lastTheme;
 
+  });
 
+}
 
+function updateMode(value) {
 
+  const context = globalThis;
 
+  const body = document.body;
 
+  if (!body)
 
+    return value;
 
+  if (!value)
 
+    return getMode();
 
+  if (value === "auto")
 
+    value = isDark() ? "dark" : "light";
 
+  body.classList.remove("light", "dark");
 
+  body.classList.add(value);
 
+  const lastThemeStyle = value === "light" ? _lastTheme.light : _lastTheme.dark;
 
+  if (context.materialDynamicColors)
 
+    body.setAttribute("style", lastThemeStyle);
 
+  return getMode();
 
+}
 
+const _dialogs = [];
 
+function onKeydownDialog(e) {
 
+  if (e.key === "Escape") {
 
+    const dialog = e.currentTarget;
 
+    void updateDialog(dialog, dialog);
 
+  }
 
+}
 
+function focusOnDialogOrElement(dialog) {
 
+  const element = query("[autofocus]", dialog) ?? dialog;
 
+  element.focus();
 
+}
 
+function closeDialog(dialog, overlay) {
 
+  removeClass(queryAllDataUi(dialog.id), "active");
 
+  removeClass(dialog, "active");
 
+  removeClass(overlay, "active");
 
+  dialog.close();
 
+  _dialogs.pop();
 
+  const previousDialog = _dialogs[_dialogs.length - 1];
 
+  if (previousDialog)
 
+    previousDialog.focus();
 
+  else if (isTouchable())
 
+    document.body.classList.remove("no-scroll");
 
+}
 
+async function openDialog(dialog, overlay, isModal, from) {
 
+  if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip"))
 
+    addClass(from, "active");
 
+  addClass(overlay, "active");
 
+  addClass(dialog, "active");
 
+  if (isModal)
 
+    dialog.showModal();
 
+  else
 
+    dialog.show();
 
+  await wait(90);
 
+  if (!isModal)
 
+    on(dialog, "keydown", onKeydownDialog, false);
 
+  _dialogs.push(dialog);
 
+  if (isTouchable())
 
+    document.body.classList.add("no-scroll");
 
+  focusOnDialogOrElement(dialog);
 
+}
 
+function onClickOverlay(e) {
 
+  const overlay = e.currentTarget;
 
+  const dialog = next(overlay);
 
+  if (hasTag(dialog, "dialog"))
 
+    closeDialog(dialog, overlay);
 
+}
 
+async function updateDialog(from, dialog) {
 
+  blurActiveElement();
 
+  let overlay = prev(dialog);
 
+  const isActive = hasClass(dialog, "active") || dialog.open;
 
+  const isModal = hasClass(dialog, "modal");
 
+  if (!isModal)
 
+    off(dialog, "keydown", onKeydownDialog, false);
 
+  if (!hasClass(overlay, "overlay")) {
 
+    overlay = create({ class: "overlay" });
 
+    insertBefore(overlay, dialog);
 
+    await wait(90);
 
+  }
 
+  if (!isModal)
 
+    on(overlay, "click", onClickOverlay, false);
 
+  if (isActive)
 
+    closeDialog(dialog, overlay);
 
+  else
 
+    void openDialog(dialog, overlay, isModal, from);
 
+}
 
+let _timeoutMenu;
 
+function onClickDocument(e) {
 
+  off(document.body, "click", onClickDocument);
 
+  const body = e.target;
 
+  const menus = queryAll("menu.active");
 
+  for (let i = 0; i < menus.length; i++)
 
+    updateMenu(body, menus[i], e);
 
+}
 
+function focusOnMenuOrInput(menu) {
 
+  setTimeout(() => {
 
+    const input = query(".field > input", menu);
 
+    if (input)
 
+      input.focus();
 
+    else
 
+      menu.focus();
 
+  }, 90);
 
+}
 
+function updateMenu(from, menu, e) {
 
+  if (_timeoutMenu)
 
+    clearTimeout(_timeoutMenu);
 
+  _timeoutMenu = setTimeout(() => {
 
+    on(document.body, "click", onClickDocument);
 
+    if (!hasTag(document.activeElement, "input"))
 
+      blurActiveElement();
 
+    const isActive = hasClass(menu, "active");
 
+    const isEvent = (e == null ? void 0 : e.target) === from;
 
+    const isChild = !!from.closest("menu");
 
+    if (!isActive && isChild || isActive && isEvent) {
 
+      removeClass(menu, "active");
 
+      return;
 
+    }
 
+    removeClass(queryAll("menu.active"), "active");
 
+    addClass(menu, "active");
 
+    focusOnMenuOrInput(menu);
 
+  }, 90);
 
+}
 
+let _timeoutSnackbar;
 
+function onClickSnackbar(e) {
 
+  const snackbar = e.currentTarget;
 
+  removeClass(snackbar, "active");
 
+  if (_timeoutSnackbar)
 
+    clearTimeout(_timeoutSnackbar);
 
+}
 
+function updateSnackbar(snackbar, milliseconds) {
 
+  blurActiveElement();
 
+  const activeSnackbars = queryAll(".snackbar.active");
 
+  for (let i = 0; i < activeSnackbars.length; i++)
 
+    removeClass(activeSnackbars[i], "active");
 
+  addClass(snackbar, "active");
 
+  on(snackbar, "click", onClickSnackbar);
 
+  if (_timeoutSnackbar)
 
+    clearTimeout(_timeoutSnackbar);
 
+  if (milliseconds === -1)
 
+    return;
 
+  _timeoutSnackbar = setTimeout(() => {
 
+    removeClass(snackbar, "active");
 
+  }, milliseconds ?? 6e3);
 
+}
 
+function updatePage(page) {
 
+  const container = parent(page);
 
+  if (container)
 
+    removeClass(queryAll(":scope > .page", container), "active");
 
+  addClass(page, "active");
 
+}
 
+function onPointerDownRipple(e) {
 
+  updateRipple(e);
 
+}
 
+function updateRipple(e) {
 
+  const element = e.currentTarget;
 
+  const rect = element.getBoundingClientRect();
 
+  const diameter = Math.max(rect.width, rect.height);
 
+  const radius = diameter / 2;
 
+  const x = e.clientX - rect.left - radius;
 
+  const y = e.clientY - rect.top - radius;
 
+  const rippleContainer = document.createElement("div");
 
+  rippleContainer.className = "ripple-js";
 
+  const ripple = document.createElement("div");
 
+  ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
 
+  ripple.style.left = `${x}px`;
 
+  ripple.style.top = `${y}px`;
 
+  ripple.addEventListener("animationend", () => {
 
+    rippleContainer.remove();
 
+  });
 
+  rippleContainer.appendChild(ripple);
 
+  element.appendChild(rippleContainer);
 
+}
 
+function updateAllRipples() {
 
+  const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
 
+  for (let i = 0; i < ripples.length; i++)
 
+    on(ripples[i], "pointerdown", onPointerDownRipple);
 
+}
 
+let _timeoutMutation;
 
+let _mutation;
 
+function onMutation() {
 
+  if (_timeoutMutation)
 
+    clearTimeout(_timeoutMutation);
 
+  _timeoutMutation = setTimeout(async () => await ui(), 180);
 
+}
 
+async function run(from, to, options, e) {
 
+  if (!to) {
 
+    to = query(from.getAttribute("data-ui"));
 
+    if (!to)
 
+      return;
 
+  }
 
+  updateAllClickable(from);
 
+  if (hasTag(to, "dialog")) {
 
+    await updateDialog(from, to);
 
+    return;
 
+  }
 
+  if (hasTag(to, "menu")) {
 
+    updateMenu(from, to, e);
 
+    return;
 
+  }
 
+  if (hasClass(to, "snackbar")) {
 
+    updateSnackbar(to, options);
 
+    return;
 
+  }
 
+  if (hasClass(to, "page")) {
 
+    updatePage(to);
 
+    return;
 
+  }
 
+  if (hasClass(to, "active")) {
 
+    removeClass(from, "active");
 
+    removeClass(to, "active");
 
+    return;
 
+  }
 
+  addClass(to, "active");
 
+}
 
+function onClickElement(e) {
 
+  void run(e.currentTarget, null, null, e);
 
+}
 
+function onKeydownElement(e) {
 
+  if (e.key === "Enter")
 
+    void run(e.currentTarget, null, null, e);
 
+}
 
+function setup() {
 
+  if (_mutation)
 
+    return;
 
+  _mutation = new MutationObserver(onMutation);
 
+  _mutation.observe(document.body, { childList: true, subtree: true });
 
+  onMutation();
 
+}
 
+function updateAllDataUis() {
 
+  const elements = queryAll("[data-ui]");
 
+  for (let i = 0, n = elements.length; i < n; i++) {
 
+    on(elements[i], "click", onClickElement);
 
+    if (hasTag(elements[i], "a") && !elements[i].getAttribute("href"))
 
+      on(elements[i], "keydown", onKeydownElement);
 
+  }
 
+}
 
+function ui(selector, options) {
 
+  if (selector) {
 
+    if (selector === "setup") {
 
+      setup();
 
+      return;
 
+    }
 
+    if (selector === "guid")
 
+      return guid();
 
+    if (selector === "mode")
 
+      return updateMode(options);
 
+    if (selector === "theme")
 
+      return updateTheme(options);
 
+    const to = query(selector);
 
+    if (!to)
 
+      return;
 
+    void run(to, to, options);
 
+  }
 
+  updateAllDataUis();
 
+  updateAllFields();
 
+  updateAllSliders();
 
+  updateAllRipples();
 
+}
 
+function start() {
 
+  var _a;
 
+  const context = globalThis;
 
+  const body = (_a = context == null ? void 0 : context.document) == null ? void 0 : _a.body;
 
+  if (body && !body.classList.contains("dark") && !body.classList.contains("light"))
 
+    updateMode("auto");
 
+  on(context, "load", setup, false);
 
+  context.ui = ui;
 
+}
 
+start();
 
+export {
 
+  ui as default,
 
+  ui
 
+};

文件差异内容过多而无法显示
+ 0 - 0
static/beer.min.css


文件差异内容过多而无法显示
+ 0 - 0
static/beer.min.js


二进制
static/material-symbols-outlined.woff2
查看文件


二进制
static/material-symbols-rounded.woff2
查看文件


二进制
static/material-symbols-sharp.woff2
查看文件


部分文件因为文件数量过多而无法显示