@font-face {
            font-family: 'Planet Kosmos';
            src: url('../font/PlanetKosmos.woff2') format('woff2'),
                url('../font/PlanetKosmos.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #000;
            overflow: hidden;
            cursor: default;
        }
        
        #visualizer {
            position: relative;
            width: 400px;
            height: 400px;
            cursor: pointer;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        #starfield {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        #wave-circle {
            position: relative;
            width: 100%;
            height: 100%;
            transform: rotate(270deg);
            z-index: 1;
        }

        #flash-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            opacity: 0;
            pointer-events: none;
            z-index: 3;
            mix-blend-mode: overlay;
        }

        #content-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* Play button styles */
        #play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 4;
            transition: all 0.3s ease;
        }

        #play-icon::before {
            content: '';
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 35px solid rgba(255, 255, 255, 0.8);
            margin-left: 7px;
            transition: all 0.3s ease;
        }

        #play-icon.playing {
            opacity: 0;
            transform: translate(-50%, -50%) scale(2);
            pointer-events: none;
        }

        #volume-control {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translate(-50%, 50%) rotate(-5deg);
            width: 250px;
            height: 40px;
            align-items: center;
            justify-content: center;
            z-index: 4;
            transform-origin: center;
        }

        #volume-title {
            font-family: 'Planet Kosmos';
            font-size: 1.5em;
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 3px;
            transition: text-shadow 0.1s ease;
            margin: 0;
            padding: 0;
            white-space: nowrap;
              -webkit-animation: noise 2s linear infinite;
          animation: noise 2s linear infinite;
        }

        #volume-title:after {
            content: 'e';
            font-family: 'Planet Kosmos';
            font-size: 1.7em;
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 3px;
            transition: text-shadow 0.1s ease;
            margin: 0;
            padding: 0;
            white-space: nowrap;
            margin-top: 50px;
            -webkit-animation: noise-1 .2s linear infinite;
           animation: noise-1 .2s linear infinite;
        }

        #volume-title:before {
            content: '';
            webkit-animation: noise-2 .2s linear infinite;
            animation: noise-2 .2s linear infinite;
        }

        #volume-slider-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -45px;
        }

        #volume-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 4px;
            border-radius: 2px;
            background: linear-gradient(90deg, #fff 0%, #fff 100%);
            outline: none;
            opacity: 0.7;
            transition: opacity 0.2s;
            transform-origin: center;
        }

        #volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        #volume-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
        }

        #volume-slider::-moz-range-thumb {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        #title-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            text-align: center;
            pointer-events: none;
        }

        #title {
            font-family: 'Planet Kosmos';
            font-size: 2.5em;
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 3px;
            transition: text-shadow 0.1s ease;
            margin: 0;
            padding: 0;
            white-space: nowrap;
        }

        .outer-scratch, .inner-scratch {
            height: inherit;
            z-index: 999;
            pointer-events: none;
            mix-blend-mode: hard-light;
        }

        .outer-scratch:after, .inner-scratch:after {
          content: "";
          width: 200%;
          height: 200%;
          position: absolute;
          z-index: 999;
          mix-blend-mode: hard-light;
        }

        .inner-scratch:after {
          left: 30%;
          -webkit-animation: inner-scratch 2s infinite;
          animation: inner-scratch 2s infinite;
        }

        .grain:after {
          content: "";
          width: 110%;
          height: 110%;
          position: absolute;
          top: -5%;
          left: -5%;
          opacity: 0.21;
          background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/662025/grain.jpg") repeat center center;
          -webkit-animation: grain 0.5s steps(1) infinite;
          animation: grain 0.5s steps(1) infinite;
          pointer-events: none;
        }

        .loading #play-icon {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }

        .shake {
            animation: shake 0.1s ease-in-out;
        }

        .volume-shake {
            animation: volumeShake 0.1s ease-in-out;
        }

        .title-shake {
            animation: titleShake 0.1s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-1px, 1px) rotate(-0.5deg); }
            50% { transform: translate(1px, 1px) rotate(0.5deg); }
            75% { transform: translate(-1px, -1px) rotate(-0.5deg); }
        }

        @keyframes volumeShake {
            0%, 100% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
            25% { transform: translateX(-52%) rotate(-7deg) translateY(-2px); }
            50% { transform: translateX(-48%) rotate(-3deg) translateY(2px); }
            75% { transform: translateX(-51%) rotate(-6deg) translateY(-1px); }
        }

        @keyframes titleShake {
            0%, 100% { transform: translateX(-50%) translateY(-50%) rotate(-3deg); }
            25% { transform: translateX(-50%) translateY(-50%) rotate(-6deg);}
            50% { transform: translateX(-50%) translateY(-50%) rotate(-4deg);}
            75% { transform: translateX(-50%) translateY(-50%) rotate(-5deg);; }
        }

        @keyframes noise-1 {
          0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
          10% {opacity: .1;}
          50% {opacity: .5; left: -6px;}
          80% {opacity: .3;}
          100% {opacity: .6; left: 2px;}
        }

        @keyframes noise-2 {
          0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
          10% {opacity: .1;}
          50% {opacity: .5; left: 6px;}
          80% {opacity: .3;}
          100% {opacity: .6; left: -2px;}
        }

        @keyframes noise {
          0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; transform: scaleY(1);}  
          4.3% {opacity: 1; transform: scaleY(1.7);}
          43% {opacity: 1; transform: scaleX(1.5);}
        }

        @keyframes noise-3 {
          0%,3%,5%,42%,44%,100% {opacity: 1; transform: scaleY(1);}
          4.3% {opacity: 1; transform: scaleY(4);}
          43% {opacity: 1; transform: scaleX(10) rotate(60deg);}
        }

        @keyframes grain {
          0%, 100% {transform: translate(0, 0, 0);}
          10% {transform: translate(-1%, -1%);}
          20% {transform: translate(1%, 1%);}
          30% {transform: translate(-2%, -2%);}
          40% {transform: translate(3%, 3%);}
          50% {transform: translate(-3%, -3%);}
          60% {transform: translate(4%, 4%);}
          70% {transform: translate(-4%, -4%);}
          80% {transform: translate(2%, 2%);}
          90% {transform: translate(-3%, -3%);}
        }
        /* Simple Title Animation */
        @keyframes draw {
          0% {width: 0%;}
          100% {width: 110%;}}

        @keyframes draw-bottom {
          0% {width: 0%;}
          100% {width: 100%;}}

        @keyframes fade {
          0% {opacity: 0;}
          100% {opacity: 1;}}