@esportsplus/ui 0.2.5 → 0.2.9

package/build/components/accordion/index.d.ts

@@ -0,0 +1,15 @@
+declare const _default: () => {
+    attributes: {
+        class: () => false | 0 | "--active";
+        onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => void;
+        style: (element: HTMLElement) => string | false | 0;
+    };
+    state: {
+        active: boolean | number;
+        dispose: () => void;
+        nodes: {
+            active: import("@esportsplus/reactivity").Signal<number> | import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true>;
+        };
+    };
+};
+export default _default;

package/build/components/accordion/index.js

@@ -0,0 +1,27 @@
+import { reactive } from '@esportsplus/reactivity';
+let key = Symbol();
+export default () => {
+    let state = reactive({
+        active: 0
+    });
+    return {
+        attributes: {
+            class: () => {
+                return state.active && '--active';
+            },
+            onrender: (element) => {
+                element[key] = state;
+            },
+            style: (element) => {
+                if (state.active) {
+                    let parent = element.closest('accordion');
+                    if (parent && key in parent) {
+                        parent[key].active = (+parent[key].active) + 1;
+                    }
+                }
+                return state.active && `--max-height: ${element.scrollHeight}`;
+            }
+        },
+        state
+    };
+};

package/build/components/aurora/index.d.ts

@@ -0,0 +1,8 @@
+type Options = {
+    backgrounds: [string, string, string, string];
+    blur?: string;
+    opacity?: number;
+    scale?: number;
+};
+declare const _default: ({ backgrounds, blur, opacity, scale }: Options) => import("@esportsplus/template").Renderable;
+export default _default;

package/build/components/aurora/index.js

@@ -0,0 +1,12 @@
+import { html } from '@esportsplus/template';
+export default ({ backgrounds, blur, opacity, scale }) => html `
+    <div class="aurora" ${{
+    style: {
+        '--blur': blur || '50px',
+        '--opacity': opacity || 0.8,
+        '--scale': scale || 1
+    }
+}}>
+        ${backgrounds.map((bg) => html `<div style='${`--background-color: ${bg}`}'></div>`)}
+    </div>
+`;

package/build/components/clipboard/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    write: (value: string) => Promise<boolean>;
+};
+export default _default;

package/build/components/clipboard/index.js

@@ -0,0 +1,2 @@
+import write from './write';
+export default { write };

package/build/components/clipboard/write.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (value: string) => Promise<boolean>;
+export default _default;

package/build/components/clipboard/write.js

@@ -0,0 +1,9 @@
+export default async (value) => {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/build/components/ellipsis/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (attributes?: Record<string, string>) => import("@esportsplus/template").Renderable;
+export default _default;

package/build/components/ellipsis/index.js

@@ -0,0 +1,8 @@
+import { html } from '@esportsplus/template';
+export default (attributes) => html `
+    <div class="ellipsis" ${attributes}>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+`;

package/build/components/field/description.d.ts

@@ -1,4 +1,4 @@
 declare const _default: (data: {
     description?: string;
-}) => "" | import("@esportsplus/template").Renderable;
+}) => import("@esportsplus/template").Renderable | "";
 export default _default;

package/build/components/field/error.d.ts

@@ -1,4 +1,4 @@
 declare const _default: (data: {
     error: string;
-}) => () => "" | import("@esportsplus/template").Renderable;
+}) => () => import("@esportsplus/template").Renderable | "";
 export default _default;

package/build/components/field/select.js

@@ -19,8 +19,10 @@ function parse(keys, selected) {
 }
 function template(data, state) {
     let { attributes: a, html: h } = scrollbar({
-        fixed: true,
-        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        attributes: {
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        },
+        fixed: true
     });
     return html `
         <div

package/build/components/field/title.d.ts

@@ -1,5 +1,5 @@
 declare const _default: (data: {
     required?: boolean;
     title?: string;
-}) => "" | import("@esportsplus/template").Renderable;
+}) => import("@esportsplus/template").Renderable | "";
 export default _default;

package/build/components/form/action.js

@@ -1,5 +1,4 @@
 import response from '@esportsplus/action';
-import alert from '../../components/alert';
 import input from './input';
 function parse(input) {
     let data = {};
@@ -27,7 +26,7 @@ export default function (action) {
             event.preventDefault();
             event?.submitter?.classList.add('button--processing');
             let { errors } = await action({
-                alert,
+                alert: null,
                 input: parse(Object.fromEntries(new FormData(this)?.entries())),
                 response
             });

package/build/components/form/types.d.ts

@@ -1,5 +1,4 @@
 import response, { Response } from '@esportsplus/action';
-import alert from '../../components/alert';
 type Action = (data: Payload) => Promise<Errors> | Errors;
 type Errors = {
     errors: Response<unknown>['errors'];

package/build/components/json/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    download: (content: any[] | Record<string, any>, name: string) => void;
+};
+export default _default;

package/build/components/json/index.js

@@ -0,0 +1,2 @@
+import download from './download';
+export default { download };

package/build/components/scrollbar/index.d.ts

@@ -1,9 +1,9 @@
-declare const _default: ({ fixed, style }?: {
+declare const _default: ({ attributes, fixed }?: {
+    attributes?: Record<string, unknown>;
     fixed?: boolean;
-    style?: string;
 }) => {
     attributes: {
-        class: () => string;
+        class: string;
         onscroll: (this: HTMLElement) => void;
     };
     html: import("@esportsplus/template").Renderable;

package/build/components/scrollbar/index.js

@@ -1,16 +1,14 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 let root = document.body, width;
-export default ({ fixed, style } = {}) => {
+export default ({ attributes, fixed } = {}) => {
     let state = reactive({
         height: 100,
         translate: 0
     });
     return {
         attributes: {
-            class: () => {
-                return '--scrollbar-content';
-            },
+            class: '--scrollbar-content',
             onscroll: function () {
                 if (width === undefined) {
                     width = this.offsetWidth - this.clientWidth;
@@ -26,10 +24,10 @@ export default ({ fixed, style } = {}) => {
             <div
                 class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
                 style='${() => `
-                    ${style || ''}
                     --translate: translate3d(0, ${state.translate}%, 0);
                     --height: ${state.height}%;
                 `}'
+                ${attributes}
             ></div>
         `
     };

package/build/components/site/index.d.ts

@@ -1,9 +1,8 @@
+import scrollbar from '../../components/scrollbar';
 type Data = {
     class?: string;
     content?: any;
-    scrollbar?: {
-        style?: string;
-    };
+    scrollbar?: Parameters<typeof scrollbar>[0];
 };
 declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/site/index.js

@@ -2,12 +2,13 @@ import { html } from '@esportsplus/template';
 import { onclick } from '../../components/root';
 import scrollbar from '../../components/scrollbar';
 export default (data) => {
-    let { attributes: a, html: h } = scrollbar({
-        fixed: true,
-        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-    });
+    let sb = data.scrollbar ??= {};
+    sb.attributes ??= {};
+    sb.attributes.style ??= '--background-default: var(--color-black-400);';
+    sb.fixed ??= true;
+    let { attributes: a, html: h } = scrollbar(sb);
     return html `
-        <section class='site ${data?.class || ''}' onclick='${onclick}' ${a}>
+        <section class='site ${data?.class || ''}' ${{ onclick }} ${a}>
             ${data?.content || ''}
             ${h}
         </section>

package/build/components/tooltip/index.d.ts

@@ -1,22 +1,17 @@
-import menu from './menu';
 declare const _default: {
     onclick: (data?: {
         active?: boolean;
-        menu?: Parameters<typeof menu>[0];
         toggle?: boolean;
     }) => {
         attributes: {
             class: () => string;
             onclick: (this: HTMLElement, e: Event) => void;
         };
-        content: (() => "" | import("@esportsplus/template").Renderable) | undefined;
         state: {
             active: boolean;
-            render: boolean | undefined;
             dispose: () => void;
             nodes: {
                 active: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true>;
-                render: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true> | import("@esportsplus/reactivity").Signal<undefined>;
             };
         };
     };
@@ -28,11 +23,9 @@ declare const _default: {
         };
         state: {
             active: boolean;
-            render: boolean | undefined;
             dispose: () => void;
             nodes: {
                 active: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true>;
-                render: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true> | import("@esportsplus/reactivity").Signal<undefined>;
             };
         };
     };

package/build/components/tooltip/index.js

@@ -1,5 +1,4 @@
 import { reactive } from '@esportsplus/reactivity';
-import menu from './menu';
 import root from '../../components/root';
 let queue = [], running = false, scheduled = false;
 async function frame() {
@@ -14,13 +13,7 @@ async function frame() {
     running = false;
 }
 const onclick = (data = {}) => {
-    let content, state = reactive({
-        active: data.active || false,
-        render: undefined
-    });
-    if (data.menu) {
-        content = menu(data.menu, state);
-    }
+    let state = reactive({ active: data.active || false });
     return {
         attributes: {
             class: () => {
@@ -45,15 +38,11 @@ const onclick = (data = {}) => {
                 }
             }
         },
-        content,
         state
     };
 };
 const onhover = (active = false) => {
-    let state = reactive({
-        active,
-        render: undefined
-    });
+    let state = reactive({ active });
     return {
         attributes: {
             class: () => `tooltip ${state.active ? '--active' : ''}`,

package/build/index.d.ts

@@ -1,8 +1,11 @@
 import '@esportsplus/webpack/global.d.ts';
-export { default as alert } from './components/alert';
-export { default as export } from './components/export';
+export { default as accordion } from './components/accordion';
+export { default as aurora } from './components/aurora';
+export { default as clipboard } from './components/clipboard';
+export { default as ellipsis } from './components/ellipsis';
 export { default as field } from './components/field';
 export { default as form } from './components/form';
+export { default as json } from './components/json';
 export { default as number } from './components/number';
 export { default as page } from './components/page';
 export { default as root } from './components/root';

package/build/index.js

@@ -1,8 +1,11 @@
 import '@esportsplus/webpack/global.d.ts';
-export { default as alert } from './components/alert';
-export { default as export } from './components/export';
+export { default as accordion } from './components/accordion';
+export { default as aurora } from './components/aurora';
+export { default as clipboard } from './components/clipboard';
+export { default as ellipsis } from './components/ellipsis';
 export { default as field } from './components/field';
 export { default as form } from './components/form';
+export { default as json } from './components/json';
 export { default as number } from './components/number';
 export { default as page } from './components/page';
 export { default as root } from './components/root';

package/components/styles.css

@@ -1,25 +1,25 @@
 .accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
-.alert{max-width:var(--max-width);width:calc(100% - var(--margin-horizontal)*2)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{position:absolute;top:0;right:100%;bottom:0;animation:alert-close var(--transition-duration) ease-in-out;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){pointer-events:none;position:absolute;transform:translateX(-25%);left:0;top:0}.alert-message.--active{opacity:1}@keyframes alert-close{from{transform:translateX(150%)}to{transform:translateX(0)}}
 .anchor{max-height:calc(var(--max-height, 100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width, 100%) - var(--margin-horizontal)*2);position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:9}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
-.banner{position:absolute;top:0;right:0;bottom:0;left:0;background-position:center;background-size:cover;z-index:-1}.banner--backdrop{background-position:bottom;height:80svh}.banner--blur{filter:blur(24px);left:-2svh;right:-2svh;top:-2svh}.banner--blur.banner--backdrop{height:90svh}.banner--fixed{position:fixed}.banner--gradient::before{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top, transparent 64%, var(--to) 88%),linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);content:"";z-index:0}
+.aurora{inset:0;position:absolute;overflow:hidden}.aurora div{background-color:var(--background-color);position:absolute;filter:blur(var(--blur));opacity:var(--opacity)}.aurora div :nth-child(1){animation:AuroraFirstChild 12s linear infinite;border-radius:100%;height:600px;inset:-300px auto auto -50px;transform:rotate(0) translate(80px) rotate(0) scale(var(--scale));width:600px;z-index:3}.aurora div :nth-child(2){inset:auto auto -30px -80px;height:800px;transform:scale(var(--scale));width:500px}.aurora div :nth-child(3){animation:AuroraSiblings 10s linear infinite;border-radius:100%;height:450px;inset:auto -100px -80px auto;transform:rotate(0) translate(200px) rotate(0) scale(var(--scale));width:450px}.aurora div :nth-child(4){animation:AuroraSiblings 15s linear infinite;border-radius:100%;height:350px;inset:auto 0 0 auto;margin:auto;transform:rotate(0) translate(200px) rotate(0) scale(var(--scale));width:350px}@keyframes AuroraFirstChild{100%{transform:rotate(2turn) translate(200px) rotate(-2turn)}}@keyframes AuroraSiblings{100%{transform:rotate(-2turn) translate(200px) rotate(2turn)}}
+.banner{position:absolute;inset:0 0 0 0;background-position:center;background-size:cover;z-index:-1}.banner--backdrop{background-position:bottom;height:80svh}.banner--blur{filter:blur(var(--blur));left:-2svh;right:-2svh;top:-2svh}.banner--blur.banner--backdrop{height:90svh}.banner--fixed{position:fixed}.banner--gradient::before{position:absolute;inset:0 0 0 0;background:radial-gradient(circle at top, transparent 64%, var(--to) 88%),linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);content:"";z-index:0}
 .border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}
 .bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
-.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button::after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat::after{display:none}.button--processing{color:rgba(0,0,0,0);pointer-events:none}.button--processing::before{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid var(--border-color);border-radius:100%;border-right-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);content:"";height:var(--size);width:var(--size)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%, 50%) rotate(0deg)}100%{transform:translate(50%, 50%) rotate(359deg)}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
-.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card::after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat::after{display:none}
-.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;width:100%}
-.ellipsis-dot:nth-child(1){animation:ellipsis-dot-one var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(2){animation:ellipsis-dot-two var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(3){animation:ellipsis-dot-three var(--animation-duration) linear infinite}@keyframes ellipsis-dot-one{0%{opacity:1}65%{opacity:1}66%{opacity:0}100%{opacity:0}}@keyframes ellipsis-dot-two{0%{opacity:0}21%{opacity:0}22%{opacity:1}65%{opacity:1}66%{opacity:0}100%{opacity:0}}@keyframes ellipsis-dot-three{0%{opacity:0}43%{opacity:0}44%{opacity:1}65%{opacity:1}66%{opacity:0}100%{opacity:0}}
-button,input,select,textarea{background:rgba(0,0,0,0);border-radius:0;border:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);position:relative;width:100%;word-wrap:break-word}.field-description:empty,.field-error:empty,.field-title:empty{height:0px;margin:0}.field-error{animation:field-error .32s 1 linear}@keyframes field-error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}100%{transform:translate(0px)}}.field-mask::after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat::after{display:none}.field-mask--outline::before{position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 0 0 var(--outline-width) var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0px;opacity:0;pointer-events:none;width:0px;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox::before,.field-mask--radio::before,.field-mask--switch::before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{position:absolute;top:0;left:0;height:0px;opacity:0;pointer-events:none;width:0px;z-index:0}.field-mask--checkbox::before,.field-mask--radio::before{position:absolute;bottom:50%;right:50%}.field-mask--radio::before,.field-mask--switch::before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox::before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch::before{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;padding:var(--padding-vertical) var(--padding-horizontal);min-width:0}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--input textarea.field-tag{white-space:normal}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;content:"";height:var(--arrow-size);transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}
-.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{flex-flow:row;margin-bottom:calc(var(--scrollbar-width)*-1);overflow-y:hidden;padding-bottom:var(--scrollbar-width)}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
-.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);pointer-events:none;position:relative;width:var(--width)}.icon svg{color:currentColor;fill:currentColor;height:100%;width:100%}
+.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat::after{display:none}.button--processing{color:rgba(0,0,0,0);pointer-events:none}.button--processing::before{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);animation:ButtonProcessing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);border-radius:100%;border-right-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);content:"";height:var(--size);width:var(--size)}.button--processing *{opacity:0}@keyframes ButtonProcessing{0%{transform:translate(50%, 50%) rotate(0deg)}100%{transform:translate(50%, 50%) rotate(359deg)}}.button--skeleton{animation:var(--animation-duration) ease-in-out infinite ButtonSkeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));background-size:400% 100%;color:rgba(0,0,0,0);pointer-events:none}.button--skeleton *{opacity:0}@keyframes ButtonSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
+.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat::after{display:none}
+.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:var(--margin-vertical) auto;position:relative;width:min(var(--max-width),100% - var(--margin-horizontal)*2)}
+.ellipsis span{animation:Ellipsis var(--animation-duration) infinite linear;background-color:var(--color);border-radius:100%;display:inline-block;height:var(--size);margin:0 var(--margin-horizontal);width:var(--size)}.ellipsis span :nth-child(2){animation-delay:.24s}.ellipsis span :nth-child(3){animation-delay:.48s}@keyframes Ellipsis{0%,100%{opacity:.16}20%{opacity:1}}
+button,input,select,textarea{background:rgba(0,0,0,0);border-radius:0;border:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);position:relative;width:100%;word-wrap:break-word}.field-description:empty,.field-error:empty,.field-title:empty{height:0px;margin:0}.field-error{animation:FieldError .32s 1 linear}@keyframes FieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}100%{transform:translate(0px)}}.field-mask::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat::after{display:none}.field-mask--outline::before{position:absolute;inset:0 0 0 0;box-shadow:0 0 0 var(--outline-width) var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0px;opacity:0;pointer-events:none;width:0px;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox::before,.field-mask--radio::before,.field-mask--switch::before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{position:absolute;top:0;left:0;height:0px;opacity:0;pointer-events:none;width:0px;z-index:0}.field-mask--checkbox::before,.field-mask--radio::before{position:absolute;bottom:50%;right:50%}.field-mask--radio::before,.field-mask--switch::before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox::before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch::before{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;padding:var(--padding-vertical) var(--padding-horizontal);min-width:0}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--input textarea.field-tag{white-space:normal}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;content:"";height:var(--arrow-size);transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}
+.grid{display:grid;grid-gap:var(--margin-horizontal) var(--margin-vertical);grid-template-columns:repeat(auto-fit, minmax(var(--min-width), var(--max-width)));position:relative}
+.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)*-1);position:relative;width:calc(100% + var(--margin-horizontal)*2)}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{flex-flow:row;margin-bottom:calc(var(--scrollbar-width)*-1);overflow-y:hidden;padding-bottom:var(--scrollbar-width)}.group-item{display:flex;margin:var(--margin-vertical) var(--margin-horizontal) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal)*2)}
+.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);position:relative;width:var(--width)}.icon svg{color:currentColor;fill:currentColor;height:100%;width:100%}
 .link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
-.loading{animation:loading var(--animation-duration) infinite linear;animation-delay:var(--animation-delay);border:var(--border-width) var(--border-style) var(--border-color);border-radius:100%;border-right-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);box-shadow:var(--box-shadow);height:var(--height);pointer-events:none;position:relative;transition:border-color var(--transition-duration) ease-in-out;width:var(--width);z-index:0}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
-.modal{position:fixed;bottom:50%;right:50%;transform:translate(50%, 50%);max-height:var(--max-height);max-width:var(--max-width);overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;transform-origin:center;width:var(--width);z-index:2}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%, 50%) scale(0.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;transform-origin:center}.modal-frame:not(.--active){display:none}
+.loading{animation:Loading var(--animation-duration) linear infinite;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);border-radius:100%;height:var(--size);width:var(--size)}@keyframes Loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+.modal{position:fixed;bottom:50%;right:50%;transform:translate(50%, 50%);max-height:var(--max-height);overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;transform-origin:center;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:2}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%, 50%) scale(0.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;transform-origin:center}.modal-frame:not(.--active){display:none}
 .page{min-height:100svh;position:relative;width:100vw}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-suptitle+.page-title,.page-title+.page-subtitle{margin-top:var(--margin-vertical)}
-.processing{height:var(--size);position:relative;width:var(--size);animation:processing var(--animation-duration) linear infinite}.processing-ring{clip:rect(calc(var(--size) / 2), var(--size), var(--size), 0)}.processing-ring,.processing-ring::after,.processing-ring::before{position:absolute;top:0;right:0;bottom:0;left:0}.processing-ring,.processing-ring::before{animation:processing calc(var(--animation-duration)/2) cubic-bezier(0.77, 0, 0.175, 1) infinite}.processing-ring::after,.processing-ring::before{border-radius:50%;content:""}.processing-ring::after{border:var(--border-width) var(--border-style) var(--border-color-secondary);opacity:var(--opacity)}.processing-ring::before{border-top:var(--border-width) var(--border-style) var(--border-color-primary)}@keyframes processing{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 body,html{height:100%;overflow-x:hidden;width:100%}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::after,*::before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%;word-wrap:break-word}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{color:var(--color, inherit);cursor:pointer;outline:none;text-decoration:none}b,strong{color:var(--color, inherit);font-weight:var(--font-weight)}p{margin:0;padding:0;width:100%;word-wrap:break-word}pre{margin:0;overflow-wrap:break-word;padding:0;white-space:break-spaces;width:100%}sub,sup{font-size:.8em}sub{bottom:-0.48em}sup{top:-0.48em}
 .row{display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:100%}
-::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,0);box-shadow:unset}.--scrollbar-container{display:flex;flex-flow:column;overflow:hidden;position:relative}.--scrollbar-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar::before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:4px}.scrollbar::before{background:var(--background-default);border-radius:1px 0 0 1px;content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}
-.sidebar{position:absolute;top:var(--position-vertical);bottom:var(--position-vertical);cursor:default;height:calc(100% - var(--position-vertical)*2);max-width:var(--width);overflow:hidden;transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:calc(100% - var(--position-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--position-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--position-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width) * -1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
+::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,0);box-shadow:unset}.--scrollbar-container{display:flex;flex-flow:column;overflow:hidden;position:relative}.--scrollbar-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar::before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar::before{background:var(--background-default);border-radius:1px 0 0 1px;content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}
+.sidebar{position:absolute;top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical)*2);overflow:hidden;transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:min(var(--width),100% - var(--margin-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width) * -1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
 .site{z-index:0}
 .text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);position:relative;transition:color var(--transition-duration) ease-in-out;width:var(--width)}
 .thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height);position:relative;width:var(--width)}

package/components/variables.css

@@ -1,24 +1,23 @@
-.accordion{--max-height: 0;--transition-duration: var(--transition-duration-400)}
-.alert{--max-width: 420px}.alert-close,.alert-message{--transition-duration: var(--transition-duration-400)}
-.anchor{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400);--transition-duration: var(--transition-duration-400)}
-.banner--gradient{--from: rgba(3,0,19, 0.32);--to: var(--color-black-500)}
+.accordion{--max-height: 0}.accordion:not(.--active){--max-height: 0}
+.anchor{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400)}
+.banner--blur{--blur: 24px}.banner--gradient{--from: rgba(3,0,19, 0.32);--to: var(--color-black-500)}
 .border{--border-color: var(--border-color-default);--border-color-default: var(--color-border-400);--border-style: solid;--border-width: var(--border-width-400)}
 .bubble{--background: var(--background-default);--background-default: var(--color-border-400);--border-radius: var(--border-radius-circle);--height: var(--size);--margin-horizontal: var(--size-100);--width: var(--size);--size: 6px}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal: calc(var(--size) / -2);--position-vertical: calc(var(--size) / -2)}
-.button{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--transition-duration: var(--transition-duration-400);--width: auto}.button.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active)}.button:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover)}.button:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed)}.button--processing{--animation-duration: 0.64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}.button--processing-400{--border-width: var(--border-width-400)}.button--processing-500{--border-width: var(--border-width-500)}.button--processing-600{--border-width: var(--border-width-600)}.button--processing-700{--border-width: var(--border-width-700)}
-.card{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-300);--box-shadow-pressed: none;--padding-horizontal: 0px;--padding-vertical: 0px;--transition-duration: var(--transition-duration-400);--width: auto}.card.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active)}.card:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover)}.card:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed)}
-.container{--max-width: 1400px;--padding-horizontal: var(--size-600);--padding-vertical: 0px}
-.ellipsis{--animation-duration: 2s}
-.field{--transition-duration: var(--transition-duration-400);--width: 100%}.field--optional{--max-height: 0;--max-height-active: 0}.field.--active .field--optional{--max-height: var(--max-height-active)}.field-description,.field-error{--font-size: var(--font-size-300)}.field-error{--color: var(--color-red-400)}.field-mask{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-default: var(--background);--border-radius: var(--border-radius-400);--border-style: solid;--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-400);--box-shadow-default: var(--box-shadow-300);--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--outline-opacity: var(--outline-opacity-default);--outline-opacity-active: 0.32;--outline-opacity-default: 0;--outline-opacity-hover: 0;--outline-opacity-pressed: 0;--outline-spacing: 0px;--outline-width: var(--outline-width-default);--outline-width-active: 4px;--outline-width-default: 0px;--outline-width-hover: 0px;--outline-width-pressed: 0px;--padding-horizontal: 0px;--padding-vertical: var(--size-400)}.field.--active>.field-mask,.field.--active *:not(.field) .field-mask{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active);--outline-opacity: var(--outline-opacity-active);--outline-width: var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color: var(--border-color-default)}.field-mask--outline:not(.--active):active::before{--outline-width: 0px}.field-required{--border-radius: var(--border-radius-circle);--size: 6px}.field-title{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500)}.field.--active .field-title{--color: var(--color-active)}.field:not(.--active):hover .field-title{--color: var(--color-hover)}.field:not(.--active):active .field-title{--color: var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent: var(--accent-default);--accent-active: var(--accent-default);--accent-default: var(--color-white-400);--accent-hover: var(--accent-default);--accent-pressed: var(--accent-default);--height: var(--size);--opacity: var(--opacity-default);--opacity-active: var(--opacity-default);--opacity-default: 1;--opacity-hover: var(--opacity-default);--opacity-pressed: var(--opacity-default);--rotate: 0deg;--scale: var(--scale-default);--scale-active: var(--scale-default);--scale-default: 1;--scale-hover: var(--scale-default);--scale-pressed: var(--scale-default);--size: var(--size-600);--width-switch: 40px}.field-mask--checkbox::before,.field-mask--radio::before,.field-mask--switch::before{--translateX: 0px;--translateY: 0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent: var(--accent-hover);--opacity: var(--opacity-hover);--scale: var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent: var(--accent-pressed);--opacity: var(--opacity-pressed);--scale: var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent: var(--accent-active);--opacity: var(--opacity-active);--scale: var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal: calc(var(--width-switch) - var(--width));--width: var(--height)}.field-mask--radio::before,.field-mask--switch::before{--box-shadow: 0 1px 0 rgba(0,0,0, 0.16)}.field-mask--checkbox{--border-radius: var(--border-radius-300);--rotate: 45deg;--scale-active: 1;--scale-default: 0;--scale-hover: 1.08;--scale-pressed: 0.98}.field-mask--checkbox::before{--box-shadow: 1px 1px 0 rgba(0,0,0, 0.16);--border-width: 5px;--height: 110%;--translateX: 108%;--translateY: 8%;--width: 50%}.field:not(.--active):not(:hover) .field-mask--checkbox::before{--translateY: 100%}.field-mask--radio{--border-radius: var(--border-radius-circle);--opacity-active: 1;--opacity-default: 0.4;--scale-active: 0.9;--scale-default: 0;--scale-hover: 0.8;--scale-pressed: 0.7}.field-mask--radio::before{--height: calc((var(--size) / 2) - (var(--border-width) * 2));--translateX: 50%;--translateY: 50%;--width: var(--height)}.field-mask--switch{--border-radius: var(--border-radius-curved);--padding-horizontal: var(--border-width-400);--padding-vertical: var(--border-width-400);--width: var(--width-switch)}.field-mask--switch::before{--height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));--width: var(--height)}.field.--active .field-mask--switch::before{--translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.field-mask--input,.field-mask--select{--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.field-mask--input{--size: var(--size-400)}.field-mask--select{--arrow-spacer: 1px;--arrow-size: 6px}.field-mask-arrow{--border-width: var(--border-width-500)}
+.button{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--width: auto}.button.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active)}.button:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover)}.button:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed)}.button--processing{--animation-duration: 0.64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}.button--skeleton{--animation-duration: 6.4s}
+.card{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-300);--box-shadow-pressed: none;--padding-horizontal: 0px;--padding-vertical: 0px;--width: auto}.card.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active)}.card:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover)}.card:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed)}
+.container{--margin-horizontal: var(--size-600);--margin-vertical: 0px;--max-width: 1400px}
+.ellipsis{--animation-duration: 1.24s;--marign-horizontal: var(--size-100);--size: var(--size-200)}
+.field{--width: 100%}.field--optional{--max-height: 0;--max-height-active: 0}.field.--active .field--optional{--max-height: var(--max-height-active)}.field-description,.field-error{--font-size: var(--font-size-300)}.field-error{--color: var(--color-red-400)}.field-mask{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-default: var(--background);--border-radius: var(--border-radius-400);--border-style: solid;--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-400);--box-shadow-default: var(--box-shadow-300);--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--outline-opacity: var(--outline-opacity-default);--outline-opacity-active: 0.32;--outline-opacity-default: 0;--outline-opacity-hover: 0;--outline-opacity-pressed: 0;--outline-spacing: 0px;--outline-width: var(--outline-width-default);--outline-width-active: 4px;--outline-width-default: 0px;--outline-width-hover: 0px;--outline-width-pressed: 0px;--padding-horizontal: 0px;--padding-vertical: var(--size-400)}.field.--active>.field-mask,.field.--active *:not(.field) .field-mask{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active);--outline-opacity: var(--outline-opacity-active);--outline-width: var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color: var(--border-color-default)}.field-mask--outline:not(.--active):active::before{--outline-width: 0px}.field-required{--border-radius: var(--border-radius-circle);--size: 6px}.field-title{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500)}.field.--active .field-title{--color: var(--color-active)}.field:not(.--active):hover .field-title{--color: var(--color-hover)}.field:not(.--active):active .field-title{--color: var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent: var(--accent-default);--accent-active: var(--accent-default);--accent-default: var(--color-white-400);--accent-hover: var(--accent-default);--accent-pressed: var(--accent-default);--height: var(--size);--opacity: var(--opacity-default);--opacity-active: var(--opacity-default);--opacity-default: 1;--opacity-hover: var(--opacity-default);--opacity-pressed: var(--opacity-default);--rotate: 0deg;--scale: var(--scale-default);--scale-active: var(--scale-default);--scale-default: 1;--scale-hover: var(--scale-default);--scale-pressed: var(--scale-default);--size: var(--size-600);--width-switch: 40px}.field-mask--checkbox::before,.field-mask--radio::before,.field-mask--switch::before{--translateX: 0px;--translateY: 0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent: var(--accent-hover);--opacity: var(--opacity-hover);--scale: var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent: var(--accent-pressed);--opacity: var(--opacity-pressed);--scale: var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent: var(--accent-active);--opacity: var(--opacity-active);--scale: var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal: calc(var(--width-switch) - var(--width));--width: var(--height)}.field-mask--radio::before,.field-mask--switch::before{--box-shadow: 0 1px 0 rgba(0,0,0, 0.16)}.field-mask--checkbox{--border-radius: var(--border-radius-300);--rotate: 45deg;--scale-active: 1;--scale-default: 0;--scale-hover: 1.08;--scale-pressed: 0.98}.field-mask--checkbox::before{--box-shadow: 1px 1px 0 rgba(0,0,0, 0.16);--border-width: 5px;--height: 110%;--translateX: 108%;--translateY: 8%;--width: 50%}.field:not(.--active):not(:hover) .field-mask--checkbox::before{--translateY: 100%}.field-mask--radio{--border-radius: var(--border-radius-circle);--opacity-active: 1;--opacity-default: 0.4;--scale-active: 0.9;--scale-default: 0;--scale-hover: 0.8;--scale-pressed: 0.7}.field-mask--radio::before{--height: calc((var(--size) / 2) - (var(--border-width) * 2));--translateX: 50%;--translateY: 50%;--width: var(--height)}.field-mask--switch{--border-radius: var(--border-radius-curved);--padding-horizontal: var(--border-width-400);--padding-vertical: var(--border-width-400);--width: var(--width-switch)}.field-mask--switch::before{--height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));--width: var(--height)}.field.--active .field-mask--switch::before{--translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.field-mask--input,.field-mask--select{--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.field-mask--input{--size: var(--size-400)}.field-mask--select{--arrow-spacer: 1px;--arrow-size: 6px}.field-mask-arrow{--border-width: var(--border-width-500)}
+.group{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400);--max-width: 1fr;--min-width: 200px}
 .group{--margin-horizontal: var(--size-400);--width: auto}.group.--flex-column .group-item{--width: 100%}.group--scroller .group-item{--margin-vertical: 0px}
 .icon{--color: inherit;--height: var(--size);--margin-horizontal: var(--size-300);--size: var(--size-400);--width: var(--size)}
-.link{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--transition-duration: var(--transition-duration-400);--width: auto}.link.--active{--background: var(--background-active);--border-color: var(--border-color-active);--color: var(--color-active)}.link:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--color: var(--color-hover)}.link:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--color: var(--color-pressed)}
-.loading{--animation-delay: calc(0s + (0.032s * var(--i)));--animation-duration: calc(0.64s * (var(--i) + 1.5));--border-color: inherit;--border-style: solid;--border-width: var(--border-width-400);--box-shadow: none;--height: calc(var(--size) * var(--multiplier));--i: 0;--multiplier: calc(1 - (.2 * var(--i)));--size: var(--size-400);--transition-duration: var(--transition-duration-400);--width: calc(var(--size) * var(--multiplier))}.loading .loading{--i: 1;--size: inherit}.loading .loading .loading{--i: 2}.loading .loading .loading .loading{--i: 3}.loading .loading .loading .loading .loading{--i: 4}
-.modal{--max-height: calc(100svh - (var(--margin) * 2));--max-width: 320px;--width: calc(100svw - (var(--margin) * 2))}.modal,.modal-frame{--transition-duration: var(--transition-duration-300)}
-.page-subtitle,.page-suptitle{--color: var(--color-default);--color-default: var(--color-text-400);--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.page-suptitle+.page-title::before{--line-height: 1}.page-title{--color: var(--color-default);--color-default: var(--color-text-500);--line-height: var(--line-height-400)}.page-title:has(+.page-subtitle)::after{--line-height: 1}
-.processing{--animation-duration: 2.64s;--border-color-primary: var(--color-black-500);--border-color-secondary: var(--color-border-300);--border-style: solid;--border-width: var(--border-width-600);--height: var(--size);--opacity: 0.64;--size: var(--size-600);--width: var(--size)}
-body{--border-radius-0px: 0px;--border-radius-circle: 100%;--border-radius-curved: 240px;--border-radius-100: 2px;--border-radius-200: 4px;--border-radius-300: 6px;--border-radius-400: 8px;--border-radius-500: 12px;--border-radius-600: 16px;--box-shadow-300: 0px 8px 16px -4px rgba(0, 3, 19, 0.016), 0px 4px 8px -2px rgba(0, 3, 19, 0.008);--box-shadow-400: 0px 16px 24px -4px rgba(0, 3, 19, 0.048), 0px 8px 8px -4px rgba(0, 3, 19, 0.024);--box-shadow-500: 0px 16px 32px -8px rgba(0, 3, 19, 0.16);--border-width-400: 1px;--border-width-500: 2px;--border-width-600: 3px;--border-width-700: 4px;--color-black-300: #0f1325;--color-black-400: #04081a;--color-black-500: #000313;--color-blue-300: #3453ff;--color-blue-400: #2a4bff;--color-blue-500: #2343f8;--color-border-300: #c4c9df;--color-border-400: #b4b9d2;--color-border-500: #a5a9c3;--color-green-300: #5fff81;--color-green-400: #2aff57;--color-green-500: #23f850;--color-grey-300: #f2f9ff;--color-grey-400: #e7f1fa;--color-grey-500: #dde8f0;--color-purple-300: #6634ff;--color-purple-400: #5e2aff;--color-purple-500: #5723f8;--color-red-300: #ff3446;--color-red-400: #ff2a3d;--color-red-500: #f82336;--color-text-300: #676c84;--color-text-400: #393d57;--color-text-500: #1f2542;--color-white-300: #fff;--color-white-400: #fff;--color-white-500: #fff;--color-yellow-300: #fff95f;--color-yellow-400: #fff92a;--color-yellow-500: #f8f123;--font-size-100: 8px;--font-size-200: 10px;--font-size-300: 12px;--font-size-400: 14px;--font-size-500: 16px;--font-size-600: 24px;--font-size-700: 32px;--font-size-800: 40px;--font-weight-300: 400;--font-weight-400: 500;--font-weight-500: 600;--font-weight-600: 700;--line-height-100: 1;--line-height-200: 1.2;--line-height-300: 1.4;--line-height-400: 1.6;--size-0px: 0px;--size-100: 4px;--size-200: 8px;--size-300: 12px;--size-400: 16px;--size-500: 20px;--size-600: 24px;--size-700: 32px;--size-800: 40px;--size-900: 48px;--spacer-300: 48px;--spacer-400: 96px;--spacer-500: 144px;--transition-duration-300: 0.08s;--transition-duration-400: 0.16s;--transition-duration-500: 0.24s;--background: var(--color-grey-400);--color: var(--color-text-400);--font-family: "Montserrat", sans-serif;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--min-width: 320px;--scrollbar-width: 17px}section{--width: 100%}h1,h2,h3,h4,h5{--color: var(--color-text-400);--font-weight: var(--font-weight-600);--line-height: var(--line-height-300)}h1{--font-size: var(--font-size-800)}h2{--font-size: var(--font-size-700)}h3{--font-size: var(--font-size-600)}h4{--font-size: var(--font-size-500)}h5{--font-size: var(--font-size-400)}b,strong{--color: var(--color-text-400);--font-weight: var(--font-weight-500)}
-.scrollbar{--background-default: transparent;--height: 0;--transition-duration: var(--transition-duration-400);--translate: translate3d(0, 0, 0)}
-.sidebar{--position-horizontal: 0px;--position-vertical: 0px;--transition-duration: var(--transition-duration-400);--width: var(--width-default);--width-closed: var(--width-default);--width-default: 320px}.sidebar:not(.--active):not(:hover){--width: var(--width-closed)}.sidebar--floating{--position-horizontal: var(--size-100);--position-vertical: var(--size-100)}
-.text{--color: var(--color-default);--color-default: inherit;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--transition-duration: var(--transition-duration-400);--width: auto}
+.link{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--width: auto}.link.--active{--background: var(--background-active);--border-color: var(--border-color-active);--color: var(--color-active)}.link:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--color: var(--color-hover)}.link:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--color: var(--color-pressed)}
+.loading{--animation-duration: 0.64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}
+.modal{--margin-horizontal: 0px;--margin-vertical: 0px;--max-height: calc(100svh - (var(--margin-vertical) * 2));--max-width: 320px}
+.page-subtitle,.page-suptitle{--color: var(--color-default);--color-default: var(--color-text-400);--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.page-title{--color: var(--color-default);--color-default: var(--color-text-500);--line-height: var(--line-height-400)}
+body{--border-radius-0px: 0px;--border-radius-circle: 100%;--border-radius-curved: 240px;--border-radius-100: 2px;--border-radius-200: 4px;--border-radius-300: 6px;--border-radius-400: 8px;--border-radius-500: 12px;--border-radius-600: 16px;--border-width-400: 1px;--border-width-500: 2px;--border-width-600: 3px;--border-width-700: 4px;--box-shadow-300: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-400: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-500: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--color-black-300: #0f1325;--color-black-400: #04081a;--color-black-500: #000313;--color-blue-300: #3453ff;--color-blue-400: #2a4bff;--color-blue-500: #2343f8;--color-border-300: #c4c9df;--color-border-400: #b4b9d2;--color-border-500: #a5a9c3;--color-green-300: #5fff81;--color-green-400: #2aff57;--color-green-500: #23f850;--color-grey-300: #f2f9ff;--color-grey-400: #e7f1fa;--color-grey-500: #dde8f0;--color-purple-300: #6634ff;--color-purple-400: #5e2aff;--color-purple-500: #5723f8;--color-red-300: #ff3446;--color-red-400: #ff2a3d;--color-red-500: #f82336;--color-text-300: #676c84;--color-text-400: #393d57;--color-text-500: #1f2542;--color-white-300: #fff;--color-white-400: #fff;--color-white-500: #fff;--color-yellow-300: #fff95f;--color-yellow-400: #fff92a;--color-yellow-500: #f8f123;--font-size-100: 8px;--font-size-200: 10px;--font-size-300: 12px;--font-size-400: 14px;--font-size-500: 16px;--font-size-600: 24px;--font-size-700: 32px;--font-size-800: 40px;--font-weight-300: 400;--font-weight-400: 500;--font-weight-500: 600;--font-weight-600: 700;--line-height-100: 1;--line-height-200: 1.2;--line-height-300: 1.4;--line-height-400: 1.6;--size-0px: 0px;--size-100: 4px;--size-200: 8px;--size-300: 12px;--size-400: 16px;--size-500: 20px;--size-600: 24px;--size-700: 32px;--size-800: 40px;--size-900: 48px;--spacer-300: 48px;--spacer-400: 96px;--spacer-500: 144px;--background: var(--color-grey-400);--color: var(--color-text-400);--font-family: "Montserrat", sans-serif;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--min-width: 320px;--scrollbar-width: 17px;--transition-duration: tokens.$transition-duration}section{--width: 100%}h1,h2,h3,h4,h5{--color: var(--color-text-400);--font-weight: var(--font-weight-600);--line-height: var(--line-height-300)}h1{--font-size: var(--font-size-800)}h2{--font-size: var(--font-size-700)}h3{--font-size: var(--font-size-600)}h4{--font-size: var(--font-size-500)}h5{--font-size: var(--font-size-400)}b,strong{--color: var(--color-text-400);--font-weight: var(--font-weight-500)}
+.scrollbar{--background-default: transparent;--height: 0;--translate: translate3d(0, 0, 0);--width: 4px}
+.sidebar{--margin-horizontal: 0px;--margin-vertical: 0px;--width: var(--width-default);--width-closed: var(--width-default);--width-default: 320px}.sidebar:not(.--active):not(:hover){--width: var(--width-closed)}.sidebar--floating{--margin-horizontal: var(--size-100);--margin-vertical: var(--size-100)}
+.text{--color: var(--color-default);--color-default: inherit;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--width: auto}
 .thumbnail{--background: transparent;--border-radius: var(--border-radius-300);--height: var(--size);--size: var(--size-700);--width: var(--size)}
-.tooltip-content,.tooltip-message{--background: var(--background-default);--background-default: transparent;--border-radius: var(--border-radius-300);--box-shadow: var(--box-shadow-400);--max-width: calc(90vw - (var(--size-700) * 2));--min-width: auto;--scaleX: 0.64;--scaleY: 0.64;--spacer: var(--size-300);--transition-duration: var(--transition-duration-300);--width: auto}.tooltip-message{--background-default: var(--color-black-400);--color: var(--color-white-400);--font-size: var(--font-size-300);--font-weight: var(--font-weight-400);--padding-horizontal: var(--size-300);--padding-vertical: var(--size-300)}
+.tooltip-content,.tooltip-message{--background: var(--background-default);--background-default: transparent;--border-radius: var(--border-radius-300);--box-shadow: var(--box-shadow-400);--max-width: calc(90vw - (var(--size-700) * 2));--min-width: auto;--scaleX: 0.64;--scaleY: 0.64;--spacer: var(--size-300);--width: auto}.tooltip-message{--background-default: var(--color-black-400);--color: var(--color-white-400);--font-size: var(--font-size-300);--font-weight: var(--font-weight-400);--padding-horizontal: var(--size-300);--padding-vertical: var(--size-300)}