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

frontend/node_modules/vuetify/lib/components/VWindow/VWindow.sass

@@ -0,0 +1,141 @@
+@use 'sass:selector'
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-window
+    overflow: hidden
+
+    &__container
+      display: flex
+      flex-direction: column
+      height: inherit
+      position: relative
+      transition: $window-transition
+
+    &__controls
+      position: absolute
+      left: 0
+      top: 0
+      width: 100%
+      height: 100%
+      display: flex
+      align-items: center
+      justify-content: space-between
+      padding: $window-controls-padding
+      pointer-events: none
+
+      > *
+        pointer-events: auto
+
+    &--show-arrows-on-hover
+      overflow: hidden
+
+      .v-window__left
+        transform: translateX(-200%)
+
+      @at-root #{selector.append(':has(.v-window__controls--right)', &)}
+        .v-window__left
+          transform: translateX(200%)
+
+      .v-window__right
+        transform: translateX(200%)
+
+      @at-root #{selector.append(':has(.v-window__controls--left)', &)}
+        .v-window__right
+          transform: translateX(-200%)
+
+      &:hover
+        .v-window__left,
+        .v-window__right
+          transform: translateX(0)
+
+    &--vertical-arrows
+      .v-window__controls
+        flex-direction: column
+        justify-content: center
+        gap: $window-controls-vertical-gap
+
+        &--left
+          align-items: start
+
+        &--right
+          align-items: end
+
+        .v-window__left,
+        .v-window__right
+          .v-icon
+            transform: rotate(90deg)
+
+    &--crossfade > .v-window__container
+      isolation: isolate
+
+      > .v-window-item
+        mix-blend-mode: $window-crossfade-blend-mode
+
+@include tools.layer('overrides')
+  .v-window-item
+    transition-duration: var(--v-window-transition-duration, revert-layer)
+
+@include tools.layer('transitions')
+  .v-window
+    &-x-transition,
+    &-x-reverse-transition,
+    &-y-transition,
+    &-y-reverse-transition
+      &-enter-active,
+      &-leave-active
+        transition: $window-transition
+
+        @media (prefers-reduced-motion: reduce)
+          transition-duration: 0s
+
+      &-leave-from,
+      &-leave-to
+        position: absolute
+        top: 0
+        width: 100%
+
+    &-x-transition
+      &-enter-from
+        transform: translateX(100%)
+
+      &-leave-to
+        transform: translateX(-100%)
+
+    &-x-reverse-transition
+      &-enter-from
+        transform: translateX(-100%)
+
+      &-leave-to
+        transform: translateX(100%)
+
+    &-y-transition
+      &-enter-from
+        transform: translateY(100%)
+
+      &-leave-to
+        transform: translateY(-100%)
+
+    &-y-reverse-transition
+      &-enter-from
+        transform: translateY(-100%)
+
+      &-leave-to
+        transform: translateY(100%)
+
+  .v-window
+    &-crossfade-transition
+      &-enter-active,
+      &-leave-active
+        transition: $window-transition
+
+      &-leave-from,
+      &-leave-to
+        position: absolute
+        top: 0
+        width: 100%
+
+      &-enter-from,
+      &-leave-to
+        opacity: 0