@fpkit/acss 0.4.4

package/src/styles/index.css

@@ -0,0 +1,1330 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+::selection {
+  /* Optional */
+  /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
+  text-shadow: none;
+  /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
+  /* So you can customise your styles below */
+  color: #fff;
+  background-color: #00f;
+}
+
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  font-size: 100%;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+  aspect-ratio: auto;
+}
+
+img,
+video,
+iframe {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  font-style: italic;
+  background-repeat: no-repeat;
+  background-size: cover;
+  shape-margin: 0.75rem;
+}
+
+svg {
+  display: inline-block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-variant: inherit;
+  line-height: inherit;
+  background-color: inherit;
+}
+
+/* Inherit fonts for inputs and buttons */
+:where(button) {
+  font-family: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* Create a root stacking context */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+*:focus {
+  outline: none;
+  outline-style: auto;
+}
+
+b {
+  font-weight: normal;
+}
+
+/* Removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+svg {
+  max-width: inline-size;
+  /* Optional - make the SVG's fill be the same as the inherited color */
+  /* Prevent the SVG from altering cursor interaction */
+  pointer-events: none;
+}
+svg[role=img] {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+}
+
+:root {
+  --weight: 600;
+  --fs: clamp(0.96rem, 1vw + 0.5rem, 1.6rem);
+  --p: 1rem;
+  --px: var(--p);
+  --py: var(--p);
+  --m: 0.75rem;
+  --mx: var(--m);
+  --my: var(--m);
+  --weight: 600;
+  --radius: 0.5rem;
+  --placeholder-color: gray;
+  --placeholder-style: italic;
+  --placeholder-fs: smaller;
+  --transition: all 0.25s linear;
+  --fs-0: clamp(.9rem, 4vw - 1rem, 1.12rem);
+  --fs-1: clamp(0.65rem, 1.3vw + 0.25rem, 0.75rem);
+  --fs-2: clamp(0.7rem, 2vw - 0.5rem, 0.875rem);
+  --fs-3: clamp(0.85rem, 2vw - 0.25rem, 0.925rem);
+  --fs-4: clamp(0.9rem, 2vw - 0.25rem, 1.313rem);
+  --fs-5: clamp(0.94rem, 2vw - 0.25rem, 1.463rem);
+  --fs-6: clamp(1rem, 2vw + 0.75rem, 2rem);
+  --fs-7: clamp(1.1rem, 4vw - 0.25rem, 2.375rem);
+  --fs-8: clamp(1.2rem, 4vw + 0.25rem, 3rem);
+  --fs-9: clamp(1.2rem, 4vw + 0.5rem, 4rem);
+  --fs-10: clamp(1.2rem, 5vw + 0.5rem, 4.5rem);
+  --fs-11: clamp(1.2rem, 5vw + 0.75rem, 5.063rem);
+  --fs-12: clamp(1.5rem, 5vw + 0.9rem, 6.375rem);
+  --fs-xs: var(--fs-1);
+  --fs-sm: var(--fs-3);
+  --fs-base: var(--fs-0);
+  --fs-md: var(--fs-5);
+  --fs-lg: var(--fs-7);
+  --fs-xl: var(--fs-9);
+  --fs-xxl: var(--fs-11);
+  --fs-xxxl: var(--fs-12);
+  --display: var(--fs-12);
+  --display-md: var(--fs-11);
+  --display-sm: var(--fs-10);
+  --h1: var(--fs-11);
+  --h2: var(--fs-9);
+  --h3: var(--fs-8);
+  --h4: var(--fs-7);
+  --h5: var(--fs-6);
+  --h6: var(--fs-5);
+  --spc-0: 0;
+  --spc-1: 0.25rem;
+  --spc-2: 0.5rem;
+  --spc-3: 0.75rem;
+  --spc-4: 1rem;
+  --spc-5: 1.5;
+  --spc-6: 2rem;
+  --spc-7: 2.5rem;
+  --spc-8: 3rem;
+  --spc-9: 3.5rem;
+  --spc-10: 4rem;
+  --spc-11: 4.5rem;
+  --spc-12: 5rem;
+  --spc-13: 6rem;
+  --spc-14: 7rem;
+  --spc-15: 8rem;
+  --spc-16: 9rem;
+  --spc-17: 10rem;
+  --spc-18: 11rem;
+  --spc-19: 12rem;
+  --spc-20: 13rem;
+  --spc: var(--spc-4);
+  --spc-xs: var(--spc-1);
+  --spc-sm: var(--spc-3);
+  --spc-base: var(--spc-5);
+  --spc-md: var(--spc-7);
+  --spc-lg: var(--spc-9);
+  --spc-xl: var(--spc-11);
+  --spc-xxl: var(--spc-13);
+  --vw-xs: 5vw;
+  --vw-sm: 10vw;
+  --vw-md: 20vw;
+  --vw-lg: 50vw;
+  --vw-xl: 80vw;
+  --vw-xxl: 95vw;
+  --vh-xs: 5vh;
+  --vh-sm: 10vh;
+  --vh-md: 20vh;
+  --vh-lg: 50vh;
+  --vh-xl: 80vh;
+  --vh-xxl: 95vh;
+}
+
+:root {
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --TRUE: initial;
+  --FALSE: ;
+  --fs-weight: 500;
+}
+
+html {
+  font-family: var(--font-family);
+  font-size: 100%;
+}
+
+body {
+  display: var(--body-dsp, flex);
+  min-height: 100%;
+  flex-direction: var(--body-direction, column);
+  min-width: 20.3125rem;
+  font-size: var(--fs-0);
+}
+body main {
+  flex-grow: 1;
+}
+body > a[href^="#"] {
+  position: absolute;
+  top: -4rem;
+  left: 0;
+  width: 100%;
+  display: block;
+  justify-content: flex-start;
+  padding: 1rem;
+  z-index: 100;
+  transition: top 0.3s;
+  border-radius: 0;
+  background-color: whitesmoke;
+}
+body > a[href^="#"]:focus {
+  top: 0;
+}
+
+* + div,
+* + ul,
+* + section {
+  margin-block-start: 1rem;
+}
+
+main,
+header,
+footer,
+section {
+  font-size: var(--fs-0);
+}
+main > section,
+header > section,
+footer > section,
+section > section {
+  margin-inline: auto;
+  width: var(--content-w, 80%);
+}
+main > div,
+header > div,
+footer > div,
+section > div {
+  width: 100%;
+  text-align: center;
+}
+
+section:not(nav) {
+  margin-inline: var(--sect-y, auto);
+  padding-block: var(--sect-x, --spc-4);
+}
+
+p {
+  max-width: 75ch;
+  font-size: var(--fs-0);
+  line-height: 1.6;
+}
+p + p {
+  margin-block-start: 1rem;
+}
+
+ul,
+ol {
+  display: var(--li-display, flex);
+  flex-direction: var(--li-direction, column);
+  gap: var(--li-gap, 0.2rem);
+  flex-wrap: var(--li-wrap, nowrap);
+  padding-inline-start: var(--li-ps, var(--spc-0));
+}
+ul[role=list], ul[data-list~=unstyled],
+ol[role=list],
+ol[data-list~=unstyled] {
+  list-style: var(--li-style, none);
+  margin-block-end: var(--li-my, 0);
+  margin-block-start: var(--li-mx, 0);
+}
+ul[data-list~=inline],
+ol[data-list~=inline] {
+  --li-direction: row;
+  --li-gap: 1rem;
+  --li-wrap: wrap;
+  --li-px: 0;
+}
+
+sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+blockquote {
+  padding: 1rem;
+  border-left: 5px lightgray solid;
+}
+
+strong {
+  font-weight: var(--fs-weight);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--fs-weight);
+  margin-block-start: 0;
+  margin-block-end: 1rem;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: var(--h1, var(--fs-7));
+}
+
+h2 {
+  font-size: var(--h2, var(--fs-6));
+}
+
+h3 {
+  font-size: var(--h3, var(--fs-5));
+}
+
+h4 {
+  font-size: var(--h4, var(--fs-4));
+}
+
+h5 {
+  font-size: var(--h5, var(--fs-3));
+}
+
+h6 {
+  font-size: var(--h6, var(--fs-2));
+}
+
+hr {
+  --hr-h: 0.0625rem;
+  --hr-color: lightgray;
+  --hr-my: 1.5rem;
+  --hr-style: dotted;
+  border: none;
+  border-bottom: var(--hr-h) var(--hr-style) var(--hr-color);
+  margin-block: var(--hr-my);
+}
+
+h1[data-ui~=display], h1:has(span:first-of-type) > span,
+h2[data-ui~=display],
+h2:has(span:first-of-type) > span,
+h3[data-ui~=display],
+h3:has(span:first-of-type) > span,
+h4[data-ui~=display],
+h4:has(span:first-of-type) > span,
+h5[data-ui~=display],
+h5:has(span:first-of-type) > span,
+h6[data-ui~=display],
+h6:has(span:first-of-type) > span {
+  --weight: 600;
+  --title-1: var(--h1);
+  --title-2: var(--h2);
+  --title-3: var(--h3);
+  --title-4: var(--h4);
+  --title-5: var(--h5);
+  --title-6: var(--h6);
+}
+
+button {
+  --btn-sm: calc(12rem / 16);
+  --btn-md: calc(16rem / 16);
+  --btn-lg: calc(21rem / 16);
+  --btn-pill: 100rem;
+  --btn-height: calc(40rem / 16);
+  --fs: 0.95rem;
+  --btn-fs: calc(15rem / 16);
+  --btn-bg: lightgray;
+  --btn-width: max-content;
+  font-size: var(--btn-fs);
+  font-weight: var(--btn-fw, 500);
+  height: var(--btn-height, 2.5rem);
+  min-height: var(--btn-height);
+  place-items: var(--btn-place, center);
+  padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
+  padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
+  border: var(--btn-bdr, none);
+  border-radius: var(--btn-rds, 0.375rem);
+  text-decoration: var(--btn-deco, none);
+  color: var(--btn-cl, currentColor);
+  display: var(--btn-dsp, inline-flex);
+  gap: var(--btn-gap, 0.2rem);
+  white-space: var(--btn-wspc, inherit);
+  margin: var(--btn-spc, 0);
+  transition: var(--tran-all);
+  background-color: var(--btn-bg, var(--btn));
+  outline: none;
+  width: var(--btn-width);
+}
+button[type] {
+  background-color: var(--btn-bg, var(--neutral-300));
+  --btn-bdr: solid var(--btn-sg);
+}
+button[type=submit], button[style*=submit] {
+  --btn-bg: var(--primary-500, royal-blue);
+  --btn-color: white;
+}
+button[disabled], button[aria-disabled=true] {
+  cursor: var(--btn-cursor, not-allowed);
+}
+button[disabled]:is(:hover, :focus), button[aria-disabled=true]:is(:hover, :focus) {
+  transform: none;
+}
+button:is(:hover, :focus) {
+  background-color: var(--btn-bg, var(--btn, lightgray));
+  filter: invert(1) hue-rotate 180deg;
+  transform: scale(0.95) var(--line-style, solid);
+  outline-offset: var(--line-offset, 5px);
+}
+button:is(:hover, :focus)[aria-disabled=true] {
+  transform: none;
+  opacity: var(--btn-opacity, 0.5);
+}
+button[type=reset] {
+  --btn-bg: transparent;
+  --btn-color: gray;
+  --btn-bdr: gray thin solid;
+}
+button[type=submit] {
+  --btn-bg: var(--primary-700, blue);
+  --btn-cl: #fff;
+  --btn-color: rgb(231, 231, 231);
+  --btn-border: none;
+}
+button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
+  border-radius: var(--btn-pill, 100rem);
+}
+button[data-btn~=sm] {
+  --btn-fs: var(--btn-sm);
+}
+button[data-btn~=md] {
+  --btn-fs: var(--btn-md);
+}
+button[data-btn~=lg] {
+  --btn-fs: var(--btn-lg);
+}
+button[data-btn~=text] {
+  --btn-bg: transparent;
+  --btn-cl: currentColor;
+  --btn-bdr: none;
+  --btn-height: unset;
+  --btn-width: unset;
+  --btn-py: 0.75rem;
+  --btn-px: 0.75rem;
+}
+button[data-btn~=text]:is(:hover, :focus) {
+  background-color: transparent;
+  outline: 0.07rem solid var(--btn-cl);
+  outline-offset: 0;
+}
+
+p[role=note],
+[role=note],
+small > span,
+[data-tag] {
+  --beta: var(--warning-500, orange);
+  --stable: var(--success-500, green);
+  --production: rgb(44, 71, 151);
+  --tag-px: 0.7rem;
+  --tag-py: 0.2rem;
+  --tag-fs: 0.8rem;
+  --tag-radius: 99rem;
+  --tag-bg: lightgray;
+  --tag-fw: 500;
+  --tag-color: currentColor;
+  --tag-display: inline-block;
+  display: var(--tag-display);
+  padding-inline: var(--tag-px);
+  padding-block: var(--tag-py);
+  font-size: var(--tag-fs);
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: var(--tag-radius);
+}
+p[role=note][data-tag~=beta],
+[role=note][data-tag~=beta],
+small > span[data-tag~=beta],
+[data-tag][data-tag~=beta] {
+  background-color: var(--beta);
+}
+p[role=note][data-tag~=stable],
+[role=note][data-tag~=stable],
+small > span[data-tag~=stable],
+[data-tag][data-tag~=stable] {
+  --tag-cl: white;
+  --tag-bg: var(--stable);
+}
+p[role=note][data-tag~=production],
+[role=note][data-tag~=production],
+small > span[data-tag~=production],
+[data-tag][data-tag~=production] {
+  --tag-color: white;
+  --tag-bg: var(--production);
+}
+p[role=note][data-tag~=beta],
+[role=note][data-tag~=beta],
+small > span[data-tag~=beta],
+[data-tag][data-tag~=beta] {
+  --tag-color: currentColor;
+  --tag-bg: var(--beta);
+}
+p[role=note][data-tag~=alpha],
+[role=note][data-tag~=alpha],
+small > span[data-tag~=alpha],
+[data-tag][data-tag~=alpha] {
+  --tag-color: currentColor;
+  --tag-bg: var(--beta);
+}
+p[role=note][data-tag~=beta],
+[role=note][data-tag~=beta],
+small > span[data-tag~=beta],
+[data-tag][data-tag~=beta] {
+  --tag-color: currentColor;
+  --tag-bg: var(--beta);
+}
+
+p[role=note] {
+  --tag-display: block;
+  --border-radius: 0.5rem;
+}
+
+img[alt] {
+  --img-max-width: 100%;
+  --img-height: auto;
+  --img-object-fit: cover;
+  --img-object-position: center;
+  --img-aspect-ratio: auto 2/3;
+  --img-display: inline-block;
+  max-width: var(--img-max-width);
+  max-inline-size: var(--img-max-width);
+  block-size: var(--img-height);
+  object-fit: var(--img-object-fit);
+  object-position: var(--img-object-position);
+  aspect-ratio: var(--img-aspect-ratio);
+  display: var(--img-display);
+  vertical-align: middle;
+  font-style: italic;
+  background-size: cover;
+  background-repeat: no-repeat;
+  shape-margin: var(--spc-3);
+}
+
+figure:has(img[alt]) {
+  --fig-display: flex;
+  --fig-p: 0.5rem;
+  --fig-bg: rgba(245, 245, 245, 0.683);
+  --fig-w: fit-content;
+  display: var(--fig-display);
+  position: relative;
+  padding: var(--fig-p);
+  background-color: var(--fig-bg);
+  max-width: var(--fig-w);
+}
+figure:has(img[alt]) > figcaption {
+  position: absolute;
+  bottom: var(--fig-bottom, var(--fig-p));
+  left: var(--fig-left, var(--fig-p));
+  right: var(--fig-right, var(--fig-p));
+  padding: var(--caption-p, var(--spc-3));
+  background-color: var(--fig-bg);
+}
+
+[data-card],
+[data-component~=card] {
+  --card-p: 2rem;
+  --card-bg: #fff;
+  --card-radius: calc(var(--card-p) / 3);
+  --card-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --card-position: relative;
+  --card-display: flex;
+  --card-direction: column;
+  --card-gap: 1rem;
+  position: relative;
+  display: var(--card-display);
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--card-radius);
+  background-color: var(--card-bg);
+}
+[data-card] [data-card-content],
+[data-card] h3,
+[data-card] h2,
+[data-component~=card] [data-card-content],
+[data-component~=card] h3,
+[data-component~=card] h2 {
+  margin-block-end: 0;
+}
+[data-card] > div,
+[data-component~=card] > div {
+  height: 100%;
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+}
+[data-card] > div article,
+[data-component~=card] > div article {
+  flex: 2;
+}
+[data-card] + div,
+[data-component~=card] + div {
+  margin-block-start: 0;
+}
+
+[data-card] > * {
+  padding: var(--card-p);
+}
+
+progress {
+  /* Revert all styles */
+  all: revert;
+  --progress-w: 100%;
+  --progress-h: 1rem;
+  --progress-bg: #cccccc;
+  --progress-color: rgb(71, 71, 245);
+  --progress-accent-color: var(--progress-color);
+  /* This code changes the color of the progress bar. */
+  /* The variable names indicate the colors that are used. */
+  /* The colors are used in the progress bar. */
+  /* If the progress element is busy, remove the revert styles */
+}
+progress[value] {
+  width: var(--progress-w);
+  height: var(--progress-h);
+  background-color: var(--progress-bg);
+  accent-color: var(--progress-accent-color);
+  /* Styling for the remaining part of the& bar */
+}
+progress[value]::-webkit-progress-value {
+  /* Color for Chrome, Safari, and newer Opera */
+  background-color: var(--progress-accent-color);
+  accent-color: var(--progress-accent-color);
+}
+progress[value]::-moz-progress-bar {
+  /* Color for Firefox */
+  background-color: var(--progress-accent-color);
+  accent-color: var(--progress-accent-color);
+}
+progress[value]::-webkit-progress-bar {
+  /* Background for Chrome, Safari, and newer Opera */
+  background-color: var(--progress-background-color);
+  accent-color: var(--progress-accent-color);
+}
+progress[aria-busy] {
+  width: var(--progress-w);
+  height: var(--progress-h);
+  accent-color: var(--progress-accent-color);
+  /* Styling for the remaining part of the& bar */
+}
+progress[aria-busy]::-webkit-progress-value {
+  /* Color for Chrome, Safari, and newer Opera */
+  accent-color: var(--progress-accent-color);
+}
+progress[aria-busy]::-moz-progress-bar {
+  accent-color: var(--progress-accent-color);
+}
+progress[aria-busy]::-webkit-progress-bar {
+  /* Background for Chrome, Safari, and newer Opera */
+  accent-color: var(--progress-accent-color);
+}
+
+details {
+  --details-w: 100%;
+  --details-h: fit-content;
+  --details-border: 1px solid #dfdfdf;
+  --details-display: flex;
+  --details-justify: flex-start;
+  --details-direction: columns;
+  --details-gap: 5rem;
+  --details-px: 1.5rem;
+  --details-py: 1.5rem;
+  --details-radius: 0.5rem;
+  --summary-cursor: pointer;
+  --summary-transitions: all 0.75s linear;
+  --summary-display: flex;
+  --summary-justify: flex-start;
+  --summary-align: center;
+  --summary-gap: 0.5rem;
+  --max-h-closed: 6.25rem;
+  --max-h-open: 50rem;
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+  border-radius: var(--details-radius);
+}
+details::marker {
+  content: none;
+}
+details summary {
+  display: var(--summary-display);
+  justify-content: var(--summary-justify);
+  align-items: var(--summary-align);
+  padding-inline: var(--summary-px, var(--details-px));
+  padding-block: var(--summary-py, var(--details-py));
+  gap: var(--summary-gap);
+  list-style: none;
+  /* This ensures no bullet points are shown */
+}
+details summary::-webkit-details-marker {
+  display: none;
+}
+details summary:hover {
+  cursor: var(--summary-cursor);
+}
+details summary > section {
+  width: var(--details-w);
+}
+details > section {
+  padding-inline: var(--details-px);
+  padding-block: var(--details-py);
+  border: 1px transparent solid;
+}
+details[open] {
+  max-height: var(--max-h-open);
+  transition: var(--summary-transitions);
+}
+details[open] > summary {
+  border-bottom: var(--details-border);
+}
+details[open] > section {
+  max-height: var(--max-h-open);
+}
+
+a[href] {
+  --link-decoration: none;
+  --link-color: #085ab7;
+  --link-bg: transparent;
+  --link-px: 0;
+  --link-py: 0;
+  --link-transition: all 0.75s ease-in-out;
+  --link-fs: 1rem;
+  --link-radius: 0.25rem;
+  --link-skip-ink: auto;
+  --link-decoration-offset: 1.5px;
+  --link-decoration-thickness: 3px;
+  --link-decoration: color: var(--link-color) var(--link-decoration-offset)
+    var(--link-decoration-thickness) var(--link-skip-ink);
+  --link-decoration-thickness: 3px;
+  --link-decoration: color: var(--link-color) var(--link-decoration-offset)
+    var(--link-decoration-thickness) var(--link-skip-ink);
+  color: var(--link-color);
+  font-size: var(--link-fs);
+  text-decoration: var(--link-decoration);
+  text-underline-offset: var(--link-decoration-offset);
+  text-decoration-skip-ink: var(--link-skip-ink);
+  background-color: var(--link-bg);
+  border-radius: var(--link-radius);
+  background-color: var(--link-bg);
+  border-radius: var(--link-radius);
+  font-weight: var(--link-weight);
+}
+a[href] > i,
+a[href] > b {
+  font-weight: var(--link-weight);
+  font-style: normal;
+}
+a[href]:hover {
+  --link-decoration: underline;
+}
+a[href]:focus {
+  outline: none;
+  --link-decoration: underline;
+}
+a[href]:visited, a[href]:active {
+  --link-color: currentColor;
+}
+a[href]:has(> b), a[href][data-link~=btn], a[href]:has(> i) {
+  --link-button-color: var(--link-color);
+  --link-bg: transparent;
+  --link-decoration: none;
+  --link-border: 2px currentColor solid;
+  --link-fs: 0.9rem;
+  background-color: var(--link-bg);
+  font-style: normal;
+  font-size: var(--link-fs);
+  color: var(--link-button-color);
+  padding-inline: var(--link-fs);
+  padding-block: calc(var(--link-fs) - 0.4rem);
+  border-radius: var(--link-radius, 99rem);
+  display: inline-flex;
+  outline: var(--link-border);
+  --scale-transition: transform 0.25s ease;
+  --scale: scale(1);
+  --scale-to: scale(1.05);
+  transform: var(--scale);
+  transition: var(--scale-transition);
+}
+a[href]:has(> b):focus, a[href][data-link~=btn]:focus, a[href]:has(> i):focus {
+  outline: var(--link-border);
+  --link-decoration: none;
+}
+a[href]:has(> b):hover, a[href][data-link~=btn]:hover, a[href]:has(> i):hover {
+  --link-decoration: none;
+}
+a[href]:has(> b):hover, a[href][data-link~=btn]:hover, a[href]:has(> i):hover {
+  transform: var(--scale-to);
+}
+a[href][data-link~=pill], a[href]:has(> i) {
+  --link-radius: 99rem;
+  --link-decoration: none;
+  font-style: normal;
+}
+a[href][data-link~=pill]:hover, a[href][data-link~=pill]:focus, a[href]:has(> i):hover, a[href]:has(> i):focus {
+  --link-decoration: none;
+}
+
+header > section {
+  width: auto;
+}
+
+header,
+[data-hero],
+[data-grid~=overlay] {
+  --overlay-grid-area: overlay;
+  --overlay-placement: center;
+  --overlay-display: grid;
+  --overlay-padding: 2rem;
+  --overlay-w: 100%;
+  --overlay-h: 40vh;
+  --overlay-max-h: 500px;
+  --overlay-color: currentColor;
+  --overlay-content-w: 80%;
+  --overlay-gap: 2rem;
+  --overlay-bg: whitesmoke;
+  --overlay-px: auto;
+  --overlay-py: auto;
+  --overlay-mx: auto;
+  --overlay-my: auto;
+  grid-template-areas: "overlay";
+  display: var(--overlay-display);
+  place-items: var(--overlay-placement);
+  align-items: var(--overlay-placement);
+  min-height: var(--overlay-h);
+  width: var(--overlay-w);
+  color: var(--overlay-color);
+  background-color: var(--overlay-bg);
+  min-width: 20rem;
+}
+
+header > *,
+[data-hero] > *,
+[data-grid~=overlay] > * {
+  grid-area: overlay;
+}
+
+header > img,
+[data-hero] > img,
+[data-grid~=overlay] > img {
+  width: var(--overlay-w);
+  background-size: contain;
+}
+
+header > div,
+header > section,
+[data-hero] > div,
+[data-hero] > section,
+[data-grid~=overlay] > div,
+[data-grid~=overlay] > section {
+  --overlay-display: flex;
+  max-width: var(--overlay-content-w);
+  padding-inline: var(--spc-4);
+  margin-inline: var(--overlay-mx);
+  gap: var(--overlay-gap);
+  text-align: center;
+}
+
+header > div p,
+header > section p,
+[data-hero] > div p,
+[data-hero] > section p,
+[data-grid~=overlay] > div p,
+[data-grid~=overlay] > section p {
+  width: auto;
+  max-width: 60ch;
+  font-size: var(--fs-8);
+  line-height: 1.4;
+}
+
+header > div > h1,
+header > div > h2,
+header > section > h1,
+header > section > h2,
+[data-hero] > div > h1,
+[data-hero] > div > h2,
+[data-hero] > section > h1,
+[data-hero] > section > h2,
+[data-grid~=overlay] > div > h1,
+[data-grid~=overlay] > div > h2,
+[data-grid~=overlay] > section > h1,
+[data-grid~=overlay] > section > h2 {
+  line-height: var(--header-lh, 1.1);
+  font-weight: 500;
+}
+
+header > div > h1,
+header > section > h1,
+[data-hero] > div > h1,
+[data-hero] > section > h1,
+[data-grid~=overlay] > div > h1,
+[data-grid~=overlay] > section > h1 {
+  font-size: var(--fs-12);
+}
+
+header > div > h2,
+header > section > h2,
+[data-hero] > div > h2,
+[data-hero] > section > h2,
+[data-grid~=overlay] > div > h2,
+[data-grid~=overlay] > section > h2 {
+  font-size: var(--fs-11);
+}
+
+header > div > h3,
+header > section > h3,
+[data-hero] > div > h3,
+[data-hero] > section > h3,
+[data-grid~=overlay] > div > h3,
+[data-grid~=overlay] > section > h3 {
+  font-size: var(--fs-10);
+}
+
+main,
+footer {
+  --content-w: min(100%, 1480px);
+  --content-mx: auto;
+  --content-px: 1rem;
+  --content-gap: 2rem;
+  padding-block: var(--overlay-padding);
+}
+main > section,
+footer > section {
+  width: var(--content-w);
+  margin-inline: var(--content-mx);
+  padding-inline: var(--spc-6);
+}
+
+main {
+  flex: 1;
+  font-size: var(--fs-3);
+}
+main > section[aria-label],
+main > section {
+  width: var(--content-w);
+  margin-inline: var(--content-mx);
+}
+main > section[aria-label]:has(> article, > aside),
+main > section:has(> article, > aside) {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  gap: var(--content-gap);
+}
+main > section[aria-label]:has(> article, > aside) > article,
+main > section:has(> article, > aside) > article {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: 50%;
+}
+main > section[aria-label]:has(> article, > aside) > aside,
+main > section:has(> article, > aside) > aside {
+  flex-basis: 20rem;
+  flex-grow: 1;
+}
+
+footer > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 5rem;
+  text-align: center;
+}
+
+sup:has(> span) {
+  --badge-bg: lightgray;
+  --badge-color: currentColor;
+  --badge-radius: 0.15rem;
+  --badge-padding: 0.15rem;
+  --badge-v-align: 0.5rem;
+  --badge-fs: clamp(0.4rem, 0.5rem + 0.5vw, 7rem);
+  background-color: var(--badge-bg);
+  color: var(--badge-color);
+  padding: var(--badge-padding);
+  border-radius: var(--badge-radius);
+  vertical-align: var(--badge-v-align);
+}
+sup:has(> span) span {
+  color: inherit;
+}
+sup:has(> span)[data-badge~=rounded] {
+  --badge-radius: 100%;
+  --badge-padding: 0.2rem;
+}
+
+body > nav,
+[aria-label~=navbar], .navbar {
+  padding-inline: var(--nav-px, 1rem);
+  min-height: var(--nav-h, fit-content);
+}
+@media (max-width: 580px) {
+  body > nav,
+  [aria-label~=navbar], .navbar {
+    flex-direction: column;
+    height: fit-content;
+    min-height: fit-content;
+    padding-block: unset;
+    gap: 0.5rem;
+  }
+}
+body > nav ul > li,
+[aria-label~=navbar] ul > li, .navbar ul > li {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  padding-inline: var(--nav-px, 0.75rem);
+}
+body > nav ul > li:hover,
+[aria-label~=navbar] ul > li:hover, .navbar ul > li:hover {
+  background-color: var(--nav-hov-bg, whitesmoke);
+}
+body > nav ul > li:hover:where(img),
+[aria-label~=navbar] ul > li:hover:where(img), .navbar ul > li:hover:where(img) {
+  background-color: transparent;
+}
+
+nav {
+  display: var(--nav-dsp, flex);
+  flex-direction: var(--nav-direction, row);
+  width: var(--nav-w, auto);
+  place-items: var(--nav-align, center);
+  justify-content: var(--nav-justify, space-between);
+  margin-inline: var(--nav-mx, 0);
+  background-color: var(--nav-bg, initial);
+}
+nav > section,
+nav > ul {
+  --nav-dsp: flex;
+  flex-direction: var(--nav-direction, row);
+  display: var(--nav-dsp, flex);
+  gap: var(--nav-gap, 0);
+  font-size: var(--nav-fs, 0.9rem);
+  align-items: var(--nav-align, center);
+  padding-inline: var(--nav-px, 1rem);
+  padding-block: var(--nav-py, 0);
+  height: 100%;
+}
+nav > section[data-list~=block],
+nav > ul[data-list~=block] {
+  --nav-direction: column;
+}
+nav > section > div {
+  --py: 0;
+}
+nav ul > li {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  padding-inline: var(--nav-px, 1rem);
+}
+nav img[alt] {
+  --px: 0 var(--s1);
+  --w: var(--brand-w, 3.6rem);
+}
+nav[data-variant] {
+  background-color: var(--nav-bg);
+  color: var(--nav-cl);
+  font-size: var(--nav-fs, 0.9rem);
+}
+nav > div {
+  margin-block-start: 0;
+}
+
+:root {
+  --input-border-color: gray;
+  --input-appearance: none;
+  --input-bg: inherit;
+  --input-border: none;
+  --input-outline: thin solid var(--input-border-color);
+  --input-px: 0.6rem;
+  --input-py: 0.4rem;
+  --input-radius: --var(--radius);
+  --input-fs: var(--fs);
+  --input-w: clamp(200px, 100%, 500px);
+  --placeholder-color: gray;
+  --placeholder-style: italic;
+  --placeholder-fs: smaller;
+  --form-direction: column;
+  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
+}
+
+form {
+  display: flex;
+  flex-direction: var(--form-direction);
+  gap: 1rem;
+}
+form > div {
+  display: flex;
+  gap: 1rem;
+  flex-direction: var(--form-direction);
+}
+form label {
+  display: block;
+}
+
+input[type]:not([type=checkbox], [type=radio]),
+textarea,
+select {
+  -webkit-appearance: var(--input-appearance);
+  -moz-appearance: var(--input-appearance);
+  appearance: var(--input-appearance);
+  width: var(--input-w);
+  border: var(--input-border);
+  outline: var(--input-outline);
+  padding-inline: var(--input-px);
+  padding-block: var(--input-py);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg, #fff);
+}
+input[type]:not([type=checkbox], [type=radio])::placeholder,
+textarea::placeholder,
+select::placeholder {
+  color: var(--placeholder-color);
+  font-style: var(--placeholder-style);
+  font-size: var(--placeholder-fs);
+  text-transform: capitalize;
+}
+input[type]:not([type=checkbox], [type=radio]):focus-visible, input[type]:not([type=checkbox], [type=radio]):focus,
+textarea:focus-visible,
+textarea:focus,
+select:focus-visible,
+select:focus {
+  outline-width: medium;
+}
+input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
+textarea[aria-required=true]::placeholder,
+select[aria-required=true]::placeholder {
+  color: var(--color-required, var(--placeholder-color));
+  font-weight: 600;
+}
+input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder::after,
+textarea[aria-required=true]::placeholder::after,
+select[aria-required=true]::placeholder::after {
+  content: "* ";
+}
+input[type]:not([type=checkbox], [type=radio])[aria-disabled=true],
+textarea[aria-disabled=true],
+select[aria-disabled=true] {
+  --input-border-color: lightgray;
+  cursor: not-allowed;
+  text-transform: capitalize;
+  text-decoration: line-through;
+}
+
+select {
+  border: var(--input-outline);
+  outline: none;
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background: var(--select-arrow) no-repeat;
+  background-position: right 0.5rem top 50%;
+  padding-inline-end: 0;
+}
+
+nav:not(body > nav),
+nav[data-breadcrumb] {
+  --breadcrumb-px: unset;
+  --breadcrumb-dsp: flex;
+  --breadcrumb-gap: 0.5rem;
+  --breadcrumb-color: currentColor;
+  --breadcrumb-current-color: rgb(46, 46, 46);
+  --breadcrumb-fs: var(--fs-0);
+  margin-inline: unset;
+  padding-inline: unset;
+}
+nav:not(body > nav) ol,
+nav[data-breadcrumb] ol {
+  padding-inline: var(--breadcrumb-px);
+  display: var(--breadcrumb-dsp);
+  gap: var(--breadcrumb-gap);
+}
+nav:not(body > nav) ol li,
+nav[data-breadcrumb] ol li {
+  padding-inline: unset;
+  width: var(--breadcrumb-w, fit-content);
+  text-transform: capitalize;
+  display: flex;
+  color: var(--breadcrumb-color);
+  gap: 0.5rem;
+  font-size: var(--breadcrumb-fs);
+}
+nav:not(body > nav) ol li span[aria-hidden=true],
+nav[data-breadcrumb] ol li span[aria-hidden=true] {
+  opacity: 0.6;
+}
+nav:not(body > nav) ol li a[href],
+nav[data-breadcrumb] ol li a[href] {
+  font-size: var(--breadcrumb-fs);
+}
+nav:not(body > nav) ol li a[href][aria-current],
+nav[data-breadcrumb] ol li a[href][aria-current] {
+  color: var(--breadcrumb-current-color);
+  text-decoration: none;
+}
+
+[data-tts] {
+  --tts-gap: 0.5rem;
+  --tts-bg: #fff;
+  --tts-border-width: 0.125rem;
+  --tts-border-style: solid;
+  --tts-border-color: currentColor;
+  --tts-radius: 99rem;
+  --tts-padding: 0.5rem;
+  --tts-min-width: 20.3125rem;
+  --tts-align-items: center;
+  --tts-justify-content: center;
+  display: flex;
+  gap: var(--tts-gap);
+  align-items: var(--tts-align-items);
+  justify-content: var(--tts-justify-content);
+  background-color: var(--tts-bg);
+  border: none;
+  outline: var(--tts-border-width) var(--tts-border-style) var(--tts-border-color);
+  border-radius: var(--tts-radius);
+  padding: var(--tts-padding);
+  min-width: var(--tts-min-width);
+}
+[data-tts] button[data-btn~=tts-btn],
+[data-tts] .tts-border {
+  outline: none;
+}
+[data-tts] button[data-btn~=tts-btn]:hover,
+[data-tts] .tts-border:hover {
+  outline: var(--tts-border-width) var(--tts-border-style);
+}
+
+/*# sourceMappingURL=index.css.map */