routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/components/VSlider/VSliderThumb.css

@@ -0,0 +1,142 @@
+@layer vuetify-components {
+  .v-slider-thumb {
+    touch-action: none;
+    color: rgb(var(--v-theme-surface-variant));
+  }
+  .v-input--error:not(.v-input--disabled) .v-slider-thumb {
+    color: inherit;
+  }
+  .v-slider-thumb__label {
+    background: color-mix(in srgb, rgb(var(--v-theme-surface-variant)) 70%, transparent);
+    color: rgb(var(--v-theme-on-surface-variant));
+  }
+  .v-slider-thumb__label > .v-slider-thumb__label-wedge {
+    background: inherit;
+  }
+  .v-slider-thumb {
+    outline: none;
+    position: absolute;
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  }
+  .v-slider-thumb__surface {
+    cursor: pointer;
+    width: var(--v-slider-thumb-size);
+    height: var(--v-slider-thumb-size);
+    border-radius: 50%;
+    user-select: none;
+    background-color: currentColor;
+  }
+  @media (forced-colors: active) {
+    .v-slider-thumb__surface {
+      background-color: highlight;
+    }
+  }
+  .v-slider-thumb__surface::before {
+    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    content: "";
+    color: inherit;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: currentColor;
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+  }
+  .v-slider-thumb__surface::after {
+    content: "";
+    width: 42px;
+    height: 42px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .v-slider-thumb__label-container {
+    position: absolute;
+    transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
+  }
+  .v-slider-thumb__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6875rem;
+    min-width: 35px;
+    height: 25px;
+    border-radius: 4px;
+    padding: 6px;
+    position: absolute;
+    user-select: none;
+    transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
+  }
+  .v-slider-thumb__label > .v-slider-thumb__label-wedge {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+  }
+  .v-slider-thumb__ripple {
+    position: absolute;
+    left: calc(var(--v-slider-thumb-size) / -2);
+    top: calc(var(--v-slider-thumb-size) / -2);
+    width: calc(var(--v-slider-thumb-size) * 2);
+    height: calc(var(--v-slider-thumb-size) * 2);
+    background: inherit;
+  }
+  .v-slider.v-input--horizontal .v-slider-thumb {
+    top: 50%;
+    transform: translateY(-50%);
+    inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2);
+  }
+  .v-slider.v-input--horizontal .v-slider-thumb__label-container {
+    left: calc(var(--v-slider-thumb-size) / 2);
+    top: 0;
+  }
+  .v-slider.v-input--horizontal .v-slider-thumb__label {
+    bottom: calc(var(--v-slider-thumb-size) / 2);
+  }
+  .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-thumb__label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-thumb__label {
+    transform: translateX(-50%);
+  }
+  .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-thumb__label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-thumb__label {
+    transform: translateX(50%);
+  }
+  .v-slider.v-input--horizontal .v-slider-thumb__label > .v-slider-thumb__label-wedge {
+    clip-path: polygon(50% 100%, 0 50%, 100% 50%);
+    bottom: calc(-6px + 0.2px);
+  }
+  .v-slider.v-input--vertical .v-slider-thumb {
+    top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2);
+  }
+  .v-slider.v-input--vertical .v-slider-thumb__label-container {
+    top: calc(var(--v-slider-thumb-size) / 2);
+    right: 0;
+  }
+  .v-slider.v-input--vertical .v-slider-thumb__label {
+    top: -12.5px;
+    left: calc(var(--v-slider-thumb-size) / 2);
+  }
+  .v-slider.v-input--vertical .v-slider-thumb__label > .v-slider-thumb__label-wedge {
+    clip-path: polygon(0 50%, 50% 0, 50% 100%);
+    left: calc(-6px + 0.2px);
+  }
+  .v-slider-thumb--focused .v-slider-thumb__surface::before {
+    transform: scale(2);
+    opacity: var(--v-focus-opacity);
+  }
+  .v-slider-thumb--pressed {
+    transition: none;
+  }
+  .v-slider-thumb--pressed .v-slider-thumb__surface::before {
+    opacity: var(--v-pressed-opacity);
+  }
+  @media (hover: hover) {
+    .v-slider-thumb:hover .v-slider-thumb__surface::before {
+      transform: scale(2);
+    }
+    .v-slider-thumb:hover:not(.v-slider-thumb--focused) .v-slider-thumb__surface::before {
+      opacity: var(--v-hover-opacity);
+    }
+  }
+}