:root {
  --bg: #f8fafc;
  --sf: #fff;
  --tx: #0f172a;
  --mu: #64748b;
  --bd: #e2e8f0;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1020;
    --sf: #141a2e;
    --tx: #e5e7eb;
    --mu: #94a3b8;
    --bd: #263150;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1020;
  --sf: #141a2e;
  --tx: #e5e7eb;
  --mu: #94a3b8;
  --bd: #263150;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
body {
  background: var(--bg);
  color: var(--tx);
  font-family: Inter, system-ui, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--sf);
}
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 1rem;
}
.mu {
  color: var(--mu);
}
.in {
  width: 100%;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
}
.nav a.on {
  background: rgba(255, 255, 255, 0.2);
}
.ddm {
  display: none;
}
.dd:hover .ddm {
  display: block;
}
@keyframes ts {
  0%,
  22% {
    transform: translateX(0);
  }
  25%,
  47% {
    transform: translateX(-25%);
  }
  50%,
  72% {
    transform: translateX(-50%);
  }
  75%,
  97% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
.pz:hover {
  animation-play-state: paused;
}
.sel {
  outline: 2px solid #1673e6;
  outline-offset: 2px;
}
.nsb {
  scrollbar-width: none;
}
.nsb::-webkit-scrollbar {
  display: none;
}
@keyframes sl {
  0%,
  28% {
    transform: translateX(0);
  }
  33%,
  61% {
    transform: translateX(-33.333%);
  }
  66%,
  94% {
    transform: translateX(-66.666%);
  }
  100% {
    transform: translateX(0);
  }
}

.hd{width:.5rem;height:.5rem;border-radius:9999px;background:rgba(255,255,255,.5);animation:dt 15s infinite}
@keyframes dt{0%,31%{background:#fff;width:1.5rem}34%,100%{background:rgba(255,255,255,.5);width:.5rem}}