@splendidlabz/styles 2.3.0 → 2.3.2

package/dist/styles.css

@@ -0,0 +1,1571 @@
+:root {
+  --leading: 1.5;
+  --border-width: 1px;
+  --border-style: solid;
+  --border-color: black;
+  --radius: 0.5rem;
+  --transition-duration: 250ms;
+  --transition-delay: 0ms;
+  --transition-easing: ease-in-out;
+  --alt-row-color: transparent;
+  --outline-width: 4px;
+  --outline-style: solid;
+  --outline-color: oklch(61.52% 0.178 257.59deg);
+  --outline-offset: 0px;
+}
+
+* {
+  --transition-values: var(--transition-duration) var(--transition-delay)
+    var(--transition-easing);
+  --transition-props: background, color, border, outline, opacity, gap, fill,
+    opacity, stroke, transform;
+}
+
+@layer components {
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  .sr-only {
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+@layer components {
+  html {
+    font-family: system-ui, sans-serif;
+    line-height: var(--leading, 1.5);
+    font-variant-ligatures: common-ligatures;
+  }
+  body {
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    text-rendering: optimizelegibility;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-variant-numeric: oldstyle-nums proportional-nums;
+  }
+  fieldset {
+    border: none;
+  }
+  a {
+    color: var(--text-color, currentcolor);
+    text-decoration: none;
+  }
+  a:visited {
+    color: var(--text-visited-color, var(--text-color, currentcolor));
+  }
+  a:hover {
+    color: var(--text-hover-color);
+  }
+  a:focus {
+    color: var(--text-focus-color, var(--text-hover-color));
+  }
+  a:active {
+    color: var(--text-active-color, var(--text-hover-color));
+  }
+}
+@layer components {
+  * {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+  a:focus-visible,
+  button:focus-visible,
+  :where([tabindex]:not([tabindex="-1"])):focus-visible {
+    outline-color: var(--outline-color);
+  }
+  .Focus-within:focus-within {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+  .Focus-within *:focus-visible {
+    outline-color: transparent;
+  }
+  .Preserve-outlines {
+    box-sizing: content-box;
+    margin: calc(var(--outline-width) * -1);
+    padding: calc(var(--outline-width));
+  }
+}
+@layer components {
+  .Fill,
+  [class*=Fill] {
+    border-color: var(--border-color);
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+  .Fill :where(svg path),
+  [class*=Fill] :where(svg path) {
+    fill: var(--fill-color, var(--text-color));
+    stroke: var(--stroke-color, var(--text-color));
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+  .Fill:hover,
+  [class*=Fill]:hover {
+    --shadow-color: var(--shadow-hover-color, var(--shadow-color));
+    --text-shadow-color: var(
+      --text-shadow-hover-color,
+      var(--text-shadow-color)
+    );
+    --drop-shadow-color: var(
+      --drop-shadow-hover-color,
+      var(--drop-shadow-color)
+    );
+    border-color: var(--border-hover-color, var(--border-color));
+    color: var(--text-hover-color, var(--text-color));
+    background-color: var(--bg-hover-color, var(--bg-color));
+  }
+  .Fill:hover :where(svg path),
+  [class*=Fill]:hover :where(svg path) {
+    fill: var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))));
+    stroke: var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))));
+  }
+  .Fill:focus,
+  [class*=Fill]:focus {
+    --shadow-color: var(
+      --shadow-focus-color,
+      var(--shadow-hover-color, var(--shadow-color))
+    );
+    --text-shadow-color: var(
+      --text-shadow-focus-color,
+      var(--text-shadow-hover-color, var(--text-shadow-color))
+    );
+    --drop-shadow-color: var(
+      --drop-shadow-focus-color,
+      var(--drop-shadow-hover-color, var(--drop-shadow-color))
+    );
+    border-color: var(--border-focus-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-focus-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  .Fill:focus :where(svg path),
+  [class*=Fill]:focus :where(svg path) {
+    fill: var(--fill-focus-color, var(--text-focus-color, var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))))));
+    stroke: var(--stroke-focus-color, var(--text-focus-color, var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))))));
+  }
+  .Fill:active,
+  [class*=Fill]:active {
+    --shadow-color: var(
+      --shadow-active-color,
+      var(--shadow-hover-color, var(--shadow-color))
+    );
+    --text-shadow-color: var(
+      --text-shadow-active-color,
+      var(--text-shadow-hover-color, var(--text-shadow-color))
+    );
+    --drop-shadow-color: var(
+      --drop-shadow-active-color,
+      var(--drop-shadow-hover-color, var(--drop-shadow-color))
+    );
+    border-color: var(--border-active-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-active-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-active-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  .Fill:active :where(svg path),
+  [class*=Fill]:active :where(svg path) {
+    fill: var(--fill-active-color, var(--text-active-color, var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))))));
+    stroke: var(--stroke-active-color, var(--text-active-color, var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))))));
+  }
+  .Fill.selected, .Fill.checked, .Fill[aria-current], .Fill[aria-selected], .Fill[aria-expanded=true],
+  [class*=Fill].selected,
+  [class*=Fill].checked,
+  [class*=Fill][aria-current],
+  [class*=Fill][aria-selected],
+  [class*=Fill][aria-expanded=true] {
+    --shadow-color: var(
+      --shadow-selected-color,
+      var(--shadow-hover-color, var(--shadow-color))
+    );
+    --text-shadow-color: var(
+      --text-shadow-selected-color,
+      var(--text-shadow-hover-color, var(--text-shadow-color))
+    );
+    --drop-shadow-color: var(
+      --drop-shadow-selected-color,
+      var(--drop-shadow-hover-color, var(--drop-shadow-color))
+    );
+    border-color: var(--border-selected-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-selected-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-selected-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  .Fill.selected :where(svg path), .Fill.checked :where(svg path), .Fill[aria-current] :where(svg path), .Fill[aria-selected] :where(svg path), .Fill[aria-expanded=true] :where(svg path),
+  [class*=Fill].selected :where(svg path),
+  [class*=Fill].checked :where(svg path),
+  [class*=Fill][aria-current] :where(svg path),
+  [class*=Fill][aria-selected] :where(svg path),
+  [class*=Fill][aria-expanded=true] :where(svg path) {
+    fill: var(--fill-selected-color, var(--text-selected-color, var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))))));
+    stroke: var(--stroke-selected-color, var(--text-selected-color, var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))))));
+  }
+  .Fill .disabled,
+  .Fill [disabled],
+  [class*=Fill] .disabled,
+  [class*=Fill] [disabled] {
+    --shadow-color: var(--shadow-hover-color, var(--shadow-color));
+    --text-shadow-color: var(
+      --text-shadow-hover-color,
+      var(--text-shadow-color)
+    );
+    --drop-shadow-color: var(
+      --drop-shadow-hover-color,
+      var(--drop-shadow-color)
+    );
+    border-color: var(--border-hover-color, var(--border-color));
+    color: var(--text-hover-color, var(--text-color));
+    background-color: var(--bg-hover-color, var(--bg-color));
+  }
+  .Fill .disabled :where(svg path),
+  .Fill [disabled] :where(svg path),
+  [class*=Fill] .disabled :where(svg path),
+  [class*=Fill] [disabled] :where(svg path) {
+    fill: var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))));
+    stroke: var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))));
+  }
+  :where([class*=Fill][class*=-outline]) {
+    --bg-color: transparent;
+  }
+  :where([class*=Fill][class*=-ghost]) {
+    --bg-color: transparent;
+    --border-color: transparent;
+  }
+  :where([class*=Fill][class*=-text]) {
+    --bg-color: transparent;
+    --bg-hover-color: transparent;
+    --bg-active-color: transparent;
+    --border-color: transparent;
+    --border-hover-color: transparent;
+    --border-active-color: transparent;
+  }
+  [class*=Fill][class*=not-interactive],
+  [class*=Fill][class*=notInteractive] {
+    --bg-hover-color: inherit;
+    --bg-active-color: inherit;
+    --bg-selected-color: inherit;
+    --border-hover-color: inherit;
+    --border-active-color: inherit;
+    --border-selected-color: inherit;
+    --text-hover-color: inherit;
+    --text-active-color: inherit;
+    --text-selected-color: inherit;
+    --fill-hover-color: inherit;
+    --fill-active-color: inherit;
+    --fill-selected-color: inherit;
+    --stroke-hover-color: inherit;
+    --stroke-active-color: inherit;
+    --stroke-selected-color: inherit;
+  }
+}
+@layer components {
+  input:where([type=text],
+  [type=search],
+  [type=email],
+  [type=password],
+  [type=tel],
+  [type=url]),
+  textarea,
+  select,
+  .Field {
+    display: block;
+    width: 100%;
+    border-radius: inherit;
+    font: inherit;
+    font-family: var(--input-font, inherit);
+    color: var(--text-color, currentColor);
+    background-color: var(--bg-color, transparent);
+  }
+  input[type=password] {
+    font-family: Verdana, sans-serif;
+    letter-spacing: 0.125em;
+  }
+  .disabled,
+  .readonly,
+  [disabled],
+  [readonly] {
+    opacity: 0.5;
+  }
+  .disabled:where(input),
+  .readonly:where(input),
+  [disabled]:where(input),
+  [readonly]:where(input) {
+    cursor: not-allowed;
+  }
+  .disabled:focus-visible,
+  .readonly:focus-visible,
+  [disabled]:focus-visible,
+  [readonly]:focus-visible {
+    outline-color: transparent;
+  }
+}
+@layer components {
+  button,
+  [class*=Button] {
+    flex-shrink: 0;
+    justify-content: center;
+    padding: 0.25em 1em;
+    border-width: var(--border-width, 1px);
+    border-color: var(--border-color);
+    border-radius: var(--radius);
+    font: var(--input-font, inherit);
+    color: var(--text-color, currentColor);
+    background-color: var(--bg-color, #eee);
+    text-decoration: none !important;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    cursor: pointer;
+  }
+  button *,
+  [class*=Button] * {
+    pointer-events: none;
+  }
+  button svg path,
+  [class*=Button] svg path {
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+  button:hover,
+  [class*=Button]:hover {
+    border-color: var(--border-hover-color, var(--border-color));
+    color: var(--text-hover-color, var(--text-color));
+    background-color: var(--bg-hover-color, var(--bg-color));
+  }
+  button:focus,
+  [class*=Button]:focus {
+    border-color: var(--border-focus-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-focus-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  button:active,
+  [class*=Button]:active {
+    border-color: var(--border-active-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-active-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-active-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  button.selected, button[aria-selected], button[aria-expanded=true],
+  [class*=Button].selected,
+  [class*=Button][aria-selected],
+  [class*=Button][aria-expanded=true] {
+    border-color: var(--border-selected-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-selected-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-selected-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  [class*=Button] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+}
+@layer components {
+  .Button-icon {
+    padding: var(--padding, 0.5em);
+    line-height: 1;
+  }
+}
+@layer components {
+  :where(.TextField) {
+    --padding: 0.5rem 0.75rem;
+  }
+  :where(.TextField) > * {
+    display: block;
+  }
+  :where(.TextField) :where(.Label) {
+    color: var(--text-color, inherit);
+  }
+  :where(.TextField) :where(.Hint) {
+    opacity: 0.5;
+  }
+  :where(.TextField) :where(.Error) {
+    color: red;
+  }
+  * + .InputGroup {
+    margin-top: 0.25rem;
+  }
+  .InputGroup {
+    border-width: var(--border-width);
+    border-color: var(--border-color);
+    border-radius: var(--radius);
+  }
+  .InputGroup > *,
+  .InputGroup > :where(astro-slot, astro-content, astro-island) > * {
+    padding: var(--padding);
+  }
+  .InputGroup > :where(.Field) {
+    border-radius: inherit;
+  }
+  .InputGroup:not(.Stack) {
+    display: flex;
+  }
+  .InputGroup:not(.Stack) > *:has(~ :where(.Field)),
+  .InputGroup:not(.Stack) > *:has(~ :where(.Field)):where(astro-slot, astro-content, astro-island) > * {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    border-width: 0;
+    border-radius: 0;
+    border-start-start-radius: calc(var(--radius) - var(--border-width));
+    border-end-start-radius: calc(var(--radius) - var(--border-width));
+  }
+  .InputGroup:not(.Stack) > *:has(~ :where(.Field)) + :where(.Field),
+  .InputGroup:not(.Stack) > *:has(~ :where(.Field)):where(astro-slot, astro-content, astro-island) > * + :where(.Field) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .InputGroup:not(.Stack) > :where(.Field) ~ *,
+  .InputGroup:not(.Stack) > :where(.Field) ~ *:where(astro-slot, astro-content, astro-island) > * {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    border-width: 0;
+    border-radius: 0;
+    border-start-end-radius: calc(var(--radius) - var(--border-width));
+    border-end-end-radius: calc(var(--radius) - var(--border-width));
+  }
+  .InputGroup:not(.Stack) > :where(.Field:has(~ *)) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .InputGroup:not(.Stack) > * {
+    position: relative;
+  }
+  .InputGroup:not(.Stack) > *:focus, .InputGroup:not(.Stack) > *:focus-visible {
+    z-index: 2;
+  }
+  .InputGroup.Stack *:has(~ :where(.Field)),
+  .InputGroup.Stack *:has(~ :where(.Field)):where(astro-slot, astro-content, astro-island) > * {
+    z-index: 2;
+    display: flex;
+    place-self: center start;
+  }
+  .InputGroup.Stack :where(.Field) ~ *,
+  .InputGroup.Stack :where(.Field) ~ *:where(astro-slot, astro-content, astro-island) > * {
+    display: flex;
+    place-self: center end;
+  }
+}
+textarea {
+  min-height: 9em;
+  resize: vertical;
+}
+
+@layer components {
+  .Textarea .Stack.Field {
+    display: grid;
+    padding: 0;
+  }
+  .Textarea .Field {
+    padding: var(--padding);
+  }
+  .Textarea textarea {
+    border-radius: inherit;
+  }
+  .Textarea .Replica {
+    white-space: pre-wrap;
+    visibility: hidden;
+  }
+  .Textarea .Replica::after {
+    content: attr(data-replicated-value);
+  }
+  .Textarea-autogrow textarea {
+    resize: none;
+    overflow: hidden;
+  }
+}
+@layer components {
+  .Legend + * {
+    margin-top: 0.25rem;
+  }
+  .Radio,
+  .Checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--gap, 0.5em);
+  }
+  :where(.Radio,
+  .Checkbox) + :where(.Radio,
+  .Checkbox) {
+    margin-top: 0.125em;
+  }
+  .Radio > :where(.Checkmark, .Radiomark),
+  .Checkbox > :where(.Checkmark, .Radiomark) {
+    display: grid;
+    place-items: center;
+  }
+  .Radio > :where(.Checkmark, .Radiomark) > *,
+  .Checkbox > :where(.Checkmark, .Radiomark) > * {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .Radio > :where(.Checkmark, .Radiomark) > input,
+  .Checkbox > :where(.Checkmark, .Radiomark) > input {
+    appearance: none;
+    display: grid;
+    place-content: center;
+    width: var(--width, var(--size, 1em));
+    height: var(--height, var(--size, 1em));
+    margin: 0;
+    padding: 0;
+    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, black);
+    font: inherit;
+    background-color: var(--bg-color, transparent);
+  }
+  .Radio > :where(.Checkmark, .Radiomark) svg,
+  .Checkbox > :where(.Checkmark, .Radiomark) svg {
+    pointer-events: none;
+    width: 0.85em;
+    height: 0.85em;
+    fill: var(--fill-color, none);
+    transform: scale(0);
+    transition: transform var(--transition-values);
+  }
+  .Radio > :where(.Checkmark, .Radiomark) svg path,
+  .Checkbox > :where(.Checkmark, .Radiomark) svg path {
+    stroke: var(--stroke-color, pink);
+  }
+  .Radio :where(.Checkmark, .Radiomark) ~ .TextInput,
+  .Checkbox :where(.Checkmark, .Radiomark) ~ .TextInput {
+    display: none;
+  }
+  .Radio :where(.Checkmark:has(:checked), .Radiomark:has(:checked)) ~ .TextInput,
+  .Checkbox :where(.Checkmark:has(:checked), .Radiomark:has(:checked)) ~ .TextInput {
+    display: block;
+  }
+  .Radio :where(input[type=checkbox]),
+  .Checkbox :where(input[type=checkbox]) {
+    border-radius: var(--checkbox-radius, 0.25em);
+  }
+  .Radio :where(input:checked) ~ svg,
+  .Checkbox :where(input:checked) ~ svg {
+    transform: scale(1);
+  }
+  .Radio :where(input[type=radio]),
+  .Checkbox :where(input[type=radio]) {
+    border-radius: 50%;
+  }
+  .Radio :where(.radio),
+  .Checkbox :where(.radio) {
+    pointer-events: none;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 50%;
+    background-color: var(--stroke-color, pink);
+    transform: scale(0);
+    transition: transform var(--transition-values);
+  }
+  .Radio :where(input[type=radio]:checked ~ .radio),
+  .Checkbox :where(input[type=radio]:checked ~ .radio) {
+    transform: scale(1);
+  }
+}
+@layer components {
+  .Select :where(select) {
+    appearance: none;
+    color: var(--text-color);
+    background: var(--bg-color);
+  }
+  .Select :where(select):hover {
+    border-color: var(--border-hover-color, var(--border-color));
+    color: var(--text-hover-color, var(--text-color));
+    background-color: var(--bg-hover-color, var(--bg-color));
+  }
+  .Select :where(select):hover :where(svg path) {
+    fill: var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))));
+    stroke: var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))));
+  }
+  .Select :where(select):focus {
+    border-color: var(--border-focus-color, var(--border-hover-color, var(--border-color)));
+    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(--bg-focus-color, var(--bg-hover-color, var(--bg-color)));
+  }
+  .Select :where(select):focus :where(svg path) {
+    fill: var(--fill-focus-color, var(--text-focus-color, var(--fill-hover-color, var(--text-hover-color, var(--fill-color, var(--text-color))))));
+    stroke: var(--stroke-focus-color, var(--text-focus-color, var(--stroke-hover-color, var(--text-hover-color, var(--stroke-color, var(--text-color))))));
+  }
+  .Select :where(select[multiple]),
+  .Select :where(select[multiple]:focus) {
+    overflow: auto;
+    padding: 0;
+  }
+  .Select :where(select[multiple]) :where(option),
+  .Select :where(select[multiple]:focus) :where(option) {
+    padding: 0.375em 0.75em;
+    color: var(--text-color);
+    background-image: linear-gradient(0deg, var(--bg-color) 0%, var(--bg-color) 100%);
+  }
+  .Select :where(select[multiple]) :where(option:hover),
+  .Select :where(select[multiple]:focus) :where(option:hover) {
+    color: var(--text-hover-color, var(--text-color));
+    background-image: linear-gradient(0deg, var(--bg-hover-color, var(--bg-color)) 0%, var(--bg-hover-color, var(--bg-color)) 100%);
+  }
+  .Select :where(select[multiple]) :where(option:focus),
+  .Select :where(select[multiple]:focus) :where(option:focus) {
+    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    background-image: linear-gradient(0deg, var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 0%, var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 100%);
+  }
+  .Select :where(select[multiple]) :where(option:checked),
+  .Select :where(select[multiple]:focus) :where(option:checked) {
+    color: var(--text-selected-color);
+    background-image: linear-gradient(0deg, var(--bg-selected-color, ) 0%, var(--bg-selected-color, ) 100%);
+  }
+}
+.ListboxPopover {
+  padding: 0;
+  border: 0;
+}
+
+[role=listbox] {
+  max-height: 15rem;
+  overflow-y: auto;
+}
+[role=listbox] [role=option] {
+  cursor: pointer;
+}
+[role=listbox] [role=option] > * {
+  pointer-events: none;
+}
+[role=listbox] [aria-selected=true] {
+  background: var(--bg-selected-color, pink);
+}
+
+.AutocompleteOptions .ComboboxMatchedString {
+  font-weight: bold;
+}
+
+.AutocompleteLoader,
+.AutocompleteEmpty {
+  transition: var(--transition);
+  transition-property: var(--transition-props), display;
+  transition-behavior: allow-discrete;
+}
+@starting-style {
+  .AutocompleteLoader,
+  .AutocompleteEmpty {
+    opacity: 0;
+  }
+}
+.AutocompleteLoader:empty,
+.AutocompleteEmpty:empty {
+  display: none;
+  opacity: 0;
+}
+
+.TimepickerOptions .Listbox li {
+  padding: 0.5rem 1rem;
+}
+
+@layer components {
+  .Switch {
+    --width: 3.5em;
+    --height: 1.2em;
+    --inner-margin: 0.2em;
+    display: inline-flex;
+  }
+  .Switch input[type=checkbox] {
+    appearance: none;
+    display: grid;
+    align-items: center;
+    width: var(--width);
+    padding: 0;
+    border-width: var(--border-width, 1px);
+    border-style: var(--border-style, solid);
+    border-color: var(--border-color, black);
+    border-radius: var(--height);
+    background-color: var(--bg-color, #eee);
+    transition: background-color var(--transition-values);
+  }
+  .Switch input[type=checkbox]:checked {
+    background-color: var(--bg-color, teal);
+  }
+  .Switch input[type=checkbox]::before {
+    --translateX: calc(
+      var(--width) - var(--height) - var(--inner-margin) * 2 - var(
+          --border-width,
+          1px
+        ) * 2
+    );
+    content: "";
+    box-sizing: content-box;
+    width: var(--height);
+    height: var(--height);
+    margin: var(--inner-margin);
+    border-radius: 50%;
+    background-color: white;
+    box-shadow: var(--shadow);
+    transition: transform var(--transition-values);
+  }
+  .Switch input[type=checkbox]:checked::before {
+    transform: translateX(var(--translateX));
+  }
+}
+@layer components {
+  .Box {
+    padding: 1rem;
+    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, black);
+    border-radius: var(--radius, 0.5em);
+  }
+}
+:root {
+  --scrollbar-width: thin;
+  --scrollbar-size: 12px;
+  color-scheme: dark light;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --scrollbar-thumb-color: #c1c1c1;
+    --scrollbar-track-color: #fafafa;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --scrollbar-thumb-color: #6b6b6b;
+    --scrollbar-track-color: #2d2d2d;
+  }
+}
+
+@layer components {
+  * {
+    scroll-behavior: var(--scroll-behavior, smooth);
+    scrollbar-width: var(--scrollbar-width, auto);
+    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+    /* Works on Chrome, Edge, and Safari */
+  }
+  *::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+  }
+  *::-webkit-scrollbar-thumb {
+    border: 3px solid var(--scrollbar-track-color);
+    border-radius: 100px;
+    background-color: var(--scrollbar-thumb-color);
+  }
+}
+@layer components {
+  :where([class*=BrowserFrame]) .FrameHeader {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    border: var(--border-width, 1px) solid var(--border-frame-header, var(--border-color));
+    border-bottom: 0;
+    border-radius: var(--radius) var(--radius) 0 0;
+    background: var(--bg-frame-header);
+  }
+  :where([class*=BrowserFrame]) .FrameHeaderDots {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: var(--dot-gap, 0.5rem);
+    padding: 0.75rem 1rem;
+  }
+  :where([class*=BrowserFrame]) .FrameHeaderDot {
+    width: var(--dot-size, 0.7rem);
+    height: var(--dot-size, 0.7rem);
+    border-radius: 50%;
+    background-color: var(--dot-color, #424242);
+  }
+  :where([class*=BrowserFrame]) .FrameHeaderTabs {
+    overflow: hidden;
+    align-self: end;
+    padding-top: 0.5rem;
+  }
+  :where([class*=BrowserFrame]) .FrameHeaderTabs .Tablist {
+    gap: 0.25rem;
+    padding-inline: calc(var(--outline-width) * 2);
+  }
+  :where([class*=BrowserFrame]) .FrameContent {
+    border: var(--border-width, 1px) solid var(--border-frame-content, var(--border-color));
+    border-radius: 0 0 var(--radius) var(--radius);
+    background: var(--bg-frame-content);
+  }
+  :where([class*=BrowserFrame]) .FrameContent > :where(.Content) {
+    padding: 1rem;
+  }
+  :where([class*=BrowserFrame]) .FrameContent > :where(.Background) svg {
+    width: 100%;
+    height: 100%;
+  }
+  .BrowserFrame-colored .FrameHeaderDot:first-child {
+    background-color: var(--dot-1-color, #e2544d);
+  }
+  .BrowserFrame-colored .FrameHeaderDot:nth-child(2) {
+    background-color: var(--dot-2-color, #d79f27);
+  }
+  .BrowserFrame-colored .FrameHeaderDot:last-child {
+    background-color: var(--dot-3-color, #22a936);
+  }
+}
+@layer components {
+  .List {
+    margin-left: 1em;
+    list-style-position: outside;
+  }
+  .List > :where(ul, ol) {
+    padding-left: 1em;
+  }
+  ul[class~=List] {
+    list-style-type: disc;
+  }
+  ol[class=List] {
+    list-style: decimal;
+  }
+}
+@layer components {
+  .Prose {
+    display: flex;
+    flex-flow: column;
+    gap: 1em;
+    max-width: 100%;
+  }
+  .Prose * + :where(h2, h3),
+  .Prose * + :where(astro-island, astro-slot) > :where(:where(h2, h3):first-child) {
+    padding-top: 2em;
+  }
+  .Prose * + :where(h4, h5, h6),
+  .Prose * + :where(astro-island, astro-slot) > :where(:where(h4, h5, h6):first-child) {
+    padding-top: 1em;
+  }
+  .Prose :where(ul, ol) {
+    list-style-type: revert-layer;
+  }
+  .Prose > :where(ul, ol),
+  .Prose > :where(astro-island, astro-slot) > :where(ul, ol) {
+    list-style-position: outside;
+    margin-left: 2em;
+  }
+  .Prose > :where(ul, ol) :where(ul, ol),
+  .Prose > :where(astro-island, astro-slot) > :where(ul, ol) :where(ul, ol) {
+    padding-left: 2em;
+  }
+  .Prose > :where(ul, ol) li,
+  .Prose > :where(astro-island, astro-slot) > :where(ul, ol) li {
+    font-variant-numeric: lining-nums;
+  }
+  .Prose > :where(ul, ol) li + li,
+  .Prose > :where(astro-island, astro-slot) > :where(ul, ol) li + li {
+    margin-top: 0.25em;
+  }
+  .Prose > :where(ul, ol) li:has(li) + li,
+  .Prose > :where(astro-island, astro-slot) > :where(ul, ol) li:has(li) + li {
+    margin-top: 0.5em;
+  }
+  .Prose > :where(ul, ol) li > :where(ul, ol),
+  .Prose > :where(astro-island, astro-slot) > :where(ul, ol) li > :where(ul, ol) {
+    margin-top: 0.25em;
+  }
+  .Prose code {
+    font-size: 0.8em;
+  }
+  .Prose :not(pre) > code {
+    display: inline;
+    padding: 0.2em 0.25em;
+    border-radius: var(--radius);
+  }
+  .Prose pre {
+    padding: 1em;
+    border-radius: var(--radius);
+  }
+  .Prose pre code {
+    background-color: transparent;
+  }
+  .Prose :where(a) {
+    text-decoration: underline;
+  }
+  .Prose > img {
+    border: 1px solid oklch(90% 0 0deg);
+    border-radius: var(--radius);
+  }
+}
+figcaption {
+  margin-block: 0.5em;
+  font-size: 0.8em;
+  text-align: center;
+}
+
+@layer components {
+  .SimpleSVG :where(path) {
+    fill: var(--fill-color);
+    stroke: var(--stroke-color);
+    stroke-width: var(--stroke-width);
+  }
+}
+@layer components {
+  .Accordion svg {
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+  .Accordion :where([aria-expanded=true] svg) {
+    transform: rotate(90deg);
+  }
+  .AccordionBtn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5em;
+    width: 100%;
+    padding: 0.75rem;
+    border: 0;
+    text-align: left;
+  }
+  .AccordionBtn:where(:has(svg + span)), .AccordionBtn:where(:has(svg + astro-slot)) {
+    justify-content: start;
+  }
+  .AccordionContent {
+    padding: 0.75rem;
+  }
+}
+@layer components {
+  .Breadcrumbs {
+    --gap: 0.2em;
+    font-size: 0.8rem;
+  }
+  .Breadcrumbs ul,
+  .Breadcrumbs ol {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: var(--gap);
+  }
+  .Breadcrumbs .Crumb {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+  }
+  .Breadcrumbs .Crumb [aria-current] {
+    opacity: 0.7;
+  }
+}
+@layer components {
+  .Callout {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    font-size: 0.85em;
+  }
+  .Callout > * {
+    padding: 0.85rem;
+  }
+  .Callout :where(.CalloutHeader) {
+    padding-block: 0.375rem;
+    border-bottom: 1px solid var(--divider-color, var(--border-color));
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    color: var(--text-callout-header, var(--text-color));
+    background: var(--bg-callout-header, var(--bg-color));
+  }
+  .Callout :where(.CalloutContent) {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: var(--text-callout-content, var(--text-color));
+    background: var(--bg-callout-content, var(--bg-color));
+  }
+}
+@layer components {
+  [class*=DrawerBackdrop] {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background-color: oklch(0% 0 0deg / 0.5);
+  }
+  .DrawerBackdrop-blur {
+    transition-property: background, backdrop-filter;
+    backdrop-filter: blur(8px);
+  }
+  .DrawerContent {
+    position: fixed;
+    overflow-y: auto;
+    z-index: 100;
+    padding: 1rem;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+  }
+  .DrawerCloseButton {
+    padding: 0.5rem;
+  }
+}
+@layer components {
+  .DropdownTrigger {
+    gap: 0.25em;
+  }
+  .DropdownTrigger svg {
+    flex-shrink: 0;
+    transition: transform var(--transition-values);
+  }
+  .DropdownTrigger[aria-expanded=true] svg {
+    transform: rotate(-180deg);
+  }
+}
+@layer components {
+  .FancyList {
+    --svg-width: 1em;
+    --svg-height: 1lh;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--gap, 0.5em);
+  }
+  .FancyList :where(li) {
+    grid-column: 1/-1;
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+  .FancyList :where(li) :where(.emoji),
+  .FancyList :where(li) > :where(astro-slot, astro-island) > :where(.emoji) {
+    font-size: 0.75em;
+    line-height: 1lh;
+  }
+  .Prose > :where(.FancyList) {
+    margin-left: calc(2em - var(--svg-width, 1em) - var(--gap, 0.5em));
+  }
+}
+@layer components {
+  .PerspectiveHover {
+    --sensitivity: 3;
+    --perspective: 1000px;
+    position: relative;
+    will-change: transform;
+    transition: transform 0.25s ease-in-out;
+  }
+}
+@layer components {
+  .PopoverContent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    max-width: 100%;
+    padding: 0.75em;
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--radius);
+    background-color: var(--bg-color);
+  }
+  .PopoverArrow {
+    position: absolute;
+    aspect-ratio: 1;
+    border-top-width: inherit;
+    border-left-width: inherit;
+    border-style: inherit;
+    border-color: inherit;
+    border-radius: 2px 0 0;
+    background-color: inherit;
+  }
+}
+@layer components {
+  .Resizer {
+    --size: 4px;
+    background-color: var(--bg-color, transparent);
+  }
+  .Resizer:hover {
+    background-color: var(--bg-hover-color, pink);
+  }
+  .Resizer-horizontal {
+    cursor: ew-resize;
+    top: 0;
+    bottom: 0;
+    width: var(--size, 4px);
+  }
+  .Resizer-vertical {
+    cursor: ns-resize;
+    left: 0;
+    right: 0;
+    height: var(--size, 4px);
+  }
+  .Stack .Resizer-bottom {
+    place-self: end stretch;
+  }
+  .Stack .Resizer-right {
+    place-self: stretch end;
+  }
+  .relative .Resizer,
+  .Relative .Resizer {
+    position: absolute;
+  }
+  .relative .Resizer-bottom,
+  .Relative .Resizer-bottom {
+    bottom: 0;
+  }
+  .relative .Resizer-right,
+  .Relative .Resizer-right {
+    right: 0;
+  }
+}
+@layer components {
+  .Spotlight {
+    --size: 25em;
+    --gradient: hsl(0deg 0% 50% / 30%), transparent;
+    --gradient-shape: circle;
+    --gradient-size: closest-side;
+    overflow: hidden;
+    position: relative;
+  }
+  .Spotlight > * {
+    position: relative;
+    z-index: 2;
+    background-clip: text;
+  }
+  .Spotlight::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: calc(var(--y) * 1px);
+    left: calc(var(--x) * 1px);
+    z-index: 1;
+    width: var(--size);
+    height: var(--size);
+    background-image: radial-gradient(var(--gradient-shape) var(--gradient-size) at var(--gradient-position), var(--tw-gradient-stops, var(--gradient)));
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    transition: var(--transition-values);
+    transition-property: opacity;
+  }
+  .Spotlight[active]::after {
+    opacity: 1;
+  }
+}
+@layer components {
+  .Status {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-width: var(--border-width, 1px);
+    border-color: var(--border-color);
+    border-radius: var(--radius);
+    color: var(--text-color);
+    background-color: var(--bg-color);
+  }
+  .Status:empty {
+    display: none;
+  }
+  .Status-info {
+    --border-color: #d1d5db;
+    --bg-color: #f9fafb;
+    --text-color: #111827;
+  }
+  .Status-error {
+    --border-color: #fca5a5;
+    --bg-color: #fef2f2;
+    --text-color: #b91c1c;
+  }
+  .Status-success {
+    --border-color: #86efac;
+    --bg-color: #f0fdf4;
+    --text-color: #15803d;
+  }
+}
+@layer components {
+  .Tablist {
+    display: flex;
+    gap: 0.5em;
+  }
+  .Tab {
+    position: relative;
+    z-index: 1;
+    padding: 0.5rem 1rem;
+    border-color: var(--border-color);
+    background-color: var(--bg-color);
+    text-align: left;
+  }
+  .Tab[aria-selected] {
+    z-index: 2;
+    border-color: var(--border-selected-color, var(--border-color));
+    background-color: var(--bg-selected-color);
+  }
+  .Tabpanels {
+    position: relative;
+    max-width: 100%;
+    border: var(--border-width, 1px) solid var(--border-color, black);
+  }
+  .Tabpanel {
+    max-width: 100%;
+    padding: 1rem;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+  .Tablist-top {
+    --scrollbar-width: none;
+    --scrollbar-size: 0px;
+    max-width: 100%;
+  }
+  :is(.Tablist-left, .Tablist-right) {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+  :is(.Tablist-left, .Tablist-right) :where(.Tab) {
+    align-self: stretch;
+  }
+  .Tablist-right {
+    order: 2;
+  }
+  :where(.Tablist-underline) {
+    gap: 0;
+  }
+  :where(.Tablist-underline) .Tab {
+    border-width: 0;
+    border-radius: 0;
+  }
+  :where(.Tablist-underline).Tablist-top :where(.Tab) {
+    top: var(--border-width, 1px);
+    border-bottom-width: var(--border-width, 1px);
+  }
+  :where(.Tablist-underline).Tablist-left :where(.Tab) {
+    left: var(--border-width, 1px);
+    border-right-width: var(--border-width, 1px);
+  }
+  :where(.Tablist-underline).Tablist-right :where(.Tab) {
+    right: var(--border-width, 1px);
+    border-left-width: var(--border-width, 1px);
+  }
+  :where(.Tablist-tab) .Tab {
+    position: relative;
+  }
+  :where(.Tablist-tab).Tablist-top :where(.Tab) {
+    top: var(--border-width, 1px);
+    border-bottom: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  :where(.Tablist-tab).Tablist-left :where(.Tab) {
+    right: var(--border-width, 1px);
+    border-right: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  :where(.Tablist-tab).Tablist-right :where(.Tab) {
+    left: var(--border-width, 1px);
+    border-left: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+}
+.Textwall .TextwallDimensions {
+  aspect-ratio: 4/3;
+  max-height: 75dvh;
+}
+.Textwall .TextwallContent {
+  position: absolute;
+  inset: -150%;
+  transform: rotate(var(--rotation, -15deg));
+}
+.Textwall [class*=TextwallBoundary] {
+  pointer-events: none;
+}
+.Textwall .TextwallBoundary-after {
+  bottom: -1px;
+}
+
+@layer components {
+  .Youtube div,
+  .Vimeo div {
+    aspect-ratio: 16/9;
+  }
+  .Youtube iframe,
+  .Vimeo iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+@layer components {
+  .Codepen {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    margin: 1em 0;
+    padding: 1em;
+    border: 2px solid;
+  }
+}
+@layer components {
+  .Tweet .twitter-tweet {
+    margin: 0 !important;
+  }
+}
+.CQCheckerGrid {
+  display: flex;
+  flex-flow: row wrap;
+  grid-auto-flow: dense;
+  padding: 1rem;
+}
+.CQCheckerGrid > * {
+  margin: 0.5rem;
+}
+
+.size {
+  font-size: 0.8rem;
+  color: #666;
+}
+
+@layer components {
+  .elevation-1 {
+    --shadow-color: rgb(0 0 0 / 8%);
+    box-shadow: 0px 2px 2.6px -0.325px var(--shadow-color);
+  }
+  .elevation-2 {
+    --shadow-color: rgb(0 0 0 / 8%);
+    box-shadow: 0px 2px 2.6px -0.325px var(--shadow-color), 0px 4.2870938501px 5.5732220052px -0.6966527506px var(--shadow-color);
+  }
+  .elevation-3 {
+    --shadow-color: rgb(0 0 0 / 8%);
+    box-shadow: 0px 2px 2.6px -0.325px var(--shadow-color), 0px 4.2870938501px 5.5732220052px -0.6966527506px var(--shadow-color), 0px 6.6967390442px 8.7057607575px -1.0882200947px var(--shadow-color);
+  }
+  .elevation-4 {
+    --shadow-color: rgb(0 0 0 / 8%);
+    box-shadow: 0px 2px 2.6px -0.325px var(--shadow-color), 0px 4.2870938501px 5.5732220052px -0.6966527506px var(--shadow-color), 0px 6.6967390442px 8.7057607575px -1.0882200947px var(--shadow-color), 0px 9.18958684px 11.946462892px -1.4933078615px var(--shadow-color);
+  }
+  .elevation-5 {
+    --shadow-color: rgb(0 0 0 / 8%);
+    box-shadow: 0px 2px 2.6px -0.325px var(--shadow-color), 0px 4.2870938501px 5.5732220052px -0.6966527506px var(--shadow-color), 0px 6.6967390442px 8.7057607575px -1.0882200947px var(--shadow-color), 0px 9.18958684px 11.946462892px -1.4933078615px var(--shadow-color), 0px 11.7461894309px 15.2700462601px -1.9087557825px var(--shadow-color);
+  }
+  .elevation-6 {
+    --shadow-color: rgb(0 0 0 / 8%);
+    box-shadow: 0px 2px 2.6px -0.325px var(--shadow-color), 0px 4.2870938501px 5.5732220052px -0.6966527506px var(--shadow-color), 0px 6.6967390442px 8.7057607575px -1.0882200947px var(--shadow-color), 0px 9.18958684px 11.946462892px -1.4933078615px var(--shadow-color), 0px 11.7461894309px 15.2700462601px -1.9087557825px var(--shadow-color), 0px 14.3547743862px 18.6612067021px -2.3326508378px var(--shadow-color);
+  }
+  .tw-elevation {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  .tw-elevation-2 {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  }
+  .tw-elevation-3 {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+  .tw-elevation-4 {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  }
+  .tw-elevation-5 {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  }
+  .tw-elevation-6 {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+  .mui-elevation-1 {
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  }
+  .mui-elevation-2 {
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  }
+  .mui-elevation-3 {
+    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
+  }
+  .mui-elevation-4 {
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .mui-elevation-5 {
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
+  }
+  .mui-elevation-6 {
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+  }
+  .mui-elevation-7 {
+    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14), 0 2px 16px 1px rgba(0, 0, 0, 0.12);
+  }
+}
+@layer components {
+  .glow {
+    --shadow-x: 0;
+    --shadow-y: 0;
+    --shadow-blur: 0.5em;
+    --shadow-spread: 0.25em;
+    --shadow-alpha: 0.5;
+    position: relative;
+  }
+  .glow > * {
+    position: relative;
+    z-index: 1;
+  }
+  .glow:hover, .glow:focus {
+    --shadow-alpha: 1;
+  }
+  .glow::before {
+    content: "";
+    position: absolute;
+    top: calc(var(--border-width, 0px) * -1);
+    left: calc(var(--border-width, 0px) * -1);
+    box-sizing: content-box;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    border-radius: inherit;
+    box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
+    opacity: var(--shadow-alpha);
+    transition: var(--transition-values);
+    transition-property: opacity;
+  }
+  .glow-2 {
+    --shadow-blur: 1em;
+    --shadow-spread: 0.375em;
+  }
+  .glow-3 {
+    --shadow-blur: 1.5em;
+    --shadow-spread: 0.5em;
+  }
+}
+@layer components {
+  :root {
+    --gradient-shape: ;
+    --gradient-size: ;
+    --angle: 90deg;
+    --gradient-position: center;
+    --color-space: oklab;
+    --hue-interpolation: ;
+    --gradient: ;
+    --gradient-alpha: 1;
+  }
+}
+@layer utilities {
+  .gradient {
+    background-image: linear-gradient(var(--angle), var(--tw-gradient-stops, var(--gradient)));
+  }
+  @supports (linear-gradient(in oklab)) {
+    .gradient {
+      background: linear-gradient(var(--angle) in var(--color-space) var(--hue-interpolation), var(--tw-gradient-stops, var(--gradient)));
+    }
+  }
+  .radial-gradient {
+    background-image: radial-gradient(var(--gradient-shape) var(--gradient-size) at var(--gradient-position), var(--tw-gradient-stops, var(--gradient)));
+  }
+  .conic-gradient {
+    background-image: conic-gradient(from var(--angle) at var(--gradient-position), var(--tw-gradient-stops, var(--gradient)));
+  }
+  .repeating-gradient {
+    background-image: repeating-linear-gradient(var(--angle), var(--tw-gradient-stops, var(--gradient)));
+  }
+  @supports (linear-gradient(in oklab)) {
+    .repeating-gradient {
+      background-image: repeating-linear-gradient(var(--angle) in var(--color-space) var(--hue-interpolation), var(--tw-gradient-stops, var(--gradient)));
+    }
+  }
+  .repeating-radial-gradient {
+    background-image: repeating-radial-gradient(var(--gradient-shape) var(--gradient-size) at var(--gradient-position), var(--tw-gradient-stops, var(--gradient)));
+  }
+  .repeating-conic-gradient {
+    background-image: repeating-conic-gradient(from var(--angle) at var(--gradient-position), var(--tw-gradient-stops, var(--gradient)));
+  }
+  .text-gradient {
+    display: inline-flex;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    box-decoration-break: clone;
+  }
+}
+@layer utilities {
+  .Shadow {
+    --shadow-string: var(--shadow-x, 0) var(--shadow-y, 0) var(--shadow-blur, 0)
+      var(--shadow-spread, 0) var(--shadow-color, var(--tw-shadow-color));
+    box-shadow: var(--shadow, var(--shadow-string));
+  }
+  .Textshadow {
+    --text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
+      var(--text-shadow-blur, 0) var(--text-shadow-color);
+    text-shadow: var(--text-shadow, var(--text-shadow-string));
+  }
+  .Dropshadow {
+    --drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
+      var(--drop-shadow-blur, 0) var(--drop-shadow-color);
+    filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
+  }
+}
+@layer components {
+  @supports (-webkit-text-stroke-width: 1px) {
+    .Text-stroke {
+      -webkit-text-stroke-width: var(--stroke-width, 0.1em);
+      -webkit-text-stroke-color: var(--stroke-color);
+      paint-order: stroke fill;
+    }
+  }
+  .Text-outline {
+    color: var(--stroke-color);
+  }
+  @supports (-webkit-text-stroke-width: 1px) {
+    .Text-outline {
+      font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
+      color: var(--bg-color);
+      -webkit-text-stroke-width: var(--stroke-width, 2px);
+      -webkit-text-stroke-color: var(--stroke-color);
+      paint-order: stroke fill;
+    }
+  }
+}
+.Backdrop-blur {
+  transition-property: backdrop-filter;
+  backdrop-filter: blur(var(--blur, 8px));
+}
+
+[class*=Animate] {
+  animation: var(--animation-string);
+  animation-play-state: running;
+}
+
+.Animate-floating {
+  animation: floating 4s ease-in-out infinite alternate;
+}
+
+@keyframes floating {
+  0% {
+    transform: translateY(var(--ty, -8px));
+  }
+  100% {
+    transform: translateY(var(--ty, 8px));
+  }
+}
+@layer utilities {
+  .Square {
+    width: var(--size);
+    height: var(--size);
+  }
+  .Circle {
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+  }
+  .RoundRect {
+    border-radius: var(--radius, 8px);
+  }
+  .Pill {
+    border-radius: 100em;
+  }
+}
+@layer components {
+  [class*=Writing] {
+    transition: none;
+  }
+  .Writing-normal {
+    writing-mode: horizontal-tb;
+  }
+  .Writing-rotateLeft {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    transform: rotate(180deg);
+  }
+  .Writing-rotateRight {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+  }
+  .Writing-downwards,
+  .Writing-downwards-lr {
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+  .Writing-downwards-rl {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+}
+
+/*# sourceMappingURL=styles.css.map */