:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #111;
}

* { box-sizing: border-box; }

html, body, .page { width: 100%; min-height: 100%; margin: 0; }

body { overflow: hidden; overscroll-behavior: none; background: #111; }

.page, .carousel, .slides { height: 100vh; height: 100dvh; }
.page { max-width: 500px; margin-inline: auto; }

.carousel { position: relative; overflow: hidden; background: #111; touch-action: pan-y; }

.slides { display: flex; transition: transform 420ms cubic-bezier(.22, .61, .36, 1); }

.slide {
  flex: 0 0 100%;
  appearance: none;
  position: relative;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
}

.slide:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

.bottom-nav {
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100vw, 500px);
  height: calc(84px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  background-image: url("assets/tabbar-bg.svg"), linear-gradient(to bottom, transparent 84px, #fff 84px);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 84px, 100% 100%;
}

.nav-item {
  position: relative;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  min-width: 0;
  height: 68px;
  padding: 0 0 10px;
  border: 0;
  color: #999;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.nav-item img { width: 32px; height: 32px; margin-bottom: 6px; object-fit: contain; }
.nav-item--active { color: #222; }
.nav-item--center { height: 84px; padding-bottom: 10px; }
.nav-item--center img { position: absolute; top: -3px; width: 71px; height: 68px; margin: 0; }
.nav-item--center span { position: relative; z-index: 1; }
.nav-item:focus-visible { outline: 3px solid #65a6ff; outline-offset: -5px; }

.confirm-button:focus-visible { outline: 3px solid #65a6ff; outline-offset: 3px; }

.contact-dialog { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; color: #171717; background: rgb(0 0 0 / 58%); }
.contact-dialog[hidden] { display: none; }
.dialog-content { width: min(100%, 360px); padding: 28px 24px 22px; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px rgb(0 0 0 / 45%); text-align: center; }
.dialog-content h1 { margin: 0; font-size: 20px; line-height: 1.4; }
.confirm-button { width: 100%; min-height: 46px; margin-top: 22px; border: 0; border-radius: 10px; color: #fff; background: #171717; font: inherit; font-weight: 600; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
}