:root {
    --bg-color: #0f0f0f;
    --line-color: #333;
    --beam-color-1: #41D1FF;
    /* Cyan */
    --beam-color-2: #40b782;
    /* Vue Green */
    --beam-color-3: #BD34FE;
    /* Purple */
    --beam-color-out: #ffea83;
    /* Yellow/Gold */
}

body {
    background-color: var(--bg-color);
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.canvas-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 2/1;
}

.diagram {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Static Lines */
.line {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Labels */
.label {
    fill: #666;
    font-family: monospace;
    font-size: 14px;
    text-anchor: end;
}

.label:last-child {
    text-anchor: start;
    fill: #fff;
    font-weight: bold;
}

/* Particles */
.particle {
    offset-rotate: auto;
    filter: url(#glow);
}

.particle-1 {
    fill: var(--beam-color-1);
    offset-path: path('M 50 100 C 200 100, 300 200, 400 200');
    animation: move-1 2s infinite ease-in-out;
}

.particle-2 {
    fill: var(--beam-color-2);
    offset-path: path('M 50 200 L 400 200');
    animation: move-2 2s infinite ease-in-out 0.2s;
    /* Slight delay */
}

.particle-3 {
    fill: var(--beam-color-3);
    offset-path: path('M 50 300 C 200 300, 300 200, 400 200');
    animation: move-3 2s infinite ease-in-out 0.4s;
    /* Slight delay */
}

.particle-out {
    fill: var(--beam-color-out);
    offset-path: path('M 400 200 L 750 200');
    animation: move-out 2s infinite linear;
    opacity: 0;
}

/* Keyframes */
@keyframes move-1 {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes move-2 {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes move-3 {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes move-out {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    /* Appear right as inputs arrive */
    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

/* Overlay Text */
.overlay-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    pointer-events: none;
}

.overlay-text h1 {
    margin: 0;
    font-size: 2.5rem;
    background: linear-gradient(to right, var(--beam-color-1), var(--beam-color-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(189, 52, 254, 0.3);
}

.overlay-text p {
    margin: 10px 0 0;
    color: #888;
}