minor style changes

app/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen" @keydown.esc="resetFocus">
+  <div class="min-h-screen dark:bg-neutral-900" @keydown.esc="resetFocus">
     <NuxtRouteAnnouncer />
     <NuxtLayout>
       <NuxtPage ref="pageContent" />
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 
-const pageContent = ref < HTMLElement | null > (null)
+const pageContent = ref<HTMLElement | null>(null)
 
 const resetFocus = (event: KeyboardEvent) => {
   if (event.key === 'Escape') {

app/components/Card.vue

@@ -183,7 +183,7 @@ const isTrackLoaded = ref(false)
   }
 
   .play-button {
-    @apply absolute bottom-1/2 top-28 opacity-0 hover:opacity-100;
+    @apply absolute opacity-0 hover:opacity-100;
   }
 
   &.show-play-button {

app/components/Platine.vue

@@ -8,7 +8,7 @@
       <button @click="Rewind">
         rewind
       </button>
-      <div>{{ progressPercentage }}</div>
+      <!-- <div>{{ progressPercentage }}</div> -->
       <div>{{ currentSpeed }}</div>
     </div>
     <div class="disc" ref="discRef" id="disc">
@@ -183,7 +183,10 @@ const Reverse = () => {
 }
 
 const Rewind = async () => {
-  // ...
+  if (!disc.value || !sampler.value) return
+  Reverse()
+  play()
+
 }
 
 const handleKeyDown = (e: KeyboardEvent) => {

app/pages/index.vue

@@ -77,7 +77,8 @@ $open-speed: 0.4s;
           border-radius: 999px;
         }
 
-        .rank {
+        .rank,
+        .play-button {
           opacity: 0;
         }
       }