/* 全局样式 */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* UI风格变体 */

.ui-style-0 {
  --primary-hue: 0;
}
.ui-style-0 nav .logo,
.ui-style-0 a:hover,
.ui-style-0 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-1 {
  --primary-hue: 22;
}
.ui-style-1 nav .logo,
.ui-style-1 a:hover,
.ui-style-1 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-2 {
  --primary-hue: 44;
}
.ui-style-2 nav .logo,
.ui-style-2 a:hover,
.ui-style-2 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-3 {
  --primary-hue: 66;
}
.ui-style-3 nav .logo,
.ui-style-3 a:hover,
.ui-style-3 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-4 {
  --primary-hue: 88;
}
.ui-style-4 nav .logo,
.ui-style-4 a:hover,
.ui-style-4 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-5 {
  --primary-hue: 110;
}
.ui-style-5 nav .logo,
.ui-style-5 a:hover,
.ui-style-5 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-6 {
  --primary-hue: 132;
}
.ui-style-6 nav .logo,
.ui-style-6 a:hover,
.ui-style-6 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-7 {
  --primary-hue: 154;
}
.ui-style-7 nav .logo,
.ui-style-7 a:hover,
.ui-style-7 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-8 {
  --primary-hue: 176;
}
.ui-style-8 nav .logo,
.ui-style-8 a:hover,
.ui-style-8 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-9 {
  --primary-hue: 198;
}
.ui-style-9 nav .logo,
.ui-style-9 a:hover,
.ui-style-9 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-10 {
  --primary-hue: 220;
}
.ui-style-10 nav .logo,
.ui-style-10 a:hover,
.ui-style-10 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-11 {
  --primary-hue: 242;
}
.ui-style-11 nav .logo,
.ui-style-11 a:hover,
.ui-style-11 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-12 {
  --primary-hue: 264;
}
.ui-style-12 nav .logo,
.ui-style-12 a:hover,
.ui-style-12 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-13 {
  --primary-hue: 286;
}
.ui-style-13 nav .logo,
.ui-style-13 a:hover,
.ui-style-13 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-14 {
  --primary-hue: 308;
}
.ui-style-14 nav .logo,
.ui-style-14 a:hover,
.ui-style-14 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}

.ui-style-15 {
  --primary-hue: 330;
}
.ui-style-15 nav .logo,
.ui-style-15 a:hover,
.ui-style-15 h1 {
  color: hsl(var(--primary-hue), 70%, 50%);
}


/* 响应式优化 */
@media (max-width: 768px) {
  main {
    padding: 20px 10px !important;
  }

  section {
    padding: 25px 15px !important;
  }

  h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

article, section {
  animation: fadeIn 0.6s ease-out;
}

/* 链接hover效果 */
a {
  transition: all 0.3s ease;
}

/* 卡片hover效果 */
div[onmouseover] {
  cursor: pointer;
}