body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: #F5F5F7;
  color: #1D1D1F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.apple-nav {
  background: rgba(251, 251, 253, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.apple-card {
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.apple-dark-card {
  background: #1D1D1F;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-dark-card:hover {
  transform: translateY(-4px);
}

.hero-title {
  letter-spacing: -0.025em;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #D2D2D7;
  border-radius: 999px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1D1D1F;
  cursor: pointer;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}