@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@300;400;600&display=swap');

        body {
            background: #0f1117;
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            margin: 0;
            height: 100vh;
        }

        .neon-glow {
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(168, 85, 247, 0.4);
        }

        .key {
            transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            user-select: none;
        }

        .white-key {
            background: linear-gradient(to bottom, #f8fafc 0%, #cbd5e1 100%);
            height: 250px;
            width: 50px;
            border-radius: 0 0 6px 6px;
            z-index: 1;
            border: 1px solid #94a3b8;
        }

        .black-key {
            background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%);
            height: 150px;
            width: 34px;
            margin-left: -17px;
            margin-right: -17px;
            z-index: 2;
            border-radius: 0 0 4px 4px;
            border: 1px solid #334155;
        }

        .white-key.active {
            background: #a855f7 !important;
            transform: translateY(4px);
            box-shadow: 0 0 30px rgba(168, 85, 247, 0.6);
        }

        .black-key.active {
            background: #d8b4fe !important;
            transform: translateY(4px);
            box-shadow: 0 0 30px rgba(216, 180, 254, 0.6);
        }

        .particle {
            position: absolute;
            pointer-events: none;
            border-radius: 50%;
            animation: float 1s ease-out forwards;
        }

        @keyframes float {
            0% { transform: translateY(0) scale(1); opacity: 0.8; }
            100% { transform: translateY(-100px) scale(0); opacity: 0; }
        }

        .scanline {
            width: 100%;
            height: 100px;
            z-index: 10;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(0, 0, 0, 0) 100%);
            opacity: 0.1;
            position: absolute;
            bottom: 100%;
            animation: scan 4s linear infinite;
            pointer-events: none;
        }

        @keyframes scan {
            to { bottom: -100px; }
        }

        .track-slot {
            border: 1px solid rgba(168, 85, 247, 0.2);
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        .track-slot.recording {
            border-color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
        }
        .track-slot.playing {
            border-color: #22c55e;
        }

        .rec-indicator {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            50% { opacity: 0; }
        }