Polish the editor affordance with the existing accent left-rule

Removed the ✎ pencil glyph (icons aren't part of the site's
vocabulary). Replaced it with the 2px accent left-rule the site
already uses on .cell-code-stack, .lesson-step pre, and
.shiki-block — the visual signature for "live code area". The
editor panel is now consistent with the rest of the code chrome:
hairline on three sides, orange accent rule on the left.

Other cues from the previous commit kept:

  - background: --surface-2 (lifts the editor over --surface output)
  - cursor: text on hover (the native edit affordance)
  - focus-within glow: 3px accent ring (matches textarea/cm-focused)

Refinement: dropped the border-color hover state. Cycling a single
border colour added a third moving piece for hover/focus/active.
Hover now shifts background --surface-2 → --surface-3, which is a
quieter and more polished signal that the panel is interactive.
Focus is the loud state.

Output panel keeps its dashed hairline + --surface, so the
editable / read-only contrast still reads at a glance — just
through accent rule vs no rule, and surface-2 vs surface, instead
of a glyph.

Author: claude

public/site.0e32b85ff236.css public/site.16ea7dd6d9b3.csspublic/site.0e32b85ff236.css renamed to public/site.16ea7dd6d9b3.css

@@ -110,10 +110,9 @@
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
     .runner-panel h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
-    .runner-editor { border-style: solid; border-color: var(--hairline); background: var(--surface-2); cursor: text; transition-property: border-color, box-shadow; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
-    .runner-editor:hover { border-color: var(--accent); }
-    .runner-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }
-    .runner-editor h2::before { content: "✎ "; color: var(--accent); font-weight: 400; }
+    .runner-editor { border: 1px solid var(--hairline); border-left: 2px solid var(--accent); background: var(--surface-2); cursor: text; transition-property: border-color, box-shadow, background-color; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
+    .runner-editor:hover { background: var(--surface-3); }
+    .runner-editor:focus-within { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }
     .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
     .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
     .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }

public/site.css

@@ -110,10 +110,9 @@
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
     .runner-panel h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
-    .runner-editor { border-style: solid; border-color: var(--hairline); background: var(--surface-2); cursor: text; transition-property: border-color, box-shadow; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
-    .runner-editor:hover { border-color: var(--accent); }
-    .runner-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }
-    .runner-editor h2::before { content: "✎ "; color: var(--accent); font-weight: 400; }
+    .runner-editor { border: 1px solid var(--hairline); border-left: 2px solid var(--accent); background: var(--surface-2); cursor: text; transition-property: border-color, box-shadow, background-color; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
+    .runner-editor:hover { background: var(--surface-3); }
+    .runner-editor:focus-within { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }
     .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
     .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
     .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.0e32b85ff236.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = '11cb4a87b617'
+ASSET_PATHS = {'SITE_CSS': '/site.16ea7dd6d9b3.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
+HTML_CACHE_VERSION = 'af940b56156d'