:root {
  --white-100-010: #ffffff1a;
  --white-100-005: #ffffff0d;
  --white-075-100: #bfbfbfff;
  --white-050-100: #7f7f7fff;
  --white-025-100: #3f3f3fff;
  --white-015-100: #262626ff;
  --white-012-050: #1f1f1f7f;
  --white-010-100: #1a1a1aff;
  --white-005-100: #0d0d0dff;
  --white-000-075: #000000bf;
  --white-000-050: #0000007f;
  --orange-095-100: #ffebe6ff;
  --orange-090-100: #ffd7ccff;
  --orange-085-100: #ffc3b3ff;
  --orange-080-100: #ffaf99ff;
  --orange-075-100: #ff9b80ff;
  --orange-070-100: #ff8766ff;
  --orange-065-100: #ff734dff;
  --orange-060-100: #ff5f33ff;
  --orange-055-100: #ff4b1aff;
  --orange-050-100: #ff3700ff;
  --orange-045-100: #e63200ff;
  --orange-040-100: #cc2c00ff;
  --orange-035-100: #b32700ff;
  --orange-030-100: #992100ff;
  --orange-025-100: #801c00ff;
  --orange-020-100: #661600ff;
  --orange-015-100: #4d1100ff;
  --orange-010-100: #330b00ff;
  --orange-005-100: #1a0600ff;
  --violet-095-100: #f0e6ffff;
  --violet-090-100: #e0ccffff;
  --violet-085-100: #d1b3ffff;
  --violet-080-100: #c299ffff;
  --violet-075-100: #b380ffff;
  --violet-070-100: #a366ffff;
  --violet-065-100: #944dffff;
  --violet-060-100: #8533ffff;
  --violet-055-100: #751affff;
  --violet-050-100: #6600ffff;
  --violet-045-100: #5c00e6ff;
  --violet-040-100: #5200ccff;
  --violet-035-100: #4700b3ff;
  --violet-030-100: #3d0099ff;
  --violet-025-100: #330080ff;
  --violet-020-100: #290066ff;
  --violet-015-100: #1f004dff;
  --violet-010-100: #140033ff;
  --violet-005-100: #0a001aff;
}

@font-face {
  font-family: "Default";
  src: url("/ttf/josefin-sans.ttf");
  ascent-override: 80%;
  descent-override: 0%;
}
* {
  box-sizing: border-box;
  font-family: "Default";
  outline: none;
}

html, body {
  color: var(--white-075-100);
}

button {
  border: unset;
  background-color: transparent;
  padding-inline: 6px;
  padding-block: 6px;
  border: 1px solid transparent;
  transition: all 100ms ease, opacity 1s ease;
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  color: var(--white-075-100);
  opacity: 1;
  white-space: nowrap;
}
button.hidden {
  opacity: 0;
  pointer-events: none;
}
button.border {
  border-color: var(--white-015-100);
}
button::before, button::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 100ms ease;
  pointer-events: none;
  z-index: -1;
  border-radius: 14px;
}
button::before {
  background-image: linear-gradient(45deg, transparent, transparent);
  opacity: 1;
}
button::after {
  background-image: linear-gradient(45deg, var(--violet-080-100), var(--violet-080-100) 20%, var(--orange-080-100) 80%, var(--orange-080-100));
  opacity: 0;
}
button:not(.disabled):focus:hover {
  color: var(--white-010-100);
}
button:not(.disabled):hover {
  border-color: transparent;
  color: var(--white-010-100);
}
button:not(.disabled):hover svg {
  color: var(--white-010-100);
}
button:not(.disabled):hover::before {
  opacity: 0;
}
button:not(.disabled):hover::after {
  opacity: 1;
}
button:not(.disabled):hover:active::after {
  opacity: 0.8;
}
button:not(.disabled):not(:hover):focus {
  color: var(--violet-090-100);
  border-color: var(--violet-080-100);
}
button.disabled {
  background-color: var(--white-010-100);
  color: var(--white-050-100);
  cursor: not-allowed;
}

body {
  margin: unset;
  background-color: var(--white-005-100);
  position: fixed;
  inset: 0;
}
body nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  background-image: linear-gradient(45deg, var(--white-000-050), var(--white-012-050));
  backdrop-filter: blur(4px);
  border-right: 1px solid var(--white-015-100);
  padding: 8px;
  border-radius: 0 16px 16px 0;
  gap: 48px;
  transition: all 200ms ease;
  overflow-x: hidden;
}
body nav.expand {
  width: 400px;
}
body nav.expand button {
  padding-inline: 12px;
}
body nav.expand button span {
  max-width: 200px;
}
body nav.hidden {
  left: -56px;
  opacity: 0;
  pointer-events: none;
}
body nav section#menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body nav section.nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body nav button {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  transition: padding-inline 200ms ease;
}
body nav button span {
  transition: all 200ms ease;
  overflow: hidden;
  max-width: 0;
  line-height: 24px;
}
body nav button.active {
  color: var(--orange-080-100);
}
body main {
  position: fixed;
  inset: 0;
}
body main .fade {
  transition: opacity 1000ms ease;
  opacity: 1;
}
body main .fade.hidden {
  opacity: 0;
  pointer-events: none;
}
body main canvas {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
body main #content {
  position: absolute;
  inset: 0;
  z-index: 1;
}
body main section#default-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body main section#default-content section#dot-exclusion-zone {
  width: min-content;
  height: min-content;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
body main section#default-content section#dot-exclusion-zone button {
  font-size: 24px;
  padding: 12px 24px;
  border-width: 2px;
}
body main section#default-content h1 {
  margin: 16px;
  font-size: 64px;
  white-space: nowrap;
}
body main section#default-content h1 span.gray {
  color: var(--white-025-100);
}
body main section#default-content h1 span.accent {
  background-image: linear-gradient(45deg, var(--violet-070-100), var(--orange-070-100));
  color: transparent;
  background-clip: text;
}
body main div#login-dialog {
  max-height: 200px;
  width: 400px;
  transition: all 100ms ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body main div#login-dialog.hidden {
  max-height: 0;
}
body main div#login-dialog a {
  cursor: pointer;
  padding: 4px;
  text-align: center;
  transition: all 200ms ease;
  text-decoration: underline;
  text-decoration-color: var(--white-075-100);
  font-size: 18px;
}
body main div#login-dialog a[disabled=disabled] {
  color: var(--white-050-100);
  cursor: not-allowed;
  text-decoration: none;
}
body main div#login-dialog a:not([disabled=disabled]):hover {
  color: var(--violet-080-100);
  text-decoration-color: var(--violet-080-100);
}

label {
  display: flex;
  gap: 8px;
}
label span.label {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-end;
}
label span.label svg {
  cursor: pointer;
  transition: all 100ms ease;
}
label span.label svg:hover {
  color: var(--orange-090-100);
}
label span:not(.fake-input):not(.action) {
  font-size: 16px;
  margin-inline: 14px;
}
label input[type=text],
label input[type=password] {
  background-color: unset;
  border-radius: 16px;
  font-size: 18px;
  color: var(--white-075-100);
  padding: 8px 12px;
  border: 2px solid var(--white-015-100);
  transition: all 200ms ease;
  line-height: 20px;
}
label input[type=text][disabled=disabled][readonly=readonly],
label input[type=password][disabled=disabled][readonly=readonly] {
  background-color: var(--white-010-100);
  color: var(--white-050-100);
}
label input[type=text]:focus,
label input[type=password]:focus {
  border-color: var(--violet-080-100);
  color: var(--violet-090-100);
}
label input[type=text]:focus.validation.error,
label input[type=password]:focus.validation.error {
  border-color: var(--orange-080-100);
  color: var(--orange-090-100);
}
label input[type=text].validation ~ span,
label input[type=password].validation ~ span {
  overflow: hidden;
  max-height: 0;
  transition: all 500ms ease;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
label input[type=text].validation.success ~ span,
label input[type=password].validation.success ~ span {
  color: var(--violet-080-100);
  max-height: 16px;
}
label input[type=text].validation.error ~ span,
label input[type=password].validation.error ~ span {
  color: var(--orange-080-100);
  max-height: 16px;
}
label.vertical {
  flex-direction: column;
}

.fake-input {
  background-color: unset;
  border-radius: 16px;
  border: 2px solid var(--white-015-100);
}
.fake-input.text {
  font-size: 16px;
  padding: 8px 12px;
  color: var(--white-075-100);
  line-height: 20px;
}

.floating-action-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 18px;
  border-width: 2px;
  z-index: 999;
}

dialog#notification-dialog {
  position: absolute;
  inset: 0;
  display: grid;
  grid: 1fr min-content 1fr/1fr min-content 1fr;
  background-color: var(--white-000-050);
  backdrop-filter: blur(4px);
  border: unset;
  width: unset;
  height: unset;
  transition: all 250ms ease;
  transform: scale(1);
  opacity: 1;
  pointer-events: all;
  z-index: 1000;
}
dialog#notification-dialog.hidden {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.2);
}
dialog#notification-dialog section.dialog {
  grid-area: 2/2/3/3;
  display: flex;
  flex-direction: column;
  background-color: var(--white-000-075);
  border: 2px solid var(--violet-070-100);
  border-radius: 16px;
  min-width: 300px;
  max-width: 30svw;
  box-shadow: 0 0 32px black;
  z-index: 1001;
}
dialog#notification-dialog section.dialog span.dialog-header {
  padding: 16px;
  white-space: nowrap;
  color: var(--violet-085-100);
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
dialog#notification-dialog section.dialog div.dialog-content {
  flex: 1;
  padding: 8px 16px;
  font-size: 18px;
  color: var(--white-075-100);
  line-height: 20px;
}
dialog#notification-dialog section.dialog div.dialog-buttons {
  padding: 16px;
  display: flex;
  justify-content: center;
}
dialog#notification-dialog section.dialog div.dialog-buttons button {
  font-size: 18px;
  padding: 8px 16px;
  z-index: 1002;
  border: 2px solid var(--violet-090-100);
}
dialog#notification-dialog.warning section.dialog {
  border-color: var(--orange-070-100);
}
dialog#notification-dialog.warning section.dialog span.dialog-header {
  color: var(--orange-080-100);
}
dialog#notification-dialog.warning section.dialog div.dialog-buttons button {
  color: var(--orange-090-100);
  border: 2px solid var(--orange-090-100);
}
dialog#notification-dialog.warning section.dialog div.dialog-buttons button:hover {
  color: var(--white-015-100);
}
dialog#notification-dialog.warning section.dialog div.dialog-buttons button:focus {
  border-color: var(--orange-070-100);
}

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