:root {
  --accent-gradient: linear-gradient(
    120deg, 
    #6366F1, 
    #8B5CF6 30%, 
    #EC4899 60%
  );
}

html {
  margin: auto;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
  background-color: #000;
  color: #fff;
  display: block;
}

body {
  max-width: min(80ch, 100% - 3rem);
  margin: 0 auto;
}

.name {
  font-size: 3rem;
  font-weight: 800;
  margin: 0;
}

.text-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300%;
  background-position: 0%;
  animation: backgroundSizeAnimation 15s ease-in-out infinite;
  background-image: var(--accent-gradient);
}

/* ===== 动画定义 ===== */
@keyframes backgroundSizeAnimation {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sparkle {
  0%   { opacity: 1; }
  50%  { opacity: 0.8; text-shadow: 0 0 15px rgba(255, 0, 0, 0.5); }
  100% { opacity: 1; }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes wave {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes glow {
  0%   { text-shadow: 0 0 10px rgba(222, 41, 16, 0.3); }
  50%  { text-shadow: 0 0 20px rgba(222, 41, 16, 0.5); }
  100% { text-shadow: 0 0 10px rgba(222, 41, 16, 0.3); }
}

@keyframes shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== 通用样式 ===== */
.instructions {
  line-height: 1.6;
  margin: 1rem 0;
  border-radius: .6rem;
}

.font-normal {
  font-weight: 400;
}

.text-current {
  color: currentColor;
}

.decoration-none {
  text-decoration: none;
}

/* ===== 音乐播放器样式 ===== */
.aplayer .aplayer-title {
  color: #000;
}

.aplayer .aplayer-list-title {
  color: #000;
}

/* ===== 加载遮罩样式 ===== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  color: white;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 20px;
}

.loading-text {
  font-size: 18px;
}

/* ===== Emoji 样式保护 ===== */
.instructions::before,
.instructions::after {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  display: inline-block;
}

.instructions span.emoji {
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: initial !important;
  text-shadow: none !important;
  animation: none !important;
}