@splendidlabz/styles 2.3.2 → 3.0.0

package/dist/styles.css

@@ -1,35 +1,143 @@
-: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 reset {
+  html, *, ::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;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  img, video, object, embed, svg {
+    display: block;
+    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-top: 1em;
+    margin-bottom: 1em;
+  }
 }
 
-@layer components {
+@theme {
+    --bg-color: white; --text-color: black; --leading: 1.5;   --border-width: 1px; --border-style: solid; --border-color: black; --radius: .5rem;   --outline-width: 3px; --outline-style: solid; --outline-color: oklch(61.52% .178 257.59deg); --outline-offset: 0px;   --transition-duration: .2s; --transition-delay: 0s; --transition-easing: ease-in-out;   --input-font: inherit;   --header-row-border-top: 1px solid transparent; --header-row-border-bottom: 1px solid var(--border-color) ; --alt-row-color: transparent;
+}
+
+@theme {
+    --breakpoint-bp1: 100px; --breakpoint-bp1.5: 150px; --breakpoint-bp2: 200px; --breakpoint-bp2.5: 250px; --breakpoint-bp3: 300px; --breakpoint-bp3.5: 350px; --breakpoint-bp4: 400px; --breakpoint-bp4.5: 450px; --breakpoint-bp5: 500px; --breakpoint-bp5.5: 550px; --breakpoint-bp6: 600px; --breakpoint-bp6.5: 650px; --breakpoint-bp7: 700px; --breakpoint-bp7.5: 750px; --breakpoint-bp8: 800px; --breakpoint-bp8.5: 850px; --breakpoint-bp9: 900px; --breakpoint-bp9.5: 950px; --breakpoint-bp10: 1000px; --breakpoint-bp10.5: 1050px; --breakpoint-bp11: 1100px; --breakpoint-bp11.5: 1150px; --breakpoint-bp12: 1200px; --breakpoint-bp12.5: 1250px; --breakpoint-bp13: 1300px; --breakpoint-bp13.5: 1350px; --breakpoint-bp14: 1400px; --breakpoint-bp14.5: 1450px; --breakpoint-bp15: 1500px; --breakpoint-bp15.5: 1550px; --breakpoint-bp16: 1600px; --breakpoint-bp16.5: 1650px; --breakpoint-bp17: 1700px; --breakpoint-bp17.5: 1750px; --breakpoint-bp18: 1800px; --breakpoint-bp18.5: 1850px; --breakpoint-bp19: 1900px; --breakpoint-bp19.5: 1950px; --breakpoint-bp20: 2000px; --breakpoint-bp20.5: 2050px; --breakpoint-bp21: 2100px; --breakpoint-bp21.5: 2150px; --breakpoint-bp22: 2200px; --breakpoint-bp22.5: 2250px; --breakpoint-bp23: 2300px; --breakpoint-bp23.5: 2350px; --breakpoint-bp24: 2400px; --breakpoint-bp24.5: 2450px; --breakpoint-bp25: 2500px;   --container-bp1: 100px; --container-bp1.5: 150px; --container-bp2: 200px; --container-bp2.5: 250px; --container-bp3: 300px; --container-bp3.5: 350px; --container-bp4: 400px; --container-bp4.5: 450px; --container-bp5: 500px; --container-bp5.5: 550px; --container-bp6: 600px; --container-bp6.5: 650px; --container-bp7: 700px; --container-bp7.5: 750px; --container-bp8: 800px; --container-bp8.5: 850px; --container-bp9: 900px; --container-bp9.5: 950px; --container-bp10: 1000px; --container-bp10.5: 1050px; --container-bp11: 1100px; --container-bp11.5: 1150px; --container-bp12: 1200px; --container-bp12.5: 1250px; --container-bp13: 1300px; --container-bp13.5: 1350px; --container-bp14: 1400px; --container-bp14.5: 1450px; --container-bp15: 1500px; --container-bp15.5: 1550px; --container-bp16: 1600px; --container-bp16.5: 1650px; --container-bp17: 1700px; --container-bp17.5: 1750px; --container-bp18: 1800px; --container-bp18.5: 1850px; --container-bp19: 1900px; --container-bp19.5: 1950px; --container-bp20: 2000px; --container-bp20.5: 2050px; --container-bp21: 2100px; --container-bp21.5: 2150px; --container-bp22: 2200px; --container-bp22.5: 2250px; --container-bp23: 2300px; --container-bp23.5: 2350px; --container-bp24: 2400px; --container-bp24.5: 2450px; --container-bp25: 2500px;
+}
+
+@theme {
+  --text-1: .625rem;   --text-2: .6875rem;   --text-3: .75rem;   --text-4: .8125rem;   --text-5: .875rem;   --text-6: .9375rem;   --text-7: 1rem;   --text-8: 1.125rem;   --text-9: 1.3125rem;   --text-10: 1.5rem;   --text-11: 1.75rem;   --text-12: 2rem;   --text-13: 2.25rem;   --text-14: 2.625rem;   --text-15: 3rem;   --text-16: 3.375rem;   --text-17: 3.75rem;   --text-18: 4.5rem;   --text-19: 5.25rem;   --text-20: 6rem;   --text-21: 6.75rem;   --text-22: 7.5rem;   --text-1e: .625em;   --text-2e: .6875em;   --text-3e: .75em;   --text-4e: .8125em;   --text-5e: .875em;   --text-6e: .9375em;   --text-7e: 1em;   --text-8e: 1.125em;   --text-9e: 1.3125em;   --text-10e: 1.5em;   --text-11e: 1.75em;   --text-12e: 2em;   --text-13e: 2.25em;   --text-14e: 2.625em;   --text-15e: 3em;   --text-16e: 3.375em;   --text-17e: 3.75em;   --text-18e: 4.5em;   --text-19e: 5.25em;   --text-20e: 6em;   --text-21e: 6.75em;   --text-22e: 7.5em;  
+}
+
+@theme {
+  --font-weight-100: 100; --font-weight-125: 125; --font-weight-150: 150; --font-weight-175: 175; --font-weight-200: 200; --font-weight-225: 225; --font-weight-250: 250; --font-weight-275: 275; --font-weight-300: 300; --font-weight-325: 325; --font-weight-350: 350; --font-weight-375: 375; --font-weight-400: 400; --font-weight-425: 425; --font-weight-450: 450; --font-weight-475: 475; --font-weight-500: 500; --font-weight-525: 525; --font-weight-550: 550; --font-weight-575: 575; --font-weight-600: 600; --font-weight-625: 625; --font-weight-650: 650; --font-weight-675: 675; --font-weight-700: 700; --font-weight-725: 725; --font-weight-750: 750; --font-weight-775: 775; --font-weight-800: 800; --font-weight-825: 825; --font-weight-850: 850; --font-weight-875: 875; --font-weight-900: 900;
+}
+
+@theme {
+  --radius-0.5: .125rem; --radius-1: .25rem; --radius-1.5: .375rem; --radius-2: .5rem; --radius-2.5: .625rem; --radius-3: .75rem; --radius-3.5: .875rem; --radius-4: 1rem; --radius-4.5: 1.125rem; --radius-5: 1.25rem; --radius-5.5: 1.375rem; --radius-6: 1.5rem; --radius-6.5: 1.625rem; --radius-7: 1.75rem; --radius-7.5: 1.875rem; --radius-8: 2rem; --radius-8.5: 2.125rem; --radius-9: 2.25rem; --radius-9.5: 2.375rem; --radius-10: 2.5rem; --radius-10.5: 2.625rem; --radius-11: 2.75rem; --radius-11.5: 2.875rem; --radius-12: 3rem; --radius-12.5: 3.125rem; --radius-13: 3.25rem; --radius-13.5: 3.375rem; --radius-14: 3.5rem; --radius-14.5: 3.625rem; --radius-15: 3.75rem; --radius-15.5: 3.875rem; --radius-16: 4rem; --radius-16.5: 4.125rem; --radius-17: 4.25rem; --radius-17.5: 4.375rem; --radius-18: 4.5rem; --radius-18.5: 4.625rem; --radius-19: 4.75rem; --radius-19.5: 4.875rem; --radius-20: 5rem; --radius-0.5r: calc(var(--radius) * .5) ; --radius-1r: var(--radius) ; --radius-1.5r: calc(var(--radius) * 1.5) ; --radius-2r: calc(var(--radius) * 2) ; --radius-2.5r: calc(var(--radius) * 2.5) ; --radius-3r: calc(var(--radius) * 3) ; --radius-3.5r: calc(var(--radius) * 3.5) ; --radius-4r: calc(var(--radius) * 4) ; --radius-4.5r: calc(var(--radius) * 4.5) ; --radius-5r: calc(var(--radius) * 5) ;
+}
+
+@utility pigment-scaffold {
+  & { border-color: var(--border-color) ; color: var(--text-color, currentcolor) ; background-color: var(--bg-color) ; transition: var(--transition-values) ; transition-property: var(--transition-props) ; :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) ; } }
+}
+
+@utility pigment-hover-scaffold {
+  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)) ; :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)))) ; }
+}
+
+@utility pigment-focus-scaffold {
+  & :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))) ; :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)))))) ; } }
+}
+
+@utility pigment-active-scaffold {
+  & :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))) ; :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)))))) ; } }
+}
+
+@utility pigment-selected-scaffold {
+  & . selected, & . checked, & [aria-current], & [aria-selected], & [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))) ; :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)))))) ; } }
+}
+
+@utility pigment {
+  @apply pigment-scaffold;& :hover { @apply pigment-hover-scaffold; }
+
+ @apply pigment-focus-scaffold; @apply pigment-active-scaffold; @apply pigment-selected-scaffold;
+}
+
+@utility pigment-outline {
+  --bg-color: transparent;
+}
+
+@utility pigment-ghost {
+  --bg-color: transparent; --border-color: transparent;
+}
+
+@layer base {
+  * {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     * {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
+      transition-duration: .01ms !important;
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
     }
   }
+
   .sr-only {
     overflow: hidden;
     position: absolute;
@@ -41,1531 +149,1235 @@
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }
-}
-@layer components {
+
+  * {
+    --transition-values: var(--transition-duration) var(--transition-delay) var(--transition-easing);
+    --transition-props: background, color, border, outline, opacity, gap, fill, opacity, stroke, transform;
+  }
+
   html {
-    font-family: system-ui, sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", 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 {
+
+  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);
+
+  pre {
+    padding: 1em;
+    border-radius: var(--radius);
   }
-  a:focus-visible,
-  button:focus-visible,
-  :where([tabindex]:not([tabindex="-1"])):focus-visible {
-    outline-color: var(--outline-color);
+
+  code {
+    font-size: .8em;
   }
-  .Focus-within:focus-within {
-    outline: var(--outline-width) var(--outline-style) transparent;
-    outline-offset: var(--outline-offset);
+
+  :not(pre) > :is(code) {
+    display: inline;
+    padding: .2em .25em;
+    border-radius: var(--radius);
   }
-  .Focus-within *:focus-visible {
-    outline-color: transparent;
+
+  pre > :is(code) {
+    background-color: rgb(0 0 0 / 0%);
   }
-  .Preserve-outlines {
-    box-sizing: content-box;
-    margin: calc(var(--outline-width) * -1);
-    padding: calc(var(--outline-width));
+
+  fieldset {
+    border: none;
   }
-}
-@layer components {
-  .Fill,
-  [class*=Fill] {
-    border-color: var(--border-color);
-    color: var(--text-color);
+
+  textarea, select, .field {
+    display: block;
+    width: 100%;
+    border-radius: inherit;
+    font: inherit;
+    font-family: var(--input-font);
+    color: var(--text-color, currentcolor);
     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 {
+
+  input:where([type="text"], [type="search"], [type="email"], [type="password"], [type="tel"], [type="url"]) {
     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);
+    font-family: var(--input-font);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
   }
-  input[type=password] {
+
+  input[type="password"] {
     font-family: Verdana, sans-serif;
-    letter-spacing: 0.125em;
+    letter-spacing: .125em;
   }
-  .disabled,
-  .readonly,
-  [disabled],
-  [readonly] {
-    opacity: 0.5;
+
+  .disabled, .readonly, [disabled], [readonly] {
+    opacity: .5;
   }
-  .disabled:where(input),
-  .readonly:where(input),
-  [disabled]:where(input),
-  [readonly]:where(input) {
+
+  :is(.disabled, .readonly, [disabled], [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)));
+
+  :is(.disabled, .readonly, [disabled], [readonly]):focus {
+    outline-color: rgb(0 0 0 / 0%);
   }
-  [class*=Button] {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
+
+  :is(.disabled, .readonly, [disabled], [readonly]):focus-visible {
+    outline-color: rgb(0 0 0 / 0%);
   }
 }
-@layer components {
-  .Button-icon {
-    padding: var(--padding, 0.5em);
-    line-height: 1;
-  }
+
+@utility outline-visible {
+  outline-color: var(--outline-color) ;
 }
-@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;
+
+@utility preserve-outlines {
+  & { box-sizing: content-box; margin: calc(var(--outline-width) * -1) ; padding: calc(var(--outline-width)) ; }
+}
+
+@layer utilities {
+  @apply pigment;
+
+  a:visited {
+    border-color: var(--border-visited-color, var(--border-color));
+    color: var(--text-visited-color, var(--text-color));
+    background-color: var(--bg-visited-color, var(--bg-color));
   }
+
+  @apply outline-visible;
+  @apply outline-visible;
 }
-textarea {
-  min-height: 9em;
-  resize: vertical;
+
+@utility button {
+  & { flex-shrink: 0;   display: inline-flex; justify-content: center; align-items: center; gap: .5em; padding: .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; * { pointer-events: none; } svg path { transition: var(--transition-values) ; transition-property: var(--transition-props) ; } }
 }
 
-@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;
-  }
+@utility button-icon {
+  & { padding: var(--padding, .5em) ; line-height: 1; }
 }
+
 @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;
+  .backdrop--blur {
+    backdrop-filter: blur(var(--blur, 8px));
+    transition-property: -webkit-backdrop-filter, backdrop-filter;
   }
-  .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);
+
+  .backdrop:where([data-state="blur"]) {
+    backdrop-filter: blur(var(--blur, 8px));
+    transition-property: -webkit-backdrop-filter, backdrop-filter;
   }
 }
-@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%);
-  }
+
+@utility break-word {
+  hyphens: auto; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word;
 }
-.ListboxPopover {
-  padding: 0;
-  border: 0;
+
+@utility card {
+  & { padding: var(--padding, 1rem) ; border: var(--border-width) var(--border-style) var(--border-color) ; border-radius: var(--radius) ; }
 }
 
-[role=listbox] {
-  max-height: 15rem;
-  overflow-y: auto;
+@utility card-split {
+  & { @apply card;> * , :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) ; } }
 }
-[role=listbox] [role=option] {
-  cursor: pointer;
+
+@utility box {
+  @apply card;
 }
-[role=listbox] [role=option] > * {
-  pointer-events: none;
+
+@utility has-focus-within {
+  & :focus-within { outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset) ; } * :focus, * :focus-visible { outline-color: transparent; }
 }
-[role=listbox] [aria-selected=true] {
-  background: var(--bg-selected-color, pink);
+
+@utility hero-heading {
+  display: flex; flex-direction: column; gap: var(--gap, .25em) ; max-width: 100%;> :where(. hero-eyebrow) { font-size: var(--eyebrow-size, .6em) ; } > * , > * :where(. contents) > * , > * :where(astro-island, astro-slot) > * { max-width: 100%; }
 }
 
-.AutocompleteOptions .ComboboxMatchedString {
-  font-weight: bold;
+@utility hero-heading-start {
+  & { @apply hero-heading; text-align: start; }
 }
 
-.AutocompleteLoader,
-.AutocompleteEmpty {
-  transition: var(--transition);
-  transition-property: var(--transition-props), display;
-  transition-behavior: allow-discrete;
+@utility hero-heading-center {
+  & { @apply hero-heading; align-self: center; margin-inline: auto; text-align: center; }
 }
-@starting-style {
-  .AutocompleteLoader,
-  .AutocompleteEmpty {
-    opacity: 0;
-  }
+
+@utility hero-heading-end {
+  & { @apply hero-heading; align-self: end; margin-inline-start: auto; text-align: end; }
 }
-.AutocompleteLoader:empty,
-.AutocompleteEmpty:empty {
-  display: none;
-  opacity: 0;
+
+@utility indent-list-scaffold {
+  --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: .125em; }
 }
 
-.TimepickerOptions .Listbox li {
-  padding: 0.5rem 1rem;
+@utility indent-list {
+  @apply indent-list-scaffold; li { list-style-type: disc; }
 }
 
-@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));
-  }
+@utility indent-list-guides {
+  & { @apply indent-list-scaffold; 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) ; } } }
 }
-@layer components {
-  .Box {
-    padding: 1rem;
-    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, black);
-    border-radius: var(--radius, 0.5em);
-  }
+
+@utility prose {
+  & { display: flex; flex-flow: column; gap: 1em; max-width: 100%;  *  + :where(h2, h3), *  + :where(astro-island, astro-slot) > :where(:where(h2, h3) :first-child) { margin-top: 2em; scroll-margin-top: 2em; } *  + :where(h4, h5, h6), *  + :where(astro-island, astro-slot) > :where(:where(h4, h5, h6) :first-child) { margin-top: 1em; scroll-margin-top: 2em; } :where(ul, ol) { list-style-type: revert-layer; } > :where(ul, ol), > :where(astro-island, astro-slot) > :where(ul, ol) { list-style-position: outside; margin-left: 2em; :where(ul, ol) { padding-left: 2em; } li { font-variant-numeric: lining-nums; } li + li { margin-top: .25em; } li:has(li)  + li { margin-top: .5em; } li> :where(ul, ol) { margin-top: .25em; } } :where(a) { text-decoration: underline; } > img, figure img { border: 1px solid oklch(90% 0 0deg); border-radius: var(--radius) ; } }
 }
-:root {
-  --scrollbar-width: thin;
-  --scrollbar-size: 12px;
-  color-scheme: dark light;
+
+@utility square {
+  width: var(--size) ; height: var(--size) ;
 }
-@media (prefers-color-scheme: light) {
-  :root {
-    --scrollbar-thumb-color: #c1c1c1;
-    --scrollbar-track-color: #fafafa;
-  }
+
+@utility circle {
+  width: var(--size) ; height: var(--size) ; border-radius: 50%;
 }
-@media (prefers-color-scheme: dark) {
-  :root {
-    --scrollbar-thumb-color: #6b6b6b;
-    --scrollbar-track-color: #2d2d2d;
-  }
+
+@utility roundrect {
+  border-radius: var(--radius, 8px) ;
 }
 
-@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);
-  }
+@utility pill {
+  border-radius: 100em;
 }
-@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);
-  }
+
+@utility simple-svg {
+  :where(path) { fill: var(--fill-color) ; stroke: var(--stroke-color) ;   stroke-width: var(--stroke-width) ; }
 }
-@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;
-  }
+
+@utility table-scaffold {
+  & { width: 100%;   font-variant-numeric: lining-nums tabular-nums slashed-zero diagonal-fractions; }
 }
-@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);
-  }
+
+@utility table-auto {
+  :where(table) & { table-layout: auto; } :where(. table-grid) & { @apply grid-repeat-auto; }
 }
-figcaption {
-  margin-block: 0.5em;
-  font-size: 0.8em;
-  text-align: center;
+
+@utility table-fixed {
+  :where(table) & { table-layout: fixed; } :where(. table-grid) & { @apply grid-simple; }
 }
 
-@layer components {
-  .SimpleSVG :where(path) {
-    fill: var(--fill-color);
-    stroke: var(--stroke-color);
-    stroke-width: var(--stroke-width);
-  }
+@utility table-header-row {
+  & { border-top: var(--header-row-border-top) ; border-bottom: var(--header-row-border-bottom) ; font-weight: bold; }
 }
-@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;
-  }
+
+@utility table-header-column {
+  font-weight: bold;
 }
-@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;
-  }
+
+@utility table-cell {
+  text-align: left; padding: var(--padding, var(--padding-x, .375rem)) var(--padding, var(--padding-y, .5rem)) ;
 }
-@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));
-  }
+
+table {
+  border-collapse: collapse;
 }
-@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;
-  }
+
+@apply table-scaffold;
+
+table:has(thead) tr:nth-child(2n+2) {
+  background-color: var(--alt-row-color);
 }
-@layer components {
-  .DropdownTrigger {
-    gap: 0.25em;
-  }
-  .DropdownTrigger svg {
-    flex-shrink: 0;
-    transition: transform var(--transition-values);
-  }
-  .DropdownTrigger[aria-expanded=true] svg {
-    transform: rotate(-180deg);
-  }
+
+table:not(:has(thead)) tr tr:nth-child(2n+3) {
+  background-color: var(--alt-row-color);
 }
-@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));
-  }
+
+@apply table-header-row;
+@apply table-header-column;
+@apply table-cell;
+
+.table-grid:where(table, [role="table"], [role="grid"]) {
+  max-width: 100%;
 }
-@layer components {
-  .PerspectiveHover {
-    --sensitivity: 3;
-    --perspective: 1000px;
-    position: relative;
-    will-change: transform;
-    transition: transform 0.25s ease-in-out;
-  }
+
+@apply table-scaffold;
+@apply table-auto;
+
+.table-grid :where(thead, tbody, tfoot, [role="rowgroup"]) {
+  display: contents;
 }
-@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;
-  }
+
+.table-grid :where(tr, [role="row"]) {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
 }
-@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;
-  }
+
+.table-grid :where(tr, [role="row"]):nth-child(2n+3) {
+  background-color: var(--alt-row-color);
 }
-@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;
-  }
+
+@apply table-header-row;
+@apply table-header-column;
+
+.table-grid :where([role="columnheader"], [role="rowheader"], [role="cell"], [role="gridcell"], th, td) {
+  display: grid;
+  align-items: center;
 }
-@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;
-  }
+
+@apply table-cell;
+
+@utility writing-scaffold {
+    transition: none;
 }
-@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;
-  }
+
+@utility writing-normal {
+  @apply writing-scaffold;
+
+ writing-mode: horizontal-tb;
 }
-.Textwall .TextwallDimensions {
-  aspect-ratio: 4/3;
-  max-height: 75dvh;
+
+@utility writing-rotated-left {
+  & { @apply writing-scaffold; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg) ;   }
 }
-.Textwall .TextwallContent {
-  position: absolute;
-  inset: -150%;
-  transform: rotate(var(--rotation, -15deg));
+
+@utility writing-rotated-right {
+  & { @apply writing-scaffold; writing-mode: vertical-rl; text-orientation: sideways; }
 }
-.Textwall [class*=TextwallBoundary] {
-  pointer-events: none;
+
+@utility writing-downwards {
+  & { @apply writing-scaffold; writing-mode: vertical-lr; text-orientation: upright; }
 }
-.Textwall .TextwallBoundary-after {
-  bottom: -1px;
+
+@utility writing-downards-lr {
+  & { @apply writing-downwards; }
 }
 
-@layer components {
-  .Youtube div,
-  .Vimeo div {
-    aspect-ratio: 16/9;
-  }
-  .Youtube iframe,
-  .Vimeo iframe {
-    width: 100%;
-    height: 100%;
-  }
+@utility writing-downwards-rl {
+  & { @apply writing-scaffold; writing-mode: vertical-rl; text-orientation: upright; }
 }
-@layer components {
-  .Codepen {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    margin: 1em 0;
-    padding: 1em;
-    border: 2px solid;
-  }
+
+@theme {
+  --gap: 1rem;
 }
-@layer components {
-  .Tweet .twitter-tweet {
-    margin: 0 !important;
-  }
+
+@utility micro {
+  > * , > :where(. contents) > * , > * :where(astro-island, astro-slot) > * { flex-grow: var(--grow, 0) ; }
 }
-.CQCheckerGrid {
-  display: flex;
-  flex-flow: row wrap;
-  grid-auto-flow: dense;
-  padding: 1rem;
+
+@utility horizontal {
+  display: flex; flex-direction: row; gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));> . spacer { margin-inline-start: auto; }
+
+ @apply micro;
 }
-.CQCheckerGrid > * {
-  margin: 0.5rem;
+
+@utility vertical {
+  display: flex; flex-direction: column; gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); width: 100%; max-width: 100%;> . spacer { margin-block-start: auto; }
+
+ @apply micro;
 }
 
-.size {
-  font-size: 0.8rem;
-  color: #666;
+@utility single-col {
+  @apply vertical;
+
+ align-items: stretch;
 }
 
-@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);
-  }
+@utility flow {
+  display: flex; flex-flow: row wrap; gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+
+ @apply micro;
 }
-@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;
-  }
+
+@utility stack {
+  & { position: relative; display: grid; grid-template-columns: minmax(min(0, 100%), 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; } }
 }
-@layer components {
-  :root {
-    --gradient-shape: ;
-    --gradient-size: ;
-    --angle: 90deg;
-    --gradient-position: center;
-    --color-space: oklab;
-    --hue-interpolation: ;
-    --gradient: ;
-    --gradient-alpha: 1;
-  }
+
+@utility divider-scaffold {
+  & { align-self: stretch; display: flex; align-items: center; padding: 0! important; border-radius: 0! important;& :where(:not(:empty)) { gap: var(--gap, 1rem) ; } & ::before, & ::after { content: ""; background-color: var(--border-color, currentColor) ; } }
 }
-@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;
-  }
+
+@utility divider-x {
+  & { @apply divider-scaffold; flex-grow: 1;& ::before, & ::after { flex-grow: 1; height: var(--border-width, 1px) ; } }
 }
-@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)));
-  }
+
+@utility divider-y {
+  & { @apply divider-scaffold; align-self: stretch; display: flex; flex-direction: column; :where(. vertical, . single-col, . wrap) > & { flex-grow: 1; } & ::before, & ::after { flex-grow: 1; width: var(--border-width, 1px) ; } }
 }
-@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;
-    }
-  }
+
+@utility divider-horizontal {
+  @apply divider-x;
 }
-.Backdrop-blur {
-  transition-property: backdrop-filter;
-  backdrop-filter: blur(var(--blur, 8px));
+
+@utility divider-vertical {
+  @apply divider-y;
 }
 
-[class*=Animate] {
-  animation: var(--animation-string);
-  animation-play-state: running;
+@utility divider-between-x {
+  & { @apply divider-scaffold;> *  + * , > *  + * :where(astro-island, astro-slot) > * { border-top-width: var(--border-width, 1px) ; border-color: var(--border-color) ; } }
 }
 
-.Animate-floating {
-  animation: floating 4s ease-in-out infinite alternate;
+@utility divider-between-y {
+  & { @apply divider-scaffold;> *  + * , > *  + * :where(astro-island, astro-slot) > * { border-left-width: var(--border-width, 1px) ; border-color: var(--border-color) ; } }
 }
 
-@keyframes floating {
-  0% {
-    transform: translateY(var(--ty, -8px));
-  }
-  100% {
-    transform: translateY(var(--ty, 8px));
-  }
+@utility divider-between-horizontal {
+  @apply divider-between-x;
 }
-@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;
-  }
+
+@utility divider-between-vertical {
+  @apply divider-between-y;
 }
-@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;
-  }
+
+@utility breakout- *  {
+  margin-inline: --value(--spacing- * ) ;
+}
+
+@utility breakout-x- *  {
+  margin-inline: --value(--spacing- * ) ;
+}
+
+@utility breakout-l- *  {
+  margin-inline-start: --value(--spacing- * ) ;
+}
+
+@utility breakout-r- *  {
+  margin-inline-end: --value(--spacing- * ) ;
+}
+
+@utility breakout-y- *  {
+  margin-block: --value(--spacing- * ) ;
+}
+
+@utility breakout-t- *  {
+  margin-block-start: --value(--spacing- * ) ;
+}
+
+@utility breakout-b- *  {
+  margin-block-end: --value(--spacing- * ) ;
+}
+
+@utility new-stacking-context {
+  transform: translateZ(0) ;
+}
+
+@theme {
+  --snap-align: start; --snap-type: proximity; --scroll-margin: 1rem;
+}
+
+@utility 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) ; } }
+}
+
+@utility scrollable-x {
+  & { @apply scrollable; overflow: auto hidden; flex-direction: row; max-width: 100%; scroll-snap-type: x var(--snap-type) ; }
+}
+
+@utility scrollable-y {
+  & { @apply scrollable; overflow: hidden auto; flex-direction: column; scroll-snap-type: y var(--snap-type) ; }
+}
+
+@utility scrollable-preserve-outlines {
+  & { box-sizing: content-box; margin: calc(var(--outline-width) * -1) ; padding: calc(var(--outline-width)) ; }
+}
+
+@utility snap-type- *  {
+  --snap-type: --value(--snap-type- * ) ;
+}
+
+@utility scrollable-nosnap {
+  --snap-type: none;
+}
+
+@utility scrollable-horizontal {
+  @apply scrollable-x;
+}
+
+@utility scrollable-vertical {
+  @apply scrollable-y;
+}
+
+@utility shell-simple {
+  & { display: flex; flex-direction: column; height: inherit;> . content { flex-grow: 1; } > . footer { flex-shrink: 0; } }
+}
+
+@utility 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(> . rightsidebar) { 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; } > . leftsidebar, > . rightsidebar, > . content { overflow: auto; grid-column-end: span var(--span, 1) ; height: auto; }
+}
+
+@theme {
+  --cols: 1;
+}
+
+@utility grid-scaffold {
+  & { display: grid; gap: var(--gap, 1rem) ; width: 100%; max-width: 100%; margin-inline: auto;> * , > * :where(. contents) > * , > * :where(astro-island, astro-slot) > * {     grid-column: var(--start, auto) / span var(--span, 1) ; grid-row: var(--rowstart, auto) / span var(--rowspan, 1) ; max-width: 100%; } }
+}
+
+@utility grid-simple {
+  @apply grid-scaffold;
+
+ grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) ;
+}
+
+@utility grid-repeat-auto {
+  @apply grid-scaffold;
+
+ grid-template-columns: repeat(var(--cols, 1), minmax(0, auto)) ;
+}
+
+@utility grid-fr-auto {
+  @apply grid-scaffold;
+
+ grid-template-columns: minmax(0, 1fr) minmax(0, auto) ;
+}
+
+@utility grid-auto-fr {
+  @apply grid-scaffold;
+
+ grid-template-columns: minmax(0, auto) minmax(0, 1fr) ;
+}
+
+@utility grid-with-breakout {
+  & { @apply grid-scaffold; 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; } }
+}
+
+@utility grid-gallery {
+  @apply grid-scaffold;
+
+ grid-template-columns: repeat(var(--fit, auto-fill), minmax(min(var(--item-width, 3rem), 100%), 1fr)) ;
+}
+
+@utility grid-gallery-fit {
+  --fit: auto-fit;
+
+ @apply grid-gallery;
+}
+
+@utility grid-gallery-fill {
+  --fit: auto-fill;
+
+ @apply grid-gallery;
+}
+
+@utility dense {
+  grid-auto-flow: dense;
+}
+
+@utility dense-column {
+  grid-auto-columns: dense;
+}
+
+@utility dense-row {
+  grid-auto-rows: dense;
+}
+
+@utility subgrid-scaffold {
+  display: grid; gap: inherit;
+}
+
+@utility subgrid {
+  @apply subgrid-columns; @apply subgrid-rows;
+
+ grid-template-columns: subgrid; grid-template-rows: subgrid;
+}
+
+@utility subgrid-columns {
+  @apply subgrid-scaffold;
+
+ 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%; }
+}
+
+@utility subgrid-rows {
+  @apply subgrid-scaffold;
+
+ grid-row: var(--rowstart, auto) / span var(--rowspan, 1) ; grid-template-rows: subgrid;> * :not([class*="subgrid"]) { grid-row-end: span var(--irowspan, 1) ; }
+}
+
+@utility masonry {
+  @apply grid-repeat-auto;
+
+ grid-template-rows: masonry;
+}
+
+@utility masonry-gallery {
+  @apply masonry;
+
+ grid-template-columns: repeat(auto-fill, minmax(min(var(--item-width, 3rem), 100%), 1fr)) ;
+}
+
+@utility flex-grid {
+  display: flex; flex-flow: row wrap; gap: var(--gap, 1rem) ;> * , > * :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%; }
+}
+
+@utility wrap {
+  margin-inline: auto; padding-inline: var(--wrap-padding, 1rem) ;
+}
+
+@utility width-single-column {
+  max-width: var(--width-single-column, 100%) ;
+}
+
+@utility width-narrow {
+  max-width: var(--width-narrow, 100%) ;
+}
+
+@utility width-standard {
+  max-width: var(--width-standard, 100%) ;
+}
+
+@utility width-text {
+  max-width: var(--width-text, 100%) ;
+}
+
+@utility width-limit {
+  max-width: var(--width-limit, 100%) ;
+}
+
+@theme {
+  --nudge: 0; --nudge-x: 0; --nudge-y: 0;
+}
+
+@utility nudge-top {
+  margin-block-start: var(--nudge-y, var(--nudge, 0)) ;
+}
+
+@utility nudge-topleft {
+  margin-block-start: var(--nudge-y, var(--nudge, 0)) ; margin-inline-start: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-topright {
+  margin-block-start: var(--nudge-y, var(--nudge, 0)) ; margin-inline-end: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-topfull {
+  margin-block-start: var(--nudge-y, var(--nudge, 0)) ; margin-inline: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-bottomleft {
+  margin-block-end: var(--nudge-y, var(--nudge, 0)) ; margin-inline-start: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-bottom {
+  margin-block-end: var(--nudge-y, var(--nudge, 0)) ;
+}
+
+@utility nudge-bottomright {
+  margin-block-end: var(--nudge-y, var(--nudge, 0)) ; margin-inline-end: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-bottomfull {
+  margin-block-end: var(--nudge-y, var(--nudge, 0)) ; margin-inline: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-left {
+  margin-inline-start: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-leftfull {
+  margin-block: var(--nudge-y, var(--nudge, 0)) ; margin-inline-start: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-right {
+  margin-inline-end: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility nudge-rightfull {
+  margin-block: var(--nudge-y, var(--nudge, 0)) ; margin-inline-end: var(--nudge-x, var(--nudge, 0)) ;
+}
+
+@utility stack-pos-top {
+  place-self: start center;
+}
+
+@utility stack-pos-topleft {
+  place-self: start start;
+}
+
+@utility stack-pos-topright {
+  place-self: start end;
+}
+
+@utility stack-pos-topfull {
+  place-self: start stretch;
+}
+
+@utility stack-pos-bottomleft {
+  place-self: end start;
+}
+
+@utility stack-pos-bottom {
+  place-self: end center;
+}
+
+@utility stack-pos-bottomright {
+  place-self: end end;
+}
+
+@utility stack-pos-bottomfull {
+  place-self: end stretch;
+}
+
+@utility stack-pos-left {
+  place-self: center start;
+}
+
+@utility stack-pos-lefttop {
+  place-self: start start;
+}
+
+@utility stack-pos-leftbottom {
+  place-self: end start;
+}
+
+@utility stack-pos-leftfull {
+  place-self: stretch start;
+}
+
+@utility stack-pos-right {
+  place-self: center end;
+}
+
+@utility stack-pos-righttop {
+  place-self: start end;
+}
+
+@utility stack-pos-rightbottom {
+  place-self: end end;
+}
+
+@utility stack-pos-rightfull {
+  place-self: stretch end;
+}
+
+@utility stack-pos-center {
+  place-self: center center;
+}
+
+@utility relative-pos {
+  position: absolute;
+}
+
+@utility relative-pos-top {
+  @apply relative-pos;
+
+ inset-block-start: 0;
+}
+
+@utility relative-pos-topleft {
+  @apply relative-pos; @apply relative-pos-top;
+
+ inset-inline-start: 0;
+}
+
+@utility relative-pos-topright {
+  @apply relative-pos; @apply relative-pos-top;
+
+ inset-inline-end: 0;
+}
+
+@utility relative-pos-topfull {
+  @apply relative-pos; @apply relative-pos-top;
+
+ inset-inline: 0;
+}
+
+@utility relative-pos-bottom {
+  @apply relative-pos;
+
+ inset-block-end: 0;
+}
+
+@utility relative-pos-bottomleft {
+  @apply relative-pos; @apply relative-pos-bottom;
+
+ inset-inline-start: 0;
+}
+
+@utility relative-pos-bottomright {
+  @apply relative-pos; @apply relative-pos-bottom;
+
+ inset-inline-end: 0;
 }
 
-/*# sourceMappingURL=styles.css.map */
+@utility relative-pos-bottomfull {
+  @apply relative-pos;
+
+ inset-block-end: 0; inset-inline: 0;
+}
+
+@utility relative-pos-left {
+  @apply relative-pos;
+
+ inset-inline-start: 0;
+}
+
+@utility relative-pos-lefttop {
+  @apply relative-pos; @apply relative-pos-left;
+
+ inset-block-start: 0;
+}
+
+@utility relative-pos-leftbottom {
+  @apply relative-pos; @apply relative-pos-left;
+
+ inset-block-end: 0;
+}
+
+@utility relative-pos-leftfull {
+  @apply relative-pos; @apply relative-pos-left;
+
+ inset-block: 0;
+}
+
+@utility relative-pos-right {
+  @apply relative-pos;
+
+ inset-inline-end: 0;
+}
+
+@utility relative-pos-righttop {
+  @apply relative-pos; @apply relative-pos-right;
+
+ inset-block-start: 0;
+}
+
+@utility relative-pos-rightbottom {
+  @apply relative-pos; @apply relative-pos-right;
+
+ inset-block-end: 0;
+}
+
+@utility relative-pos-rightfull {
+  @apply relative-pos; @apply relative-pos-right;
+
+ inset-block: 0;
+}
+
+@utility relative-pos-center {
+  @apply relative-pos;
+
+ top: 50%; left: 50%; transform: translate(-50%, -50%) ;
+}
+
+@utility relative-pos-overlay {
+  @apply relative-pos;
+
+ inset: 0;
+}
+
+@utility pos-top {
+  @apply nudge-top; :where(. stack) > & { @apply stack-pos-top; } :where(. relative) > & { @apply relative-pos-top; }
+}
+
+@utility pos-topleft {
+  @apply nudge-topleft; :where(. stack) > & { @apply stack-pos-topleft; } :where(. relative) > & { @apply relative-pos-topleft; }
+}
+
+@utility pos-topright {
+  @apply nudge-topright; :where(. stack) > & { @apply stack-pos-topright; } :where(. relative) > & { @apply relative-pos-topright; }
+}
+
+@utility pos-topfull {
+  @apply nudge-topfull; :where(. stack) > & { @apply stack-pos-topfull; } :where(. relative) > & { @apply relative-pos-topfull; }
+}
+
+@utility pos-bottom {
+  @apply nudge-bottom; :where(. stack) > & { @apply stack-pos-bottom; } :where(. relative) > & { @apply relative-pos-bottom; }
+}
+
+@utility pos-bottomleft {
+  @apply nudge-bottomleft; :where(. stack) > & { @apply stack-pos-bottomleft; } :where(. relative) > & { @apply relative-pos-bottomleft; }
+}
+
+@utility pos-bottomright {
+  @apply nudge-bottomright; :where(. stack) > & { @apply stack-pos-bottomright; } :where(. relative) > & { @apply relative-pos-bottomright; }
+}
+
+@utility pos-bottomfull {
+  @apply nudge-bottomfull; :where(. stack) > & { @apply stack-pos-bottomfull; } :where(. relative) > & { @apply relative-pos-bottomfull; }
+}
+
+@utility pos-left {
+  @apply nudge-left; :where(. stack) > & { @apply stack-pos-left; } :where(. relative) > & { @apply relative-pos-left; }
+}
+
+@utility pos-leftfull {
+  @apply nudge-leftfull; :where(. stack) > & { @apply stack-pos-leftfull; } :where(. relative) > & { @apply relative-pos-leftfull; }
+}
+
+@utility pos-right {
+  @apply nudge-right; :where(. stack) > & { @apply stack-pos-right; } :where(. relative) > & { @apply relative-pos-right; }
+}
+
+@utility pos-rightfull {
+  @apply nudge-rightfull; :where(. stack) > & { @apply stack-pos-rightfull; } :where(. relative) > & { @apply relative-pos-rightfull; }
+}
+
+@utility pos-center {
+  :where(. stack) > & { @apply stack-pos-center; } :where(. relative) > & { @apply relative-pos-center; }
+}
+
+@utility pos-overlay {
+  :where(. stack) > & { display: grid;> * { grid-column: 1 / span 1; grid-row: 1 / span 1; } } :where(. relative) > & { @apply relative-pos-overlay; }
+}
+
+@theme {
+  --tx: 0%; --ty: 0%;
+}
+
+@utility edge-scaffold {
+  transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%)) ; :where(. stack) > & { box-sizing: content-box; } :where(. relative> & ) { position: absolute; }
+}
+
+@utility stack-edge-top {
+  place-self: start center;
+}
+
+@utility stack-edge-topleft {
+  place-self: start start;
+}
+
+@utility stack-edge-topright {
+  place-self: start end;
+}
+
+@utility stack-edge-topfull {
+  place-self: start stretch;
+}
+
+@utility stack-edge-bottom {
+  place-self: end center;
+}
+
+@utility stack-edge-bottomleft {
+  place-self: end start;
+}
+
+@utility stack-edge-bottomright {
+  place-self: end end;
+}
+
+@utility stack-edge-bottomfull {
+  place-self: end stretch;
+}
+
+@utility stack-edge-left {
+  place-self: center start;
+}
+
+@utility stack-edge-leftfull {
+  place-self: stretch start;
+}
+
+@utility stack-edge-right {
+  place-self: center end;
+}
+
+@utility stack-edge-rightfull {
+  place-self: stretch end;
+}
+
+@utility relative-edge-top {
+  inset-block-start: 0;
+}
+
+@utility relative-edge-topleft {
+  inset-block-start: 0; inset-inline-start: 0;
+}
+
+@utility relative-edge-topright {
+  inset-block-start: 0; inset-inline-end: 0;
+}
+
+@utility relative-edge-topfull {
+  inset-block-start: 0; inset-inline: 0;
+}
+
+@utility relative-edge-bottom {
+  inset-block-end: 0;
+}
+
+@utility relative-edge-bottomfull {
+  inset-block-end: 0; inset-inline: 0;
+}
+
+@utility relative-edge-bottomleft {
+  inset-block-end: 0; inset-inline-start: 0;
+}
+
+@utility relative-edge-bottomright {
+  inset-block-end: 0; inset-inline-end: 0;
+}
+
+@utility relative-edge-left {
+  inset-inline-start: 0;
+}
+
+@utility relative-edge-leftfull { inset-block: 0;
+  inset-inline-start: 0;
+}
+
+@utility relative-edge-right {
+  inset-inline-end: 0;
+}
+
+@utility relative-edge-rightfull { inset-block: 0;
+  inset-inline-end: 0;
+}
+
+@utility edge-adjust-top {
+  --ty: -50%;
+}
+
+@utility edge-adjust-topleft-start {
+  @apply edge-adjust-top;
+
+ --tx: -100%;
+}
+
+@utility edge-adjust-topleft {
+  @apply edge-adjust-top;
+
+ --tx: -50%;
+}
+
+@utility edge-adjust-topleft-end {
+  @apply edge-adjust-top;
+
+ --tx: 0%;
+}
+
+@utility edge-adjust-topright-start {
+  @apply edge-adjust-top;
+
+ --tx: 0%;
+}
+
+@utility edge-adjust-topright {
+  @apply edge-adjust-top;
+
+ --tx: 50%;
+}
+
+@utility edge-adjust-topright-end {
+  @apply edge-adjust-top;
+
+ --tx: 100%;
+}
+
+@utility edge-adjust-bottom {
+  --ty: 50%;
+}
+
+@utility edge-adjust-bottomleft-start {
+  @apply edge-adjust-bottom;
+
+ --tx: -100%;
+}
+
+@utility edge-adjust-bottomleft {
+  @apply edge-adjust-bottom;
+
+ --tx: -50%;
+}
+
+@utility edge-adjust-bottomleft-end {
+  @apply edge-adjust-bottom;
+
+ --tx: 0%;
+}
+
+@utility edge-adjust-bottomright-start {
+  @apply edge-adjust-bottom;
+
+ --tx: 0%;
+}
+
+@utility edge-adjust-bottomright {
+  @apply edge-adjust-bottom;
+
+ --tx: 50%;
+}
+
+@utility edge-adjust-bottomright-end {
+  @apply edge-adjust-bottom;
+
+ --tx: 100%;
+}
+
+@utility edge-adjust-left {
+  --tx: -50%;
+}
+
+@utility edge-adjust-right {
+  --tx: 50%;
+}
+
+@utility edge-top {
+  @apply edge-scaffold; @apply edge-adjust-top; :where(. stack) > & { @apply stack-edge-top; } :where(. relative) > & { @apply relative-edge-top; }
+}
+
+@utility edge-topleft {
+  @apply edge-scaffold; @apply edge-adjust-topleft; :where(. stack) > & { @apply stack-edge-topleft; } :where(. relative) > & { @apply relative-edge-topleft; }
+}
+
+@utility edge-topright {
+  @apply edge-scaffold; @apply edge-adjust-topright; :where(. stack) > & { @apply stack-edge-topright; } :where(. relative) > & { @apply relative-edge-topright; }
+}
+
+@utility edge-topfull {
+  @apply edge-scaffold; @apply edge-adjust-top; :where(. stack) > & { @apply stack-edge-top; } :where(. relative) > & { @apply relative-edge-top; }
+}
+
+@utility edge-bottom {
+  @apply edge-scaffold; @apply edge-adjust-bottom; :where(. stack) > & { @apply stack-edge-bottom; } :where(. relative) > & { @apply relative-edge-bottom; }
+}
+
+@utility edge-bottomleft {
+  @apply edge-scaffold; @apply edge-adjust-bottomleft; :where(. stack) > & { @apply stack-edge-bottomleft; } :where(. relative) > & { @apply relative-edge-bottomleft; }
+}
+
+@utility edge-bottomright {
+  @apply edge-scaffold; @apply edge-adjust-bottomright; :where(. stack) > & { @apply stack-edge-bottomright; } :where(. relative) > & { @apply relative-edge-bottomright; }
+}
+
+@utility edge-bottomfull {
+  @apply edge-scaffold; @apply edge-adjust-bottom; :where(. stack) > & { @apply stack-edge-bottom; } :where(. relative) > & { @apply relative-edge-bottom; }
+}
+
+@utility edge-left {
+  @apply edge-scaffold; @apply edge-adjust-left; :where(. stack) > & { @apply stack-edge-left; } :where(. relative) > & { @apply relative-edge-left; }
+}
+
+@utility edge-leftfull {
+  @apply edge-scaffold; @apply edge-adjust-left; :where(. stack) > & { @apply stack-edge-left; } :where(. relative) > & { @apply relative-edge-left; }
+}
+
+@utility edge-right {
+  @apply edge-scaffold; @apply edge-adjust-right; :where(. stack) > & { @apply stack-edge-right; } :where(. relative) > & { @apply relative-edge-right; }
+}
+
+@utility edge-rightfull {
+  @apply edge-scaffold; @apply edge-adjust-right; :where(. stack) > & { @apply stack-edge-right; } :where(. relative) > & { @apply relative-edge-right; }
+}
+
+@utility edge-topleft-start {
+  @apply edge-top; @apply edge-adjust-topleft-start;
+}
+
+@utility edge-topleft-end {
+  @apply edge-top; @apply edge-adjust-topleft-end;
+}
+
+@utility edge-topright-start {
+  @apply edge-top; @apply edge-adjust-topright-start;
+}
+
+@utility edge-topright-end {
+  @apply edge-top; @apply edge-adjust-topright-end;
+}
+
+@utility edge-bottomleft-start {
+  @apply edge-bottom; @apply edge-adjust-bottomleft-start;
+}
+
+@utility edge-bottomleft-end {
+  @apply edge-bottom; @apply edge-adjust-bottomleft-end;
+}
+
+@utility edge-bottomright-start {
+  @apply edge-bottom; @apply edge-adjust-bottomright-start;
+}
+
+@utility edge-bottomright-end {
+  @apply edge-bottom; @apply edge-adjust-bottomright-end;
+}
+
+@utility fixed-top {
+  position: fixed; top: 0; left: 0; right: 0;
+}
+
+@utility fixed-topleft {
+  @apply fixed-top; @apply nudge-topleft;
+
+ right: auto;
+}
+
+@utility fixed-topright {
+  @apply fixed-top; @apply nudge-topright;
+
+ left: auto;
+}
+
+@utility fixed-topfull {
+  @apply fixed-top; @apply nudge-topfull;
+}
+
+@utility fixed-bottom {
+  position: fixed; bottom: 0; left: 0; right: 0;
+}
+
+@utility fixed-bottomleft {
+  @apply fixed-bottom; @apply nudge-bottomleft;
+
+ right: auto;
+}
+
+@utility fixed-bottomright {
+  @apply fixed-bottom; @apply nudge-bottomright;
+
+ left: auto;
+}
+
+@utility fixed-bottomfull {
+  @apply fixed-bottom; @apply nudge-bottomfull;
+}
+
+@utility fixed-left {
+  position: fixed; top: 0; bottom: 0; left: 0;
+}
+
+@utility fixed-leftfull {
+  @apply fixed-left; @apply nudge-leftfull;
+}
+
+@utility fixed-right {
+  position: fixed; top: 0; bottom: 0; right: 0;
+}
+
+@utility fixed-rightfull {
+  @apply fixed-right; @apply nudge-rightfull;
+}
+
+@utility fixed-center {
+  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) ;
+}
+
+@utility 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;
+}
+
+@utility sticky {
+  position: sticky; top: 0; z-index: var(--z-index, 15) ; :where([class*="grid"] > & ) { align-self: start;   }
+}
+
+@custom-variant sticking (& . sticking);
+
+@utility text-stroke {
+  @supports (-webkit-text-stroke-width: 1px) {     -webkit-text-stroke-width: var(--stroke-width, .1em) ; -webkit-text-stroke-color: var(--stroke-color) ; paint-order: stroke fill; }
+}
+
+@utility text-outline {
+  color: var(--stroke-color) ;
+
+   @supports (-webkit-text-stroke-width: 1px) { font-size: calc(1em - var(--stroke-width, .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; }
+}
+
+.highlight-bg {
+  line-height: 1;
+  background-image: linear-gradient(transparent .25em, var(--color) .25em, var(--color) 1em, transparent 1em);
+}
+
+@utility hero {
+  @apply vertical;
+}
+
+@utility hero-center {
+  @apply vertical items-center;
+}