diff --git a/assets/runtime.js b/assets/runtime.js
index 8a1abcb..b691d80 100644
--- a/assets/runtime.js
+++ b/assets/runtime.js
@@ -190,16 +190,22 @@
       // at 1920x1080 so vw/vh/clamp all resolve exactly like the audience view.
       // We inject via contentDocument.write() so there's ZERO HTML escaping issues.
       // Template is a JS string (not embedded HTML attribute), so quotes stay raw.
+      // IMPORTANT: Do NOT override .slide or .deck styling. The original
+      // base.css + theme + scoped CSS handles flex centering, padding, etc.
+      // We only: (1) reset margins, (2) force the single slide to be visible
+      // (.is-active), (3) hide the speaker notes and runtime chrome.
       const iframeDocTemplate = '<!DOCTYPE html>'
         + '<html ' + htmlAttrs + '>'
         + '<head><meta charset="utf-8">'
         + styleSheets
         + '<style>'
-        + 'html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg,#0d1117)}'
-        + '.deck{position:relative;width:100vw;height:100vh;overflow:hidden}'
-        + '.slide{position:absolute!important;inset:0!important;width:100vw!important;height:100vh!important;opacity:1!important;transform:none!important;display:block!important;overflow:hidden!important}'
+        + 'html,body{margin:0;padding:0;overflow:hidden}'
+        + '/* Keep .slide and .deck styling from host CSS untouched */'
+        + '/* But ensure the one slide we render is visible */'
+        + '.slide{opacity:1!important;transform:none!important;pointer-events:auto!important}'
+        + '/* Hide elements that should not appear in preview */'
         + '.notes,aside.notes,.speaker-notes{display:none!important}'
-        + '.progress-bar,.notes-overlay,.overview,.deck-header,.deck-footer,.slide-number{display:none!important}'
+        + '.progress-bar,.notes-overlay,.overview{display:none!important}'
         + '</style></head>'
         + '<body class="' + bodyClasses + '">'
         + '<div class="deck">%%SLIDE_HTML%%</div>'
@@ -239,27 +245,29 @@
 + '  .pv-hint { font-size: 11px; color: #484f58; margin-left: auto; }\n'
 + '</style>\n'
 + '</head>\n<body>\n'
-+ '<div class="pv-grid">\n'
-+ '  <div class="pv-current-wrap">\n'
++ '<div class="pv-main">\n'
++ '  <div class="pv-left" id="pv-left" style="flex:1.4 1 0">\n'
 + '    <div class="pv-label">CURRENT</div>\n'
 + '    <div class="pv-stage" id="pv-current"><iframe id="iframe-cur"></iframe></div>\n'
 + '  </div>\n'
-+ '  <div class="pv-right">\n'
-+ '    <div class="pv-next-wrap">\n'
++ '  <div class="pv-hsplit" id="pv-hsplit" title="拖动调整左右宽度"></div>\n'
++ '  <div class="pv-right" id="pv-right" style="flex:1 1 0">\n'
++ '    <div class="pv-next-wrap" id="pv-next-wrap" style="flex:0 0 38%">\n'
 + '      <div class="pv-label">NEXT</div>\n'
 + '      <div class="pv-stage pv-next-stage" id="pv-next"><iframe id="iframe-nxt"></iframe></div>\n'
 + '    </div>\n'
-+ '    <div class="pv-notes">\n'
++ '    <div class="pv-vsplit" id="pv-vsplit" title="拖动调整上下高度"></div>\n'
++ '    <div class="pv-notes" id="pv-notes-wrap" style="flex:1 1 0">\n'
 + '      <div class="pv-label">SPEAKER SCRIPT · 逐字稿</div>\n'
 + '      <div class="pv-notes-body" id="pv-notes"></div>\n'
 + '    </div>\n'
 + '  </div>\n'
-+ '  <div class="pv-bar">\n'
-+ '    <div class="pv-timer" id="pv-timer">00:00</div>\n'
-+ '    <div class="pv-count" id="pv-count">1 / ' + total + '</div>\n'
-+ '    <div class="pv-title" id="pv-title"></div>\n'
-+ '    <div class="pv-hint">← → 翻页 · R 重置计时 · Esc 关闭</div>\n'
-+ '  </div>\n'
++ '</div>\n'
++ '<div class="pv-bar">\n'
++ '  <div class="pv-timer" id="pv-timer">00:00</div>\n'
++ '  <div class="pv-count" id="pv-count">1 / ' + total + '</div>\n'
++ '  <div class="pv-title" id="pv-title"></div>\n'
++ '  <div class="pv-hint">← → 翻页 · R 重置计时 · 拖动分隔线调整区域 · Esc 关闭</div>\n'
 + '</div>\n'
 + '<script>\n'
 + '(function(){\n'
@@ -355,6 +363,64 @@
 + '  });\n'
 + '\n'
 + '  window.addEventListener("resize", reScale);\n'
++ '\n'
++ '  /* ===== Draggable splitters ===== */\n'
++ '  (function initSplitters(){\n'
++ '    var hsplit = document.getElementById("pv-hsplit");\n'
++ '    var vsplit = document.getElementById("pv-vsplit");\n'
++ '    var pvLeft = document.getElementById("pv-left");\n'
++ '    var pvRight = document.getElementById("pv-right");\n'
++ '    var pvMain = document.querySelector(".pv-main");\n'
++ '    var pvNextWrap = document.getElementById("pv-next-wrap");\n'
++ '    var pvNotesWrap = document.getElementById("pv-notes-wrap");\n'
++ '\n'
++ '    /* Horizontal splitter: left / right columns */\n'
++ '    hsplit.addEventListener("mousedown", function(e){\n'
++ '      e.preventDefault();\n'
++ '      document.body.classList.add("pv-dragging");\n'
++ '      var mainRect = pvMain.getBoundingClientRect();\n'
++ '      function onMove(ev){\n'
++ '        var x = ev.clientX - mainRect.left - 10;\n'
++ '        var totalW = mainRect.width - 20 - 8;\n'
++ '        var leftW = Math.max(200, Math.min(totalW - 200, x));\n'
++ '        var rightW = totalW - leftW;\n'
++ '        pvLeft.style.flex = "0 0 " + leftW + "px";\n'
++ '        pvRight.style.flex = "0 0 " + rightW + "px";\n'
++ '        reScale();\n'
++ '      }\n'
++ '      function onUp(){\n'
++ '        document.removeEventListener("mousemove", onMove);\n'
++ '        document.removeEventListener("mouseup", onUp);\n'
++ '        document.body.classList.remove("pv-dragging");\n'
++ '      }\n'
++ '      document.addEventListener("mousemove", onMove);\n'
++ '      document.addEventListener("mouseup", onUp);\n'
++ '    });\n'
++ '\n'
++ '    /* Vertical splitter: next preview / notes */\n'
++ '    vsplit.addEventListener("mousedown", function(e){\n'
++ '      e.preventDefault();\n'
++ '      document.body.classList.add("pv-dragging-v");\n'
++ '      var rightRect = pvRight.getBoundingClientRect();\n'
++ '      function onMove(ev){\n'
++ '        var y = ev.clientY - rightRect.top;\n'
++ '        var totalH = rightRect.height - 8;\n'
++ '        var nextH = Math.max(80, Math.min(totalH - 100, y));\n'
++ '        var notesH = totalH - nextH;\n'
++ '        pvNextWrap.style.flex = "0 0 " + nextH + "px";\n'
++ '        pvNotesWrap.style.flex = "0 0 " + notesH + "px";\n'
++ '        reScale();\n'
++ '      }\n'
++ '      function onUp(){\n'
++ '        document.removeEventListener("mousemove", onMove);\n'
++ '        document.removeEventListener("mouseup", onUp);\n'
++ '        document.body.classList.remove("pv-dragging-v");\n'
++ '      }\n'
++ '      document.addEventListener("mousemove", onMove);\n'
++ '      document.addEventListener("mouseup", onUp);\n'
++ '    });\n'
++ '  })();\n'
++ '\n'
 + '  /* Wait for iframes to be ready, then render */\n'
 + '  function initWhenReady() {\n'
 + '    if (iframeCur.contentDocument && iframeNxt.contentDocument) {\n'
