docs: Add system-prompt fragment styling

Distinguish copyable instruction prose from regular code blocks.
Uses {code-block} with :class: system-prompt — no custom directive.

- Internal uppercase "SYSTEM PROMPT" whisper label
- Softer dark panel (#1f2329) with translucent purple border
- 3px left accent + 6px radius
- pre-wrap for prose wrapping
- Copy button background matches panel
- 13px font for readability over code density

Author: tony

docs/_static/css/custom.css

@@ -246,6 +246,56 @@ div.admonition.agent-thought > p:last-child {
   margin-bottom: 0;
 }
 
+/* ── System prompt fragments ─────────────────────────────
+ * Copyable instruction prose for AGENTS.md / CLAUDE.md.
+ * Internal label row, softer dark panel, prose wrapping.
+ * Keeps sphinx-copybutton via .highlight > pre selector.
+ * ────────────────────────────────────────────────────────── */
+div.system-prompt {
+  margin: 1.25rem 0;
+  position: relative;
+}
+
+div.system-prompt > div.highlight {
+  background: #1f2329 !important;
+  border: 1px solid color-mix(in srgb, var(--color-link) 20%, transparent);
+  border-left: 3px solid var(--color-link);
+  border-radius: 6px;
+  position: relative;
+  padding-top: 1.3rem;
+}
+
+div.system-prompt > div.highlight > pre {
+  background: transparent;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Internal label — sits inside the block, not floating above */
+div.system-prompt > div.highlight::before {
+  content: "System prompt";
+  position: absolute;
+  top: 0.45rem;
+  left: 0.85rem;
+  font-family: var(--font-stack);
+  font-size: 0.55rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #9590b8;
+  background: transparent;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.8;
+}
+
+/* Fix copy button background to match panel */
+div.system-prompt .copybtn {
+  background: #1f2329 !important;
+}
+
 /* ── Image layout shift prevention ────────────────────────
  * Reserve space for images before they load. Furo already
  * sets max-width: 100%; height: auto on img. We add

docs/topics/prompting.md

@@ -56,7 +56,9 @@ Copy these into your agent's system instructions (`AGENTS.md`, `CLAUDE.md`, `.cu
 
 ### For general tmux workflows
 
-```text
+```{code-block} text
+:class: system-prompt
+
 When executing long-running commands (servers, builds, test suites),
 use tmux via the libtmux MCP server rather than running them directly.
 This keeps output accessible for later inspection. Use the pattern:
@@ -65,7 +67,9 @@ send_keys → wait_for_text (for completion signal) → capture_pane.
 
 ### For safe agent behavior
 
-```text
+```{code-block} text
+:class: system-prompt
+
 Before creating tmux sessions, check list_sessions to avoid duplicates.
 Always use pane_id for targeting — it is globally unique. Never run
 destructive operations (kill_session, kill_server) without confirming
@@ -74,7 +78,9 @@ the target with the user first.
 
 ### For development workflows
 
-```text
+```{code-block} text
+:class: system-prompt
+
 When the user asks you to run tests or start servers, use dedicated
 tmux panes. Split windows to run related processes side-by-side.
 Use wait_for_text to know when a server is ready before running tests