:root {
        --bg: #0b0f12;
        --panel: #0f1720;
        --accent: #00ff8c;
        --muted: #97a0aa;
        --glow-color: rgba(0, 255, 140, 0.15);
      }
      html,
      body {
        height: 100%;
        background: linear-gradient(180deg, #041018 0%, #07121a 60%), var(--bg);
        color: #e6eef6;
        font-family: "JetBrains Mono", ui-monospace, "Cascadia Code",
          "Fira Code", Monaco, Consolas, monospace;
      }
      @keyframes matrix-rain {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 0% 100%;
        }
      }
      body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUREREN0NTBDRjlEMTFFNjg1NTBBMzQ5M0Y3RTc4ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUREREN0NTFDRjlEMTFFNjg1NTBBMzQ5M0Y3RTc4ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5REREQ0Q0RUNGOUQxMUU2ODU1MEEzNDkzRjdFNzg4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5REREQ0Q0RkNGOUQxMUU2ODU1MEEzNDkzRjdFNzg4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv8z4b4AAAAjSURBVHjaYvz//z8DEIAACCAGEEAAYQABhAEEEAYQQBgAAgwAKAgQIBwJqZcAAAAASUVORK5CYII=")
          repeat;
        opacity: 0.03;
        animation: matrix-rain 20s linear infinite;
        pointer-events: none;
      }
      .terminal-frame {
        background: linear-gradient(180deg, #07121a, #07131b);
        border-radius: 12px;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 8px 30px rgba(2, 6, 23, 0.7);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }
      .terminal-frame:hover {
        transform: translateY(-2px);
        border-color: var(--accent);
        box-shadow: 0 12px 40px var(--glow-color);
      }
      .terminal-frame::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 150%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.05),
          transparent
        );
        transition: 0.5s;
      }
      .terminal-frame:hover::after {
        left: 100%;
      }
      .term-top {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
        position: relative;
      }
      .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: relative;
        transition: all 0.3s ease;
      }
      .dot.red {
        background: #ff5f56;
      }
      .dot.yellow {
        background: #ffbd2e;
      }
      .dot.green {
        background: #27c93f;
      }
      .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono",
          monospace;
      }
      .kbd {
        background: #0b1220;
        border: 1px solid rgba(255, 255, 255, 0.03);
        padding: 0.12rem 0.35rem;
        border-radius: 0.35rem;
        font-size: 0.82rem;
      }
      .badge-soft {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.02);
        padding: 0.2rem 0.5rem;
        border-radius: 0.5rem;
        color: var(--muted);
        font-size: 0.78rem;
      }
      .project-screenshot {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.05),
          rgba(0, 0, 0, 0.3)
        );
        border-radius: 8px;
        padding: 8px;
        border: 1px solid rgba(0, 255, 140, 0.1);
        margin-bottom: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        position: relative;
        overflow: hidden;
        transform-style: preserve-3d;
        perspective: 1000px;
      }

      .project-screenshot::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          45deg,
          rgba(0, 255, 140, 0) 0%,
          rgba(0, 255, 140, 0.1) 50%,
          rgba(0, 255, 140, 0) 100%
        );
        transform: translateX(-100%);
        animation: glitch-scan 3s ease infinite;
      }

      .project-content {
        position: relative;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .card-body:hover .project-content {
        transform: translateZ(20px);
      }

      .project-content h5 {
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 1;
      }

      .project-content .text-muted {
        color: #b4c3d2 !important;
        position: relative;
        z-index: 1;
      }

      .project-content p {
        color: #e6eef6;
        line-height: 1.6;
        position: relative;
        z-index: 1;
      }

      .framework-logos {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 15px;
        z-index: 2;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.3s ease;
      }

      .card-body:hover .framework-logos {
        opacity: 1;
        transform: translateY(0);
      }

      .framework-logo {
        width: 30px;
        height: 30px;
        filter: drop-shadow(0 0 8px rgba(0, 255, 140, 0.5));
        animation: float 3s ease-in-out infinite;
      }

      .framework-logo:nth-child(2) {
        animation-delay: -1.5s;
      }

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

      @keyframes glitch-scan {
        0% {
          transform: translateX(-100%) skewX(-15deg);
        }
        50% {
          transform: translateX(100%) skewX(-15deg);
        }
        100% {
          transform: translateX(100%) skewX(-15deg);
        }
      }

      .terminal-frame:hover .project-screenshot img {
        transform: scale(1.05) rotate3d(1, 1, 0, 5deg);
        filter: brightness(1.2) contrast(1.1);
      }

      .project-screenshot img {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
      }

      .terminal-frame::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(
          45deg,
          var(--accent),
          transparent 60%,
          var(--accent)
        );
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .terminal-frame:hover::before {
        opacity: 0.5;
        animation: borderGlow 2s linear infinite;
      }

      @keyframes borderGlow {
        0%,
        100% {
          filter: hue-rotate(0deg);
        }
        50% {
          filter: hue-rotate(90deg);
        }
      }
      pre.snip {
        background: #07121a;
        border-left: 4px solid var(--accent);
        padding: 12px;
        border-radius: 6px;
        color: #d7fbe8;
        overflow: auto;
      }
      .glow {
        box-shadow: 0 6px 30px var(--glow-color);
      }
      .pulse {
        animation: pulse 2.4s infinite;
      }
      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 var(--glow-color);
        }
        70% {
          box-shadow: 0 0 0 12px rgba(0, 255, 140, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(0, 255, 140, 0);
        }
      }

      .project-screenshot {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }
      
      .project-screenshot:hover .hover-image {
        opacity: 1 !important;
      }

      .hover-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s ease;
        object-fit: cover;
      }
      .project-screenshot::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          45deg,
          transparent,
          rgba(0, 255, 140, 0.1),
          transparent
        );
        transform: rotate(45deg);
        animation: glitch 3s linear infinite;
      }
      @keyframes glitch {
        0% {
          transform: translateX(-100%) rotate(45deg);
        }
        100% {
          transform: translateX(100%) rotate(45deg);
        }
      }

      .snip {
        position: relative;
        background: #030507 !important;
        border-left: 4px solid var(--accent);
        font-family: "JetBrains Mono", monospace;
        transition: all 0.3s ease;
      }
      .snip:hover {
        background: #040709 !important;
        border-left-width: 6px;
      }

      /* Matrix-like animation for dots */
      .dot::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 50%;
        border: 2px solid transparent;
        animation: dotPulse 2s linear infinite;
      }
      @keyframes dotPulse {
        0% {
          transform: scale(1);
          border-color: transparent;
        }
        50% {
          transform: scale(1.2);
          border-color: currentColor;
        }
        100% {
          transform: scale(1);
          border-color: transparent;
        }
      }
      /* Framework-specific card styles */
      .express-card {
        --card-accent: #259dff;
        border-color: var(--card-accent) !important;
        background: linear-gradient(180deg, rgba(37, 157, 255, 0.1), rgba(7, 19, 27, 0.95)) !important;
      }
      
      .express-card::before {
        background: linear-gradient(45deg, var(--card-accent), transparent 60%, var(--card-accent)) !important;
      }
      
      .express-card .tech-badge {
        position: absolute;
        top: -12px;
        left: 20px;
        background: var(--card-accent);
        color: #fff;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 600;
        box-shadow: 0 2px 10px rgba(37, 157, 255, 0.3);
        z-index: 10;
      }

      .express-card .tag {
        border-color: rgba(37, 157, 255, 0.3);
      }

      .express-card .framework-logo {
        filter: drop-shadow(0 0 8px rgba(37, 157, 255, 0.5));
      }

      .nestjs-card {
        --card-accent: #e0234e;
        border-color: var(--card-accent) !important;
        background: linear-gradient(180deg, rgba(224, 35, 78, 0.1), rgba(7, 19, 27, 0.95)) !important;
      }

      .nestjs-card::before {
        background: linear-gradient(45deg, var(--card-accent), transparent 60%, var(--card-accent)) !important;
      }

      .django-card {
        --card-accent: #092e20;
        border-color: var(--card-accent) !important;
        background: linear-gradient(180deg, rgba(9, 46, 32, 0.1), rgba(7, 19, 27, 0.95)) !important;
      }

      .django-card::before {
        background: linear-gradient(45deg, var(--card-accent), transparent 60%, var(--card-accent)) !important;
      }

      .tag {
        font-size: 0.75rem;
        padding: 0.18rem 0.45rem;
        border-radius: 0.45rem;
        background: #051217;
        border: 1px solid rgba(255, 255, 255, 0.02);
        color: var(--muted);
        transition: all 0.3s ease;
      }

      .tag:hover {
        transform: translateY(-1px);
        border-color: var(--card-accent, rgba(255, 255, 255, 0.1));
      }

      a.card-link {
        color: inherit;
        text-decoration: none;
      }