body { background: #0f1117; color: #e2e8f0; font-family: 'Inter', sans-serif; overflow: hidden; }
    .neon-border { border: 1px solid rgba(0, 255, 255, 0.3); box-shadow: 0 0 15px rgba(0, 255, 255, 0.1); }
    .key { transition: all 0.1s; cursor: pointer; user-select: none; }
    .key:active, .key.active { transform: translateY(4px); filter: brightness(1.5); box-shadow: 0 0 20px rgba(0, 255, 255, 0.6); }
    .white-key { background: #1e293b; color: #94a3b8; height: 200px; width: 60px; border: 1px solid #334155; border-radius: 0 0 4px 4px; }
    .black-key { background: #0f172a; color: #38bdf8; height: 120px; width: 40px; margin-left: -20px; margin-right: -20px; z-index: 10; border-radius: 0 0 4px 4px; }
    .recording-pulse { animation: pulse 1.5s infinite; }
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
    canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; opacity: 0.4; }
    .ui-overlay { position: relative; z-index: 10; }