rizzo-css 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/rizzo.min.css +139 -0
- package/package.json +35 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# rizzo-css
|
|
2
|
+
|
|
3
|
+
A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). Framework-agnostic: use with Astro, Svelte, React, Vue, or plain HTML.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install rizzo-css
|
|
9
|
+
# or
|
|
10
|
+
pnpm add rizzo-css
|
|
11
|
+
# or
|
|
12
|
+
yarn add rizzo-css
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Use
|
|
16
|
+
|
|
17
|
+
Import the built CSS once in your app (e.g. root layout or main entry):
|
|
18
|
+
|
|
19
|
+
**In a bundler (Vite, Astro, etc.):**
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
import 'rizzo-css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
**In HTML:**
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<link rel="stylesheet" href="node_modules/rizzo-css/dist/rizzo.min.css" />
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Then use the same class names and HTML structure as the [component docs](https://github.com/mingleusa/rizzo-css/tree/main/docs#components). For Astro or Svelte, you can copy the reference components from the [repo](https://github.com/mingleusa/rizzo-css).
|
|
32
|
+
|
|
33
|
+
## Themes
|
|
34
|
+
|
|
35
|
+
Set the theme via `data-theme` on `<html>`:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<html lang="en" data-theme="github-dark-classic">
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Theme IDs and full docs: [Theming](https://github.com/mingleusa/rizzo-css/blob/main/docs/THEMING.md).
|
|
42
|
+
|
|
43
|
+
## Docs
|
|
44
|
+
|
|
45
|
+
Full documentation (components, theming, usage in Astro/Svelte): **[Getting Started](https://github.com/mingleusa/rizzo-css/blob/main/docs/GETTING_STARTED.md#using-rizzo-in-your-project)** in the repo.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
MIT
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-sans:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:"SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--max-height-dropdown:600px;--max-height-modal:32rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:var(--success-text);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:var(--info-text);--selection:oklch(70% 0.15 250deg);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*,
|
|
2
|
+
*::after,
|
|
3
|
+
*::before{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;padding:0} blockquote,body, dd, dl,
|
|
4
|
+
figure, h1, h2, h3, h4, h5, h6, p{margin-block-end:0}
|
|
5
|
+
ol[role="list"],ul[role="list"]{list-style:none}body{line-height:1.5;margin:0;min-height:100vh;padding:0}
|
|
6
|
+
button,h1, h2, h3, h4, h5, h6, input, label{line-height:1.1}h1, h2, h3, h4, h5, h6{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;color:currentcolor;text-decoration-skip-ink:auto}img,
|
|
7
|
+
picture{display:block;max-width:100%} button,input, select,
|
|
8
|
+
textarea{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}body,html{background-color:var(--background);color:var(--text);transition:color var(--theme-transition-duration) ease-out,background-color var(--theme-transition-duration) ease-out,border-color var(--theme-transition-duration) ease-out}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}::-moz-selection{background-color:var(--selection);color:var(--text)}::selection{background-color:var(--selection);color:var(--text)}::-webkit-scrollbar{height:var(--spacing-2);width:var(--spacing-2)}::-webkit-scrollbar-track{background-color:var(--background);border-radius:var(--radius)}::-webkit-scrollbar-thumb{background-color:var(--border);border:var(--border-width) solid var(--background);border-radius:var(--radius);-webkit-transition:background-color var(--transition-base);transition:background-color var(--transition-base)}::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}::-webkit-scrollbar-thumb:active{background-color:var(--accent-hover)}::-webkit-scrollbar-corner{background-color:var(--background)}*{scrollbar-color:var(--border) var(--background);scrollbar-width:thin}.scrollbar-thick ::-webkit-scrollbar,
|
|
9
|
+
.scrollbar-thick::-webkit-scrollbar{height:var(--spacing-6)!important;width:var(--spacing-6)!important}.scrollbar-thick ::-webkit-scrollbar-track{background-color:var(--background);border-radius:var(--radius)}.scrollbar-thick ::-webkit-scrollbar-thumb{background-color:var(--border);border:var(--border-width) solid var(--background);border-radius:var(--radius);-webkit-transition:background-color var(--transition-base);transition:background-color var(--transition-base)}.scrollbar-thick ::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}.scrollbar-thick ::-webkit-scrollbar-thumb:active{background-color:var(--accent-hover)}.scrollbar-thick ::-webkit-scrollbar-corner{background-color:var(--background)}.scrollbar-thick,
|
|
10
|
+
.scrollbar-thick *{scrollbar-color:var(--border) var(--background);scrollbar-width:auto!important}
|
|
11
|
+
.hide-scrollbars ::-webkit-scrollbar,
|
|
12
|
+
.hide-scrollbars::-webkit-scrollbar,.scrollbar-hidden ::-webkit-scrollbar,
|
|
13
|
+
.scrollbar-hidden::-webkit-scrollbar{display:none!important;height:0!important;width:0!important}
|
|
14
|
+
.hide-scrollbars,
|
|
15
|
+
.hide-scrollbars *,.scrollbar-hidden,
|
|
16
|
+
.scrollbar-hidden *{scrollbar-width:none!important;-ms-overflow-style:none}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal)}h1, h2, h3, h4, h5, h6{color:var(--text);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight)}h1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold)}h2{font-size:var(--font-size-3xl)}h2,h3{font-weight:var(--font-weight-bold)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h4,h5{font-weight:var(--font-weight-semibold)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}code{border-radius:var(--radius);padding:var(--spacing-0-125) var(--spacing-1)}code,pre{background-color:var(--background-alt);color:var(--text);font-family:var(--font-family-mono);font-size:var(--font-size-sm)}pre{border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);line-height:var(--line-height-relaxed);overflow-x:auto;padding:var(--spacing-4)}pre code{background-color:transparent;padding:0}.font-sans{font-family:var(--font-family-sans)}.font-serif{font-family:var(--font-family-serif)}.font-mono{font-family:var(--font-family-mono)}.font-light{font-weight:var(--font-weight-light)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.font-extrabold{font-weight:var(--font-weight-extrabold)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.text-5xl{font-size:var(--font-size-5xl)}.text-6xl{font-size:var(--font-size-6xl)}.leading-tight{line-height:var(--line-height-tight)}.leading-snug{line-height:var(--line-height-snug)}.leading-normal{line-height:var(--line-height-normal)}.leading-relaxed{line-height:var(--line-height-relaxed)}.leading-loose{line-height:var(--line-height-loose)}.tracking-tighter{letter-spacing:var(--letter-spacing-tighter)}.tracking-tight{letter-spacing:var(--letter-spacing-tight)}.tracking-normal{letter-spacing:var(--letter-spacing-normal)}.tracking-wide{letter-spacing:var(--letter-spacing-wide)}.tracking-wider{letter-spacing:var(--letter-spacing-wider)}.tracking-widest{letter-spacing:var(--letter-spacing-widest)}.skip-link{background-color:var(--accent);border-radius:0 0 var(--radius-md);clip-path:inset(100% 0 0 0);color:var(--accent-text);font-weight:var(--font-weight-semibold);left:0;overflow:hidden;padding:var(--spacing-3) var(--spacing-4);position:absolute;text-decoration:none;top:calc(var(--spacing-15)*-1);transition:top var(--transition-base);z-index:var(--z-skip-link)}.skip-link:focus{clip-path:none;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset);top:0}.sr-only{border-width:0;clip-path:inset(50%);height:var(--spacing-0-125);margin:calc(var(--spacing-0-125)*-1);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--spacing-0-125)}.sr-only-focusable:focus{clip-path:none;height:auto;margin:inherit;overflow:visible;padding:inherit;position:static;white-space:normal;width:auto}
|
|
17
|
+
*:focus-visible,.focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset);outline-style:solid}.js-focus-visible :focus:not(.focus-visible){outline:none}@media (prefers-contrast:high){*{border-color:currentcolor}
|
|
18
|
+
.btn,button{border-width:var(--outline-width)}}@media (prefers-reduced-motion:reduce){:root{--theme-transition-duration:0s}*,
|
|
19
|
+
*::after,
|
|
20
|
+
*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.reduced-motion{--theme-transition-duration:0s}.reduced-motion *,
|
|
21
|
+
.reduced-motion *::after,
|
|
22
|
+
.reduced-motion *::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}@media (prefers-contrast:high){:root{--border:oklch(50% 0 0deg)}}.high-contrast{--border:oklch(50% 0 0deg)}.high-contrast *{border-color:var(--border);border-style:solid;border-width:var(--border-width)}.focus-within{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
|
|
23
|
+
.btn:disabled,
|
|
24
|
+
[aria-disabled="true"],button:disabled{cursor:not-allowed;opacity:var(--opacity-60);pointer-events:none}.sr-only[aria-live],
|
|
25
|
+
[aria-live].sr-only,[aria-live]:not(.alert, [role="alert"], [role="status"], .toast-container, .toast-container *, .search__results, .search__loading-text, .search__no-results-text){height:var(--spacing-0-125);left:calc(var(--spacing-2500)*-1);overflow:hidden;position:absolute;width:var(--spacing-0-125)}label{color:var(--text);display:block;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-1)}label.required::after{color:var(--error);content:" *";font-weight:var(--font-weight-semibold)}[aria-invalid="true"]{border-color:var(--error);border-width:var(--outline-width)}.error-message{color:var(--error)}.error-message,.success-message{display:block;font-size:var(--font-size-sm);margin-top:var(--spacing-1)}.success-message{color:var(--success)}[aria-busy="true"]{cursor:wait;opacity:.7}[aria-describedby]{position:relative}main:focus{outline:none} [tabindex]:not([tabindex="-1"]),a, button, input, select, textarea{&:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}}.text-contrast{background-color:var(--background);color:var(--text)}th{font-weight:var(--font-weight-semibold)}th,th[scope="col"]{text-align:left}th[scope="row"]{padding-right:var(--spacing-4);text-align:right}
|
|
26
|
+
.btn,button{background-color:var(--accent);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--accent-text);cursor:pointer;font-family:var(--font-family);font-size:inherit;padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}
|
|
27
|
+
.btn:hover,button:hover{background-color:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-text-on-hover)}
|
|
28
|
+
.btn:active,button:active{opacity:var(--opacity-90)}
|
|
29
|
+
.btn:disabled,button:disabled{cursor:not-allowed;opacity:var(--opacity-50)}.btn-primary:disabled:hover{background-color:var(--accent);color:var(--accent-text)}.btn-success:disabled:hover{background-color:var(--success);color:var(--success-text-on-solid)}.btn-warning:disabled:hover{background-color:var(--warning);color:var(--warning-text-on-solid)}.btn-error:disabled:hover{background-color:var(--error);color:var(--error-text-on-solid)}.btn-info:disabled:hover{background-color:var(--info);color:var(--info-text-on-solid)}.btn-primary{background-color:var(--accent);color:var(--accent-text)}.btn-primary:hover{background-color:var(--accent-hover);color:var(--accent-text-on-hover)}.btn-success{background-color:var(--success);color:var(--success-text-on-solid)}.btn-success:hover{background-color:var(--success-hover);color:var(--text-on-solid-hover)}.btn-warning{background-color:var(--warning);color:var(--warning-text-on-solid)}.btn-warning:hover{background-color:var(--warning-hover);color:var(--text-on-solid-hover)}.btn-error{background-color:var(--error);color:var(--error-text-on-solid)}.btn-error:hover{background-color:var(--error-hover);color:var(--text-on-solid-hover)}.btn-info{background-color:var(--info);color:var(--info-text-on-solid)}.btn-info:hover{background-color:var(--info-hover);color:var(--text-on-solid-hover)}.btn-outline{background-color:transparent;border:var(--border-width) solid var(--accent);color:var(--accent)}.btn-outline:hover{background-color:var(--accent);color:var(--accent-text)}
|
|
30
|
+
input[type="date"],
|
|
31
|
+
input[type="datetime-local"],
|
|
32
|
+
input[type="email"],
|
|
33
|
+
input[type="month"],
|
|
34
|
+
input[type="number"],
|
|
35
|
+
input[type="password"],
|
|
36
|
+
input[type="search"],
|
|
37
|
+
input[type="tel"],input[type="text"],
|
|
38
|
+
input[type="time"],
|
|
39
|
+
input[type="url"],
|
|
40
|
+
input[type="week"],
|
|
41
|
+
select,
|
|
42
|
+
textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);padding:var(--spacing-0-625) var(--spacing-3);transition:border-color var(--transition-base),box-shadow var(--transition-base);width:100%}
|
|
43
|
+
input[type="date"]:focus,
|
|
44
|
+
input[type="datetime-local"]:focus,
|
|
45
|
+
input[type="email"]:focus,
|
|
46
|
+
input[type="month"]:focus,
|
|
47
|
+
input[type="number"]:focus,
|
|
48
|
+
input[type="password"]:focus,
|
|
49
|
+
input[type="search"]:focus,
|
|
50
|
+
input[type="tel"]:focus,input[type="text"]:focus,
|
|
51
|
+
input[type="time"]:focus,
|
|
52
|
+
input[type="url"]:focus,
|
|
53
|
+
input[type="week"]:focus,
|
|
54
|
+
select:focus,
|
|
55
|
+
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 var(--spacing-3) oklch(from var(--accent) l c h/10%);outline:none}
|
|
56
|
+
input[type="date"]:disabled,
|
|
57
|
+
input[type="datetime-local"]:disabled,
|
|
58
|
+
input[type="email"]:disabled,
|
|
59
|
+
input[type="month"]:disabled,
|
|
60
|
+
input[type="number"]:disabled,
|
|
61
|
+
input[type="password"]:disabled,
|
|
62
|
+
input[type="search"]:disabled,
|
|
63
|
+
input[type="tel"]:disabled,input[type="text"]:disabled,
|
|
64
|
+
input[type="time"]:disabled,
|
|
65
|
+
input[type="url"]:disabled,
|
|
66
|
+
input[type="week"]:disabled,
|
|
67
|
+
select:disabled,
|
|
68
|
+
textarea:disabled{background-color:var(--background);cursor:not-allowed;opacity:var(--opacity-60)}input::-moz-placeholder, textarea::-moz-placeholder{color:var(--text-dim);opacity:var(--opacity-70)}input::placeholder,
|
|
69
|
+
textarea::placeholder{color:var(--text-dim);opacity:var(--opacity-70)}input[type="number"]{-moz-appearance:textfield;padding-right:var(--spacing-10);position:relative}input[type="number"]::-webkit-inner-spin-button,
|
|
70
|
+
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;background-color:var(--text-dim);background-image:none;border-radius:var(--radius-sm);cursor:pointer;height:var(--spacing-5);margin:0;opacity:1;position:relative;-webkit-transition:background-color var(--transition-base);transition:background-color var(--transition-base);width:var(--spacing-5)}input[type="number"]::-webkit-inner-spin-button{background:linear-gradient(to bottom,transparent 0,transparent 45%,var(--text-dim) 45%,var(--text-dim) 55%,transparent 55%),linear-gradient(to top,transparent 0,transparent 45%,var(--text-dim) 45%,var(--text-dim) 55%,transparent 55%);background-position:center var(--spacing-0-125),center var(--spacing-0-625);background-repeat:no-repeat;background-size:var(--spacing-2) var(--spacing-0-625),var(--spacing-2) var(--spacing-0-625);opacity:.7}input[type="number"]:hover::-webkit-inner-spin-button{background:linear-gradient(to bottom,transparent 0,transparent 45%,var(--accent) 45%,var(--accent) 55%,transparent 55%),linear-gradient(to top,transparent 0,transparent 45%,var(--accent) 45%,var(--accent) 55%,transparent 55%);background-position:center var(--spacing-0-125),center var(--spacing-0-625);background-repeat:no-repeat;background-size:var(--spacing-2) var(--spacing-0-625),var(--spacing-2) var(--spacing-0-625);opacity:1}input[type="number"]:active::-webkit-inner-spin-button{background:linear-gradient(to bottom,transparent 0,transparent 45%,var(--accent-hover) 45%,var(--accent-hover) 55%,transparent 55%),linear-gradient(to top,transparent 0,transparent 45%,var(--accent-hover) 45%,var(--accent-hover) 55%,transparent 55%);background-position:center var(--spacing-0-125),center var(--spacing-0-625);background-repeat:no-repeat;background-size:var(--spacing-2) var(--spacing-0-625),var(--spacing-2) var(--spacing-0-625)}input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}textarea{font-family:var(--font-family);min-height:var(--spacing-24);resize:vertical}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 4 4 4 4-4'/%3E%3C/svg%3E");background-position:right var(--spacing-3) center;background-repeat:no-repeat;background-size:1rem;padding-right:var(--spacing-10)}select:focus{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 4 4 4 4-4'/%3E%3C/svg%3E")}.form-group{margin-bottom:var(--spacing-6)}.form-group__label{color:var(--text);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-2)}.form-group__label.required::after{color:var(--error);content:" *";font-weight:var(--font-weight-semibold)}.form-group__help{color:var(--text-dim);display:block;font-size:var(--font-size-xs);margin-top:var(--spacing-0-375)}.form-input--error,
|
|
71
|
+
.form-input[aria-invalid="true"]{border-color:var(--error);border-width:var(--outline-width)}.form-input--error:focus,
|
|
72
|
+
.form-input[aria-invalid="true"]:focus{border-color:var(--error);box-shadow:0 0 0 var(--spacing-3) oklch(from var(--error) l c h/10%)}.form-input--success{border-color:var(--success);border-width:var(--outline-width)}.form-input--success:focus{border-color:var(--success);box-shadow:0 0 0 var(--spacing-3) oklch(from var(--success) l c h/10%)}.form-input--sm{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-0-625)}.form-input--lg{font-size:var(--font-size-lg);padding:var(--spacing-3) var(--spacing-4)}input[type="checkbox"],
|
|
73
|
+
input[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-alt);border:var(--outline-width) solid var(--border);cursor:pointer;flex-shrink:0;height:var(--spacing-5);margin:0 var(--spacing-2) 0 0;transition:border-color var(--transition-base),background-color var(--transition-base);width:var(--spacing-5)}input[type="checkbox"]{border-radius:var(--radius)}input[type="radio"]{border-radius:var(--radius-circle)}input[type="checkbox"]:checked,
|
|
74
|
+
input[type="radio"]:checked{background-color:var(--accent);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 2 2 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:var(--spacing-0-875);border-color:var(--accent)}input[type="radio"]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='2' fill='%23fff'/%3E%3C/svg%3E");background-size:var(--spacing-2)}input[type="checkbox"]:focus,
|
|
75
|
+
input[type="radio"]:focus{box-shadow:0 0 0 var(--spacing-3) oklch(from var(--accent) l c h/10%);outline:none}input[type="checkbox"]:disabled,
|
|
76
|
+
input[type="radio"]:disabled{cursor:not-allowed;opacity:var(--opacity-60)}.checkbox-label,
|
|
77
|
+
.radio-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);-webkit-user-select:none;-moz-user-select:none;user-select:none}.checkbox-label:hover,
|
|
78
|
+
.radio-label:hover{color:var(--accent)}.checkbox-label:has(input:disabled),
|
|
79
|
+
.radio-label:has(input:disabled){cursor:not-allowed;opacity:var(--opacity-60)}.checkbox-label:has(input:disabled):hover,
|
|
80
|
+
.radio-label:has(input:disabled):hover{color:var(--text)}.checkbox-group,
|
|
81
|
+
.radio-group{display:flex;flex-direction:column;gap:var(--spacing-3)}.checkbox-group--inline,
|
|
82
|
+
.radio-group--inline{flex-flow:row wrap}input[type="file"]{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-0-625) var(--spacing-3);width:100%}input[type="file"]:focus{border-color:var(--accent);box-shadow:0 0 0 var(--spacing-3) oklch(from var(--accent) l c h/10%);outline:none}input[type="file"]:disabled{cursor:not-allowed;opacity:var(--opacity-60)}input[type="range"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-alt);border-radius:var(--radius);height:var(--spacing-2);outline:none;width:100%}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background-alt);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--accent);cursor:pointer;height:var(--spacing-5);width:var(--spacing-5)}input[type="range"]::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background-alt);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--accent);cursor:pointer;height:var(--spacing-5);width:var(--spacing-5)}input[type="range"]:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--spacing-0-125) var(--accent),0 0 0 var(--spacing-1) oklch(from var(--accent) l c h/10%)}input[type="range"]:focus::-moz-range-thumb{box-shadow:0 0 0 var(--spacing-0-125) var(--accent),0 0 0 var(--spacing-1) oklch(from var(--accent) l c h/10%)}fieldset{border:var(--border-width) solid var(--border);border-radius:var(--radius-md);margin:0 0 var(--spacing-6);padding:var(--spacing-4)}legend{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);padding:0 var(--spacing-2)}.form-error{color:var(--error)}.form-error,.form-success{display:block;font-size:var(--font-size-xs);margin-top:var(--spacing-0-375)}.form-success{color:var(--success)}.form-row{display:flex;gap:var(--spacing-4);margin-bottom:var(--spacing-6)}.form-row .form-group{flex:1;margin-bottom:0}@media (width <= 640px){.form-row{flex-direction:column;gap:var(--spacing-0)}}.container{margin:0 auto;max-width:var(--container-default);padding:0 var(--spacing-4)}.card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;flex-direction:column;padding:var(--spacing-6);transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base)}.card--elevated{border:none;box-shadow:var(--shadow-md)}.card--elevated:hover{box-shadow:var(--shadow-lg);transform:translateY(calc(var(--spacing-0-125)*-1))}.card--outlined{background-color:transparent;border:var(--outline-width) solid var(--border)}.card--outlined:hover{border-color:var(--accent)}.card--filled{background-color:var(--background);border:var(--border-width) solid var(--border)}.card__header{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-4)}.card__header:empty{display:none}.card__body{flex:1}.card__body:empty{display:none}.card__footer{border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-4);padding-top:var(--spacing-4)}.card__footer:empty{display:none}.card__image{border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:block;height:auto;margin:calc(var(--spacing-6)*-1) calc(var(--spacing-6)*-1) var(--spacing-6) calc(var(--spacing-6)*-1);-o-object-fit:cover;object-fit:cover;width:100%}.card:has(.card__image){padding-top:0}.card__image + .card__header{margin-top:0;padding-top:0}.card__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.card__subtitle{color:var(--text-dim);font-size:var(--font-size-sm);margin:0}section{background-color:var(--background);color:var(--text)}.border{border:var(--border-width) solid var(--border)}.border-top{border-top:var(--border-width) solid var(--border)}.border-bottom{border-bottom:var(--border-width) solid var(--border)}.border-left{border-left:var(--border-width) solid var(--border)}.border-right{border-right:var(--border-width) solid var(--border)}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:.75rem}.m-4{margin:1rem}.m-5{margin:1.25rem}.m-6{margin:1.5rem}.m-8{margin:2rem}.m-10{margin:2.5rem}.m-12{margin:3rem}.m-16{margin:4rem}.m-20{margin:5rem}.m-24{margin:6rem}.m-auto{margin:auto}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-auto{margin-top:auto}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-5{margin-right:1.25rem}.mr-6{margin-right:1.5rem}.mr-8{margin-right:2rem}.mr-10{margin-right:2.5rem}.mr-12{margin-right:3rem}.mr-16{margin-right:4rem}.mr-20{margin-right:5rem}.mr-24{margin-right:6rem}.mr-auto{margin-right:auto}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-auto{margin-bottom:auto}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.ml-6{margin-left:1.5rem}.ml-8{margin-left:2rem}.ml-10{margin-left:2.5rem}.ml-12{margin-left:3rem}.ml-16{margin-left:4rem}.ml-20{margin-left:5rem}.ml-24{margin-left:6rem}.ml-auto{margin-left:auto}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-10{margin-left:2.5rem;margin-right:2.5rem}.mx-12{margin-left:3rem;margin-right:3rem}.mx-16{margin-left:4rem;margin-right:4rem}.mx-20{margin-left:5rem;margin-right:5rem}.mx-24{margin-left:6rem;margin-right:6rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-3{margin-bottom:.75rem;margin-top:.75rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.my-8{margin-bottom:2rem;margin-top:2rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.my-12{margin-bottom:3rem;margin-top:3rem}.my-16{margin-bottom:4rem;margin-top:4rem}.my-20{margin-bottom:5rem;margin-top:5rem}.my-24{margin-bottom:6rem;margin-top:6rem}.my-auto{margin-bottom:auto;margin-top:auto}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-16{padding:4rem}.p-20{padding:5rem}.p-24{padding:6rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}.pr-6{padding-right:1.5rem}.pr-8{padding-right:2rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-16{padding-right:4rem}.pr-20{padding-right:5rem}.pr-24{padding-right:6rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-16{padding-left:4rem}.pl-20{padding-left:5rem}.pl-24{padding-left:6rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-16{padding-left:4rem;padding-right:4rem}.px-20{padding-left:5rem;padding-right:5rem}.px-24{padding-left:6rem;padding-right:6rem}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-20{padding-bottom:5rem;padding-top:5rem}.py-24{padding-bottom:6rem;padding-top:6rem}.container-sm{max-width:640px}.container-md,.container-sm{margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.container-md{max-width:768px}.container-lg{max-width:1024px}.container-lg,.container-xl{margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.container-xl{max-width:1280px}.container-2xl{max-width:1536px}.container-2xl,.container-full{margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.container-full{max-width:100%}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.w-fit{width:-moz-fit-content;width:fit-content}.w-max{width:-moz-max-content;width:max-content}.w-min{width:-moz-min-content;width:min-content}.w-0{width:0}.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-56{width:14rem}.w-64{width:16rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.h-fit{height:-moz-fit-content;height:fit-content}.h-max{height:-moz-max-content;height:max-content}.h-min{height:-moz-min-content;height:min-content}.h-0{height:0}.h-1{height:.25rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-32{height:8rem}.h-40{height:10rem}.h-48{height:12rem}.h-56{height:14rem}.h-64{height:16rem}.min-w-0{min-width:0}.min-w-full{min-width:100%}.min-w-min{min-width:-moz-min-content;min-width:min-content}.min-w-max{min-width:-moz-max-content;min-width:max-content}.min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.min-h-0{min-height:0}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.min-h-fit{min-height:-moz-fit-content;min-height:fit-content}.min-h-max{min-height:-moz-max-content;min-height:max-content}.min-h-min{min-height:-moz-min-content;min-height:min-content}.max-w-none{max-width:none}.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-screen-sm{max-width:640px}.max-w-screen-md{max-width:768px}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.max-w-screen-2xl{max-width:1536px}.max-h-none{max-height:none}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.max-h-fit{max-height:-moz-fit-content;max-height:fit-content}.max-h-max{max-height:-moz-max-content;max-height:max-content}.max-h-min{max-height:-moz-min-content;max-height:min-content}.max-h-0{max-height:0}.max-h-1{max-height:.25rem}.max-h-2{max-height:.5rem}.max-h-3{max-height:.75rem}.max-h-4{max-height:1rem}.max-h-5{max-height:1.25rem}.max-h-6{max-height:1.5rem}.max-h-8{max-height:2rem}.max-h-10{max-height:2.5rem}.max-h-12{max-height:3rem}.max-h-16{max-height:4rem}.max-h-20{max-height:5rem}.max-h-24{max-height:6rem}.max-h-32{max-height:8rem}.max-h-40{max-height:10rem}.max-h-48{max-height:12rem}.max-h-56{max-height:14rem}.max-h-64{max-height:16rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.table{display:table}.table-row{display:table-row}.table-cell{display:table-cell}.contents{display:contents}.list-item{display:list-item}.hidden{display:none}@media (width >= 640px){.sm\:block{display:block}.sm\:inline-block{display:inline-block}.sm\:inline{display:inline}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:grid{display:grid}.sm\:inline-grid{display:inline-grid}.sm\:hidden{display:none}}@media (width >= 768px){.md\:block{display:block}.md\:inline-block{display:inline-block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:inline-grid{display:inline-grid}.md\:hidden{display:none}}@media (width >= 1024px){.lg\:block{display:block}.lg\:inline-block{display:inline-block}.lg\:inline{display:inline}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:grid{display:grid}.lg\:inline-grid{display:inline-grid}.lg\:hidden{display:none}}@media (width >= 1280px){.xl\:block{display:block}.xl\:inline-block{display:inline-block}.xl\:inline{display:inline}.xl\:flex{display:flex}.xl\:inline-flex{display:inline-flex}.xl\:grid{display:grid}.xl\:inline-grid{display:inline-grid}.xl\:hidden{display:none}}@media (width >= 1536px){.xxl\:block{display:block}.xxl\:inline-block{display:inline-block}.xxl\:inline{display:inline}.xxl\:flex{display:flex}.xxl\:inline-flex{display:inline-flex}.xxl\:grid{display:grid}.xxl\:inline-grid{display:inline-grid}.xxl\:hidden{display:none}}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.z-dropdown{z-index:1000}.z-dropdown-submenu{z-index:1001}.z-modal{z-index:2000}.z-modal-backdrop{z-index:1999}.z-tooltip{z-index:3000}.z-toast{z-index:4000}.z-navbar{z-index:5000}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-t-sm{border-top-left-radius:.125rem;border-top-right-radius:.125rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-t-full{border-top-left-radius:9999px;border-top-right-radius:9999px}.rounded-r-none{border-bottom-right-radius:0;border-top-right-radius:0}.rounded-r-sm{border-bottom-right-radius:.125rem;border-top-right-radius:.125rem}.rounded-r{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.rounded-r-lg{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.rounded-r-xl{border-bottom-right-radius:.75rem;border-top-right-radius:.75rem}.rounded-r-2xl{border-bottom-right-radius:1rem;border-top-right-radius:1rem}.rounded-r-full{border-bottom-right-radius:9999px;border-top-right-radius:9999px}.rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.rounded-b-sm{border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem}.rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-b-xl{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.rounded-b-full{border-bottom-left-radius:9999px;border-bottom-right-radius:9999px}.rounded-l-none{border-bottom-left-radius:0;border-top-left-radius:0}.rounded-l-sm{border-bottom-left-radius:.125rem;border-top-left-radius:.125rem}.rounded-l{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.rounded-l-xl{border-bottom-left-radius:.75rem;border-top-left-radius:.75rem}.rounded-l-2xl{border-bottom-left-radius:1rem;border-top-left-radius:1rem}.rounded-l-full{border-bottom-left-radius:9999px;border-top-left-radius:9999px}.border-0{border-width:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-8{border-width:8px}.border-t-0{border-top-width:0}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-t-8{border-top-width:8px}.border-r-0{border-right-width:0}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-r-4{border-right-width:4px}.border-r-8{border-right-width:8px}.border-b-0{border-bottom-width:0}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-b-4{border-bottom-width:4px}.border-b-8{border-bottom-width:8px}.border-l-0{border-left-width:0}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-l-8{border-left-width:8px}.border-transparent{border-color:transparent}.border-color{border-color:var(--border)}.border-accent{border-color:var(--accent)}.border-success{border-color:var(--success)}.border-warning{border-color:var(--warning)}.border-error{border-color:var(--error)}.border-info{border-color:var(--info)}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.self-baseline{align-self:baseline}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.grow{flex-grow:1}.grow-0{flex-grow:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-none{grid-template-columns:none}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.grid-rows-none{grid-template-rows:none}.col-auto{grid-column:auto}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-full{grid-column:1/-1}.row-auto{grid-row:auto}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.row-span-4{grid-row:span 4/span 4}.row-span-5{grid-row:span 5/span 5}.row-span-6{grid-row:span 6/span 6}.row-span-full{grid-row:1/-1}.gap-0{gap:0}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-5{gap:var(--spacing-5)}.gap-6{gap:var(--spacing-6)}.gap-8{gap:var(--spacing-8)}.gap-10{gap:var(--spacing-10)}.gap-12{gap:var(--spacing-12)}.gap-16{gap:var(--spacing-16)}.gap-20{gap:var(--spacing-20)}.gap-24{gap:var(--spacing-24)}.gap-x-0{-moz-column-gap:0;column-gap:0}.gap-x-1{-moz-column-gap:var(--spacing-1);column-gap:var(--spacing-1)}.gap-x-2{-moz-column-gap:var(--spacing-2);column-gap:var(--spacing-2)}.gap-x-3{-moz-column-gap:var(--spacing-3);column-gap:var(--spacing-3)}.gap-x-4{-moz-column-gap:var(--spacing-4);column-gap:var(--spacing-4)}.gap-x-5{-moz-column-gap:var(--spacing-5);column-gap:var(--spacing-5)}.gap-x-6{-moz-column-gap:var(--spacing-6);column-gap:var(--spacing-6)}.gap-x-8{-moz-column-gap:var(--spacing-8);column-gap:var(--spacing-8)}.gap-x-10{-moz-column-gap:var(--spacing-10);column-gap:var(--spacing-10)}.gap-x-12{-moz-column-gap:var(--spacing-12);column-gap:var(--spacing-12)}.gap-x-16{-moz-column-gap:var(--spacing-16);column-gap:var(--spacing-16)}.gap-x-20{-moz-column-gap:var(--spacing-20);column-gap:var(--spacing-20)}.gap-x-24{-moz-column-gap:var(--spacing-24);column-gap:var(--spacing-24)}.gap-y-0{row-gap:0}.gap-y-1{row-gap:var(--spacing-1)}.gap-y-2{row-gap:var(--spacing-2)}.gap-y-3{row-gap:var(--spacing-3)}.gap-y-4{row-gap:var(--spacing-4)}.gap-y-5{row-gap:var(--spacing-5)}.gap-y-6{row-gap:var(--spacing-6)}.gap-y-8{row-gap:var(--spacing-8)}.gap-y-10{row-gap:var(--spacing-10)}.gap-y-12{row-gap:var(--spacing-12)}.gap-y-16{row-gap:var(--spacing-16)}.gap-y-20{row-gap:var(--spacing-20)}.gap-y-24{row-gap:var(--spacing-24)}.transition-none{transition-property:none}.transition-all{transition-property:all}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}.transition-opacity{transition-property:opacity}.transition-shadow{transition-property:box-shadow}.transition-transform{transition-property:transform}.duration-75{transition-duration:75ms}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.duration-1000{transition-duration:1s}.ease-linear{transition-timing-function:linear}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.delay-75{transition-delay:75ms}.delay-100{transition-delay:.1s}.delay-150{transition-delay:.15s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-500{transition-delay:.5s}.delay-700{transition-delay:.7s}.delay-1000{transition-delay:1s}.transition-fast{transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-base{transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-slow{transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion:reduce){
|
|
83
|
+
.transition,
|
|
84
|
+
.transition-all,
|
|
85
|
+
.transition-base,
|
|
86
|
+
.transition-colors,
|
|
87
|
+
.transition-fast,.transition-none,
|
|
88
|
+
.transition-opacity,
|
|
89
|
+
.transition-shadow,
|
|
90
|
+
.transition-slow,
|
|
91
|
+
.transition-transform,
|
|
92
|
+
[class*="delay-"],
|
|
93
|
+
[class*="duration-"]{transition-delay:0s!important;transition-duration:.01ms!important}}.bg-primary{background-color:var(--background)}.bg-alt{background-color:var(--background-alt)}.bg-accent{background-color:var(--accent)}.bg-success{background-color:var(--success)}.bg-warning{background-color:var(--warning)}.bg-error{background-color:var(--error)}.bg-info{background-color:var(--info)}.bg-transparent{background-color:transparent}.text-primary{color:var(--text)}.text-dim{color:var(--text-dim)}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.text-info{color:var(--info)}.text-on-accent{color:var(--accent-text)}.text-on-success{color:var(--success-text)}.text-on-warning{color:var(--warning-text)}.text-on-error{color:var(--error-text)}.text-on-info{color:var(--info-text)}:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}@media (prefers-reduced-motion:reduce){*,
|
|
94
|
+
*::after,
|
|
95
|
+
*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){:root{--border:oklch(from var(--border) calc(l - 10%) c h)}*{border-width:2px}}.navbar{backdrop-filter:blur(var(--blur));background-color:oklch(from var(--background-alt) l c h/90%);box-sizing:border-box;left:0;margin:0;max-width:100%;overflow:visible;padding:0;position:sticky;right:0;top:0;width:100%;z-index:var(--z-navbar)}@media (width <= 1023px){.navbar--search-open{border-bottom:0 transparent!important;box-shadow:none!important}.navbar--search-open::after{display:none!important}}.navbar--menu-open{z-index:calc(var(--z-navbar) - 1)}.navbar--search-open{z-index:calc(var(--z-navbar-search-overlay) - 1)}.navbar:not(.navbar--menu-open, .navbar--search-open){z-index:var(--z-navbar)}@media (width <= 1023px){.navbar--menu-open{z-index:var(--z-navbar-mobile-menu-open)}.navbar--search-open{z-index:var(--z-navbar)}}.navbar__container{align-items:center;box-sizing:border-box;display:flex;gap:var(--spacing-4);justify-content:space-between;margin:0 auto;max-width:var(--container-default);min-height:var(--spacing-16);min-width:0;padding:0 var(--spacing-4);width:100%}.navbar::after{background-color:var(--border);bottom:0;content:"";height:var(--spacing-0-125);left:0;pointer-events:none;position:absolute;right:0;width:100%;z-index:var(--z-base)}@media (width <= 1023px){.navbar--search-open::after{display:none!important}}.navbar__actions-desktop{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-4);margin-left:auto;order:999}.navbar__brand{align-items:center;display:flex;gap:var(--spacing-3)}.navbar__logo{height:var(--spacing-8);width:auto}.navbar__brand-link{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);text-decoration:none;transition:color var(--transition-base)}.navbar__brand-link:hover{color:var(--accent)}.navbar__brand-link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:none;flex-direction:column;gap:var(--spacing-1);justify-content:center;padding:var(--spacing-2)}.navbar__toggle:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375);height:calc(var(--spacing-3) + var(--spacing-0-125));position:relative;width:var(--spacing-6)}.navbar__toggle-icon span{background-color:var(--text);border-radius:var(--spacing-0-125);display:block;height:var(--spacing-0-125);position:absolute;transform-origin:center;transition:transform var(--transition-slow) ease,opacity var(--transition-base) ease;width:100%}.navbar__toggle-icon span:nth-child(1){top:0}.navbar__toggle-icon span:nth-child(2){top:50%;transform:translateY(-50%)}.navbar__toggle-icon span:nth-child(3){bottom:0}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(0)}.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}.navbar__menu{align-items:center;display:flex;flex:1;gap:var(--spacing-8);justify-content:flex-start;list-style:none;margin:0;margin-left:var(--spacing-4);padding:0}.navbar__item,.navbar__item--has-dropdown,.navbar__link{position:relative}.navbar__link{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);gap:var(--spacing-0-375);padding:var(--spacing-2) 0;text-decoration:none;transition:color var(--transition-base)}button.navbar__link,
|
|
96
|
+
div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-align:left}div.navbar__sublink{cursor:pointer}.navbar__dropdown-icon{color:inherit;flex-shrink:0;height:var(--spacing-3);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}.navbar__item--has-dropdown:hover .navbar__dropdown-icon,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__dropdown-icon{transform:rotate(180deg)}.navbar__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);left:0;list-style:none;margin:0;max-width:var(--spacing-80);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-2) 0;position:absolute;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}@media (width > 1023px){.navbar__submenu--components{display:block;max-width:var(--spacing-96);min-width:var(--spacing-96);padding:var(--spacing-3);white-space:normal;width:var(--spacing-96)}.navbar__submenu--components > li{display:block;margin:0;padding:0}.navbar__submenu--components .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--components .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--components .navbar__submenu-components-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--components .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes{display:block;max-width:var(--spacing-105);min-width:var(--spacing-105);padding:var(--spacing-3);white-space:normal;width:var(--spacing-105)}.navbar__submenu--themes > li{display:block;margin:0;padding:0}.navbar__submenu--themes .navbar__submenu-overview{border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink--overview{box-sizing:border-box;display:block;padding:var(--spacing-0-625) var(--spacing-4);width:100%}.navbar__submenu--themes .navbar__submenu-themes-grid{display:grid;gap:0 var(--spacing-2);grid-template-columns:1fr 1fr;min-width:0}.navbar__submenu--themes .navbar__submenu-column{display:flex;flex-direction:column;gap:0;min-width:0}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.05em;margin-bottom:var(--spacing-0-625);padding:var(--spacing-0-625) var(--spacing-4);text-transform:uppercase}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--spacing-0-625) var(--spacing-4);text-overflow:ellipsis;white-space:nowrap}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}}
|
|
97
|
+
.navbar__item--has-dropdown:hover .navbar__submenu,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{opacity:1;transform:translateY(0);visibility:visible}.navbar__sublink{color:var(--text);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);padding:var(--spacing-0-625) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),color var(--transition-base)}.navbar__sublink:hover,.navbar__sublink[aria-current="page"]{background-color:var(--background);color:var(--accent)}.navbar__sublink[aria-current="page"]{font-weight:var(--font-weight-medium)}.navbar__sublink:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.navbar__link:hover{color:var(--accent)}.navbar__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__link::after{background-color:var(--accent);bottom:0;content:"";height:var(--spacing-0-125);left:0;position:absolute;transition:width var(--transition-slow);width:0}
|
|
98
|
+
.navbar__link:focus-visible::after,.navbar__link:hover::after,
|
|
99
|
+
.navbar__link[aria-current="page"]::after{width:100%}.navbar__link[aria-current="page"]{color:var(--accent)}.navbar__actions,.navbar__actions .search{display:none}.navbar__settings-btn{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);min-width:-moz-fit-content;min-width:fit-content;padding:var(--spacing-2) var(--spacing-6);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__settings-btn:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.navbar__settings-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__settings-icon{flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.navbar__settings-label{font-size:var(--font-size-sm)}@media (width <= 1023px){.navbar{overflow-x:clip}.navbar__container{gap:var(--spacing-2);min-width:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.navbar__brand{flex-shrink:1;min-width:0;order:0;overflow:hidden}.navbar__brand-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__toggle{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);display:flex;margin-left:var(--spacing-2);margin-right:0;min-height:var(--touch-target-min);min-width:var(--touch-target-min);order:1;padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__toggle:hover{background-color:var(--background);border-color:var(--accent)}.navbar__toggle-icon{height:var(--spacing-5)!important;width:var(--spacing-5)!important}.navbar__toggle-icon span{border-radius:var(--radius-sm);height:calc(var(--spacing-0-125)*1.5)!important}.navbar__menu{align-items:stretch;background-color:var(--background-alt);border-top:none;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;gap:var(--spacing-0);left:0;margin:0;max-height:0;max-width:100%;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;z-index:var(--z-navbar-mobile-menu)}.navbar__menu--open{border-bottom:none!important;left:0;max-height:var(--vh-80);opacity:1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) 0;pointer-events:auto;position:fixed;right:0;scroll-behavior:auto;top:var(--spacing-16);transform:translateZ(0);transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-in),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;will-change:scroll-position;z-index:var(--z-navbar-mobile-menu-open)}.navbar__menu .navbar__item{contain:layout;margin:0;max-width:100%;padding:0;width:100%}.navbar__menu:not(.navbar__menu--open){padding:0;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic)}.navbar__menu--open .navbar__item:last-of-type .navbar__link{border-bottom:none!important}.navbar__item{width:100%}.navbar__link{align-items:center;border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:flex;justify-content:space-between;margin:0;max-width:100%;min-height:var(--touch-target-min);min-width:0;overflow-wrap:break-word;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);transition:background-color var(--transition-base) ease,color var(--transition-base) ease;width:100%}.navbar__link .navbar__dropdown-icon{display:block!important;flex-shrink:0!important;height:var(--spacing-3)!important;margin-left:var(--spacing-2);margin-right:var(--spacing-4);opacity:1!important;transition:transform var(--transition-base) ease-out;visibility:visible!important;width:var(--spacing-3)!important}.navbar__submenu{background-color:var(--background);border:none;border-top:var(--border-width) solid var(--border);box-shadow:none;contain:layout;grid-template-columns:none!important;list-style:none;margin:0!important;max-height:0;max-width:100%!important;opacity:1;overflow:hidden;padding:0!important;position:static;transform:none;transition:max-height .25s cubic-bezier(.4,0,.2,1);visibility:visible;width:100%!important}.navbar__submenu,.navbar__submenu--components .navbar__submenu-components-grid{display:block!important}.navbar__submenu--components .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{max-height:var(--max-height-navbar-submenu);overflow:visible;padding:0!important}@media (prefers-reduced-motion:reduce){.navbar__menu,.navbar__menu--open,.navbar__submenu{transition:none}}.navbar__submenu li{padding:0!important}.navbar__sublink,.navbar__submenu li{display:block!important;margin:0!important;max-width:100%!important;width:100%!important}.navbar__sublink{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box!important;min-height:var(--touch-target-min)!important;min-width:0!important;overflow-wrap:break-word!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__sublink:last-child{border-bottom:none}.navbar__submenu--themes .navbar__submenu-themes-grid{display:block!important}.navbar__submenu--themes .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:block;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-0-625);margin-top:var(--spacing-2);padding-bottom:var(--spacing-0-625);padding-left:var(--spacing-10);padding-right:var(--spacing-5);width:100%}.navbar__submenu--themes .navbar__submenu-column:first-of-type .navbar__submenu-column-label{margin-top:0}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex!important;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.navbar__item:last-of-type .navbar__link{border-bottom:var(--border-width) solid var(--border)}.navbar__actions-desktop .navbar__settings-btn{align-items:center;display:flex;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}.navbar__actions-desktop .navbar__settings-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop .search__trigger{justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}
|
|
100
|
+
.navbar__actions-desktop .search__kbd,.navbar__actions-desktop .search__trigger-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop{display:flex;flex-shrink:0;gap:var(--spacing-2);margin-left:auto;margin-right:0;min-width:0;order:2}.search__panel{z-index:var(--z-navbar-mobile-search-panel)}.search__overlay{z-index:var(--z-navbar-mobile-search-overlay)}}.theme-switcher{display:inline-block;position:relative;width:100%}.settings .theme-switcher{width:100%}.settings .theme-switcher__trigger{justify-content:space-between;width:100%}.settings .theme-switcher__menu{left:0;min-width:auto;position:absolute;right:0;top:calc(100% + var(--spacing-2));z-index:var(--z-dropdown)}.theme-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base)}.theme-switcher__label-wrapper{align-items:center;display:flex;gap:var(--spacing-2)}.theme-switcher__label-icon{align-items:center;display:flex;flex-shrink:0;height:var(--spacing-5);justify-content:center;width:var(--spacing-5)}.theme-switcher__label-icon svg{height:100%;width:100%}.theme-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.theme-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.theme-switcher__trigger[aria-expanded="true"] .theme-switcher__icon{transform:rotate(180deg)}.theme-switcher__icon{flex-shrink:0;transition:transform var(--transition-base)}.theme-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--spacing-64);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;z-index:var(--z-dropdown)}.theme-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.theme-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.theme-switcher__preview{background-color:var(--background);border-left:var(--border-width) solid var(--border);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);opacity:0;padding:var(--spacing-4);pointer-events:none;transition:opacity var(--transition-fast);width:var(--spacing-32)}.theme-switcher__preview[aria-hidden="false"]{opacity:1}.theme-switcher__preview-header{color:var(--preview-accent,var(--text-dim));font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:1.2;margin:0;min-height:1.25em;overflow-wrap:break-word;padding:0;text-transform:uppercase}.theme-switcher__preview-swatch-wrap{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px oklch(0 0 0deg/6%);padding:var(--spacing-1)}.theme-switcher__preview-swatch{background-color:var(--background);border-radius:var(--radius);height:var(--spacing-10);min-height:var(--spacing-10);transition:background-color var(--transition-fast);width:100%}.theme-switcher__preview-accent{background-color:var(--preview-accent,var(--accent));border-radius:var(--radius-full);flex-shrink:0;height:var(--spacing-2);transition:background-color var(--transition-fast);width:100%}@media (width <= 480px){.theme-switcher__preview{display:none}}.framework-switcher{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-3) 0}.framework-switcher__label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.framework-switcher__segmented{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:inset 0 1px 2px oklch(from var(--shadow-color) l c h/8%);display:inline-flex;padding:var(--spacing-0-5)}.framework-switcher__segment{align-items:center;border-radius:var(--radius-md);color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;min-width:var(--spacing-20);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}.framework-switcher__segment--first{border-radius:var(--radius-md) 0 0 var(--radius-md)}.framework-switcher__segment--last{border-radius:0 var(--radius-md) var(--radius-md) 0}.framework-switcher__segment:only-child{border-radius:var(--radius-md)}.framework-switcher__segment:hover:not(.framework-switcher__segment--current){background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.framework-switcher__segment--current{background-color:var(--accent);box-shadow:var(--shadow-sm);color:var(--accent-text)}.framework-switcher__segment--current:hover{background-color:var(--accent-hover);color:var(--accent-text)}.theme-switcher__group{padding:var(--spacing-3) 0}.theme-switcher__group-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--spacing-1);padding:var(--spacing-2) var(--spacing-4);text-transform:uppercase}.theme-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
|
|
101
|
+
.theme-switcher__option:focus-visible,.theme-switcher__option:hover{background-color:var(--background);color:var(--text);outline:none}.theme-switcher__option:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.theme-switcher__option-icon{flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.theme-switcher__option--active,
|
|
102
|
+
.theme-switcher__option--active:focus-visible,
|
|
103
|
+
.theme-switcher__option--active:hover{background-color:var(--theme-bg,var(--background));border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.theme-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 640px){.theme-switcher__menu{left:0;right:auto}}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out)}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-width:var(--spacing-105);overflow-y:auto;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-6)}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--spacing-48)}
|
|
104
|
+
.reduced-motion .modal,.reduced-motion .modal__overlay{transition:none}@media (width <= 640px){.modal{bottom:auto;left:auto;margin:var(--spacing-4);max-height:95vh;max-width:95vw;right:auto;top:auto}.modal,.modal[aria-hidden="false"]{transform:none}
|
|
105
|
+
.modal__body,
|
|
106
|
+
.modal__footer,.modal__header{padding:var(--spacing-4)}}.copy-to-clipboard{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.alert{align-items:flex-start;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base)}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/20%);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:oklch(from var(--success) l c h/10%);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:oklch(from var(--error) l c h/10%);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:oklch(from var(--warning) l c h/10%);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
|
|
107
|
+
.alert--warning .alert__content strong{color:var(--warning-text)}.alert--warning .alert__close{color:var(--warning-text);opacity:.9}.alert--info{background-color:oklch(from var(--info) l c h/10%);border-color:var(--info);color:var(--info-text)}.toast{max-width:var(--spacing-96);pointer-events:none;position:fixed;width:100%;z-index:var(--z-toast)}.toast .alert{box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-2);pointer-events:auto}
|
|
108
|
+
.toast--bottom-right .alert,.toast--top-right .alert{animation:toast-slide-in-right var(--transition-slow) ease-out}
|
|
109
|
+
.toast--bottom-left .alert,.toast--top-left .alert{animation:toast-slide-in-left var(--transition-slow) ease-out}
|
|
110
|
+
.toast--bottom-center .alert,.toast--top-center .alert{animation:toast-slide-in-down var(--transition-slow) ease-out}@keyframes toast-slide-in-right{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-in-left{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-in-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.reduced-motion .toast .alert{animation:none}.toast--top-right{right:var(--spacing-4);top:var(--spacing-4)}.toast--top-left{left:var(--spacing-4);top:var(--spacing-4)}.toast--top-center{left:50%;top:var(--spacing-4);transform:translateX(-50%)}.toast--bottom-right{bottom:var(--spacing-4);right:var(--spacing-4)}.toast--bottom-left{bottom:var(--spacing-4);left:var(--spacing-4)}.toast--bottom-center{bottom:var(--spacing-4);left:50%;transform:translateX(-50%)}.toast-container{display:flex;flex-direction:column;gap:var(--spacing-2);pointer-events:none;position:fixed;z-index:var(--z-toast)}.toast-container--top-right{align-items:flex-end;right:var(--spacing-4);top:var(--spacing-4)}.toast-container--top-left{align-items:flex-start;left:var(--spacing-4);top:var(--spacing-4)}.toast-container--top-center{align-items:center;left:50%;top:var(--spacing-4);transform:translateX(-50%)}.toast-container--bottom-right{align-items:flex-end;bottom:var(--spacing-4);right:var(--spacing-4)}.toast-container--bottom-left{align-items:flex-start;bottom:var(--spacing-4);left:var(--spacing-4)}.toast-container--bottom-center{align-items:center;bottom:var(--spacing-4);left:50%;transform:translateX(-50%)}.toast-container .alert{box-shadow:var(--shadow-lg);max-width:24rem;pointer-events:auto;width:100%}
|
|
111
|
+
.toast-container--bottom-right .alert,.toast-container--top-right .alert{animation:toast-slide-in-right .3s ease-out}
|
|
112
|
+
.toast-container--bottom-left .alert,.toast-container--top-left .alert{animation:toast-slide-in-left .3s ease-out}
|
|
113
|
+
.toast-container--bottom-center .alert,.toast-container--top-center .alert{animation:toast-slide-in-down .3s ease-out}.reduced-motion .toast-container .alert{animation:none}@media (width <= 640px){.toast,
|
|
114
|
+
.toast-container{max-width:calc(100vw - var(--spacing-8));width:auto}.toast,
|
|
115
|
+
.toast-container,
|
|
116
|
+
.toast-container--bottom-center,.toast-container--top-center{left:var(--spacing-4)!important;right:var(--spacing-4)!important;transform:none!important}}.badge{align-items:center;border-radius:var(--radius);display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;transition:opacity var(--transition-base);vertical-align:baseline;white-space:nowrap}.badge--primary{background-color:var(--accent);color:var(--accent-text)}.badge--success{background-color:var(--success);color:var(--success-text)}.badge--warning{background-color:var(--warning);color:var(--warning-text)}.badge--error{background-color:var(--error);color:var(--error-text)}.badge--info{background-color:var(--info);color:var(--info-text)}.badge--sm{font-size:var(--font-size-xs);padding:var(--spacing-0-125) var(--spacing-2)}.badge--md{font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2)}.badge--lg{font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-3)}.badge--pill{border-radius:var(--radius-full)}@media (prefers-reduced-motion:reduce){.alert{transition:none}}.tooltip-wrapper{display:inline-block;position:relative;--tooltip-delay:0ms}.tooltip{background-color:var(--text);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--background);font-size:var(--font-size-sm);line-height:var(--line-height-tight);max-width:var(--spacing-64);opacity:0;overflow-wrap:break-word;padding:var(--spacing-2) var(--spacing-3);pointer-events:none;position:absolute;transform:scale(var(--scale-95));transition:opacity var(--transition-base) ease-out,transform var(--transition-base) ease-out;white-space:nowrap;white-space:normal;z-index:var(--z-tooltip)}.tooltip::before{border-style:solid;content:"";height:0;position:absolute;width:0}.tooltip--top{bottom:calc(100% + var(--spacing-2));left:50%;transform:translateX(-50%) scale(var(--scale-95))}.tooltip--top::before{border-color:var(--text) transparent transparent transparent;border-width:var(--border-width-arrow) var(--border-width-arrow) 0 var(--border-width-arrow);left:50%;top:100%;transform:translateX(-50%)}.tooltip--bottom{left:50%;top:calc(100% + var(--spacing-2));transform:translateX(-50%) scale(var(--scale-95))}.tooltip--bottom::before{border-color:transparent transparent var(--text) transparent;border-width:0 var(--border-width-arrow) var(--border-width-arrow) var(--border-width-arrow);bottom:100%;left:50%;transform:translateX(-50%)}.tooltip--left{right:calc(100% + var(--spacing-2));top:50%;transform:translateY(-50%) scale(var(--scale-95))}.tooltip--left::before{border-color:transparent transparent transparent var(--text);border-width:var(--border-width-arrow) 0 var(--border-width-arrow) var(--border-width-arrow);left:100%;top:50%;transform:translateY(-50%)}.tooltip--right{left:calc(100% + var(--spacing-2));top:50%;transform:translateY(-50%) scale(var(--scale-95))}.tooltip--right::before{border-color:transparent var(--text) transparent transparent;border-width:var(--border-width-arrow) var(--border-width-arrow) var(--border-width-arrow) 0;right:100%;top:50%;transform:translateY(-50%)}
|
|
117
|
+
.tooltip-wrapper:focus-within .tooltip,.tooltip-wrapper:hover .tooltip,
|
|
118
|
+
.tooltip-wrapper[aria-describedby]:focus-within + .tooltip,
|
|
119
|
+
.tooltip-wrapper[aria-describedby]:hover + .tooltip{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1);transition-delay:var(--tooltip-delay,0s)}
|
|
120
|
+
.tooltip-wrapper:focus-within .tooltip--bottom,.tooltip-wrapper:hover .tooltip--bottom{transform:translateX(-50%) scale(1)}
|
|
121
|
+
.tooltip-wrapper:focus-within .tooltip--left,.tooltip-wrapper:hover .tooltip--left{transform:translateY(-50%) scale(1)}
|
|
122
|
+
.tooltip-wrapper:focus-within .tooltip--right,.tooltip-wrapper:hover .tooltip--right{transform:translateY(-50%) scale(1)}@media (prefers-reduced-motion:reduce){.tooltip{transform:none;transition:opacity .1s ease-out}
|
|
123
|
+
.tooltip-wrapper:focus-within .tooltip,.tooltip-wrapper:hover .tooltip{transform:none}
|
|
124
|
+
.tooltip--bottom,.tooltip--top{transform:translateX(-50%)}.tooltip--left,
|
|
125
|
+
.tooltip--right{transform:translateY(-50%)}}.dropdown{display:inline-block;position:relative}.dropdown__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base)}.dropdown__trigger:hover{background-color:var(--background);border-color:var(--accent)}.dropdown__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.dropdown__trigger[aria-expanded="true"] .dropdown__icon{transform:rotate(180deg)}.dropdown__trigger-text{flex:1;text-align:left}.dropdown__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base)}.dropdown__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);list-style:none;margin:0;max-width:calc(100vw - var(--spacing-8));min-width:var(--spacing-64);opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}.dropdown__menu--left{left:0}.dropdown__menu--right{right:0}.dropdown__menu--start{left:0}.dropdown__menu--end{right:0}.dropdown__menu--open{opacity:1;transform:translateY(0);visibility:visible}.dropdown__item{align-items:center;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);min-height:var(--touch-target-min);overflow:hidden;padding:var(--spacing-2) var(--spacing-4);text-align:left;text-decoration:none;text-overflow:ellipsis;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}
|
|
126
|
+
.dropdown__item:focus-visible:not(.dropdown__item--disabled),.dropdown__item:hover:not(.dropdown__item--disabled){background-color:var(--background);color:var(--text);outline:none}.dropdown__item:focus-visible:not(.dropdown__item--disabled){box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.dropdown__item--disabled{cursor:not-allowed;opacity:var(--opacity-50);pointer-events:none}.dropdown__item-icon{flex-shrink:0;height:var(--spacing-4);width:var(--spacing-4)}.dropdown__separator{background-color:var(--border);height:var(--border-width);margin:var(--spacing-2) 0}.dropdown__item-wrapper,.dropdown__item-wrapper--has-submenu{overflow:visible;position:relative}.dropdown__item--has-submenu{align-items:center;display:flex;justify-content:space-between}.dropdown__item-arrow{flex-shrink:0;height:var(--spacing-3);margin-left:var(--spacing-2);transition:transform var(--transition-base);width:var(--spacing-3)}.dropdown__item-wrapper--has-submenu .dropdown__submenu--open ~ .dropdown__item-arrow,
|
|
127
|
+
.dropdown__item-wrapper--has-submenu:has(.dropdown__submenu--open) .dropdown__item-arrow{transform:rotate(-90deg)}.dropdown__item-wrapper--has-submenu .dropdown__item[aria-expanded="true"] .dropdown__item-arrow{transform:rotate(-90deg)}.dropdown__submenu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:block;left:0;list-style:none;margin:0;max-width:100%;min-width:100%;opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;pointer-events:none;position:absolute;right:0;top:100%;transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:100%;z-index:var(--z-dropdown-submenu)}.dropdown__submenu--open{display:block!important;opacity:1!important;pointer-events:all!important;transform:translateY(0)!important;visibility:visible!important}.dropdown__submenu-item{min-height:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-4)}.dropdown__submenu .dropdown__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (width <= 640px){.dropdown__menu{left:0;max-width:calc(100vw - var(--spacing-4));min-width:100%;right:auto}.dropdown__menu--right{left:auto;right:0}.dropdown__submenu{max-width:100%}}@media (prefers-reduced-motion:reduce){.dropdown__menu{transform:none;transition:opacity var(--transition-fast),visibility var(--transition-fast)}.dropdown__menu--open{transform:none}.dropdown__icon{transition:none}}.search{display:inline-block}.search,.search__trigger-wrapper{position:relative}.search__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base)}@media (width <= 1023px){.search__trigger{gap:0}.search__icon{flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}}.search__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.search__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.search__kbd{align-items:center;display:none;font-family:var(--font-family-mono);font-size:var(--font-size-xs);gap:var(--spacing-1);margin-left:auto}.search__kbd kbd{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius);font-size:var(--font-size-xs);line-height:1;padding:var(--spacing-0-125) var(--spacing-0-375)}@media (width >= 768px){.search__kbd{display:flex}}.search__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);bottom:0;box-sizing:border-box;height:100%;left:0;min-height:100vh;min-height:100dvh;min-width:100vw;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease-out;width:100%;z-index:var(--z-search-overlay)}.search__overlay[aria-hidden="false"]{opacity:1;pointer-events:all;z-index:var(--z-search-overlay)}.search__overlay[aria-hidden="true"]{display:none}@media (width <= 1023px){.search__overlay[aria-hidden="true"]{display:none!important;pointer-events:none!important}.search__overlay{backdrop-filter:blur(2px);background-color:oklch(from var(--overlay) l c h/60%)}}.search__panel{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);box-sizing:border-box;display:flex;flex-direction:column;left:50%;max-height:calc(100vh - var(--spacing-8));max-height:calc(100dvh - var(--spacing-8));max-width:var(--spacing-150);opacity:0;outline:none;overflow:hidden;padding-bottom:var(--spacing-6);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease-out;width:calc(100vw - var(--spacing-8));z-index:var(--z-search-panel)}.search__panel[aria-hidden="true"]{display:none}.search__panel[aria-hidden="false"][data-open="true"]{background-color:var(--background);display:flex;opacity:1;pointer-events:all}@media (width <= 640px){.search__panel{max-height:calc(100dvh - var(--spacing-8));max-width:none;width:calc(100vw - var(--spacing-8))}}@media (width <= 1023px){.search__panel[aria-hidden="false"][data-open="true"] .search__header{background-color:var(--background)!important;position:relative;z-index:var(--z-1)}}.search__header{background-color:var(--background);border-bottom:var(--border-width) solid var(--border);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);gap:var(--spacing-3);padding:var(--spacing-5) var(--spacing-6);position:relative}.search__close-btn,.search__header{align-items:center;display:flex;flex-shrink:0}.search__close-btn{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2);transition:background-color var(--transition-base),border-color var(--transition-base)}.search__close-btn:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.search__close-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.search__close-btn:active{background-color:var(--background-alt)}.search__close-text{display:none}@media (width > 1023px){.search__close-btn{min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2)}}@media (width <= 1023px){.search__header{gap:var(--spacing-2);padding:var(--spacing-4)}.search__close-btn{min-height:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-4);white-space:nowrap}.search__close-text{display:inline}.search__input-wrapper{flex:1;min-width:0}}.search__input-wrapper{align-items:center;display:flex;flex:1;position:relative}.search__input-icon{color:var(--icon-dim);flex-shrink:0;height:var(--spacing-5);left:var(--spacing-4);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:var(--spacing-5);z-index:calc(var(--z-base) + 2)}.search__input{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-sizing:border-box;color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-3) calc(var(--spacing-14) + var(--spacing-0-125)) var(--spacing-3) var(--spacing-16)!important;transition:border-color var(--transition-base),background-color var(--transition-base);width:100%}.search__input:focus{background-color:var(--background);border-color:var(--accent);outline:none}.search__input::-moz-placeholder{color:var(--text-dim)}.search__input::placeholder{color:var(--text-dim)}.search__clear{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;opacity:0;padding:0;pointer-events:none;position:absolute;right:var(--spacing-3);transition:color var(--transition-base),background-color var(--transition-base);width:var(--spacing-8);z-index:calc(var(--z-base) + 3)}.search__clear[aria-hidden="false"]{opacity:1;pointer-events:all}@media (width <= 1023px){.search__clear{display:none!important}}.search__clear:hover{background-color:var(--background);color:var(--text)}.search__clear:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.search__results{background-color:var(--background)!important;display:flex!important;flex:1;flex-direction:column;height:auto!important;left:0!important;max-height:calc(var(--vh-70) - var(--spacing-20));min-height:var(--spacing-75)!important;opacity:1!important;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) var(--spacing-6) var(--spacing-8) var(--spacing-6);position:relative!important;right:auto!important;visibility:visible!important;width:100%!important;z-index:calc(var(--z-base) + 1)}.search__empty,
|
|
128
|
+
.search__loading,
|
|
129
|
+
.search__no-results{align-items:center;display:flex;justify-content:center;padding:var(--spacing-6) var(--spacing-4);text-align:center}.search__empty-text,
|
|
130
|
+
.search__loading-text,
|
|
131
|
+
.search__no-results-text{color:var(--text-dim);font-size:var(--font-size-sm);margin:0}.search__results-list{display:flex!important;flex-direction:column;gap:var(--spacing-1);min-height:0;padding-bottom:var(--spacing-4)}.search__results-list::after{content:"";display:block;flex-shrink:0;height:var(--spacing-8)}
|
|
132
|
+
.search__results-list.is-hidden,.search__results-list[hidden]{display:none!important}.search__results-list:not([hidden], .is-hidden){display:flex!important;opacity:1!important;visibility:visible!important}.search__result-item{background-color:var(--background-alt)!important;border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--text)!important;cursor:pointer;display:block!important;margin-bottom:0;min-height:auto!important;opacity:1!important;padding:var(--spacing-4) var(--spacing-5)!important;position:relative;text-decoration:none;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);visibility:visible!important;width:100%!important;z-index:calc(var(--z-base) + 3)}.search__result-item:hover{background-color:var(--background)!important;border-color:var(--accent);transform:translateX(var(--spacing-1))}
|
|
133
|
+
.search__result-item:focus-visible,.search__result-item:hover{background-color:var(--background-alt);color:var(--accent);outline:none}.search__result-item[aria-selected="true"]{background-color:var(--background-alt);color:var(--accent);outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.search__result-item:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent);outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.search__result-category{color:var(--text-dim)!important;font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase}.search__result-category,.search__result-title{display:block!important;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-2);visibility:visible!important}.search__result-title{color:var(--text)!important;font-size:var(--font-size-base);line-height:var(--line-height-snug)}.search__result-content{color:var(--text-dim)!important;display:-webkit-box;font-size:var(--font-size-sm);line-clamp:2;-webkit-line-clamp:2;line-height:var(--line-height-relaxed);-webkit-box-orient:vertical;margin-top:var(--spacing-1);overflow:hidden;visibility:visible!important}.navbar__search-wrapper .search{margin:0}@media (width <= 1023px){.navbar__search-wrapper .search__kbd{display:none}}.search__panel:focus-within{outline:none}@media (prefers-reduced-motion:reduce){.search__overlay,.search__panel,.search__result-item{transition:none}}.breadcrumb{width:100%}.breadcrumb__list{align-items:center;color:var(--text-dim);display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--spacing-1) var(--spacing-2);list-style:none;margin:0;padding:0}.breadcrumb__item{align-items:center;display:inline-flex;gap:var(--spacing-2)}.breadcrumb__item--current .breadcrumb__current{color:var(--text);font-weight:var(--font-weight-medium)}.breadcrumb__link{color:var(--text-dim);text-decoration:none;transition:color var(--transition-base)}.breadcrumb__link:hover{color:var(--accent)}.breadcrumb__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.breadcrumb__current{color:var(--text-dim)}.breadcrumb__separator{align-items:center;color:var(--icon-dim);display:inline-flex;flex-shrink:0;opacity:var(--opacity-70);-webkit-user-select:none;-moz-user-select:none;user-select:none}.breadcrumb__separator-icon{color:inherit;transform:rotate(-90deg)}.breadcrumb--slash .breadcrumb__separator-icon{display:none}.breadcrumb--slash .breadcrumb__separator:not(:has(.breadcrumb__separator-icon)){margin:0 var(--spacing-0-125)}@media (width <= 639px){.breadcrumb__list{font-size:var(--font-size-xs);gap:var(--spacing-0-875) var(--spacing-1)}
|
|
134
|
+
.breadcrumb__current,.breadcrumb__link{max-width:var(--spacing-24);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb__item--current .breadcrumb__current{max-width:none}}.pagination{width:100%}.pagination__list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-1);justify-content:center;list-style:none;margin:0;padding:0}.pagination__item,.pagination__link{display:inline-flex}.pagination__link{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.pagination__link:hover:not(.pagination__link--disabled, .pagination__link--current){background-color:var(--background);border-color:var(--accent);color:var(--accent)}.pagination__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.pagination__link--current{background-color:var(--background);border-color:var(--accent);color:var(--accent);cursor:default;font-weight:var(--font-weight-semibold)}.pagination__link--disabled{cursor:not-allowed;opacity:var(--opacity-60);pointer-events:none}.pagination__ellipsis{align-items:center;color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0 var(--spacing-2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.accordion{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);overflow:hidden;width:100%}.accordion__item{border-bottom:var(--border-width) solid var(--border)}.accordion__item:last-child{border-bottom:none}.accordion__heading{font-size:inherit;font-weight:inherit;margin:0}.accordion__trigger{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:space-between;min-height:var(--touch-target-min);padding:var(--spacing-3) var(--spacing-4);text-align:left;transition:background-color var(--transition-base),color var(--transition-base);width:100%}.accordion__trigger:hover{background-color:var(--background);color:var(--accent)}.accordion__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.accordion__trigger--expanded{background-color:var(--background);color:var(--accent)}.accordion__title{flex:1;margin:0}.accordion__icon{color:var(--icon-dim);flex-shrink:0;transition:transform var(--transition-base)}.accordion__trigger--expanded .accordion__icon{color:var(--accent);transform:rotate(180deg)}.accordion__panel{max-height:0;overflow:hidden;transition:max-height var(--transition-slow) var(--ease-in-out-cubic)}.accordion__panel[hidden]{display:block;max-height:0}.accordion__panel--expanded{max-height:var(--accordion-panel-max-height,2000px)}.accordion__panel-inner{padding:0 var(--spacing-4) var(--spacing-4)}.accordion__panel-content{color:var(--text);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);padding-top:var(--spacing-2)}
|
|
135
|
+
.accordion__panel-content :global(ol:first-child),.accordion__panel-content :global(p:first-child),
|
|
136
|
+
.accordion__panel-content :global(ul:first-child){margin-top:0}
|
|
137
|
+
.accordion__panel-content :global(ol:last-child),.accordion__panel-content :global(p:last-child),
|
|
138
|
+
.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent)}.tabs__tab--active:hover{border-bottom-color:var(--accent)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.home{padding:var(--spacing-8) var(--spacing-4)}.home__container{margin:0 auto;max-width:var(--container-default);padding:0 var(--spacing-4)}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto;max-width:var(--spacing-175)}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6)}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}
|
|
139
|
+
.home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-hover);text-decoration:underline}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(78% 0.12 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}
|
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rizzo-css",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"prepublishOnly": "cd ../.. && pnpm build:css"
|
|
6
|
+
},
|
|
7
|
+
"description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM). Use with Astro, Svelte, or any framework.",
|
|
8
|
+
"style": "dist/rizzo.min.css",
|
|
9
|
+
"main": "dist/rizzo.min.css",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"style": "./dist/rizzo.min.css",
|
|
13
|
+
"import": "./dist/rizzo.min.css",
|
|
14
|
+
"require": "./dist/rizzo.min.css"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md"
|
|
20
|
+
],
|
|
21
|
+
"keywords": [
|
|
22
|
+
"css",
|
|
23
|
+
"design-system",
|
|
24
|
+
"theming",
|
|
25
|
+
"bem",
|
|
26
|
+
"accessibility",
|
|
27
|
+
"astro",
|
|
28
|
+
"svelte"
|
|
29
|
+
],
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "https://github.com/mingleusa/rizzo-css.git"
|
|
33
|
+
},
|
|
34
|
+
"license": "MIT"
|
|
35
|
+
}
|