fixed overlap

styles/main.css

@@ -10,26 +10,29 @@ body {
     min-height: 100vh;
     color: #e2e8f0;
     line-height: 1.6;
-    padding: 48px 24px;
+    padding: 12px 24px;
 }
 
 .container {
     max-width: 1600px;
     margin: 0 auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     transition: max-width 0.3s ease, padding 0.3s ease;
 }
 
 /* Header */
 .header-row {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
-    gap: 20px;
-    margin-bottom: 10px;
+    gap: 12px;
+    margin-bottom: 4px;
 }
 
 h1 {
-    font-size: 2.5em;
+    font-size: 1.6em;
     font-weight: 700;
     color: #fff;
     margin-bottom: 0;
@@ -45,8 +48,8 @@ h1:hover {
 
 .subtitle {
     color: #94a3b8;
-    font-size: 1em;
-    margin-bottom: 32px;
+    font-size: 0.88em;
+    margin-bottom: 6px;
     transition: color 0.3s ease;
     animation: fadeInUp 0.6s ease-out 0.1s both;
 }
@@ -100,8 +103,8 @@ h1:hover {
     align-items: center;
     justify-content: center;
     gap: 10px;
-    margin: 0 auto 18px;
-    padding: 10px 18px;
+    margin: 0 auto 8px;
+    padding: 6px 14px;
     max-width: 700px;
     background: rgba(234, 179, 8, 0.1);
     border: 1px solid rgba(234, 179, 8, 0.45);
@@ -163,6 +166,9 @@ h1:hover {
     display: grid;
     grid-template-columns: 460px 1fr;
     gap: 28px;
+    flex: 1;
+    min-height: 0;
+    align-items: stretch;
     transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s ease;
 }
 
@@ -191,6 +197,8 @@ h1:hover {
     border: 1px solid rgba(100, 149, 237, 0.1);
     border-radius: 14px;
     padding: 20px 20px 24px;
+    overflow-y: auto;
+    min-height: 0;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -400,6 +408,9 @@ h1:hover {
 
 .preview-container {
     padding: 28px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 
 .section:hover {
@@ -763,12 +774,15 @@ input[type="checkbox"]:focus {
 .previews-row {
     display: flex;
     gap: 12px;
-    align-items: flex-start;
+    flex: 1;
+    min-height: 0;
+    align-items: stretch;
 }
 
 .preview-face-wrap {
     flex: 1;
     min-width: 0;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -791,13 +805,14 @@ input[type="checkbox"]:focus {
 #preview,
 #preview-bottom {
     width: 100%;
-    height: 720px;
+    height: min(calc(100vh - 280px), 580px);
+    min-height: 380px;
     border: 1px solid rgba(100, 149, 237, 0.2);
     border-radius: 10px;
     background: #1e293b;
     display: block;
     cursor: grab;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #preview:hover,