:root,
html[data-theme="dark"] {
  --coral-bright: #f5f5f5;
  --coral-mid: #a3a3a3;
  --coral-dark: #0a0a0a;
  --cyan-bright: #d4d4d4;
  --cyan-mid: #a3a3a3;
  --cyan-glow: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(255, 255, 255, 0.28);
  --surface-coral-soft: rgba(255, 255, 255, 0.1);
  --surface-cyan-soft: rgba(255, 255, 255, 0.08);
  --shadow-coral-soft: rgba(255, 255, 255, 0.12);
  --shadow-coral-mid: rgba(255, 255, 255, 0.18);
  --shadow-coral-strong: rgba(255, 255, 255, 0.24);
  --shadow-cyan-soft: rgba(255, 255, 255, 0.1);
  --newsletter-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(10, 15, 26, 0.84) 52%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --press-featured-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(10, 15, 26, 0.72) 100%
  );
  --hero-title-start: #ffffff;
  --hero-title-end: #525252;
  --logo-gradient-start: #ffffff;
  --logo-gradient-end: #737373;
  --logo-glow: rgba(255, 255, 255, 0.22);
  --logo-glow-hover: rgba(255, 255, 255, 0.36);
}

html[data-theme="light"] {
  --bg-deep: #fcfeff;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --coral-bright: #111827;
  --coral-mid: #374151;
  --coral-dark: #000000;
  --cyan-bright: #475569;
  --cyan-mid: #64748b;
  --cyan-glow: rgba(15, 23, 42, 0.12);
  --text-primary: #0b1220;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border-subtle: rgba(15, 23, 42, 0.14);
  --border-accent: rgba(17, 24, 39, 0.24);
  --surface-card: rgba(255, 255, 255, 0.88);
  --surface-card-strong: rgba(255, 255, 255, 0.95);
  --surface-overlay: rgba(15, 23, 42, 0.08);
  --surface-interactive: rgba(15, 23, 42, 0.08);
  --surface-interactive-hover: rgba(15, 23, 42, 0.14);
  --surface-coral-soft: rgba(17, 24, 39, 0.08);
  --surface-cyan-soft: rgba(15, 23, 42, 0.06);
  --surface-inset-highlight: rgba(15, 23, 42, 0.05);
  --newsletter-gradient: linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.06) 0%,
    rgba(255, 255, 255, 0.98) 52%,
    rgba(100, 116, 139, 0.08) 100%
  );
  --press-featured-gradient: linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.07) 0%,
    rgba(255, 255, 255, 0.96) 100%
  );
  --shadow-coral-soft: rgba(17, 24, 39, 0.1);
  --shadow-coral-mid: rgba(17, 24, 39, 0.14);
  --shadow-coral-strong: rgba(17, 24, 39, 0.18);
  --shadow-cyan-soft: rgba(15, 23, 42, 0.1);
  --shadow-github-soft: rgba(11, 18, 32, 0.2);
  --github-hover-color: #0b1220;
  --hero-title-start: #020617;
  --hero-title-end: #64748b;
  --logo-gradient-start: #020617;
  --logo-gradient-end: #111827;
  --logo-glow: rgba(15, 23, 42, 0);
  --logo-glow-hover: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] body {
  background:
    radial-gradient(
      1200px circle at 12% -10%,
      rgba(15, 23, 42, 0.04),
      transparent 58%
    ),
    radial-gradient(
      900px circle at 88% -12%,
      rgba(100, 116, 139, 0.05),
      transparent 56%
    ),
    var(--bg-deep);
}

.stars[data-astro-cid-7jjqptxk] {
  background-image:
    radial-gradient(
      2px 2px at 20px 30px,
      rgba(255, 255, 255, 0.8),
      transparent
    ),
    radial-gradient(
      2px 2px at 40px 70px,
      rgba(255, 255, 255, 0.48),
      transparent
    ),
    radial-gradient(
      1px 1px at 90px 40px,
      rgba(255, 255, 255, 0.58),
      transparent
    ),
    radial-gradient(
      2px 2px at 130px 80px,
      rgba(255, 255, 255, 0.34),
      transparent
    ),
    radial-gradient(
      1px 1px at 160px 120px,
      rgba(255, 255, 255, 0.64),
      transparent
    ),
    radial-gradient(
      2px 2px at 200px 60px,
      rgba(255, 255, 255, 0.38),
      transparent
    ),
    radial-gradient(
      1px 1px at 250px 150px,
      rgba(255, 255, 255, 0.45),
      transparent
    ),
    radial-gradient(
      2px 2px at 300px 40px,
      rgba(255, 255, 255, 0.32),
      transparent
    );
}

html[data-theme="light"] .stars[data-astro-cid-7jjqptxk] {
  background-image:
    radial-gradient(
      2px 2px at 20px 30px,
      rgba(15, 23, 42, 0.12),
      transparent
    ),
    radial-gradient(
      2px 2px at 40px 70px,
      rgba(100, 116, 139, 0.12),
      transparent
    ),
    radial-gradient(
      1px 1px at 90px 40px,
      rgba(15, 23, 42, 0.1),
      transparent
    ),
    radial-gradient(
      2px 2px at 130px 80px,
      rgba(100, 116, 139, 0.1),
      transparent
    ),
    radial-gradient(
      1px 1px at 160px 120px,
      rgba(15, 23, 42, 0.11),
      transparent
    ),
    radial-gradient(
      2px 2px at 200px 60px,
      rgba(100, 116, 139, 0.1),
      transparent
    ),
    radial-gradient(
      1px 1px at 250px 150px,
      rgba(15, 23, 42, 0.09),
      transparent
    ),
    radial-gradient(
      2px 2px at 300px 40px,
      rgba(100, 116, 139, 0.08),
      transparent
    );
  filter: none;
  opacity: 0.24;
}

.nebula[data-astro-cid-7jjqptxk] {
  background:
    radial-gradient(
      ellipse 80% 50% at 20% 20%,
      rgba(255, 255, 255, 0.08),
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 60% at 80% 30%,
      rgba(255, 255, 255, 0.05),
      transparent 50%
    ),
    radial-gradient(
      ellipse 90% 70% at 50% 90%,
      rgba(255, 255, 255, 0.04),
      transparent 50%
    );
}

html[data-theme="light"] .nebula[data-astro-cid-7jjqptxk] {
  background:
    radial-gradient(
      ellipse 80% 50% at 20% 20%,
      rgba(15, 23, 42, 0.035),
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 60% at 80% 30%,
      rgba(100, 116, 139, 0.04),
      transparent 50%
    ),
    radial-gradient(
      ellipse 90% 70% at 50% 90%,
      rgba(15, 23, 42, 0.025),
      transparent 50%
    );
  opacity: 0.42;
}

.article-title[data-astro-cid-7jjqptxk] {
  background: linear-gradient(
    135deg,
    var(--hero-title-start) 0%,
    var(--hero-title-end) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.article-content[data-astro-cid-7jjqptxk] em,
.article-content[data-astro-cid-7jjqptxk] a:hover,
.page-footer[data-astro-cid-7jjqptxk]
  a[data-astro-cid-7jjqptxk]:hover {
  color: var(--text-secondary);
}

.article-content[data-astro-cid-7jjqptxk] blockquote {
  background: var(--surface-coral-soft);
}

.share-hn[data-astro-cid-7jjqptxk] {
  background: var(--surface-interactive);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.share-hn[data-astro-cid-7jjqptxk]:hover {
  background: var(--surface-interactive-hover);
  border-color: var(--text-secondary);
}

html[data-theme="dark"] .cta-btn[data-astro-cid-7jjqptxk] {
  background: linear-gradient(135deg, #f5f5f5 0%, #d4d4d4 100%);
  color: #050810;
}

html[data-theme="light"] .cta-btn[data-astro-cid-7jjqptxk] {
  background: linear-gradient(135deg, #111827 0%, #000000 100%);
  color: #ffffff;
}

.cta-btn[data-astro-cid-7jjqptxk]:hover {
  box-shadow: 0 8px 30px var(--shadow-coral-mid);
}