:root {
      /* Caseyland Palette - Darker Midnight Base */
      --bg-dark: #030814;
      --bg-card: rgba(4, 13, 26, 0.92);
      --panel-bg: rgba(4, 13, 26, 0.92);
      --bg-card-hover: rgba(6, 20, 42, 0.96);
      --border-subtle: rgba(19, 248, 241, 0.18);
      --panel-border: rgba(19, 248, 241, 0.18);
      --border-accent: #13f8f1;
      
      --text-main: #ffffff;
      --text-primary: #ffffff;
      --text-muted: #d1d5db;
      --text-dim: #9ca3af;
      --text-secondary: #9ca3af;
      
      --accent: #13f8f1;       /* Cyan */
      --cyan-accent: #13f8f1;  /* Cyan Alias */
      --accent-cyan: #13f8f1;  /* Cyan Alias */
      --accent-yellow: #ffff00;/* Bright Yellow on hover/accent */
      --accent-magenta: #ff00ff;/* Electric Magenta */
      --accent-magenta-bg: rgba(255, 0, 255, 0.1);
      --accent-glow: rgba(19, 248, 241, 0.15);
      
      --max-width: 1100px;
      --radius-lg: 0px;
      --radius-md: 0px;
      --radius-sm: 0px;
      --transition: all 0.2s ease-in-out;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 65px;
      font-family: 'Inconsolata', monospace, sans-serif;
      background-color: var(--bg-dark);
      background-image: radial-gradient(circle at 50% 0%, rgba(19, 248, 241, 0.05) 0%, rgba(3, 8, 20, 0) 70%);
      background-attachment: fixed;
      color: var(--text-main);
      line-height: 1.6;
      font-size: 16px;
    }

    section {
      scroll-margin-top: 65px;
      margin-bottom: 1.25rem;
    }

    h1, h2, h3, h4, .section-title, .employer-name, .hero-name {
      font-family: 'Varela Round', Arial, sans-serif;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* Ambient Background Glows */
    .bg-glow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }

    .glow-1 {
      position: absolute;
      top: -10%;
      right: -5%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, rgba(0,0,0,0) 70%);
      border-radius: 50%;
    }

    .glow-2 {
      position: absolute;
      bottom: 20%;
      left: -10%;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, rgba(0,0,0,0) 70%);
      border-radius: 50%;
    }

    .container {
      max-width: var(--max-width);
      width: 100%;
      margin: 0 auto;
      padding: 1.25rem 1.25rem 3rem 1.25rem;
    }

    /* Floating App Header Card */
    .app-header {
      position: relative;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.5rem;
      background: var(--bg-card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-subtle);
      border-radius: 0;
      margin-bottom: 1.25rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .brand-group {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      text-decoration: none;
    }

    .brand-icon {
      width: 40px;
      height: 40px;
      background: rgba(19, 248, 241, 0.12);
      border: 1px solid rgba(19, 248, 241, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #13f8f1;
      flex-shrink: 0;
      box-shadow: 0 0 12px rgba(19, 248, 241, 0.2);
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .brand-title {
      font-family: 'Varela Round', Arial, sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 2px;
      line-height: 1;
      margin: 0 0 5px 0;
      color: var(--accent-magenta);
      text-transform: uppercase;
    }

    .brand-title .brand-accent {
      color: var(--accent);
    }

    .brand-title-text {
      display: inline;
    }

    .brand-title-matrix-wrap {
      display: none;
    }

    .brand-subtitle {
      font-family: 'Inconsolata', monospace;
      font-size: 0.7rem;
      color: var(--text-dim);
      line-height: 1.25;
      letter-spacing: 0.05em;
      margin: 0;
      text-transform: uppercase;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      position: relative;
      z-index: 100;
    }

    .header-action-btn {
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
      padding: 0;
      border-radius: 0;
    }

    .header-action-btn svg {
      width: 16px;
      height: 16px;
      stroke: #ffffff;
    }

    .header-action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
    }

    .header-action-btn.active {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(255, 255, 255, 0.5);
      color: #ffffff;
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
    }

    /* 1kx Projects Modal Navigation */
    .app-nav-container {
      position: relative;
      display: inline-flex;
      align-items: center;
      z-index: 100;
    }

    .app-nav-container.active,
    .app-nav-container:has(.app-nav-modal.visible) {
      z-index: 10000;
    }

    .app-nav-modal {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 10000;
      background: rgba(4, 13, 26, 0.98);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-accent);
      padding: 10px 8px;
      width: 255px;
      max-width: calc(100vw - 2rem);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      text-align: left;
      user-select: none;
      font-family: 'Inconsolata', monospace;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8);
    }

    .app-nav-modal.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      z-index: 10000;
    }

    .app-nav-title {
      font-family: 'Varela Round', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      padding: 3px 8px 6px 8px;
      border-bottom: 1px solid var(--border-subtle);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .app-nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .app-nav-item {
      margin: 0;
      padding: 0;
    }

    .app-nav-link {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 6px 8px;
      color: var(--text-main);
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 4px;
      transition: all 0.15s ease;
      cursor: pointer;
    }

    .app-nav-icon {
      width: 30px;
      height: 30px;
      margin-top: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.04);
      border-radius: 3px;
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .app-nav-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    .app-nav-icon.icon-1kx {
      color: #00f0ff;
      border-color: rgba(0, 240, 255, 0.25);
      background: rgba(0, 240, 255, 0.08);
    }

    .app-nav-icon.icon-1kx svg {
      width: 24px;
      height: 24px;
    }

    .app-nav-icon.icon-football {
      color: #33ff33;
      border-color: rgba(51, 255, 51, 0.25);
      background: rgba(51, 255, 51, 0.08);
    }

    .app-nav-icon.icon-football svg {
      width: 18px;
      height: 18px;
    }

    .app-nav-icon.icon-caseyland {
      color: #ff88ff;
      border-color: rgba(255, 0, 255, 0.25);
      background: rgba(255, 0, 255, 0.08);
    }

    .app-nav-icon.icon-caseyland svg {
      width: 28px;
      height: 28px;
    }

    .app-nav-icon.icon-liambot {
      color: #a5b4fc;
      border-color: rgba(165, 180, 252, 0.25);
      background: rgba(165, 180, 252, 0.08);
    }

    .app-nav-icon.icon-caseycase {
      color: #7ed2e6;
      border-color: rgba(79, 162, 184, 0.25);
      background: rgba(79, 162, 184, 0.08);
    }

    .app-nav-icon.icon-caseycase svg {
      width: 24px;
      height: 24px;
    }

    .app-nav-icon.icon-casey {
      color: #13f8f1;
      border-color: rgba(19, 248, 241, 0.25);
      background: rgba(19, 248, 241, 0.08);
    }

    .app-nav-icon.icon-casey svg {
      width: 20px;
      height: 20px;
    }

    .app-nav-link:hover .app-nav-icon.icon-1kx {
      border-color: rgba(0, 240, 255, 0.6);
      background: rgba(0, 240, 255, 0.16);
      box-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
    }

    .app-nav-link:hover .app-nav-icon.icon-football {
      border-color: rgba(51, 255, 51, 0.6);
      background: rgba(51, 255, 51, 0.16);
      box-shadow: 0 0 6px rgba(51, 255, 51, 0.3);
    }

    .app-nav-link:hover .app-nav-icon.icon-caseyland {
      border-color: rgba(255, 0, 255, 0.6);
      background: rgba(255, 0, 255, 0.16);
      box-shadow: 0 0 6px rgba(255, 0, 255, 0.3);
    }

    .app-nav-link:hover .app-nav-icon.icon-liambot {
      border-color: rgba(165, 180, 252, 0.6);
      background: rgba(165, 180, 252, 0.16);
      box-shadow: 0 0 6px rgba(165, 180, 252, 0.3);
    }

    .app-nav-link:hover .app-nav-icon.icon-caseycase {
      border-color: rgba(79, 162, 184, 0.6);
      background: rgba(79, 162, 184, 0.16);
      box-shadow: 0 0 6px rgba(79, 162, 184, 0.3);
    }

    .app-nav-link:hover .app-nav-icon.icon-casey {
      border-color: rgba(19, 248, 241, 0.6);
      background: rgba(19, 248, 241, 0.16);
      box-shadow: 0 0 6px rgba(19, 248, 241, 0.3);
    }

    .app-nav-text-col {
      display: flex;
      flex-direction: column;
      gap: 2px;
      width: 100%;
    }

    .app-nav-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .app-nav-name {
      font-family: 'Varela Round', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.15;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .app-nav-sub {
      font-family: 'Inconsolata', monospace;
      font-size: 0.72rem;
      color: var(--text-dim);
      line-height: 1.25;
      font-weight: 400;
      transition: color 0.15s ease;
    }

    .app-nav-link:hover {
      background: rgba(255, 255, 0, 0.12);
      border-color: var(--accent-yellow);
      transform: translateX(-2px);
    }

    .app-nav-link:hover .app-nav-name {
      color: var(--accent-yellow);
    }

    .app-nav-link:hover .app-nav-sub {
      color: #ffffff;
    }

    .app-nav-link:hover .app-nav-ext {
      color: var(--accent-yellow);
      opacity: 1;
    }

    .app-nav-link:active {
      transform: scale(0.98);
    }

    .app-nav-link.current-app {
      background: rgba(19, 248, 241, 0.08);
      border-color: var(--border-subtle);
    }

    .app-nav-link.current-app .app-nav-name {
      color: var(--accent);
      font-weight: 700;
    }

    .app-nav-active-dot {
      width: 6px;
      height: 6px;
      border-radius: 0;
      background-color: var(--accent);
      box-shadow: 0 0 8px rgba(19, 248, 241, 0.85), 0 0 12px rgba(19, 248, 241, 0.45);
      display: inline-block;
      flex-shrink: 0;
    }

    .app-nav-ext {
      opacity: 0.7;
      margin-left: 2px;
    }

    /* Section Quick Nav Box (Full-Width Sticky Button Bar) */
    .section-nav-card {
      position: sticky;
      top: 0;
      z-index: 95;
      width: 100%;
      background: rgba(4, 13, 26, 0.98);
      border: 1px solid var(--border-subtle);
      border-radius: 0;
      padding: 0.35rem;
      margin-bottom: 1.25rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }

    /* Section Quick Nav Links: Standardized Full-Width Flex Spread (Zero Blank Spaces) */
    .nav-links {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.35rem;
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 0;
      overscroll-behavior-x: contain;
    }

    .nav-links li {
      margin: 0;
      padding: 0;
      display: flex;
      flex: 1 1 0;
      min-width: 0;
    }

    @media (min-width: 601px) and (max-width: 899px) {
      .section-nav-card {
        padding: 0.35rem 0.4rem;
        margin-bottom: 1rem;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(4, 13, 26, 0.98) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
        overflow: hidden !important;
      }
      [data-theme="pixel-dark"] .section-nav-card {
        background: #0e1217 !important;
        border-color: #30363d !important;
        box-shadow: 2px 2px 0 #000000 !important;
      }
      [data-theme="pixel-light"] .section-nav-card {
        background: #e2dfd6 !important;
        border-color: #1c1f24 !important;
        box-shadow: 2px 2px 0 #1c1f24 !important;
      }
      .nav-links {
        gap: 0.25rem !important;
      }
      .nav-links a {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        text-align: center !important;
      }
      [data-theme^="pixel"] .nav-links a {
        font-size: 10.5px !important;
        padding: 0.35rem 0.25rem !important;
        letter-spacing: 0.02em !important;
      }
    }

    @media (min-width: 900px) {
      .nav-links li {
        flex: 1 1 calc(16.666% - 0.35rem);
      }
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0.6rem 0.5rem;
      background: rgba(255, 0, 255, 0.04);
      border: 1px solid rgba(255, 0, 255, 0.18);
      color: var(--accent-magenta);
      font-family: 'Varela Round', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 0;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      user-select: none;
      white-space: nowrap;
    }

    .nav-links a:hover {
      color: var(--accent-yellow);
      background: rgba(255, 255, 0, 0.08);
      border-color: var(--accent-yellow);
      box-shadow: 0 0 12px rgba(255, 255, 0, 0.2);
    }

    .nav-links a.active {
      background: rgba(19, 248, 241, 0.16);
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 16px var(--accent-glow);
    }

    /* Hero Banner */
    .hero-card {
      background: rgba(0, 24, 68, 0.9);
      border: 1px solid var(--border-subtle);
      border-left: none;
      border-radius: 0;
      padding: 1.75rem 1.75rem 1.75rem 3.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.35rem;
      align-items: flex-start;
      margin-bottom: 1.25rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    .hero-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      background: linear-gradient(180deg, 
        #13f8f1 0%, #13f8f1 33.33%, 
        #ffff00 33.33%, #ffff00 66.66%, 
        #ff00ff 66.66%, #ff00ff 100%);
    }

    .hero-header-row {
      display: flex;
      align-items: stretch;
      gap: 1.75rem;
      width: 100%;
    }

    .hero-photo-wrapper {
      position: relative;
      flex-shrink: 0;
      width: 124px;
      height: 124px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      margin-top: 0;
      border-radius: 20px;
      overflow: hidden;
    }

    .hero-photo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border: none;
      border-radius: 20px;
      box-shadow: none;
      transition: opacity 12s ease-out;
    }

    .hero-photo-hd {
      opacity: 1;
      z-index: 2;
    }

    .hero-photo-pixel {
      opacity: 0;
      z-index: 1;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .hero-photo-wrapper.is-pixel .hero-photo-pixel,
    .hero-photo-wrapper.is-modern-revealing-pixel .hero-photo-pixel {
      opacity: 1;
      z-index: 3;
      transition: opacity 1s ease-in-out;
    }

    .hero-photo-wrapper.is-pixel .hero-photo-hd,
    .hero-photo-wrapper.is-modern-revealing-pixel .hero-photo-hd {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .hero-header-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      min-width: 0;
    }

    .hero-details {
      width: 100%;
    }

    .hero-name {
      font-family: 'Varela Round', sans-serif;
      font-size: 2.75rem;
      font-weight: 700;
      letter-spacing: 3px;
      line-height: 1.15;
      margin-bottom: 0.35rem;
      color: var(--accent-magenta);
    }

    .hero-name-text {
      display: inline;
    }

    .hero-name-matrix-wrap {
      display: none;
    }

    .hero-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem 0.75rem;
    }

    @media (min-width: 769px) {
      .hero-title {
        flex-wrap: nowrap;
        white-space: nowrap;
      }
    }

    .hero-title-item {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      white-space: nowrap;
    }

    .hero-title-secondary-group {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      white-space: nowrap;
    }

    .hero-title-sep {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 7px;
      height: 7px;
      background-color: var(--accent);
      border-radius: 0;
      flex-shrink: 0;
      box-shadow: 0 0 6px var(--accent-glow);
      vertical-align: middle;
      cursor: pointer !important;
      position: relative;
      top: 1px;
      outline: none;
      z-index: 20;
      user-select: none;
      -webkit-user-select: none;
      transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .hero-title-sep::before {
      content: '';
      position: absolute;
      top: -12px;
      bottom: -12px;
      left: -12px;
      right: -12px;
      background: transparent;
      pointer-events: auto;
      cursor: pointer;
    }

    .hero-title-sep:hover,
    .hero-title-sep:focus-visible {
      transform: scale(1.6);
      background-color: var(--accent-yellow);
      box-shadow: 0 0 10px var(--accent-yellow);
    }

    .hero-title.is-stacked {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }

    @media (max-width: 768px) {
      .hero-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }
    }

    .hero-title.is-stacked .hero-title-sep {
      display: inline-flex;
      margin: 0;
      vertical-align: middle;
    }

    .hero-title .badge,
    .hero-affiliation .badge {
      font-size: 0.78rem;
      padding: 0.22rem 0.65rem;
      background: rgba(255, 255, 0, 0.1);
      border: 1px solid var(--accent-yellow);
      border-radius: 0;
      color: var(--accent-yellow);
      font-weight: 700;
      letter-spacing: 0.06em;
      vertical-align: middle;
      display: inline-flex;
      align-items: center;
      text-transform: uppercase;
      font-family: 'Varela Round', Arial, sans-serif;
    }

    .hero-affiliation {
      margin-top: 0.45rem;
      display: flex;
      align-items: center;
    }

    .hero-summary {
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1.65;
      margin-bottom: 1.5rem;
    }

    .quick-stats-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      border-top: 1px solid var(--border-subtle);
      padding-top: 1.25rem;
      flex-wrap: wrap;
    }

    .contact-reveal-container {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .contact-details-box {
      display: none;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .contact-text-group {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      font-size: 0.85rem;
    }

    .quick-stats {
      display: flex;
      gap: 2rem;
      align-items: center;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .stat-value {
      font-family: 'Outfit', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-main);
      text-align: left;
    }

    .stat-label {
      font-size: 0.8rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-align: left;
    }

    /* Section Layout */
    .section-title {
      font-family: 'Outfit', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.2;
      margin-top: 0;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .section-title svg {
      color: var(--accent);
      width: 1.05em;
      height: 1.05em;
      flex-shrink: 0;
      align-self: flex-start;
      margin-top: calc((1.2em - 1.05em) / 2);
      margin-top: calc((1lh - 1.05em) / 2);
    }

    .section-title span {
      display: inline-block;
      line-height: inherit;
    }

    /* Grid Layout for Skills & Certs / Bottom 2-Col Grid */
    .grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      margin-bottom: 1.25rem;
      align-items: start;
    }

    @media (min-width: 601px) {
      .grid-2col #projects {
        margin-top: 1.75rem;
      }

      .grid-2col #projects .card,
      .grid-2col #certifications .card {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }

      .grid-2col #projects .personal-project-list,
      .grid-2col #certifications .cert-list {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        gap: 0.65rem;
      }
    }



    .card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-left: none;
      border-radius: 0;
      padding: 1.75rem 1.75rem 1.75rem 3.5rem;
      backdrop-filter: blur(10px);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      background: linear-gradient(180deg, 
        #13f8f1 0%, #13f8f1 33.33%, 
        #ffff00 33.33%, #ffff00 66.66%, 
        #ff00ff 66.66%, #ff00ff 100%);
    }

    .card:hover {
      border-color: rgba(255, 255, 255, 0.15);
      background: var(--bg-card-hover);
    }

    .card.target-pulse {
      animation: cardTargetPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes cardTargetPulse {
      0% {
        border-color: var(--accent-cyan, #00d4ff);
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.45), 0 8px 32px rgba(0, 0, 0, 0.5);
      }
      50% {
        border-color: var(--accent-cyan, #00d4ff);
        box-shadow: 0 0 32px rgba(0, 212, 255, 0.65), 0 8px 32px rgba(0, 0, 0, 0.5);
      }
      100% {
        border-color: var(--border-subtle);
        box-shadow: none;
      }
    }

    /* Certifications List */
    .cert-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .cert-item {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      padding: 0.75rem 1rem;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 0;
      border: 1px solid rgba(255, 255, 255, 0.04);
      transition: var(--transition);
    }

    .cert-item:hover {
      border-color: var(--border-accent);
      transform: translateX(4px);
    }

    .cert-icon {
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 0.15rem;
    }

    .cert-title {
      font-weight: 600;
      font-size: 0.95rem;
    }

    .cert-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    /* Skills Pill Cloud */
    .skills-category {
      margin-bottom: 1.25rem;
    }

    .skills-category-name {
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--cyan-accent);
      margin-bottom: 0.6rem;
    }

    .pill-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .pill {
      font-size: 0.8rem;
      padding: 0.3rem 0.75rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 0;
      color: var(--text-muted);
      transition: var(--transition);
    }



    .pill.highlight {
      background: rgba(255, 0, 255, 0.15);
      border-color: var(--accent-magenta);
      color: var(--accent-magenta);
    }

    /* Experience Timeline */
    .timeline-controls {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }

    .filter-btn {
      background: rgba(19, 248, 241, 0.08);
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: 0.5rem 1.2rem;
      border-radius: 0;
      font-size: 0.85rem;
      font-weight: 700;
      font-family: 'Varela Round', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: var(--transition);
    }

    .filter-btn:hover, .filter-btn.active {
      background: var(--accent-yellow);
      color: #000;
      border-color: var(--accent-yellow);
    }

    .experience-feed {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .job-card {
      position: relative;
    }

    .job-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .job-client {
      font-family: 'Outfit', sans-serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--text-main);
    }

    .job-role-badge {
      display: inline-block;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--accent);
      background: var(--accent-glow);
      padding: 0.2rem 0.75rem;
      border-radius: 0;
      margin-top: 0.2rem;
    }

    .job-dates {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-dim);
      background: rgba(255, 255, 255, 0.03);
      padding: 0.3rem 0.75rem;
      border-radius: 0;
      border: 1px solid var(--border-subtle);
    }

    .job-desc {
      color: var(--text-muted);
      font-size: 0.95rem;
      margin-bottom: 1rem;
      line-height: 1.6;
    }

    .job-responsibilities {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .job-responsibilities li {
      position: relative;
      padding-left: 1.25rem;
      color: #cbd5e1;
      font-size: 0.9rem;
    }

    .job-responsibilities li::before {
      content: "▸";
      position: absolute;
      left: 0;
      color: var(--accent);
    }

    .tech-stack-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding-top: 0.75rem;
      border-top: 1px dashed var(--border-subtle);
    }

    .tech-stack-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-dim);
      font-weight: 600;
    }

    /* Education Section */
    .edu-card {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .edu-icon {
      width: 54px;
      height: 54px;
      border-radius: 0;
      background: rgba(56, 189, 248, 0.1);
      border: 1px solid rgba(56, 189, 248, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cyan-accent);
      flex-shrink: 0;
      margin-top: 0.1rem;
    }

    .edu-school {
      font-family: 'Outfit', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }

    /* Personal Projects Section */
    .personal-project-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .personal-project-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 0;
      transition: var(--transition);
    }

    .personal-project-item:hover {
      transform: translateX(4px);
    }

    .personal-project-item.item-1kx:hover {
      border-color: rgba(0, 240, 255, 0.35);
      background: rgba(0, 240, 255, 0.04);
    }
    .personal-project-item.item-1kx:hover .personal-project-title {
      color: #00f0ff;
    }

    .personal-project-item.item-football:hover {
      border-color: rgba(51, 255, 51, 0.35);
      background: rgba(51, 255, 51, 0.04);
    }
    .personal-project-item.item-football:hover .personal-project-title {
      color: #33ff33;
    }

    .personal-project-item.item-liambot:hover {
      border-color: rgba(165, 180, 252, 0.35);
      background: rgba(165, 180, 252, 0.04);
    }
    .personal-project-item.item-liambot:hover .personal-project-title {
      color: #a5b4fc;
    }

    .personal-project-item.item-caseycase:hover {
      border-color: rgba(79, 162, 184, 0.35);
      background: rgba(79, 162, 184, 0.04);
    }
    .personal-project-item.item-caseycase:hover .personal-project-title {
      color: #4fa2b8;
    }

    .personal-project-item.item-caseyland:hover {
      border-color: rgba(255, 0, 255, 0.4);
      background: rgba(255, 0, 255, 0.04);
    }
    .personal-project-item.item-caseyland:hover .personal-project-title {
      color: #ff00ff;
    }

    .personal-project-link {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      padding: 0.6rem 0.85rem;
      text-decoration: none;
      color: inherit;
      width: 100%;
    }

    .personal-project-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      flex-shrink: 0;
    }

    .personal-project-img {
      width: 26px;
      height: 26px;
      object-fit: contain;
      display: block;
    }

    .personal-project-icon.icon-1kx {
      color: #00f0ff;
      background: rgba(0, 240, 255, 0.08);
      border: 1px solid rgba(0, 240, 255, 0.25);
    }
    .personal-project-icon.icon-1kx svg {
      width: 28px;
      height: 28px;
    }
    .personal-project-icon.icon-football {
      color: #33ff33;
      background: rgba(51, 255, 51, 0.08);
      border: 1px solid rgba(51, 255, 51, 0.25);
    }
    .personal-project-icon.icon-liambot {
      color: #a5b4fc;
      background: rgba(165, 180, 252, 0.08);
      border: 1px solid rgba(165, 180, 252, 0.25);
    }
    .personal-project-icon.icon-caseycase {
      color: #4fa2b8;
      background: rgba(79, 162, 184, 0.08);
      border: 1px solid rgba(79, 162, 184, 0.25);
    }
    .personal-project-icon.icon-caseycase svg {
      width: 26px;
      height: 26px;
    }
    .personal-project-icon.icon-caseyland {
      color: #ff88ff;
      background: rgba(255, 0, 255, 0.08);
      border: 1px solid rgba(255, 0, 255, 0.25);
    }
    .personal-project-icon.icon-caseyland svg {
      width: 30px;
      height: 30px;
    }

    .personal-project-info {
      flex: 1;
      min-width: 0;
    }

    .personal-project-title-row {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.15rem;
    }

    .personal-project-title {
      font-weight: 700;
      font-size: 0.95rem;
      font-family: 'Outfit', sans-serif;
      color: var(--text-main);
      letter-spacing: 0.01em;
      transition: color 0.18s ease;
    }

    .personal-project-ext {
      color: var(--text-dim);
      opacity: 0.6;
      transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
    }

    .personal-project-url {
      display: none;
    }

    .personal-project-item:hover .personal-project-ext {
      opacity: 1;
      transform: translate(1px, -1px);
    }
    .personal-project-item.item-1kx:hover .personal-project-ext { color: #00f0ff; }
    .personal-project-item.item-football:hover .personal-project-ext { color: #33ff33; }
    .personal-project-item.item-liambot:hover .personal-project-ext { color: #a5b4fc; }
    .personal-project-item.item-caseycase:hover .personal-project-ext { color: #4fa2b8; }
    .personal-project-item.item-caseyland:hover .personal-project-ext { color: #ff00ff; }

    .personal-project-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      font-family: 'Inconsolata', monospace;
    }

    /* Standard Monorepo Footer */
    .app-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0.5rem 2rem 0.5rem;
      margin-top: 1.25rem;
      border-top: none;
      font-family: 'Inconsolata', monospace;
      font-size: 0.8rem;
      color: var(--text-dim);
      width: 100%;
    }

    .footer-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .footer-right {
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }

    .app-footer a {
      color: var(--accent-magenta);
      font-family: 'Varela Round', sans-serif;
      font-weight: 700;
      letter-spacing: 1px;
      text-decoration: none;
      transition: var(--transition);
    }

    .app-footer a:hover {
      color: var(--accent-yellow);
      text-decoration: none;
    }

    .project-body.collapsed {
      display: none;
    }

    .client-description {
      margin-top: 1rem;
      margin-bottom: 1rem;
      color: var(--text-muted);
      font-size: 0.92rem;
    }

    .details-block {
      margin-top: 1.2rem;
    }

    .details-subtitle {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent-yellow);
      font-family: 'Varela Round', sans-serif;
      margin-bottom: 0.5rem;
    }

    .pill {
      font-size: 0.8rem;
      padding: 0.3rem 0.75rem;
      background: rgba(19, 248, 241, 0.08);
      border: 1px solid rgba(19, 248, 241, 0.2);
      border-radius: 0;
      color: var(--accent);
      transition: var(--transition);
    }




    /* Caseyland Employer Grouping & Collapsible Project Styles */
    .employer-group {
      margin-bottom: 2.5rem;
      background: rgba(4, 13, 26, 0.92);
      border: 1px solid var(--border-subtle);
      border-left: none;
      position: relative;
      overflow: hidden;
    }

    .employer-group::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      background: linear-gradient(180deg, 
        #13f8f1 0%, #13f8f1 33.33%, 
        #ffff00 33.33%, #ffff00 66.66%, 
        #ff00ff 66.66%, #ff00ff 100%);
    }

    .employer-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid var(--border-subtle);
      flex-wrap: wrap;
      gap: 1rem;
    }

    .employer-name {
      font-family: 'Varela Round', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 2px;
    }

    .employer-role {
      font-size: 0.95rem;
      color: var(--accent-magenta);
      font-weight: 700;
      font-family: 'Varela Round', sans-serif;
      margin-top: 0.2rem;
    }

    .employer-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .project-count {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--accent-yellow);
      background: rgba(255, 255, 0, 0.1);
      padding: 0.25rem 0.6rem;
      border: 1px solid rgba(255, 255, 0, 0.3);
      font-family: 'Varela Round', sans-serif;
    }

    .project-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .project-item {
      background: rgba(0, 16, 48, 0.7);
      border: 1px solid rgba(19, 248, 241, 0.15);
      transition: var(--transition);
    }

    .project-item:hover {
      border-color: var(--accent-yellow);
    }

    .project-header {
      padding: 1rem 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      cursor: pointer;
      user-select: none;
      gap: 1.5rem;
    }

    .project-title-area {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      flex: 1;
      min-width: 0;
    }

    .expand-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      min-width: 26px;
      min-height: 26px;
      max-width: 26px;
      max-height: 26px;
      flex-shrink: 0;
      line-height: 1;
      margin-top: 2px;
      background: rgba(19, 248, 241, 0.1);
      border: 1px solid var(--accent);
      color: var(--accent);
      font-weight: 700;
      font-size: 1.1rem;
      transition: var(--transition);
      user-select: none;
    }

    .project-header:hover .expand-icon {
      background: var(--accent-yellow);
      color: #000;
      border-color: var(--accent-yellow);
    }

    .project-client-name {
      font-family: 'Varela Round', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 1px;
    }

    .job-role-badge {
      display: inline-block;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--accent-magenta);
      background: rgba(255, 0, 255, 0.1);
      padding: 0.2rem 0.6rem;
      border-radius: 0;
      border: 1px solid rgba(255, 0, 255, 0.3);
      font-family: 'Varela Round', sans-serif;
      margin-top: 0.2rem;
    }

    .project-one-liner {
      font-size: 0.88rem;
      color: var(--text-muted);
      margin-top: 0.3rem;
      line-height: 1.4;
      font-weight: 400;
    }

    .project-client-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      width: 100%;
    }

    .project-client-name {
      font-family: 'Varela Round', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 1px;
      margin: 0;
      flex: 1;
    }

    .project-dates {
      font-size: 0.8rem;
      color: var(--text-dim);
      font-family: 'Inconsolata', monospace;
      white-space: nowrap;
      text-align: right;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .project-dates {
      font-size: 0.8rem;
      color: var(--text-dim);
      font-family: 'Inconsolata', monospace;
    }

    .expand-btn {
      background: rgba(19, 248, 241, 0.08);
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: 0.35rem 0.85rem;
      font-size: 0.8rem;
      font-weight: 700;
      font-family: 'Varela Round', sans-serif;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: var(--transition);
    }

    .expand-btn:hover {
      background: var(--accent-yellow);
      color: #000;
      border-color: var(--accent-yellow);
    }

    .project-body {
      padding: 0 1.25rem 1.25rem 1.25rem;
      border-top: 1px dashed rgba(19, 248, 241, 0.2);
      margin-top: 0.5rem;
      display: block;
    }

    .project-body.collapsed {
      display: none;
    }

    .client-description {
      margin-top: 1rem;
      margin-bottom: 1rem;
      color: var(--text-muted);
      font-size: 0.92rem;
    }

    .details-block {
      margin-top: 1.2rem;
    }

    .details-subtitle {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent-yellow);
      font-family: 'Varela Round', sans-serif;
      margin-bottom: 0.5rem;
    }

    .pill {
      font-size: 0.8rem;
      padding: 0.3rem 0.75rem;
      background: rgba(19, 248, 241, 0.08);
      border: 1px solid rgba(19, 248, 241, 0.2);
      border-radius: 0;
      color: var(--accent);
      transition: var(--transition);
    }

    /* Contact Details Box Responsive Layout (Side-by-side on wide, stacked on mobile) */
    .contact-details-box {
      display: none;
      margin-top: 1rem;
      padding: 1.25rem;
      background: rgba(0, 16, 48, 0.9);
      border: 1px solid var(--accent);
      font-family: 'Inconsolata', monospace;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
      gap: 1.25rem;
    }

    .contact-text-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 0.35rem;
      flex: 1;
      min-width: 240px;
    }

    .contact-action-group {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
    }

    .download-pdf-btn {
      background: rgba(0, 255, 204, 0.12);
      border-color: var(--cyan-accent);
      color: var(--cyan-accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-weight: 600;
      padding: 0.6rem 1.25rem;
      white-space: nowrap;
    }

    /* ====================================================
       MOBILE & RESPONSIVE BREAKPOINTS
       ==================================================== */
    @media (max-width: 768px) {
      .container {
        padding: 0.75rem 0.75rem 2rem 0.75rem;
      }
      .app-header {
        padding: 0.85rem 1rem;
        margin-bottom: 0.85rem;
      }
    }
    @media (max-width: 600px) {
      /* Single-Row Horizontal Swipeable Chips for Quick Nav on Mobile Phones */
      .section-nav-card {
        position: sticky;
        top: 0;
        z-index: 95;
        padding: 0.35rem 0.5rem;
        margin-bottom: 0.85rem;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(4, 13, 26, 0.98) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
      }
      .section-nav-card::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }

      .nav-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.35rem !important;
        padding: 0.1rem 1.25rem 0.1rem 0.15rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        list-style: none !important;
      }
      .nav-links::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }

      .nav-links li {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .nav-links a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        padding: 0.45rem 0.85rem !important;
        width: auto !important;
        min-width: max-content !important;
        font-size: 0.76rem !important;
        border-radius: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
      }
    }
    @media (max-width: 768px) {
      .hero-card {
        flex-direction: column;
        text-align: left;
        padding: 1.5rem 1.25rem 1.5rem 2.5rem;
        gap: 1.25rem;
        align-items: flex-start;
        margin-bottom: 0.85rem;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
      }
      .hero-header-row {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 1.25rem;
        width: 100%;
      }
      .hero-photo-wrapper {
        margin-top: 0;
        align-self: stretch;
        aspect-ratio: 1 / 1;
        width: auto;
        height: auto;
        flex-shrink: 0;
      }
      .hero-header-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        min-width: 0;
        text-align: left;
      }
      .hero-details {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: left;
      }
      .hero-name {
        font-size: 2.1rem;
        line-height: 1.15;
        letter-spacing: 1.5px;
        word-break: break-word;
        text-align: left;
        margin-bottom: 0.35rem;
      }
      .hero-title {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.05rem;
        text-align: left;
        line-height: 1.4;
        gap: 0.35rem;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
      }
      .hero-title .hero-title-sep {
        display: inline-block;
        margin: 0 0.35rem;
      }
      .hero-title .hero-title-sep::before {
        top: -18px;
        bottom: -18px;
        left: -18px;
        right: -18px;
      }
      .hero-title-item {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
        text-align: left;
      }
      .hero-summary {
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
      .quick-stats-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        width: 100%;
        box-sizing: border-box;
      }
      .contact-reveal-container {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
      }
      .contact-details-box {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        box-sizing: border-box;
      }
      .contact-text-group {
        align-items: flex-start;
        text-align: left;
        width: 100%;
      }
      .contact-action-group {
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
      }
      .contact-line {
        justify-content: flex-start;
        text-align: left;
      }
      .quick-stats {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 1.2rem;
        width: 100%;
        box-sizing: border-box;
      }
      .card {
        padding: 1.5rem 1.25rem 1.5rem 2.5rem;
      }
      section {
        margin-bottom: 0.85rem;
      }
      .experience-feed {
        gap: 0.85rem;
      }
      .employer-group {
        margin-bottom: 0;
      }
      .employer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }
      .employer-name {
        font-size: 1.35rem;
      }
      .project-client-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
      }
      .project-dates {
        text-align: left;
        margin-left: 0;
        margin-top: 0.1rem;
      }
      .project-one-liner {
        font-size: 0.82rem;
      }
      .timeline-controls {
        margin-bottom: 0.85rem;
      }
      .app-footer {
        margin-top: 0.85rem;
        padding: 1rem 0.5rem;
      }
    }

    @media (max-width: 600px) {
      html {
        scroll-padding-top: 55px;
      }
      section {
        scroll-margin-top: 55px;
      }
      .hero-card {
        padding: 1.25rem 1rem 1.25rem 2rem;
      }
      .hero-header-row {
        gap: 0.85rem;
      }
      .hero-photo-wrapper {
        margin-top: 0;
        align-self: stretch;
        aspect-ratio: 1 / 1;
        width: auto;
        height: auto;
        flex-shrink: 0;
      }
      .hero-name {
        font-size: 1.65rem;
        letter-spacing: 1px;
      }
      .hero-title {
        font-size: 0.88rem;
      }
      .section-title {
        font-size: 1.35rem;
        word-break: break-word;
      }
      .card {
        padding: 1.25rem 1rem 1.25rem 2rem;
      }
      .quick-stats {
        flex-direction: row;
        justify-content: space-around;
        gap: 0.75rem;
      }
      .stat-item {
        align-items: center;
        text-align: center;
      }
      .stat-value {
        font-size: 1.2rem;
      }
      .stat-label {
        font-size: 0.72rem;
      }
      .filter-btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
        white-space: normal;
        box-sizing: border-box;
      }
      .grid-2col {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem;
        margin-bottom: 0.85rem;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      .grid-2col .col-left {
        display: contents !important;
      }
      .grid-2col #education,
      .grid-2col #certifications,
      .grid-2col #projects {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
      }
      .grid-2col #education {
        order: 1 !important;
      }
      .grid-2col #certifications {
        order: 2 !important;
      }
      .grid-2col #projects {
        order: 3 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }
      .grid-2col #projects .card,
      .grid-2col #certifications .card,
      .grid-2col #education .card,
      .personal-project-list,
      .cert-list {
        width: 100% !important;
        box-sizing: border-box !important;
      }
    }

    @media (max-width: 440px) {
      .hero-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
      }
      .hero-photo-wrapper {
        width: 120px;
        height: 120px;
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        margin-bottom: 0.25rem;
      }
      .hero-header-info {
        width: 100%;
        text-align: left;
      }
      .hero-name {
        font-size: 1.85rem;
      }
      .hero-title {
        font-size: 0.95rem;
      }
    }


  /* -------------------------------------------------------------
     PRINT-FRIENDLY STYLESHEET (@media print)
     - High-contrast dark grey typography hierarchy for readability
     - Darkened grey contrast (#111827 titles, #1f2937 body text, #374151 dates/meta)
     - Browser-like dual-row layout for Employers & Projects with dates upper-right
     - Overview: 7.0pt, Bullet lists: 6.6pt
     - Page break protection on headings (no hanging headers)
     - Content paragraphs & bullet lists allowed to split across pages
     ------------------------------------------------------------- */
  @media print {
    @page {
      margin: 0.5in;
      font-family: 'Inter', 'Outfit', 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }

    html {
      filter: grayscale(100%) !important;
      -webkit-filter: grayscale(100%) !important;
    }

    * {
      font-family: 'Inter', 'Outfit', 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      color-adjust: exact !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }

    html, body {
      background: #ffffff !important;
      color: #1f2937 !important;
      font-size: 7.5pt !important;
      font-family: 'Inter', 'Outfit', 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      line-height: 1.25 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Strict Greyscale Overrides for Icons, SVGs & Inline Style Colors */
    svg, path, circle, rect, line, polyline {
      color: #374151 !important;
      stroke: currentColor !important;
    }

    .section-title svg {
      color: #111827 !important;
      stroke: #111827 !important;
    }

    .cert-icon {
      color: #1f2937 !important;
      stroke: #1f2937 !important;
    }

    /* Force dark neutral tones on any elements with inline style colors */
    [style*="color"] {
      color: #1f2937 !important;
    }

    .stat-value,
    .contact-label {
      color: #111827 !important;
    }

    /* Hide Navigation, Controls, Animations, Glows, Plus/Minus Icons, App Header, Section Nav Card */
    header,
    .app-header,
    .header-actions,
    .section-nav-card,
    #sectionNavCard,
    .bg-glow,
    .top-nav,
    .nav-links,
    .filter-btn,
    .expand-icon,
    .toggle-icon,
    .back-link-container,
    #revealContactBtn,
    #downloadPdfBtn,
    button {
      display: none !important;
    }

    /* Footer styling consistent with page font */
    footer {
      display: block !important;
      border-top: 1pt solid #cbd5e1 !important;
      padding-top: 4pt !important;
      margin-top: 8pt !important;
      font-family: 'Inter', 'Outfit', 'Varela Round', system-ui, sans-serif !important;
      font-size: 6.8pt !important;
      color: #374151 !important;
      text-align: center !important;
    }

    footer a {
      color: #1f2937 !important;
      text-decoration: none !important;
    }

    /* Layout Containers */
    main, .container, section {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Strict Heading & Header Orphan Prevention (No Section/Employer/Project Subheading Split) */
    h1, h2, h3, h4, h5, h6,
    .section-title,
    .hero-name,
    .employer-header,
    .employer-name,
    .employer-role,
    .project-header,
    .project-client-row,
    .project-client-name,
    .job-role-badge,
    .details-subtitle {
      color: #111827 !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
      break-after: avoid-page !important;
    }

    h1, .hero-name {
      font-size: 16pt !important;
      margin-bottom: 2pt !important;
      color: #111827 !important;
    }

    .hero-name-matrix-wrap,
    .brand-title-matrix-wrap {
      display: none !important;
    }

    .hero-name-text,
    .brand-title-text {
      position: static !important;
      width: auto !important;
      height: auto !important;
      overflow: visible !important;
      clip: auto !important;
      white-space: normal !important;
      display: inline !important;
    }

    h2, .section-title {
      display: flex !important;
      align-items: center !important;
      gap: 6pt !important;
      font-size: 10.5pt !important;
      line-height: 1.2 !important;
      border-bottom: 1.5pt solid #cbd5e1 !important;
      padding-bottom: 2pt !important;
      margin-top: 8pt !important;
      margin-bottom: 4pt !important;
      color: #111827 !important;
      letter-spacing: 1px !important;
      text-shadow: none !important;
      box-shadow: none !important;
      filter: none !important;
      -webkit-filter: none !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    .section-title svg {
      width: 14pt !important;
      height: 14pt !important;
      min-width: 14pt !important;
      min-height: 14pt !important;
      margin: 0 !important;
      align-self: center !important;
      vertical-align: middle !important;
      flex-shrink: 0 !important;
      filter: none !important;
      -webkit-filter: none !important;
      opacity: 1 !important;
    }

    h3, .employer-name {
      font-size: 9.5pt !important;
      font-weight: bold !important;
      color: #111827 !important;
    }

    h4, .project-client-name {
      font-size: 8.5pt !important;
      font-weight: bold !important;
      color: #111827 !important;
    }

    .employer-role {
      font-size: 8.2pt !important;
      font-weight: 600 !important;
      color: #1f2937 !important;
      margin-top: 1pt !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    .hero-title {
      color: #374151 !important;
      font-size: 8.8pt !important;
      line-height: 1.3 !important;
      margin-top: 2pt !important;
      margin-bottom: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 5pt !important;
      text-align: left !important;
      width: 100% !important;
    }

    .hero-title-item {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4pt !important;
      white-space: nowrap !important;
      text-align: left !important;
    }

    .hero-title-sep {
      display: inline-block !important;
      width: 3.5pt !important;
      height: 3.5pt !important;
      min-width: 3.5pt !important;
      background-color: #4b5563 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      margin: 0 1pt !important;
      vertical-align: middle !important;
      flex-shrink: 0 !important;
    }

    .hero-title.is-stacked {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 2pt !important;
    }

    .hero-title.is-stacked .hero-title-sep {
      display: none !important;
    }

    .hero-summary {
      font-size: 7.5pt !important;
      line-height: 1.3 !important;
      margin-bottom: 5pt !important;
      color: #1f2937 !important;
    }

    /* Tightened Intro Section */
    .hero-card {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 5pt !important;
      padding: 7pt 9pt !important;
      margin-bottom: 6pt !important;
      background: #f8fafc !important;
      border: 1pt solid #cbd5e1 !important;
      border-radius: 0 !important;
      text-align: left !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      box-shadow: none !important;
    }

    .hero-header-row {
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
      gap: 10pt !important;
      width: 100% !important;
      margin-bottom: 2pt !important;
    }

    .hero-header-info {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      flex: 1 !important;
    }

    .hero-photo-wrapper,
    .hero-photo {
      border-radius: 0 !important;
      width: 100px !important;
      height: 100px !important;
      min-width: 100px !important;
      max-width: 100px !important;
      margin: 0 !important;
      float: left !important;
      flex-shrink: 0 !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      -webkit-mask-composite: normal !important;
      mask-composite: normal !important;
      }

    .hero-photo-pixel {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 10 !important;
      image-rendering: pixelated !important;
      image-rendering: crisp-edges !important;
    }

    .hero-photo-hd {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    .hero-details {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
    }

    .quick-stats-row {
      display: flex !important;
      flex-direction: column !important;
      gap: 4pt !important;
      width: 100% !important;
      margin-top: 3pt !important;
      padding-top: 4pt !important;
      border-top: 1pt solid #cbd5e1 !important;
    }

    .contact-reveal-container {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      border-top: none !important;
    }

    #contactDetailsBox {
      display: block !important;
      visibility: visible !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 7.5pt !important;
      color: #1f2937 !important;
      width: 100% !important;
    }

    .contact-text-group {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 24pt !important;
      width: 100% !important;
      padding-bottom: 3pt !important;
    }

    .contact-line {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4pt !important;
      white-space: nowrap !important;
      width: auto !important;
    }

    .contact-label {
      display: inline !important;
      color: #111827 !important;
      font-size: 7.5pt !important;
      font-weight: bold !important;
      margin: 0 !important;
    }

    .contact-val, .contact-val a {
      display: inline !important;
      color: #1f2937 !important;
      font-size: 7.5pt !important;
      text-decoration: none !important;
      white-space: nowrap !important;
    }

    .quick-stats {
      display: flex !important;
      flex-direction: row !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      gap: 28pt !important;
      width: 100% !important;
      margin-top: 2pt !important;
      margin-bottom: 0 !important;
      border-top: none !important;
      padding-top: 0 !important;
      text-align: left !important;
    }

    .stat-item {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      gap: 1.5pt !important;
    }

    .stat-value {
      font-size: 7.8pt !important;
      font-weight: bold !important;
      color: #111827 !important;
      text-align: left !important;
      line-height: 1.15 !important;
    }

    .stat-label {
      font-size: 6.8pt !important;
      color: #374151 !important;
      text-align: left !important;
      line-height: 1.15 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase !important;
    }

    .contact-action-group, #downloadPdfBtn, #revealContactBtn {
      display: none !important;
    }

    /* Cards, Employer Groups & Experience Items (Allowed to split across pages cleanly) */
    .card, .employer-group {
      background: #f8fafc !important;
      border: 1pt solid #cbd5e1 !important;
      border-radius: 3pt !important;
      padding: 6pt 8pt !important;
      margin-bottom: 6pt !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }

    /* Replace three-color vertical left accent bar with solid medium grey in print */
    .hero-card::before,
    .card::before,
    .employer-group::before {
      background: #9ca3af !important;
    }

    /* Browser-like Job Entry Header with right-aligned dates */
    .employer-header {
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      width: 100% !important;
      box-sizing: border-box !important;
      padding-bottom: 3pt !important;
      margin-bottom: 4pt !important;
      border-bottom: 1pt solid #cbd5e1 !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    .employer-header > div:first-child {
      flex: 1 1 auto !important;
      text-align: left !important;
    }

    .employer-meta {
      font-size: 7.5pt !important;
      font-weight: 600 !important;
      color: #374151 !important;
      text-align: right !important;
      margin-left: auto !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
    }

    .job-dates {
      font-size: 7.5pt !important;
      font-weight: 600 !important;
      color: #374151 !important;
      text-align: right !important;
      white-space: nowrap !important;
      display: block !important;
    }

    .project-count {
      display: block !important;
      font-size: 6.8pt !important;
      color: #4b5563 !important;
      text-align: right !important;
    }

    /* Browser-like Project Entry Header with right-aligned dates */
    .project-item {
      background: #ffffff !important;
      border: 1pt solid #e5e7eb !important;
      border-radius: 2pt !important;
      margin-bottom: 5pt !important;
      padding: 0 !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }

    .project-header {
      padding: 4pt 6pt !important;
      width: 100% !important;
      box-sizing: border-box !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    .project-title-area {
      width: 100% !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
    }

    .project-title-area > div {
      width: 100% !important;
      flex: 1 1 100% !important;
      min-width: 0 !important;
    }

    .project-client-row {
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      width: 100% !important;
      box-sizing: border-box !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    .project-client-name {
      font-size: 8.5pt !important;
      font-weight: bold !important;
      color: #111827 !important;
      margin: 0 !important;
      flex: 1 1 auto !important;
      text-align: left !important;
    }

    .project-dates {
      font-size: 7.5pt !important;
      font-weight: 600 !important;
      color: #374151 !important;
      margin-left: auto !important;
      text-align: right !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      display: block !important;
    }

    .job-role-badge {
      font-size: 7.2pt !important;
      font-weight: 600 !important;
      color: #1f2937 !important;
      background: #e2e8f0 !important;
      border: 0.5pt solid #cbd5e1 !important;
      padding: 1pt 4pt !important;
      margin-top: 1pt !important;
      margin-bottom: 2pt !important;
      display: inline-block !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    /* Slightly reduced font size for client/org descriptions and project overview */
    .client-description,
    .job-desc,
    .project-one-liner,
    .employer-summary,
    .project-description {
      font-size: 7.0pt !important;
      line-height: 1.25 !important;
      color: #1f2937 !important;
    }

    .project-one-liner {
      margin-top: 2pt !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    .project-body,
    .project-body.collapsed {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      padding: 0 6pt 4pt 6pt !important;
      margin-top: 0 !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }

    .details-block {
      margin-bottom: 3pt !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }

    .details-subtitle {
      font-size: 7.6pt !important;
      font-weight: bold !important;
      margin-top: 3pt !important;
      margin-bottom: 1.5pt !important;
      color: #111827 !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    /* Bullet list of Responsibilities and Deliverables: slightly larger than before, but smaller than overview (6.6pt vs 7.0pt) */
    ul.job-responsibilities,
    ul.details-list {
      margin: 2pt 0 2pt 12pt !important;
      padding: 0 !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }

    ul.job-responsibilities li,
    ul.details-list li {
      margin-bottom: 1.5pt !important;
      font-size: 6.6pt !important;
      line-height: 1.22 !important;
      color: #1f2937 !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }

    /* Metadata, Dates, Tech Pills & Labels */
    .stat-label, .cert-meta, .date-range, .location-tag, .company-name {
      color: #374151 !important;
      font-size: 7pt !important;
    }

    .pill, .badge {
      background: #f1f5f9 !important;
      color: #0f172a !important;
      border: 1pt solid #cbd5e1 !important;
      padding: 0.5pt 3.5pt !important;
      font-size: 6.8pt !important;
      font-weight: 500 !important;
      display: inline-block !important;
      margin-bottom: 1.5pt !important;
      border-radius: 2pt !important;
    }

    /* Links */
    a {
      color: #1f2937 !important;
      text-decoration: none !important;
    }

    /* Education, Personal Projects & Certifications Grid in Print */
    .grid-2col {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 6pt !important;
      align-items: start !important;
      margin-bottom: 4pt !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .grid-2col .col-left {
      display: flex !important;
      flex-direction: column !important;
      gap: 6pt !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .grid-2col #projects {
      margin-top: 0 !important;
    }

    .grid-2col #projects .card {
      height: auto !important;
      min-height: 0 !important;
      padding: 4pt 6pt !important;
    }

    /* Education Section in Print */
    .edu-card {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 8pt !important;
      padding: 4pt 6pt !important;
      margin-bottom: 0 !important;
    }

    .edu-icon {
      width: 20pt !important;
      height: 20pt !important;
      min-width: 20pt !important;
      min-height: 20pt !important;
      background: #f1f5f9 !important;
      border: 0.5pt solid #cbd5e1 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }

    .edu-icon svg {
      width: 12pt !important;
      height: 12pt !important;
      stroke: #111827 !important;
      color: #111827 !important;
    }

    .edu-school {
      font-size: 8pt !important;
      font-weight: bold !important;
      color: #111827 !important;
      line-height: 1.2 !important;
      margin-bottom: 1pt !important;
    }

    .edu-degree {
      font-size: 7pt !important;
      color: #374151 !important;
      line-height: 1.2 !important;
    }

    /* Personal Projects High-Contrast Compact Layout in Print */
    .personal-project-list {
      display: flex !important;
      flex-direction: column !important;
      gap: 2.5pt !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
    }

    .personal-project-item {
      background: #ffffff !important;
      border: 0.5pt solid #e2e8f0 !important;
      border-radius: 1.5pt !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      transition: none !important;
    }

    .personal-project-link {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6pt !important;
      padding: 2.5pt 4pt !important;
      width: 100% !important;
      text-decoration: none !important;
      box-sizing: border-box !important;
    }

    .personal-project-icon {
      width: 18pt !important;
      height: 18pt !important;
      min-width: 18pt !important;
      min-height: 18pt !important;
      background: #f1f5f9 !important;
      border: 0.5pt solid #cbd5e1 !important;
      border-radius: 1.5pt !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }

    .personal-project-icon svg {
      width: 11pt !important;
      height: 11pt !important;
      stroke: #111827 !important;
      color: #111827 !important;
    }

    .personal-project-icon.icon-football svg,
    .personal-project-icon.icon-football svg path,
    .icon-football svg,
    .icon-football path {
      stroke: none !important;
      stroke-width: 0 !important;
      --fb-panel: #ffffff !important;
      --fb-panel-opacity: 1 !important;
      --fb-seam: #111827 !important;
    }

    .personal-project-info {
      flex: 1 !important;
      min-width: 0 !important;
      text-align: left !important;
    }

    .personal-project-title-row {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 3pt !important;
      margin-bottom: 0 !important;
    }

    .personal-project-title {
      font-size: 7.6pt !important;
      font-weight: bold !important;
      color: #111827 !important;
      line-height: 1.15 !important;
      letter-spacing: 0 !important;
    }

    .personal-project-ext {
      display: none !important;
    }

    .personal-project-url {
      display: inline !important;
      font-size: 6.8pt !important;
      font-weight: 500 !important;
      color: #4b5563 !important;
      letter-spacing: 0 !important;
      text-decoration: none !important;
    }

    .personal-project-desc {
      font-size: 6.6pt !important;
      color: #374151 !important;
      line-height: 1.15 !important;
      font-family: 'Inter', 'Outfit', system-ui, sans-serif !important;
    }

    /* Certifications Section in Print */
    #certifications .card,
    .grid-2col #certifications .card {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      padding: 4pt 6pt !important;
      margin-bottom: 0 !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    .cert-list {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 2.5pt !important;
    }

    .cert-item {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
      gap: 4pt !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .cert-title {
      font-size: 7.2pt !important;
      font-weight: 600 !important;
      color: #111827 !important;
      line-height: 1.15 !important;
    }

    .cert-meta {
      font-size: 6.5pt !important;
      color: #4b5563 !important;
      line-height: 1.15 !important;
    }

    /* Guard against theme-specific box shadows and text shadows in print */
    [data-theme^="pixel"] *,
    [data-theme^="pixel"] *::before,
    [data-theme^="pixel"] *::after {
      box-shadow: none !important;
      text-shadow: none !important;
    }
  }

/* ==========================================================================
   DUAL ICON SYSTEM (VECTOR VS RETRO PIXEL ART)
   ========================================================================== */
.icon-pixel {
  display: none;
}
.icon-vector {
  display: block;
}

/* ==========================================================================
   RETRO PIXEL THEME SYSTEM (SCREEN ONLY)
   ========================================================================== */
@media screen {

[data-theme^="pixel"] .icon-vector {
  display: none !important;
}
[data-theme^="pixel"] .icon-pixel {
  display: block !important;
  shape-rendering: crispEdges !important;
}

[data-theme^="pixel"] svg {
  shape-rendering: crispEdges;
}

[data-theme^="pixel"] #app-nav-btn svg {
  fill: currentColor;
  stroke: none;
}

/* Official brand logos remain active in personal projects & universal navigation */
[data-theme^="pixel"] .personal-project-icon .icon-vector,
[data-theme^="pixel"] .app-nav-icon .icon-vector {
  display: block !important;
}
[data-theme^="pixel"] .personal-project-icon .icon-pixel,
[data-theme^="pixel"] .app-nav-icon .icon-pixel {
  display: none !important;
}

/* High-contrast retro chip tiles eliminating pastel backgrounds */
[data-theme="pixel-light"] .personal-project-icon,
[data-theme="pixel-light"] .app-nav-icon,
[data-theme="pixel-light"] .edu-icon {
  background: rgba(85, 107, 47, 0.12) !important;
  border: 1px solid #3f5223 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
}
[data-theme="pixel-light"] .edu-icon {
  color: #3f5223 !important;
}
[data-theme="pixel-light"] .personal-project-icon svg,
[data-theme="pixel-light"] .app-nav-icon svg {
  filter: brightness(0.55) saturate(0.75) !important;
}
[data-theme="pixel-dark"] .personal-project-icon,
[data-theme="pixel-dark"] .app-nav-icon,
[data-theme="pixel-dark"] .edu-icon {
  background: rgba(126, 153, 176, 0.12) !important;
  border: 1px solid rgba(126, 153, 176, 0.35) !important;
  box-shadow: 2px 2px 0 #000000 !important;
}
[data-theme="pixel-dark"] .edu-icon {
  color: #7e99b0 !important;
}
[data-theme="pixel-dark"] .personal-project-icon svg,
[data-theme="pixel-dark"] .app-nav-icon svg {
  filter: brightness(0.8) saturate(0.8) !important;
}

/* Original vibrant brand colors */
[data-theme^="pixel"] .icon-1kx { color: #00f0ff !important; }
[data-theme^="pixel"] .icon-football { color: #33ff33 !important; }
[data-theme^="pixel"] .icon-caseyland { color: #ff00ff !important; }
[data-theme^="pixel"] .icon-liambot { color: #a5b4fc !important; }
[data-theme^="pixel"] .icon-caseycase { color: #4fa2b8 !important; }
[data-theme^="pixel"] .icon-casey { color: #13f8f1 !important; }

/* ==========================================================================
   RETRO PIXEL THEME SYSTEM (K10K HOMAGE & PIXEL AESTHETIC)
   ========================================================================== */

/* 1. Pixel Dark Theme (Cyber-Slate & Earth-Tone Accents) */
[data-theme="pixel-dark"] {
  --bg-dark: #0e1217;
  --bg-card: #151b22;
  --panel-bg: #151b22;
  --bg-card-hover: #1c232d;
  --border-subtle: #273142;
  --panel-border: #273142;
  --border-accent: #7e99b0;

  --text-main: #e8e4db;
  --text-primary: #e8e4db;
  --text-muted: #8b949e;
  --text-dim: #7d8590;
  --text-secondary: #7d8590;

  --accent: #7e99b0;        /* Steel / Slate Blue (Greyer Blue) */
  --accent-yellow: #d49b54; /* Warm Ochre / Golden Raw Sienna */
  --accent-magenta: #9ab07e;/* Forest Moss / Dried Sage */
  --accent-magenta-bg: rgba(154, 176, 126, 0.12);
  --accent-terracotta: #df8b64; /* Warm Terracotta / Clay */
  --accent-terracotta-bg: rgba(184, 101, 66, 0.14);
  --accent-glow: rgba(126, 153, 176, 0.2);

  /* Dot-Matrix Name Palette (Cyber-Slate, Terracotta Orange & Blue) */
  --matrix-dot-off: #222a36;
  --matrix-dot-on: #9ab07e;
  --matrix-brand-first: #df8b64;
  --matrix-brand-accent: #7e99b0;
}

/* 2. Pixel Light Theme (Classic K10k Paper / Industrial Slate) */
[data-theme="pixel-light"] {
  --bg-dark: #dfded8;
  --bg-card: #eae8e2;
  --panel-bg: #eae8e2;
  --bg-card-hover: #f2f0ea;
  --border-subtle: #1c1f24;
  --panel-border: #1c1f24;
  --border-accent: #1c1f24;

  --text-main: #181b1f;
  --text-primary: #181b1f;
  --text-muted: #4b5563;
  --text-dim: #6b7280;
  --text-secondary: #6b7280;

  --accent: #556b2f;        /* Olive/Army Green */
  --accent-yellow: #b8860b; /* Warm Ochre */
  --accent-magenta: #d9531e;/* Safety/Burnt Orange */
  --accent-magenta-bg: rgba(217, 83, 30, 0.12);
  --accent-glow: rgba(85, 107, 47, 0.2);

  /* Dot-Matrix Name Palette (Classic K10k Paper, Dark Amber Orange & Olive) */
  --matrix-dot-off: #cbd1c2;
  --matrix-dot-on: #556b2f;
  --matrix-brand-first: #a16207;
  --matrix-brand-accent: #2e4a1f;
}

/* 3. Base Scoped Rules for All Pixel Themes */
[data-theme^="pixel"] .bg-glow {
  display: none !important;
}

[data-theme^="pixel"] {
  background-color: var(--bg-dark) !important;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px) !important;
  background-size: 4px 4px !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: unset !important;
  font-smooth: never !important;
  text-rendering: geometricPrecision !important;
}

[data-theme="pixel-dark"] {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
}

/* Micro-Typography via Silkscreen */
[data-theme^="pixel"] h1,
[data-theme^="pixel"] h2,
[data-theme^="pixel"] h3,
[data-theme^="pixel"] h4,
[data-theme^="pixel"] .section-title,
[data-theme^="pixel"] .brand-title,
[data-theme^="pixel"] .brand-subtitle,
[data-theme^="pixel"] .hero-name,
[data-theme^="pixel"] .hero-title,
[data-theme^="pixel"] .hero-title-item,
[data-theme^="pixel"] .employer-name,
[data-theme^="pixel"] .badge,
[data-theme^="pixel"] .filter-btn,
[data-theme^="pixel"] .nav-links a,
[data-theme^="pixel"] .stat-value,
[data-theme^="pixel"] .stat-label,
[data-theme^="pixel"] .pill,
[data-theme^="pixel"] .cert-title,
[data-theme^="pixel"] .app-nav-name,
[data-theme^="pixel"] .personal-project-title,
[data-theme^="pixel"] .project-dates,
[data-theme^="pixel"] .job-role-badge,
[data-theme^="pixel"] .skills-category-name,
[data-theme^="pixel"] .details-subtitle,
[data-theme^="pixel"] .app-nav-title,
[data-theme^="pixel"] .contact-label,
[data-theme^="pixel"] .edu-school,
[data-theme^="pixel"] .project-client-name {
  font-family: 'Silkscreen', monospace, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

/* Body & Paragraph Text Rendering */
[data-theme^="pixel"] p,
[data-theme^="pixel"] li,
[data-theme^="pixel"] .hero-summary,
[data-theme^="pixel"] .client-description,
[data-theme^="pixel"] .job-desc,
[data-theme^="pixel"] .project-one-liner,
[data-theme^="pixel"] .personal-project-desc,
[data-theme^="pixel"] .cert-meta,
[data-theme^="pixel"] .edu-degree,
[data-theme^="pixel"] .app-nav-sub {
  font-family: 'Inconsolata', monospace, sans-serif !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-smooth: auto !important;
}

/* Secondary metadata text (Degree, Cert issuer/date, Personal project subtext, Universal nav subtext) */
[data-theme^="pixel"] .edu-degree,
[data-theme^="pixel"] .cert-meta,
[data-theme^="pixel"] .personal-project-desc,
[data-theme^="pixel"] .app-nav-sub {
  font-weight: 600 !important;
}

/* Modular Box Cards & Frames */
[data-theme^="pixel"] .card,
[data-theme^="pixel"] .app-header,
[data-theme^="pixel"] .section-nav-card,
[data-theme^="pixel"] .app-nav-modal,
[data-theme^="pixel"] .hero-card,
[data-theme^="pixel"] .employer-group {
  background: var(--bg-card) !important;
  border-radius: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme^="pixel"] .card::before,
[data-theme^="pixel"] .hero-card::before {
  display: none !important;
}

[data-theme^="pixel"] .card,
[data-theme^="pixel"] .hero-card {
  padding: 1.75rem !important;
}

@media (max-width: 768px) {
  [data-theme^="pixel"] .card,
  [data-theme^="pixel"] .hero-card {
    padding: 1.25rem 1rem !important;
  }
}

/* Pixelated Diagonal Corner Knockout (Upper-Right) - Diagonally-Placed Pixels & Diagonal Shadow Cut */
/* Tier 1: Cards & App Header (10px Cutout / 10 Diagonally-Placed Pixels + 3px Diagonal Shadow Cut) */
[data-theme^="pixel"] .card,
[data-theme^="pixel"] .section-nav-card,
[data-theme^="pixel"] .hero-card,
[data-theme^="pixel"] .employer-group {
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    calc(100% - 10px) 1px,
    calc(100% - 9px) 1px,
    calc(100% - 9px) 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 3px,
    calc(100% - 7px) 3px,
    calc(100% - 7px) 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) 7px,
    calc(100% - 3px) 7px,
    calc(100% - 3px) 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) 9px,
    calc(100% - 1px) 9px,
    calc(100% - 1px) 10px,
    100% 10px,
    100% 13px,
    calc(100% + 1px) 13px,
    calc(100% + 1px) 14px,
    calc(100% + 2px) 14px,
    calc(100% + 2px) 15px,
    calc(100% + 3px) 15px,
    calc(100% + 3px) 16px,
    calc(100% + 20px) 16px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    calc(100% - 10px) 1px,
    calc(100% - 9px) 1px,
    calc(100% - 9px) 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 3px,
    calc(100% - 7px) 3px,
    calc(100% - 7px) 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) 7px,
    calc(100% - 3px) 7px,
    calc(100% - 3px) 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) 9px,
    calc(100% - 1px) 9px,
    calc(100% - 1px) 10px,
    100% 10px,
    100% 13px,
    calc(100% + 1px) 13px,
    calc(100% + 1px) 14px,
    calc(100% + 2px) 14px,
    calc(100% + 2px) 15px,
    calc(100% + 3px) 15px,
    calc(100% + 3px) 16px,
    calc(100% + 20px) 16px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
}

/* Floating App Header Corner Knockout (Extended vertical polygon preserves popover dropdown) */
[data-theme^="pixel"] .app-header {
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    calc(100% - 10px) 1px,
    calc(100% - 9px) 1px,
    calc(100% - 9px) 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 3px,
    calc(100% - 7px) 3px,
    calc(100% - 7px) 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) 7px,
    calc(100% - 3px) 7px,
    calc(100% - 3px) 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) 9px,
    calc(100% - 1px) 9px,
    calc(100% - 1px) 10px,
    100% 10px,
    100% 13px,
    calc(100% + 1px) 13px,
    calc(100% + 1px) 14px,
    calc(100% + 2px) 14px,
    calc(100% + 2px) 15px,
    calc(100% + 3px) 15px,
    calc(100% + 3px) 16px,
    calc(100% + 20px) 16px,
    calc(100% + 20px) 5000px,
    0 5000px
  ) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    calc(100% - 10px) 1px,
    calc(100% - 9px) 1px,
    calc(100% - 9px) 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 3px,
    calc(100% - 7px) 3px,
    calc(100% - 7px) 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) 7px,
    calc(100% - 3px) 7px,
    calc(100% - 3px) 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) 9px,
    calc(100% - 1px) 9px,
    calc(100% - 1px) 10px,
    100% 10px,
    100% 13px,
    calc(100% + 1px) 13px,
    calc(100% + 1px) 14px,
    calc(100% + 2px) 14px,
    calc(100% + 2px) 15px,
    calc(100% + 3px) 15px,
    calc(100% + 3px) 16px,
    calc(100% + 20px) 16px,
    calc(100% + 20px) 5000px,
    0 5000px
  ) !important;
}

[data-theme^="pixel"] .card::after,
[data-theme^="pixel"] .app-header::after,
[data-theme^="pixel"] .section-nav-card::after,
[data-theme^="pixel"] .hero-card::after,
[data-theme^="pixel"] .employer-group::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

[data-theme="pixel-dark"] .card::after,
[data-theme="pixel-dark"] .app-header::after,
[data-theme="pixel-dark"] .section-nav-card::after,
[data-theme="pixel-dark"] .hero-card::after,
[data-theme="pixel-dark"] .employer-group::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z M5 6h1v1h-1z M6 7h1v1h-1z M7 8h1v1h-1z M8 9h1v1h-1z' fill='%23273142' stroke='%23273142' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .card::after,
[data-theme="pixel-light"] .app-header::after,
[data-theme="pixel-light"] .section-nav-card::after,
[data-theme="pixel-light"] .hero-card::after,
[data-theme="pixel-light"] .employer-group::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z M5 6h1v1h-1z M6 7h1v1h-1z M7 8h1v1h-1z M8 9h1v1h-1z' fill='%231c1f24' stroke='%231c1f24' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

/* Tier 2: Interior Boxes & Contact Area (8px Cutout / 8 Diagonally-Placed Pixels + 2px Diagonal Shadow Cut) */
[data-theme^="pixel"] .project-item,
[data-theme^="pixel"] .personal-project-item,
[data-theme^="pixel"] .edu-card,
[data-theme^="pixel"] .cert-item,
[data-theme^="pixel"] #contactDetailsBox {
  position: relative !important;
}

[data-theme^="pixel"] .app-nav-modal {
  position: absolute !important;
}

[data-theme^="pixel"] .project-item,
[data-theme^="pixel"] .personal-project-item,
[data-theme^="pixel"] .edu-card,
[data-theme^="pixel"] .cert-item,
[data-theme^="pixel"] #contactDetailsBox,
[data-theme^="pixel"] .app-nav-modal {
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    calc(100% - 8px) 1px,
    calc(100% - 7px) 1px,
    calc(100% - 7px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 3px,
    calc(100% - 5px) 3px,
    calc(100% - 5px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 5px,
    calc(100% - 3px) 5px,
    calc(100% - 3px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 7px,
    calc(100% - 1px) 7px,
    calc(100% - 1px) 8px,
    100% 8px,
    100% 10px,
    calc(100% + 1px) 10px,
    calc(100% + 1px) 11px,
    calc(100% + 2px) 11px,
    calc(100% + 2px) 12px,
    calc(100% + 20px) 12px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    calc(100% - 8px) 1px,
    calc(100% - 7px) 1px,
    calc(100% - 7px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 3px,
    calc(100% - 5px) 3px,
    calc(100% - 5px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 5px,
    calc(100% - 3px) 5px,
    calc(100% - 3px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 7px,
    calc(100% - 1px) 7px,
    calc(100% - 1px) 8px,
    100% 8px,
    100% 10px,
    calc(100% + 1px) 10px,
    calc(100% + 1px) 11px,
    calc(100% + 2px) 11px,
    calc(100% + 2px) 12px,
    calc(100% + 20px) 12px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
}

[data-theme^="pixel"] .project-item::after,
[data-theme^="pixel"] .personal-project-item::after,
[data-theme^="pixel"] .edu-card::after,
[data-theme^="pixel"] .cert-item::after,
[data-theme^="pixel"] #contactDetailsBox::after,
[data-theme^="pixel"] .app-nav-modal::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 8px 8px;
}

[data-theme="pixel-dark"] .project-item::after,
[data-theme="pixel-dark"] .personal-project-item::after,
[data-theme="pixel-dark"] .edu-card::after,
[data-theme="pixel-dark"] .cert-item::after,
[data-theme="pixel-dark"] #contactDetailsBox::after,
[data-theme="pixel-dark"] .app-nav-modal::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z M5 6h1v1h-1z M6 7h1v1h-1z' fill='%2330363d' stroke='%2330363d' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] .project-item:hover::after,
[data-theme="pixel-dark"] .personal-project-item:hover::after,
[data-theme="pixel-dark"] .cert-item:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z M5 6h1v1h-1z M6 7h1v1h-1z' fill='%237e99b0' stroke='%237e99b0' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .project-item::after,
[data-theme="pixel-light"] .personal-project-item::after,
[data-theme="pixel-light"] .edu-card::after,
[data-theme="pixel-light"] .cert-item::after,
[data-theme="pixel-light"] #contactDetailsBox::after,
[data-theme="pixel-light"] .app-nav-modal::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z M5 6h1v1h-1z M6 7h1v1h-1z' fill='%231c1f24' stroke='%231c1f24' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

/* Tier 3: Buttons & Nav Buttons (6px Cutout / 6 Diagonally-Placed Pixels + 2px Diagonal Shadow Cut) */
[data-theme^="pixel"] .header-action-btn {
  clip-path: none !important;
}

[data-theme^="pixel"] .header-action-btn::after {
  display: none !important;
  content: none !important;
}

[data-theme^="pixel"] .nav-links a,
[data-theme^="pixel"] .filter-btn,
[data-theme^="pixel"] .download-pdf-btn,
[data-theme^="pixel"] #revealContactBtn {
  position: relative !important;
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 1px,
    calc(100% - 5px) 1px,
    calc(100% - 5px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 5px,
    calc(100% - 1px) 5px,
    calc(100% - 1px) 6px,
    100% 6px,
    100% 8px,
    calc(100% + 1px) 8px,
    calc(100% + 1px) 9px,
    calc(100% + 2px) 9px,
    calc(100% + 2px) 10px,
    calc(100% + 20px) 10px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
}

[data-theme^="pixel"] .nav-links a::after,
[data-theme^="pixel"] .filter-btn::after,
[data-theme^="pixel"] .download-pdf-btn::after,
[data-theme^="pixel"] #revealContactBtn::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

/* Tier 3: Action Buttons & Nav Buttons in pixel-dark */
[data-theme="pixel-dark"] .nav-links a::after,
[data-theme="pixel-dark"] .filter-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%2330363d' stroke='%2330363d' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] .filter-btn:hover::after,
[data-theme="pixel-dark"] .filter-btn.active::after,
[data-theme="pixel-dark"] .download-pdf-btn::after,
[data-theme="pixel-dark"] .download-pdf-btn:hover::after,
[data-theme="pixel-dark"] .nav-links a.active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%237e99b0' stroke='%237e99b0' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] #revealContactBtn::after,
[data-theme="pixel-dark"] #revealContactBtn:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%239ab07e' stroke='%239ab07e' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] .nav-links a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%23d49b54' stroke='%23d49b54' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

/* Tier 3: Action Buttons & Nav Buttons in pixel-light */
[data-theme="pixel-light"] .nav-links a::after,
[data-theme="pixel-light"] .filter-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%231c1f24' stroke='%231c1f24' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .download-pdf-btn::after,
[data-theme="pixel-light"] .download-pdf-btn:hover::after,
[data-theme="pixel-light"] #revealContactBtn::after,
[data-theme="pixel-light"] #revealContactBtn:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%233f5223' stroke='%233f5223' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .nav-links a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%23b8860b' stroke='%23b8860b' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .nav-links a.active::after,
[data-theme="pixel-light"] .nav-links a.active:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%232e4a1f' stroke='%232e4a1f' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .filter-btn:hover::after,
[data-theme="pixel-light"] .filter-btn.active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%232e4a1f' stroke='%232e4a1f' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

/* Tier 3b: App Navigation Menu Items (6px Cutout only on hover, focus, or current app) */
[data-theme^="pixel"] .app-nav-link {
  position: relative !important;
  clip-path: none !important;
}

[data-theme^="pixel"] .app-nav-link::after {
  display: none !important;
  content: none !important;
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

[data-theme^="pixel"] .app-nav-link:hover,
[data-theme^="pixel"] .app-nav-link:focus-visible,
[data-theme^="pixel"] .app-nav-link.current-app {
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 1px,
    calc(100% - 5px) 1px,
    calc(100% - 5px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 5px,
    calc(100% - 1px) 5px,
    calc(100% - 1px) 6px,
    100% 6px,
    100% 8px,
    calc(100% + 1px) 8px,
    calc(100% + 1px) 9px,
    calc(100% + 2px) 9px,
    calc(100% + 2px) 10px,
    calc(100% + 20px) 10px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
}

[data-theme^="pixel"] .app-nav-link:hover::after,
[data-theme^="pixel"] .app-nav-link:focus-visible::after,
[data-theme^="pixel"] .app-nav-link.current-app::after {
  content: '' !important;
  display: block !important;
}

[data-theme="pixel-dark"] .app-nav-link:hover::after,
[data-theme="pixel-dark"] .app-nav-link:focus-visible::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%237e99b0' stroke='%237e99b0' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E") !important;
}

[data-theme="pixel-dark"] .app-nav-link.current-app::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%23df8b64' stroke='%23df8b64' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E") !important;
}

[data-theme="pixel-light"] .app-nav-link:hover::after,
[data-theme="pixel-light"] .app-nav-link:focus-visible::after,
[data-theme="pixel-light"] .app-nav-link.current-app::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z M3 4h1v1h-1z M4 5h1v1h-1z' fill='%233f5223' stroke='%233f5223' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E") !important;
}

/* Tier 4: Tags, Skill Pills & Role Badges (4px Cutout / 4 Diagonally-Placed Pixels + 1px Diagonal Shadow Cut) */
[data-theme^="pixel"] .pill,
[data-theme^="pixel"] .job-role-badge,
[data-theme^="pixel"] .employer-meta .job-dates,
[data-theme^="pixel"] .employer-meta .project-count,
[data-theme^="pixel"] .hero-affiliation .badge {
  position: relative !important;
  clip-path: polygon(
    0 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 1px,
    calc(100% - 3px) 1px,
    calc(100% - 3px) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) 3px,
    calc(100% - 1px) 3px,
    calc(100% - 1px) 4px,
    100% 4px,
    100% 5px,
    calc(100% + 1px) 5px,
    calc(100% + 1px) 6px,
    calc(100% + 20px) 6px,
    calc(100% + 20px) calc(100% + 20px),
    0 calc(100% + 20px)
  ) !important;
}

[data-theme^="pixel"] .pill::after,
[data-theme^="pixel"] .job-role-badge::after,
[data-theme^="pixel"] .employer-meta .job-dates::after,
[data-theme^="pixel"] .employer-meta .project-count::after,
[data-theme^="pixel"] .hero-affiliation .badge::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 4px;
  height: 4px;
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 4px 4px;
}

/* Tier 4: Tags, Skill Pills & Role Badges in pixel-dark */
[data-theme="pixel-dark"] .pill::after,
[data-theme="pixel-dark"] .employer-meta .job-dates::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%2330363d' stroke='%2330363d' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] .pill.highlight::after,
[data-theme="pixel-dark"] .tech-stack-row .pill::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%237e99b0' stroke='%237e99b0' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] .employer-meta .project-count::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%23d49b54' stroke='%23d49b54' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-dark"] .hero-affiliation .badge::after,
[data-theme="pixel-dark"] .job-role-badge::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%23b86542' stroke='%23b86542' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

/* Tier 4: Tags, Skill Pills & Role Badges in pixel-light */
[data-theme="pixel-light"] .pill::after,
[data-theme="pixel-light"] .employer-meta .job-dates::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%231c1f24' stroke='%231c1f24' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .pill.highlight::after,
[data-theme="pixel-light"] .tech-stack-row .pill::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%233f5223' stroke='%233f5223' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .employer-meta .project-count::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%23b8860b' stroke='%23b8860b' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .hero-affiliation .badge::after,
[data-theme="pixel-light"] .job-role-badge::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'%3E%3Cpath d='M0 1h1v1h-1z M1 2h1v1h-1z M2 3h1v1h-1z' fill='%23d9531e' stroke='%23d9531e' stroke-width='0' shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

[data-theme="pixel-light"] .card,
[data-theme="pixel-light"] .app-header,
[data-theme="pixel-light"] .section-nav-card,
[data-theme="pixel-light"] .app-nav-modal,
[data-theme="pixel-light"] .hero-card,
[data-theme="pixel-light"] .employer-group {
  background: var(--bg-card) !important;
  border: 1px solid #1c1f24 !important;
  box-shadow: 3px 3px 0 #1c1f24 !important;
}

/* Hero Typography Refinements in Pixel Mode */
[data-theme^="pixel"] .hero-name {
  margin-bottom: 0.45rem !important;
  line-height: 1 !important;
}

[data-theme^="pixel"] .hero-name-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[data-theme^="pixel"] .hero-name-matrix-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

[data-theme^="pixel"] .hero-name-matrix {
  display: block !important;
  width: 100%;
  width: round(down, 100%, 6px);
  height: 42px !important;
  overflow: hidden !important;
  /* Top-Right Knockout: cuts top-right corner pixel plus two adjacent pixels (3 pixels removed total) */
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--hero-cutout-col2, 12px)) 0,
    calc(100% - var(--hero-cutout-col2, 12px)) var(--hero-cutout-row1, 6px),
    calc(100% - var(--hero-cutout-col1, 6px)) var(--hero-cutout-row1, 6px),
    calc(100% - var(--hero-cutout-col1, 6px)) var(--hero-cutout-row2, 12px),
    100% var(--hero-cutout-row2, 12px),
    100% 100%,
    0 100%
  ) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--hero-cutout-col2, 12px)) 0,
    calc(100% - var(--hero-cutout-col2, 12px)) var(--hero-cutout-row1, 6px),
    calc(100% - var(--hero-cutout-col1, 6px)) var(--hero-cutout-row1, 6px),
    calc(100% - var(--hero-cutout-col1, 6px)) var(--hero-cutout-row2, 12px),
    100% var(--hero-cutout-row2, 12px),
    100% 100%,
    0 100%
  ) !important;
}

/* Header Brand Dot-Matrix */
[data-theme^="pixel"] .brand-group {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 1.25rem;
}

[data-theme^="pixel"] .brand-text {
  flex: 1 1 auto;
  min-width: 0;
}

[data-theme^="pixel"] .brand-title {
  width: 100%;
}

[data-theme^="pixel"] .brand-title-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[data-theme^="pixel"] .brand-title-matrix-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin-top: 2px;
  margin-bottom: 2px;
}

[data-theme^="pixel"] .brand-title-matrix {
  display: block !important;
  width: 100%;
  width: round(down, 100%, 3px);
  height: 21px !important;
  overflow: hidden !important;
  /* Top-Right Knockout: cuts top-right corner pixel plus two adjacent pixels (3 pixels removed total) */
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--brand-cutout-col2, 6px)) 0,
    calc(100% - var(--brand-cutout-col2, 6px)) var(--brand-cutout-row1, 3px),
    calc(100% - var(--brand-cutout-col1, 3px)) var(--brand-cutout-row1, 3px),
    calc(100% - var(--brand-cutout-col1, 3px)) var(--brand-cutout-row2, 6px),
    100% var(--brand-cutout-row2, 6px),
    100% 100%,
    0 100%
  ) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--brand-cutout-col2, 6px)) 0,
    calc(100% - var(--brand-cutout-col2, 6px)) var(--brand-cutout-row1, 3px),
    calc(100% - var(--brand-cutout-col1, 3px)) var(--brand-cutout-row1, 3px),
    calc(100% - var(--brand-cutout-col1, 3px)) var(--brand-cutout-row2, 6px),
    100% var(--brand-cutout-row2, 6px),
    100% 100%,
    0 100%
  ) !important;
}

[data-theme^="pixel"] .brand-subtitle {
  margin-left: var(--brand-sub-indent, 3px) !important;
}

[data-theme^="pixel"] .brand-title-matrix .matrix-dot-off,
[data-theme^="pixel"] .hero-name-matrix .matrix-dot-off {
  fill: var(--matrix-dot-off, #222a36);
  transition: fill 0.25s ease;
}

[data-theme^="pixel"] .matrix-dots-on .matrix-brand-first rect {
  fill: var(--matrix-brand-first, #e8e4db);
  transition: fill 0.25s ease;
}

[data-theme^="pixel"] .matrix-dots-on .matrix-brand-accent rect {
  fill: var(--matrix-brand-accent, #7e99b0);
  transition: fill 0.25s ease;
}

/* Big Name in Overview Panel: matches Cichowicz to the color of Casey */
[data-theme^="pixel"] .hero-name-matrix .matrix-dots-on .matrix-brand-accent rect {
  fill: var(--matrix-brand-first, #e8e4db);
}

[data-theme^="pixel"] .hero-title {
  font-family: 'Silkscreen', monospace, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  gap: 0.35rem 0.65rem !important;
  margin-left: var(--hero-sub-indent, 6px) !important;
}

@media (min-width: 769px) {
  [data-theme^="pixel"] .hero-title {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
}

[data-theme^="pixel"] .hero-title-item {
  font-family: 'Silkscreen', monospace, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

[data-theme^="pixel"] .hero-affiliation {
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  margin-left: var(--hero-sub-indent, 6px) !important;
}

[data-theme^="pixel"] .hero-affiliation .badge {
  font-family: 'Silkscreen', monospace, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.6rem !important;
}

[data-theme="pixel-dark"] .hero-affiliation .badge {
  background: rgba(184, 101, 66, 0.14) !important;
  border: 1px solid #b86542 !important;
  color: #df8b64 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

[data-theme="pixel-light"] .hero-affiliation .badge {
  background: rgba(217, 83, 30, 0.12) !important;
  border: 1px solid #d9531e !important;
  color: #9a3412 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
}

/* Section Titles with Retro K10k Window Bar Styling */
[data-theme^="pixel"] .section-title {
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.25 !important;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border-subtle);
  position: relative;
}

[data-theme^="pixel"] .section-title svg {
  width: 24px !important;
  height: 24px !important;
  margin-top: -2px !important;
}

[data-theme^="pixel"] #education .section-title svg,
[data-theme^="pixel"] #projects .section-title svg {
  width: 32px !important;
  height: 32px !important;
  margin-top: -6px !important;
}

[data-theme^="pixel"] .brand-icon svg {
  width: 28px !important;
  height: 28px !important;
}

[data-theme^="pixel"] .edu-icon svg {
  width: 40px !important;
  height: 40px !important;
}

@media (min-width: 769px) {
  [data-theme^="pixel"] .section-title {
    white-space: nowrap !important;
  }
}

[data-theme^="pixel"] #skills .section-title span::before {
  content: '[01] // ';
  opacity: 0.8;
}
[data-theme^="pixel"] #experience .section-title span::before {
  content: '[02] // ';
  opacity: 0.8;
}
[data-theme^="pixel"] #education .section-title span::before {
  content: '[03] // ';
  opacity: 0.8;
}
[data-theme^="pixel"] #certifications .section-title span::before {
  content: '[04] // ';
  opacity: 0.8;
}
[data-theme^="pixel"] #projects .section-title span::before {
  content: '[05] // ';
  opacity: 0.8;
}

/* Navigation Tabs */
[data-theme^="pixel"] .nav-links a {
  border-radius: 0 !important;
  font-size: 12px !important;
  padding: 0.35rem 0.65rem !important;
  transition: none !important;
}
[data-theme="pixel-dark"] .nav-links a {
  background: #151b22 !important;
  border: 1px solid #30363d !important;
  color: #8b949e !important;
}
[data-theme="pixel-dark"] .nav-links a:hover {
  background: #1c232d !important;
  border-color: #d49b54 !important;
  color: #d49b54 !important;
  box-shadow: none !important;
}
[data-theme="pixel-dark"] .nav-links a.active {
  background: #7e99b0 !important;
  border-color: #7e99b0 !important;
  color: #0e1217 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}
[data-theme="pixel-light"] .nav-links a {
  background: #e2dfd6 !important;
  border: 1px solid #1c1f24 !important;
  color: #181b1f !important;
}
[data-theme="pixel-light"] .nav-links a:hover {
  background: #f5f0e1 !important;
  border-color: #b8860b !important;
  color: #8a6508 !important;
  box-shadow: none !important;
}
[data-theme="pixel-light"] .nav-links a.active,
[data-theme="pixel-light"] .nav-links a.active:hover {
  background: #2e4a1f !important;
  border: 1px solid #2e4a1f !important;
  color: #dfded8 !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Pills & Skill Badges */
[data-theme^="pixel"] .pill {
  border-radius: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: 10px !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3) !important;
}
[data-theme^="pixel"] .pill.highlight {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(56, 189, 248, 0.08) !important;
}
[data-theme="pixel-dark"] .pill {
  border: 1px solid #30363d !important;
}
[data-theme="pixel-light"] .pill {
  border: 1px solid #1c1f24 !important;
}
[data-theme="pixel-light"] .pill.highlight {
  background: rgba(85, 107, 47, 0.12) !important;
  color: #3f5223 !important;
  border-color: #3f5223 !important;
}

/* Filter Buttons & Action Triggers */
[data-theme^="pixel"] .filter-btn {
  border-radius: 0 !important;
  font-size: 12px !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
[data-theme^="pixel"] .filter-btn:hover {
  filter: brightness(1.15);
}

/* Quick Stats & Contact Details Row Layout in Pixel Mode (Matches Regular Mode Side-by-Side) */
[data-theme^="pixel"] .quick-stats {
  gap: 1.15rem !important;
  flex-shrink: 0 !important;
}
[data-theme^="pixel"] .stat-value {
  font-size: 20px !important;
}
[data-theme^="pixel"] .stat-label {
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}
/* Pixel Contact Box Shared Layout */
[data-theme^="pixel"] #contactDetailsBox {
  margin-top: 0 !important;
  padding: 0.65rem 0.85rem !important;
  gap: 0.85rem !important;
  border-radius: 0 !important;
}
@media (min-width: 900px) {
  [data-theme^="pixel"] #contactDetailsBox {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }
}
@media (max-width: 899px) {
  [data-theme^="pixel"] #contactDetailsBox {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  [data-theme^="pixel"] .contact-action-group,
  [data-theme^="pixel"] .download-pdf-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
[data-theme^="pixel"] .contact-text-group {
  min-width: unset !important;
}
[data-theme^="pixel"] .contact-label {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}
[data-theme^="pixel"] .contact-val,
[data-theme^="pixel"] .contact-val a {
  font-family: 'Inconsolata', monospace !important;
  font-size: 14px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
[data-theme^="pixel"] .download-pdf-btn {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  padding: 0.4rem 0.65rem !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  letter-spacing: 0.04em !important;
}
[data-theme^="pixel"] .download-pdf-btn svg {
  stroke: currentColor !important;
}
@media (min-width: 900px) {
  [data-theme^="pixel"] .quick-stats-row {
    flex-wrap: nowrap !important;
    gap: 1.5rem !important;
  }
}

/* Pixel Dark Specific Contact Styling */
[data-theme="pixel-dark"] #contactDetailsBox {
  background: rgba(154, 176, 126, 0.12) !important;
  border: 1px solid #30363d !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
[data-theme="pixel-dark"] .contact-label {
  color: #d49b54 !important;
}
[data-theme="pixel-dark"] .contact-val,
[data-theme="pixel-dark"] .contact-val a {
  color: #7e99b0 !important;
}
[data-theme="pixel-dark"] .contact-val a:hover {
  color: #9ab07e !important;
}
[data-theme="pixel-dark"] .download-pdf-btn {
  background: rgba(126, 153, 176, 0.12) !important;
  border: 1px solid #7e99b0 !important;
  color: #7e99b0 !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
[data-theme="pixel-dark"] .download-pdf-btn:hover {
  background: #7e99b0 !important;
  color: #151b22 !important;
}
[data-theme="pixel-dark"] #revealContactBtn {
  background: rgba(154, 176, 126, 0.12) !important;
  border: 1px solid #9ab07e !important;
  color: #9ab07e !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
[data-theme="pixel-dark"] #revealContactBtn:hover {
  background: #9ab07e !important;
  color: #151b22 !important;
}

/* Pixel Light Specific Contact Styling (Matches K10k Olive & Paper) */
[data-theme="pixel-light"] #contactDetailsBox {
  background: #f0eee8 !important;
  border: 1px solid #1c1f24 !important;
  box-shadow: 2px 2px 0 #1c1f24 !important;
}
[data-theme="pixel-light"] .contact-label {
  color: #3f5223 !important;
}
[data-theme="pixel-light"] .contact-val,
[data-theme="pixel-light"] .contact-val a {
  color: #1c1f24 !important;
}
[data-theme="pixel-light"] .contact-val a:hover {
  color: #3f5223 !important;
}
[data-theme="pixel-light"] .download-pdf-btn {
  background: rgba(85, 107, 47, 0.12) !important;
  border: 1px solid #3f5223 !important;
  color: #3f5223 !important;
  box-shadow: 2px 2px 0 #1c1f24 !important;
}
[data-theme="pixel-light"] .download-pdf-btn:hover {
  background: #3f5223 !important;
  color: #dfded8 !important;
}
[data-theme="pixel-light"] #revealContactBtn {
  background: rgba(85, 107, 47, 0.12) !important;
  border: 1px solid #3f5223 !important;
  color: #3f5223 !important;
  box-shadow: 2px 2px 0 #1c1f24 !important;
}
[data-theme="pixel-light"] #revealContactBtn:hover {
  background: #3f5223 !important;
  color: #dfded8 !important;
}

/* Headshot Avatar in Pixel Mode */
[data-theme^="pixel"] #heroHeadshotWrapper,
[data-theme^="pixel"] #heroHeadshotWrapper .hero-photo {
  border-radius: 0 !important;
}
[data-theme^="pixel"] #heroHeadshotWrapper {
  border: 2px solid var(--accent) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4) !important;
}
[data-theme="pixel-dark"] #heroHeadshotWrapper {
  border: 2px solid #000810 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}
[data-theme="pixel-light"] #heroHeadshotWrapper {
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0 #1c1f24 !important;
}
[data-theme^="pixel"] #heroHeadshotWrapper .hero-photo-hd {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
[data-theme^="pixel"] #heroHeadshotWrapper .hero-photo-pixel {
  opacity: 1;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  z-index: 2;
}

[data-theme^="pixel"] #heroHeadshotWrapper.is-hd .hero-photo-hd,
[data-theme^="pixel"] #heroHeadshotWrapper.is-pixel-revealing-hd .hero-photo-hd {
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 3;
  transition: opacity 1s ease-in-out;
}

[data-theme^="pixel"] #heroHeadshotWrapper.is-hd .hero-photo-pixel,
[data-theme^="pixel"] #heroHeadshotWrapper.is-pixel-revealing-hd .hero-photo-pixel {
  opacity: 0 !important;
  transition: opacity 1s ease-in-out;
}

/* Theme-Harmonizing Color Blend Layer over Pixel Photo */
[data-theme^="pixel"] #heroHeadshotWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: color;
  transition: opacity 0.8s ease-in-out;
}

[data-theme="pixel-dark"] #heroHeadshotWrapper::after {
  background: linear-gradient(145deg, #7e99b0 0%, #9cb1c4 40%, #d49b54 100%);
  opacity: 0.92;
}

[data-theme="pixel-dark"] #heroHeadshotWrapper .hero-photo-pixel {
  filter: contrast(1.12) brightness(0.96);
}

[data-theme="pixel-light"] #heroHeadshotWrapper::after {
  background: linear-gradient(135deg, #556b2f 0%, #b8860b 100%);
  opacity: 0.82;
}

[data-theme="pixel-light"] #heroHeadshotWrapper .hero-photo-pixel {
  filter: contrast(1.1) brightness(0.95);
}

[data-theme^="pixel"] #heroHeadshotWrapper.is-hd::after,
[data-theme^="pixel"] #heroHeadshotWrapper.is-pixel-revealing-hd::after {
  opacity: 0 !important;
}

/* Easter Egg Toggle Square Styling in Pixel Modes */
[data-theme^="pixel"] .hero-title-sep {
  top: 1px !important;
  background-color: currentColor !important;
  box-shadow: none !important;
}
[data-theme="pixel-dark"] .hero-title-sep:hover,
[data-theme="pixel-dark"] .hero-title-sep:focus-visible {
  background-color: #9ab07e !important;
  box-shadow: 0 0 8px rgba(154, 176, 126, 0.6) !important;
}
[data-theme="pixel-light"] .hero-title-sep:hover,
[data-theme="pixel-light"] .hero-title-sep:focus-visible {
  background-color: #a16207 !important;
  box-shadow: 0 0 8px rgba(161, 98, 7, 0.5) !important;
}

/* Pixel Light High Contrast Elements */
[data-theme="pixel-light"] .stat-value {
  color: #2e4a1f !important;
}
[data-theme="pixel-light"] .stat-label {
  color: #713f12 !important;
}
[data-theme="pixel-light"] .brand-title {
  color: #181b1f !important;
}
[data-theme="pixel-light"] .brand-subtitle {
  color: #4b5563 !important;
}
[data-theme="pixel-light"] .brand-icon {
  background: rgba(46, 74, 31, 0.12) !important;
  border-color: #2e4a1f !important;
  color: #2e4a1f !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
}
[data-theme="pixel-light"] .hero-title {
  color: #2e4a1f !important;
}
[data-theme="pixel-light"] .hero-name {
  color: #181b1f !important;
}
[data-theme="pixel-light"] .hero-summary strong {
  color: #181b1f !important;
}
[data-theme="pixel-light"] .section-title {
  color: #181b1f !important;
}
[data-theme="pixel-light"] .badge {
  background: #2e4a1f !important;
  color: #dfded8 !important;
  border: 1px solid #2e4a1f !important;
}
[data-theme="pixel-light"] .timeline-controls .filter-btn {
  background: #eceae4 !important;
  color: #181b1f !important;
  border-color: #1c1f24 !important;
}
[data-theme="pixel-light"] .timeline-controls .filter-btn:hover,
[data-theme="pixel-light"] .timeline-controls .filter-btn.active {
  background: #2e4a1f !important;
  border-color: #2e4a1f !important;
  color: #dfded8 !important;
}

/* ==========================================================================
   Modular Pixel Grid Cards & Work Experience Blocks (.project-item, etc.)
   ========================================================================== */

/* Common base for all pixel themes */
[data-theme^="pixel"] .project-item,
[data-theme^="pixel"] .personal-project-item,
[data-theme^="pixel"] .edu-card,
[data-theme^="pixel"] .cert-item {
  border-radius: 0 !important;
  transition: none !important;
}

[data-theme^="pixel"] .project-header {
  padding: 1rem 1.25rem !important;
}

[data-theme^="pixel"] .expand-icon {
  border-radius: 0 !important;
  font-size: 0px !important;
  line-height: 0 !important;
  transition: none !important;
  position: relative !important;
  overflow: hidden !important;
}

[data-theme^="pixel"] .expand-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 12px;
  height: 4px;
  background: currentColor;
}

[data-theme^="pixel"] .expand-icon::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 4px;
  height: 12px;
  background: currentColor;
}

[data-theme^="pixel"] .project-item:not(:has(.project-body.collapsed)) .expand-icon::after,
[data-theme^="pixel"] .expand-icon.is-expanded::after {
  display: none !important;
}

[data-theme^="pixel"] .project-client-name {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 16px !important; /* exact 2x integer multiple of Silkscreen 8px native grid */
  letter-spacing: 0.03em !important;
}

[data-theme^="pixel"] .project-dates {
  font-family: 'Silkscreen', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

[data-theme^="pixel"] .employer-meta .job-dates,
[data-theme^="pixel"] .employer-meta .project-count {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  padding: 0.22rem 0.55rem !important;
  line-height: 1.25 !important;
}

[data-theme^="pixel"] .job-role-badge {
  border-radius: 0 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.55rem !important;
}

[data-theme^="pixel"] .project-one-liner {
  font-family: 'Inconsolata', monospace !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

[data-theme^="pixel"] .client-description {
  font-family: 'Inconsolata', monospace !important;
  font-size: 14px !important;
}

[data-theme^="pixel"] .details-subtitle {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

[data-theme^="pixel"] .job-desc {
  font-family: 'Inconsolata', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

[data-theme^="pixel"] .job-responsibilities {
  font-family: 'Inconsolata', monospace !important;
}

[data-theme^="pixel"] .job-responsibilities li {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

[data-theme^="pixel"] .job-responsibilities li::before {
  content: "■" !important;
  font-size: 10px !important;
  top: 2px !important;
}

[data-theme^="pixel"] .tech-stack-row {
  margin-top: 1rem !important;
}

/* App Footer Links in Pixel Mode */
[data-theme^="pixel"] .app-footer a,
[data-theme^="pixel"] footer a {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

[data-theme^="pixel"] .app-footer a:hover,
[data-theme^="pixel"] footer a:hover {
  color: var(--accent-yellow) !important;
  text-decoration: none !important;
}

/* Universal App Navigation Dropdown in Pixel Mode */
[data-theme^="pixel"] .app-nav-name {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

[data-theme^="pixel"] .app-nav-title {
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

[data-theme^="pixel"] .app-nav-sub {
  font-family: 'Inconsolata', monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

[data-theme^="pixel"] .app-nav-link {
  border-radius: 0 !important;
  transition: none !important;
}

/* ==========================================================================
   Pixel Light: Classic K10k Warm Putty & Paper Palette (High Contrast)
   ========================================================================== */
[data-theme="pixel-light"] .project-item,
[data-theme="pixel-light"] .personal-project-item,
[data-theme="pixel-light"] .edu-card,
[data-theme="pixel-light"] .cert-item,
[data-theme="pixel-light"] #contactDetailsBox {
  background: #f0eee8 !important;
  border: 1px solid #1c1f24 !important;
  box-shadow: 2px 2px 0 #1c1f24 !important;
}

[data-theme="pixel-light"] .project-item:hover,
[data-theme="pixel-light"] .personal-project-item:hover,
[data-theme="pixel-light"] .cert-item:hover {
  box-shadow: 3px 3px 0 #1c1f24 !important;
  transform: none !important;
}

[data-theme="pixel-light"] .header-action-btn {
  background: #e2dfd6 !important;
  border: 1px solid #1c1f24 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
  color: #1c1f24 !important;
}

[data-theme="pixel-light"] .header-action-btn svg {
  stroke: #1c1f24 !important;
  color: #1c1f24 !important;
  fill: #1c1f24 !important;
}

[data-theme="pixel-light"] .header-action-btn:hover,
[data-theme="pixel-light"] .header-action-btn.active {
  background: #3f5223 !important;
  border-color: #1c1f24 !important;
  color: #f0eee8 !important;
  box-shadow: none !important;
}

[data-theme="pixel-light"] .header-action-btn:hover svg,
[data-theme="pixel-light"] .header-action-btn.active svg {
  stroke: #f0eee8 !important;
  color: #f0eee8 !important;
  fill: #f0eee8 !important;
}

[data-theme="pixel-light"] .expand-icon {
  background: #e2dfd6 !important;
  border: 1px solid #1c1f24 !important;
  color: #1c1f24 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
}

[data-theme="pixel-light"] .project-header:hover .expand-icon {
  background: #3f5223 !important;
  color: #f0eee8 !important;
  border-color: #1c1f24 !important;
}

[data-theme="pixel-light"] .project-client-name {
  color: #181b1f !important;
}

[data-theme="pixel-light"] .project-dates {
  color: #3f5223 !important;
}

[data-theme="pixel-light"] .job-role-badge {
  background: rgba(217, 83, 30, 0.12) !important;
  border: 1px solid #d9531e !important;
  color: #9a3412 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
}

[data-theme="pixel-light"] .project-one-liner {
  color: #181b1f !important;
}

[data-theme="pixel-light"] .project-body {
  border-top: 1px dashed #1c1f24 !important;
}

[data-theme="pixel-light"] .client-description {
  color: #4b5563 !important;
}

[data-theme="pixel-light"] .details-subtitle {
  color: #713f12 !important;
}

[data-theme="pixel-light"] .job-desc {
  color: #181b1f !important;
}

[data-theme="pixel-light"] .job-responsibilities li {
  color: #181b1f !important;
}

[data-theme="pixel-light"] .job-responsibilities li::before {
  color: #3f5223 !important;
}

[data-theme="pixel-light"] .tech-stack-row .tech-stack-label {
  color: #3f5223 !important;
  font-family: 'Silkscreen', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

[data-theme="pixel-light"] .tech-stack-row .pill {
  background: rgba(85, 107, 47, 0.12) !important;
  border: 1px solid #3f5223 !important;
  color: #3f5223 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
  font-family: 'Silkscreen', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

/* Employer group header in pixel-light */
[data-theme="pixel-light"] .employer-name {
  color: #181b1f !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
}

[data-theme="pixel-light"] .employer-role {
  color: #3f5223 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

[data-theme="pixel-light"] .employer-meta .job-dates {
  background: #f0eee8 !important;
  border: 1px solid #1c1f24 !important;
  color: #181b1f !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  padding: 0.22rem 0.55rem !important;
  line-height: 1.25 !important;
}

[data-theme="pixel-light"] .employer-meta .project-count {
  background: rgba(184, 134, 11, 0.12) !important;
  border: 1px solid #b8860b !important;
  color: #6b4e06 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  padding: 0.22rem 0.55rem !important;
  line-height: 1.25 !important;
}

/* Skills, Personal projects, Education & Certifications in pixel-light */
[data-theme="pixel-light"] .skills-category-name {
  color: #713f12 !important;
}

[data-theme="pixel-light"] .personal-project-title {
  color: #181b1f !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
}

[data-theme="pixel-light"] .personal-project-desc {
  color: #1f242b !important;
}

[data-theme="pixel-light"] .personal-project-ext {
  color: #1c1f24 !important;
}

[data-theme="pixel-light"] .edu-school {
  color: #181b1f !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

[data-theme="pixel-light"] .edu-degree {
  color: #1f242b !important;
}

[data-theme="pixel-light"] .cert-title {
  color: #181b1f !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

[data-theme="pixel-light"] .cert-meta {
  color: #1f242b !important;
}

[data-theme="pixel-light"] .app-nav-modal {
  background: #e2dfd6 !important;
  border: 1px solid #1c1f24 !important;
  box-shadow: 3px 3px 0 #1c1f24 !important;
}

[data-theme="pixel-light"] .app-nav-title {
  color: #3f5223 !important;
  border-bottom: 1px solid #1c1f24 !important;
}

[data-theme="pixel-light"] .app-nav-name {
  color: #181b1f !important;
}

[data-theme="pixel-light"] .app-nav-sub {
  color: #1f242b !important;
}

[data-theme="pixel-light"] .app-nav-ext {
  color: #1c1f24 !important;
  opacity: 0.7 !important;
}

[data-theme="pixel-light"] .app-nav-link:hover {
  background: #f0eee8 !important;
  border-color: #3f5223 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
  transform: none !important;
}

[data-theme="pixel-light"] .app-nav-link:hover .app-nav-name {
  color: #3f5223 !important;
}

[data-theme="pixel-light"] .app-nav-link:hover .app-nav-sub {
  color: #181b1f !important;
}

[data-theme="pixel-light"] .app-nav-link:hover .app-nav-ext {
  color: #3f5223 !important;
  opacity: 1 !important;
}

[data-theme="pixel-light"] .app-nav-link.current-app {
  background: rgba(85, 107, 47, 0.12) !important;
  border: 1px solid #3f5223 !important;
  box-shadow: 1px 1px 0 #1c1f24 !important;
}

[data-theme="pixel-light"] .app-nav-link.current-app .app-nav-name {
  color: #3f5223 !important;
}

[data-theme="pixel-light"] .app-nav-link.current-app .app-nav-active-dot {
  background: #3f5223 !important;
  box-shadow: 0 0 4px #3f5223 !important;
}

[data-theme="pixel-light"] .cert-icon {
  color: #3f5223 !important;
}

/* ==========================================================================
   Pixel Dark: Cyber-Slate & Earth-Tone Colorway (High Contrast & Organic Tones)
   ========================================================================== */
[data-theme="pixel-dark"] .card,
[data-theme="pixel-dark"] .app-header,
[data-theme="pixel-dark"] .section-nav-card,
[data-theme="pixel-dark"] .app-nav-modal,
[data-theme="pixel-dark"] .hero-card,
[data-theme="pixel-dark"] .employer-group {
  box-shadow: 3px 3px 0 #000000, 4px 4px 0 rgba(0, 0, 0, 0.6) !important;
}

[data-theme="pixel-dark"] .project-item,
[data-theme="pixel-dark"] .personal-project-item,
[data-theme="pixel-dark"] .edu-card,
[data-theme="pixel-dark"] .cert-item,
[data-theme="pixel-dark"] #contactDetailsBox {
  background: #1c232d !important;
  border: 1px solid #30363d !important;
  box-shadow: 2px 2px 0 #000000, 3px 3px 0 rgba(0, 0, 0, 0.6) !important;
}

[data-theme="pixel-dark"] .project-item:hover,
[data-theme="pixel-dark"] .personal-project-item:hover,
[data-theme="pixel-dark"] .cert-item:hover {
  border-color: #7e99b0 !important;
  box-shadow: 3px 3px 0 #000000, 4px 4px 0 rgba(0, 0, 0, 0.7) !important;
  transform: none !important;
}

[data-theme="pixel-dark"] .expand-icon {
  background: rgba(126, 153, 176, 0.12) !important;
  border: 1px solid #7e99b0 !important;
  color: #7e99b0 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

[data-theme="pixel-dark"] .project-header:hover .expand-icon {
  background: #7e99b0 !important;
  color: #151b22 !important;
  border-color: #7e99b0 !important;
}

[data-theme="pixel-dark"] .project-client-name {
  color: #e8e4db !important;
}

[data-theme="pixel-dark"] .project-dates {
  color: #8b949e !important;
}

[data-theme="pixel-dark"] .job-role-badge {
  background: rgba(184, 101, 66, 0.14) !important;
  border: 1px solid #b86542 !important;
  color: #df8b64 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

[data-theme="pixel-dark"] .project-one-liner {
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .project-body {
  border-top: 1px dashed #30363d !important;
}

[data-theme="pixel-dark"] .client-description {
  color: #8b949e !important;
}

[data-theme="pixel-dark"] .details-subtitle {
  color: #d49b54 !important;
}

[data-theme="pixel-dark"] .job-desc {
  color: #ded9cf !important;
}

[data-theme="pixel-dark"] .job-responsibilities li {
  color: #ded9cf !important;
}

[data-theme="pixel-dark"] .job-responsibilities li::before {
  color: #9ab07e !important;
}

[data-theme="pixel-dark"] .tech-stack-row .tech-stack-label {
  color: #8b949e !important;
  font-family: 'Silkscreen', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

[data-theme="pixel-dark"] .tech-stack-row .pill {
  background: rgba(126, 153, 176, 0.1) !important;
  border: 1px solid #7e99b0 !important;
  color: #7e99b0 !important;
  box-shadow: 1px 1px 0 #000000 !important;
  font-family: 'Silkscreen', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

/* Employer group header in pixel-dark */
[data-theme="pixel-dark"] .employer-name {
  color: #7e99b0 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
}

[data-theme="pixel-dark"] .employer-role {
  color: #9ab07e !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

[data-theme="pixel-dark"] .employer-meta .job-dates {
  background: #1c232d !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
  box-shadow: 1px 1px 0 #000000 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  padding: 0.22rem 0.55rem !important;
  line-height: 1.25 !important;
}

[data-theme="pixel-dark"] .employer-meta .project-count {
  background: rgba(212, 155, 84, 0.12) !important;
  border: 1px solid #d49b54 !important;
  color: #d49b54 !important;
  box-shadow: 1px 1px 0 #000000 !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  padding: 0.22rem 0.55rem !important;
  line-height: 1.25 !important;
}

/* Skills, Personal projects, Education & Certifications in pixel-dark */
[data-theme="pixel-dark"] .skills-category-name {
  color: #d49b54 !important;
}

[data-theme="pixel-dark"] .personal-project-title {
  color: #e8e4db !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
}

[data-theme="pixel-dark"] .personal-project-desc {
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .personal-project-ext {
  color: #7e99b0 !important;
}

[data-theme="pixel-dark"] .edu-school {
  color: #e8e4db !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

[data-theme="pixel-dark"] .edu-degree {
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .cert-title {
  color: #e8e4db !important;
  font-family: 'Silkscreen', monospace !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

[data-theme="pixel-dark"] .cert-meta {
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .app-nav-modal {
  background: #151b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

[data-theme="pixel-dark"] .app-nav-title {
  color: #7e99b0 !important;
  border-bottom: 1px solid #30363d !important;
}

[data-theme="pixel-dark"] .app-nav-name {
  color: #e8e4db !important;
}

[data-theme="pixel-dark"] .app-nav-sub {
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .app-nav-ext {
  color: #7e99b0 !important;
  opacity: 0.7 !important;
}

[data-theme="pixel-dark"] .app-nav-link:hover {
  background: #1c232d !important;
  border-color: #7e99b0 !important;
  box-shadow: 1px 1px 0 #000000 !important;
  transform: none !important;
}

[data-theme="pixel-dark"] .app-nav-link:hover .app-nav-name {
  color: #7e99b0 !important;
}

[data-theme="pixel-dark"] .app-nav-link:hover .app-nav-sub {
  color: #e8e4db !important;
}

[data-theme="pixel-dark"] .app-nav-link:hover .app-nav-ext {
  color: #7e99b0 !important;
  opacity: 1 !important;
}

[data-theme="pixel-dark"] .app-nav-link.current-app {
  background: rgba(223, 139, 100, 0.14) !important;
  border: 1px solid #df8b64 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

[data-theme="pixel-dark"] .app-nav-link.current-app .app-nav-name {
  color: #df8b64 !important;
}

[data-theme="pixel-dark"] .app-nav-link.current-app .app-nav-active-dot {
  background: #df8b64 !important;
  box-shadow: 0 0 4px #df8b64 !important;
}

[data-theme="pixel-dark"] .app-nav-link.current-app:hover {
  background: rgba(223, 139, 100, 0.22) !important;
  border-color: #df8b64 !important;
}

[data-theme="pixel-dark"] .app-nav-link.current-app:hover .app-nav-name {
  color: #df8b64 !important;
}

[data-theme="pixel-dark"] .cert-icon {
  color: #7e99b0 !important;
}

[data-theme="pixel-dark"] .section-title {
  color: #e8e4db !important;
}

[data-theme="pixel-dark"] .hero-name {
  color: #e8e4db !important;
}

[data-theme="pixel-dark"] .hero-title {
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .brand-title {
  color: #e8e4db !important;
}

[data-theme="pixel-dark"] .brand-subtitle {
  color: #7e99b0 !important;
}

[data-theme="pixel-dark"] .brand-icon {
  background: rgba(126, 153, 176, 0.12) !important;
  border: 1px solid #7e99b0 !important;
  color: #7e99b0 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

[data-theme="pixel-dark"] .header-action-btn {
  background: #1c232d !important;
  border: 1px solid #30363d !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

[data-theme="pixel-dark"] .header-action-btn svg {
  stroke: #7e99b0 !important;
  color: #7e99b0 !important;
  fill: #7e99b0 !important;
}

[data-theme="pixel-dark"] .header-action-btn:hover,
[data-theme="pixel-dark"] .header-action-btn.active {
  background: #7e99b0 !important;
  border-color: #7e99b0 !important;
  box-shadow: none !important;
}

[data-theme="pixel-dark"] .header-action-btn:hover svg,
[data-theme="pixel-dark"] .header-action-btn.active svg {
  stroke: #0e1217 !important;
  color: #0e1217 !important;
  fill: #0e1217 !important;
}

[data-theme="pixel-dark"] .pill.highlight {
  background: rgba(126, 153, 176, 0.12) !important;
  color: #7e99b0 !important;
  border-color: #7e99b0 !important;
}

[data-theme="pixel-dark"] .timeline-controls .filter-btn {
  background: #1c232d !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
}

[data-theme="pixel-dark"] .timeline-controls .filter-btn:hover,
[data-theme="pixel-dark"] .timeline-controls .filter-btn.active {
  background: #7e99b0 !important;
  border-color: #7e99b0 !important;
  color: #0e1217 !important;
}

/* CRT Screen Flash / Glitch Transition */
@keyframes crtGlitchFlash {
  0% {
    filter: brightness(2.2) contrast(1.4);
    opacity: 0.7;
  }
  50% {
    filter: brightness(0.6) contrast(1.8);
    opacity: 0.9;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}

.theme-glitch-flash {
  animation: crtGlitchFlash 0.25s steps(3, start);
}

/* Retro Pixel Crossfade Overlay Canvas */
#themePixelCrossfade,
.theme-pixel-crossfade-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  image-rendering: pixelated;
}

} /* End @media screen */