.controller-sessions .login-form, .controller-sessions .login-link-sent, .controller-registrations .login-form, .controller-registrations .login-link-sent, .glass-page, .glass-page-section-inner, .glass-page-section-header, .frosted-glass, .glass {
  border: 1px solid var(--border-color, rgba(127, 127, 127, 0.8));
}

.controller-sessions .login-form, .controller-sessions .login-link-sent, .controller-registrations .login-form, .controller-registrations .login-link-sent, .glass-page, .glass-page-section-inner, .glass-page-section-header, .frosted-glass, .glass {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .controller-sessions .login-form, .controller-sessions .login-link-sent, .controller-registrations .login-form, .controller-registrations .login-link-sent, .glass-page, .glass-page-section-inner, .glass-page-section-header, .frosted-glass, .glass {
    background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.3)), var(--bg-blurred, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)));
    background-size: cover;
  }
}

.glass-page {
  padding: 0 1em;
  max-width: 1200px;
}

.glass-page {
  padding: 0 1em;
  margin: 0 auto;
}

.button--groove:is(.button--groove, .spec.bump.bump.bump) {
  border: 3px solid black;
  box-shadow: 0 0 0 1px var(--button-color, #ffd939), 0 0 0 1px inset var(--button-color, #ffd939);
  border-radius: 3px;
}

.button, .button--caps, .button--block, .button--forward, .button--back, .button--groove, .button--wider, .button--wide, .button--pill, .button--hollow, .button--hollow-thicker, .button--hollow-thick, .button--larger, .button--large, .button--smaller, .button--small, .button--white, .button--black, .button--deep-purple, .button--solid {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 0.75em 1.3em;
  background-color: var(--button-color, #ffd939);
  color: var(--button-text-color, black);
  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
  .button, .button--caps, .button--block, .button--forward, .button--back, .button--groove, .button--wider, .button--wide, .button--pill, .button--hollow, .button--hollow-thicker, .button--hollow-thick, .button--larger, .button--large, .button--smaller, .button--small, .button--white, .button--black, .button--deep-purple, .button--solid {
    text-align: center;
    display: flex;
  }
}
.button:hover, .button--caps:hover, .button--block:hover, .button--forward:hover, .button--back:hover, .button--groove:hover, .button--wider:hover, .button--wide:hover, .button--pill:hover, .button--hollow:hover, .button--hollow-thicker:hover, .button--hollow-thick:hover, .button--larger:hover, .button--large:hover, .button--smaller:hover, .button--small:hover, .button--white:hover, .button--black:hover, .button--deep-purple:hover, .button:focus-visible, .button--caps:focus-visible, .button--block:focus-visible, .button--forward:focus-visible, .button--back:focus-visible, .button--groove:focus-visible, .button--wider:focus-visible, .button--wide:focus-visible, .button--pill:focus-visible, .button--hollow:focus-visible, .button--hollow-thicker:focus-visible, .button--hollow-thick:focus-visible, .button--larger:focus-visible, .button--large:focus-visible, .button--smaller:focus-visible, .button--small:focus-visible, .button--white:focus-visible, .button--black:focus-visible, .button--deep-purple:focus-visible, .button--solid:hover, .button--solid:focus-visible {
  --button-color: var(--button-color-focus, rgb(255, 220.8, 76.8));
  color: var(--button-text-color, black);
}
.button:active, .button--caps:active, .button--block:active, .button--forward:active, .button--back:active, .button--groove:active, .button--wider:active, .button--wide:active, .button--pill:active, .button--hollow:active, .button--hollow-thicker:active, .button--hollow-thick:active, .button--larger:active, .button--large:active, .button--smaller:active, .button--small:active, .button--white:active, .button--black:active, .button--deep-purple:active, .button--solid:active {
  --button-color: var(--button-color-focus, rgb(255, 224.6, 96.6));
  color: var(--button-text-color, black);
  transform: scale(0.98);
}
.button:disabled, .button--caps:disabled, .button--block:disabled, .button--forward:disabled, .button--back:disabled, .button--groove:disabled, .button--wider:disabled, .button--wide:disabled, .button--pill:disabled, .button--hollow:disabled, .button--hollow-thicker:disabled, .button--hollow-thick:disabled, .button--larger:disabled, .button--large:disabled, .button--smaller:disabled, .button--small:disabled, .button--white:disabled, .button--black:disabled, .button--deep-purple:disabled, .button--solid:disabled {
  background-color: #cccccc;
}

.button--deep-purple {
  --button-color: #290186;
  --button-color-opposite: white;
}
.button--deep-purple:hover:not(:disabled), .button--deep-purple:focus-visible {
  --button-color: var(--button-color-focus, rgb(52.3379699248, 1.15, 171.35));
}

.button--black {
  --button-color: #222222;
  --button-color-opposite: white;
}
.button--black:hover:not(:disabled), .button--black:focus-visible {
  --button-color: var(--button-color-focus, #222222);
}

.button--white {
  --button-color: white;
  --button-color-opposite: #222222;
}
.button--white:hover:not(:disabled), .button--white:focus-visible {
  --button-color: var(--button-color-focus, white);
}

:is(.button--white-text, .spec.bump.bump.bump) {
  color: white;
}

:is(.button--black-text, .spec.bump.bump.bump) {
  color: #222222;
}

.button--small {
  font-size: small;
}

.button--smaller {
  font-size: 70%;
}

.button--large {
  font-size: large;
}

.button--larger {
  font-size: larger;
}

.button--hollow, .button--hollow-thicker, .button--hollow-thick {
  background-color: transparent;
  border: 1px solid var(--button-color, #ffd939);
  padding-block: calc(0.75em - 1px);
}
.button--hollow:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump), .button--hollow-thicker:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump), .button--hollow-thick:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump) {
  color: var(--button-color, #ffd939);
}
.button--hollow:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump):hover:not(:disabled), .button--hollow-thicker:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump):hover:not(:disabled), .button--hollow-thick:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump):hover:not(:disabled), .button--hollow:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump):focus-visible, .button--hollow-thicker:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump):focus-visible, .button--hollow-thick:is(.button--hollow, .button--hollow-thicker, .button--hollow-thick, .spec.bump):focus-visible {
  color: var(--button-color-opposite, black);
}
.button--hollow:hover, .button--hollow-thicker:hover, .button--hollow-thick:hover, .button--hollow:focus-visible, .button--hollow-thicker:focus-visible, .button--hollow-thick:focus-visible {
  background-color: var(--button-color, #ffd939) !important;
}
.button--hollow:disabled, .button--hollow-thicker:disabled, .button--hollow-thick:disabled {
  border-color: #cccccc !important;
  color: #cccccc !important;
  background-color: rgba(204, 204, 204, 0.25) !important;
}

.button--hollow-thick {
  border-width: 2px;
  padding-block: calc(0.75em - 2px);
}

.button--hollow-thicker {
  border-width: 3px;
  padding-block: calc(0.75em - 3px);
}

.button--pill {
  border-radius: 4em;
}

.button--wide {
  padding-inline: 3em;
}

.button--wider {
  padding-inline: 5em;
}

.button--groove:is(.button--groove, .spec.bump.bump.bump) {
  position: relative;
}
.button--groove:focus-visible {
  outline: 1px solid white;
}

.button--soft-icon {
  position: relative;
}
.button--soft-icon i.fa {
  display: block;
  position: absolute;
  right: 1.5em;
  top: calc(50% - 1em);
  width: 2em;
  height: 2em;
  font-size: 0.6em;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1em;
  line-height: 2em;
  text-align: center;
  text-indent: 1px;
  vertical-align: middle;
  color: rgba(0, 0, 0, 0.4);
}

.button--back {
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 52%, 0 48%);
  padding-left: 1.75em;
}

.button--forward {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 48%, 100% 52%, calc(100% - 18px) 100%, 0 100%);
  padding-right: 1.75em;
}

.button--block {
  display: flex;
}
.button--block:is(button, input) {
  width: 100%;
}

.button--glow:hover:not(:disabled), .controller-sessions .login-form .actions input[type=submit]:hover:not(:disabled), .controller-sessions .login-link-sent .actions input[type=submit]:hover:not(:disabled), .controller-registrations .login-form .actions input[type=submit]:hover:not(:disabled), .controller-registrations .login-link-sent .actions input[type=submit]:hover:not(:disabled), .button.button--glow:hover:not(:disabled) {
  box-shadow: 0 0 3rem 0 var(--button-color, #ffd939);
}

.button--caps {
  text-transform: uppercase;
}

.glass-page {
  --bg-blurred: linear-gradient(to bottom, #343755, #583552);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
  border-radius: 10px;
  padding-top: 3rem;
}
.glass-page :where(section:not(.form-section)) {
  margin-top: 0;
  margin-bottom: 0;
}

.glass-page-with-bottom-whitespace {
  padding-bottom: 3rem;
}

.glass-page-masked, .glass-page-gutter, .glass-page-fade-bottom {
  -webkit-mask-image: var(--top-right-mask, linear-gradient(red, red)), linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red), var(--bottom-mask, linear-gradient(red, red)), var(--bottom-mask, linear-gradient(red, red)), var(--bottom-mask, linear-gradient(red, red));
          mask-image: var(--top-right-mask, linear-gradient(red, red)), linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red), var(--bottom-mask, linear-gradient(red, red)), var(--bottom-mask, linear-gradient(red, red)), var(--bottom-mask, linear-gradient(red, red));
  -webkit-mask-position: top right, top left, left var(--gutter-height, var(--gutter-width, 300px)), 1px calc(100% - 1em), left bottom, right bottom, 1px bottom;
          mask-position: top right, top left, left var(--gutter-height, var(--gutter-width, 300px)), 1px calc(100% - 1em), left bottom, right bottom, 1px bottom;
  -webkit-mask-size: var(--gutter-width, 300px) var(--gutter-height, var(--gutter-width, 300px)), calc(100% - var(--gutter-width, 300px) + 0.5px) calc(var(--gutter-height, var(--gutter-width, 300px)) + 1px), 100% calc(100% - var(--gutter-height, var(--gutter-width, 300px)) - var(--fade-height, 20vw) + 1px), calc(100% - 2px) var(--fade-height, 20vw), 1px var(--fade-height, 20vw), 1px var(--fade-height, 20vw), calc(100% - 2px) calc(1em + 1px);
          mask-size: var(--gutter-width, 300px) var(--gutter-height, var(--gutter-width, 300px)), calc(100% - var(--gutter-width, 300px) + 0.5px) calc(var(--gutter-height, var(--gutter-width, 300px)) + 1px), 100% calc(100% - var(--gutter-height, var(--gutter-width, 300px)) - var(--fade-height, 20vw) + 1px), calc(100% - 2px) var(--fade-height, 20vw), 1px var(--fade-height, 20vw), 1px var(--fade-height, 20vw), calc(100% - 2px) calc(1em + 1px);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.glass-page-fade-bottom {
  --bottom-mask: linear-gradient(to bottom, red, transparent);
  border-bottom: none;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

@media screen and (min-width: 1025px) {
  .glass-page-gutter {
    --top-right-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5.17e-4%200-5.17e-4%205.17e-4v0.146c5.41e-4%20-0.0422%200.00875-0.0869%200.0264-0.133%200.0015-0.00399-4.48e-4%20-0.012-0.00878-0.0129zm0.101%200c-0.00433%200.00204-0.00967%200.00699-0.0119%200.0119-0.117%200.259%200.0944%200.393%200.288%200.489%200.221%200.109%200.447%200.242%200.595%200.389%200.0099%200.0097%200.0259%200.00316%200.0274-0.0103v-0.87952zm-0.101%200.158v0.842l5.17e-4%205.17e-4h0.999c-4.95e-5%20-5.15e-5%205.12e-5%20-4.64e-4%200-5.17e-4%20-0.0102-0.0106-0.0532-0.0511-0.0672-0.0656-0.14-0.138-0.362-0.271-0.58-0.378-0.1-0.049-0.209-0.109-0.282-0.201-0.0424-0.0537-0.0692-0.121-0.0708-0.197z%22%2F%3E%3C%2Fsvg%3E");
  }
}

.glass-page-section, .glass-page-section-inner {
  border: 1px solid var(--border-color);
  padding: 0.9rem;
}

.glass-page-section {
  background-color: hsla(var(--base-color-h), var(--base-color-s), calc(var(--base-color-l) * 0.8), 0.5);
  position: relative;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
  isolation: isolate;
}

.glass-page-section-inner {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 0.3rem;
}

.glass-page-section-header {
  position: absolute;
  top: 0.45rem;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 9;
  border-radius: 0.2rem;
  padding: 0.5rem 2rem;
  font-weight: bold;
  font-size: larger;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.controller-sessions, .controller-registrations {
  position: relative;
  overflow: hidden;
}
.controller-sessions::before, .controller-registrations::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #ffd939 0%, rgba(227, 116, 255, 0.85) 25%, rgba(41, 1, 134, 0.9) 50%, rgba(40, 206, 117, 0.85) 75%, rgba(208, 231, 160, 0.9) 100%);
  animation: gradient 30s ease infinite;
  background-size: 400% 400%;
  z-index: -1;
}
.controller-sessions::after, .controller-registrations::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(34, 34, 34, 0.3) 100%);
  z-index: -1;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.controller-sessions main, .controller-registrations main {
  margin-top: 64px;
  min-height: 50vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.controller-sessions .login-form, .controller-registrations .login-form {
  max-width: 400px;
}
.controller-sessions .login-link-sent, .controller-registrations .login-link-sent {
  max-width: 600px;
}
.controller-sessions .login-form, .controller-sessions .login-link-sent, .controller-registrations .login-form, .controller-registrations .login-link-sent {
  padding: 3rem 2.5rem;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(127, 127, 127, 0.8));
  background-color: rgba(34, 34, 34, 0.25);
  box-shadow: 0 8px 32px rgba(34, 34, 34, 0.4), 0 0 0 1px rgba(254, 254, 254, 0.1) inset, 0 0 64px rgba(124, 189, 207, 0.1) inset;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.controller-sessions .login-form a, .controller-sessions .login-link-sent a, .controller-registrations .login-form a, .controller-registrations .login-link-sent a {
  color: #ffd939;
}
.controller-sessions .login-form h2, .controller-sessions .login-link-sent h2, .controller-registrations .login-form h2, .controller-registrations .login-link-sent h2 {
  margin-bottom: 2rem;
  font-size: 1.75rem;
  color: #fefefe;
  text-shadow: 0 2px 4px rgba(34, 34, 34, 0.2);
}
.controller-sessions .login-form .field, .controller-sessions .login-link-sent .field, .controller-registrations .login-form .field, .controller-registrations .login-link-sent .field {
  margin-bottom: 1.5rem;
}
.controller-sessions .login-form .field label, .controller-sessions .login-link-sent .field label, .controller-registrations .login-form .field label, .controller-registrations .login-link-sent .field label {
  display: none;
}
.controller-sessions .login-form .field input[type=email],
.controller-sessions .login-form .field input[type=password], .controller-sessions .login-link-sent .field input[type=email],
.controller-sessions .login-link-sent .field input[type=password], .controller-registrations .login-form .field input[type=email],
.controller-registrations .login-form .field input[type=password], .controller-registrations .login-link-sent .field input[type=email],
.controller-registrations .login-link-sent .field input[type=password] {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 217, 57, 0.4);
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(34, 34, 34, 0.2);
  color: #fefefe;
  transition: all 0.2s ease;
  margin: 0;
}
.controller-sessions .login-form .field input[type=email]::-moz-placeholder, .controller-sessions .login-form .field input[type=password]::-moz-placeholder, .controller-sessions .login-link-sent .field input[type=email]::-moz-placeholder, .controller-sessions .login-link-sent .field input[type=password]::-moz-placeholder, .controller-registrations .login-form .field input[type=email]::-moz-placeholder, .controller-registrations .login-form .field input[type=password]::-moz-placeholder, .controller-registrations .login-link-sent .field input[type=email]::-moz-placeholder, .controller-registrations .login-link-sent .field input[type=password]::-moz-placeholder {
  color: rgba(254, 254, 254, 0.6);
}
.controller-sessions .login-form .field input[type=email]::placeholder,
.controller-sessions .login-form .field input[type=password]::placeholder, .controller-sessions .login-link-sent .field input[type=email]::placeholder,
.controller-sessions .login-link-sent .field input[type=password]::placeholder, .controller-registrations .login-form .field input[type=email]::placeholder,
.controller-registrations .login-form .field input[type=password]::placeholder, .controller-registrations .login-link-sent .field input[type=email]::placeholder,
.controller-registrations .login-link-sent .field input[type=password]::placeholder {
  color: rgba(254, 254, 254, 0.6);
}
.controller-sessions .login-form .field input[type=email]:focus,
.controller-sessions .login-form .field input[type=password]:focus, .controller-sessions .login-link-sent .field input[type=email]:focus,
.controller-sessions .login-link-sent .field input[type=password]:focus, .controller-registrations .login-form .field input[type=email]:focus,
.controller-registrations .login-form .field input[type=password]:focus, .controller-registrations .login-link-sent .field input[type=email]:focus,
.controller-registrations .login-link-sent .field input[type=password]:focus {
  outline: none;
  border-color: #ffd939;
  box-shadow: 0 0 0 3px rgba(255, 217, 57, 0.2);
  background: rgba(34, 34, 34, 0.3);
}
.controller-sessions .login-form .field.remember-me, .controller-sessions .login-link-sent .field.remember-me, .controller-registrations .login-form .field.remember-me, .controller-registrations .login-link-sent .field.remember-me {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  margin-top: -0.5rem;
}
.controller-sessions .login-form .field.remember-me label, .controller-sessions .login-link-sent .field.remember-me label, .controller-registrations .login-form .field.remember-me label, .controller-registrations .login-link-sent .field.remember-me label {
  display: block;
  color: #eeeeee;
  font-size: 0.875rem;
  margin: 0 0 0 0.5rem;
  text-shadow: 0 1px 2px rgba(34, 34, 34, 0.2);
  cursor: pointer;
}
.controller-sessions .login-form .field.remember-me input[type=checkbox], .controller-sessions .login-link-sent .field.remember-me input[type=checkbox], .controller-registrations .login-form .field.remember-me input[type=checkbox], .controller-registrations .login-link-sent .field.remember-me input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}
.controller-sessions .login-form .actions, .controller-sessions .login-link-sent .actions, .controller-registrations .login-form .actions, .controller-registrations .login-link-sent .actions {
  margin-top: 2rem;
}
.controller-sessions .login-form .actions input[type=submit], .controller-sessions .login-link-sent .actions input[type=submit], .controller-registrations .login-form .actions input[type=submit], .controller-registrations .login-link-sent .actions input[type=submit] {
  width: 100%;
  padding: 1rem;
  background-color: #ffd939;
  color: #222222;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  --button-color: #ffd939;
  margin: 0;
}
.controller-sessions .login-form .actions input[type=submit]:hover, .controller-sessions .login-link-sent .actions input[type=submit]:hover, .controller-registrations .login-form .actions input[type=submit]:hover, .controller-registrations .login-link-sent .actions input[type=submit]:hover {
  background-color: #826B09;
  color: #fefefe;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 34, 34, 0.2);
}
.controller-sessions .login-form .links, .controller-sessions .login-link-sent .links, .controller-registrations .login-form .links, .controller-registrations .login-link-sent .links {
  margin-top: 2rem;
  text-align: center;
}
.controller-sessions .login-form .links a, .controller-sessions .login-link-sent .links a, .controller-registrations .login-form .links a, .controller-registrations .login-link-sent .links a {
  color: #ffd939;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
  text-shadow: 0 1px 2px rgba(34, 34, 34, 0.3);
}
.controller-sessions .login-form .links a:hover, .controller-sessions .login-link-sent .links a:hover, .controller-registrations .login-form .links a:hover, .controller-registrations .login-link-sent .links a:hover {
  color: rgb(255, 231.6818181818, 133.5);
  text-decoration: none;
}
.controller-sessions .login-form .flash, .controller-sessions .login-link-sent .flash, .controller-registrations .login-form .flash, .controller-registrations .login-link-sent .flash {
  margin-top: 1rem;
  color: #fefefe;
  font-size: 1.25rem;
  text-shadow: 0 1px 2px rgba(34, 34, 34, 0.3);
}
.controller-sessions .login-form p, .controller-sessions .login-link-sent p, .controller-registrations .login-form p, .controller-registrations .login-link-sent p {
  margin-top: 1rem;
  color: #fefefe;
  font-size: 1.25rem;
  text-shadow: 0 1px 2px rgba(34, 34, 34, 0.3);
}