/* ============================================
   Peijie Liu Portfolio - Butterfly Theme Custom CSS
   Design: Raycast layout (strict) × Cursor full color palette
   Animations & glow effects preserved
   ============================================ */

/* ---- Root Variables ---- */
:root {
  /* === Cursor Full Color Palette === */
  /* Primary */
  --cursor-dark: #26251e;
  --cursor-cream: #f2f1ed;
  --cursor-light: #e6e5e0;

  /* Accent & Semantic */
  --cursor-orange: #f54e00;
  --cursor-crimson: #cf2d56;
  --cursor-gold: #c08532;
  --cursor-success: #1f8a65;

  /* Timeline / Feature Colors */
  --cursor-peach: #dfa88f;
  --cursor-sage: #9fc9a2;
  --cursor-blue: #9fbbe0;
  --cursor-lavender: #c0a8dd;

  /* Surface Scale (light mode) */
  --surface-100: #f7f7f4;
  --surface-200: #f2f1ed;
  --surface-300: #ebeae5;
  --surface-400: #e6e5e0;
  --surface-500: #e1e0db;

  /* Aliases */
  --accent-primary: var(--cursor-orange);
  --accent-secondary: var(--cursor-crimson);
  --accent-gold: var(--cursor-gold);

  /* Glow colors */
  --glow-primary: rgba(245, 78, 0, 0.35);
  --glow-secondary: rgba(207, 45, 86, 0.3);
  --glow-gold: rgba(192, 133, 50, 0.3);
  --glow-sage: rgba(159, 201, 162, 0.3);
  --glow-blue: rgba(159, 187, 224, 0.3);
  --glow-lavender: rgba(192, 168, 221, 0.3);
  --glow-peach: rgba(223, 168, 143, 0.3);
  --glow-warm: rgba(223, 168, 143, 0.08);

  /* Cursor shadow palette (atmospheric, large blur per DESIGN.md) */
  --shadow-card: rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px;
  --shadow-ambient: rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px;
  --shadow-focus: rgba(0,0,0,0.1) 0px 4px 12px;

  /* Cursor border (warm brown fallback for oklab) */
  --border-warm: rgba(38, 37, 30, 0.1);
  --border-warm-md: rgba(38, 37, 30, 0.2);
  --border-warm-strong: rgba(38, 37, 30, 0.55);

  /* Raycast multi-layer shadow system (macOS-native depth per DESIGN.md §6)
     Level 2 Ring: double-ring containment (outer + inset)
     Level 3 Button: white highlight top + dark inset bottom
     Level 5 Floating: heavy depth with glow */
  --inset-highlight: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset;
  --inset-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
  --ring-outer: rgba(38, 37, 30, 0.08) 0px 0px 0px 1px;

  /* Dark mode — Raycast Level 2 double-ring containment */
  --ring-dark-outer: rgb(40, 38, 32) 0px 0px 0px 1px;
  --ring-dark-inner: rgb(21, 19, 15) 0px 0px 0px 1px inset;
  /* Combined dark card shadow (Raycast Level 2 + Level 3 hybrid) */
  --card-dark:
    rgb(40, 38, 32) 0px 0px 0px 1px,
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgb(21, 19, 15) 0px 0px 0px 1px inset;
  /* Raycast Level 3 button shadow (macOS button press) */
  --btn-dark:
    rgba(255, 255, 255, 0.25) 0px 0px 0px 1px,
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
  /* Raycast Level 5 floating panel */
  --floating-dark:
    rgba(0, 0, 0, 0.5) 0px 0px 0px 2px,
    rgba(255, 255, 255, 0.19) 0px 0px 14px,
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;

  /* Raycast 8px-base spacing system */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-section: 80px;

  /* Raycast border-radius scale */
  --radius-micro: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;
}

/* ============================================
   GLOBAL TYPOGRAPHY — Raycast OpenType + Cursor spacing
   Per Raycast DESIGN.md §3: calt, kern, liga, ss03 on Inter
   Per Cursor DESIGN.md §3: negative tracking on headings
   ============================================ */
body {
  font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "ss03" 1 !important;
  -webkit-font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "ss03" 1 !important;
  /* Raycast §3: weight 500 baseline, line-height 1.60, +0.2px tracking — all modes */
  font-weight: 500 !important;
  line-height: 1.60 !important;
  letter-spacing: 0.2px !important;
}

/* Cursor DESIGN.md §3: heading negative letter-spacing scales with size */
h1 { letter-spacing: -0.72px !important; }
h2 { letter-spacing: -0.325px !important; }
h3 { letter-spacing: -0.11px !important; }
h4, h5, h6 { letter-spacing: 0px !important; }

/* Hero display: maximum compression */
#page-header .title-seo { letter-spacing: -1.5px !important; }

/* Raycast DESIGN.md §7: standardized transition timing */
a, button, .card-widget, .recent-post-item, .contact-card {
  transition-timing-function: ease !important;
}

/* ---- Global Animations ---- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px var(--glow-primary); }
  50% { box-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-secondary); }
}

@keyframes pulseGlowGold {
  0%, 100% { box-shadow: 0 0 5px var(--glow-gold); }
  50% { box-shadow: 0 0 20px var(--glow-gold), 0 0 40px rgba(192, 133, 50, 0.15); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ============================================
   LIGHT MODE — Cursor warm cream foundation
   Per DESIGN.md: Surface 200 (#f2f1ed) as page background
   ============================================ */
html[data-theme="light"] {
  background: var(--surface-200) !important;
}

/* body must be transparent so canvas_nest (z-index:-1) shows through */
[data-theme="light"] body {
  background: transparent !important;
}

/* ============================================
   DARK MODE — warm-shifted deep (not cold blue, not pure black)
   Cursor dark palette: #1a1814 base with warm brown undertone
   ============================================ */
html[data-theme="dark"] {
  background: linear-gradient(135deg, #1a1814 0%, #201e18 40%, #1a1814 70%, #15130f 100%) !important;
  background-attachment: fixed !important;
}

[data-theme="dark"] body {
  background: transparent !important;
}

/* Raycast: weight 500 + 0.2px tracking now set globally on body (§3 baseline rule).
   Dark mode retains explicit overrides for specificity against theme resets. */
[data-theme="dark"] #content-inner,
[data-theme="dark"] #post,
[data-theme="dark"] .recent-post-info {
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* ============================================
   NAVIGATION — Raycast sticky + subtle border
   Per Raycast DESIGN.md: dark bg with backdrop blur,
   subtle rgba border, weight 500 links, +0.3px tracking
   ============================================ */
#nav {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#page-header.nav-fixed.fixed:not(.nav-visible) #nav {
  top: -60px !important;
  transition: transform 0.35s ease, top 0.35s ease !important;
}

#page-header.nav-fixed.fixed.nav-visible #nav {
  top: 0 !important;
  transition: all 0.35s ease !important;
}

/* Light: Cursor warm surface frosted glass */
#page-header.nav-fixed #nav {
  background: rgba(242, 241, 237, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-warm) !important;
}

/* Dark: Raycast dark frosted (per DESIGN.md: rgba white 0.06 border) */
[data-theme="dark"] #nav {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(26, 24, 20, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(26, 24, 20, 0.95) !important;
}

/* Nav links — Raycast: weight 500, +0.3px letter-spacing */
#nav a {
  transition: color 0.15s ease, text-shadow 0.15s ease !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

/* Cursor: hover to crimson (per DESIGN.md §7 "hover text shifts to --color-error #cf2d56") */
#nav a:hover {
  color: var(--cursor-crimson) !important;
  text-shadow: 0 0 12px rgba(207, 45, 86, 0.3) !important;
}

/* ---- Blog Title — Cursor orange → crimson → gold gradient ---- */
#site-name {
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson), var(--cursor-gold));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ============================================
   BANNER
   ============================================ */
#page-header {
  background-size: cover !important;
  position: relative;
}

#page-header.post-bg::before,
#page-header::before {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Banner bottom fade — visible darkening into content area */
#page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Cursor orange glow on banner text */
#page-header .title-seo,
#page-header #subtitle {
  text-shadow: 0 0 30px rgba(245, 78, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Raycast §3: Display Hero OpenType — ss02 ss08 on display text, liga 0 on hero heading */
#page-header .title-seo {
  font-feature-settings: "liga" 0, "ss02" 1, "ss08" 1, "calt" 1, "kern" 1, "ss03" 1 !important;
  -webkit-font-feature-settings: "liga" 0, "ss02" 1, "ss08" 1, "calt" 1, "kern" 1, "ss03" 1 !important;
}

/* ============================================
   CARDS — Raycast depth system
   Light: Cursor atmospheric shadows (28px/70px blur per DESIGN.md)
   Dark: Raycast ring + inset highlight (macOS-native)
   ============================================ */

/* Light mode sidebar cards — Surface 100 background */
#aside-content .card-widget {
  background: var(--surface-100) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Light hover: Cursor atmospheric elevation */
#aside-content .card-widget:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-warm-md) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Dark mode cards: Raycast Level 2 double-ring containment (per DESIGN.md §6)
   outer ring + inner inset ring + top highlight + bottom shadow = glass/metal effect */
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] .recent-post-item,
[data-theme="dark"] #post {
  background: rgba(32, 30, 24, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border: none !important;
  box-shadow: var(--card-dark) !important;
}

/* Dark sidebar hover: Raycast glow ring + double-ring base */
[data-theme="dark"] #aside-content .card-widget:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    rgba(245, 78, 0, 0.15) 0px 0px 0px 1px,
    rgba(245, 78, 0, 0.12) 0px 12px 40px -8px,
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgb(21, 19, 15) 0px 0px 0px 1px inset !important;
}

.recent-post-item,
#post {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   SIDEBAR CARD ACCENTS — Each card type uses a different Cursor color
   ============================================ */

/* Author card — Orange accent (primary brand) */
#aside-content .card-author {
  border-top: 3px solid var(--cursor-orange) !important;
}

/* Announcement card — Gold accent */
#aside-content .card-announcement {
  border-top: 3px solid var(--cursor-gold) !important;
}

[data-theme="light"] #aside-content .card-announcement {
  background: linear-gradient(180deg, rgba(192, 133, 50, 0.06), var(--surface-100)) !important;
}

/* Recent Posts card — Peach accent */
#aside-content .card-recent-post {
  border-top: 3px solid var(--cursor-peach) !important;
}

/* Categories card — Lavender accent */
#aside-content .card-categories {
  border-top: 3px solid var(--cursor-lavender) !important;
}

/* Tags card — Sage accent */
#aside-content .card-tags {
  border-top: 3px solid var(--cursor-sage) !important;
}

/* Archives card — Blue accent */
#aside-content .card-archives {
  border-top: 3px solid var(--cursor-blue) !important;
}

/* Web Info card — Crimson accent */
#aside-content .card-webinfo {
  border-top: 3px solid var(--cursor-crimson) !important;
}

/* Dark announcement — Raycast double-ring + gold glow */
[data-theme="dark"] #aside-content .card-announcement {
  background: linear-gradient(135deg, rgba(192, 133, 50, 0.08), rgba(245, 78, 0, 0.04)) !important;
  border: none !important;
  border-top: 3px solid var(--cursor-gold) !important;
  box-shadow:
    rgb(40, 38, 32) 0px 0px 0px 1px,
    rgba(192, 133, 50, 0.06) 0px 0px 20px 5px,
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgb(21, 19, 15) 0px 0px 0px 1px inset !important;
  animation: pulseGlowGold 4s ease-in-out infinite;
}

/* ============================================
   POST CARDS (Index) — Raycast + Cursor depth
   ============================================ */
.recent-post-item {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  margin-bottom: var(--space-lg) !important;
  border: 1px solid var(--border-warm) !important;
  box-shadow: var(--shadow-ambient) !important;
  background: var(--surface-100) !important;
}

/* Light hover: Cursor heavy atmospheric shadow */
.recent-post-item:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: var(--border-warm-md) !important;
  box-shadow: var(--shadow-card), var(--ring-outer) !important;
}

/* Dark hover: Raycast glow ring (orange) + double-ring + inset stack */
[data-theme="dark"] .recent-post-item:hover {
  box-shadow:
    rgba(245, 78, 0, 0.2) 0px 0px 0px 1px,
    rgba(245, 78, 0, 0.18) 0px 20px 50px -10px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgb(21, 19, 15) 0px 0px 0px 1px inset !important;
}

.recent-post-item .post-bg {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.recent-post-item:hover .post-bg {
  transform: scale(1.08) !important;
}

/* ---- Post Title Hover — Cursor orange → crimson underline ---- */
.recent-post-info .article-title {
  transition: all 0.3s ease !important;
  position: relative;
}

.recent-post-info .article-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cursor-orange), var(--cursor-crimson));
  transition: width 0.4s ease;
}

.recent-post-item:hover .article-title::after {
  width: 100%;
}

/* ---- Tag Pills — Raycast pill with hover glow ---- */
.tag-cloud-list a {
  transition: all 0.3s ease !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: 0.2px !important;
}

.tag-cloud-list a:hover {
  box-shadow: 0 0 15px var(--glow-sage) !important;
  transform: scale(1.1) !important;
}

/* ---- Category list items — Lavender accent on hover ---- */
.card-categories .category-list a:hover {
  color: var(--cursor-lavender) !important;
}

/* ---- Avatar ---- */
#aside-content .card-widget .avatar-img {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#aside-content .card-widget .avatar-img:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 25px var(--glow-primary) !important;
}

/* ---- Scrollbar — Cursor Timeline gradient (visible but elegant) ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cursor-peach), var(--cursor-lavender));
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cursor-gold), var(--cursor-crimson));
}

::-webkit-scrollbar-track {
  background: var(--surface-300);
  border-radius: var(--radius-pill);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(223, 168, 143, 0.5), rgba(192, 168, 221, 0.5));
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cursor-peach), var(--cursor-lavender));
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================
   GLOBAL LINK COLORS — Cursor multi-color system
   Different categories get different Cursor colors
   ============================================ */
.link-projects, .link-projects a { color: var(--cursor-orange) !important; }
.link-resume, .link-resume a { color: var(--cursor-gold) !important; }
.link-stories, .link-stories a { color: var(--cursor-lavender) !important; }
.link-technotes, .link-technotes a { color: var(--cursor-sage) !important; }
.link-info, .link-info a { color: var(--cursor-blue) !important; }
.link-bilibili, .link-bilibili a { color: #FF69B4 !important; }
.link-gold, .link-gold a { color: var(--cursor-gold) !important; }
.link-crimson, .link-crimson a { color: var(--cursor-crimson) !important; }
.link-peach, .link-peach a { color: var(--cursor-peach) !important; }

/* ============================================
   AI DISCLAIMER
   ============================================ */
.ai-disclaimer {
  margin: var(--space-lg) 0 var(--space-xl) 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(159, 187, 224, 0.06), rgba(192, 168, 221, 0.06));
  border: 1px solid var(--border-warm);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

[data-theme="dark"] .ai-disclaimer {
  background: rgba(32, 30, 24, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}

.ai-disclaimer:hover {
  border-color: var(--border-warm-md);
  box-shadow: var(--shadow-focus);
}

.ai-disclaimer summary {
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--font-color);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.ai-disclaimer summary::-webkit-details-marker { display: none; }

.ai-disclaimer summary::before {
  content: "\25B6";
  font-size: 0.7em;
  transition: transform 0.2s ease;
  color: var(--cursor-blue);
}

.ai-disclaimer[open] summary::before { transform: rotate(90deg); }

.ai-disclaimer p {
  margin: 0;
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  line-height: 1.6;
  opacity: 0.8;
}

.ai-disclaimer.human-only {
  background: linear-gradient(135deg, rgba(159, 201, 162, 0.08), rgba(31, 138, 101, 0.04));
  border-color: rgba(159, 201, 162, 0.3);
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: var(--space-xl) 0;
  gap: var(--space-lg);
}

.contact-card {
  background: var(--surface-100);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  width: 45%;
  min-width: 250px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: var(--shadow-ambient);
}

/* First contact card: blue accent, second: lavender accent */
.contact-card:nth-child(1) {
  border-top: 3px solid var(--cursor-blue);
}

.contact-card:nth-child(2) {
  border-top: 3px solid var(--cursor-lavender);
}

[data-theme="dark"] .contact-card {
  background: rgba(32, 30, 24, 0.8);
  border: none;
  box-shadow: var(--card-dark);
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .contact-card:nth-child(1) {
  border-top-color: var(--cursor-blue);
}

[data-theme="dark"] .contact-card:nth-child(2) {
  border-top-color: var(--cursor-lavender);
}

.contact-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-warm-md);
  box-shadow: var(--shadow-card);
}

[data-theme="dark"] .contact-card:hover {
  box-shadow:
    rgba(159, 187, 224, 0.2) 0px 0px 0px 1px,
    rgba(159, 187, 224, 0.15) 0px 20px 50px -10px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgb(21, 19, 15) 0px 0px 0px 1px inset;
}

.contact-card h3 { margin-bottom: var(--space-sm); }

.contact-card:nth-child(1) a {
  color: var(--cursor-blue);
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 600;
}

.contact-card:nth-child(2) a {
  color: var(--cursor-lavender);
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 600;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  flex-wrap: wrap;
}

/* Social Buttons: Raycast pill + inset system */
.social-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  color: white !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(0, 0, 0, 0.15) 0px 4px 12px;
}

/* Raycast: hover uses opacity transition (per DESIGN.md §7, opacity: 0.6) */
.social-btn:hover {
  transform: translateY(-4px) scale(1.05);
  opacity: 0.6;
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    var(--shadow-card);
}

/* Each social button its own color */
.linkedin { background: linear-gradient(135deg, #0077b5, #005885); }
.github { background: linear-gradient(135deg, #333, #1a1a1a); }
.bilibili { background: linear-gradient(135deg, #FF6699, #e64580); }

/* ============================================
   CONTACT FORM — Raycast inputs + Cursor colors
   Per Cursor DESIGN.md §4: transparent bg, warm border,
   focus: border brightens to accent
   ============================================ */
.contact-form { max-width: 600px; margin: var(--space-xl) auto; }
.form-group { margin-bottom: var(--space-lg); }

.form-group label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(38, 37, 30, 0.55);
}

[data-theme="dark"] .form-group label {
  color: rgba(255, 255, 255, 0.6);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2px;
  background: var(--surface-100);
  color: var(--font-color);
  transition: all 0.15s ease;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: rgba(21, 19, 15, 0.6);
  border: none;
  box-shadow: var(--card-dark);
}

/* Cursor focus: border shifts to accent + shadow ring */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--cursor-orange);
  box-shadow: 0 0 0 3px rgba(245, 78, 0, 0.15);
}

/* Raycast §4 Inputs: placeholder color (#6a6b6c equivalent warm-shifted) */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(38, 37, 30, 0.4);
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Submit: Cursor orange → crimson gradient pill */
.submit-btn {
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson));
  color: white;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  width: 100%;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(245, 78, 0, 0.3) 0px 8px 24px -4px;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.submit-btn:hover::before { left: 100%; }

.submit-btn:hover {
  transform: translateY(-2px);
  opacity: 0.6;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(245, 78, 0, 0.4) 0px 20px 50px -10px;
}

/* ============================================
   RESUME DOWNLOAD — Cursor gold pill CTA (resume = gold)
   ============================================ */
.btn-download {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--cursor-gold), var(--cursor-peach));
  color: white !important;
  text-decoration: none !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(192, 133, 50, 0.3) 0px 8px 24px -4px;
}

.btn-download::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 3s infinite;
}

.btn-download:hover {
  transform: translateY(-3px) scale(1.05);
  opacity: 0.6;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(192, 133, 50, 0.4) 0px 20px 50px -10px;
}

/* ============================================
   ALL BUTTERFLY THEME BUTTONS — unified Cursor style
   ============================================ */

/* Sidebar "Follow Me" button — Orange (brand) */
#aside-content .card-info-btn,
.card-author .card-info-btn {
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson)) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  transition: all 0.3s ease !important;
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset,
    rgba(245, 78, 0, 0.2) 0px 4px 12px -2px !important;
}

/* "Show more" buttons — Sage (secondary action) */
#aside-content .card-more-btn {
  background: linear-gradient(135deg, var(--cursor-sage), var(--cursor-success)) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 16px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.2px !important;
  transition: all 0.3s ease !important;
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset,
    rgba(159, 201, 162, 0.2) 0px 4px 12px -2px !important;
}

#aside-content .card-info-btn:hover,
.card-author .card-info-btn:hover,
#aside-content .card-more-btn:hover {
  opacity: 0.6 !important;
  transform: translateY(-2px) !important;
}

#aside-content .card-info-btn:hover,
.card-author .card-info-btn:hover {
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset,
    rgba(245, 78, 0, 0.35) 0px 8px 24px -4px !important;
}

#aside-content .card-more-btn:hover {
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset,
    rgba(159, 201, 162, 0.35) 0px 8px 24px -4px !important;
}

/* Search button — hover to blue */
#search-button i,
.search-close-button {
  transition: color 0.15s ease !important;
}

#search-button:hover i {
  color: var(--cursor-blue) !important;
}

/* Mobile TOC / hide-aside transitions (accent + hover handled in rightside block below) */
#mobile-toc-button,
#hide-aside-btn {
  transition: all 0.3s ease !important;
}

/* ============================================
   POST CONTENT
   ============================================ */

/* Blockquote — Gold accent (warm, editorial) */
#post blockquote {
  border-left: 3px solid var(--cursor-gold) !important;
  background: linear-gradient(135deg, rgba(192, 133, 50, 0.05), rgba(223, 168, 143, 0.04)) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
}

[data-theme="dark"] #post blockquote {
  background: rgba(32, 30, 24, 0.5) !important;
  border-left-color: var(--cursor-gold) !important;
}

/* Images — Cursor rounded + atmospheric shadow */
#post img {
  border-radius: var(--radius-lg) !important;
  transition: all 0.4s ease !important;
  box-shadow: var(--shadow-ambient) !important;
}

#post img:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Code blocks — Cursor code style: Surface 400 bg with warm border */
#post code:not([class*="language-"]) {
  background: var(--surface-400) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: var(--radius-micro) !important;
  padding: 1.5px 6px !important;
  font-size: 0.88em !important;
}

[data-theme="dark"] #post code:not([class*="language-"]) {
  background: rgba(38, 37, 30, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- TOC active — Cursor gold (editorial accent) ---- */
#card-toc .toc-link.active,
#card-toc .toc-link.active .toc-text {
  color: var(--cursor-gold) !important;
  background: transparent !important;
}

.toc .toc-item .toc-link.active {
  background-color: transparent !important;
}

/* ---- Footer — zero padding, no oversized "chin" ---- */
#footer {
  padding: 0 !important;
  min-height: unset !important;
}

#footer-wrap {
  padding: 0 !important;
}

[data-theme="dark"] #footer {
  background: linear-gradient(180deg, transparent, rgba(21, 19, 15, 0.95)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ---- Footer links — always white on orange bg, never inherit theme orange ---- */
#footer a,
#footer-wrap a {
  color: rgba(255, 255, 255, 0.9) !important;
}
#footer a:hover,
#footer-wrap a:hover {
  color: white !important;
  text-decoration: underline;
  opacity: 0.85;
}
#footer ::selection,
#footer-wrap ::selection {
  background: rgba(255, 255, 255, 0.35) !important;
  color: white !important;
}

/* ---- Copyright ---- */
.post-copyright__notice .post-copyright-info { white-space: nowrap; }
.post-copyright { font-size: 0.85rem; }

/* Post copyright box — Peach accent border */
.post-copyright {
  border-left: 3px solid var(--cursor-peach) !important;
  background: linear-gradient(135deg, rgba(223, 168, 143, 0.04), transparent) !important;
}

[data-theme="dark"] .post-copyright {
  background: rgba(32, 30, 24, 0.4) !important;
}

/* ---- Selection — Cursor Timeline "Edit" lavender (per user: use Timeline colors) ---- */
::selection {
  background: var(--cursor-lavender);
  color: var(--cursor-dark);
}

[data-theme="dark"] ::selection {
  background: rgba(192, 168, 221, 0.4);
  color: white;
}

/* Inputs/textareas: "Read" blue for text selection inside forms */
input::selection,
textarea::selection {
  background: var(--cursor-blue);
  color: var(--cursor-dark);
}

[data-theme="dark"] input::selection,
[data-theme="dark"] textarea::selection {
  background: rgba(159, 187, 224, 0.4);
  color: white;
}

/* Code blocks: "Grep" sage for code selection */
code::selection,
pre::selection,
code *::selection,
pre *::selection {
  background: var(--cursor-sage);
  color: var(--cursor-dark);
}

[data-theme="dark"] code::selection,
[data-theme="dark"] pre::selection,
[data-theme="dark"] code *::selection,
[data-theme="dark"] pre *::selection {
  background: rgba(159, 201, 162, 0.35);
  color: white;
}

/* ---- Scroll Percent — Cursor gradient ---- */
#percent {
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson)) !important;
}

/* ---- Category Cross-link ---- */
.category-crosslink {
  display: block;
  max-width: 1200px;
  margin: 0 auto var(--space-lg) auto;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--cursor-sage);
  background: rgba(159, 201, 162, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
}

[data-theme="dark"] .category-crosslink {
  background: rgba(32, 30, 24, 0.6);
}

.category-crosslink a {
  color: var(--cursor-sage);
  font-weight: 500;
  text-decoration: none;
}

.category-crosslink a:hover {
  color: var(--cursor-orange);
  text-decoration: underline;
}

/* ---- Hide Tags & Archives on homepage ---- */
.page:not([class*="type-"]) .card-tags,
.page:not([class*="type-"]) .card-archives {
  display: none !important;
}

/* ============================================
   RESUME PAGE — PDF preview card
   ============================================ */
.resume-viewer-card {
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface-100);
  border: 1px solid var(--border-warm);
  border-top: 3px solid var(--cursor-gold);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card), var(--ring-outer);
  animation: slideInUp 0.6s ease-out;
}

[data-theme="dark"] .resume-viewer-card {
  background: rgba(32, 30, 24, 0.85);
  border-color: transparent;
  border-top-color: var(--cursor-gold);
  box-shadow: var(--card-dark), rgba(192, 133, 50, 0.06) 0px 0px 30px 5px;
  backdrop-filter: blur(12px);
}

.resume-viewer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-warm);
  background: var(--surface-200);
}

[data-theme="dark"] .resume-viewer-actions {
  background: rgba(21, 19, 15, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.resume-viewer-actions .btn-open-tab {
  display: inline-block;
  padding: 10px 24px;
  background: rgba(192, 133, 50, 0.1);
  color: var(--cursor-gold) !important;
  text-decoration: none !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(192, 133, 50, 0.3);
  transition: all 0.3s ease;
  box-shadow:
    rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset;
}

.resume-viewer-actions .btn-open-tab:hover {
  background: rgba(192, 133, 50, 0.2);
  border-color: var(--cursor-gold);
  opacity: 0.6;
}

.resume-pdf-frame {
  width: 100%;
  /* A4 at 96dpi = ~1123px; add viewer chrome ~80px → 1200px. Use viewport height so
     one full A4 page is visible without scrolling on most desktop screens */
  height: calc(100vh - 120px);
  min-height: 1100px;
  background: #525659;
}

.resume-pdf-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.resume-pdf-fallback {
  display: none;
  padding: var(--space-xl);
  text-align: center;
  color: rgba(38, 37, 30, 0.6);
}

[data-theme="dark"] .resume-pdf-fallback {
  color: rgba(255, 255, 255, 0.5);
}

/* Hide tags / archives / webinfo sidebar on resume page */
.type-resume .card-tags,
.type-resume .card-archives,
.type-resume .card-webinfo {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .resume-pdf-frame { height: 70vh; min-height: 400px; }
  .resume-viewer-actions { flex-wrap: wrap; gap: var(--space-sm); }
}

/* ---- Responsive ---- */
@media screen and (max-width: 768px) {
  .contact-cards { flex-direction: column; align-items: center; }
  .contact-card { width: 90%; }
  .social-links { flex-direction: column; align-items: center; }
}

/* ---- Page entrance ---- */
#content-inner { animation: slideInUp 0.6s ease-out; }

/* ---- Right-side buttons — Raycast button treatment per DESIGN.md §4
   Light: Cursor Surface 300 bg, dark text, warm border, 8px radius
   Dark: Raycast Level 3 button shadow (macOS native press)
   Each function gets a different Cursor accent color
   NOTE: individual rules use #rightside #id (specificity [2,0,0]) to beat
   the generic #rightside > div > button ([1,0,2]) — fixes border-left being
   overridden by the generic border shorthand ---- */
#rightside > div > button,
#rightside > div > a {
  transition: all 0.2s ease !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-warm) !important;
  background: var(--surface-300) !important;
  color: var(--cursor-dark) !important;
}

[data-theme="dark"] #rightside > div > button,
[data-theme="dark"] #rightside > div > a {
  background: rgba(32, 30, 24, 0.9) !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: var(--btn-dark) !important;
}

/* Default hover — Raycast opacity transition (per DESIGN.md §7: opacity 0.6) */
#rightside > div > button:hover,
#rightside > div > a:hover {
  transform: scale(1.08) !important;
  opacity: 0.6;
}

/* --- Individual accent border-left: #rightside #id = [2,0,0] > [1,0,2] --- */

/* Dark mode toggle — Lavender */
#rightside #darkmode { border-left: 3px solid var(--cursor-lavender) !important; }
#rightside #darkmode:hover {
  background: var(--cursor-lavender) !important;
  color: var(--cursor-dark) !important;
  border-color: var(--cursor-lavender) !important;
  box-shadow: 0 0 18px var(--glow-lavender) !important;
  opacity: 1 !important;
}

/* Read mode — Blue */
#rightside #readmode { border-left: 3px solid var(--cursor-blue) !important; }
#rightside #readmode:hover {
  background: var(--cursor-blue) !important;
  color: var(--cursor-dark) !important;
  border-color: var(--cursor-blue) !important;
  box-shadow: 0 0 18px var(--glow-blue) !important;
  opacity: 1 !important;
}

/* Scroll up / percent — Orange */
#rightside #go-up { border-left: 3px solid var(--cursor-orange) !important; }
#rightside #go-up:hover {
  background: var(--cursor-orange) !important;
  color: white !important;
  border-color: var(--cursor-orange) !important;
  box-shadow: 0 0 18px var(--glow-primary) !important;
  opacity: 1 !important;
}

/* Hide aside — Sage */
#rightside #hide-aside-btn { border-left: 3px solid var(--cursor-sage) !important; }
#rightside #hide-aside-btn:hover {
  background: var(--cursor-sage) !important;
  color: var(--cursor-dark) !important;
  border-color: var(--cursor-sage) !important;
  box-shadow: 0 0 18px var(--glow-sage) !important;
  opacity: 1 !important;
}

/* Mobile TOC — Gold */
#rightside #mobile-toc-button { border-left: 3px solid var(--cursor-gold) !important; }
#rightside #mobile-toc-button:hover {
  background: var(--cursor-gold) !important;
  color: white !important;
  border-color: var(--cursor-gold) !important;
  box-shadow: 0 0 18px var(--glow-gold) !important;
  opacity: 1 !important;
}

/* Chat/comment — Peach */
#rightside #chat-btn { border-left: 3px solid var(--cursor-peach) !important; }
#rightside #chat-btn:hover {
  background: var(--cursor-peach) !important;
  color: var(--cursor-dark) !important;
  border-color: var(--cursor-peach) !important;
  box-shadow: 0 0 18px var(--glow-peach) !important;
  opacity: 1 !important;
}

/* Translate — Crimson */
#rightside #translateLink { border-left: 3px solid var(--cursor-crimson) !important; }
#rightside #translateLink:hover {
  background: var(--cursor-crimson) !important;
  color: white !important;
  border-color: var(--cursor-crimson) !important;
  box-shadow: 0 0 18px var(--glow-secondary) !important;
  opacity: 1 !important;
}

/* ---- Search dialog — Raycast Level 5 floating panel ---- */
[data-theme="dark"] #local-search .search-dialog {
  backdrop-filter: blur(20px) !important;
  background: rgba(26, 24, 20, 0.95) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--floating-dark) !important;
}

/* ---- Pagination — Cursor gradient ---- */
#pagination .page-number {
  transition: all 0.3s ease !important;
  border-radius: var(--radius-sm) !important;
}

#pagination .page-number:hover,
#pagination .page-number.current {
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson)) !important;
  color: white !important;
  box-shadow:
    rgba(245, 78, 0, 0.25) 0px 6px 18px -2px,
    0 0 12px var(--glow-primary) !important;
}

/* ============================================
   HOMEPAGE HERO CARD
   Raycast featured card (radius-2xl) + Cursor warm palette
   ============================================ */

.home-hero {
  max-width: 1200px;
  margin: 0 auto var(--space-2xl) auto;
  padding: var(--space-2xl);
  background: var(--surface-100);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  box-shadow: var(--shadow-card), var(--ring-outer);
}

/* Dark: Raycast Level 2+3 double-ring + warm glow (featured card) */
[data-theme="dark"] .home-hero {
  background: rgba(32, 30, 24, 0.85);
  backdrop-filter: blur(16px);
  border: none;
  box-shadow:
    rgb(40, 38, 32) 0px 0px 0px 1px,
    rgba(223, 168, 143, 0.05) 0px 0px 40px 10px,
    rgba(245, 78, 0, 0.08) 0px 16px 48px -8px,
    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgb(21, 19, 15) 0px 0px 0px 1px inset;
}

/* Animated gradient accent line — All 5 Cursor feature colors */
.home-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--cursor-orange),
    var(--cursor-crimson),
    var(--cursor-gold),
    var(--cursor-lavender),
    var(--cursor-sage),
    var(--cursor-blue));
  background-size: 300% 100%;
  animation: gradientShift 4s ease infinite;
}

.home-hero-content {
  display: block;
}

.home-hero-content::after {
  content: '';
  display: table;
  clear: both;
}

.home-hero-text { display: block; }

/* Hero heading: Cursor orange → crimson gradient */
.home-hero-text h1 {
  font-size: 2em;
  font-weight: 600;
  margin: 0 0 var(--space-sm) 0;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-hero-text h3 {
  color: var(--cursor-gold);
  font-size: 1.15em;
  letter-spacing: -0.2px;
}

.home-hero-text .hero-subtitle {
  font-size: 1rem;
  opacity: 0.6;
  margin-bottom: var(--space-lg);
  font-style: italic;
  letter-spacing: 0.2px;
}

.home-hero-text p {
  line-height: 1.8;
  margin-bottom: var(--space-md);
  letter-spacing: 0.2px;
}

[data-theme="dark"] .home-hero-text p {
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Hero links: each category gets its own Cursor color */
.home-hero-text a {
  color: var(--cursor-orange);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Cursor DESIGN.md §7: hover text shifts to crimson */
.home-hero-text a:hover {
  color: var(--cursor-crimson);
}

/* YJSP / highlight link — Cursor gold */
.home-hero-text .highlight-link {
  color: var(--cursor-gold) !important;
  transition: color 0.15s ease;
}

.home-hero-text .highlight-link:hover {
  color: var(--cursor-peach) !important;
}

/* Bilibili — keep brand pink */
.home-hero-text .bilibili-link {
  color: #FF69B4;
  transition: color 0.15s ease;
}

.home-hero-text .bilibili-link:hover {
  color: #FF1493;
}

.home-hero-avatar {
  float: right;
  width: 260px;
  margin: 110px 0 var(--space-lg) 30px;
}

.home-hero-avatar img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.home-hero-avatar img:hover {
  transform: scale(1.03);
  box-shadow:
    var(--shadow-card),
    0 0 20px var(--glow-primary);
}

.home-hero-banner {
  position: relative;
  height: 120px;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
}

.home-hero-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.home-hero-banner .banner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.home-hero-banner .banner-overlay h2 {
  color: white;
  text-shadow:
    0 0 20px rgba(192, 133, 50, 0.6),
    0 0 40px rgba(192, 133, 50, 0.25),
    2px 2px 8px rgba(0, 0, 0, 0.7);
  margin: 0; padding: 20px;
  text-align: center;
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* ============================================
   CTA Buttons — Each hero button uses its category color
   Per Cursor DESIGN.md: buttons use Surface 300 bg + dark text
   But we keep the gradient style per user preference, using category colors
   ============================================ */
.home-hero-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.home-hero-links .hero-btn {
  display: inline-block;
  padding: 12px 32px;
  color: white !important;
  text-decoration: none !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(0, 0, 0, 0.15) 0px 4px 12px;
  /* Default fallback gradient */
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson));
}

/* Category-specific button colors */
.home-hero-links .hero-btn.link-info {
  background: linear-gradient(135deg, var(--cursor-blue), var(--cursor-lavender)) !important;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(159, 187, 224, 0.3) 0px 8px 24px -4px !important;
}

.home-hero-links .hero-btn.link-projects {
  background: linear-gradient(135deg, var(--cursor-orange), var(--cursor-crimson)) !important;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(245, 78, 0, 0.3) 0px 8px 24px -4px !important;
}

.home-hero-links .hero-btn.link-resume {
  background: linear-gradient(135deg, var(--cursor-gold), var(--cursor-peach)) !important;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(192, 133, 50, 0.3) 0px 8px 24px -4px !important;
}

/* Hero button hover: Raycast opacity transition (per DESIGN.md §7: opacity 0.6) */
.home-hero-links .hero-btn:hover {
  transform: translateY(-3px) scale(1.05);
  opacity: 0.6;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset,
    rgba(0, 0, 0, 0.2) 0px 20px 50px -10px,
    0 0 20px var(--glow-primary) !important;
}

.home-section-title {
  font-size: 1.4em;
  margin: var(--space-xl) 0 var(--space-md) 0;
  color: var(--font-color);
  opacity: 0.5;
  font-weight: 400;
  text-align: center;
  letter-spacing: -0.3px;
}

@media screen and (max-width: 768px) {
  .home-hero { padding: var(--space-lg) var(--space-md); }
  .home-hero-content { display: block; text-align: center; }
  .home-hero-avatar { float: none; width: 160px; margin: 0 auto var(--space-lg) auto; }
  .home-hero-links { flex-direction: column; align-items: center; }
  .home-hero-links .hero-btn { width: 80%; text-align: center; }
}

/* ============================================
   ABOUT PAGE IMAGE FIXES (preserved)
   ============================================ */
.about-flex-row {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.about-flex-row > a,
.about-flex-row > img {
  width: 45% !important;
  margin: 0 !important;
}

.about-flex-row > a > img {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: var(--radius-lg) !important;
  object-fit: cover;
}

.about-flex-row > img {
  border-radius: var(--radius-lg) !important;
  height: auto !important;
}

/* ---- Blockquote (article pages) — Gold accent ---- */
#article-container blockquote {
  border-left: 3px solid var(--cursor-gold) !important;
  background: linear-gradient(135deg, rgba(192, 133, 50, 0.05), rgba(223, 168, 143, 0.04)) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  font-size: 1.25em !important;
}

[data-theme="dark"] #article-container blockquote {
  background: rgba(32, 30, 24, 0.5) !important;
}

/* ============================================
   GLOBAL ENHANCEMENTS — Cursor + Raycast strict compliance
   ============================================ */

/* Raycast §3: +0.2px tracking set globally on body. Dark mode reinforces for specificity. */
[data-theme="dark"] #article-container,
[data-theme="dark"] #post {
  letter-spacing: 0.2px;
}

/* Raycast §3 Caption: 14px weight 500 line-height 1.14 letter-spacing 0.2px
   Cursor DESIGN.md: secondary text uses rgba(38, 37, 30, 0.55) */
.post-meta-date,
.post-meta-categories,
.article-meta-info,
.post-meta,
.post-meta a,
.article-meta-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
  letter-spacing: 0.2px !important;
  color: rgba(38, 37, 30, 0.55) !important;
}

[data-theme="dark"] .post-meta-date,
[data-theme="dark"] .post-meta-categories,
[data-theme="dark"] .article-meta-info,
[data-theme="dark"] .post-meta,
[data-theme="dark"] .post-meta a,
[data-theme="dark"] .article-meta-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Cursor DESIGN.md: links hover to crimson (signature interaction) */
#article-container a:hover,
#post a:hover {
  color: var(--cursor-crimson) !important;
}

/* Horizontal rules — Cursor gradient via border-image (reliable, no background needed)
   Target the actual Butterfly-compiled selector (.container.post-content hr)
   plus #post/#article-container for full coverage.
   ::before holds the hr_icon — hide it so only the gradient line shows. */
.container.post-content hr,
#article-container hr,
#post hr {
  border: 0 !important;
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--cursor-gold) 15%,
    var(--cursor-peach) 50%,
    var(--cursor-lavender) 85%,
    transparent 100%
  ) 1 !important;
  height: 0 !important;
  background: none !important;
  opacity: 0.8 !important;
  margin: var(--space-xl) 0 !important;
}

.container.post-content hr::before,
#article-container hr::before,
#post hr::before {
  display: none !important;
}

[data-theme="dark"] .container.post-content hr,
[data-theme="dark"] #article-container hr,
[data-theme="dark"] #post hr {
  opacity: 0.65 !important;
}

/* ============================================
   NOTE/TIP BOXES — Use Cursor semantic colors
   ============================================ */
.note.info {
  border-left-color: var(--cursor-blue) !important;
}

.note.success {
  border-left-color: var(--cursor-success) !important;
}

.note.warning {
  border-left-color: var(--cursor-gold) !important;
}

.note.danger {
  border-left-color: var(--cursor-crimson) !important;
}

/* ============================================
   POST SERIES — Lavender accent
   ============================================ */
.card-post-series {
  border-top: 3px solid var(--cursor-lavender) !important;
}

.card-post-series .series-title {
  color: var(--cursor-lavender) !important;
}

/* ============================================
   RELATED POSTS — Peach glow on hover
   ============================================ */
.relatedPosts .relatedPosts-item:hover {
  box-shadow: 0 0 20px var(--glow-peach) !important;
}

/* ============================================
   DARK MODE TAGS — Raycast DESIGN.md §4 Badges & Tags
   #1b1c1e bg (warm-shifted), white text, 6px radius
   ============================================ */
[data-theme="dark"] .tag-cloud-list a {
  background: rgba(32, 30, 24, 0.8) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: var(--card-dark) !important;
}

[data-theme="dark"] .tag-cloud-list a:hover {
  background: rgba(159, 201, 162, 0.15) !important;
  border-color: rgba(159, 201, 162, 0.3) !important;
  color: var(--cursor-sage) !important;
}

/* Dark mode category list — Raycast badge style */
[data-theme="dark"] .card-categories .category-list a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.15s ease !important;
}

[data-theme="dark"] .card-categories .category-list a:hover {
  color: var(--cursor-lavender) !important;
}

/* ============================================
   RAYCAST WARM GLOW — per DESIGN.md §6 Decorative Depth
   rgba(215, 201, 175, 0.05) behind featured elements
   (warm-shifted to match Cursor palette)
   ============================================ */
[data-theme="dark"] #post {
  box-shadow:
    var(--card-dark),
    rgba(215, 201, 175, 0.03) 0px 0px 20px 5px !important;
}

/* ============================================
   LIGHT MODE SECTION VARIATION — Cursor DESIGN.md §5
   Alternating surface tones for subtle section differentiation
   ============================================ */
[data-theme="light"] #aside-content {
  background: transparent;
}

[data-theme="light"] #content-inner {
  background: transparent;
}

/* Raycast DESIGN.md §4: Card internal padding 16-32px */
#aside-content .card-widget .card-content {
  padding: var(--space-md) !important;
}

/* Raycast DESIGN.md §5: Component gaps 8-16px */
#aside-content .card-widget {
  margin-bottom: var(--space-md) !important;
}

/* ---- Author card stats (Articles / Tags / Categories)
   Actual Butterfly HTML (from card_author.pug):
     .site-data > a > .headline (label) + .length-num (count)
   Global line-height: 1.60 + letter-spacing: 0.2px from body is too
   spread-out for these compact UI numbers — reset to Body Tight values. ---- */
.site-data {
  display: flex !important;
  justify-content: space-around !important;
  padding: var(--space-sm) 0 !important;
}

.site-data a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  text-decoration: none !important;
}

/* Label: "Articles / Tags / Categories" */
.site-data .headline {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1px !important;
  opacity: 0.65;
  order: 1 !important;
}

/* Count number */
.site-data .length-num {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  order: 0 !important;
}