@lottecode/lottecss 0.0.3 → 0.0.5

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 (5) hide show
  1. package/README.md +5 -5
  2. package/package.json +2 -2
  3. package/src/css/button.css +6 -13
  4. package/src/css/forms.css +7 -3
  5. package/dist/styles.css +0 -1
package/README.md CHANGED
@@ -25,11 +25,11 @@ That's it. Your semantic HTML is now styled.
25
25
 
26
26
  ---
27
27
 
28
- ## For AI Assistants (Claude, etc.)
28
+ ## For AI assistants (Claude, etc.)
29
29
 
30
30
  If you are an AI assistant generating markup for a project that uses lottecss, read this section carefully.
31
31
 
32
- ### The Core Rule
32
+ ### The core rule
33
33
 
34
34
  **Do not style anything.** lottecss does it for you. Your job is to write correct, semantic HTML.
35
35
 
@@ -42,7 +42,7 @@ If you are an AI assistant generating markup for a project that uses lottecss, r
42
42
  - Use `.card` class for card-like containers
43
43
  - Use basic Tailwind utilities (`flex`, `grid`, `gap-*`, `p-*`, `m-*`) for layout only
44
44
 
45
- ### Do Not
45
+ ### Do not
46
46
 
47
47
  - Add `style=""` attributes to any element
48
48
  - Add visual classes (`text-xl`, `text-blue-500`, `font-bold`, `bg-gray-100`, etc.)
@@ -87,13 +87,13 @@ If you are an AI assistant generating markup for a project that uses lottecss, r
87
87
  <div class="card-header">Not a real element</div>
88
88
  ```
89
89
 
90
- ### If Something Looks Wrong
90
+ ### If something looks wrong
91
91
 
92
92
  Choose a different semantic element — don't add styling. The element you picked is probably wrong for that context.
93
93
 
94
94
  ---
95
95
 
96
- ## What lottecss Styles
96
+ ## What lottecss styles
97
97
 
98
98
  | Module | What it covers |
99
99
  |---|---|
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lottecode/lottecss",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "out of the box design and styling for your semantic markup",
5
5
  "type": "module",
6
6
  "main": "styles.css",
@@ -25,4 +25,4 @@
25
25
  "dependencies": {
26
26
  "tailwindcss": "^4.2.2"
27
27
  }
28
- }
28
+ }
package/src/css/button.css CHANGED
@@ -3,14 +3,18 @@ body {
3
3
  & input[type="button"],
4
4
  & button[type="submit"] {
5
5
  display: inline-block;
6
+ font-family: inherit;
6
7
  font-weight: 400;
7
8
  text-align: center;
8
9
  white-space: nowrap;
9
10
  vertical-align: middle;
10
11
  user-select: none;
11
- padding: 0.55rem 1.5rem;
12
+ margin: 0;
13
+ padding: 0.25rem 0.5rem;
14
+ font-size: 0.75rem;
12
15
  line-height: 1.5;
13
- border-radius: 2rem;
16
+ border: 1px solid var(--color-border);
17
+ border-radius: 0;
14
18
  transition:
15
19
  color 0.15s ease-in-out,
16
20
  background-color 0.15s ease-in-out,
@@ -32,17 +36,6 @@ body {
32
36
  background-color: var(--color-highlight);
33
37
  }
34
38
 
35
- /* Clerk button overrides */
36
- & .cl-formButtonPrimary,
37
- & .cl-formButtonPrimary span {
38
- color: white !important;
39
- border-radius: 2rem !important;
40
- }
41
-
42
- & [class*="cl-"] * {
43
- margin-bottom: 0 !important;
44
- }
45
-
46
39
  /* Disabled state */
47
40
 
48
41
  & button:disabled,
package/src/css/forms.css CHANGED
@@ -15,6 +15,10 @@ body {
15
15
  /*background-color: var(--color-surface);*/
16
16
  }
17
17
 
18
+ & fieldset + fieldset {
19
+ margin-top: 1.5rem;
20
+ }
21
+
18
22
  & legend {
19
23
  width: auto;
20
24
  padding: 0 0.5rem;
@@ -97,7 +101,7 @@ body {
97
101
  background-color: var(--color-background);
98
102
  background-clip: padding-box;
99
103
  border: 1px solid var(--color-border);
100
- border-radius: 0.25rem;
104
+ border-radius: 0;
101
105
  }
102
106
 
103
107
  & input[type="radio"],
@@ -128,7 +132,7 @@ body {
128
132
  background-color: var(--color-background);
129
133
  background-clip: padding-box;
130
134
  border: 1px solid var(--color-border);
131
- border-radius: 0.25rem;
135
+ border-radius: 0;
132
136
  }
133
137
 
134
138
  & select[multiple] {
@@ -146,7 +150,7 @@ body {
146
150
  background-color: var(--color-background);
147
151
  background-clip: padding-box;
148
152
  border: 1px solid var(--color-border);
149
- border-radius: 0.25rem;
153
+ border-radius: 0;
150
154
  resize: vertical;
151
155
  }
152
156
 
package/dist/styles.css DELETED
@@ -1 +0,0 @@
1
- /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{background-color:transparent;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities;main{background-color:#dcfce7}main.sage-bg-page{background-color:var(--color-sage)}main.dark-bg-page{background-color:#000;color:#fff}main.dark-bg-page h1,main.dark-bg-page h4,main.dark-bg-page label,main.dark-bg-page p{color:var(--color-background)}main.dark-bg-page button{background-color:var(--color-highlight);color:#000}main.dark-bg-page table{border-color:var(--color-background)}main.dark-bg-page td,main.dark-bg-page th{border-color:var(--color-background);color:var(--color-background)}main.dark-bg-page thead th{background-color:var(--color-background);color:var(--color-foreground)}main .container{max-width:72rem;padding:1.5rem 1rem}main .container,main.full-width-page .container{margin-left:auto;margin-right:auto;min-height:80vh}main.full-width-page .container{max-width:1480px;padding:1.5rem 2rem}footer,nav{max-width:72rem}footer{margin:0 auto;padding:1rem}article,aside,section{margin:1rem 0}aside{background-color:var(--color-surface);border-left:4px solid var(--color-border);border-radius:.25rem;padding:1rem}figure{margin-bottom:1rem}details{background-color:var(--color-surface);border:1px solid var(--color-border);margin-bottom:1rem}details,summary{border-radius:.25rem;padding:.5rem}summary{cursor:pointer;font-weight:600;margin:-.5rem}summary:hover{background-color:var(--color-background)}details[open] summary{border-bottom:1px solid var(--color-border);margin-bottom:.5rem}.columns-1{-moz-column-count:1;column-count:1}.columns-2{-moz-column-count:2;column-count:2}.columns-3{-moz-column-count:3;column-count:3}.columns-4{-moz-column-count:4;column-count:4}.columns-5{-moz-column-count:5;column-count:5}.columns-6{-moz-column-count:6;column-count:6}.columns-xs{-moz-column-width:10rem;column-width:10rem}.columns-sm{-moz-column-width:15rem;column-width:15rem}.columns-md{-moz-column-width:20rem;column-width:20rem}.columns-lg{-moz-column-width:25rem;column-width:25rem}.columns-xl{-moz-column-width:30rem;column-width:30rem}.column-gap-0{-moz-column-gap:0;column-gap:0}.column-gap-1{-moz-column-gap:.25rem;column-gap:.25rem}.column-gap-2{-moz-column-gap:.5rem;column-gap:.5rem}.column-gap-4{-moz-column-gap:1rem;column-gap:1rem}.column-gap-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.column-gap-8{-moz-column-gap:2rem;column-gap:2rem}.column-rule{-moz-column-rule:1px solid var(--color-border);column-rule:1px solid var(--color-border)}.column-rule-none{-moz-column-rule:none;column-rule:none}.column-rule-dotted{-moz-column-rule-style:dotted;column-rule-style:dotted}.column-rule-dashed{-moz-column-rule-style:dashed;column-rule-style:dashed}.column-rule-solid{-moz-column-rule-style:solid;column-rule-style:solid}.column-rule-double{-moz-column-rule-style:double;column-rule-style:double}.column-rule-1{-moz-column-rule-width:1px;column-rule-width:1px}.column-rule-2{-moz-column-rule-width:2px;column-rule-width:2px}.column-rule-4{-moz-column-rule-width:4px;column-rule-width:4px}.column-rule-primary{-moz-column-rule-color:var(--color-primary);column-rule-color:var(--color-primary)}.column-rule-secondary{-moz-column-rule-color:var(--color-secondary);column-rule-color:var(--color-secondary)}.column-rule-muted{-moz-column-rule-color:var(--color-muted);column-rule-color:var(--color-muted)}.column-span-all{-moz-column-span:all;column-span:all}.column-span-none{-moz-column-span:none;column-span:none}.column-fill-auto{-moz-column-fill:auto;column-fill:auto}.column-fill-balance{-moz-column-fill:balance;column-fill:balance}.break-inside-auto{-moz-column-break-inside:auto;break-inside:auto}.break-inside-avoid{-moz-column-break-inside:avoid;break-inside:avoid}.break-inside-avoid-column{-moz-column-break-inside:avoid;break-inside:avoid-column}.break-before-auto{-moz-column-break-before:auto;break-before:auto}.break-before-column{-moz-column-break-before:column;break-before:column}.break-before-avoid-column{-moz-column-break-before:avoid-column;break-before:avoid-column}.break-after-auto{-moz-column-break-after:auto;break-after:auto}.break-after-column{-moz-column-break-after:column;break-after:column}.break-after-avoid-column{-moz-column-break-after:avoid-column;break-after:avoid-column}@media (min-width:640px){.sm\:columns-1{-moz-column-count:1;column-count:1}.sm\:columns-2{-moz-column-count:2;column-count:2}.sm\:columns-3{-moz-column-count:3;column-count:3}.sm\:columns-4{-moz-column-count:4;column-count:4}.sm\:columns-5{-moz-column-count:5;column-count:5}.sm\:columns-6{-moz-column-count:6;column-count:6}.sm\:columns-xs{-moz-column-width:10rem;column-width:10rem}.sm\:columns-sm{-moz-column-width:15rem;column-width:15rem}.sm\:columns-md{-moz-column-width:20rem;column-width:20rem}.sm\:columns-lg{-moz-column-width:25rem;column-width:25rem}.sm\:columns-xl{-moz-column-width:30rem;column-width:30rem}}@media (min-width:768px){.md\:columns-1{-moz-column-count:1;column-count:1}.md\:columns-2{-moz-column-count:2;column-count:2}.md\:columns-3{-moz-column-count:3;column-count:3}.md\:columns-4{-moz-column-count:4;column-count:4}.md\:columns-5{-moz-column-count:5;column-count:5}.md\:columns-6{-moz-column-count:6;column-count:6}.md\:columns-xs{-moz-column-width:10rem;column-width:10rem}.md\:columns-sm{-moz-column-width:15rem;column-width:15rem}.md\:columns-md{-moz-column-width:20rem;column-width:20rem}.md\:columns-lg{-moz-column-width:25rem;column-width:25rem}.md\:columns-xl{-moz-column-width:30rem;column-width:30rem}.md\:column-gap-0{-moz-column-gap:0;column-gap:0}.md\:column-gap-1{-moz-column-gap:.25rem;column-gap:.25rem}.md\:column-gap-2{-moz-column-gap:.5rem;column-gap:.5rem}.md\:column-gap-4{-moz-column-gap:1rem;column-gap:1rem}.md\:column-gap-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.md\:column-gap-8{-moz-column-gap:2rem;column-gap:2rem}}@media (min-width:1024px){.lg\:columns-1{-moz-column-count:1;column-count:1}.lg\:columns-2{-moz-column-count:2;column-count:2}.lg\:columns-3{-moz-column-count:3;column-count:3}.lg\:columns-4{-moz-column-count:4;column-count:4}.lg\:columns-5{-moz-column-count:5;column-count:5}.lg\:columns-6{-moz-column-count:6;column-count:6}.lg\:columns-xs{-moz-column-width:10rem;column-width:10rem}.lg\:columns-sm{-moz-column-width:15rem;column-width:15rem}.lg\:columns-md{-moz-column-width:20rem;column-width:20rem}.lg\:columns-lg{-moz-column-width:25rem;column-width:25rem}.lg\:columns-xl{-moz-column-width:30rem;column-width:30rem}.lg\:column-gap-0{-moz-column-gap:0;column-gap:0}.lg\:column-gap-1{-moz-column-gap:.25rem;column-gap:.25rem}.lg\:column-gap-2{-moz-column-gap:.5rem;column-gap:.5rem}.lg\:column-gap-4{-moz-column-gap:1rem;column-gap:1rem}.lg\:column-gap-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.lg\:column-gap-8{-moz-column-gap:2rem;column-gap:2rem}}.card{background-color:var(--color-background);border:1px solid var(--color-border);padding:1rem;transition:all .2s ease}.card:hover{box-shadow:0 4px 8px rgba(0,0,0,.1)}:root{--color-background:#fffcf1;--color-foreground:#121212;--color-surface:#fff;--color-border:#121212;--color-accent:#fceaf5;--color-highlight:#94e59c;--color-info:#79bce8;--color-success:#59c07d;--color-warning:#ffd24d;--color-error:#f26c6c;--color-sage:#c8d9d1}.theme-dark{--color-background:#121212;--color-foreground:#f5f5f5;--color-surface:#130f40;--color-border:#e0bcd3;--color-accent:#fceaf5;--color-highlight:#94e59c;--color-info:#3d87b5;--color-success:#2e8c51;--color-warning:#d9a305;--color-error:#c13d3d;--color-sage:#c8d9d1}.opacity-100{opacity:1}.opacity-80{opacity:.8}.opacity-60{opacity:.6}.opacity-40{opacity:.4}.opacity-20{opacity:.2}.bg-background{background-color:var(--color-background)}.bg-foreground{background-color:var(--color-foreground)}.bg-surface{background-color:var(--color-surface)}.bg-border{background-color:var(--color-border)}.bg-accent{background-color:var(--color-accent)}.bg-info{background-color:var(--color-info)}.bg-success{background-color:var(--color-success)}.bg-warning{background-color:var(--color-warning)}.bg-error{background-color:var(--color-error)}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-surface{color:var(--color-surface)}.text-border{color:var(--color-border)}.text-accent{color:var(--color-accent)}.text-info{color:var(--color-info)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}:root{--font-family-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--font-family-mono:"IBM Plex Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.font-sans{font-family:var(--font-family-sans)}.font-mono{font-family:var(--font-family-mono)}@font-face{font-family:Berkeley Mono;font-style:normal;font-weight:400;src:local("Berkeley Mono"),local("BerkeleyMono-Regular")}@font-face{font-family:Berkeley Mono;font-style:normal;font-weight:700;src:local("Berkeley Mono Bold"),local("BerkeleyMono-Bold")}body{color:var(--color-foreground);font-family:var(--font-family-sans);font-weight:400;line-height:1.5}body{& h1,& h2,& h3,& h4,& h5,& h6{color:var(--color-foreground);font-weight:400;margin:0;padding:.75rem 0}& h1{font-size:1.5rem}& h2{font-size:1.25rem}& h3{display:block;margin-bottom:.5rem;text-transform:uppercase}& h3,& h4{font-size:.825rem}& h5,& h6{font-size:.75rem}& footer *,& nav *,& p{font-size:.6875rem}}a,abbr,address,article,aside,blockquote,button,caption,cite,dd,details,div,dl,dt,em,fieldset,figcaption,figure,footer,header,input,kbd,label,legend,li,main,mark,nav,ol,option,p,q,samp,section,select,span,strong,summary,td,textarea,th,time,ul,var{color:var(--color-foreground)}small{font-size:.715rem}p{margin-top:0}em{font-style:italic}strong{font-weight:700}mark{background-color:var(--color-accent);color:#212529;padding:.2em}blockquote{background-color:var(--color-surface);border-left:4px solid var(--color-border);font-style:italic;margin:1rem 0;padding:.5rem 1rem}blockquote p{margin-bottom:.5rem}blockquote cite{color:var(--color-accent);display:block}abbr{cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,samp,var{font-family:var(--font-family-mono)}kbd{background-color:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 1px 0 var(--color-border);color:var(--color-foreground)}time{color:var(--color-accent)}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}address{margin-bottom:1rem}dl{margin:1rem 0;padding:0}dt{color:var(--color-foreground);font-weight:600;margin-top:.5rem}dt:first-child{margin-top:0}dd{color:var(--color-accent);margin:.25rem 0 .5rem 1.5rem}pre{color:var(--color-foreground);display:block;font-family:var(--font-family-mono);font-size:.7rem;margin:0 0 1rem;padding:1rem;word-break:break-all;word-wrap:break-word;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.25rem;overflow-x:auto}nav{justify-content:space-between;margin:0 auto;padding:1rem;width:100%}nav,nav ul{align-items:center;display:flex}nav ul{flex-direction:row;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:.5rem}nav ul li{margin:0;padding:0;& a{color:var(--color-foreground);padding:.25rem .5rem;text-decoration:none;transition:all .2s ease;&.active,&:hover{background-color:var(--color-accent);color:var(--color-foreground)}}}header{background-color:var(--color-background);border-bottom:1px solid var(--color-border);left:0;margin:2rem auto 0;max-width:1024px;padding:0 .5rem;position:sticky;right:0;top:0;width:100%;z-index:1035}.header-top{justify-content:space-between;margin-bottom:1rem}.header-top,.theme-switcher{align-items:center;display:flex}.theme-switcher{gap:.5rem}ul{margin-bottom:1rem;margin-top:0}ul li{margin-bottom:.5rem}ul ul{margin-bottom:0;margin-top:.5rem}ol{margin-bottom:1rem;margin-top:0}ol li{margin-bottom:.5rem}ol ol{margin-bottom:0;margin-top:.5rem}dl{margin-bottom:1rem;margin-top:0}dt{margin-bottom:.25rem}dd{margin-bottom:.75rem}li>ol,li>ul{margin-bottom:0}ul.no-bullets{list-style-type:none;padding-left:0}ol.roman{list-style-type:upper-roman}ol.alpha{list-style-type:lower-alpha}@media (min-width:768px){dl.horizontal{display:grid;gap:.5rem;grid-template-columns:30% 70%}dl.horizontal dt{grid-column:1;margin-bottom:0;text-align:right}dl.horizontal dd{grid-column:2;margin-left:0}}table{border:1px solid var(--color-border);border-collapse:collapse;margin-bottom:1rem;width:100%}caption{caption-side:top;padding:1rem 0;text-align:left}td,th{border-bottom:1px solid var(--color-border);padding:.75rem;text-align:left;vertical-align:top}thead th{background-color:var(--color-surface);vertical-align:bottom}tbody+tbody{border-top:1px solid var(--color-border)}tbody tr.cursor-pointer:hover{background-color:var(--color-accent)}tfoot td{background-color:var(--color-surface);font-style:italic}.table-responsive{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}@media (max-width:767.98px){.table-responsive-md{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}}body{& form{margin-bottom:1rem}& legend{color:var(--color-foreground);font-weight:600;padding:0 .5rem;width:auto}& form div{margin-bottom:1rem}& label{color:var(--color-foreground);display:inline-block;font-weight:500;margin-bottom:.5rem}& input[type=email],& input[type=number],& input[type=password],& input[type=search],& input[type=tel],& input[type=text],& input[type=url]{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:0;color:var(--color-foreground);display:block;line-height:1.5;padding:.5rem 1rem;transition:border-color .15s ease-in-out;width:100%}& input:focus{border-color:var(--color-accent);box-shadow:0 0 0 .2rem var(--color-accent);outline:0}.is-valid,.is-valid:focus{border-color:var(--color-success)}.is-valid:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.is-invalid,.is-invalid:focus{border-color:var(--color-error)}.is-invalid:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}& input[type=date],& input[type=datetime-local],& input[type=time]{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-foreground);display:block;line-height:1.5;padding:.375rem .75rem;width:100%}& input[type=checkbox],& input[type=radio]{margin-right:.5rem}& input[type=color]{background-color:var(--color-background);border:1px solid var(--color-border);height:2rem;padding:.2rem;width:4rem}& input[type=range],& select{width:100%}& select{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-foreground);display:block;line-height:1.5;padding:.375rem .75rem}& select[multiple]{height:auto}& textarea{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-foreground);display:block;line-height:1.5;padding:.375rem .75rem;resize:vertical;width:100%}@media (min-width:768px){.form-grid{align-items:center;display:grid;gap:.5rem;grid-template-columns:30% 70%}.form-grid label{grid-column:1;margin-bottom:0;text-align:right}.form-grid input,.form-grid select,.form-grid textarea{grid-column:2}}}a{color:var(--color-foreground)}html{scroll-behavior:smooth}[id]{scroll-margin-top:2rem}img{border-style:none;height:auto;max-width:100%;vertical-align:middle}figure{display:inline-block;margin:0 0 1rem;max-width:100%}figcaption{background-color:var(--color-surface);padding:.5rem;text-align:center}.responsive-img{height:auto;width:100%}.rounded-img{border-radius:.25rem}.circle-img{border-radius:50%}.thumbnail-img{background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;padding:.25rem}.img-left{float:left;margin-bottom:.5rem;margin-right:1rem}.img-right{float:right;margin-bottom:.5rem;margin-left:1rem}.img-center{margin-left:auto;margin-right:auto}.img-center,picture{display:block}audio{width:100%}audio,video{margin-bottom:1rem}video{height:auto;max-width:100%}.video-container{height:0;margin-bottom:1rem;overflow:hidden;padding-bottom:56.25%;position:relative}.video-container iframe,.video-container video{height:100%;left:0;position:absolute;top:0;width:100%}iframe{border:0;max-width:100%}.iframe-container{height:0;margin-bottom:1rem;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.iframe-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}.media{align-items:flex-start;display:flex;margin-bottom:1rem}.media-body{flex:1}.image-gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.image-gallery figure{height:100%;margin:0}.image-gallery img{display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}.hover-zoom{transition:transform .3s ease}.hover-zoom:hover{transform:scale(1.05)}.hover-opacity{opacity:1;transition:opacity .3s ease}.hover-opacity:hover{opacity:.8}.tabs{padding-bottom:0;position:relative;width:100%}.tabs input[type=radio]{display:none}.tab-nav{text-align:center;width:100%}.tab-label,.tab-nav{border-bottom:1px solid var(--color-foreground)}.tab-label{color:var(--color-foreground);cursor:pointer;display:inline-block;margin-bottom:-1px;padding:.75rem 1.5rem;position:relative;transition:all .3s ease}.tab-label:hover{background-color:var(--color-surface)}.tabs input[type=radio]:checked+.tab-label{background-color:var(--color-surface);color:var(--color-foreground);font-weight:600}.tab-content{animation:fadeIn .3s ease;display:none;padding:1.5rem 0}.tabs input[type=radio]:first-of-type:checked~.content .tab-content:first-of-type,.tabs input[type=radio]:nth-of-type(10):checked~.content .tab-content:nth-of-type(10),.tabs input[type=radio]:nth-of-type(2):checked~.content .tab-content:nth-of-type(2),.tabs input[type=radio]:nth-of-type(3):checked~.content .tab-content:nth-of-type(3),.tabs input[type=radio]:nth-of-type(4):checked~.content .tab-content:nth-of-type(4),.tabs input[type=radio]:nth-of-type(5):checked~.content .tab-content:nth-of-type(5),.tabs input[type=radio]:nth-of-type(6):checked~.content .tab-content:nth-of-type(6),.tabs input[type=radio]:nth-of-type(7):checked~.content .tab-content:nth-of-type(7),.tabs input[type=radio]:nth-of-type(8):checked~.content .tab-content:nth-of-type(8),.tabs input[type=radio]:nth-of-type(9):checked~.content .tab-content:nth-of-type(9),.tabs-vertical input[type=radio]:first-of-type:checked~.content .tab-content:first-of-type,.tabs-vertical input[type=radio]:nth-of-type(2):checked~.content .tab-content:nth-of-type(2),.tabs-vertical input[type=radio]:nth-of-type(3):checked~.content .tab-content:nth-of-type(3),.tabs-vertical input[type=radio]:nth-of-type(4):checked~.content .tab-content:nth-of-type(4),.tabs-vertical input[type=radio]:nth-of-type(5):checked~.content .tab-content:nth-of-type(5){display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tabs-vertical{display:flex;gap:2rem}.tabs-vertical .tab-label{border-bottom:none;border-left:2px solid transparent;display:block;margin-bottom:.5rem}.tabs-vertical input[type=radio]:checked+.tab-label{border-bottom-color:transparent;border-left-color:var(--color-foreground)}.tabs-vertical .content{flex:1}.AccordionRoot{border:1px solid var(--color-border)}.AccordionItem{border-bottom:1px solid var(--color-border);overflow:hidden}.AccordionItem h2{font-size:.825rem;font-weight:600;padding-bottom:.5rem}.AccordionItem p+h2,.AccordionItem p+p{padding-top:1rem}.AccordionItem:focus-within{position:relative;z-index:1}.AccordionHeader{display:flex;margin-bottom:.25rem}.AccordionTrigger{align-items:center;display:flex;flex:1;font-size:.825rem;font-weight:400;justify-content:space-between;padding:.5rem;text-transform:capitalize}.AccordionTrigger:hover{border:1px solid var(--color-foreground)}.AccordionContentText{background-color:var(--color-surface);padding:.5rem}.AccordionContent[data-state=open]{animation:slideDown .3s cubic-bezier(.87,0,.13,1)}.AccordionContent[data-state=closed]{animation:slideUp .3s cubic-bezier(.87,0,.13,1)}.AccordionChevron{transition:transform .3s cubic-bezier(.87,0,.13,1)}.AccordionTrigger[data-state=open]>.AccordionChevron{transform:rotate(180deg)}@keyframes slideDown{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height)}to{height:0}}body{& button,& button[type=submit],& input[type=button]{background-color:var(--color-foreground);border-radius:2rem;color:var(--color-background);cursor:pointer;display:inline-block;font-weight:400;line-height:1.5;padding:.55rem 1.5rem;text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}& button:hover,& button[type=submit]:hover,& input[type=button]:hover{background-color:var(--color-highlight);color:var(--color-foreground)}& .cl-formButtonPrimary,& .cl-formButtonPrimary span{border-radius:2rem!important;color:#fff!important}& [class*=cl-] *{margin-bottom:0!important}& button:disabled,& input:disabled{cursor:not-allowed;opacity:.65}}.demo-container{background-color:#f8f9fa;margin-bottom:2rem}.demo-container,.demo-item{border:1px solid #dee2e6;border-radius:.25rem;padding:1rem}.demo-item{background-color:#e9ecef;flex:1;margin:.25rem;text-align:center}.demo-item.tall{height:100px}.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-col-reverse{flex-direction:column-reverse}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.demo-grid{background-color:#f8f9fa;margin-bottom:2rem}.demo-grid,.demo-grid-item{border:1px solid #dee2e6;border-radius:.25rem;padding:1rem}.demo-grid-item{background-color:#e9ecef;text-align:center}.grid{display:grid}.inline-grid{display:inline-grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.col-span-12{grid-column:span 12/span 12}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}@media (min-width:640px){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@media (min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:flex-col-reverse{flex-direction:column-reverse}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-nowrap{flex-wrap:nowrap}.md\:flex-wrap-reverse{flex-wrap:wrap-reverse}.md\:justify-start{justify-content:flex-start}.md\:justify-center{justify-content:center}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:justify-evenly{justify-content:space-evenly}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:items-stretch{align-items:stretch}.md\:items-baseline{align-items:baseline}.md\:gap-1{gap:.25rem}.md\:gap-2{gap:.5rem}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:w-full{width:100%}.md\:w-auto{width:auto}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-2\/3{width:66.666667%}.md\:w-1\/4{width:25%}.md\:w-3\/4{width:75%}}@media (min-width:1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:justify-start{justify-content:flex-start}.lg\:justify-center{justify-content:center}.lg\:justify-end{justify-content:flex-end}.lg\:justify-between{justify-content:space-between}.lg\:justify-around{justify-content:space-around}.lg\:gap-1{gap:.25rem}.lg\:gap-2{gap:.5rem}.lg\:gap-4{gap:1rem}.lg\:gap-6{gap:1.5rem}.lg\:gap-8{gap:2rem}}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-4{margin:1rem}.m-8{margin:2rem}.m-12{margin:3rem}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-12{margin-left:3rem;margin-right:3rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-8{margin-bottom:2rem;margin-top:2rem}.my-12{margin-bottom:3rem;margin-top:3rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mr-8{margin-right:2rem}.mr-12{margin-right:3rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-12{margin-left:3rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-12{padding:3rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.px-12{padding-left:3rem;padding-right:3rem}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-12{padding-bottom:3rem;padding-top:3rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.pr-12{padding-right:3rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pl-12{padding-left:3rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.border{border:1px solid var(--color-border)}.border-0{border:0}.border-t{border-top:1px solid var(--color-border)}.border-r{border-right:1px solid var(--color-border)}.border-b{border-bottom:1px solid var(--color-border)}.border-l{border-left:1px solid var(--color-border)}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.p-0{padding:0}.m-0{margin:0}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.pt-1{padding-top:.25rem!important}.pb-1{padding-bottom:.25rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.pt-2{padding-top:.5rem!important}.pb-2{padding-bottom:.5rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.pt-3{padding-top:1rem!important}.pb-3{padding-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}.pt-5{padding-top:3rem!important}.pb-5{padding-bottom:3rem!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-grid{display:grid!important}.w-full{width:100%}.max-w-7xl{width:1024px}.cursor-pointer{cursor:pointer}*,:after,:before{box-sizing:border-box}body{background-color:var(--color-background);font-family:Berkeley Mono,monospace;font-size:16px;margin:0;padding:0;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:var(--color-accent)}*{border-color:var(--color-border)}p+p{margin-top:1rem}h1{font-size:1.5rem;text-transform:uppercase}.card-bevel{position:relative}.card-bevel:after{border-bottom:3px solid #000;border-right:3px solid #000;bottom:-3px;content:"";height:calc(100% - 2px);opacity:1;position:absolute;right:-3px;width:calc(100% - 2px)}@keyframes scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.ticker-content{animation:scroll 60s linear infinite;will-change:transform}.ticker-item{padding:0 1rem}.tarot-card-flip{perspective:800px}.tarot-card-inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1);width:100%}.tarot-card-inner.flipped{transform:rotateY(180deg)}.tarot-card-back,.tarot-card-front{backface-visibility:hidden;inset:0;position:absolute}.tarot-card-back{transform:rotateY(180deg)}.thin-scrollbar{scrollbar-color:#000 transparent;scrollbar-width:thin}a,abbr,address,article,aside,blockquote,button,caption,cite,dd,details,div,dl,dt,em,fieldset,figcaption,figure,footer,header,input,kbd,label,legend,li,main,mark,nav,ol,option,p,q,samp,section,select,span,strong,summary,td,textarea,th,time,ul,var{font-size:.75rem}