diff --git a/src/App/styles.less b/src/App/styles.less
index df48aa83a..139f2e946 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -18,6 +18,12 @@
 @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))";
 @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))";
 
+@selectable-inputs-assumed-height: 5.25rem;
+@top-overlay-size: @selectable-inputs-assumed-height;
+@bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem));
+@overlap-size: 3rem;
+@transparency-grandient-pad: 6rem;
+
 :root {
     --landscape-shape-ratio: 0.5625;
     --poster-shape-ratio: 1.464;
@@ -46,6 +52,11 @@
     --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
     --calculated-bottom-safe-inset: @calculated-bottom-safe-inset;
+    --selectable-inputs-assumed-height: 5.25rem;
+    --top-overlay-size: @selectable-inputs-assumed-height;
+    --bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem));
+    --overlap-size: 3rem;
+    --transparency-grandient-pad: 6rem;
 }
 
 * {