body {
    position: relative;
    background-color: #050b12;
    background-image:
        radial-gradient(42% 55% at 20% 40%, rgba(0, 239, 188, 0.22) 0%, rgba(3, 10, 18, 0) 86%),
        linear-gradient(180deg, #050b12 0%, #0b121b 55%, #0d151f 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    color: var(--color-text);
}

body::before,
body::after,
.particle-layer {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background:
        radial-gradient(35% 45% at 18% 28%, rgba(47, 129, 247, 0.55), transparent 65%),
        radial-gradient(45% 55% at 65% 75%, rgba(52, 211, 153, 0.35), transparent 70%);
    filter: blur(120px);
    opacity: 0.5;
    transform-origin: center;
    animation: glowDrift 18s ease-in-out infinite alternate;
}

body::after {
    background-image:
        linear-gradient(90deg, rgba(28, 44, 59, 0.55) 1px, transparent 1px),
        linear-gradient(rgba(28, 44, 59, 0.55) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px;
    mix-blend-mode: screen;
    opacity: 0.35;
    animation: gridScroll 22s linear infinite alternate;
}

/* .particle-layer {
    display: grid;
    place-items: center;
    animation: floatLayer 14s linear infinite;
}

.particle-layer::before,
.particle-layer::after {
    content: "";
    position: absolute;
    bottom: -20vh;
    width: 120%;
    height: 120%;
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.4;
    mix-blend-mode: screen;
}

.particle-layer::before {
    background-image: radial-gradient(rgba(56, 182, 255, 0.45) 2px, transparent 0);
    animation: particlesUp 26s linear infinite;
}

.particle-layer::after {
    background-image: radial-gradient(rgba(67, 217, 173, 0.5) 3px, transparent 0);
    animation: particlesUp 34s linear infinite reverse;
} */

@keyframes glowDrift {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(0.96);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(2%, 2%, 0) scale(1.05);
        opacity: 0.6;
    }
    100% {
        transform: translate3d(5%, -4%, 0) scale(1.08);
        opacity: 0.35;
    }
}

@keyframes gridScroll {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: -120px -120px, 120px 120px;
    }
}

@keyframes floatLayer {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-6%);
    }
}

@keyframes particlesUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    15% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-30vh) scale(1.15);
        opacity: 0;
    }
}

.page {
    position: relative;
}

.page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background-image:
        radial-gradient(70% 90% at 25% 35%, rgba(9, 171, 125, 0.25), transparent 70%),
        radial-gradient(55% 80% at 75% 65%, rgba(47, 129, 247, 0.12), transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85), transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85), transparent 70%);
    animation: ribbonSweep 32s ease-in-out infinite alternate;
}

@keyframes ribbonSweep {
    0% {
        transform: translateX(-5%) rotate(-2deg);
        opacity: 0.35;
    }
    100% {
        transform: translateX(5%) rotate(3deg);
        opacity: 0.55;
    }
}
 
 .surface {
     background: var(--color-bg-muted);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
 }
 
 .language-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     display: inline-block;
     margin-right: 0.5rem;
 }
 
 .stat-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     padding: 0.45rem 0.75rem;
     border-radius: 999px;
     border: 1px solid var(--color-border);
     color: var(--color-text-muted);
 }
 
 .stat-pill svg {
     width: 16px;
     height: 16px;
 }
 
.heatmap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 14px;
    grid-template-rows: repeat(7, 14px);
    gap: 3px;
    padding: 1.25rem;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    justify-content: flex-start;
}
 
 .heatmap__cell {
     width: 14px;
     height: 14px;
     border-radius: 2px;
     background: rgba(48, 54, 61, 0.7);
     transition: transform 0.2s ease, background 0.2s ease;
 }
 
 .heatmap__cell[data-level="1"] {
     background: rgba(47, 129, 247, 0.25);
 }
 
 .heatmap__cell[data-level="2"] {
     background: rgba(47, 129, 247, 0.45);
 }
 
 .heatmap__cell[data-level="3"] {
     background: rgba(47, 129, 247, 0.7);
 }
 
 .heatmap__cell[data-level="4"] {
     background: rgba(47, 129, 247, 0.95);
 }
 
 .heatmap__cell:hover {
     transform: scale(1.2);
     border: 1px solid rgba(240, 246, 252, 0.8);
 }
 
.heatmap-card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, rgba(18, 29, 41, 0.95) 0%, rgba(10, 18, 27, 0.92) 55%, rgba(16, 36, 48, 0.85) 100%);
    border: 1px solid rgba(88, 166, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.08);
}

.heatmap-card::after {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(circle at 20% 20%, rgba(47, 129, 247, 0.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(67, 217, 173, 0.2), transparent 70%);
    opacity: 0.35;
    animation: heatmapGlow 24s ease-in-out infinite alternate;
    pointer-events: none;
}

.heatmap-card__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.heatmap-card__title {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 0.45rem;
}

.heatmap-card__subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.heatmap-card__legend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(12, 22, 33, 0.7);
    border: 1px solid rgba(88, 166, 255, 0.18);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
}

.heatmap-card__legend-scale {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.heatmap-card__legend-scale .heatmap__cell {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.heatmap-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.heatmap__months {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.heatmap__months span {
    flex: 1 1 60px;
    min-width: 55px;
}

.heatmap-card__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: start;
}

.heatmap__weekdays {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.heatmap__weekdays span[data-day="mon"] {
    grid-row: 2;
}

.heatmap__weekdays span[data-day="wed"] {
    grid-row: 4;
}

.heatmap__weekdays span[data-day="fri"] {
    grid-row: 6;
}

@keyframes heatmapGlow {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1);
        opacity: 0.25;
    }
    50% {
        transform: translate3d(2%, 3%, 0) scale(1.05);
        opacity: 0.45;
    }
    100% {
        transform: translate3d(4%, -3%, 0) scale(1.08);
        opacity: 0.3;
    }
}

 .timeline {
     border-left: 2px solid var(--color-border);
     padding-left: 2rem;
     margin-left: 1rem;
     display: grid;
     gap: 1.5rem;
 }
 
 .timeline__item {
     position: relative;
     padding-left: 1.5rem;
 }
 
 .timeline__item::before {
     content: "";
     position: absolute;
     left: -2.55rem;
     top: 0.45rem;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--color-accent);
     border: 2px solid var(--color-bg);
 }
 
 .timeline__item h3 {
     margin-bottom: 0.35rem;
 }
 
 .timeline__meta {
     color: var(--color-text-muted);
     font-size: 0.85rem;
     margin-bottom: 0.75rem;
 }
 
 .repo-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.5rem;
 }
 
 .repo-card {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
 .repo-card__header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
 }
 
 .repo-card__name {
     font-size: 1.1rem;
     font-weight: 600;
 }
 
 .repo-card__meta {
     display: flex;
     flex-wrap: wrap;
     gap: 0.85rem;
     font-size: 0.85rem;
     color: var(--color-text-muted);
 }