@codenhub/styles 0.4.0 → 0.6.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.
Files changed (61) hide show
  1. package/README.md +7 -7
  2. package/dist/aesthetics/chunky-tile.css +1 -1
  3. package/dist/aesthetics/cyber.css +1 -1
  4. package/dist/aesthetics/glass.css +1 -1
  5. package/dist/aesthetics/index.css +1 -1
  6. package/dist/aesthetics/neobrutalism.css +1 -1
  7. package/dist/aesthetics/pixel.css +1 -1
  8. package/dist/aesthetics/sketch.css +1 -0
  9. package/dist/components.css +1 -1
  10. package/dist/index.css +1 -1
  11. package/dist/native.css +1 -1
  12. package/dist/palette.css +1 -1
  13. package/dist/theme.css +1 -1
  14. package/dist/tw/aesthetics/chunky-tile.css +144 -128
  15. package/dist/tw/aesthetics/cyber.css +138 -96
  16. package/dist/tw/aesthetics/glass.css +332 -66
  17. package/dist/tw/aesthetics/index.css +3 -1
  18. package/dist/tw/aesthetics/neobrutalism.css +113 -54
  19. package/dist/tw/aesthetics/pixel.css +137 -87
  20. package/dist/tw/aesthetics/sketch.css +333 -0
  21. package/dist/tw/box.css +139 -52
  22. package/dist/tw/components/button.css +67 -28
  23. package/dist/tw/components/feedback.css +85 -67
  24. package/dist/tw/components/form.css +300 -230
  25. package/dist/tw/components/index.css +17 -9
  26. package/dist/tw/components/loader.css +38 -30
  27. package/dist/tw/components/surface.css +89 -129
  28. package/dist/tw/components/tooltip.css +91 -47
  29. package/dist/tw/corner.css +26 -0
  30. package/dist/tw/elevation.css +19 -28
  31. package/dist/tw/index.css +15 -19
  32. package/dist/tw/intent.css +47 -32
  33. package/dist/tw/native.css +58 -42
  34. package/dist/tw/palette.css +455 -446
  35. package/dist/tw/presentation.css +20 -29
  36. package/dist/tw/reset.css +21 -28
  37. package/dist/tw/surface.css +61 -0
  38. package/dist/tw/theme.css +156 -153
  39. package/dist/tw/utilities/content.css +283 -205
  40. package/dist/tw/utilities/layout.css +17 -27
  41. package/docs/accessibility.md +63 -46
  42. package/docs/changelog/0.5.0.md +38 -0
  43. package/docs/changelog/0.6.0.md +52 -0
  44. package/docs/changelog/index.md +2 -0
  45. package/docs/concepts.md +6 -6
  46. package/docs/index.md +12 -3
  47. package/docs/integrating/nextjs.md +1 -1
  48. package/docs/integrating/tailwind.md +14 -6
  49. package/docs/setup.md +28 -8
  50. package/docs/usage/aesthetics.md +88 -18
  51. package/docs/usage/buttons.md +14 -14
  52. package/docs/usage/composing.md +12 -12
  53. package/docs/usage/content-and-layout.md +25 -24
  54. package/docs/usage/customizing.md +92 -55
  55. package/docs/usage/feedback.md +5 -3
  56. package/docs/usage/forms.md +61 -45
  57. package/docs/usage/theming.md +41 -42
  58. package/docs/usage/tooltips.md +37 -17
  59. package/llms-full.txt +590 -304
  60. package/llms.txt +6 -0
  61. package/package.json +15 -5
package/README.md CHANGED
@@ -38,16 +38,16 @@ For the Tailwind CSS v4 entrypoint, theme selection, the intent/presentation axe
38
38
 
39
39
  ## Requirements
40
40
 
41
- | Requirement | Details |
42
- | ------------- | -------------------------------------------------------------------------------------------------------------- |
43
- | CSS imports | Consumer tooling must resolve package CSS imports. |
44
- | Browsers | Chrome 123, Safari 17.5, or Firefox 121 and newer (`light-dark()` theming; `:has()` for `.input-group` state). |
45
- | Tailwind CSS | Version 4 or newer is required only for `/tw` source entrypoints. |
46
- | Accessibility | Consumers provide semantic HTML, ARIA, keyboard behavior, and focus management. |
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
+ | Accessibility | Consumers provide semantic HTML, ARIA, keyboard behavior, and focus management. |
47
47
 
48
48
  ## Notes
49
49
 
50
- This package has no JavaScript behavior; no version provides compatibility aliases for a removed class or token. `0.2.0` removes `.btn.loading` (compose a disabled `.btn` with a `.loader` child instead) and `.alert.icon`'s built-in glyph (drop a consumer-supplied icon into `.alert-icon` instead), and `.tooltip` now requires a `.tooltip-bubble` child element rather than a `data-tooltip` attribute. See the [changelog](./docs/changelog/index.md) for the complete history.
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.
51
51
 
52
52
  ## License
53
53
 
package/dist/aesthetics/chunky-tile.css CHANGED
@@ -1 +1 @@
1
- .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-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--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-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}.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:color-mix(in oklab, var(--_tile-ink) 72%, #000);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}}
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);--_tile-ink:light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0)));--_tile-bar:color-mix(in oklab, var(--_tile-ink) 72%, #000);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}}
package/dist/aesthetics/cyber.css CHANGED
@@ -1 +1 @@
1
- .cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--_cyber-shape:var(--cyber-shape,min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);--_cyber-shape-surface:var(--cyber-shape-surface,0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-radius:var(--_cyber-shape);--ui-radius-surface:var(--_cyber-shape-surface);--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--elevation-color:transparent;--ui-shadow-ink:40%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:var(--_cyber-glow);--ui-shadow-spread:0px;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}@supports not (corner-shape:bevel){.cyber{--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-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 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);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}}
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: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}}}@layer utilities;.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 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);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}}
package/dist/aesthetics/glass.css CHANGED
@@ -1 +1 @@
1
- .glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--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-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.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}}
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)))}}
package/dist/aesthetics/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
- .neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.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}}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--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-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.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}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--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-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.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{--_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-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--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-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}.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{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--_cyber-shape:var(--cyber-shape,min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);--_cyber-shape-surface:var(--cyber-shape-surface,0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-radius:var(--_cyber-shape);--ui-radius-surface:var(--_cyber-shape-surface);--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--elevation-color:transparent;--ui-shadow-ink:40%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:var(--_cyber-glow);--ui-shadow-spread:0px;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}@supports not (corner-shape:bevel){.cyber{--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-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}}
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}}
package/dist/aesthetics/neobrutalism.css CHANGED
@@ -1 +1 @@
1
- .neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.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}}
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}}.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}}
package/dist/aesthetics/pixel.css CHANGED
@@ -1 +1 @@
1
- .pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--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-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.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,color-mix(in srgb, var(--_pixel-ink) 64%, transparent))}
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);--_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,color-mix(in srgb, var(--_pixel-ink) 64%, transparent))}
package/dist/aesthetics/sketch.css ADDED
@@ -0,0 +1 @@
1
+ @layer theme,base;@layer components{.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;.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}}