:root {
  --bg: #0a0a0a;
  --bg-subtle: #111;
  --text: #f2f0eb;
  --text-secondary: #c8c4bc;
  --muted: #8a8580;
  --accent: #d4a855;
  --accent-dim: #b8923f;
  --accent-soft: rgba(212,168,85,.12);
  --accent-glow: rgba(212,168,85,.35);
  --green: #6fcf7c;
  --green-soft: rgba(111,207,124,.1);
  --red: #e06060;
  --red-soft: rgba(224,96,96,.1);
  --card: rgba(255,255,255,.035);
  --card-hover: rgba(255,255,255,.055);
  --border: rgba(255,255,255,.07);
  --border-accent: rgba(212,168,85,.25);
  --font: "Inter", "SF Pro Display", -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; overflow: hidden }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
}
h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
h3 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
}

.highlight { color: var(--accent) }
.highlight-green { color: var(--green) }
.highlight-red { color: var(--red) }
.text-muted { color: var(--muted) }
.text-secondary { color: var(--text-secondary) }

.subtitle {
  font-size: clamp(16px, 1.8vw, 21px);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 720px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card-accent {
  border-color: var(--border-accent);
  background: linear-gradient(135deg, rgba(212,168,85,.06), rgba(212,168,85,.01));
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-accent { background: var(--accent-soft); color: var(--accent) }
.tag-muted { background: rgba(255,255,255,.05); color: var(--muted) }
.tag-green { background: var(--green-soft); color: var(--green) }
.tag-red { background: var(--red-soft); color: var(--red) }

/* Fade-in animation for slide content */
.slide-content > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.slide.active .slide-content > * {
  opacity: 1;
  transform: translateY(0);
}
.slide.active .slide-content > *:nth-child(1) { transition-delay: .05s }
.slide.active .slide-content > *:nth-child(2) { transition-delay: .12s }
.slide.active .slide-content > *:nth-child(3) { transition-delay: .19s }
.slide.active .slide-content > *:nth-child(4) { transition-delay: .26s }
.slide.active .slide-content > *:nth-child(5) { transition-delay: .33s }
.slide.active .slide-content > *:nth-child(6) { transition-delay: .40s }
.slide.active .slide-content > *:nth-child(7) { transition-delay: .47s }

@media (max-width: 768px) {
  :root { --radius: 10px; --radius-lg: 14px }
}