* {
  box-sizing: border-box;
}

:root {
  --cream: #f2e3b3;
  --gold: #ffe9a8;
  --gold-line: #e2bc667a;
  --gold-line-soft: #e2bc664f;
  --teal-glow: #7fe0cd;
}

body {
  min-height: 100vh;
  color: var(--cream);
  background: radial-gradient(90% 60% at 18% 108%, #18746459, #0000 70%), radial-gradient(80% 55% at 85% 112%, #14685c4d, #0000 70%), radial-gradient(120% 120% at 50% 0, #0f7f74 0%, #0a2620 70%);
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 40px 16px;
  font: 16px / 1.5 Segoe UI, system-ui, sans-serif;
  display: flex;
  position: relative;
}

body:before {
  content: "";
  pointer-events: none;
  border: 1px solid var(--gold-line);
  border-radius: 17px;
  position: absolute;
  inset: 14px;
  box-shadow: 0 0 0 1px #00000073, inset 0 0 0 4px #e2bc660b, inset 0 0 36px #0000002e;
}

body:after {
  content: "";
  pointer-events: none;
  border: 1px solid #e2bc6621;
  border-radius: 12px;
  position: absolute;
  inset: 19px;
}

.card {
  border: 1px solid var(--gold-line-soft);
  background: linear-gradient(#38695638, #081d1880 46%), #091f1aed;
  border-radius: 16px;
  width: min(420px, 92vw);
  padding: 30px 32px 26px;
  animation: .5s cubic-bezier(.2, .85, .25, 1.12) both card-in;
  position: relative;
  box-shadow: 0 0 0 1px #0000006b, 0 18px 50px #00000059, inset 0 1px #ffffff12, inset 0 -6px 16px #00000024;
}

.card:before {
  content: "";
  pointer-events: none;
  border: 1px solid #fff3c90d;
  border-radius: 12px;
  position: absolute;
  inset: 4px;
}

.card.wide {
  width: min(520px, 92vw);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

h1 {
  color: var(--gold);
  letter-spacing: .4px;
  margin: 0 0 4px;
  font-size: 24px;
}

p.sub {
  opacity: .7;
  margin: 0 0 20px;
  font-size: 14px;
}

.logo {
  letter-spacing: 7px;
  text-indent: 7px;
  color: var(--gold);
  background: linear-gradient(#fff3c9 8%, #ffe9a8 45%, #d9a94f 92%);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px #00000073);
  -webkit-background-clip: text;
  background-clip: text;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto 16px;
  font-size: 28px;
  font-weight: 700;
  display: flex;
}

.logo:before, .logo:after {
  content: "";
  background: linear-gradient(90deg, #0000, #e2bc668c);
  flex: 0 0 34px;
  width: 34px;
  height: 1px;
}

.logo:after {
  transform: scaleX(-1);
}

label {
  opacity: .85;
  letter-spacing: .3px;
  margin: 14px 0 6px;
  font-size: 13px;
  display: block;
}

input {
  width: 100%;
  color: inherit;
  font: inherit;
  caret-color: var(--gold);
  background: #0c241ed9;
  border: 1px solid #ffe9a84d;
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

input:focus {
  background: #102e26e6;
  border-color: #f4cf74d1;
  outline: none;
  box-shadow: 0 0 0 3px #e2bc661f, 0 0 14px #e2bc661a;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  flex: none;
  padding: 0;
}

p.small > label {
  margin: 0;
}

button.primary, .btn {
  text-align: center;
  border: 1px solid var(--gold-line-soft);
  cursor: pointer;
  width: 100%;
  color: var(--cream);
  font: inherit;
  letter-spacing: .3px;
  background: linear-gradient(#3d8b68e0, #1f634ceb);
  border-radius: 10px;
  margin-top: 20px;
  padding: 12px 0;
  font-weight: 600;
  transition: transform .18s cubic-bezier(.2, .8, .25, 1.2), border-color .18s, box-shadow .18s, background .18s, color .18s;
  display: block;
  position: relative;
  overflow: hidden;
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 1px #0000006b, 0 5px 14px #00000038, inset 0 1px #ffffff1a;
}

button.primary:after, .btn:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #fff1c024, #0000);
  width: 25%;
  transition: left .42s;
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -36%;
  transform: skewX(-18deg);
}

button.primary:hover, button.primary:focus-visible, a.btn:hover, a.btn:focus-visible {
  color: #fff0bd;
  background: linear-gradient(#4ba47bf2, #267457f5);
  border-color: #f4cf74d1;
  outline: none;
  text-decoration: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px #0000006b, 0 7px 18px #00000052, 0 0 14px #e2bc662b, inset 0 1px #ffffff24;
}

button.primary:hover:after, button.primary:focus-visible:after, a.btn:hover:after, a.btn:focus-visible:after {
  left: 112%;
}

button.primary:active, a.btn:active {
  transition-duration: 60ms;
  transform: translateY(0) scale(.985);
}

button.primary:disabled {
  opacity: .5;
  cursor: default;
  background: linear-gradient(#2e5c4899, #184234b3);
  transform: none;
}

button.primary:disabled:after {
  display: none;
}

.btn.gold {
  color: #fff7dc;
  background: linear-gradient(#c49836eb, #8a6b1ff2);
  border-color: #ffe08a8c;
  font-weight: 700;
}

a.btn.gold:hover, a.btn.gold:focus-visible {
  background: linear-gradient(#dbac42f5, #a07f27f7);
  box-shadow: 0 0 0 1px #0000006b, 0 7px 18px #00000052, 0 0 18px #ffd66a47, inset 0 1px #fff3;
}

a {
  color: var(--teal-glow);
  text-decoration: none;
  transition: color .15s;
}

a:hover {
  color: #a5f0e0;
  text-decoration: underline;
}

.links {
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  display: flex;
}

.msg {
  border-radius: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 14px;
  display: none;
}

.msg.err, .msg.ok {
  animation: .3s cubic-bezier(.2, .85, .25, 1.1) both msg-in;
  display: block;
}

.msg.err {
  background: #96282859;
  border: 1px solid #ff787880;
  animation: .3s cubic-bezier(.2, .85, .25, 1.1) both msg-in, .4s 50ms msg-shake;
}

.msg.ok {
  background: #2b6d5266;
  border: 1px solid #7fe0cd80;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes msg-shake {
  20% {
    transform: translateX(-4px);
  }

  45% {
    transform: translateX(3px);
  }

  70% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

.stat {
  border-bottom: 1px solid #ffe9a81f;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 15px;
  display: flex;
}

.stat b {
  color: var(--gold);
}

.bar {
  background: #ffe9a81f;
  border-radius: 6px;
  height: 10px;
  margin: 8px 0 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #00000059;
}

.bar > div {
  background: linear-gradient(90deg, #2fae99, #3bd2ba);
  border-radius: 6px;
  height: 100%;
  transition: width .6s cubic-bezier(.2, .8, .3, 1);
  box-shadow: 0 0 8px #3bd2ba66;
}

.actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

.actions form, .actions a.btn, .actions span.btn {
  flex: 160px;
  margin-top: 0;
}

.actions p.small {
  flex-basis: 100%;
}

span.btn.soon {
  opacity: .45;
  cursor: default;
  transform: none;
}

span.btn.soon:after {
  display: none;
}

.small {
  opacity: .65;
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}

code.devcode {
  text-align: center;
  letter-spacing: 6px;
  text-indent: 6px;
  color: var(--gold);
  border: 1px solid var(--gold-line-soft);
  background: linear-gradient(#38695629, #081d1866), #0d2821e6;
  border-radius: 12px;
  margin: 12px 0;
  padding: 14px 0;
  font-size: 30px;
  font-weight: 700;
  animation: 2.6s ease-in-out infinite code-glow;
  display: block;
  box-shadow: inset 0 1px #ffffff0f, inset 0 -4px 10px #00000029;
}

@keyframes code-glow {
  0%, 100% {
    box-shadow: inset 0 1px #ffffff0f, inset 0 -4px 10px #00000029, 0 0 #ffe9a800;
  }

  50% {
    box-shadow: inset 0 1px #ffffff0f, inset 0 -4px 10px #00000029, 0 0 18px #ffe9a824;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card, .msg.err, .msg.ok, code.devcode {
    animation: none;
  }

  button.primary, a.btn, button.primary:after, a.btn:after, input, .bar > div {
    transition: none;
  }
}