html[data-theme="vampire"] {
  color-scheme: dark;
  background-color: #060506;
  --bg: #060506;
  --surface: #171014;
  --border: rgba(139, 56, 69, 0.28);
  --text: #e4d9d3;
  --dim: #b8a6a5;
  --muted: #998387;
  --accent: #c16a72;
  --prompt: #bd6570;
  --gold: #7d2030;
  --gold-hi: #b85865;
  --particle-ink: #e4d9d3;
  --wisp-ember: rgba(125, 32, 48, 0.14);
  --wisp-ash: rgba(193, 165, 172, 0.035);
  --wisp-fade: 0.55;
  --wisp-count: 8;
  scrollbar-color: #493039 var(--bg);
}

html[data-theme="vampire"] body {
  background:
    radial-gradient(ellipse 55% 38% at 48% 4%, rgba(71, 43, 53, 0.12), transparent 75%),
    radial-gradient(ellipse 65% 50% at 95% 70%, rgba(55, 10, 23, 0.08), transparent 80%),
    linear-gradient(155deg, #0e0b0e, #060506 65%);
  background-attachment: fixed;
}

html[data-theme="vampire"] body::after {
  background: radial-gradient(ellipse at 50% 25%, transparent 35%, rgba(0, 0, 0, 0.48));
}

html[data-theme="vampire"] ::selection { background: rgba(125, 32, 48, 0.55); }
html[data-theme="vampire"]::-webkit-scrollbar-thumb { background: #493039; }
html[data-theme="vampire"]::-webkit-scrollbar-thumb:hover { background: #70434e; }

html[data-theme="vampire"] .site-nav,
html[data-theme="vampire"] #statusbar {
  background: linear-gradient(180deg, rgba(15, 11, 14, 0.97), rgba(6, 5, 6, 0.95));
}

html[data-theme="vampire"] #boot { color: var(--dim); }
html[data-theme="vampire"] #wisps { opacity: 0.35; }
html[data-theme="vampire"] #avatar,
html[data-theme="vampire"] .nav-brand img:last-child { display: none; }

html[data-theme="vampire"] #hero-sword {
  opacity: 0.3;
  filter: invert(1) sepia(0.3) saturate(0.55) brightness(0.92);
}

html[data-theme="vampire"] #hero::before {
  background: radial-gradient(ellipse at 50% 38%, rgba(109, 36, 57, 0.12), transparent 62%);
  animation: none;
}

html[data-theme="vampire"] #avatar-wrap { margin-left: -52px; margin-bottom: 10px; }
html[data-theme="vampire"] #avatar-wrap.boot-pose { margin: 0; }
html[data-theme="vampire"] #eye-3d { width: 220px; height: 150px; }
html[data-theme="vampire"] #avatar-wrap:hover {
  filter: drop-shadow(0 0 10px rgba(141, 37, 55, 0.22));
}

html[data-theme="vampire"] #avatar-wrap #eye-icon,
html[data-theme="vampire"] #avatar-wrap canvas,
html[data-theme="vampire"] .nav-brand img,
html[data-theme="vampire"] .social-link img { filter: none; }

html[data-theme="vampire"] #eye-3d .vampire-fallback {
  width: 220px !important;
  height: 150px !important;
}

.vampire-fallback { display: none; }
html[data-theme="vampire"] #eye-3d:not([data-renderer="webgl"]) .vampire-fallback { display: block; }
html[data-theme="vampire"] #eye-3d[data-fallback-ready] #eye-icon { visibility: hidden; }

#eye-3d[role="button"] { cursor: pointer; border-radius: 3px; }
#eye-3d:focus-visible,
#theme-toggle:focus-visible { outline: 2px solid var(--prompt); outline-offset: 5px; }

html[data-theme="vampire"] .section::before {
  background: linear-gradient(90deg, #4f1421, #8e293c 45%, transparent);
}

html[data-theme="vampire"] .tl-dot {
  width: 9px;
  height: 9px;
  margin-left: 0;
  margin-top: 5px;
  background: var(--gold);
  border: 1px solid var(--gold-hi);
  transform: rotate(45deg);
  mask: none;
}

html[data-theme="vampire"] .tl-item:hover .tl-dot {
  background: #a43a4a;
  box-shadow: 0 0 10px rgba(125, 32, 48, 0.4);
}

html[data-theme="vampire"] .tl-demo,
html[data-theme="vampire"] .tl-tags span,
html[data-theme="vampire"] .proj-tags span {
  border-color: rgba(139, 56, 69, 0.3);
  border-top-color: rgba(184, 88, 101, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, #211216, #130b0e);
}

html[data-theme="vampire"] .tl-demo:hover,
html[data-theme="vampire"] .tl-item:hover .tl-tags span { border-color: #7d2030; }
html[data-theme="vampire"] .tl-body li { color: var(--dim); }
html[data-theme="vampire"] .tech-grid i::after { box-shadow: 0 2px 12px #000; }

html[data-theme="vampire"] .glow-card::after {
  background: conic-gradient(from calc(var(--start, 0) * 1deg) at var(--x, 50%) var(--y, 50%),
    transparent 0deg, rgba(90, 21, 37, 0.2) 20deg, #7d2030 55deg,
    #b85865 80deg, #4f1421 105deg, rgba(125, 32, 48, 0.25) 135deg,
    transparent 160deg, transparent 360deg);
}

html[data-theme="vampire"] .project-card {
  background: radial-gradient(ellipse at 50% 30%, rgba(70, 32, 46, 0.24), transparent 80%), #100c10;
  border-color: rgba(139, 56, 69, 0.23);
  box-shadow: inset 0 1px 0 rgba(184, 88, 101, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="vampire"] .project-mark {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.75));
}

html[data-theme="vampire"] .project-mark img,
html[data-theme="vampire"] .project-mark-brand img {
  width: 38%;
  height: 38%;
  opacity: 0.92;
  filter: sepia(0.4) saturate(0.65) hue-rotate(300deg) brightness(1.2);
}

html[data-theme="vampire"] .project-overlay { background: rgba(9, 7, 9, 0.9); }
html[data-theme="vampire"] .project-card::before {
  background: linear-gradient(115deg, transparent 32%, rgba(148, 31, 48, 0.16) 48%, transparent 62%);
}

html[data-theme="vampire"] .project-card:hover .proj-cta,
html[data-theme="vampire"] .project-card.touch-open .proj-cta {
  text-shadow: 0 0 12px rgba(125, 32, 48, 0.5);
}

@media (max-width: 580px) {
  .site-nav { padding-right: 56px; }
  #theme-toggle { position: fixed; top: 19px; right: 10px; background: var(--bg); }
  html[data-theme="vampire"] #avatar-wrap { margin-left: -48px; }
}