*,
*::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 */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-inline-start: 0;
}

/* 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;
}

/* 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 {
  --font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --fs: 1rem;
}

html {
  font-family: var(--font-family);
  font-size: var(--fs);
}

main,
header,
footer {
  font-size: var(--fs);
}
main > section,
header > section,
footer > section {
  margin-inline: auto;
  width: var(--content-w, 80%);
}
main > div,
header > div,
footer > div {
  text-align: center;
}

section:not(nav) {
  margin-inline: var(--sect-y, auto);
  padding-block: var(--sect-x, --spc-4);
}

p {
  font-size: var(--fs);
}
p + p {
  margin-block-start: 1rem;
}

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);
  opacity: var(--btn-opacity, 0.5);
}
button[disabled]:is(:hover, :focus),
button[aria-disabled='true']:is(:hover, :focus) {
  transform: none;
  opacity: var(--btn-opacity, 0.5);
}
button:is(:hover, :focus) {
  --btn-cl: var(--btn-cl-hover);
  background-color: var(--btn-bg, var(--btn, lightgray));
  filter: invert(1) hue-rotate 180deg;
  transform: scale(0.95);
  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);
}

p[role='note'],
[role='note'],
[data-badge] {
  --beta: var(--warning-500, orange);
  --stable: var(--success-500, green);
  --production: rgb(44, 71, 151);
  --badge-px: 0.7rem;
  --badge-py: 0.2rem;
  --badge-fs: 0.8rem;
  --badge-radius: 99rem;
  --badge-bg: lightgray;
  --badge-fw: 500;
  --badge-color: currentColor;
  --badge-display: inline-block;
  display: var(--badge-display);
  padding-inline: var(--badge-px);
  padding-block: var(--badge-py);
  color: var(--badge-color);
  background-color: var(--badge-bg);
  border-radius: var(--badge-radius);
}
p[role='note'][data-badge~='beta'],
[role='note'][data-badge~='beta'],
[data-badge][data-badge~='beta'] {
  background-color: var(--beta);
}
p[role='note'][data-badge~='stable'],
[role='note'][data-badge~='stable'],
[data-badge][data-badge~='stable'] {
  --badge-cl: white;
  --badge-bg: var(--stable);
}
p[role='note'][data-badge~='production'],
[role='note'][data-badge~='production'],
[data-badge][data-badge~='production'] {
  --badge-color: white;
  --badge-bg: var(--production);
}
p[role='note'][data-badge~='beta'],
[role='note'][data-badge~='beta'],
[data-badge][data-badge~='beta'] {
  --badge-color: currentColor;
  --badge-bg: var(--beta);
}
p[role='note'][data-badge~='alpha'],
[role='note'][data-badge~='alpha'],
[data-badge][data-badge~='alpha'] {
  --badge-color: currentColor;
  --badge-bg: var(--beta);
}
p[role='note'][data-badge~='beta'],
[role='note'][data-badge~='beta'],
[data-badge][data-badge~='beta'] {
  --badge-color: currentColor;
  --badge-bg: var(--beta);
}

p[role='note'] {
  --badge-display: block;
  --border-radius: 0.5rem;
}

[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);
  padding: var(--card-p);
  display: var(--card-display);
  flex-direction: var(--card-direction);
  gap: var(--card-gap);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
}

details {
  --details-display: 'flex';
  --details-flex-direction: 'column';
  --details-align-items: 'flex-start';
  --details-margin: '0';
  --details-width: '100%';
  --details-padding-x: '0';
  --details-padding-y: '1.5rem';
  display: var(--details-display);
  flex-direction: var(--details-flex-direction);
  align-items: var(--details-align-items);
  margin: var(--details-margin);
  width: var(--details-width);
  padding-inline: var(--details-padding-x);
  padding-block: var(--details-padding-y);
}
details > summary {
  width: var(--details-width);
  display: var(--details-display);
}
details > div {
  padding: var(--details-padding-y);
}

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: 2rem;
  --details-py: 1.5rem;
  --details-radius: 0.5rem;
  --summary-cursor: pointer;
  --summary-transitions: all 0.75s ease-in-out;
  --summary-display: flex;
  --summary-justify: flex-start;
  --summary-align: center;
  --summary-gap: 0.5rem;
  --max-h-closed: 200px;
  --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);
}
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);
}

/*# sourceMappingURL=index.css.map */