diff --git a/style.css b/style.css
index 7a25242..9bc4af8 100644
--- a/style.css
+++ b/style.css
@@ -2862,3 +2862,55 @@ body:not(.theme-dark) .theme-light-hidden {
  .tour-processing #preview, .main-section:has(#process:not([style*="display: none"])) #preview{height:clamp(220px,calc(100svh - 335px),380px)!important;margin-top:16px;}
 }
 @media(max-width:767.98px){.result-download-title{font-size:24px;line-height:1.2;}}
+
+
+/* api#298: общий каркас API/Preland; синхронизировать этот блок в обоих репозиториях. */
+html { scrollbar-gutter: stable; }
+body { isolation: isolate; }
+.wrapper {
+  --site-header-height: 90px;
+  --site-background: url(../images/bg.jpg);
+  min-height: 100svh;
+  background-image: none;
+}
+.theme-dark .wrapper { --site-background: url(../images/dark-bg.jpg); background-image: none; }
+.wrapper::before {
+  content: "";
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  height: 100lvh;
+  background: var(--site-background) center / cover no-repeat;
+  pointer-events: none;
+}
+.wrapper .main-section:not(.main-section-alt),
+.wrapper .main-section.main-section-alt2,
+.wrapper .main-content-wrapper { min-height: calc(100svh - var(--site-header-height)); }
+.wrapper .main-content-wrapper { height: auto; }
+.wrapper .main-content-wrapper > .main-section { min-height: 0; }
+@media (min-width: 768px) {
+  /* 520px — общий desktop-слот Index с фото и полосой примеров при контейнере 1300px.
+     Верхняя граница не зависит от короткого/длинного содержимого текущего шага. */
+  .wrapper .index-mobile-fit,
+  .wrapper .tour-processing {
+    justify-content: flex-start;
+    padding-top: max(24px, calc((100svh - var(--site-header-height) - 520px) / 2)) !important;
+  }
+  :is(.index-mobile-fit, .tour-processing) :is(#dropzone-form, #process) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 456px;
+  }
+  :is(.index-mobile-fit, .tour-processing) :is(#dropzone-form, #process) .dropzone-form-inner {
+    width: 100%;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  :is(.index-mobile-fit, .tour-processing) #preview { height: auto; aspect-ratio: 1696 / 920; }
+}
+@media (max-width: 767.98px) { .wrapper { --site-header-height: 68px; } }
+/* /api#298 */
diff --git a/style.min.css b/style.min.css
index 5884225..89daaa4 100644
--- a/style.min.css
+++ b/style.min.css
@@ -63,3 +63,55 @@
 @media(max-width:767.98px){.result-download-title{font-size:24px;line-height:1.2;}}
 @media (min-width:768px){.image-compare .icv__label{top:10px;width:92px;height:36px;display:flex;align-items:center;justify-content:center;padding:4px 10px;font:400 16px/26px Inter,sans-serif;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(0 0 0 / 25%);border:1px solid rgb(255 255 255 / 80%);box-shadow:none;text-shadow:none;}}
 .upload-loading-dots{display:inline-grid;text-align:left;}.upload-loading-dots::before{content:'.....';visibility:hidden;grid-area:1 / 1;}.upload-loading-dots > span{grid-area:1 / 1;}
+
+
+/* api#298: общий каркас API/Preland; синхронизировать этот блок в обоих репозиториях. */
+html { scrollbar-gutter: stable; }
+body { isolation: isolate; }
+.wrapper {
+  --site-header-height: 90px;
+  --site-background: url(../images/bg.jpg);
+  min-height: 100svh;
+  background-image: none;
+}
+.theme-dark .wrapper { --site-background: url(../images/dark-bg.jpg); background-image: none; }
+.wrapper::before {
+  content: "";
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  height: 100lvh;
+  background: var(--site-background) center / cover no-repeat;
+  pointer-events: none;
+}
+.wrapper .main-section:not(.main-section-alt),
+.wrapper .main-section.main-section-alt2,
+.wrapper .main-content-wrapper { min-height: calc(100svh - var(--site-header-height)); }
+.wrapper .main-content-wrapper { height: auto; }
+.wrapper .main-content-wrapper > .main-section { min-height: 0; }
+@media (min-width: 768px) {
+  /* 520px — общий desktop-слот Index с фото и полосой примеров при контейнере 1300px.
+     Верхняя граница не зависит от короткого/длинного содержимого текущего шага. */
+  .wrapper .index-mobile-fit,
+  .wrapper .tour-processing {
+    justify-content: flex-start;
+    padding-top: max(24px, calc((100svh - var(--site-header-height) - 520px) / 2)) !important;
+  }
+  :is(.index-mobile-fit, .tour-processing) :is(#dropzone-form, #process) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 456px;
+  }
+  :is(.index-mobile-fit, .tour-processing) :is(#dropzone-form, #process) .dropzone-form-inner {
+    width: 100%;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  :is(.index-mobile-fit, .tour-processing) #preview { height: auto; aspect-ratio: 1696 / 920; }
+}
+@media (max-width: 767.98px) { .wrapper { --site-header-height: 68px; } }
+/* /api#298 */