@codenhub/styles 0.6.0 → 0.8.0
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/NOTICE +18 -16
- package/README.es.md +62 -0
- package/README.md +28 -22
- package/README.pt-BR.md +62 -0
- package/dist/aesthetics/chunky-tile.css +1 -1
- package/dist/aesthetics/cyber.css +1 -1
- package/dist/aesthetics/glass.css +1 -1
- package/dist/aesthetics/index.css +2 -2
- package/dist/aesthetics/neobrutalism.css +1 -1
- package/dist/aesthetics/pixel.css +1 -1
- package/dist/aesthetics/sketch.css +1 -1
- package/dist/cli.js +189 -0
- package/dist/components.css +2 -2
- package/dist/index.css +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/native.css +2 -2
- package/dist/palette.css +1 -1
- package/dist/theme.css +2 -2
- package/docs/accessibility.md +108 -60
- package/docs/changelog/0.1.1.md +1 -0
- package/docs/changelog/0.2.0.md +1 -0
- package/docs/changelog/0.3.0.md +1 -0
- package/docs/changelog/0.4.0.md +1 -0
- package/docs/changelog/0.5.0.md +8 -3
- package/docs/changelog/0.6.0.md +2 -1
- package/docs/changelog/0.7.0.md +50 -0
- package/docs/changelog/0.8.0.md +70 -0
- package/docs/changelog/index.md +2 -0
- package/docs/concepts.md +188 -46
- package/docs/es/accessibility.md +169 -0
- package/docs/es/concepts.md +212 -0
- package/docs/es/index.md +105 -0
- package/docs/es/integrating/astro.md +35 -0
- package/docs/es/integrating/index.md +75 -0
- package/docs/es/integrating/nextjs.md +67 -0
- package/docs/es/integrating/svelte.md +45 -0
- package/docs/es/integrating/tailwind.md +148 -0
- package/docs/es/integrating/vue.md +31 -0
- package/docs/es/integrating/without-a-bundler.md +238 -0
- package/docs/es/setup.md +188 -0
- package/docs/es/usage/aesthetics.md +282 -0
- package/docs/es/usage/buttons.md +135 -0
- package/docs/es/usage/composing.md +168 -0
- package/docs/es/usage/content-and-layout.md +219 -0
- package/docs/es/usage/customizing.md +304 -0
- package/docs/es/usage/feedback.md +157 -0
- package/docs/es/usage/forms.md +256 -0
- package/docs/es/usage/index.md +33 -0
- package/docs/es/usage/presets.md +92 -0
- package/docs/es/usage/solo.md +86 -0
- package/docs/es/usage/theming.md +309 -0
- package/docs/es/usage/tooltips.md +127 -0
- package/docs/index.md +86 -26
- package/docs/integrating/astro.md +3 -4
- package/docs/integrating/index.md +46 -13
- package/docs/integrating/nextjs.md +3 -4
- package/docs/integrating/svelte.md +5 -4
- package/docs/integrating/tailwind.md +89 -6
- package/docs/integrating/vue.md +3 -4
- package/docs/integrating/without-a-bundler.md +237 -0
- package/docs/pt-BR/accessibility.md +169 -0
- package/docs/pt-BR/concepts.md +212 -0
- package/docs/pt-BR/index.md +105 -0
- package/docs/pt-BR/integrating/astro.md +35 -0
- package/docs/pt-BR/integrating/index.md +75 -0
- package/docs/pt-BR/integrating/nextjs.md +67 -0
- package/docs/pt-BR/integrating/svelte.md +45 -0
- package/docs/pt-BR/integrating/tailwind.md +148 -0
- package/docs/pt-BR/integrating/vue.md +31 -0
- package/docs/pt-BR/integrating/without-a-bundler.md +238 -0
- package/docs/pt-BR/setup.md +188 -0
- package/docs/pt-BR/usage/aesthetics.md +282 -0
- package/docs/pt-BR/usage/buttons.md +135 -0
- package/docs/pt-BR/usage/composing.md +168 -0
- package/docs/pt-BR/usage/content-and-layout.md +219 -0
- package/docs/pt-BR/usage/customizing.md +304 -0
- package/docs/pt-BR/usage/feedback.md +157 -0
- package/docs/pt-BR/usage/forms.md +256 -0
- package/docs/pt-BR/usage/index.md +33 -0
- package/docs/pt-BR/usage/presets.md +92 -0
- package/docs/pt-BR/usage/solo.md +86 -0
- package/docs/pt-BR/usage/theming.md +309 -0
- package/docs/pt-BR/usage/tooltips.md +127 -0
- package/docs/setup.md +142 -91
- package/docs/usage/aesthetics.md +89 -73
- package/docs/usage/buttons.md +112 -40
- package/docs/usage/composing.md +109 -92
- package/docs/usage/content-and-layout.md +160 -125
- package/docs/usage/customizing.md +117 -41
- package/docs/usage/feedback.md +138 -71
- package/docs/usage/forms.md +201 -107
- package/docs/usage/index.md +22 -14
- package/docs/usage/presets.md +91 -0
- package/docs/usage/solo.md +85 -0
- package/docs/usage/theming.md +273 -118
- package/docs/usage/tooltips.md +90 -49
- package/llms-full.txt +2820 -1298
- package/llms.txt +24 -22
- package/package.json +134 -91
- package/{dist/tw → tw}/aesthetics/chunky-tile.css +107 -29
- package/{dist/tw → tw}/aesthetics/cyber.css +88 -40
- package/{dist/tw → tw}/aesthetics/glass.css +257 -61
- package/{dist/tw → tw}/aesthetics/neobrutalism.css +113 -20
- package/{dist/tw → tw}/aesthetics/pixel.css +93 -8
- package/tw/aesthetics/sketch.css +417 -0
- package/{dist/tw → tw}/box.css +105 -9
- package/tw/components/button.css +11 -0
- package/tw/components/button.rules.css +187 -0
- package/tw/components/feedback.css +11 -0
- package/{dist/tw/components/feedback.css → tw/components/feedback.rules.css} +136 -32
- package/tw/components/form.css +11 -0
- package/{dist/tw/components/form.css → tw/components/form.rules.css} +577 -125
- package/tw/components/index.css +16 -0
- package/tw/components/rules.css +41 -0
- package/tw/components/surface.css +11 -0
- package/tw/components/surface.rules.css +222 -0
- package/tw/components/tooltip.css +11 -0
- package/{dist/tw/components/tooltip.css → tw/components/tooltip.rules.css} +43 -27
- package/{dist/tw → tw}/corner.css +18 -12
- package/{dist/tw → tw}/elevation.css +23 -17
- package/{dist/tw → tw}/index.css +12 -10
- package/tw/index.d.ts +1 -0
- package/tw/intent.css +312 -0
- package/tw/modifiers.css +127 -0
- package/tw/native.css +320 -0
- package/tw/presentation.css +139 -0
- package/tw/reset.css +10 -0
- package/{dist/tw/reset.css → tw/reset.rules.css} +21 -22
- package/tw/size.css +34 -0
- package/tw/surface.css +9 -0
- package/tw/surface.rules.css +212 -0
- package/{dist/tw → tw}/theme.css +121 -45
- package/tw/typography.css +8 -0
- package/{dist/tw/typography.css → tw/typography.rules.css} +0 -3
- package/{dist/tw → tw}/utilities/content.css +212 -50
- package/tw/utilities/index.css +11 -0
- package/tw/utilities/layout.css +208 -0
- package/tw/utilities/rules.css +8 -0
- package/dist/tw/aesthetics/sketch.css +0 -333
- package/dist/tw/components/button.css +0 -139
- package/dist/tw/components/index.css +0 -36
- package/dist/tw/components/loader.css +0 -116
- package/dist/tw/components/surface.css +0 -175
- package/dist/tw/intent.css +0 -228
- package/dist/tw/native.css +0 -203
- package/dist/tw/palette.css +0 -460
- package/dist/tw/presentation.css +0 -68
- package/dist/tw/surface.css +0 -61
- package/dist/tw/utilities/index.css +0 -6
- package/dist/tw/utilities/layout.css +0 -130
- /package/{dist/tw → tw}/aesthetics/index.css +0 -0
package/NOTICE
CHANGED
|
@@ -10,7 +10,7 @@ Third-Party Software Notices and Licenses:
|
|
|
10
10
|
This product contains SVG icon assets derived from Lucide (https://lucide.dev),
|
|
11
11
|
which are licensed under the ISC License:
|
|
12
12
|
|
|
13
|
-
Copyright (c) Lucide Contributors
|
|
13
|
+
Copyright (c) 2026 Lucide Icons and Contributors
|
|
14
14
|
|
|
15
15
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
16
16
|
purpose with or without fee is hereby granted, provided that the above
|
|
@@ -26,27 +26,29 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
|
26
26
|
|
|
27
27
|
------------------------------------------------------------------------
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
The checkbox marks (the check and the indeterminate minus) are derived from
|
|
30
|
+
the Lucide `check` and `minus` icons, which Lucide in turn derives from the
|
|
31
|
+
Feather project (https://github.com/feathericons/feather). Those icons are
|
|
32
|
+
licensed under the MIT License:
|
|
32
33
|
|
|
33
34
|
The MIT License (MIT)
|
|
34
35
|
|
|
35
|
-
Copyright (c)
|
|
36
|
+
Copyright (c) 2013-present Cole Bemis
|
|
36
37
|
|
|
37
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
38
|
-
this software and associated documentation files (the "Software"), to deal
|
|
39
|
-
the Software without restriction, including without limitation the rights
|
|
40
|
-
use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
41
|
-
the Software, and to permit persons to whom the Software is
|
|
42
|
-
subject to the following conditions:
|
|
38
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
39
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
40
|
+
in the Software without restriction, including without limitation the rights
|
|
41
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
42
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
43
|
+
furnished to do so, subject to the following conditions:
|
|
43
44
|
|
|
44
45
|
The above copyright notice and this permission notice shall be included in all
|
|
45
46
|
copies or substantial portions of the Software.
|
|
46
47
|
|
|
47
48
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
48
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
49
|
-
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
50
|
-
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
51
|
-
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
52
|
-
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
49
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
50
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
51
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
52
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
53
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
54
|
+
SOFTWARE.
|
package/README.es.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!-- source: 28634ba660bf4846ac6db6982468d92e43a1a579 -->
|
|
2
|
+
|
|
3
|
+
# @codenhub/styles
|
|
4
|
+
|
|
5
|
+
Construye una interfaz coherente y con temas escribiendo nombres de clase sobre HTML normal: una hoja de estilos con tokens, un reset, helpers de layout y de tipografía, y clases para botones, campos de formulario, alertas, tarjetas, tablas y tooltips. No hay JavaScript que cargar ni una librería de componentes que envolver.
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
pnpm add @codenhub/styles
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
Importa la hoja de estilos compilada, que contiene todo lo que incluye el paquete:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "@codenhub/styles";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<form class="card stack">
|
|
23
|
+
<h2 class="text-title-sm">Profile</h2>
|
|
24
|
+
<div class="field">
|
|
25
|
+
<label class="label" for="display-name">Display name</label>
|
|
26
|
+
<input class="ipt" id="display-name" name="display-name" />
|
|
27
|
+
</div>
|
|
28
|
+
<button class="btn primary" type="submit">Save changes</button>
|
|
29
|
+
</form>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Para usar en su lugar los puntos de entrada de código fuente de Tailwind CSS v4, o para cargar solo una parte del paquete, consulta [Configuración inicial](./docs/es/setup.md). La [demo](https://demo.codenhub.dev/styles/) muestra cada componente en cada intención, presentación y estética.
|
|
33
|
+
|
|
34
|
+
## Documentación
|
|
35
|
+
|
|
36
|
+
La documentación construye una pantalla de ajustes de cuenta de principio a fin, en este orden:
|
|
37
|
+
|
|
38
|
+
- [Introducción](./docs/es/index.md): para qué sirve el paquete, qué cuesta y en qué orden leer.
|
|
39
|
+
- [Configuración inicial](./docs/es/setup.md): instala el paquete, elige entre CSS compilado o código fuente de Tailwind y renderiza la estructura base de la página.
|
|
40
|
+
- [Integración](./docs/es/integrating/index.md): carga la hoja de estilos en Next.js, Vue, Svelte, Astro, Tailwind CSS v4 o en una página sin bundler.
|
|
41
|
+
- [Construir una pantalla](./docs/es/concepts.md): maqueta la página y aprende qué son la intención, el relleno, el borde y la estética.
|
|
42
|
+
- [Uso](./docs/es/usage/index.md): guías de botones, formularios, feedback, tooltips, temas, estéticas y clases solo, y después las páginas de consulta con cada clase, token y valor por defecto.
|
|
43
|
+
- [Accesibilidad](./docs/es/accessibility.md): lo que el CSS hace por tus usuarios y lo que tu aplicación todavía les debe.
|
|
44
|
+
- [Changelog](./docs/changelog/index.md): historial de versiones, incluidos los cambios incompatibles.
|
|
45
|
+
|
|
46
|
+
## Requisitos
|
|
47
|
+
|
|
48
|
+
| Requisito | Detalles |
|
|
49
|
+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| Imports de CSS | Las herramientas del proyecto deben resolver los imports de CSS de paquetes. |
|
|
51
|
+
| Navegadores | Chrome 123, Safari 17.5 o Firefox 128 y posteriores (`light-dark()` para los temas; `:has()` para el estado de `.input-group`; `@property` para una elevación que no se hereda). |
|
|
52
|
+
| Tailwind CSS | 4.3.2 o posterior, por debajo de 5; solo es necesario para los puntos de entrada de código fuente `/tw` y el comando `codenhub-styles build`, que además necesita `@tailwindcss/cli` en el mismo rango. Instala ambos tú; el paquete no los instala. |
|
|
53
|
+
| Node.js | 24 o posterior, solo en la máquina que ejecuta el comando `codenhub-styles build`. Las hojas de estilos no lo necesitan. |
|
|
54
|
+
| Accesibilidad | Tu proyecto aporta el HTML semántico, ARIA, el comportamiento de teclado y la gestión del foco. |
|
|
55
|
+
|
|
56
|
+
## Notas
|
|
57
|
+
|
|
58
|
+
Este paquete no tiene comportamiento en JavaScript. No incluye alias de compatibilidad: una clase o un token eliminado se documenta en el [changelog](./docs/changelog/index.md), no se conserva con un segundo nombre. Por debajo de 1.0, una versión menor puede romper la compatibilidad y una versión de parche nunca lo hace; consulta [Versionado](./docs/es/index.md#versionado).
|
|
59
|
+
|
|
60
|
+
## Licencia
|
|
61
|
+
|
|
62
|
+
Distribuido bajo la licencia Apache-2.0. Las marcas de checkbox incrustadas derivan de los iconos `check` y `minus` de [Lucide](https://lucide.dev) (ISC), que Lucide deriva de [Feather](https://github.com/feathericons/feather) (MIT). Consulta [NOTICE](NOTICE) para los avisos obligatorios.
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @codenhub/styles
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Build a consistent, themeable interface by writing class names on plain HTML: one stylesheet with tokens, a reset, layout and type helpers, and classes for buttons, form fields, alerts, cards, tables, and tooltips. There is no JavaScript to load and no component library to wrap.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -10,45 +10,51 @@ pnpm add @codenhub/styles
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
Import the compiled stylesheet
|
|
13
|
+
Import the compiled stylesheet, which holds everything the package ships:
|
|
14
14
|
|
|
15
15
|
```css
|
|
16
16
|
@import "@codenhub/styles";
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
```html
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
<form class="card stack">
|
|
21
|
+
<h2 class="text-title-sm">Profile</h2>
|
|
22
|
+
<div class="field">
|
|
23
|
+
<label class="label" for="display-name">Display name</label>
|
|
24
|
+
<input class="ipt" id="display-name" name="display-name" />
|
|
25
|
+
</div>
|
|
26
|
+
<button class="btn primary" type="submit">Save changes</button>
|
|
27
|
+
</form>
|
|
25
28
|
```
|
|
26
29
|
|
|
27
|
-
|
|
30
|
+
To use the Tailwind CSS v4 source entrypoints instead, or to load only part of the package, see [Setup](./docs/setup.md). The [demo](https://demo.codenhub.dev/styles/) shows every component in every intent, presentation, and aesthetic.
|
|
28
31
|
|
|
29
32
|
## Documentation
|
|
30
33
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
- [
|
|
34
|
-
- [
|
|
35
|
-
- [Integrating](./docs/integrating/index.md):
|
|
36
|
-
- [
|
|
34
|
+
The docs build one account settings screen from start to finish, in this order:
|
|
35
|
+
|
|
36
|
+
- [Introduction](./docs/index.md): What the package is for, what it costs, and the reading order.
|
|
37
|
+
- [Setup](./docs/setup.md): Install the package, choose compiled CSS or Tailwind source, and render the page shell.
|
|
38
|
+
- [Integrating](./docs/integrating/index.md): Load the stylesheet in Next.js, Vue, Svelte, Astro, Tailwind CSS v4, or a page with no bundler.
|
|
39
|
+
- [Building a screen](./docs/concepts.md): Lay out the page and learn intent, fill, edge, and aesthetic.
|
|
40
|
+
- [Usage](./docs/usage/index.md): Guides for buttons, forms, feedback, tooltips, theming, aesthetics, and solo classes, then the lookup pages for every class, token, and default.
|
|
41
|
+
- [Accessibility](./docs/accessibility.md): What the CSS does for your users and what your application still owes them.
|
|
37
42
|
- [Changelog](./docs/changelog/index.md): Release history, including breaking changes.
|
|
38
43
|
|
|
39
44
|
## Requirements
|
|
40
45
|
|
|
41
|
-
| Requirement | Details
|
|
42
|
-
| ------------- |
|
|
43
|
-
| CSS imports | Consumer tooling must resolve package CSS imports.
|
|
44
|
-
| Browsers | Chrome 123, Safari 17.5, or Firefox 128 and newer (`light-dark()` theming; `:has()` for `.input-group` state; `@property` for non-inheriting elevation).
|
|
45
|
-
| Tailwind CSS | 4.3.2 or newer, below 5, is required only for `/tw` source entrypoints.
|
|
46
|
-
|
|
|
46
|
+
| Requirement | Details |
|
|
47
|
+
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| CSS imports | Consumer tooling must resolve package CSS imports. |
|
|
49
|
+
| Browsers | Chrome 123, Safari 17.5, or Firefox 128 and newer (`light-dark()` theming; `:has()` for `.input-group` state; `@property` for non-inheriting elevation). |
|
|
50
|
+
| Tailwind CSS | 4.3.2 or newer, below 5, is required only for `/tw` source entrypoints and the `codenhub-styles build` command, which also needs `@tailwindcss/cli` in the same range. Install both yourself; the package does not. |
|
|
51
|
+
| Node.js | 24 or newer, only on the machine that runs the `codenhub-styles build` command. The stylesheets need none. |
|
|
52
|
+
| Accessibility | Consumers provide semantic HTML, ARIA, keyboard behavior, and focus management. |
|
|
47
53
|
|
|
48
54
|
## Notes
|
|
49
55
|
|
|
50
|
-
This package has no JavaScript behavior. It ships no compatibility aliases: a removed class or token is documented in the [changelog](./docs/changelog/index.md), not kept under a second name.
|
|
56
|
+
This package has no JavaScript behavior. It ships no compatibility aliases: a removed class or token is documented in the [changelog](./docs/changelog/index.md), not kept under a second name. Below 1.0 a minor release may break and a patch release never does; see [Versioning](./docs/index.md#versioning).
|
|
51
57
|
|
|
52
58
|
## License
|
|
53
59
|
|
|
54
|
-
Licensed under Apache-2.0.
|
|
60
|
+
Licensed under Apache-2.0. The embedded checkbox marks are derived from the [Lucide](https://lucide.dev) `check` and `minus` icons (ISC), which Lucide derives from [Feather](https://github.com/feathericons/feather) (MIT). See [NOTICE](NOTICE) for the required notices.
|
package/README.pt-BR.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!-- source: 28634ba660bf4846ac6db6982468d92e43a1a579 -->
|
|
2
|
+
|
|
3
|
+
# @codenhub/styles
|
|
4
|
+
|
|
5
|
+
Monte uma interface consistente e com suporte a temas escrevendo nomes de classe em HTML puro: uma folha de estilos com tokens, um reset, utilitários de layout e tipografia, e classes para botões, campos de formulário, alertas, cards, tabelas e tooltips. Não há JavaScript para carregar nem biblioteca de componentes para encapsular.
|
|
6
|
+
|
|
7
|
+
## Instalação
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
pnpm add @codenhub/styles
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
Importe a folha de estilos compilada, que contém tudo o que o pacote entrega:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "@codenhub/styles";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<form class="card stack">
|
|
23
|
+
<h2 class="text-title-sm">Profile</h2>
|
|
24
|
+
<div class="field">
|
|
25
|
+
<label class="label" for="display-name">Display name</label>
|
|
26
|
+
<input class="ipt" id="display-name" name="display-name" />
|
|
27
|
+
</div>
|
|
28
|
+
<button class="btn primary" type="submit">Save changes</button>
|
|
29
|
+
</form>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Para usar os entrypoints de código-fonte do Tailwind CSS v4, ou para carregar só uma parte do pacote, veja [Configuração](./docs/pt-BR/setup.md). A [demo](https://demo.codenhub.dev/styles/) mostra cada componente em cada intenção, apresentação e estética.
|
|
33
|
+
|
|
34
|
+
## Documentação
|
|
35
|
+
|
|
36
|
+
A documentação monta uma tela de configurações de conta do início ao fim, nesta ordem:
|
|
37
|
+
|
|
38
|
+
- [Introdução](./docs/pt-BR/index.md): para que serve o pacote, quanto ele custa e a ordem de leitura.
|
|
39
|
+
- [Configuração](./docs/pt-BR/setup.md): instale o pacote, escolha entre CSS compilado ou código-fonte do Tailwind e renderize a estrutura da página.
|
|
40
|
+
- [Integração](./docs/pt-BR/integrating/index.md): carregue a folha de estilos no Next.js, Vue, Svelte, Astro, Tailwind CSS v4 ou numa página sem bundler.
|
|
41
|
+
- [Montando uma tela](./docs/pt-BR/concepts.md): organize o layout da página e aprenda intenção, preenchimento, borda e estética.
|
|
42
|
+
- [Uso](./docs/pt-BR/usage/index.md): guias de botões, formulários, feedback, tooltips, temas, estéticas e classes solo, seguidos das páginas de consulta com cada classe, token e padrão.
|
|
43
|
+
- [Acessibilidade](./docs/pt-BR/accessibility.md): o que o CSS faz pelos seus usuários e o que a sua aplicação ainda deve a eles.
|
|
44
|
+
- [Changelog](./docs/changelog/index.md) (em inglês): histórico de versões, incluindo breaking changes.
|
|
45
|
+
|
|
46
|
+
## Requisitos
|
|
47
|
+
|
|
48
|
+
| Requisito | Detalhes |
|
|
49
|
+
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| Imports de CSS | O ferramental do projeto precisa resolver imports de CSS de pacotes. |
|
|
51
|
+
| Navegadores | Chrome 123, Safari 17.5 ou Firefox 128 e mais recentes (`light-dark()` para temas; `:has()` para o estado de `.input-group`; `@property` para elevação sem herança). |
|
|
52
|
+
| Tailwind CSS | 4.3.2 ou mais recente, abaixo da 5, exigido apenas para os entrypoints de código-fonte `/tw` e o comando `codenhub-styles build`, que também precisa do `@tailwindcss/cli` na mesma faixa. Instale os dois você mesmo; o pacote não os instala. |
|
|
53
|
+
| Node.js | 24 ou mais recente, só na máquina que roda o comando `codenhub-styles build`. As folhas de estilos não precisam dele. |
|
|
54
|
+
| Acessibilidade | Quem usa o pacote fornece HTML semântico, ARIA, comportamento de teclado e gerenciamento de foco. |
|
|
55
|
+
|
|
56
|
+
## Observações
|
|
57
|
+
|
|
58
|
+
Este pacote não tem comportamento em JavaScript. Ele não entrega aliases de compatibilidade: uma classe ou token removido é documentado no [changelog](./docs/changelog/index.md), não mantido com um segundo nome. Abaixo da 1.0, uma versão minor pode quebrar compatibilidade e uma versão patch nunca quebra; veja [Versionamento](./docs/pt-BR/index.md#versionamento).
|
|
59
|
+
|
|
60
|
+
## Licença
|
|
61
|
+
|
|
62
|
+
Licenciado sob Apache-2.0. As marcas de checkbox embutidas derivam dos ícones `check` e `minus` do [Lucide](https://lucide.dev) (ISC), que o Lucide deriva do [Feather](https://github.com/feathericons/feather) (MIT). Veja [NOTICE](NOTICE) para os avisos exigidos.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme,base;@layer components{.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-control-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400));--ui-rule-ink:initial;--ui-corner:var(--_tile-radius);--ui-corner-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:0px;--ui-active-translate-y:var(--_tile-lift);--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));--ui-label-weight:800;--ui-label-tracking:.04em;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities;.chunky-tile-solo{--_tile-lift:var(--tile-lift,4px);--
|
|
1
|
+
@layer theme,base;@layer components{.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-control-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400));--ui-rule-ink:initial;--ui-corner:var(--_tile-radius);--ui-corner-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:0px;--ui-active-translate-y:var(--_tile-lift);--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));--ui-label-weight:800;--ui-label-tracking:.04em;--ui-label-case:initial;--ui-label-shadow:initial}@media (prefers-contrast:more){.chunky-tile{--ui-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400))}}}@layer utilities;.chunky-tile-solo{--_tile-lift:var(--tile-lift,4px);--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));--_tile-bar:color-mix(in oklab, var(--_solo-ink) 72%, #000);--_solo-depth:calc(var(--_tile-lift) * var(--ui-elevation,1));border:2px solid var(--_solo-edge);border-radius:var(--tile-radius,.75rem);box-shadow:0 var(--_solo-depth) 0 0 var(--_tile-bar), inset 0 0 0 100vmax var(--_solo-fill);font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}@media (prefers-contrast:more){.chunky-tile-solo{--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-600,oklch(43.9% 0 0)),var(--color-neutral-400,oklch(70.8% 0 0))))}}.chunky-tile-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.chunky-tile-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){letter-spacing:.04em;transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), translate var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1));font-weight:800}@media (prefers-reduced-motion:reduce){.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition-duration:.01ms}}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_tile-bar), inset 0 0 0 100vmax var(--_solo-fill);translate:0 var(--_solo-depth)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme,base;@layer components{.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-corner:var(--_cyber-cut);--ui-corner-surface:var(--_cyber-cut);--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0;--ui-radius:var(--cyber-shape);--ui-radius-surface:var(--cyber-shape-surface,0 var(--_cyber-cut) / 0 var(--_cyber-cut));--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:transparent;--ui-shadow-ink:0%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:var(--_cyber-glow);--ui-halo-spread:
|
|
1
|
+
@layer theme,base;@layer components{.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-corner:var(--_cyber-cut);--ui-corner-surface:var(--_cyber-cut);--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0;--ui-radius:var(--cyber-shape);--ui-radius-surface:var(--cyber-shape-surface,0 var(--_cyber-cut) / 0 var(--_cyber-cut));--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:transparent;--ui-shadow-ink:0%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:var(--_cyber-glow);--ui-halo-spread:1px;--ui-halo-ink:60%;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@supports not (corner-shape:bevel){.cyber{--ui-corner:0;--ui-radius:0;--ui-radius-surface:0}}}@layer utilities;.cyber-solo{--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,var(--cyber-ink,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));border:1px solid var(--_solo-edge);border-radius:var(--cyber-shape-surface,0 min(var(--cyber-cut,.625rem), 25%) / 0 min(var(--cyber-cut,.625rem), 25%));corner-shape:bevel;box-shadow:0 0 var(--cyber-glow,8px) 1px color-mix(in oklab, var(--_solo-ink) 60%, transparent), inset 0 0 0 100vmax var(--_solo-fill);font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.cyber-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.cyber-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--cyber-shape,min(var(--cyber-cut,.625rem), 25%) 0 / min(var(--cyber-cut,.625rem), 25%) 0);transition:scale var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}@media (prefers-reduced-motion:reduce){.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition-duration:.01ms}}@supports not (corner-shape:bevel){.cyber-solo,.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:0}}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){scale:.97}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme,base;@layer components{.glass{--ui-corner:var(--glass-radius,.75rem);--ui-corner-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-control-ink:light-dark(#0000008c,#ffffff8c);--ui-rule-ink:light-dark(#0003,#fff3);--ui-bg-alpha:1;--ui-backdrop:blur(14px) saturate(1.6);--ui-surface-image:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent);--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-hover-transform:none;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@media (prefers-reduced-transparency:reduce){.glass{--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}@media (prefers-reduced-motion:reduce){.glass{--ui-active-transform:none}}.glass-liquid{--ui-corner:var(--glass-radius,1rem);--ui-corner-surface:var(--glass-radius-surface,1.5rem);--ui-corner-shape:squircle;--_glass-liquid-blur:blur(2px) saturate(1.8);--_glass-liquid-lens:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");--_glass-liquid-rim:inset 1px 1px 0 light-dark(#ffffffbf,#ffffff59), inset -1px -1px 0 light-dark(#ffffff59,#ffffff1f), inset 0 0 18px light-dark(#ffffff38,#ffffff0d);--_glass-liquid-sheen:linear-gradient(160deg, light-dark(#ffffff38,#ffffff0f), transparent 45%)}.glass.glass-liquid,.glass .glass-liquid{--ui-ink:light-dark(#ffffff73,#ffffff29);--ui-surface-ground:color-mix(in srgb, var(--color-background) 30%, transparent);--ui-surface-image:initial;--ui-backdrop:none}@media (prefers-reduced-transparency:reduce){.glass.glass-liquid,.glass .glass-liquid{--ui-surface-ground:var(--color-background)}.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none}}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *){isolation:isolate;position:relative}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):before,:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:"";pointer-events:none;position:absolute;inset:0}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}.glass-solo.glass-liquid{position:relative}}@layer utilities;@media (forced-colors:active){.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none;--_glass-liquid-rim:none;--_glass-liquid-sheen:none}}.glass-solo{background-color:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 45%, transparent);border-radius:var(--glass-radius-surface,1rem);-webkit-backdrop-filter:blur(14px)saturate(1.6);backdrop-filter:blur(14px)saturate(1.6);border:1px solid light-dark(#ffffffa6,#ffffff38);box-shadow:0 1px 2px -1px light-dark(#0f172a14,#0000008c),0 18px 40px -16px light-dark(#0f172a14,#0000008c)}@media (prefers-reduced-transparency:reduce){.glass-solo{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)));-webkit-backdrop-filter:none;backdrop-filter:none}}.glass-solo.glass-liquid{isolation:isolate;background-color:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 30%, transparent);border-radius:var(--glass-radius-surface,1.5rem);corner-shape:squircle;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:light-dark(#ffffff73,#ffffff29)}.glass-solo.glass-liquid:before,.glass-solo.glass-liquid:after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:"";pointer-events:none;position:absolute;inset:0}.glass-solo.glass-liquid:before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}.glass-solo.glass-liquid:after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}@media (prefers-reduced-transparency:reduce){.glass-solo.glass-liquid{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}}
|
|
1
|
+
@layer theme,base;@layer components{.glass{--ui-corner:var(--glass-radius,.75rem);--ui-corner-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-control-ink:light-dark(#0000008c,#ffffff8c);--_unfilled-ink:light-dark(#0000008c,#ffffff8c);--ui-rule-ink:light-dark(#0003,#fff3);--ui-bg-alpha:1;--ui-backdrop:blur(14px) saturate(1.6);--ui-surface-image:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent);--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-hover-transform:none;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-default,ui-sans-serif, system-ui, sans-serif)}:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch){--_unfilled-ink:initial}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass{--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}@media (prefers-contrast:more){.glass{--ui-ink:var(--color-control-border)}}.glass-liquid:not(.glass-solo){--ui-corner:var(--glass-radius,1rem);--ui-corner-surface:var(--glass-radius-surface,1.5rem);--ui-corner-shape:squircle}.glass-liquid{--_glass-liquid-blur:blur(2px) saturate(1.8);--_glass-liquid-lens:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");--_glass-liquid-lens-control:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='3'/><feGaussianBlur stdDeviation='3.5' result='ramp'/><feOffset in='ramp' dx='-1' result='l'/><feOffset in='ramp' dx='1' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-1' result='u'/><feOffset in='ramp' dy='1' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='40' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");--_glass-liquid-rim:inset 1px 1px 0 light-dark(#ffffffbf,#ffffff59), inset -1px -1px 0 light-dark(#ffffff59,#ffffff1f), inset 0 0 18px light-dark(#ffffff38,#ffffff0d);--_glass-liquid-sheen:linear-gradient(160deg, light-dark(#ffffff38,#ffffff0f), transparent 45%)}.glass.glass-liquid:not(.glass-solo),.glass .glass-liquid:not(.glass-solo){--ui-ink:light-dark(#ffffff73,#ffffff29);--ui-surface-ground:color-mix(in srgb, var(--color-background) 30%, transparent);--ui-surface-image:initial;--ui-backdrop:var(--_glass-liquid-blur)}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass.glass-liquid:not(.glass-solo),.glass .glass-liquid:not(.glass-solo){--ui-surface-ground:var(--color-background)}.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none;--_glass-liquid-lens-control:none}}@media (prefers-contrast:more){.glass.glass-liquid:not(.glass-solo),.glass .glass-liquid:not(.glass-solo){--ui-ink:var(--color-control-border)}}.glass-liquid:not(.glass-solo):is(.glass,.glass *){--_glass-liquid-on: ;--_glass-liquid-backdrop:initial}.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch){--_glass-liquid-on:initial;--_glass-liquid-backdrop:var(--ui-backdrop)}:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *){--ui-backdrop:var(--_glass-liquid-backdrop,none);position:var(--_glass-liquid-on) relative;isolation:var(--_glass-liquid-on) isolate}:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):before,:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:var(--_glass-liquid-on) "";pointer-events:none;position:absolute;inset:0}:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}.btn.glass-liquid:is(.glass,.glass *){--_glass-liquid-lens:var(--_glass-liquid-lens-control)}.glass-solo.glass-liquid{position:relative}}@layer utilities{.btn.glass-liquid:is(.glass,.glass *){--_d-ground:var(--ui-surface-ground,transparent)}}@media (forced-colors:active){.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none;--_glass-liquid-lens-control:none;--_glass-liquid-rim:none;--_glass-liquid-sheen:none}}.glass-solo{--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(#ffffffa6,#ffffff38));--_solo-ground:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 45%, transparent);--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), transparent);background-color:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), var(--_solo-ground));border:1px solid var(--_solo-edge);border-radius:var(--glass-radius-surface,1rem);-webkit-backdrop-filter:blur(14px)saturate(1.6);backdrop-filter:blur(14px)saturate(1.6);box-shadow:0 1px 2px -1px light-dark(#0f172a14,#0000008c),0 18px 40px -16px light-dark(#0f172a14,#0000008c)}.glass-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.glass-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass-solo{--_solo-ground:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)));-webkit-backdrop-filter:none;backdrop-filter:none}}@media (prefers-contrast:more){.glass-solo{--_solo-ink:var(--_solo-intent-border,var(--color-control-border,oklch(55.6% 0 0)))}}.glass-solo.glass-liquid{--_solo-ground:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 30%, transparent);--_solo-ink:var(--_solo-intent-border,light-dark(#ffffff73,#ffffff29));isolation:isolate;border-radius:var(--glass-radius-surface,1.5rem);corner-shape:squircle;-webkit-backdrop-filter:none;backdrop-filter:none}.glass-solo.glass-liquid:before,.glass-solo.glass-liquid:after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:"";pointer-events:none;position:absolute;inset:0}.glass-solo.glass-liquid:before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}.glass-solo.glass-liquid:after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass-solo.glass-liquid{--_solo-ground:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}}@media (prefers-contrast:more){.glass-solo.glass-liquid{--_solo-ink:var(--_solo-intent-border,var(--color-control-border,oklch(55.6% 0 0)))}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
2
|
-
@layer theme,base;@layer components{.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-ink:100%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:var(--_neo-offset);--ui-active-translate-y:var(--_neo-offset);--ui-hover-transform:none;--ui-focus-inset:initial;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}.glass{--ui-corner:var(--glass-radius,.75rem);--ui-corner-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-control-ink:light-dark(#0000008c,#ffffff8c);--ui-rule-ink:light-dark(#0003,#fff3);--ui-bg-alpha:1;--ui-backdrop:blur(14px) saturate(1.6);--ui-surface-image:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-hover-transform:none;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@media (prefers-reduced-transparency:reduce){.glass{--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}@media (prefers-reduced-motion:reduce){.glass{--ui-active-transform:none}}.glass-liquid{--ui-corner:var(--glass-radius,1rem);--ui-corner-surface:var(--glass-radius-surface,1.5rem);--ui-corner-shape:squircle;--_glass-liquid-blur:blur(2px) saturate(1.8);--_glass-liquid-lens:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");--_glass-liquid-rim:inset 1px 1px 0 light-dark(#ffffffbf,#ffffff59), inset -1px -1px 0 light-dark(#ffffff59,#ffffff1f), inset 0 0 18px light-dark(#ffffff38,#ffffff0d);--_glass-liquid-sheen:linear-gradient(160deg, light-dark(#ffffff38,#ffffff0f), transparent 45%)}.glass.glass-liquid,.glass .glass-liquid{--ui-ink:light-dark(#ffffff73,#ffffff29);--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass.glass-liquid,.glass .glass-liquid{--ui-surface-ground:color-mix(in srgb, var(--color-background) 30%, transparent)}}.glass.glass-liquid,.glass .glass-liquid{--ui-surface-image:initial;--ui-backdrop:none}@media (prefers-reduced-transparency:reduce){.glass.glass-liquid,.glass .glass-liquid{--ui-surface-ground:var(--color-background)}.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none}}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *){isolation:isolate;position:relative}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):before,:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:"";pointer-events:none;position:absolute;inset:0}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}:is(.glass-liquid,.glass-liquid *):is(.glass,.glass *):is(.card,.panel,.alert,.tooltip-bubble,.surface,.data-table:not(.solid,.ghost)):not(.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch),.glass-liquid :is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch) *,.glass-liquid .glass:not(.glass-liquid),.glass-liquid .glass:not(.glass-liquid) *):after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}.glass-solo.glass-liquid{position:relative}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-control-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400));--ui-rule-ink:initial;--ui-corner:var(--_tile-radius);--ui-corner-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:0px;--ui-active-translate-y:var(--_tile-lift);--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));--ui-label-weight:800;--ui-label-tracking:.04em;--ui-label-case:initial;--ui-label-shadow:initial}.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-corner:var(--_cyber-cut);--ui-corner-surface:var(--_cyber-cut);--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0;--ui-radius:var(--cyber-shape);--ui-radius-surface:var(--cyber-shape-surface,0 var(--_cyber-cut) / 0 var(--_cyber-cut));--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:transparent;--ui-shadow-ink:0%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:var(--_cyber-glow);--ui-halo-spread:0px;--ui-halo-ink:40%;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@supports not (corner-shape:bevel){.cyber{--ui-corner:0;--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-transform:none}}.sketch{--ui-corner:initial;--ui-corner-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px);--ui-radius-surface:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);--ui-radius-pill:var(--sketch-radius-pill,20px 22px 21px 19px / 20px 22px 21px 19px);--ui-radius-tight:11px 1px 7px 2px / 2px 7px 1px 11px;--ui-corner-shape:round;--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:solid;--ui-rule-style:initial;--ui-shadow-ink:0%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:2px;--ui-shadow-y:2px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-focus-inset:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-backdrop:none;--ui-surface-image:initial;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-sketch,cursive)}@media (prefers-reduced-motion:reduce){.sketch{--ui-active-transform:none}}.sketch-rounded{--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px);--ui-radius-surface:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px);--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px);--ui-radius-tight:9px 3px 8px 4px / 4px 8px 3px 7px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n+2){--ui-radius:var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n+3){--ui-radius:var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n){--ui-radius:var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px)}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px)}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px)}.field:nth-child(4n) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert,.data-table):nth-child(4n+2){--ui-radius-surface:var(--sketch-radius-surface,4px 75px 5px 80px / 75px 3px 80px 4px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert,.data-table):nth-child(4n+3){--ui-radius-surface:var(--sketch-radius-surface,75px 70px 4px 5px / 4px 3px 75px 70px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert,.data-table):nth-child(4n){--ui-radius-surface:var(--sketch-radius-surface,5px 80px 75px 4px / 75px 4px 5px 70px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--ui-radius-tight:2px 8px 1px 10px / 8px 2px 10px 1px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--ui-radius-tight:8px 2px 10px 1px / 1px 9px 2px 8px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--ui-radius-tight:1px 10px 2px 7px / 9px 1px 8px 2px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n+2){--ui-radius:var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n+3){--ui-radius:var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n){--ui-radius:var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px)}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px)}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px)}.field:nth-child(4n) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert,.data-table):nth-child(4n+2){--ui-radius-surface:var(--sketch-radius-surface-rounded,17px 36px 18px 34px / 33px 16px 32px 17px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert,.data-table):nth-child(4n+3){--ui-radius-surface:var(--sketch-radius-surface-rounded,35px 18px 38px 15px / 17px 32px 16px 34px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert,.data-table):nth-child(4n){--ui-radius-surface:var(--sketch-radius-surface-rounded,18px 35px 16px 37px / 31px 17px 34px 16px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--ui-radius-tight:4px 8px 3px 9px / 8px 3px 8px 4px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--ui-radius-tight:8px 4px 9px 3px / 3px 9px 4px 8px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--ui-radius-tight:3px 9px 4px 8px / 9px 4px 8px 3px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill{--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n+2){--ui-radius-pill:var(--sketch-radius-pill,17px 23px 16px 24px / 21px 16px 20px 17px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n+3){--ui-radius-pill:var(--sketch-radius-pill,23px 17px 24px 16px / 16px 20px 17px 21px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n){--ui-radius-pill:var(--sketch-radius-pill,16px 24px 17px 23px / 20px 17px 21px 16px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.badge,.progress,.switch){--ui-radius-pill:var(--ui-radius-tight)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.radio,.tooltip-icon){--ui-radius-pill:48% 52% 46% 54% / 53% 46% 54% 47%}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *).checkbox{--ui-line-style:dashed}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):is(.divider,.data-table){--ui-rule-style:dashed}}@layer utilities{.neobrutalism .alert{--_d-elevation:1}}.neobrutalism-solo{--_neo-offset:var(--neo-offset,4px);--_neo-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));border:2px solid var(--_neo-ink);box-shadow:var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1));border-radius:0}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_neo-ink);transform:translate(var(--_neo-offset), var(--_neo-offset))}@media (prefers-reduced-motion:reduce){.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}@media (forced-colors:active){.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none;--_glass-liquid-rim:none;--_glass-liquid-sheen:none}}.glass-solo{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}@supports (color:color-mix(in lab, red, red)){.glass-solo{background-color:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 45%, transparent)}}.glass-solo{border-radius:var(--glass-radius-surface,1rem);-webkit-backdrop-filter:blur(14px)saturate(1.6);backdrop-filter:blur(14px)saturate(1.6);border:1px solid light-dark(#ffffffa6,#ffffff38);box-shadow:0 1px 2px -1px light-dark(#0f172a14,#0000008c),0 18px 40px -16px light-dark(#0f172a14,#0000008c)}@media (prefers-reduced-transparency:reduce){.glass-solo{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)));-webkit-backdrop-filter:none;backdrop-filter:none}}.glass-solo.glass-liquid{isolation:isolate;background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}@supports (color:color-mix(in lab, red, red)){.glass-solo.glass-liquid{background-color:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 30%, transparent)}}.glass-solo.glass-liquid{border-radius:var(--glass-radius-surface,1.5rem);corner-shape:squircle;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:light-dark(#ffffff73,#ffffff29)}.glass-solo.glass-liquid:before,.glass-solo.glass-liquid:after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:"";pointer-events:none;position:absolute;inset:0}.glass-solo.glass-liquid:before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}.glass-solo.glass-liquid:after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}@media (prefers-reduced-transparency:reduce){.glass-solo.glass-liquid{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}}.pixel-solo{--_pixel-unit:var(--pixel-unit,4px);--_pixel-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);clip-path:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);border:0;border-radius:0}.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,var(--_pixel-ink))}@supports (color:color-mix(in lab, red, red)){.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,color-mix(in srgb, var(--_pixel-ink) 64%, transparent))}}.chunky-tile-solo{--_tile-lift:var(--tile-lift,4px);--_tile-ink:light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0)));--_tile-bar:var(--_tile-ink)}@supports (color:color-mix(in lab, red, red)){.chunky-tile-solo{--_tile-bar:color-mix(in oklab, var(--_tile-ink) 72%, #000)}}.chunky-tile-solo{border:2px solid var(--_tile-ink);border-radius:var(--tile-radius,.75rem);box-shadow:0 var(--_tile-lift) 0 0 var(--_tile-bar);font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){letter-spacing:.04em;font-weight:800}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_tile-bar);transform:translateY(var(--_tile-lift))}@media (prefers-reduced-motion:reduce){.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}.cyber-solo{--_cyber-ink:var(--cyber-ink,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));border:1px solid var(--_cyber-ink);border-radius:var(--cyber-shape-surface,0 min(var(--cyber-cut,.625rem), 25%) / 0 min(var(--cyber-cut,.625rem), 25%));corner-shape:bevel;box-shadow:0 0 var(--cyber-glow,8px) 0 var(--_cyber-ink)}@supports (color:color-mix(in lab, red, red)){.cyber-solo{box-shadow:0 0 var(--cyber-glow,8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent)}}.cyber-solo{font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);transition:transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--cyber-shape,min(var(--cyber-cut,.625rem), 25%) 0 / min(var(--cyber-cut,.625rem), 25%) 0)}@supports not (corner-shape:bevel){.cyber-solo,.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:0}}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:scale(.97)}@media (prefers-reduced-motion:reduce){.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}.sketch-solo{--_sketch-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));border:1px solid var(--_sketch-ink);border-radius:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);font-family:var(--font-sketch,cursive);box-shadow:2px 2px light-dark(#0f172a14,#0000008c)}.sketch-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.sketch-solo.sketch-rounded{border-radius:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px)}.sketch-solo.sketch-rounded:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}@media (forced-colors:active){.sketch-solo{border-style:solid}}
|
|
1
|
+
/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer theme,base;@layer components{.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-ink:100%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:var(--_neo-offset);--ui-active-translate-y:var(--_neo-offset);--ui-hover-transform:none;--ui-focus-inset:initial;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-default,ui-sans-serif, system-ui, sans-serif)}.glass{--ui-corner:var(--glass-radius,.75rem);--ui-corner-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-control-ink:light-dark(#0000008c,#ffffff8c);--_unfilled-ink:light-dark(#0000008c,#ffffff8c);--ui-rule-ink:light-dark(#0003,#fff3);--ui-bg-alpha:1;--ui-backdrop:blur(14px) saturate(1.6);--ui-surface-image:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent);--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-hover-transform:none;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-default,ui-sans-serif, system-ui, sans-serif)}:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch){--_unfilled-ink:initial}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass{--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}@media (prefers-contrast:more){.glass{--ui-ink:var(--color-control-border)}}.glass-liquid:not(.glass-solo){--ui-corner:var(--glass-radius,1rem);--ui-corner-surface:var(--glass-radius-surface,1.5rem);--ui-corner-shape:squircle}.glass-liquid{--_glass-liquid-blur:blur(2px) saturate(1.8);--_glass-liquid-lens:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");--_glass-liquid-lens-control:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='3'/><feGaussianBlur stdDeviation='3.5' result='ramp'/><feOffset in='ramp' dx='-1' result='l'/><feOffset in='ramp' dx='1' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-1' result='u'/><feOffset in='ramp' dy='1' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='40' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");--_glass-liquid-rim:inset 1px 1px 0 light-dark(#ffffffbf,#ffffff59), inset -1px -1px 0 light-dark(#ffffff59,#ffffff1f), inset 0 0 18px light-dark(#ffffff38,#ffffff0d);--_glass-liquid-sheen:linear-gradient(160deg, light-dark(#ffffff38,#ffffff0f), transparent 45%)}.glass.glass-liquid:not(.glass-solo),.glass .glass-liquid:not(.glass-solo){--ui-ink:light-dark(#ffffff73,#ffffff29);--ui-surface-ground:color-mix(in srgb, var(--color-background) 30%, transparent);--ui-surface-image:initial;--ui-backdrop:var(--_glass-liquid-blur)}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass.glass-liquid:not(.glass-solo),.glass .glass-liquid:not(.glass-solo){--ui-surface-ground:var(--color-background)}.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none;--_glass-liquid-lens-control:none}}@media (prefers-contrast:more){.glass.glass-liquid:not(.glass-solo),.glass .glass-liquid:not(.glass-solo){--ui-ink:var(--color-control-border)}}.glass-liquid:not(.glass-solo):is(.glass,.glass *){--_glass-liquid-on: ;--_glass-liquid-backdrop:initial}.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch){--_glass-liquid-on:initial;--_glass-liquid-backdrop:var(--ui-backdrop)}:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *){--ui-backdrop:var(--_glass-liquid-backdrop,none);position:var(--_glass-liquid-on) relative;isolation:var(--_glass-liquid-on) isolate}:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):before,:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:var(--_glass-liquid-on) "";pointer-events:none;position:absolute;inset:0}:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}:is(:is(.glass-liquid:not(.glass-solo),.glass-liquid:not(.glass-solo) *):is(.glass,.glass *).data-table:not(.solid,.ghost):not(.glass:not(.glass-liquid),:is(.neobrutalism,.pixel,.chunky-tile,.cyber,.sketch)),.btn.glass-liquid:is(.glass,.glass *)):after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}.btn.glass-liquid:is(.glass,.glass *){--_glass-liquid-lens:var(--_glass-liquid-lens-control)}.glass-solo.glass-liquid{position:relative}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-control-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400));--ui-rule-ink:initial;--ui-corner:var(--_tile-radius);--ui-corner-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:0px;--ui-active-translate-y:var(--_tile-lift);--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));--ui-label-weight:800;--ui-label-tracking:.04em;--ui-label-case:initial;--ui-label-shadow:initial}@media (prefers-contrast:more){.chunky-tile{--ui-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400))}}.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-corner:var(--_cyber-cut);--ui-corner-surface:var(--_cyber-cut);--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0;--ui-radius:var(--cyber-shape);--ui-radius-surface:var(--cyber-shape-surface,0 var(--_cyber-cut) / 0 var(--_cyber-cut));--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:transparent;--ui-shadow-ink:0%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:var(--_cyber-glow);--ui-halo-spread:1px;--ui-halo-ink:60%;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-focus-inset:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@supports not (corner-shape:bevel){.cyber{--ui-corner:0;--ui-radius:0;--ui-radius-surface:0}}.sketch{--ui-corner:initial;--ui-corner-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px);--ui-radius-surface:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);--ui-radius-pill:var(--sketch-radius-pill,20px 22px 21px 19px / 20px 22px 21px 19px);--ui-radius-tight:11px 1px 7px 2px / 2px 7px 1px 11px;--ui-corner-shape:round;--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:solid;--ui-rule-style:initial;--ui-shadow-ink:0%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:2px;--ui-shadow-y:2px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-focus-inset:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-backdrop:none;--ui-surface-image:initial;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-sketch,cursive)}.sketch-rounded:not(.sketch-solo){--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px);--ui-radius-surface:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px);--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px);--ui-radius-tight:9px 3px 8px 4px / 4px 8px 3px 7px}.sketch,.sketch-rounded:not(.sketch-solo){--_sketch-on: ;--_sketch-pass-radius:initial;--_sketch-pass-radius-surface:initial;--_sketch-pass-radius-tight:initial;--_sketch-pass-radius-pill:initial;--_sketch-pass-line-style:initial;--_sketch-pass-rule-style:initial}.sketch{--_sketch-pointed: }.sketch-rounded:not(.sketch-solo){--_sketch-rounded: }:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber){--_sketch-on:initial;--_sketch-pointed:initial;--_sketch-rounded:initial;--_sketch-pass-radius:var(--ui-radius);--_sketch-pass-radius-surface:var(--ui-radius-surface);--_sketch-pass-radius-tight:var(--ui-radius-tight);--_sketch-pass-radius-pill:var(--ui-radius-pill);--_sketch-pass-line-style:var(--ui-line-style);--_sketch-pass-rule-style:var(--ui-rule-style)}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n+2){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n+3){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble):nth-child(4n){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.ipt,.textarea,.select,.input-group){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.ipt,.textarea,.select,.input-group){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.ipt,.textarea,.select,.input-group){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}.field:nth-child(4n) :is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.ipt,.textarea,.select,.input-group){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px);--ui-radius:var(--_sketch-pass-radius,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.card,.panel,.alert,.data-table):nth-child(4n+2){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius-surface,4px 75px 5px 80px / 75px 3px 80px 4px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-surface-rounded,17px 36px 18px 34px / 33px 16px 32px 17px);--ui-radius-surface:var(--_sketch-pass-radius-surface,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.card,.panel,.alert,.data-table):nth-child(4n+3){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius-surface,75px 70px 4px 5px / 4px 3px 75px 70px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-surface-rounded,35px 18px 38px 15px / 17px 32px 16px 34px);--ui-radius-surface:var(--_sketch-pass-radius-surface,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.card,.panel,.alert,.data-table):nth-child(4n){--_sketch-p:var(--_sketch-pointed) var(--sketch-radius-surface,5px 80px 75px 4px / 75px 4px 5px 70px);--_sketch-r:var(--_sketch-rounded) var(--sketch-radius-surface-rounded,18px 35px 16px 37px / 31px 17px 34px 16px);--ui-radius-surface:var(--_sketch-pass-radius-surface,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--_sketch-p:var(--_sketch-pointed) 2px 8px 1px 10px / 8px 2px 10px 1px;--_sketch-r:var(--_sketch-rounded) 4px 8px 3px 9px / 8px 3px 8px 4px;--ui-radius-tight:var(--_sketch-pass-radius-tight,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--_sketch-p:var(--_sketch-pointed) 8px 2px 10px 1px / 1px 9px 2px 8px;--_sketch-r:var(--_sketch-rounded) 8px 4px 9px 3px / 3px 9px 4px 8px;--ui-radius-tight:var(--_sketch-pass-radius-tight,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--_sketch-p:var(--_sketch-pointed) 1px 10px 2px 7px / 9px 1px 8px 2px;--_sketch-r:var(--_sketch-rounded) 3px 9px 4px 8px / 9px 4px 8px 3px;--ui-radius-tight:var(--_sketch-pass-radius-tight,var(--_sketch-r,var(--_sketch-p)))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)).btn.pill{--ui-radius-pill:var(--_sketch-pass-radius-pill,var(--_sketch-on) var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)).btn.pill:nth-child(4n+2){--ui-radius-pill:var(--_sketch-pass-radius-pill,var(--_sketch-on) var(--sketch-radius-pill,17px 23px 16px 24px / 21px 16px 20px 17px))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)).btn.pill:nth-child(4n+3){--ui-radius-pill:var(--_sketch-pass-radius-pill,var(--_sketch-on) var(--sketch-radius-pill,23px 17px 24px 16px / 16px 20px 17px 21px))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)).btn.pill:nth-child(4n){--ui-radius-pill:var(--_sketch-pass-radius-pill,var(--_sketch-on) var(--sketch-radius-pill,16px 24px 17px 23px / 20px 17px 21px 16px))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.badge,.progress,.switch){--ui-radius-pill:var(--_sketch-pass-radius-pill,var(--_sketch-on) var(--ui-radius-tight))}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.radio,.tooltip-icon){--ui-radius-pill:var(--_sketch-pass-radius-pill,var(--_sketch-on) 48% 52% 46% 54% / 53% 46% 54% 47%)}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.checkbox,:where(input[type=checkbox]:not(.switch,.radio))){--ui-line-style:var(--_sketch-pass-line-style,var(--_sketch-pointed) dashed)}:is(.sketch,.sketch-rounded:not(.sketch-solo),:is(.sketch,.sketch-rounded:not(.sketch-solo)) *):not(:is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber)):is(.divider,.data-table,:where(hr,table)){--ui-rule-style:var(--_sketch-pass-rule-style,var(--_sketch-pointed) dashed)}}@layer utilities{.neobrutalism{--_neo-alert-elevation:1}:is(.glass,.pixel,.chunky-tile,.cyber,.sketch){--_neo-alert-elevation:initial}:is(.neobrutalism .alert,.alert.neobrutalism){--_d-elevation:var(--_neo-alert-elevation,0)}.btn.glass-liquid:is(.glass,.glass *){--_d-ground:var(--ui-surface-ground,transparent)}}.neobrutalism-solo{--_neo-offset:var(--neo-offset,4px);--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));--_solo-depth:calc(var(--_neo-offset) * var(--ui-elevation,1));border:2px solid var(--_solo-edge);box-shadow:var(--_solo-depth) var(--_solo-depth) 0 0 var(--_solo-ink), inset 0 0 0 100vmax var(--_solo-fill);border-radius:0}.neobrutalism-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.neobrutalism-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), translate var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}@media (prefers-reduced-motion:reduce){.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition-duration:.01ms}}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_solo-ink), inset 0 0 0 100vmax var(--_solo-fill);translate:var(--_solo-depth) var(--_solo-depth)}@media (forced-colors:active){.glass-liquid{--_glass-liquid-blur:none;--_glass-liquid-lens:none;--_glass-liquid-lens-control:none;--_glass-liquid-rim:none;--_glass-liquid-sheen:none}}.glass-solo{--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(#ffffffa6,#ffffff38));--_solo-ground:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 45%, transparent);--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), transparent);background-color:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), var(--_solo-ground));border:1px solid var(--_solo-edge);border-radius:var(--glass-radius-surface,1rem);-webkit-backdrop-filter:blur(14px)saturate(1.6);backdrop-filter:blur(14px)saturate(1.6);box-shadow:0 1px 2px -1px light-dark(#0f172a14,#0000008c),0 18px 40px -16px light-dark(#0f172a14,#0000008c)}.glass-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.glass-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass-solo{--_solo-ground:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)));-webkit-backdrop-filter:none;backdrop-filter:none}}@media (prefers-contrast:more){.glass-solo{--_solo-ink:var(--_solo-intent-border,var(--color-control-border,oklch(55.6% 0 0)))}}.glass-solo.glass-liquid{--_solo-ground:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 30%, transparent);--_solo-ink:var(--_solo-intent-border,light-dark(#ffffff73,#ffffff29));isolation:isolate;border-radius:var(--glass-radius-surface,1.5rem);corner-shape:squircle;-webkit-backdrop-filter:none;backdrop-filter:none}.glass-solo.glass-liquid:before,.glass-solo.glass-liquid:after{z-index:-1;border-radius:inherit;corner-shape:inherit;content:"";pointer-events:none;position:absolute;inset:0}.glass-solo.glass-liquid:before{-webkit-backdrop-filter:var(--_glass-liquid-blur);backdrop-filter:var(--_glass-liquid-blur)}.glass-solo.glass-liquid:after{-webkit-backdrop-filter:var(--_glass-liquid-lens);backdrop-filter:var(--_glass-liquid-lens);background-image:var(--_glass-liquid-sheen);box-shadow:var(--_glass-liquid-rim)}@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){.glass-solo.glass-liquid{--_solo-ground:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}}@media (prefers-contrast:more){.glass-solo.glass-liquid{--_solo-ink:var(--_solo-intent-border,var(--color-control-border,oklch(55.6% 0 0)))}}.pixel-solo{--_pixel-unit:var(--pixel-unit,4px);--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), transparent);box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_solo-edge), inset 0 0 0 100vmax var(--_solo-fill);clip-path:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);border:0;border-radius:0}.pixel-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.pixel-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_solo-edge), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,color-mix(in srgb, light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))) 64%, transparent)), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px) + 2px) var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))), inset 0 0 0 100vmax var(--_solo-fill)}@media (forced-colors:active){.pixel-solo{outline:var(--_pixel-unit) solid CanvasText;outline-offset:calc(-1 * var(--_pixel-unit));clip-path:none}.pixel-solo:focus-visible{outline-color:highlight}}.chunky-tile-solo{--_tile-lift:var(--tile-lift,4px);--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));--_tile-bar:color-mix(in oklab, var(--_solo-ink) 72%, #000);--_solo-depth:calc(var(--_tile-lift) * var(--ui-elevation,1));border:2px solid var(--_solo-edge);border-radius:var(--tile-radius,.75rem);box-shadow:0 var(--_solo-depth) 0 0 var(--_tile-bar), inset 0 0 0 100vmax var(--_solo-fill);font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}@media (prefers-contrast:more){.chunky-tile-solo{--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-600,oklch(43.9% 0 0)),var(--color-neutral-400,oklch(70.8% 0 0))))}}.chunky-tile-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.chunky-tile-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){letter-spacing:.04em;transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), translate var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1));font-weight:800}@media (prefers-reduced-motion:reduce){.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition-duration:.01ms}}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_tile-bar), inset 0 0 0 100vmax var(--_solo-fill);translate:0 var(--_solo-depth)}.cyber-solo{--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,var(--cyber-ink,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));border:1px solid var(--_solo-edge);border-radius:var(--cyber-shape-surface,0 min(var(--cyber-cut,.625rem), 25%) / 0 min(var(--cyber-cut,.625rem), 25%));corner-shape:bevel;box-shadow:0 0 var(--cyber-glow,8px) 1px color-mix(in oklab, var(--_solo-ink) 60%, transparent), inset 0 0 0 100vmax var(--_solo-fill);font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.cyber-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.cyber-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--cyber-shape,min(var(--cyber-cut,.625rem), 25%) 0 / min(var(--cyber-cut,.625rem), 25%) 0);transition:scale var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}@media (prefers-reduced-motion:reduce){.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition-duration:.01ms}}@supports not (corner-shape:bevel){.cyber-solo,.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:0}}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){scale:.97}.sketch-solo{--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));--_solo-depth:calc(2px * var(--ui-elevation,1));border:1px solid var(--_solo-edge);border-radius:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);box-shadow:var(--_solo-depth) var(--_solo-depth) 0 0 light-dark(#0f172a14,#0000008c), inset 0 0 0 100vmax var(--_solo-fill);font-family:var(--font-sketch,cursive)}.sketch-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.sketch-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.sketch-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.sketch-solo.sketch-rounded{border-radius:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px)}.sketch-solo.sketch-rounded:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}@media (forced-colors:active){.sketch-solo{border-style:solid}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme,base;@layer components{.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-ink:100%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:var(--_neo-offset);--ui-active-translate-y:var(--_neo-offset);--ui-hover-transform:none;--ui-focus-inset:initial;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities{.neobrutalism .alert{--_d-elevation:
|
|
1
|
+
@layer theme,base;@layer components{.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-ink:100%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:var(--_neo-offset);--ui-active-translate-y:var(--_neo-offset);--ui-hover-transform:none;--ui-focus-inset:initial;--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-default,ui-sans-serif, system-ui, sans-serif)}}@layer utilities{.neobrutalism{--_neo-alert-elevation:1}:is(.glass,.pixel,.chunky-tile,.cyber,.sketch){--_neo-alert-elevation:initial}:is(.neobrutalism .alert,.alert.neobrutalism){--_d-elevation:var(--_neo-alert-elevation,0)}}.neobrutalism-solo{--_neo-offset:var(--neo-offset,4px);--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), var(--_solo-fill));--_solo-depth:calc(var(--_neo-offset) * var(--ui-elevation,1));border:2px solid var(--_solo-edge);box-shadow:var(--_solo-depth) var(--_solo-depth) 0 0 var(--_solo-ink), inset 0 0 0 100vmax var(--_solo-fill);border-radius:0}.neobrutalism-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.neobrutalism-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), translate var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}@media (prefers-reduced-motion:reduce){.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){transition-duration:.01ms}}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_solo-ink), inset 0 0 0 100vmax var(--_solo-fill);translate:var(--_solo-depth) var(--_solo-depth)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme,base;@layer components{.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities;.pixel-solo{--_pixel-unit:var(--pixel-unit,4px);--
|
|
1
|
+
@layer theme,base;@layer components{.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-ink:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:var(--color-control-border);--ui-rule-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities;.pixel-solo{--_pixel-unit:var(--pixel-unit,4px);--_solo-intent-color:initial;--_solo-intent-contrast:initial;--_solo-intent-strong:initial;--_solo-intent-border:initial;--_solo-intent-fill-max:initial;--_solo-color:var(--_solo-intent-color,var(--color-text,light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0))));--_solo-contrast:var(--_solo-intent-contrast,var(--color-text-contrast,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))));--_solo-strong:var(--_solo-intent-strong,var(--color-text-strong,light-dark(oklch(20.5% 0 0),oklch(97% 0 0))));--_solo-capped:min(var(--ui-fill,0%), var(--_solo-intent-fill-max,20%));--_solo-fill:color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);--_solo-on-fill:min(var(--ui-fg-on-fill,0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));--_solo-fg:color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));--_solo-ink:var(--_solo-intent-border,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));--_solo-edge:color-mix(in oklab, var(--_solo-ink) var(--ui-border,100%), transparent);box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_solo-edge), inset 0 0 0 100vmax var(--_solo-fill);clip-path:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);border:0;border-radius:0}.pixel-solo:is(.primary,.secondary,.success,.warning,.destructive,.info){--_solo-intent-color:var(--intent-color);--_solo-intent-contrast:var(--intent-contrast);--_solo-intent-strong:var(--intent-strong);--_solo-intent-border:var(--intent-border);--_solo-intent-fill-max:var(--intent-fill-max)}.pixel-solo:is(.solid,.soft,.ghost,.primary,.secondary,.success,.warning,.destructive,.info,:is(.solid,.soft,.ghost) *){color:var(--_solo-fg)}.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_solo-edge), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,color-mix(in srgb, light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))) 64%, transparent)), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px) + 2px) var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))), inset 0 0 0 100vmax var(--_solo-fill)}@media (forced-colors:active){.pixel-solo{outline:var(--_pixel-unit) solid CanvasText;outline-offset:calc(-1 * var(--_pixel-unit));clip-path:none}.pixel-solo:focus-visible{outline-color:highlight}}
|