/*
    Layout
*/
/*
    Colors
*/
/*
    Spacing
*/
/*
    Fonts
*/
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  block-size: 100%;
}

body {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  min-block-size: 100%;
  min-width: 280px;
  background-color: black;
  color: oklch(76.012% 0.0499 286.439deg);
  font-family: "DM Sans", sans-serif;
}

div {
  position: relative;
}

body.layout-sandwich:not(:has(aside)) {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
}
body.layout-sandwich:not(:has(aside)) > header {
  grid-area: header;
}
body.layout-sandwich:not(:has(aside)) > main {
  grid-area: main;
}
body.layout-sandwich:not(:has(aside)) > footer {
  grid-area: footer;
}

body.layout-sandwich:has(aside[data-side=left]) {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "aside-left" "main" "footer";
}
body.layout-sandwich:has(aside[data-side=left]) > header {
  grid-area: header;
}
body.layout-sandwich:has(aside[data-side=left]) > aside[data-side=left] {
  grid-area: aside-left;
}
body.layout-sandwich:has(aside[data-side=left]) > main {
  grid-area: main;
}
body.layout-sandwich:has(aside[data-side=left]) > footer {
  grid-area: footer;
}
@media (min-width: 768px) {
  body.layout-sandwich:has(aside[data-side=left]) {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header" "aside-left main" "footer footer";
  }
}

body.layout-sandwich:has(aside[data-side=right]) {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "aside-right" "footer";
}
body.layout-sandwich:has(aside[data-side=right]) > header {
  grid-area: header;
}
body.layout-sandwich:has(aside[data-side=right]) > main {
  grid-area: main;
}
body.layout-sandwich:has(aside[data-side=right]) > aside[data-side=right] {
  grid-area: aside-right;
}
body.layout-sandwich:has(aside[data-side=right]) > footer {
  grid-area: footer;
}
@media (min-width: 768px) {
  body.layout-sandwich:has(aside[data-side=right]) {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header" "main aside-right" "footer footer";
  }
}

body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "aside-left" "main" "aside-right" "footer";
}
body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) > header {
  grid-area: header;
}
body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) > aside[data-side=left] {
  grid-area: aside-left;
}
body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) > main {
  grid-area: main;
}
body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) > aside[data-side=right] {
  grid-area: aside-right;
}
body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) > footer {
  grid-area: footer;
}
@media (min-width: 960px) {
  body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "header header" "aside-left main" "aside-right aside-right" "footer footer";
  }
}
@media (min-width: 1216px) {
  body.layout-sandwich:has(aside[data-side=left]):has(aside[data-side=right]) {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header header" "aside-left main aside-right" "footer footer footer";
  }
}

body.layout-sandwich > header {
  padding: 0.75rem 1.5rem;
}
body.layout-sandwich > header > *, body.layout-sandwich > header > nav > * {
  margin: 0;
  padding: 0;
}
body.layout-sandwich > aside {
  padding: 0.5rem 1rem;
}
@media (min-width: 1216px) {
  body.layout-sandwich > aside {
    max-width: 400px;
    width: 25vw;
  }
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 0 1rem;
}
@media (min-width: 576px) {
  .container {
    max-width: 510px;
    padding: 0;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
}
@media (min-width: 960px) {
  .container {
    max-width: 900px;
  }
}
@media (min-width: 1216px) {
  .container {
    max-width: 1150px;
  }
}

section {
  margin: 1rem 0 0.5rem 0;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.row > * {
  padding: 0.5rem;
}

@media (min-width: 0) {
  .col-1-xs {
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-xs {
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-xs {
    flex-grow: 0;
    width: 25%;
  }
  .col-4-xs {
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-xs {
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-xs {
    flex-grow: 0;
    width: 50%;
  }
  .col-7-xs {
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-xs {
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-xs {
    flex-grow: 0;
    width: 75%;
  }
  .col-10-xs {
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-xs {
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-xs {
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 576px) {
  .col-1-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-1-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 960px) {
  .col-1-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 1216px) {
  .col-1-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
.center-content {
  display: grid;
  place-items: center;
}

.flex {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.flex.col {
  flex-direction: column;
}
.flex.center-content {
  align-items: center;
  justify-content: center;
}
.flex.space-content {
  justify-content: space-between;
}
.flex.gap-0 {
  gap: 0;
}
.flex.gap-4 {
  gap: 4rem;
}

.flex.column-collapse-sm {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .flex.column-collapse-sm {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }
  .flex.column-collapse-sm.col {
    flex-direction: column;
  }
  .flex.column-collapse-sm.center-content {
    align-items: center;
    justify-content: center;
  }
  .flex.column-collapse-sm.space-content {
    justify-content: space-between;
  }
  .flex.column-collapse-sm.gap-0 {
    gap: 0;
  }
  .flex.column-collapse-sm.gap-4 {
    gap: 4rem;
  }
}

.flex.column-collapse-md {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .flex.column-collapse-md {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }
  .flex.column-collapse-md.col {
    flex-direction: column;
  }
  .flex.column-collapse-md.center-content {
    align-items: center;
    justify-content: center;
  }
  .flex.column-collapse-md.space-content {
    justify-content: space-between;
  }
  .flex.column-collapse-md.gap-0 {
    gap: 0;
  }
  .flex.column-collapse-md.gap-4 {
    gap: 4rem;
  }
}

html {
  font-size: 87.5%;
}
@media (min-width: 576px) {
  html {
    font-size: 93.75%;
  }
}
@media (min-width: 768px) {
  html {
    font-size: 100%;
  }
}
@media (min-width: 960px) {
  html {
    font-size: 106.25%;
  }
}
@media (min-width: 1216px) {
  html {
    font-size: 112.5%;
  }
}
html {
  line-height: 1.3;
}

.text-sm, small {
  font-size: 87.5%;
}

.text-lg {
  font-size: 112.5%;
}

h1, h2, h3, h4, h5, h6 {
  font: "DM Sans", sans-serif;
  color: oklch(93.595% 0.03241 287.624deg);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

h5 {
  font-size: 1.25rem;
  font-weight: 600;
}

h6 {
  font-size: 1.125rem;
  font-weight: 600;
}

hgroup h1, hgroup h2, hgroup h3, hgroup h4, hgroup h5, hgroup h6 {
  line-height: 1;
}
hgroup > * {
  margin: 0;
}
hgroup {
  margin-bottom: 0.5rem;
}

.chapter {
  text-transform: uppercase;
  color: oklch(76.075% 0.10959 285.854deg);
  margin-bottom: 0.25rem;
}

p {
  margin-bottom: 0.5rem;
}

strong, b {
  font-weight: 600;
}

ins {
  color: oklch(89.791% 0.12872 144.447deg);
  text-decoration: none;
}

del {
  color: oklch(80.274% 0.0914 19.213deg);
  text-decoration: line-through;
}

mark {
  color: oklch(92.541% 0.08372 98.954deg);
}

hr {
  border: 0;
  border-bottom: 1px solid oklch(60.001% 0.03024 285.429deg);
  margin: 0.25rem 0;
}

code, kbd {
  font-family: "DM Mono", sans-serif;
  color: oklch(93.595% 0.03241 287.624deg);
  background-color: oklch(20.076% 0.02405 280.304deg);
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

pre {
  font-family: "DM Mono", sans-serif;
  color: oklch(93.595% 0.03241 287.624deg);
  background-color: oklch(20.076% 0.02405 280.304deg);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0.5rem 0;
}

ul {
  padding-left: 3rem;
  margin-bottom: 0.5rem;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
a:hover {
  text-decoration: underline;
  color: oklch(93.595% 0.03241 287.624deg) !important;
}
a:hover i.link-bounce {
  top: -2px;
  right: -2px;
}
a i {
  position: relative;
  margin-left: 2px;
}

button {
  font-family: inherit;
  font-size: inherit;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: oklch(76.012% 0.0499 286.439deg);
  background-color: oklch(33.674% 0.03512 282.102deg);
  border-width: 2px;
  border-style: solid;
  border-color: oklch(33.674% 0.03512 282.102deg);
}
button:hover:not(:disabled) {
  filter: brightness(112%);
}
button.primary {
  background-color: oklch(76.075% 0.10959 285.854deg);
  border-color: oklch(76.075% 0.10959 285.854deg);
  color: oklch(15.001% 0.0237 279.026deg);
}
button.accent {
  background-color: oklch(92.541% 0.08372 98.954deg);
  border-color: oklch(92.541% 0.08372 98.954deg);
  color: oklch(15.001% 0.0237 279.026deg);
}
button.contrast {
  background-color: oklch(93.595% 0.03241 287.624deg);
  border-color: oklch(93.595% 0.03241 287.624deg);
  color: oklch(15.001% 0.0237 279.026deg);
}
button.outline {
  background-color: transparent;
  color: oklch(76.012% 0.0499 286.439deg);
  border-color: oklch(76.012% 0.0499 286.439deg);
}
button.outline.primary {
  color: oklch(76.075% 0.10959 285.854deg);
  border-color: oklch(76.075% 0.10959 285.854deg);
}
button.outline.accent {
  color: oklch(92.541% 0.08372 98.954deg);
  border-color: oklch(92.541% 0.08372 98.954deg);
}
button.outline.contrast {
  color: oklch(93.595% 0.03241 287.624deg);
  border-color: oklch(93.595% 0.03241 287.624deg);
}
button:disabled {
  pointer-events: none;
  cursor: inherit;
  filter: brightness(66%);
  background-color: oklch(33.674% 0.03512 282.102deg);
  border-color: oklch(33.674% 0.03512 282.102deg);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
nav > ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 1rem;
}

fieldset {
  border: 0;
  margin-bottom: 0.625rem;
  width: 100%;
}
fieldset label {
  margin-bottom: 0.25rem;
  display: block;
}

fieldset:disabled input,
fieldset:disabled optgroup,
fieldset:disabled select,
fieldset:disabled textarea {
  pointer-events: none;
  cursor: inherit;
  filter: brightness(66%);
  background-color: oklch(33.674% 0.03512 282.102deg);
  border-color: oklch(33.674% 0.03512 282.102deg);
}

input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  width: 100%;
  border: 0;
  border-radius: 0.25rem;
  background-color: oklch(33.674% 0.03512 282.102deg);
  color: oklch(76.012% 0.0499 286.439deg);
  padding: 0.25rem 0.5rem;
  margin: 0.25rem 0;
}
input:disabled,
optgroup:disabled,
select:disabled,
textarea:disabled {
  pointer-events: none;
  cursor: inherit;
  filter: brightness(66%);
  background-color: oklch(33.674% 0.03512 282.102deg);
  border-color: oklch(33.674% 0.03512 282.102deg);
}

input {
  overflow: visible;
}

select {
  text-transform: none;
}

legend {
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  padding: 0;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

:-moz-focusring {
  outline: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-ms-expand {
  display: none;
}

[type=file],
[type=range] {
  padding: 0;
  border-width: 0;
}

input:not([type=checkbox], [type=radio], [type=range]) {
  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=range] {
  cursor: pointer;
  padding: 0;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: oklch(33.674% 0.03512 282.102deg);
  -webkit-appearance: none;
  appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: oklch(76.012% 0.0499 286.439deg);
}
input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: oklch(76.012% 0.0499 286.439deg);
}
input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: oklch(76.012% 0.0499 286.439deg);
}
input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
  height: 0.5rem;
}
input[type=range]::-moz-range-track {
  background: transparent;
  border: none;
  height: 0.5rem;
}
input[type=range]::-ms-track {
  background: transparent;
  border: none;
  height: 0.5rem;
}

input[type=checkbox][role=switch] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2.5rem;
  height: 1.25rem;
  position: relative;
  border-radius: 1rem;
  margin: 0;
}

input[type=checkbox][role=switch]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 1rem;
  height: 1rem;
  margin: 0 0.15em;
  border-radius: 50%;
  box-sizing: border-box;
  background: oklch(33.674% 0.03512 282.102deg);
}

input[type=checkbox][role=switch]:checked {
  background: oklch(33.674% 0.03512 282.102deg);
}

input[type=checkbox][role=switch]:checked::before {
  left: 1em;
  background: oklch(60.001% 0.03024 285.429deg);
}

span:has(input[type=checkbox]) {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.25rem;
}

input[type=button] {
  cursor: pointer;
}
input[type=button]:hover {
  filter: brightness(112%);
}

.card {
  background-color: oklch(15.001% 0.0237 279.026deg);
  border-radius: 0.5rem;
}

/*
  Surface Colors
*/
.bg-0 {
  background-color: black;
}

.bg-1 {
  background-color: oklch(15.001% 0.0237 279.026deg);
}

.bg-2 {
  background-color: oklch(20.076% 0.02405 280.304deg);
}

.bg-3 {
  background-color: oklch(24.912% 0.02656 281.102deg);
}

/*
  Text / Border Colors
*/
.text-success {
  color: oklch(89.791% 0.12872 144.447deg);
}

.text-hover-success:hover {
  color: oklch(89.791% 0.12872 144.447deg);
}

.border-success {
  border: 2px solid oklch(89.791% 0.12872 144.447deg);
}

.text-error {
  color: oklch(80.274% 0.0914 19.213deg);
}

.text-hover-error:hover {
  color: oklch(80.274% 0.0914 19.213deg);
}

.border-error {
  border: 2px solid oklch(80.274% 0.0914 19.213deg);
}

.text-warning {
  color: oklch(87.053% 0.0666 64.513deg);
}

.text-hover-warning:hover {
  color: oklch(87.053% 0.0666 64.513deg);
}

.border-warning {
  border: 2px solid oklch(87.053% 0.0666 64.513deg);
}

.text-info {
  color: oklch(82.39% 0.07184 255.753deg);
}

.text-hover-info:hover {
  color: oklch(82.39% 0.07184 255.753deg);
}

.border-info {
  border: 2px solid oklch(82.39% 0.07184 255.753deg);
}

.text-body {
  color: oklch(76.012% 0.0499 286.439deg);
}

.text-hover-body:hover {
  color: oklch(76.012% 0.0499 286.439deg);
}

.border-body {
  border: 2px solid oklch(76.012% 0.0499 286.439deg);
}

.text-contrast {
  color: oklch(93.595% 0.03241 287.624deg);
}

.text-hover-contrast:hover {
  color: oklch(93.595% 0.03241 287.624deg);
}

.border-contrast {
  border: 2px solid oklch(93.595% 0.03241 287.624deg);
}

.text-muted {
  color: oklch(60.001% 0.03024 285.429deg);
}

.text-hover-muted:hover {
  color: oklch(60.001% 0.03024 285.429deg);
}

.border-muted {
  border: 2px solid oklch(60.001% 0.03024 285.429deg);
}

.text-primary {
  color: oklch(76.075% 0.10959 285.854deg);
}

.text-hover-primary:hover {
  color: oklch(76.075% 0.10959 285.854deg);
}

.border-primary {
  border: 2px solid oklch(76.075% 0.10959 285.854deg);
}

.text-accent {
  color: oklch(92.541% 0.08372 98.954deg);
}

.text-hover-accent:hover {
  color: oklch(92.541% 0.08372 98.954deg);
}

.border-accent {
  border: 2px solid oklch(92.541% 0.08372 98.954deg);
}

/*
  Opacities
*/
.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

/*
  Aspect Ratios
*/
.aspect-ratio-1-1 {
  aspect-ratio: 1;
}

.aspect-ratio-16-9 {
  aspect-ratio: 1.7777777778;
}

.aspect-ratio-9-16 {
  aspect-ratio: 0.5625;
}

/*
  Border Radius
*/
.border-radius-0 {
  border-radius: 0;
}

.border-radius-1 {
  border-radius: 0.25rem;
}

.border-radius-2 {
  border-radius: 0.5rem;
}

.border-radius-3 {
  border-radius: 0.75rem;
}

.border-radius-4 {
  border-radius: 1rem;
}

.border-radius-5 {
  border-radius: 1.25rem;
}

/*
  Margin / Padding
*/
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.m-1 {
  margin: 0.125rem;
}

.mt-1 {
  margin-top: 0.125rem;
}

.mr-1 {
  margin-right: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.125rem;
}

.ml-1 {
  margin-left: 0.125rem;
}

.m-2 {
  margin: 0.25rem;
}

.mt-2 {
  margin-top: 0.25rem;
}

.mr-2 {
  margin-right: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.25rem;
}

.ml-2 {
  margin-left: 0.25rem;
}

.m-3 {
  margin: 0.5rem;
}

.mt-3 {
  margin-top: 0.5rem;
}

.mr-3 {
  margin-right: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.5rem;
}

.ml-3 {
  margin-left: 0.5rem;
}

.m-4 {
  margin: 0.75rem;
}

.mt-4 {
  margin-top: 0.75rem;
}

.mr-4 {
  margin-right: 0.75rem;
}

.mb-4 {
  margin-bottom: 0.75rem;
}

.ml-4 {
  margin-left: 0.75rem;
}

.m-5 {
  margin: 1rem;
}

.mt-5 {
  margin-top: 1rem;
}

.mr-5 {
  margin-right: 1rem;
}

.mb-5 {
  margin-bottom: 1rem;
}

.ml-5 {
  margin-left: 1rem;
}

.m-6 {
  margin: 1.25rem;
}

.mt-6 {
  margin-top: 1.25rem;
}

.mr-6 {
  margin-right: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.25rem;
}

.ml-6 {
  margin-left: 1.25rem;
}

.m-7 {
  margin: 1.5rem;
}

.mt-7 {
  margin-top: 1.5rem;
}

.mr-7 {
  margin-right: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.5rem;
}

.ml-7 {
  margin-left: 1.5rem;
}

.m-8 {
  margin: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

.m-9 {
  margin: 2.5rem;
}

.mt-9 {
  margin-top: 2.5rem;
}

.mr-9 {
  margin-right: 2.5rem;
}

.mb-9 {
  margin-bottom: 2.5rem;
}

.ml-9 {
  margin-left: 2.5rem;
}

.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.p-1 {
  padding: 0.125rem;
}

.pt-1 {
  padding-top: 0.125rem;
}

.pr-1 {
  padding-right: 0.125rem;
}

.pb-1 {
  padding-bottom: 0.125rem;
}

.pl-1 {
  padding-left: 0.125rem;
}

.p-2 {
  padding: 0.25rem;
}

.pt-2 {
  padding-top: 0.25rem;
}

.pr-2 {
  padding-right: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.25rem;
}

.pl-2 {
  padding-left: 0.25rem;
}

.p-3 {
  padding: 0.5rem;
}

.pt-3 {
  padding-top: 0.5rem;
}

.pr-3 {
  padding-right: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.5rem;
}

.pl-3 {
  padding-left: 0.5rem;
}

.p-4 {
  padding: 0.75rem;
}

.pt-4 {
  padding-top: 0.75rem;
}

.pr-4 {
  padding-right: 0.75rem;
}

.pb-4 {
  padding-bottom: 0.75rem;
}

.pl-4 {
  padding-left: 0.75rem;
}

.p-5 {
  padding: 1rem;
}

.pt-5 {
  padding-top: 1rem;
}

.pr-5 {
  padding-right: 1rem;
}

.pb-5 {
  padding-bottom: 1rem;
}

.pl-5 {
  padding-left: 1rem;
}

.p-6 {
  padding: 1.25rem;
}

.pt-6 {
  padding-top: 1.25rem;
}

.pr-6 {
  padding-right: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.25rem;
}

.pl-6 {
  padding-left: 1.25rem;
}

.p-7 {
  padding: 1.5rem;
}

.pt-7 {
  padding-top: 1.5rem;
}

.pr-7 {
  padding-right: 1.5rem;
}

.pb-7 {
  padding-bottom: 1.5rem;
}

.pl-7 {
  padding-left: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-8 {
  padding-left: 2rem;
}

.p-9 {
  padding: 2.5rem;
}

.pt-9 {
  padding-top: 2.5rem;
}

.pr-9 {
  padding-right: 2.5rem;
}

.pb-9 {
  padding-bottom: 2.5rem;
}

.pl-9 {
  padding-left: 2.5rem;
}

/*
  Text Align
*/
.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

/*
  Font
*/
.font-body {
  font-family: "DM Sans", sans-serif;
}

.font-display {
  font-family: "DM Sans", sans-serif;
}

.font-mono {
  font-family: "DM Mono", sans-serif;
}

/*
  Other
*/
.blanket,
.sheet {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.blanket {
  z-index: 9999;
}

.sheet {
  z-index: -9999;
}

.image {
  background-size: contain;
}

.pointer-events-none {
  pointer-events: none;
}

.width-100 {
  width: 100%;
}