@splendidlabz/styles 2.3.2 → 3.0.0

package/dist/no-tw/styles.css

@@ -0,0 +1,2018 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+@layer utilities {
+  .button {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    border-color: var(--border-color, currentcolor);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+    :where(svg path) {
+      --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+      --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+      fill: var(--fill-color, var(--text-color));
+      stroke: var( --stroke-color, var(--text-color) );
+    }
+    &: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));
+    }
+    &: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))) );
+      }
+    }
+    &: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)) );
+    }
+    &: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))) ) ) );
+      }
+    }
+    &:active {
+      border-color: var(--border-active-color,);
+      color: var(--text-active-color);
+      background-color: var(--bg-active-color);
+    }
+    &:active {
+      :where(svg path) {
+        fill: var(--fill-active-color, var(--text-active-color));
+        stroke: var(--stroke-active-color, var(--text-active-color));
+      }
+    }
+    &.selected, &.checked, &[aria-current], &[aria-selected], &[aria-expanded='true'] {
+      border-color: var(--border-selected-color);
+      color: var(--text-selected-color);
+      background-color: var(--bg-selected-color);
+    }
+    &.selected, &.checked, &[aria-current], &[aria-selected], &[aria-expanded='true'] {
+      :where(svg path) {
+        fill: var(--fill-selected-color);
+        stroke: var(--stroke-selected-color);
+      }
+    }
+    flex-shrink: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    max-width: 100%;
+    padding: 0.25em 1em;
+    font: inherit;
+    font-family: var(--input-font);
+    text-decoration: none !important;
+    cursor: pointer;
+    * {
+      pointer-events: none;
+    }
+    svg path {
+      --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+      --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+  }
+  .sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index, 15);
+    :where([class*='grid'] > &) {
+      align-self: start;
+    }
+  }
+  .sticky {
+    position: sticky;
+  }
+  .masonry {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+    grid-template-rows: masonry;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+  }
+  .container {
+    width: 100%;
+  }
+}
+@layer reset {
+  html {
+    box-sizing: border-box;
+  }
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  html, body {
+    height: 100%;
+  }
+  body {
+    min-height: 100vh;
+    min-height: 100svh;
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+    border-style: solid;
+  }
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+    scroll-margin: 2em;
+  }
+  ul {
+    list-style: none;
+  }
+  img, video, object, embed, svg {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+  }
+  picture {
+    display: flex;
+    justify-content: center;
+  }
+  iframe, canvas {
+    display: block;
+    max-width: 100%;
+  }
+  svg {
+    pointer-events: none;
+    flex-shrink: 0;
+    box-sizing: content-box;
+    width: var(--svg-width, auto);
+    height: var(--svg-height, 1em);
+  }
+  hr {
+    height: 1px;
+    background-color: var(--border-color, black);
+  }
+  [hidden] {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+  noscript {
+    display: block;
+    margin-block: 1em;
+  }
+}
+@layer base {
+  * {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+}
+@layer base {
+  .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;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+@layer base {
+  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;
+  }
+  pre {
+    padding: 1em;
+    border-radius: var(--radius);
+  }
+  code {
+    font-size: 0.8em;
+    :not(pre) > & {
+      display: inline;
+      padding: 0.2em 0.25em;
+      border-radius: var(--radius);
+    }
+    pre > & {
+      background-color: transparent;
+    }
+  }
+}
+@layer base {
+  fieldset {
+    border: none;
+  }
+  input:where( [type='text'], [type='search'], [type='email'], [type='password'], [type='tel'], [type='url'] ), textarea, select, .field {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    border-color: var(--border-color, currentcolor);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+    &: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));
+    }
+    &: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)) );
+    }
+    &:active {
+      border-color: var(--border-active-color,);
+      color: var(--text-active-color);
+      background-color: var(--bg-active-color);
+    }
+    &.selected, &.checked, &[aria-current], &[aria-selected], &[aria-expanded='true'] {
+      border-color: var(--border-selected-color);
+      color: var(--text-selected-color);
+      background-color: var(--bg-selected-color);
+    }
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    display: block;
+    width: 100%;
+    padding: 0.25em 0.5em;
+    font: inherit;
+    font-family: var(--input-font);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+  }
+  input, textarea {
+    &:focus-visible {
+      outline-color: var(--outline-color);
+    }
+  }
+  input[type='password'] {
+    font-family: Verdana, sans-serif;
+    letter-spacing: 0.125em;
+  }
+  .disabled, .readonly, [disabled], [readonly] {
+    opacity: 0.5;
+    &:where(input) {
+      cursor: not-allowed;
+    }
+    &:focus, &:focus-visible {
+      outline-color: transparent;
+    }
+  }
+}
+@layer utilities {
+  a {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    border-color: var(--border-color, currentcolor);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+    &: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));
+    }
+    &: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)) );
+    }
+    &:active {
+      border-color: var(--border-active-color,);
+      color: var(--text-active-color);
+      background-color: var(--bg-active-color);
+    }
+    &.selected, &.checked, &[aria-current], &[aria-selected], &[aria-expanded='true'] {
+      border-color: var(--border-selected-color);
+      color: var(--text-selected-color);
+      background-color: var(--bg-selected-color);
+    }
+  }
+  button {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    border-color: var(--border-color, currentcolor);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+    :where(svg path) {
+      --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+      --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+      fill: var(--fill-color, var(--text-color));
+      stroke: var( --stroke-color, var(--text-color) );
+    }
+    &: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));
+    }
+    &: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))) );
+      }
+    }
+    &: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)) );
+    }
+    &: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))) ) ) );
+      }
+    }
+    &:active {
+      border-color: var(--border-active-color,);
+      color: var(--text-active-color);
+      background-color: var(--bg-active-color);
+    }
+    &:active {
+      :where(svg path) {
+        fill: var(--fill-active-color, var(--text-active-color));
+        stroke: var(--stroke-active-color, var(--text-active-color));
+      }
+    }
+    &.selected, &.checked, &[aria-current], &[aria-selected], &[aria-expanded='true'] {
+      border-color: var(--border-selected-color);
+      color: var(--text-selected-color);
+      background-color: var(--bg-selected-color);
+    }
+    &.selected, &.checked, &[aria-current], &[aria-selected], &[aria-expanded='true'] {
+      :where(svg path) {
+        fill: var(--fill-selected-color);
+        stroke: var(--stroke-selected-color);
+      }
+    }
+    flex-shrink: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    max-width: 100%;
+    padding: 0.25em 1em;
+    font: inherit;
+    font-family: var(--input-font);
+    text-decoration: none !important;
+    cursor: pointer;
+    * {
+      pointer-events: none;
+    }
+    svg path {
+      --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+      --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+  }
+  :is(a, button, .button), :where([tabindex]:not([tabindex='-1'])) {
+    &:focus-visible {
+      outline-color: var(--outline-color);
+    }
+  }
+}
+.input-group.stack {
+  *:has(~ :where(.input)), *:has(~ :where(.input)):where(astro-slot, astro-content, astro-island) > * {
+    z-index: 2;
+    display: flex;
+    place-self: center start;
+  }
+  :where(.input) ~ *, :where(.input) ~ *:where(astro-slot, astro-content, astro-island) > * {
+    display: flex;
+    place-self: center end;
+  }
+}
+@layer base {
+  textarea {
+    min-height: var(--textarea-height);
+    resize: vertical;
+    field-sizing: normal;
+  }
+}
+@layer components {
+  .backdrop:where([data-state='blur']), .backdrop-blur {
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props: backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    transition-property: backdrop-filter;
+    backdrop-filter: blur(var(--blur, 8px));
+  }
+}
+table {
+  width: 100%;
+  font-variant-numeric: lining-nums tabular-nums slashed-zero diagonal-fractions;
+  border-collapse: collapse;
+  &:has(thead) tr:nth-child(2n + 2) {
+    background-color: var(--alt-row-color);
+  }
+  &:not(:has(thead)) tr {
+    tr:nth-child(2n + 3) {
+      background-color: var(--alt-row-color);
+    }
+  }
+  th:where([scope='colgroup'], [scope='col'], :not([scope])) {
+    border-top: var(--header-row-border-top);
+    border-bottom: var(--header-row-border-bottom);
+    font-weight: bold;
+  }
+  th:where([scope='group'], [scope='row']) {
+    font-weight: bold;
+  }
+  :is(th, td) {
+    display: table-cell;
+    text-align: left;
+    padding: var(--padding, var(--padding-x, 0.375rem)) var(--padding, var(--padding-y, 0.5rem));
+  }
+}
+.table-grid:where(table, [role='table'], [role='grid']) {
+  width: 100%;
+  font-variant-numeric: lining-nums tabular-nums slashed-zero diagonal-fractions;
+  :where(table) & {
+    table-layout: auto;
+  }
+  :where(.table-grid) & {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+  }
+  table-layout: auto;
+  max-width: 100%;
+}
+.table-grid :where(thead, tbody, tfoot, [role='rowgroup']) {
+  display: contents;
+}
+.table-grid :where(tr, [role='row']) {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  &:nth-child(2n + 3) {
+    background-color: var(--alt-row-color);
+  }
+}
+.table-grid :where( th[scope='colgroup'], th[scope='col'], th:not([scope]), [role='columnheader'] ) {
+  border-top: var(--header-row-border-top);
+  border-bottom: var(--header-row-border-bottom);
+  font-weight: bold;
+}
+.table-grid :where(th[scope='rowgroup'], th[scope='row'], [role='rowheader']) {
+  font-weight: bold;
+}
+.table-grid :where( [role='columnheader'], [role='rowheader'], [role='cell'], [role='gridcell'], th, td ) {
+  display: table-cell;
+  text-align: left;
+  padding: var(--padding, var(--padding-x, 0.375rem)) var(--padding, var(--padding-y, 0.5rem));
+  display: grid;
+  align-items: center;
+}
+:root {
+  --shadow-x: 0px;
+  --shadow-y: 1px;
+  --shadow-blur: 1px;
+  --shadow-color: rgb(0 0 0);
+  --shadow-alpha: 0.25;
+  --shadow-x-multiple: 2;
+  --shadow-y-multiple: 2;
+  --shadow-blur-multiple: 2;
+}
+@layer base {
+  :root {
+    --gradient-alpha: 1;
+    --gradient-angle: 90deg;
+    --gradient-position: center;
+    --gradient-shape: ;
+    --gradient-size: ;
+    --color-space: oklab;
+    --hue-interpolation: ;
+  }
+}
+@layer components {
+  .box {
+    padding: var(--padding, 1rem);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+  }
+  .card {
+    padding: var(--padding, 1rem);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+  }
+  .card-split {
+    padding: var(--padding, 1rem);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    > *, :where(astro-slot, astro-island, astro-content) > * {
+      margin: var(--nudge, 0);
+      padding: var(--padding, 1rem);
+    }
+    &.card-split {
+      overflow: hidden;
+      gap: 0;
+      padding: 0;
+      > *, :where(astro-slot, astro-island, astro-content) > * {
+        border-radius: calc(var(--radius) - var(--nudge));
+      }
+    }
+    &:where(.divider-between-x, .divider-between-horizontal) > :where(.card-split) {
+      border-width: 0;
+      border-top-width: var(--border-width);
+    }
+    &:where(.divider-between-y, .divider-between-vertical) > :where(.card-split) {
+      border-width: 0;
+      border-left-width: var(--border-width);
+    }
+  }
+  .hero-heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, 0.25em);
+    max-width: 100%;
+    > :where(.hero-eyebrow) {
+      font-size: var(--eyebrow-size, 0.6em);
+    }
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      max-width: 100%;
+    }
+  }
+  .hero-heading-start {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, 0.25em);
+    max-width: 100%;
+    > :where(.hero-eyebrow) {
+      font-size: var(--eyebrow-size, 0.6em);
+    }
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      max-width: 100%;
+    }
+    text-align: start;
+  }
+  .hero-heading-center {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, 0.25em);
+    max-width: 100%;
+    > :where(.hero-eyebrow) {
+      font-size: var(--eyebrow-size, 0.6em);
+    }
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      max-width: 100%;
+    }
+    align-self: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+  .hero-heading-end {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, 0.25em);
+    max-width: 100%;
+    > :where(.hero-eyebrow) {
+      font-size: var(--eyebrow-size, 0.6em);
+    }
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      max-width: 100%;
+    }
+    align-self: end;
+    margin-inline-start: auto;
+    text-align: end;
+  }
+  .indent-list {
+    --indent-list-depth: 0;
+    li li {
+      margin-inline-start: var(--indent, 1em);
+    }
+    li {
+      --depth: 1;
+      a {
+        --depth: 1;
+      }
+      li, li a {
+        --depth: 2;
+      }
+      li li, li li a {
+        --depth: 3;
+      }
+      li li li, li li li a {
+        --depth: 4;
+      }
+      li li li li, li li li li a {
+        --depth: 5;
+      }
+    }
+    :where(ul, ol, li) {
+      padding-inline-start: 0;
+    }
+    a {
+      display: block;
+      padding-block: 0.125em;
+    }
+    li {
+      list-style-type: disc;
+    }
+  }
+  .indent-list-guides {
+    --indent-list-depth: 0;
+    li li {
+      margin-inline-start: var(--indent, 1em);
+    }
+    li {
+      --depth: 1;
+      a {
+        --depth: 1;
+      }
+      li, li a {
+        --depth: 2;
+      }
+      li li, li li a {
+        --depth: 3;
+      }
+      li li li, li li li a {
+        --depth: 4;
+      }
+      li li li li, li li li li a {
+        --depth: 5;
+      }
+    }
+    :where(ul, ol, li) {
+      padding-inline-start: 0;
+    }
+    a {
+      display: block;
+      padding-block: 0.125em;
+    }
+    li li {
+      position: relative;
+      margin-inline-start: 0;
+      padding-inline-start: var(--indent, 1em);
+      a {
+        position: relative;
+        margin-left: calc(var(--indent, 1em) * -1);
+        padding-left: var(--indent, 1em);
+      }
+      &::before, a::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 1px;
+        background-color: var(--border-color);
+      }
+      a:hover::before {
+        background-color: var(--border-hover-color);
+      }
+    }
+  }
+  .writing-normal {
+    transition: none;
+    writing-mode: horizontal-tb;
+  }
+  .writing-rotated-left {
+    transition: none;
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    transform: rotate(180deg);
+  }
+  .writing-rotated-right {
+    transition: none;
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+  }
+  .writing-downwards {
+    transition: none;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+  .writing-downards-lr {
+    transition: none;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+  .writing-downwards-rl {
+    transition: none;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+}
+@layer components {
+  .divider-x, .divider-horizontal {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    &::before, &::after {
+      flex-grow: 1;
+      height: var(--border-width, 1px);
+    }
+  }
+  .divider-y, .divider-vertical {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    :where(.vertical, .single-col, .wrap) > & {
+      flex-grow: 1;
+    }
+    &::before, &::after {
+      flex-grow: 1;
+      width: var(--border-width, 1px);
+    }
+  }
+  .divider-between-x, .divider-between-horizontal {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    flex-direction: column;
+    row-gap: 0;
+    > * + *, > * + *:where(astro-island, astro-slot) > * {
+      border-top-width: var(--border-width, 1px);
+      border-color: var(--border-color);
+    }
+  }
+  .divider-between-y, .divider-between-vertical {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+    &::before, &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+    column-gap: 0;
+    > * + *, > * + *:where(astro-island, astro-slot) > * {
+      border-left-width: var(--border-width, 1px);
+      border-color: var(--border-color);
+    }
+  }
+}
+@layer components {
+  .horizontal {
+    > *, > :where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      flex-grow: var(--grow);
+    }
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+    > .spacer {
+      margin-inline-start: auto;
+    }
+  }
+  .vertical {
+    > *, > :where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      flex-grow: var(--grow);
+    }
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+    > .spacer {
+      margin-block-start: auto;
+    }
+  }
+  .flow {
+    > *, > :where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      flex-grow: var(--grow);
+    }
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+  }
+  .stack {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0;
+    &::before, &::after, > *, > *:where(astro-island, astro-slot) > * {
+      position: relative;
+      z-index: 1;
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 1;
+    }
+    > .background {
+      overflow: hidden;
+      position: absolute;
+      inset: 0;
+    }
+    > .foreground {
+      position: relative;
+      z-index: 10;
+    }
+  }
+  .new-stacking-context {
+    transform: translateZ(0);
+  }
+  .scrollable {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+  }
+  .scrollable-x {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: auto hidden;
+    flex-direction: row;
+    max-width: 100%;
+    scroll-snap-type: x var(--snap-type);
+  }
+  .scrollable-horizontal {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: auto hidden;
+    flex-direction: row;
+    max-width: 100%;
+    scroll-snap-type: x var(--snap-type);
+  }
+  .scrollable-y {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: hidden auto;
+    flex-direction: column;
+    scroll-snap-type: y var(--snap-type);
+  }
+  .scrollable-vertical {
+    display: flex;
+    gap: var(--gap, 1rem);
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+    overflow: hidden auto;
+    flex-direction: column;
+    scroll-snap-type: y var(--snap-type);
+  }
+  .scrollable-preserve-outlines {
+    box-sizing: content-box;
+    margin: calc(var(--outline-width) * -1);
+    padding: calc(var(--outline-width));
+  }
+  .scrollable-nosnap {
+    --snap-type: none;
+  }
+}
+@layer components {
+  .shell-simple {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    > .content {
+      flex-grow: 1;
+    }
+    > .footer {
+      flex-shrink: 0;
+    }
+  }
+  .shell-grid {
+    display: grid;
+    grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, 1fr);
+    gap: var(--gap, 0);
+    height: 100dvh;
+    &:has(> header) {
+      grid-template-rows: auto 1fr;
+    }
+    &:has(> .right-sidebar) {
+      grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, var(--content-width, 1fr)) minmax(0, var(--rsb-width, auto));
+    }
+    & > .is(header, .Full) {
+      grid-column: 1 / -1;
+    }
+    > .left-sidebar, > .right-sidebar, > .content {
+      overflow: auto;
+      grid-column-end: span var(--span, 1);
+      height: auto;
+    }
+  }
+}
+@layer components {
+  .wrap {
+    padding-inline: var(--wrap-padding, 1rem);
+  }
+  .flex-grid {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--gap, 1rem);
+    max-width: 100%;
+    > *, > *:where(astro-island, astro-slot) > *, > :where(.contents) > * {
+      --one-column: var(--gap, 1rem) * (var(--cols, 1) - 1);
+      flex: var(--grow, var(--span, 1)) var(--span, 1) calc( (100% - var(--one-column)) / var(--cols, 1) * var(--span, 1) + (var(--span, 1) - 1) * var(--gap, 1rem) );
+      min-width: min(100%, var(--item-width, 3rem));
+      max-width: 100%;
+    }
+  }
+  .grid-simple {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+  }
+  .grid-repeat-auto {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+  }
+  .grid-fr-auto {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+  }
+  .grid-auto-fr {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+  }
+  .grid-with-breakout {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: [breakout-start] 1fr [content-start] repeat( var(--cols, 1), minmax(0, 1fr) ) [content-end] 1fr [breakout-end];
+    > *:not([class*='breakout-full']) {
+      grid-column: content-start / content-end;
+    }
+    > *:where(.breakout-full) {
+      grid-column: breakout-start / breakout-end;
+    }
+  }
+  .grid-gallery {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat( var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+  }
+  .grid-gallery-fit {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat( var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+    --fit: auto-fit;
+  }
+  .grid-gallery-fill {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat( var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+    --fit: auto-fill;
+  }
+  .dense {
+    grid-auto-flow: dense;
+  }
+  .dense-column {
+    grid-auto-columns: dense;
+  }
+  .dense-row {
+    grid-auto-rows: dense;
+  }
+  .masonry {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+    grid-template-rows: masonry;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+  }
+  .masonry-gallery {
+    --span: 1;
+    display: grid;
+    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    max-width: 100%;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      --cols: 1;
+      grid-column: var(--colstart, auto) / span var(--span, 1);
+      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      max-width: 100%;
+    }
+    grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+    grid-template-rows: masonry;
+    > *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+    grid-template-columns: repeat( auto-fill, minmax(min(var(--item-width, 3rem), 100%), 1fr) );
+  }
+  .subgrid {
+    display: grid;
+    gap: inherit;
+    grid-column: var(--start, auto) / span var(--span, 1);
+    grid-template-columns: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-column-end: span var(--ispan, 1);
+      width: 100%;
+      max-width: 100%;
+    }
+    display: grid;
+    gap: inherit;
+    grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+    grid-template-rows: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-row-end: span var(--irowspan, 1);
+    }
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+  .subgrid-columns {
+    display: grid;
+    gap: inherit;
+    grid-column: var(--start, auto) / span var(--span, 1);
+    grid-template-columns: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-column-end: span var(--ispan, 1);
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+  .subgrid-rows {
+    display: grid;
+    gap: inherit;
+    grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+    grid-template-rows: subgrid;
+    > *:not([class*='subgrid']) {
+      grid-row-end: span var(--irowspan, 1);
+    }
+  }
+}
+@layer components {
+  .edge-top {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    :where(.stack) > & {
+      place-self: start center;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+    }
+  }
+  .edge-topleft {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: start start;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .edge-topright {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: start end;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .edge-topfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    :where(.stack) > & {
+      place-self: start center;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+    }
+  }
+  .edge-bottom {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    :where(.stack) > & {
+      place-self: end center;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+    }
+  }
+  .edge-bottomleft {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: end start;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .edge-bottomright {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: end end;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .edge-bottomfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    :where(.stack) > & {
+      place-self: end center;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+    }
+  }
+  .edge-left {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: center start;
+    }
+    :where(.relative) > & {
+      inset-inline-start: 0;
+    }
+  }
+  .edge-leftfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: center start;
+    }
+    :where(.relative) > & {
+      inset-inline-start: 0;
+    }
+  }
+  .edge-right {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: center end;
+    }
+    :where(.relative) > & {
+      inset-inline-end: 0;
+    }
+  }
+  .edge-rightfull {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: center end;
+    }
+    :where(.relative) > & {
+      inset-inline-end: 0;
+    }
+  }
+  .edge-topleft-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: start start;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+    --ty: -50%;
+    --tx: -100%;
+  }
+  .edge-topleft-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: start start;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+    --ty: -50%;
+    --tx: 0%;
+  }
+  .edge-topright-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: start end;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+    --ty: -50%;
+    --tx: 0%;
+  }
+  .edge-topright-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: -50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: start end;
+    }
+    :where(.relative) > & {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+    --ty: -50%;
+    --tx: 100%;
+  }
+  .edge-bottomleft-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: end start;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+    --ty: 50%;
+    --tx: -100%;
+  }
+  .edge-bottomleft-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: -50%;
+    :where(.stack) > & {
+      place-self: end start;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+    --ty: 50%;
+    --tx: 0%;
+  }
+  .edge-bottomright-start {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: end end;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+    --ty: 50%;
+    --tx: 0%;
+  }
+  .edge-bottomright-end {
+    transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+    :where(.stack) > & {
+      box-sizing: content-box;
+    }
+    :where(.relative > &) {
+      position: absolute;
+    }
+    --ty: 50%;
+    --tx: 50%;
+    :where(.stack) > & {
+      place-self: end end;
+    }
+    :where(.relative) > & {
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+    --ty: 50%;
+    --tx: 100%;
+  }
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .fixed-topleft {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: auto;
+  }
+  .fixed-topright {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    left: auto;
+  }
+  .fixed-topfull {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+  }
+  .fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .fixed-bottomleft {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: auto;
+  }
+  .fixed-bottomright {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    left: auto;
+  }
+  .fixed-bottomfull {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+  }
+  .fixed-left {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .fixed-leftfull {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    position: relative;
+    left: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+  }
+  .fixed-right {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .fixed-rightfull {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    position: relative;
+    right: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+  }
+  .fixed-center {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .fixed-overlay {
+    pointer-events: none;
+    position: fixed;
+    inset-block: var(--nudge-y, var(--nudge, 0));
+    inset-inline: var(--nudge-x, var(--nudge, 0));
+    display: grid;
+  }
+  .pos-top {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start center;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-block-start: 0;
+    }
+  }
+  .pos-topleft {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .pos-topright {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .pos-topfull {
+    position: relative;
+    top: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: start stretch;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline: 0;
+    }
+  }
+  .pos-bottom {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end center;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-block-end: 0;
+    }
+  }
+  .pos-bottomleft {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+  }
+  .pos-bottomright {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: 0;
+    }
+  }
+  .pos-bottomfull {
+    position: relative;
+    bottom: var(--nudge-y, var(--nudge, 0));
+    left: var(--nudge-x, var(--nudge, 0));
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: end stretch;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+    }
+  }
+  .pos-left {
+    position: relative;
+    left: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: center start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-inline-start: 0;
+    }
+  }
+  .pos-leftfull {
+    position: relative;
+    left: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: stretch start;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block: 0;
+    }
+  }
+  .pos-right {
+    position: relative;
+    right: var(--nudge-x, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: center end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset-inline-end: 0;
+    }
+  }
+  .pos-rightfull {
+    position: relative;
+    right: var(--nudge-x, var(--nudge, 0));
+    top: var(--nudge-y, var(--nudge, 0));
+    bottom: var(--nudge-y, var(--nudge, 0));
+    :where([class*='stack']) > & {
+      place-self: stretch end;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      position: absolute;
+      inset-inline-end: 0;
+      inset-block: 0;
+    }
+  }
+  .pos-center {
+    :where([class*='stack']) > & {
+      place-self: center center;
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .pos-overlay {
+    :where([class*='stack']) > & {
+      display: grid;
+      > * {
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 1;
+      }
+    }
+    :where([class*='relative']) > & {
+      position: absolute;
+      inset: 0;
+    }
+  }
+  .sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index, 15);
+    :where([class*='grid'] > &) {
+      align-self: start;
+    }
+    position: sticky;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .container {
+    container-type: inline-size;
+  }
+  .contents {
+    display: contents;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .grow-0 {
+    flex-grow: 0;
+  }
+  .shrink {
+    flex-shrink: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .justify-start {
+    justify-content: start;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: end;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
+  .justify-items-start {
+    justify-items: start;
+  }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .justify-items-end {
+    justify-items: end;
+  }
+  .justify-items-stretch {
+    justify-items: stretch;
+  }
+  .justify-self-start {
+    justify-self: start;
+  }
+  .justify-self-center {
+    justify-self: center;
+  }
+  .justify-self-end {
+    justify-self: end;
+  }
+  .justify-self-stretch {
+    justify-self: stretch;
+  }
+  .content-start {
+    align-content: start;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .content-end {
+    align-content: end;
+  }
+  .content-between {
+    align-content: space-between;
+  }
+  .content-around {
+    align-content: space-around;
+  }
+  .content-stretch {
+    align-content: stretch;
+  }
+  .content-baseline {
+    align-content: baseline;
+  }
+  .items-start {
+    align-items: start;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: end;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .self-start {
+    align-self: start;
+  }
+  .self-center {
+    align-self: center;
+  }
+  .self-end {
+    align-self: end;
+  }
+  .self-stretch {
+    align-self: stretch;
+  }
+  .self-baseline {
+    align-self: baseline;
+  }
+}