/* ============================================================
   HARSHITH PADAKANTI - CRAFT PORTFOLIO DESIGN SYSTEM V2
   In-Place Project Detail Modal + Spacious 720px Architecture
   Inspired by armandev.space, quantinium.dev, and nkcbuilds.com
   Zero em/en dashes. Only standard hyphens.
   ============================================================ */


:root {
  --font-geist-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
}

html {
  font-family: var(--font-geist-sans);
  scroll-behavior: smooth;
}

html.light {
  background-color: #ffffff;
  color: #18181b;
  color-scheme: light;
}

html.dark {
  background-color: #050507;
  color: #f4f4f5;
  color-scheme: dark;
}

body {
  background-color: #ffffff;
  color: #18181b;
  font-family: var(--font-geist-sans);
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark body {
  background-color: #050507;
  color: #f4f4f5;
}

/* Top Craft Navbar */
.craft-navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.dark .craft-navbar {
  background-color: rgba(0, 0, 0, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.craft-nav-inner {
  max-width: 720px;
  margin: 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.craft-nav-links {
  display: none;
}

@media (min-width: 640px) {
  .craft-nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
  }
}

.craft-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: #71717a;
  text-decoration: none;
  transition: color 0.15s ease;
  position: relative;
}

.craft-nav-link:hover, .craft-nav-link.active {
  color: #18181b;
}

html.dark .craft-nav-link:hover, html.dark .craft-nav-link.active {
  color: #fafafa;
}

/* Main Spacious Container (720px centered) */
.page-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

@media (min-width: 640px) {
  .page-container {
    padding: 0 24px;
  }
}

/* Vertical Guidelines Disabled for Clean Minimalist Breathability */
.container-guide-left,
.container-guide-right {
  display: none !important;
}

/* Project Cards (Arman + Ashutosh Craft Hybrid) */
.craft-project-card {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.project-page-nav, .project-page { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.project-page-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.project-page-nav a, .project-page-footer a { font-size: 13px; text-decoration: none; }
.project-page-nav a:hover, .project-page-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
#project-theme-toggle { font: 11px var(--font-geist-mono); color: inherit; cursor: pointer; border: 1px solid #71717a55; border-radius: 6px; padding: 7px 10px; background: transparent; }
.project-page-heading { padding: 40px 0 32px; }
.project-eyebrow { font: 11px var(--font-geist-mono); color: #71717a; margin-bottom: 14px; }
.project-page h1 { font-size: clamp(28px, 6vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -.04em; }
.project-page-intro { margin: 20px 0 24px; font-size: 15px; line-height: 1.8; color: #52525b; max-width: 62ch; }
.project-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 13px; }
.project-page-actions a { text-decoration: none; }
.project-action { padding: 10px 16px; background: #18181b; color: #fafafa; border-radius: 6px; }
.project-source { text-decoration: underline !important; text-underline-offset: 4px; }
.project-page-image { margin: 0; border: 1px solid #71717a33; border-radius: 10px; overflow: hidden; background: #f4f4f5; }
.project-page-image img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.project-page-status { padding: 14px 0 24px; border-bottom: 1px solid #71717a33; font: 11px var(--font-geist-mono); color: #71717a; }
.project-page-notes, .project-stack { padding-top: 30px; }
.project-page h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.project-page-notes ul { list-style: disc; padding-left: 18px; color: #52525b; font-size: 14px; line-height: 1.8; }
.project-page-notes li + li { margin-top: 12px; }
.project-stack > div { display: flex; flex-wrap: wrap; gap: 8px; }
.project-page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid #71717a33; margin-top: 48px; padding: 24px 0 36px; }
.project-page-footer span { font: 11px var(--font-geist-mono); color: #71717a; }
html.dark .project-page-intro, html.dark .project-page-notes ul { color: #d4d4d8; }
html.dark .project-eyebrow, html.dark .project-page-status, html.dark .project-page-footer span { color: #a1a1aa; }
html.dark .project-action { background: #fafafa; color: #18181b; }
html.dark .project-page-image { background: #18181b; }
@media (max-width: 480px) { .project-page-heading { padding-top: 24px; } }

html.dark .craft-project-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: #0c0c0e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.craft-project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08);
}

html.dark .craft-project-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.5);
}

.project-card-image-box {
  width: 100%;
  aspect-ratio: 16 / 9.5;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f4f4f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

html.dark .project-card-image-box {
  background-color: #050507;
  border-color: rgba(255, 255, 255, 0.06);
}

.project-card-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.craft-project-card:hover .project-card-image-box img {
  transform: scale(1.03);
}

.project-card-content {
  display: flex;
  flex-direction: column;
  padding: 12px 4px 4px 4px;
}

/* ============================================================
   IN-PLACE PROJECT DETAIL MODAL ("When pressed it shud show inside")
   Inspired by armandev.space DaemonDoc modal
   ============================================================ */
.project-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.project-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.project-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: min(90vh, 740px);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .project-modal-sheet {
  background-color: #0c0c0e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.7);
}

.project-modal-backdrop.open .project-modal-sheet {
  transform: scale(1) translateY(0);
}

.modal-preview-header {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #18181b;
  overflow: hidden;
  flex-shrink: 0;
}

.modal-preview-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-header-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.4) 100%);
}

.modal-close-icon-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.15s ease;
  z-index: 10;
}

.modal-close-icon-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
}

.modal-header-text {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  z-index: 5;
}

.modal-header-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 2px;
  font-family: var(--font-geist-mono), monospace;
}

.modal-header-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.modal-scroll-body {
  padding: 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}

.modal-status-live {
  background: rgba(113, 113, 122, 0.08);
  color: #52525b;
  border: 1px solid rgba(113, 113, 122, 0.25);
}

html.dark .modal-status-live {
  color: #d4d4d8;
  border-color: rgba(161, 161, 170, 0.25);
}

.modal-status-oss {
  background: rgba(113, 113, 122, 0.08);
  color: #52525b;
  border: 1px solid rgba(113, 113, 122, 0.25);
}

html.dark .modal-status-oss {
  color: #d4d4d8;
  border-color: rgba(161, 161, 170, 0.25);
}

.modal-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}

.modal-status-live .modal-status-dot {
  background-color: currentColor;
  box-shadow: none;
}

.modal-status-oss .modal-status-dot {
  background-color: currentColor;
  box-shadow: none;
}

.modal-description {
  font-size: 14px;
  line-height: 1.6;
  color: #52525b;
}

html.dark .modal-description {
  color: #a1a1aa;
}

.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 6px;
  font-family: var(--font-geist-mono), monospace;
}

.modal-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #3f3f46;
}

html.dark .modal-highlights-list li {
  color: #d4d4d8;
}

.modal-highlights-list li span.bullet {
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
}

.modal-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.modal-tech-pill {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-geist-mono), monospace;
  font-weight: 500;
  background: #f4f4f5;
  color: #3f3f46;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

html.dark .modal-tech-pill {
  background: #18181b;
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.08);
}

.modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

html.dark .modal-footer-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.modal-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: #18181b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

html.dark .modal-primary-btn {
  background: #fafafa;
  color: #18181b;
}

.modal-primary-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.modal-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: transparent;
  color: #71717a;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

html.dark .modal-secondary-btn {
  color: #a1a1aa;
  border-color: rgba(255, 255, 255, 0.12);
}

.modal-secondary-btn:hover {
  color: #18181b;
  border-color: rgba(0, 0, 0, 0.25);
}

html.dark .modal-secondary-btn:hover {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Custom Profile Hovercards */
.hovercard-wrapper {
  position: relative;
  display: inline-block;
}

.profile-hovercard {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 290px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 100;
  overflow: hidden;
  text-align: left;
}

html.dark .profile-hovercard {
  background: #0c0c0e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.6), 0 6px 16px -2px rgba(0, 0, 0, 0.4);
}

.hovercard-wrapper:hover .profile-hovercard,
.hovercard-wrapper:focus-within .profile-hovercard,
.profile-hovercard:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.twitter-card-banner {
  height: 52px;
  width: 100%;
  background: #52525b;
  position: relative;
}

.twitter-card-body {
  padding: 0 14px 14px 14px;
  position: relative;
}

.twitter-avatar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -24px;
  margin-bottom: 8px;
}

.twitter-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 3px solid #ffffff;
  object-fit: cover;
  background: #27272a;
}

html.dark .twitter-card-avatar {
  border-color: #111113;
}

.twitter-follow-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #0f1419;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

html.dark .twitter-follow-btn {
  background: #eff3f4;
  color: #0f1419;
}

.twitter-user-name {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #09090b;
}

html.dark .twitter-user-name {
  color: #f4f4f5;
}

.twitter-user-handle {
  font-size: 12px;
  color: #71717a;
  margin-bottom: 6px;
}

.twitter-bio {
  font-size: 12px;
  line-height: 1.4;
  color: #3f3f46;
  margin-bottom: 10px;
}

html.dark .twitter-bio {
  color: #a1a1aa;
}

.twitter-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #71717a;
}

.twitter-stats strong {
  color: #09090b;
}

html.dark .twitter-stats strong {
  color: #f4f4f5;
}

/* GitHub Card Details */
.github-card-body {
  padding: 14px;
}

.github-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.github-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

html.dark .github-avatar {
  border-color: rgba(255, 255, 255, 0.15);
}

.github-user-meta {
  display: flex;
  flex-direction: column;
}

.github-name {
  font-size: 13px;
  font-weight: 700;
  color: #09090b;
}

html.dark .github-name {
  color: #f4f4f5;
}

.github-login {
  font-size: 12px;
  color: #71717a;
}

.github-bio {
  font-size: 12px;
  line-height: 1.4;
  color: #3f3f46;
  margin-bottom: 10px;
}

html.dark .github-bio {
  color: #a1a1aa;
}

.github-stats-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: #71717a;
}

/* Command Palette Dialog */
.cmdk-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.cmdk-dialog-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cmdk-dialog-box {
  width: 90%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .cmdk-dialog-box {
  background: #0c0c0e;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.cmdk-dialog-overlay.open .cmdk-dialog-box {
  transform: scale(1);
}

.cmdk-input-wrapper {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  gap: 10px;
}

html.dark .cmdk-input-wrapper {
  border-color: rgba(255, 255, 255, 0.08);
}

.cmdk-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: inherit;
  font-family: inherit;
}

.cmdk-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #52525b;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

html.dark .cmdk-item {
  color: #a1a1aa;
}

.cmdk-item:hover, .cmdk-item.selected {
  background: #f4f4f5;
  color: #09090b;
}

html.dark .cmdk-item:hover, html.dark .cmdk-item.selected {
  background: #27272a;
  color: #fafafa;
}

/* Visitor Counter */
.visitor-counter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 12px;
  font-family: var(--font-geist-mono), monospace;
  color: #71717a;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 24px;
}

html.dark .visitor-counter-bar {
  border-color: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
}

.visitor-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: currentColor;
  margin-right: 6px;
  box-shadow: none;
}

/* Clean Card Utility */
.clean-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.dark .clean-card {
  background-color: #0c0c0e;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}



/* ============================================================
   AUDITED EXPERIENCES STYLING (FIXING SOLID GREY CONTAINER)
   ============================================================ */
.experiences-card-wrapper {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: visible;
  border: none;
  background-color: transparent;
  box-shadow: none;
}

html.dark .experiences-card-wrapper {
  border: none;
  background-color: transparent;
  box-shadow: none;
}

.experience-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 14px 0;
}

.experience-item:last-child {
  border-bottom: none;
}

html.dark .experience-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.exp-trigger {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.15s ease;
  user-select: none;
}

.exp-trigger:hover {
  background-color: rgba(0, 0, 0, 0.025);
}

html.dark .exp-trigger:hover {
  background-color: rgba(255, 255, 255, 0.035);
}

.exp-drawer-inner {
  padding: 14px 18px 18px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(250, 250, 250, 0.7);
  font-size: 13px;
  color: #52525b;
}

html.dark .exp-drawer-inner {
  border-top-color: rgba(255, 255, 255, 0.05);
  background-color: rgba(18, 18, 22, 0.5);
  color: #a1a1aa;
}

/* ============================================================
   INTERACTIVE THING CRAWLER (WEDNESDAY ADDAMS PET)
   Inspired by Quantinium Oneko cursor pet
   ============================================================ */
.thing-companion {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 52px;
  pointer-events: none;
  z-index: 900;
  user-select: none;
  touch-action: none;
  transform-origin: 50% 98%;
  transition: opacity 0.25s ease;
  will-change: transform;
}

.thing-companion:active {
  cursor: grabbing;
}

.thing-sprite {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.38));
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 98%;
}

.thing-shadow {
  position: absolute;
  bottom: -2px;
  left: 10%;
  width: 80%;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  transform-origin: center center;
}

html.dark .thing-shadow {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 70%);
}

.thing-speech-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #18181b;
  color: #fafafa;
  font-family: var(--font-geist-mono), monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 2.5px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

html.dark .thing-speech-bubble {
  background: #fafafa;
  color: #18181b;
}

.thing-speech-bubble.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

.thing-toggle-active {
  color: currentColor !important;
}

/* Hero Atmospheric Banner Container - height governed by 22vh utility */

#hero-banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}







.flight-button-module__NuUwIW__button{--btn-color:#fafafa;--btn-border:#0000000d;--text-color:#52525b;--plane-fill-color:#171717;background:var(--btn-color);color:var(--text-color);border:1px solid var(--btn-border);--text:var(--text-color);--text-opacity:1;--success:var(--text-color);--shadow:#0003;--success-x:-12;--success-stroke:65;--success-opacity:0;--border-radius:6;--overflow:hidden;--x:0;--y:0;--rotate:0;--plane-x:0;--plane-y:0;--plane-opacity:0;--trails:#0006;--trails-stroke:57;--left-wing-first-x:0;--left-wing-first-y:0;--left-wing-second-x:50;--left-wing-second-y:0;--left-wing-third-x:0;--left-wing-third-y:100;--left-body-first-x:50;--left-body-first-y:0;--left-body-second-x:50;--left-body-second-y:100;--left-body-third-x:0;--left-body-third-y:100;--right-wing-first-x:50;--right-wing-first-y:0;--right-wing-second-x:100;--right-wing-second-y:0;--right-wing-third-x:100;--right-wing-third-y:100;--right-body-first-x:50;--right-body-first-y:0;--right-body-second-x:50;--right-body-second-y:100;--right-body-third-x:100;--right-body-third-y:100;cursor:pointer;text-align:center;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;border-radius:6px;outline:none;min-width:140px;margin:0;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:500;line-height:24px;transition:all .3s;display:block;position:relative}.dark .flight-button-module__NuUwIW__button{--btn-color:#09090b;--btn-border:#ffffff0d;--text-color:#a1a1aa;--plane-fill-color:#fafafa;background:var(--btn-color);color:var(--text-color);border-color:var(--btn-border);--text:var(--text-color);--success:var(--text-color);--shadow:#000c;--trails:#ffffff80}.flight-button-module__NuUwIW__plane,.flight-button-module__NuUwIW__trails{pointer-events:none;position:absolute}.flight-button-module__NuUwIW__plane{filter:drop-shadow(0 3px 6px var(--shadow));transform:translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--rotate) * 1deg)) translateZ(0);inset:0}.flight-button-module__NuUwIW__left,.flight-button-module__NuUwIW__right{opacity:var(--plane-opacity);transform:translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);position:absolute;inset:0}.flight-button-module__NuUwIW__left:before,.flight-button-module__NuUwIW__left:after,.flight-button-module__NuUwIW__right:before,.flight-button-module__NuUwIW__right:after{content:"";border-radius:calc(var(--border-radius) * 1px);transform:translate(var(--part-x,0.4%), var(--part-y,0)) translateZ(0);z-index:var(--z-index,2);background:var(--plane-fill-color);clip-path:polygon(calc(var(--first-x,var(--left-wing-first-x)) * 1%) calc(var(--first-y,var(--left-wing-first-y)) * 1%), calc(var(--second-x,var(--left-wing-second-x)) * 1%) calc(var(--second-y,var(--left-wing-second-y)) * 1%), calc(var(--third-x,var(--left-wing-third-x)) * 1%) calc(var(--third-y,var(--left-wing-third-y)) * 1%));position:absolute;inset:0}.flight-button-module__NuUwIW__left:after{--part-x:-1%;--z-index:1;--first-x:var(--left-body-first-x);--first-y:var(--left-body-first-y);--second-x:var(--left-body-second-x);--second-y:var(--left-body-second-y);--third-x:var(--left-body-third-x);--third-y:var(--left-body-third-y)}.flight-button-module__NuUwIW__right:before{--part-x:-1%;--z-index:2;--first-x:var(--right-wing-first-x);--first-y:var(--right-wing-first-y);--second-x:var(--right-wing-second-x);--second-y:var(--right-wing-second-y);--third-x:var(--right-wing-third-x);--third-y:var(--right-wing-third-y)}.flight-button-module__NuUwIW__right:after{--part-x:0;--z-index:1;--first-x:var(--right-body-first-x);--first-y:var(--right-body-first-y);--second-x:var(--right-body-second-x);--second-y:var(--right-body-second-y);--third-x:var(--right-body-third-x);--third-y:var(--right-body-third-y)}.flight-button-module__NuUwIW__trails{fill:none;width:33px;height:64px;stroke:var(--trails);stroke-linecap:round;stroke-width:2px;stroke-dasharray:57;stroke-dashoffset:calc(var(--trails-stroke) * 1px);display:block;top:-4px;left:16px;transform:rotate(68deg)translateZ(0)}.flight-button-module__NuUwIW__defaultText{z-index:4;opacity:var(--text-opacity);display:block;position:relative}.flight-button-module__NuUwIW__successText{z-index:0;transform:translateX(calc(var(--success-x) * 1px)) translateZ(0);opacity:var(--success-opacity);color:var(--success);display:block;position:absolute;top:8px;left:0;right:0}.flight-button-module__NuUwIW__successText svg{vertical-align:top;fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:65;width:16px;height:16px;stroke:var(--success);stroke-dashoffset:calc(var(--success-stroke) * 1px);margin:4px 8px 0 0;display:inline-block}.flight-button-module__NuUwIW__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}


.flip-cover-button-module__b7eBLq__section{perspective:300px;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;background:#a9adb6;border-radius:4px;justify-content:center;align-items:center;display:inline-flex;position:relative;box-shadow:0 -1px 2px #fff,inset 0 1px 2px #0003,inset 0 .2rem .6rem #0000001a}.dark .flip-cover-button-module__b7eBLq__section{background:#3f3f46;box-shadow:0 -1px 2px #ffffff1a,inset 0 1px 2px #0009,inset 0 .2rem .6rem #00000080}.flip-cover-button-module__b7eBLq__section,.flip-cover-button-module__b7eBLq__section div{transition-duration:.6s;transition-timing-function:cubic-bezier(.2,.7,.1,1.1)}.flip-cover-button-module__b7eBLq__button{opacity:0;z-index:5;justify-content:center;align-items:center;text-decoration:none;display:flex;position:absolute;inset:0}.flip-cover-button-module__b7eBLq__section:hover .flip-cover-button-module__b7eBLq__button{opacity:1}.flip-cover-button-module__b7eBLq__cover{transform-origin:bottom;transform-style:preserve-3d;pointer-events:none;z-index:100;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.flip-cover-button-module__b7eBLq__innie,.flip-cover-button-module__b7eBLq__outie,.flip-cover-button-module__b7eBLq__spine,.flip-cover-button-module__b7eBLq__shadow{width:100%;position:absolute}.flip-cover-button-module__b7eBLq__innie,.flip-cover-button-module__b7eBLq__outie{white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;height:100%;display:flex}.flip-cover-button-module__b7eBLq__innie{text-shadow:0 -1px 2px #0006;background-color:#18181b;background-image:linear-gradient(#0000 0%,#0000004d 100%)}.flip-cover-button-module__b7eBLq__spine{transform-origin:top;background:#27272a;height:.15rem;top:.15rem;left:0;transform:rotateX(90deg)}.flip-cover-button-module__b7eBLq__outie{transform:translateZ(.15rem)}.flip-cover-button-module__b7eBLq__shadow{transform-origin:top;opacity:0;z-index:0;pointer-events:none;background-image:linear-gradient(#0009 0%,#0000 100%);border-radius:.3rem;height:2.2rem;top:100%;left:0;transform:rotateX(90deg)}.flip-cover-button-module__b7eBLq__section:hover{background:#ebeff2}.dark .flip-cover-button-module__b7eBLq__section:hover{background:#52525b}.flip-cover-button-module__b7eBLq__section:hover .flip-cover-button-module__b7eBLq__cover{transform:rotateX(-120deg)}.flip-cover-button-module__b7eBLq__section:hover .flip-cover-button-module__b7eBLq__innie{background-color:#27272a}.flip-cover-button-module__b7eBLq__section:hover .flip-cover-button-module__b7eBLq__spine{background-color:#3f3f46}.flip-cover-button-module__b7eBLq__section:hover .flip-cover-button-module__b7eBLq__shadow{opacity:1;transform:rotateX(45deg)scale(.95)}@media (prefers-reduced-motion:reduce){.flip-cover-button-module__b7eBLq__section,.flip-cover-button-module__b7eBLq__section div{transition-duration:0s!important}}

/* Thing Crawler (Wednesday Addams Hand) */
#thing-crawler {
  position: fixed;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

#thing-crawler.visible {
  opacity: 1;
}

#thing-crawler img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 70%;
}

@keyframes thing-crawl {
  0%   { transform: translateY(0) rotate(-6deg); }
  25%  { transform: translateY(-5px) rotate(4deg); }
  50%  { transform: translateY(0) rotate(-6deg); }
  75%  { transform: translateY(-5px) rotate(4deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}

#thing-crawler.moving img {
  animation: thing-crawl 0.45s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #thing-crawler.moving img { animation: none; }
}

/* ============================================================
   PERSONA REVEAL BUTTON (REVEAL IDENTITY)
   ============================================================ */
.persona-reveal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #18181b;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

.persona-reveal-btn:hover {
  color: #000000;
  background: #f4f4f5;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.persona-reveal-btn:active {
  transform: scale(0.95);
}

html.dark .persona-reveal-btn {
  color: #fafafa;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark .persona-reveal-btn:hover {
  color: #ffffff;
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.3);
}

.persona-reveal-btn.revealing {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/* ============================================================
   ANTI-SLOP GOTHIC MINIMALIST & BRUTALIST COMPONENTS
   Zero sloppy boxes, pure typography, reliable dark mode
   ============================================================ */

/* Profile Direct Links (Email, GitHub, Twitter, etc.) */
.profile-link {
  color: #71717a;
  text-decoration: none;
  font-family: var(--font-geist-mono), monospace;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.profile-link:hover {
  color: #18181b;
  text-decoration: underline;
  text-underline-offset: 4px;
}

html.dark .profile-link {
  color: #a1a1aa;
}

html.dark .profile-link:hover {
  color: #fafafa;
}

/* Command Palette Trigger Button */
.cmdk-trigger-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-geist-mono), monospace;
  background-color: #f4f4f5;
  color: #52525b;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
  user-select: none;
}

.cmdk-trigger-btn:hover {
  background-color: #e4e4e7;
  color: #18181b;
}

html.dark .cmdk-trigger-btn {
  background-color: #111114;
  color: #a1a1aa;
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark .cmdk-trigger-btn:hover {
  background-color: #18181b;
  color: #fafafa;
}

/* Minimalist Skill Badges (No Emojis, No Slop) */
.skill-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-geist-mono), monospace;
  font-weight: 500;
  background-color: #f4f4f5;
  color: #27272a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}

.skill-badge:hover {
  background-color: #e4e4e7;
  color: #09090b;
}

html.dark .skill-badge {
  background-color: #111114;
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark .skill-badge:hover {
  background-color: #18181b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

/* Extra Projects Button */
.extra-projects-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-geist-mono), monospace;
  font-weight: 500;
  background-color: #f4f4f5;
  color: #3f3f46;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.extra-projects-btn:hover {
  background-color: #e4e4e7;
  color: #18181b;
}

html.dark .extra-projects-btn {
  background-color: #111114;
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark .extra-projects-btn:hover {
  background-color: #18181b;
  color: #ffffff;
}

/* Expand All Experiences Button */
.exp-expand-btn {
  font-size: 12px;
  font-family: var(--font-geist-mono), monospace;
  font-weight: 500;
  color: #71717a;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.exp-expand-btn:hover {
  background-color: #f4f4f5;
  color: #18181b;
}

html.dark .exp-expand-btn {
  color: #a1a1aa;
}

html.dark .exp-expand-btn:hover {
  background-color: #18181b;
  color: #ffffff;
}

/* Experience Tags */
.exp-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-geist-mono), monospace;
  background-color: #f4f4f5;
  color: #52525b;
}

html.dark .exp-tag {
  background-color: #18181b;
  color: #d4d4d8;
}

/* Consistency Streak Monochrome Cells */
.streak-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.streak-cell.lvl-1 { background-color: #e4e4e7; }
.streak-cell.lvl-2 { background-color: #a1a1aa; }
.streak-cell.lvl-3 { background-color: #52525b; }
.streak-cell.lvl-4 { background-color: #27272a; }

html.dark .streak-cell.lvl-1 { background-color: #27272a; }
html.dark .streak-cell.lvl-2 { background-color: #3f3f46; }
html.dark .streak-cell.lvl-3 { background-color: #71717a; }
html.dark .streak-cell.lvl-4 { background-color: #d4d4d8; }



/* Keep keyboard focus visible in both themes. */
.source-skill-group { width: 100%; }
.experience-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(113, 113, 122, 0.18);
  border-radius: 8px;
  background: #fff;
}
.experience-logo img { width: 100%; height: 100%; object-fit: contain; }
.experience-logo .brand-for-dark { display: none; }
html.dark .experience-logo { background: #141418; border-color: rgba(255, 255, 255, 0.08); }
html.dark .experience-logo-nsoc { background: #09090b; }
html.dark .experience-logo .brand-for-light { display: none; }
html.dark .experience-logo .brand-for-dark { display: block; }
.experience-logo-cmr { justify-content: flex-start; }
.experience-logo-cmr img { width: auto; max-width: none; height: 32px; }
.experience-item .exp-trigger { gap: 16px; }
.experience-item .exp-trigger > div:first-child { min-width: 0; gap: 14px; }
.experience-label { min-width: 0; }
.experience-label h3 { line-height: 1.4; }
.experience-label p { margin-top: 2px; }
.experience-meta { display: flex; align-items: center; gap: 12px; text-align: right; flex-shrink: 0; }
.experience-meta > div { max-width: 180px; }
.experience-meta span:first-child { font-size: 12px; }
.experience-meta span:nth-child(2) { font-size: 11px; }
.experience-meta svg { flex-shrink: 0; }
.exp-drawer-inner li + li { margin-top: 8px; }
@media (max-width: 540px) {
  .experience-item .exp-trigger { position: relative; align-items: flex-start; padding: 16px 36px 16px 14px; flex-wrap: wrap; gap: 7px; }
  .experience-item .exp-trigger > div:first-child { width: 100%; gap: 12px; }
  .experience-meta { width: 100%; padding-left: 54px; text-align: left; }
  .experience-meta > div { display: flex; flex-wrap: wrap; gap: 2px 10px; max-width: none; }
  .experience-meta svg { position: absolute; right: 14px; top: 28px; }
}

.source-skill-group h3 {
  font: 11px var(--font-geist-mono);
  margin: 14px 0 8px;
  color: #71717a;
}
.source-skill-group .skill-badge { margin: 0 5px 6px 0; }
:where(a, button, [role="button"], input):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
html.light .text-zinc-400 { color: #71717a; }
html.dark .dark-invert { filter: invert(1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}