feat: random movie picker on neodb page

assets/css/compiled/main.css

@@ -1480,6 +1480,10 @@ select {
   left:0px
 }
 
+.left-1\/2 {
+  left:50%
+}
+
 .left-full {
   left:100%
 }
@@ -1492,6 +1496,10 @@ select {
   top:0px
 }
 
+.top-1\/2 {
+  top:50%
+}
+
 .top-20 {
   top:5rem
 }
@@ -1516,6 +1524,10 @@ select {
   z-index:30
 }
 
+.z-50 {
+  z-index:50
+}
+
 .z-\[1\] {
   z-index:1
 }
@@ -1946,6 +1958,10 @@ select {
   max-height:0.75rem
 }
 
+.max-h-\[405px\] {
+  max-height:405px
+}
+
 .max-h-\[5rem\] {
   max-height:5rem
 }
@@ -2148,6 +2164,16 @@ select {
   flex-grow:1
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x:-50%;
+  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y:-50%;
+  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
 .-translate-y-8 {
   --tw-translate-y:-2rem;
   transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
@@ -2273,6 +2299,10 @@ select {
   gap:0.5rem
 }
 
+.gap-3 {
+  gap:0.75rem
+}
+
 .gap-4 {
   gap:1rem
 }
@@ -2562,6 +2592,11 @@ select {
   background-color:rgba(var(--color-neutral-700), var(--tw-bg-opacity))
 }
 
+.bg-neutral-800 {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-neutral-800), var(--tw-bg-opacity))
+}
+
 .bg-neutral-900 {
   --tw-bg-opacity:1;
   background-color:rgba(var(--color-neutral-900), var(--tw-bg-opacity))
@@ -2984,6 +3019,11 @@ select {
   color:rgba(var(--color-neutral), var(--tw-text-opacity)) !important
 }
 
+.text-\[\#ff9800\] {
+  --tw-text-opacity:1;
+  color:rgb(255 152 0 / var(--tw-text-opacity))
+}
+
 .text-neutral {
   --tw-text-opacity:1;
   color:rgba(var(--color-neutral), var(--tw-text-opacity))
@@ -3139,6 +3179,12 @@ select {
   box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+.shadow-md {
+  --tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
 .shadow-xl {
   --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -5256,6 +5302,12 @@ pre {
   opacity:0.9
 }
 
+.hover\:shadow-lg:hover {
+  --tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
 .hover\:outline-none:hover {
   outline:2px solid transparent;
   outline-offset:2px
@@ -5266,6 +5318,11 @@ pre {
   transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
 
+.focus\:bg-neutral-700:focus {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-neutral-700), var(--tw-bg-opacity))
+}
+
 .focus\:bg-primary-100:focus {
   --tw-bg-opacity:1;
   background-color:rgba(var(--color-primary-100), var(--tw-bg-opacity))
@@ -5279,6 +5336,12 @@ pre {
   opacity:0.9
 }
 
+.focus\:shadow-none:focus {
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-colored:0 0 #0000;
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
 .focus\:outline-none:focus {
   outline:2px solid transparent;
   outline-offset:2px
@@ -5296,6 +5359,31 @@ pre {
   outline-color:transparent
 }
 
+.active\:bg-neutral-700:active {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-neutral-700), var(--tw-bg-opacity))
+}
+
+.active\:shadow-none:active {
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-colored:0 0 #0000;
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.disabled\:pointer-events-none:disabled {
+  pointer-events:none
+}
+
+.disabled\:opacity-50:disabled {
+  opacity:0.5
+}
+
+.disabled\:shadow-none:disabled {
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-colored:0 0 #0000;
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
 @media (prefers-reduced-motion: reduce) {
   .motion-reduce\:transition-none {
     transition-property:none
@@ -5310,6 +5398,11 @@ pre {
   display:none
 }
 
+.dark\:border-neutral-300:is(.dark *) {
+  --tw-border-opacity:1;
+  border-color:rgba(var(--color-neutral-300), var(--tw-border-opacity))
+}
+
 .dark\:border-neutral-600:is(.dark *) {
   --tw-border-opacity:1;
   border-color:rgba(var(--color-neutral-600), var(--tw-border-opacity))
@@ -5360,6 +5453,11 @@ pre {
   background-color:rgba(var(--color-neutral-100), var(--tw-bg-opacity))
 }
 
+.dark\:bg-neutral-200:is(.dark *) {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-neutral-200), var(--tw-bg-opacity))
+}
+
 .dark\:bg-neutral-400:is(.dark *) {
   --tw-bg-opacity:1;
   background-color:rgba(var(--color-neutral-400), var(--tw-bg-opacity))