singularity-components 0.1.59 → 0.1.61

package/dist/main.css

@@ -1,584 +1,831 @@
 /* lib/tailwind.css */
-*,
-::before,
-::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-  --tw-contain-size: ;
-  --tw-contain-layout: ;
-  --tw-contain-paint: ;
-  --tw-contain-style: ;
-}
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-  --tw-contain-size: ;
-  --tw-contain-layout: ;
-  --tw-contain-paint: ;
-  --tw-contain-style: ;
-}
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
-::before,
-::after {
-  --tw-content: "";
-}
-html,
-:host {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  -webkit-tap-highlight-color: transparent;
-}
-body {
-  margin: 0;
-  line-height: inherit;
-}
-hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
-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;
-  text-decoration: inherit;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-code,
-kbd,
-samp,
-pre {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace;
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  font-size: 1em;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-input:where([type=button]),
-input:where([type=reset]),
-input:where([type=submit]) {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-:-moz-focusring {
-  outline: auto;
-}
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-progress {
-  vertical-align: baseline;
-}
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-summary {
-  display: list-item;
-}
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-legend {
-  padding: 0;
-}
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-dialog {
-  padding: 0;
-}
-textarea {
-  resize: vertical;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-button,
-[role=button] {
-  cursor: pointer;
-}
-:disabled {
-  cursor: default;
-}
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-}
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-[hidden]:where(:not([hidden=until-found])) {
-  display: none;
-}
-:root {
-  --sg-black: 0 0% 15%;
-  --sg-white: 30 20% 98%;
-  --sg-gray: 30 10% 70%;
-  --sg-orange: 33 75% 54%;
-  --sg-orange-foreground: 0 0% 20%;
-  --sg-purple: 250 45% 58%;
-  --sg-purple-foreground: 250 50% 98%;
-  --sg-red: 0 65% 51%;
-  --sg-red-foreground: 0 0% 98%;
-  --sg-green: 120 45% 45%;
-  --sg-green-foreground: 120 50% 98%;
-  --sg-primary: var(--sg-orange);
-  --sg-background: var(--sg-white);
-  --sg-foreground: var(--sg-black);
-  --sg-border: var(--sg-primary);
-  --sg-ring: 210 65% 55%;
-  --sg-radius: 0.5rem;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 47.4% 11.2%;
-  --input: 214.3 31.8% 91.4%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 47.4% 11.2%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 100% 50%;
-  --destructive-foreground: 210 40% 98%;
-  --test1: 1px;
-}
-:root body {
-  background-color: hsl(var(--sg-background));
-}
-.sg-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.sg-inline-flex {
-  display: inline-flex;
-}
-.sg-grid {
-  display: grid;
-}
-.sg-h-10 {
-  height: 2.5rem;
-}
-.sg-h-8 {
-  height: 2rem;
-}
-.sg-h-9 {
-  height: 2.25rem;
-}
-.sg-w-9 {
-  width: 2.25rem;
-}
-.sg-w-full {
-  width: 100%;
-}
-.sg-max-w-\[768px\] {
-  max-width: 768px;
-}
-.sg-grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-.sg-items-center {
-  align-items: center;
-}
-.sg-justify-center {
-  justify-content: center;
-}
-.sg-gap-2 {
-  gap: 0.5rem;
-}
-.sg-gap-4 {
-  gap: 1rem;
-}
-.sg-whitespace-nowrap {
-  white-space: nowrap;
-}
-.sg-rounded-md {
-  border-radius: 0.375rem;
-}
-.sg-border {
-  border-width: 1px;
-}
-.sg-border-orange {
-  border-color: hsl(var(--sg-orange));
-}
-.sg-border-transparent {
-  border-color: transparent;
-}
-.sg-bg-black {
-  background-color: hsl(var(--sg-black));
-}
-.sg-bg-green {
-  background-color: hsl(var(--sg-green));
-}
-.sg-bg-orange {
-  background-color: hsl(var(--sg-orange));
-}
-.sg-bg-purple {
-  background-color: hsl(var(--sg-purple));
-}
-.sg-bg-red {
-  background-color: hsl(var(--sg-red));
-}
-.sg-bg-transparent {
-  background-color: transparent;
-}
-.sg-bg-white {
-  background-color: hsl(var(--sg-white));
-}
-.sg-px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-}
-.sg-px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.sg-px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.sg-px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-.sg-py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-.sg-py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.sg-text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-.sg-text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-.sg-text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-.sg-text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-.sg-text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-.sg-text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.sg-text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-.sg-text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.sg-font-bold {
-  font-weight: 700;
-}
-.sg-font-extrabold {
-  font-weight: 800;
-}
-.sg-font-medium {
-  font-weight: 500;
-}
-.sg-font-normal {
-  font-weight: 400;
-}
-.sg-font-semibold {
-  font-weight: 600;
-}
-.sg-tracking-tight {
-  letter-spacing: -0.025em;
-}
-.sg-text-accent-foreground {
-  color: hsl(var(--accent-foreground));
-}
-.sg-text-destructive {
-  color: hsl(var(--destructive));
-}
-.sg-text-foreground {
-  color: hsl(var(--sg-foreground));
-}
-.sg-text-green-foreground {
-  color: hsl(var(--sg-green-foreground));
-}
-.sg-text-orange-foreground {
-  color: hsl(var(--sg-orange-foreground));
-}
-.sg-text-primary {
-  color: hsl(var(--primary));
-}
-.sg-text-purple-foreground {
-  color: hsl(var(--sg-purple-foreground));
-}
-.sg-text-red-foreground {
-  color: hsl(var(--sg-red-foreground));
-}
-.sg-text-secondary-foreground {
-  color: hsl(var(--secondary-foreground));
+@layer theme, base, components, utilities;
+@layer theme {
+  :root,
+  :host {
+    --sg-font-sans:
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    --sg-font-serif:
+      ui-serif,
+      Georgia,
+      Cambria,
+      "Times New Roman",
+      Times,
+      serif;
+    --sg-font-mono:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace;
+    --sg-breakpoint-sm: 40rem;
+    --sg-breakpoint-md: 48rem;
+    --sg-breakpoint-lg: 64rem;
+    --sg-breakpoint-xl: 80rem;
+    --sg-breakpoint-2xl: 96rem;
+    --sg-container-3xs: 16rem;
+    --sg-container-2xs: 18rem;
+    --sg-container-xs: 20rem;
+    --sg-container-sm: 24rem;
+    --sg-container-md: 28rem;
+    --sg-container-lg: 32rem;
+    --sg-container-xl: 36rem;
+    --sg-container-2xl: 42rem;
+    --sg-container-3xl: 48rem;
+    --sg-container-4xl: 56rem;
+    --sg-container-5xl: 64rem;
+    --sg-container-6xl: 72rem;
+    --sg-container-7xl: 80rem;
+    --sg-text-xs: 0.75rem;
+    --sg-text-xs--line-height: calc(1 / 0.75);
+    --sg-text-sm: 0.875rem;
+    --sg-text-sm--line-height: calc(1.25 / 0.875);
+    --sg-text-base: 1rem;
+    --sg-text-base--line-height: calc(1.5 / 1);
+    --sg-text-lg: 1.125rem;
+    --sg-text-lg--line-height: calc(1.75 / 1.125);
+    --sg-text-xl: 1.25rem;
+    --sg-text-xl--line-height: calc(1.75 / 1.25);
+    --sg-text-2xl: 1.5rem;
+    --sg-text-2xl--line-height: calc(2 / 1.5);
+    --sg-text-3xl: 1.875rem;
+    --sg-text-3xl--line-height: calc(2.25 / 1.875);
+    --sg-text-4xl: 2.25rem;
+    --sg-text-4xl--line-height: calc(2.5 / 2.25);
+    --sg-text-5xl: 3rem;
+    --sg-text-5xl--line-height: 1;
+    --sg-text-6xl: 3.75rem;
+    --sg-text-6xl--line-height: 1;
+    --sg-text-7xl: 4.5rem;
+    --sg-text-7xl--line-height: 1;
+    --sg-text-8xl: 6rem;
+    --sg-text-8xl--line-height: 1;
+    --sg-text-9xl: 8rem;
+    --sg-text-9xl--line-height: 1;
+    --sg-font-weight-thin: 100;
+    --sg-font-weight-extralight: 200;
+    --sg-font-weight-light: 300;
+    --sg-font-weight-normal: 400;
+    --sg-font-weight-medium: 500;
+    --sg-font-weight-semibold: 600;
+    --sg-font-weight-bold: 700;
+    --sg-font-weight-extrabold: 800;
+    --sg-font-weight-black: 900;
+    --sg-tracking-tighter: -0.05em;
+    --sg-tracking-tight: -0.025em;
+    --sg-tracking-normal: 0em;
+    --sg-tracking-wide: 0.025em;
+    --sg-tracking-wider: 0.05em;
+    --sg-tracking-widest: 0.1em;
+    --sg-leading-tight: 1.25;
+    --sg-leading-snug: 1.375;
+    --sg-leading-normal: 1.5;
+    --sg-leading-relaxed: 1.625;
+    --sg-leading-loose: 2;
+    --sg-radius-xs: 0.125rem;
+    --sg-radius-sm: 0.25rem;
+    --sg-radius-md: 0.375rem;
+    --sg-radius-lg: 0.5rem;
+    --sg-radius-xl: 0.75rem;
+    --sg-radius-2xl: 1rem;
+    --sg-radius-3xl: 1.5rem;
+    --sg-radius-4xl: 2rem;
+    --sg-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --sg-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --sg-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --sg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --sg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --sg-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --sg-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --sg-inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --sg-inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --sg-inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --sg-drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --sg-drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --sg-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --sg-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --sg-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --sg-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+    --sg-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --sg-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --sg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --sg-animate-spin: spin 1s linear infinite;
+    --sg-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --sg-animate-bounce: bounce 1s infinite;
+    --sg-blur-xs: 4px;
+    --sg-blur-sm: 8px;
+    --sg-blur-md: 12px;
+    --sg-blur-lg: 16px;
+    --sg-blur-xl: 24px;
+    --sg-blur-2xl: 40px;
+    --sg-blur-3xl: 64px;
+    --sg-perspective-dramatic: 100px;
+    --sg-perspective-near: 300px;
+    --sg-perspective-normal: 500px;
+    --sg-perspective-midrange: 800px;
+    --sg-perspective-distant: 1200px;
+    --sg-aspect-video: 16 / 9;
+    --sg-default-transition-duration: 150ms;
+    --sg-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --sg-default-font-family: var(--font-sans);
+    --sg-default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --sg-default-font-variation-settings: var( --font-sans--font-variation-settings );
+    --sg-default-mono-font-family: var(--font-mono);
+    --sg-default-mono-font-feature-settings: var( --font-mono--font-feature-settings );
+    --sg-default-mono-font-variation-settings: var( --font-mono--font-variation-settings );
+    --sg-color-transparent: transparent;
+    --sg-color-current: currentColor;
+    --sg-color-white: hsl(var(--sg-white));
+    --sg-color-black: hsl(var(--sg-black));
+    --sg-color-gray: hsl(var(--sg-gray));
+    --sg-color-orange: hsl(var(--sg-orange));
+    --sg-color-orange-foreground: hsl(var(--sg-orange-foreground));
+    --sg-color-purple: hsl(var(--sg-purple));
+    --sg-color-purple-foreground: hsl(var(--sg-purple-foreground));
+    --sg-color-red: hsl(var(--sg-red));
+    --sg-color-red-foreground: hsl(var(--sg-red-foreground));
+    --sg-color-green: hsl(var(--sg-green));
+    --sg-color-green-foreground: hsl(var(--sg-green-foreground));
+    --sg-color-border: hsl(var(--sg-border));
+    --sg-color-background: hsl(var(--sg-background));
+    --sg-color-foreground: hsl(var(--sg-foreground));
+    --sg-color-ring: hsl(var(--sg-ring));
+    --sg-color-input: hsl(var(--input));
+    --sg-color-primary: hsl(var(--primary));
+    --sg-color-primary-foreground: hsl(var(--primary-foreground));
+    --sg-color-secondary: hsl(var(--secondary));
+    --sg-color-secondary-foreground: hsl(var(--secondary-foreground));
+    --sg-color-destructive: hsl(var(--destructive));
+    --sg-color-destructive-foreground: hsl(var(--destructive-foreground));
+    --sg-color-accent: hsl(var(--accent));
+    --sg-color-accent-foreground: hsl(var(--accent-foreground));
+    --sg-spacing-1: var(--sg-spacing-1);
+    --sg-spacing-2: var(--sg-spacing-2);
+    --sg-spacing-3: var(--sg-spacing-3);
+    --sg-spacing-4: var(--sg-spacing-4);
+    --sg-spacing-6: var(--sg-spacing-6);
+    --sg-spacing-8: var(--sg-spacing-8);
+    --sg-spacing-12: var(--sg-spacing-12);
+    --sg-spacing-16: var(--sg-spacing-16);
+    --sg-spacing-20: var(--sg-spacing-20);
+    --sg-spacing-24: var(--sg-spacing-24);
+    --sg-spacing-28: var(--sg-spacing-28);
+    --sg-spacing-32: var(--sg-spacing-32);
+    --sg-spacing-36: var(--sg-spacing-36);
+    --sg-spacing-40: var(--sg-spacing-40);
+  }
 }
-.sg-underline-offset-4 {
-  text-underline-offset: 4px;
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    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 );
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    line-height: inherit;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  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,
+  samp,
+  pre {
+    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-variation-settings: var( --default-mono-font-variation-settings, normal );
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    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;
+  }
+  ::placeholder {
+    opacity: 1;
+    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-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type=button], [type=reset], [type=submit]),
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden=until-found])) {
+    display: none !important;
+  }
 }
-.sg-shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
+@layer utilities {
+  .sg\:mx-auto {
+    margin-inline: auto;
+  }
+  .sg\:grid {
+    display: grid;
+  }
+  .sg\:inline-flex {
+    display: inline-flex;
+  }
+  .sg\:h-8 {
+    height: var(--sg-spacing-8);
+  }
+  .sg\:w-full {
+    width: 100%;
+  }
+  .sg\:max-w-\[768px\] {
+    max-width: 768px;
+  }
+  .sg\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .sg\:items-center {
+    align-items: center;
+  }
+  .sg\:justify-center {
+    justify-content: center;
+  }
+  .sg\:gap-2 {
+    gap: var(--sg-spacing-2);
+  }
+  .sg\:gap-4 {
+    gap: var(--sg-spacing-4);
+  }
+  .sg\:rounded-md {
+    border-radius: var(--sg-radius-md);
+  }
+  .sg\:border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .sg\:border-orange {
+    border-color: var(--sg-color-orange);
+  }
+  .sg\:border-transparent {
+    border-color: transparent;
+  }
+  .sg\:bg-black {
+    background-color: var(--sg-color-black);
+  }
+  .sg\:bg-green {
+    background-color: var(--sg-color-green);
+  }
+  .sg\:bg-orange {
+    background-color: var(--sg-color-orange);
+  }
+  .sg\:bg-purple {
+    background-color: var(--sg-color-purple);
+  }
+  .sg\:bg-red {
+    background-color: var(--sg-color-red);
+  }
+  .sg\:bg-transparent {
+    background-color: transparent;
+  }
+  .sg\:bg-white {
+    background-color: var(--sg-color-white);
+  }
+  .sg\:px-3 {
+    padding-inline: var(--sg-spacing-3);
+  }
+  .sg\:px-4 {
+    padding-inline: var(--sg-spacing-4);
+  }
+  .sg\:px-8 {
+    padding-inline: var(--sg-spacing-8);
+  }
+  .sg\:py-2 {
+    padding-block: var(--sg-spacing-2);
+  }
+  .sg\:text-2xl {
+    font-size: var(--sg-text-2xl);
+    line-height: var(--tw-leading, var(--sg-text-2xl--line-height));
+  }
+  .sg\:text-3xl {
+    font-size: var(--sg-text-3xl);
+    line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
+  }
+  .sg\:text-4xl {
+    font-size: var(--sg-text-4xl);
+    line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
+  }
+  .sg\:text-base {
+    font-size: var(--sg-text-base);
+    line-height: var(--tw-leading, var(--sg-text-base--line-height));
+  }
+  .sg\:text-lg {
+    font-size: var(--sg-text-lg);
+    line-height: var(--tw-leading, var(--sg-text-lg--line-height));
+  }
+  .sg\:text-sm {
+    font-size: var(--sg-text-sm);
+    line-height: var(--tw-leading, var(--sg-text-sm--line-height));
+  }
+  .sg\:text-xl {
+    font-size: var(--sg-text-xl);
+    line-height: var(--tw-leading, var(--sg-text-xl--line-height));
+  }
+  .sg\:text-xs {
+    font-size: var(--sg-text-xs);
+    line-height: var(--tw-leading, var(--sg-text-xs--line-height));
+  }
+  .sg\:font-bold {
+    --tw-font-weight: var(--sg-font-weight-bold);
+    font-weight: var(--sg-font-weight-bold);
+  }
+  .sg\:font-extrabold {
+    --tw-font-weight: var(--sg-font-weight-extrabold);
+    font-weight: var(--sg-font-weight-extrabold);
+  }
+  .sg\:font-medium {
+    --tw-font-weight: var(--sg-font-weight-medium);
+    font-weight: var(--sg-font-weight-medium);
+  }
+  .sg\:font-normal {
+    --tw-font-weight: var(--sg-font-weight-normal);
+    font-weight: var(--sg-font-weight-normal);
+  }
+  .sg\:font-semibold {
+    --tw-font-weight: var(--sg-font-weight-semibold);
+    font-weight: var(--sg-font-weight-semibold);
+  }
+  .sg\:tracking-tight {
+    --tw-tracking: var(--sg-tracking-tight);
+    letter-spacing: var(--sg-tracking-tight);
+  }
+  .sg\:whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .sg\:text-accent-foreground {
+    color: var(--sg-color-accent-foreground);
+  }
+  .sg\:text-destructive {
+    color: var(--sg-color-destructive);
+  }
+  .sg\:text-foreground {
+    color: var(--sg-color-foreground);
+  }
+  .sg\:text-green-foreground {
+    color: var(--sg-color-green-foreground);
+  }
+  .sg\:text-orange-foreground {
+    color: var(--sg-color-orange-foreground);
+  }
+  .sg\:text-primary {
+    color: var(--sg-color-primary);
+  }
+  .sg\:text-purple-foreground {
+    color: var(--sg-color-purple-foreground);
+  }
+  .sg\:text-red-foreground {
+    color: var(--sg-color-red-foreground);
+  }
+  .sg\:text-secondary-foreground {
+    color: var(--sg-color-secondary-foreground);
+  }
+  .sg\:underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .sg\:shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .sg\:shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .sg\:transition-colors {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
+  }
+  .sg\:hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--sg-color-accent);
+      }
+    }
+  }
+  .sg\:hover\:bg-gray\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-gray) 20%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:bg-green\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-green) 80%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:bg-orange\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-orange) 80%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:bg-orange\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-orange) 90%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:bg-purple\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-purple) 80%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:bg-purple\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-purple) 90%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:bg-red\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--sg-color-red) 90%, transparent);
+      }
+    }
+  }
+  .sg\:hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--sg-color-accent-foreground);
+      }
+    }
+  }
+  .sg\:hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .sg\:focus\:ring-2 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
+  .sg\:focus\:ring-ring {
+    &:focus {
+      --tw-ring-color: var(--sg-color-ring);
+    }
+  }
+  .sg\:focus\:ring-offset-2 {
+    &:focus {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .sg\:focus\:outline-hidden {
+    &:focus {
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .sg\:focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
+  .sg\:focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--sg-color-ring);
+    }
+  }
+  .sg\:focus-visible\:outline-hidden {
+    &:focus-visible {
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .sg\:disabled\:pointer-events-none {
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+  .sg\:disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+  .sg\:md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .sg\:md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .sg\:md\:grid-cols-4 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .sg\:lg\:text-5xl {
+    @media (width >= 64rem) {
+      font-size: var(--sg-text-5xl);
+      line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
+    }
+  }
+  .sg\:\[\&_svg\]\:pointer-events-none {
+    & svg {
+      pointer-events: none;
+    }
+  }
+  .sg\:\[\&_svg\]\:size-4 {
+    & svg {
+      width: var(--sg-spacing-4);
+      height: var(--sg-spacing-4);
+    }
+  }
+  .sg\:\[\&_svg\]\:shrink-0 {
+    & svg {
+      flex-shrink: 0;
+    }
+  }
 }
-.sg-shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
 }
-.sg-transition-colors {
-  transition-property:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+@layer base {
+  :root {
+    --sg-black: 0 0% 15%;
+    --sg-white: 30 20% 98%;
+    --sg-gray: 30 10% 70%;
+    --sg-orange: 33 75% 54%;
+    --sg-orange-foreground: 0 0% 20%;
+    --sg-purple: 250 45% 58%;
+    --sg-purple-foreground: 250 50% 98%;
+    --sg-red: 0 65% 51%;
+    --sg-red-foreground: 0 0% 98%;
+    --sg-green: 120 45% 45%;
+    --sg-green-foreground: 120 50% 98%;
+    --sg-primary: var(--sg-orange);
+    --sg-background: var(--sg-white);
+    --sg-foreground: var(--sg-black);
+    --sg-border: var(--sg-primary);
+    --sg-ring: 210 65% 55%;
+    --sg-radius: 0.5rem;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+    --input: 214.3 31.8% 91.4%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+    --test1: 1px;
+    --sg-spacing-1: 0.25rem;
+    --sg-spacing-2: 0.5rem;
+    --sg-spacing-3: 0.75rem;
+    --sg-spacing-4: 1rem;
+    --sg-spacing-6: 1.5rem;
+    --sg-spacing-8: 2rem;
+    --sg-spacing-12: 3rem;
+    --sg-spacing-16: 4rem;
+    --sg-spacing-20: 5rem;
+    --sg-spacing-24: 6rem;
+    --sg-spacing-28: 7rem;
+    --sg-spacing-32: 8rem;
+    --sg-spacing-36: 9rem;
+    --sg-spacing-40: 10rem;
+    body {
+      background-color: hsl(var(--sg-background));
+    }
+  }
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 216 34% 17%;
+  }
 }
 @keyframes enter {
   from {
@@ -592,107 +839,46 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
-.first\:sg-mt-0:first-child {
-  margin-top: 0px;
-}
-.hover\:sg-bg-accent:hover {
-  background-color: hsl(var(--accent));
-}
-.hover\:sg-bg-gray\/20:hover {
-  background-color: hsl(var(--sg-gray) / 0.2);
-}
-.hover\:sg-bg-green\/80:hover {
-  background-color: hsl(var(--sg-green) / 0.8);
-}
-.hover\:sg-bg-orange\/80:hover {
-  background-color: hsl(var(--sg-orange) / 0.8);
-}
-.hover\:sg-bg-orange\/90:hover {
-  background-color: hsl(var(--sg-orange) / 0.9);
-}
-.hover\:sg-bg-purple\/80:hover {
-  background-color: hsl(var(--sg-purple) / 0.8);
-}
-.hover\:sg-bg-purple\/90:hover {
-  background-color: hsl(var(--sg-purple) / 0.9);
-}
-.hover\:sg-bg-red\/90:hover {
-  background-color: hsl(var(--sg-red) / 0.9);
-}
-.hover\:sg-text-accent-foreground:hover {
-  color: hsl(var(--accent-foreground));
-}
-.hover\:sg-underline:hover {
-  text-decoration-line: underline;
-}
-.focus\:sg-outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus\:sg-ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-.focus\:sg-ring-ring:focus {
-  --tw-ring-color: hsl(var(--sg-ring));
-}
-.focus\:sg-ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-.focus-visible\:sg-outline-none:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus-visible\:sg-ring-2:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-.focus-visible\:sg-ring-ring:focus-visible {
-  --tw-ring-color: hsl(var(--sg-ring));
-}
-.disabled\:sg-pointer-events-none:disabled {
-  pointer-events: none;
-}
-.disabled\:sg-opacity-50:disabled {
-  opacity: 0.5;
-}
-@media (min-width: 768px) {
-  .md\:sg-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .md\:sg-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .md\:sg-grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .md\:sg-px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
   }
 }
-@media (min-width: 1024px) {
-  .lg\:sg-text-5xl {
-    font-size: 3rem;
-    line-height: 1;
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
   }
 }
-.\[\&_svg\]\:sg-pointer-events-none svg {
-  pointer-events: none;
-}
-.\[\&_svg\]\:sg-size-4 svg {
-  width: 1rem;
-  height: 1rem;
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
 }
-.\[\&_svg\]\:sg-shrink-0 svg {
-  flex-shrink: 0;
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
 }
+@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-font-weight { syntax: "*"; inherits: false; }
+@property --tw-tracking { syntax: "*"; inherits: false; }
+@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-ring-color { syntax: "*"; inherits: false; }
+@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
+@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-ring-inset { syntax: "*"; inherits: false; }
+@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
+@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+/*! tailwindcss v4.0.2 | MIT License | https://tailwindcss.com */
 /*# sourceMappingURL=main.css.map */