:root[data-theme="light"], [data-theme="light"] {
  --lightningcss-light: initial;
  color-scheme: light;
  --bg-0: #f7f4ee;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f0eae0;
  --bg-inset: #faf6f0;

  --acc: #b88440;
  --acc-2: #946428;
  --acc-deep: #7a501a;
  --acc-soft: rgba(184, 132, 64, 0.14);
  --acc-glow: rgba(184, 132, 64, 0.25);

  --line: rgba(0, 0, 49, 0.08);
  --line-2: rgba(0, 0, 49, 0.16);

  --t0: #000031;
  --t1: #4a4d6d;
  --t2: #7c809e;

  --ok: #159b66;
  --ok-soft: rgba(21, 155, 102, 0.14);
  --warn: #c2831f;
  --warn-soft: rgba(194, 131, 31, 0.14);
  --bad: #d84555;
  --bad-soft: rgba(216, 69, 85, 0.14);
  --info: #227bd9;
  --info-soft: rgba(34, 123, 217, 0.14);
  --shadow: 0 14px 34px -18px rgba(0, 0, 49, 0.15);
  --shadow-vela: 0 14px 34px -18px rgba(0, 0, 49, 0.15);
  --gold-gradient: linear-gradient(135deg, #f5e7b8 0%, #c39353 50%, #ae8a4c 100%);
  --navy-gradient: linear-gradient(180deg, #000031 0%, #05073a 100%);
}

:root[data-theme=light] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6173' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

input[type=range] {
  appearance: none;
  background: var(--bg-3);
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  width: 100%;
  height: 6px;
}

input[type=range]::-webkit-slider-runnable-track {
  background: 0 0;
  border-radius: 999px;
  height: 6px;
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  background: var(--acc);
  border: 2px solid var(--bg-1);
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  transition: transform .12s;
  box-shadow: 0 2px 6px -1px #0006;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

input[type=range]::-moz-range-track {
  background: var(--bg-3);
  border-radius: 999px;
  height: 6px;
}

input[type=range]::-moz-range-progress {
  background: var(--acc);
  border-radius: 999px;
  height: 6px;
}

input[type=range]::-moz-range-thumb {
  background: var(--acc);
  border: 2px solid var(--bg-1);
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 6px -1px #0006;
}

.vela-page-enter {
  animation: .3s both velaFade;
}

.vela-page-enter>* {
  animation: .5s cubic-bezier(.22, .61, .36, 1) both velaRise;
}

.vela-page-enter>:first-child {
  animation-delay: 30ms;
}

.vela-page-enter>:nth-child(2) {
  animation-delay: 90ms;
}

.vela-page-enter>:nth-child(3) {
  animation-delay: .15s;
}

.vela-page-enter>:nth-child(4) {
  animation-delay: .21s;
}

.vela-page-enter>:nth-child(5) {
  animation-delay: .27s;
}

.vela-page-enter>:nth-child(6) {
  animation-delay: .33s;
}

.vela-page-enter>:nth-child(n+7) {
  animation-delay: .38s;
}

.vela-reveal {
  animation: .9s cubic-bezier(.65, 0, .35, 1) both velaReveal;
}
