Remove wrapper div

src/App.vue

@@ -155,25 +155,26 @@
             </div>
             <div class="player-body">
               <div
-                class="custom-player"
+                class="pulse-orb"
-                :class="{ idle: !currentClipUrl }"
+                :class="{
+                  active: isPlaying,
+                  playing: isPlaying && !isAnswerClip,
+                  answer: isPlaying && isAnswerClip,
+                  idle: !currentClipUrl
+                }"
                 :style="{
                   '--pulse': pulseLevel.toFixed(3),
                   '--ray': rayLevel.toFixed(3),
                   '--ray-hue': rayHue.toFixed(0)
                 }"
-              >
+              ></div>
-                <div
+              <div
-                  class="pulse-orb"
+                class="pulse-rays"
-                  :class="{
+                :style="{
-                    active: isPlaying,
+                  '--ray': rayLevel.toFixed(3),
-                    playing: isPlaying && !isAnswerClip,
+                  '--ray-hue': rayHue.toFixed(0)
-                    answer: isPlaying && isAnswerClip,
+                }"
-                    idle: !currentClipUrl
+              ></div>
-                  }"
-                ></div>
-                <div class="pulse-rays"></div>
-              </div>
               <audio
                 ref="player"
                 v-if="currentClipUrl"

src/styles.css

@@ -365,6 +365,7 @@ button {
   margin-top: 12px;
   display: grid;
   place-items: center;
+  position: relative;
   min-height: 220px;
 }
 
@@ -372,33 +373,6 @@ audio.hidden-audio {
   display: none;
 }
 
-.custom-player {
-  width: min(840px, 100%);
-  min-height: 400px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: radial-gradient(circle at top, rgba(61, 214, 255, 0.2), rgba(8, 12, 26, 0.9) 70%);
-  display: grid;
-  place-items: center;
-  gap: 16px;
-  padding: 20px;
-  position: relative;
-  overflow: hidden;
-}
-
-.custom-player.idle {
-  background: radial-gradient(circle at top, rgba(20, 20, 20, 0.5), rgba(5, 6, 12, 0.95) 70%);
-}
-
-.custom-player::after {
-  content: '';
-  position: absolute;
-  inset: 12px;
-  border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  pointer-events: none;
-}
-
 .pulse-orb {
   width: 96px;
   height: 96px;
@@ -445,7 +419,7 @@ audio.hidden-audio {
 
 .pulse-rays {
   position: absolute;
-  inset: -5%;
+  inset: -120px;
   border-radius: 50%;
   background:
     radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.35) 0%, transparent 40%),
@@ -459,6 +433,7 @@ audio.hidden-audio {
   transition: opacity 0.12s ease-out, transform 0.12s ease-out, filter 0.12s ease-out;
   mix-blend-mode: screen;
   z-index: 1;
+  pointer-events: none;
 }
 
 .pulse-rays::before,