From 721e1adfc1448e17454aa2e2bf9cbec0eec156c3 Mon Sep 17 00:00:00 2001
From: Jie <jie@jsray.org>
Date: Wed, 2 Sep 2026 22:48:48 +0800
Subject: [PATCH 1/5] Let the copy button say what happened
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pressing it changed nothing about it. The result appeared as a line of
text two elements to the right — the one place you are not looking at
the moment you press a button.

The button reports it now: mint for copied, amber for refused, with
the note beside it cut down to the part worth reading — which formats
went, or what to do when the browser blocks it. The width is fixed so
the row does not jump when the label changes, and it resets after a
few seconds.

A press can also be felt rather than assumed: an inset highlight, a
lift on hover, a 1px drop on active. Dropped under
prefers-reduced-motion.

Contrast on all three states is AAA (7.6, 9.4, 9.8). The target is
44px under a coarse pointer, and in the single-column layout the
button takes the full width its fields already have rather than
sitting at 200px beside them.

All three paths exercised in a browser: the primary clipboard write,
the rich-text fallback, and both failing — which also focuses and
selects the HTML for a manual copy.
---
 demo/paste.html | 70 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 11 deletions(-)

diff --git a/demo/paste.html b/demo/paste.html
index 276710e..704ff64 100644
--- a/demo/paste.html
+++ b/demo/paste.html
@@ -9,7 +9,7 @@
 <link rel="stylesheet" href="../dist/jsray.css?v=1">
 <link rel="stylesheet" href="footer.css?v=1">
 <style>
-  :root { --ui-bg:#141416; --ui-panel:#1C1C1E; --ui-line:#2C2C2E; --ui-fg:#E1E4E8; --ui-dim:#6B7681; --ui-accent:#D08BFC; }
+  :root { --ui-bg:#141416; --ui-panel:#1C1C1E; --ui-line:#2C2C2E; --ui-fg:#E1E4E8; --ui-dim:#6B7681; --ui-accent:#D08BFC; --ui-ok:#5DD8B0; --ui-warn:#F2B870; }
   * { box-sizing: border-box; }
   body { background: var(--ui-bg); color: var(--ui-fg); margin: 0; padding: 0 24px 80px;
          font: 15px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; }
@@ -28,7 +28,14 @@
   .controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 16px 20px; align-items: end; margin: 28px 0 18px; }
   @media (max-width: 780px) { .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-  @media (max-width: 460px) { .controls { grid-template-columns: 1fr; } }
+  @media (max-width: 460px) {
+    .controls { grid-template-columns: 1fr; }
+    /* Every control above it is full width in one column; a 200px button left
+       of all that reads as something that got left behind. */
+    .actions { flex-direction: column; align-items: stretch; }
+    .actions button { width: 100%; }
+    .status { margin-left: 0; text-align: center; }
+  }
 
   .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
   .field > span { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .09em;
@@ -45,12 +52,36 @@
      second row look like a leftover. */
   .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap;
              align-items: center; gap: 12px 16px; margin-top: 2px; }
-  .actions button { height: 40px; padding: 0 18px; }
+  .actions button { height: 40px; padding: 0 20px; min-width: 200px; }
   button { cursor: pointer; font-weight: 600; }
   button:hover { border-color: var(--ui-accent); }
-  button:focus-visible, select:focus-visible, textarea:focus-visible {
+  button:focus-visible, select:focus-visible, textarea:focus-visible,
+  input[type=text]:focus-visible {
     outline: 2px solid var(--ui-accent); outline-offset: 2px; }
-  button.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #17151b; }
+
+  button.primary {
+    background: var(--ui-accent);
+    border-color: var(--ui-accent);
+    color: #17151b;
+    box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 1px 8px rgba(208,139,252,.18);
+    transition: filter 120ms ease, transform 90ms ease, box-shadow 120ms ease,
+                background 160ms ease, border-color 160ms ease;
+  }
+  button.primary:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 14px rgba(208,139,252,.28); }
+  /* A press has to be felt, not just assumed. */
+  button.primary:active { transform: translateY(1px); filter: brightness(.97);
+                          box-shadow: 0 1px 0 rgba(255,255,255,.15) inset; }
+
+  /* The result used to be a separate line of text two elements away, which is
+     easy to miss at the moment you are looking at the button you just pressed.
+     The button says it itself; the note beside it only adds the qualifier. */
+  button.primary.is-done   { background: var(--ui-ok);   border-color: var(--ui-ok);   color: #10221c; box-shadow: none; }
+  button.primary.is-failed { background: var(--ui-warn); border-color: var(--ui-warn); color: #2a1410; box-shadow: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    button.primary { transition: none; }
+    button.primary:active { transform: none; }
+  }
 
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
   /* A grid item defaults to min-width:auto and so refuses to shrink below its
@@ -261,7 +292,7 @@ <h2 style="font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;tex
           'text/plain': new Blob([text], { type: 'text/plain' }),
         }),
       ]);
-      say('Copied — paste it somewhere');
+      report('is-done', 'Copied', 'both formats — rich text and source');
     } catch (e) {
       // clipboard.write() 需要安全上下文和真实用户手势，Safari 还对时机挑剔。
       //
@@ -271,11 +302,11 @@ <h2 style="font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;tex
       // execCommand('copy')，浏览器会把 text/html 放进剪贴板，这也是富文本
       // 复制在 Clipboard API 之前唯一的做法。
       if (fallbackCopyRich(html, text)) {
-        say('Copied — paste it somewhere');
+        report('is-done', 'Copied', 'rich text and source');
       } else {
         els.html.focus();
         els.html.select();
-        say('Copy failed — select the HTML below and copy it by hand');
+        report('is-failed', 'Copy refused', 'the browser blocked it — the HTML below is selected, copy it by hand');
       }
     }
   }
@@ -322,9 +353,26 @@ <h2 style="font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;tex
     }
   }
 
-  function say(msg) {
-    els.status.textContent = msg;
-    window.setTimeout(function () { els.status.textContent = ''; }, 2600);
+  // The button reports the outcome on itself, because that is where the eye
+  // already is; the note beside it carries only the detail worth reading —
+  // which formats went, or what to do when the browser refused.
+  const BUTTON_LABEL = 'Copy rendered block';
+  let resetTimer = 0;
+
+  function report(state, label, detail) {
+    const btn = $('copy');
+    window.clearTimeout(resetTimer);
+
+    btn.classList.remove('is-done', 'is-failed');
+    if (state) btn.classList.add(state);
+    btn.textContent = label;
+    els.status.textContent = detail || '';
+
+    resetTimer = window.setTimeout(function () {
+      btn.classList.remove('is-done', 'is-failed');
+      btn.textContent = BUTTON_LABEL;
+      els.status.textContent = '';
+    }, 2600);
   }
 
   els.code.addEventListener('input', update);

From 92390d85a9cf1687f1f2f8a381a90e578f44a99d Mon Sep 17 00:00:00 2001
From: Jie <jie@jsray.org>
Date: Wed, 2 Sep 2026 22:55:32 +0800
Subject: [PATCH 2/5] Stop the scrollbars shouting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two of them, both the browser's default: a pale slab across the foot of
the rendered block and another down the side of the HTML box, on a page
that is otherwise dark and quiet.

jsray.css already answers this for a class-rendered block, with an 8px
bar coloured from the palette — but it does it through
::-webkit-scrollbar, and a pseudo-element cannot be written inline. So
a portable block never had it, at the destination either. scrollbar-width
and scrollbar-color are real properties, say the same thing, and travel
with the block; where a browser does not know them it keeps the
scrollbar it would have had anyway.

The page's own textareas get both spellings, since the ::-webkit- rules
still cover the versions that predate the standard ones.

Also: assigning to a textarea's value leaves the caret at the end and
the browser scrolls there, so the HTML box opened on the middle of the
markup every time a setting changed. It starts at the start now.
---
 demo/paste.html         | 22 ++++++++++++++++++++++
 dist/jsray.js           |  8 ++++++++
 integrity.json          |  2 +-
 src/jsray.js            |  8 ++++++++
 tests/portable.test.mjs | 12 ++++++++++++
 5 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/demo/paste.html b/demo/paste.html
index 704ff64..33d3388 100644
--- a/demo/paste.html
+++ b/demo/paste.html
@@ -94,6 +94,23 @@
   textarea { width: 100%; min-height: 300px; resize: vertical; tab-size: 2;
              font: 13px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; }
 
+  /* The browser's default scrollbar is a bright slab, and on this page it
+     lands across the foot of a dark code block and down the side of the HTML
+     box. The standard properties cover Firefox and current Chrome/Safari; the
+     ::-webkit- rules cover the versions that predate them. */
+  textarea, #preview { scrollbar-width: thin; scrollbar-color: var(--ui-line) transparent; }
+  textarea::-webkit-scrollbar,
+  #preview::-webkit-scrollbar { width: 9px; height: 9px; }
+  textarea::-webkit-scrollbar-track,
+  #preview::-webkit-scrollbar-track { background: transparent; }
+  textarea::-webkit-scrollbar-thumb,
+  #preview::-webkit-scrollbar-thumb {
+    background: var(--ui-line); border-radius: 5px;
+    border: 2px solid transparent; background-clip: content-box;
+  }
+  textarea:hover::-webkit-scrollbar-thumb,
+  #preview:hover::-webkit-scrollbar-thumb { background: #3A3A3F; background-clip: content-box; }
+
   /* 预览容器刻意不设背景：可移植块自带背景，看到什么就是粘贴后的样子 */
   #preview { min-height: 300px; border: 1px dashed var(--ui-line); border-radius: 8px; padding: 14px; overflow: auto; }
   #preview > pre, #preview > div { margin: 0; }
@@ -272,6 +289,11 @@ <h2 style="font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;tex
 
     els.preview.innerHTML = html;
     els.html.value = html;
+    // Assigning value leaves the caret at the end, and the browser scrolls
+    // there — so the box showed the middle of the markup rather than its
+    // start every time a setting changed.
+    els.html.scrollTop = 0;
+    els.html.setSelectionRange(0, 0);
 
     const bytes = new Blob([html]).size;
     const src = new Blob([els.code.value]).size || 1;
diff --git a/dist/jsray.js b/dist/jsray.js
index 6125e8f..454124d 100644
--- a/dist/jsray.js
+++ b/dist/jsray.js
@@ -1797,6 +1797,14 @@
       // Explicit, because a host that sets `pre-wrap` would reflow the code.
       'white-space:pre',
       'margin:0',
+      // jsray.css gives a block a restrained 8px scrollbar through
+      // ::-webkit-scrollbar, and a pseudo-element cannot be written inline —
+      // so a pasted block was left with the browser's default, a bright slab
+      // across the foot of a dark rectangle. These two are real properties and
+      // say the same thing; where they are not supported the block simply
+      // keeps the scrollbar it would have had.
+      'scrollbar-width:thin',
+      'scrollbar-color:' + edge + ' ' + bg,
     ];
 
     // An unframed block still wants an edge: on a host whose background is
diff --git a/integrity.json b/integrity.json
index d6b7fc0..1711f91 100644
--- a/integrity.json
+++ b/integrity.json
@@ -4,7 +4,7 @@
   "algorithm": "sha256",
   "note": "Base64 SHA-256 digests of the released Core assets. Integrations copy the relevant digest at sync time and verify their bundled snapshot against it.",
   "files": {
-    "dist/jsray.js": "sha256-OWbAMBINaM7HAEB7Mjou+5xlDi2DiCZZx4L0JBT/0GI=",
+    "dist/jsray.js": "sha256-x180Gx5SNG9mcOdUrW8pyDkuoGV6MY4VB2caqu1Jd44=",
     "dist/jsray.css": "sha256-6Fuva+aZwCcmltNi2oN+1yWIJoKE+1rLpUxZvD9iutc=",
     "dist/themes/aurora.css": "sha256-S8X+R8XZNC8WRdHOen839zMkPxVFol6PPTrpZibbeJA=",
     "dist/themes/default.css": "sha256-vENOigRjwn1hW6wPjdM4tbZ58Ja44FMsa+akavPiMSI=",
diff --git a/src/jsray.js b/src/jsray.js
index 6125e8f..454124d 100644
--- a/src/jsray.js
+++ b/src/jsray.js
@@ -1797,6 +1797,14 @@
       // Explicit, because a host that sets `pre-wrap` would reflow the code.
       'white-space:pre',
       'margin:0',
+      // jsray.css gives a block a restrained 8px scrollbar through
+      // ::-webkit-scrollbar, and a pseudo-element cannot be written inline —
+      // so a pasted block was left with the browser's default, a bright slab
+      // across the foot of a dark rectangle. These two are real properties and
+      // say the same thing; where they are not supported the block simply
+      // keeps the scrollbar it would have had.
+      'scrollbar-width:thin',
+      'scrollbar-color:' + edge + ' ' + bg,
     ];
 
     // An unframed block still wants an edge: on a host whose background is
diff --git a/tests/portable.test.mjs b/tests/portable.test.mjs
index aecb0e8..264f3f9 100644
--- a/tests/portable.test.mjs
+++ b/tests/portable.test.mjs
@@ -268,3 +268,15 @@ test('a frame costs less than doubling the block', () => {
       `${frame} is ${(framed / plain).toFixed(1)}× the unframed block`);
   }
 });
+
+test('the block asks for a restrained scrollbar, in properties it can inline', () => {
+  // jsray.css gives a class-rendered block an 8px scrollbar coloured from the
+  // palette, through ::-webkit-scrollbar — a pseudo-element, which cannot be
+  // written inline. A pasted block was left with the browser's default: a
+  // bright slab across the foot of a dark rectangle. These two are real
+  // properties and say the same thing.
+  const html = JSRay.renderPortable(SAMPLE_CODE, 'js', DARK);
+  assert.match(html, /scrollbar-width:thin/);
+  assert.match(html, new RegExp(`scrollbar-color:${DARK.border} ${DARK.background}`),
+    'the scrollbar should be coloured from the palette, not left to the browser');
+});

From 6a40a238c3a8eda1a1cc07e364d089886c266772 Mon Sep 17 00:00:00 2001
From: Jie <jie@jsray.org>
Date: Wed, 2 Sep 2026 23:00:36 +0800
Subject: [PATCH 3/5] Make the two panes read as one pair
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

They are a before and an after of the same thing, and they ended in
different places. The editor stopped at its 300px minimum while the
preview ran on to whatever the block needed — 30px lower — so the pair
read as two boxes that happened to be next to each other.

Stretching the row makes them end together. The preview also inset its
contents by 14px against the editor's 10px, which put the rendered
block 5px further in than the code it is a rendering of; both are 11px
now, so a line of code sits directly opposite the line it became.

Only while they are side by side: stacked on a narrow screen there is
nothing to align to, and forcing a shared height there would spend
vertical space a phone does not have. Measured at eight widths — equal
height and a common baseline above 900px, an even inset at all of them.
---
 demo/paste.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/demo/paste.html b/demo/paste.html
index 33d3388..fdd4135 100644
--- a/demo/paste.html
+++ b/demo/paste.html
@@ -83,7 +83,13 @@
     button.primary:active { transform: none; }
   }
 
-  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
+  /* The two panes are one before-and-after pair, so they have to end where
+     each other ends. Left to themselves the editor stopped at its 300px
+     minimum while the preview ran on to whatever the block needed — 30px
+     lower — and the pair read as two unrelated boxes. */
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
+  .pane { display: flex; flex-direction: column; }
+  .pane > textarea, .pane > #preview { flex: 1 1 auto; }
   /* A grid item defaults to min-width:auto and so refuses to shrink below its
      content — and the preview holds a code block. Without this the column was
      575px wide on a 390px phone and the whole page scrolled sideways. */
@@ -112,7 +118,10 @@
   #preview:hover::-webkit-scrollbar-thumb { background: #3A3A3F; background-clip: content-box; }
 
   /* 预览容器刻意不设背景：可移植块自带背景，看到什么就是粘贴后的样子 */
-  #preview { min-height: 300px; border: 1px dashed var(--ui-line); border-radius: 8px; padding: 14px; overflow: auto; }
+  /* Same inset as the editor's text, so the block inside starts where the
+     code opposite it starts rather than 5px further in. */
+  #preview { min-height: 300px; border: 1px dashed var(--ui-line); border-radius: 8px;
+             padding: 9px 10px; overflow: auto; }
   #preview > pre, #preview > div { margin: 0; }
 
   .out { margin-top: 22px; }

From 60b16c16e5ccf91ea45e94dc767eb54884aa46e3 Mon Sep 17 00:00:00 2001
From: Jie <jie@jsray.org>
Date: Wed, 2 Sep 2026 23:05:05 +0800
Subject: [PATCH 4/5] Give the preview the same margin on all four sides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stretching the surface to the row's height put every pixel the row was
taller than the block into one gap along the bottom — 70px against 10
on the other three sides, which is what you notice.

It hugs the block now, with 10px all round and no minimum height; a
minimum is the same gap under another name whenever the block is
shorter than it.

That trades away the shared bottom edge, but only where the editor is
being held open by its own 300px minimum: at nine lines both panes are
321px and at twenty-six both are 654px, ending together in each case.
It is one line of code that separates them, by 182px, and the minimum
is there so the box is still worth typing in.
---
 demo/paste.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/demo/paste.html b/demo/paste.html
index fdd4135..71d2e6e 100644
--- a/demo/paste.html
+++ b/demo/paste.html
@@ -89,7 +89,11 @@
      lower — and the pair read as two unrelated boxes. */
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
   .pane { display: flex; flex-direction: column; }
-  .pane > textarea, .pane > #preview { flex: 1 1 auto; }
+  .pane > textarea { flex: 1 1 auto; }
+  /* The surface hugs the block instead of stretching with the row: stretched,
+     everything the row was taller than the block landed as one gap along the
+     bottom, against 10px on the other three sides. */
+  .pane > #preview { flex: 0 0 auto; }
   /* A grid item defaults to min-width:auto and so refuses to shrink below its
      content — and the preview holds a code block. Without this the column was
      575px wide on a 390px phone and the whole page scrolled sideways. */
@@ -120,8 +124,10 @@
   /* 预览容器刻意不设背景：可移植块自带背景，看到什么就是粘贴后的样子 */
   /* Same inset as the editor's text, so the block inside starts where the
      code opposite it starts rather than 5px further in. */
-  #preview { min-height: 300px; border: 1px dashed var(--ui-line); border-radius: 8px;
-             padding: 9px 10px; overflow: auto; }
+  /* Equal on all four sides, and no minimum — a minimum is just the same gap
+     under a different name whenever the block is shorter than it. */
+  #preview { border: 1px dashed var(--ui-line); border-radius: 8px;
+             padding: 10px; overflow: auto; }
   #preview > pre, #preview > div { margin: 0; }
 
   .out { margin-top: 22px; }
@@ -139,7 +145,6 @@
     header.top h1 { font-size: 23px; }
     .controls { gap: 12px 14px; margin: 20px 0 14px; }
     textarea { min-height: 200px; }
-    #preview { min-height: 160px; }
   }
 
   /* 44px is the touch target both Apple and the WCAG rule settle on; every

From c3c74261bd0f766846c6e9c344e002206484b879 Mon Sep 17 00:00:00 2001
From: Jie <jie@jsray.org>
Date: Wed, 2 Sep 2026 23:10:40 +0800
Subject: [PATCH 5/5] Make the editor and the preview one instrument
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

They were two bordered boxes with a gap down the middle, and the last
two changes were both attempts to make two separate things look
related — first by forcing a shared height, then by evening out the
padding the forcing had unbalanced.

One card with a hairline down the middle removes the problem instead of
managing it. The halves are grid tracks, so they are equal by
construction: 359px each at nine lines, 777 at thirty, 336 at one —
where the old arrangement had them 182px apart. Neither half draws an
edge any more; the labels are a strip along the top of each, ending on
the same line. Stacked below 860px the rule moves from the side to the
top, which is the only thing that changes.

The editor grows with the row rather than scrolling inside a fixed box,
so the resize handle is gone with nothing lost — at thirty lines the
textarea is 741px and still not scrolling.

Typing on the left still shows on the right as you type; checked by
typing into it rather than by reading the listener back.
---
 demo/paste.html | 49 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/demo/paste.html b/demo/paste.html
index 71d2e6e..1c69133 100644
--- a/demo/paste.html
+++ b/demo/paste.html
@@ -83,26 +83,41 @@
     button.primary:active { transform: none; }
   }
 
-  /* The two panes are one before-and-after pair, so they have to end where
-     each other ends. Left to themselves the editor stopped at its 300px
-     minimum while the preview ran on to whatever the block needed — 30px
-     lower — and the pair read as two unrelated boxes. */
-  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
-  .pane { display: flex; flex-direction: column; }
+  /* One instrument with two halves rather than two boxes side by side: a
+     single border around both, a hairline between them, and the labels as a
+     strip along the top of each half. Nothing to align, because there is only
+     one frame. */
+  .grid {
+    display: grid; grid-template-columns: 1fr 1fr;
+    border: 1px solid var(--ui-line); border-radius: 10px;
+    overflow: hidden; background: var(--ui-bg);
+  }
+  .pane { display: flex; flex-direction: column; min-width: 0; }
+  .pane + .pane { border-left: 1px solid var(--ui-line); }
   .pane > textarea { flex: 1 1 auto; }
-  /* The surface hugs the block instead of stretching with the row: stretched,
-     everything the row was taller than the block landed as one gap along the
-     bottom, against 10px on the other three sides. */
-  .pane > #preview { flex: 0 0 auto; }
+  .pane > #preview { flex: 1 1 auto; }
   /* A grid item defaults to min-width:auto and so refuses to shrink below its
      content — and the preview holds a code block. Without this the column was
      575px wide on a 390px phone and the whole page scrolled sideways. */
   .grid > * { min-width: 0; }
-  @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
-  .pane > h2 { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .09em;
-               text-transform: uppercase; color: var(--ui-dim); margin: 0 0 8px; }
+  @media (max-width: 860px) {
+    .grid { grid-template-columns: 1fr; }
+    /* Stacked, the rule belongs above the second half rather than beside it. */
+    .pane + .pane { border-left: 0; border-top: 1px solid var(--ui-line); }
+  }
+  .pane > h2 {
+    font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em;
+    text-transform: uppercase; color: var(--ui-dim);
+    margin: 0; padding: 12px 14px;
+    border-bottom: 1px solid var(--ui-line);
+  }
   textarea { width: 100%; min-height: 300px; resize: vertical; tab-size: 2;
              font: 13px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; }
+  /* Inside the split the halves are the frame's own surface, so neither draws
+     an edge of its own. */
+  .pane > textarea { border: 0; border-radius: 0; background: transparent;
+                     padding: 12px 14px; resize: none; }
+  .pane > textarea:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
 
   /* The browser's default scrollbar is a bright slab, and on this page it
      lands across the foot of a dark code block and down the side of the HTML
@@ -124,10 +139,10 @@
   /* 预览容器刻意不设背景：可移植块自带背景，看到什么就是粘贴后的样子 */
   /* Same inset as the editor's text, so the block inside starts where the
      code opposite it starts rather than 5px further in. */
-  /* Equal on all four sides, and no minimum — a minimum is just the same gap
-     under a different name whenever the block is shorter than it. */
-  #preview { border: 1px dashed var(--ui-line); border-radius: 8px;
-             padding: 10px; overflow: auto; }
+  /* No frame of its own — the split's border is the frame. The block keeps
+     its own background, so it still reads as the object you are copying
+     rather than part of the page. */
+  #preview { padding: 12px 14px; overflow: auto; }
   #preview > pre, #preview > div { margin: 0; }
 
   .out { margin-top: 22px; }