/**
 * Core design tokens, and utility.
 */
/**
 * Design token aliases
 */
/* Horizontal Stack (HStack) */
.l-stack-h {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; /* Adjust as needed: center, space-between, etc. */
  gap: 10px; /* Spacing between children */
}

/* Vertical Stack (VStack) */
.l-stack-v {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Adjust as needed */
  justify-content: flex-start;
  gap: 10px;
}

/* Centered Stack (ZStack) */
.l-stack-z {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.l-fill {
  width: 100%;
}

/* Flex Grow Pane (Fill available space) */
.l-auto {
  flex: 1 1 auto;
}

/* Fixed Pane */
.l-fixed {
  flex: 0 0 auto; /* Do not grow or shrink */
}

/* Horizontal Scrolling Pane */
.l-pane-h {
  overflow-x: auto; /* Horizontal scrolling */
  overflow-y: hidden; /* Disable vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
}

/* Vertical Scrolling Pane */
.l-pane-v {
  overflow-y: auto; /* Vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Full Pane Scrolling */
.l-pane {
  overflow: auto; /* Both horizontal and vertical scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Alignment Utilities */
.l-align-center {
  align-items: center;
  justify-content: center;
}

.l-align-start {
  align-items: flex-start;
  justify-content: flex-start;
}

.l-align-end {
  align-items: flex-end;
  justify-content: flex-end;
}

/* Padding and Margins */
.p, .p-md {
  padding: 16px;
}

.p-sm {
  padding: 8px;
}

.p-lg {
  padding: 32px;
}

.py-sm {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pl-sm {
  padding-right: 8px;
}

.m, .m-md {
  margin: 16px;
}

.m-sm {
  margin: 8px;
}

.m-lg {
  margin: 32px;
}

.mb-lg {
  margin-bottom: 32px;
}

.g, .g-md {
  gap: 16px;
}

.g-sm {
  gap: 8px;
}

.g-lg {
  gap: 32px;
}

.g-xl {
  gap: 64px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Montserrat", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  background: rgb(28, 28, 28);
  color: #d5dddd;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.a-page-header {
  background: #050606;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
}
.a-page-header__nav {
  width: min(100% - 32px, 1024px);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.a-page-header__nav__items {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.a-page-header__nav__items li > * {
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  color: #9dafaf;
}
.a-page-header__nav__items li > *:hover {
  color: #f1f4f4;
}
.a-page-header__nav__items li > *:active {
  color: #f9fafa;
}

.a-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 1024px;
  margin: 55px auto 0;
}

.a-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.a-grid__item {
  background: #0b0e0e;
  box-shadow: 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.a-grid a.a-grid__item {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a-grid a.a-grid__item:hover, .a-grid a.a-grid__item:focus-within {
  background: #171c1c;
}
.a-grid a.a-grid__item:active {
  background: #2e3838;
}

.a-card {
  display: flex;
  flex-direction: column;
  background: #0b0e0e;
  box-shadow: 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
  color: #b9c6c6;
  width: min(640px, 95%);
}
.a-card > * {
  width: 100%;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

input {
  background: #171c1c;
  color: #d5dddd;
  border: 1px solid #2e3838;
  padding: 8px 16px;
  border-radius: 8px;
  width: 100%;
}
input:focus-within {
  outline: 1px solid #004dcc;
}

button {
  outline: none;
  border: none;
  padding: 8px 32px;
  border-radius: 8px;
  background: #738c8c;
  cursor: pointer;
}
button:hover {
  background: #819898;
}

.fg-red {
  color: #ff0000;
}

.fg-white {
  color: #d5dddd;
}

.brand {
  font-size: 1.25rem;
  text-decoration: none;
  color: #f9fafa;
}
.brand span {
  color: #00fffd;
}

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