diff --git a/docs/next-steps.md b/docs/next-steps.md
new file mode 100644
index 0000000..cdb8b53
--- /dev/null
+++ b/docs/next-steps.md
@@ -0,0 +1,23 @@
+# Next Steps
+
+Focused follow-up work for `@knighted/develop`.
+
+1. **Grid-first header/layout cleanup**
+   - Refactor panel header layout to use CSS Grid as the primary layout mechanism.
+   - Reduce wrapper rows where possible and place controls explicitly in grid areas.
+   - Preserve existing semantics and accessibility behavior while simplifying structure.
+   - Validate desktop/mobile breakpoints and keep visual behavior parity.
+
+2. **Style isolation behavior docs**
+   - Document ShadowRoot on/off behavior and how style isolation changes in light DOM mode.
+   - Clarify that light DOM preview can inherit shell styles and include recommendations for scoping.
+
+3. **Preview UX polish**
+   - Keep tooltip affordances for mode-specific behavior.
+   - Continue tightening panel control alignment and spacing without introducing extra markup.
+
+4. **Theming (light + dark)**
+   - Keep the existing dark mode as the baseline and add a first-class light theme.
+   - Move key colors to semantic CSS variables and define both theme palettes.
+   - Ensure component panels, controls, editor chrome, preview shell, and tooltips all have complete light-mode coverage.
+   - Verify contrast/accessibility across both themes and preserve visual hierarchy parity.
diff --git a/package.json b/package.json
index bc509c5..6924c0a 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,17 @@
 {
   "name": "@knighted/develop",
   "version": "0.1.0",
-  "description": "Develop UI components directly in the browser.",
+  "description": "Develop UI components directly in the browser using JSX and CSS.",
   "keywords": [
     "ui",
     "components",
     "realtime",
     "browser",
-    "development"
+    "development",
+    "jsx",
+    "css",
+    "importmap",
+    "cdn"
   ],
   "license": "MIT",
   "author": "KCM <knightedcodemonkey@gmail.com>",
diff --git a/src/app.js b/src/app.js
index 989877b..92650bb 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,71 +1,27 @@
 import { cdnImports, importFromCdnWithFallback } from './cdn.js'
 import { createCodeMirrorEditor } from './editor-codemirror.js'
+import { defaultCss, defaultJsx } from './defaults.js'
 
 const statusNode = document.getElementById('status')
 const renderMode = document.getElementById('render-mode')
 const autoRenderToggle = document.getElementById('auto-render')
 const renderButton = document.getElementById('render-button')
+const copyComponentButton = document.getElementById('copy-component')
+const clearComponentButton = document.getElementById('clear-component')
 const styleMode = document.getElementById('style-mode')
+const copyStylesButton = document.getElementById('copy-styles')
+const clearStylesButton = document.getElementById('clear-styles')
 const shadowToggle = document.getElementById('shadow-toggle')
 const jsxEditor = document.getElementById('jsx-editor')
 const cssEditor = document.getElementById('css-editor')
-const previewHost = document.getElementById('preview-host')
 const styleWarning = document.getElementById('style-warning')
 const cdnLoading = document.getElementById('cdn-loading')
-
-const defaultJsx = [
-  'const Button = ({ onClick }) => {',
-  '  return <button onClick={onClick}>click me</button>',
-  '}',
-  '',
-  'const App = () => {',
-  '  const onClick = () => {',
-  "    alert('clicked!')",
-  '  }',
-  '',
-  '  return <Button onClick={onClick} />',
-  '}',
-  '',
-].join('\n')
-
-const defaultCss = `button {
-  appearance: none;
-  border: 1px solid rgba(122, 107, 255, 0.55);
-  background: linear-gradient(135deg, #7a6bff, #5f4dff);
-  color: #fff;
-  padding: 10px 16px;
-  border-radius: 10px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  cursor: pointer;
-  transition:
-    transform 120ms ease,
-    box-shadow 120ms ease,
-    filter 120ms ease;
-  box-shadow:
-    0 8px 20px rgba(95, 77, 255, 0.28),
-    inset 0 1px 0 rgba(255, 255, 255, 0.18);
-}
-
-button:hover {
-  transform: translateY(-1px);
-  filter: brightness(1.06);
-}
-
-button:active {
-  transform: translateY(0);
-  filter: brightness(0.98);
-}
-
-button:focus-visible {
-  outline: 2px solid #9d91ff;
-  outline-offset: 2px;
-}
-`
+const previewBgColorInput = document.getElementById('preview-bg-color')
 
 jsxEditor.value = defaultJsx
 cssEditor.value = defaultCss
 
+let previewHost = document.getElementById('preview-host')
 let jsxCodeEditor = null
 let cssCodeEditor = null
 let getJsxSource = () => jsxEditor.value
@@ -82,6 +38,8 @@ let compiledStylesCache = {
   value: null,
 }
 let hasCompletedInitialRender = false
+let previewBackgroundColor = null
+const clipboardSupported = Boolean(navigator.clipboard?.writeText)
 
 const styleLabels = {
   css: 'Native CSS',
@@ -196,7 +154,140 @@ const debounceRender = () => {
   scheduled = setTimeout(renderPreview, 200)
 }
 
-const getShadowRoot = () => {
+const setJsxSource = value => {
+  if (jsxCodeEditor) {
+    jsxCodeEditor.setValue(value)
+  }
+  jsxEditor.value = value
+}
+
+const setCssSource = value => {
+  if (cssCodeEditor) {
+    cssCodeEditor.setValue(value)
+  }
+  cssEditor.value = value
+}
+
+const clearComponentSource = () => {
+  setJsxSource('')
+  if (!jsxCodeEditor) {
+    maybeRender()
+  }
+}
+
+const clearStylesSource = () => {
+  setCssSource('')
+  if (!cssCodeEditor) {
+    maybeRender()
+  }
+}
+
+const copyTextToClipboard = async text => {
+  if (!clipboardSupported) {
+    throw new Error('Clipboard API is not available in this browser context.')
+  }
+
+  await navigator.clipboard.writeText(text)
+}
+
+const copyComponentSource = async () => {
+  try {
+    await copyTextToClipboard(getJsxSource())
+    setStatus('Component copied')
+  } catch {
+    setStatus('Copy failed')
+  }
+}
+
+const copyStylesSource = async () => {
+  try {
+    await copyTextToClipboard(getCssSource())
+    setStatus('Styles copied')
+  } catch {
+    setStatus('Copy failed')
+  }
+}
+
+const toHexChannel = value => value.toString(16).padStart(2, '0')
+
+const normalizeColorToHex = colorValue => {
+  if (typeof colorValue !== 'string' || colorValue.length === 0) {
+    return '#12141c'
+  }
+
+  if (/^#[\da-f]{6}$/i.test(colorValue)) {
+    return colorValue.toLowerCase()
+  }
+
+  if (/^#[\da-f]{3}$/i.test(colorValue)) {
+    return colorValue
+      .slice(1)
+      .split('')
+      .map(channel => channel + channel)
+      .join('')
+      .replace(/^/, '#')
+      .toLowerCase()
+  }
+
+  const channels = colorValue.match(/\d+/g)
+  if (!channels || channels.length < 3) {
+    return '#12141c'
+  }
+
+  const [red, green, blue] = channels.slice(0, 3).map(value => Number.parseInt(value, 10))
+  if ([red, green, blue].some(value => Number.isNaN(value))) {
+    return '#12141c'
+  }
+
+  return `#${toHexChannel(red)}${toHexChannel(green)}${toHexChannel(blue)}`
+}
+
+const applyPreviewBackgroundColor = color => {
+  if (!previewHost) {
+    return
+  }
+
+  previewHost.style.backgroundColor = color
+}
+
+const initializePreviewBackgroundPicker = () => {
+  if (!previewBgColorInput || !previewHost) {
+    return
+  }
+
+  const initialColor = normalizeColorToHex(getComputedStyle(previewHost).backgroundColor)
+  previewBackgroundColor = initialColor
+  previewBgColorInput.value = initialColor
+  applyPreviewBackgroundColor(initialColor)
+
+  previewBgColorInput.addEventListener('input', () => {
+    previewBackgroundColor = previewBgColorInput.value
+    applyPreviewBackgroundColor(previewBackgroundColor)
+  })
+}
+
+const recreatePreviewHost = () => {
+  const nextHost = document.createElement('div')
+  nextHost.id = 'preview-host'
+  nextHost.className = previewHost.className
+  previewHost.replaceWith(nextHost)
+  previewHost = nextHost
+
+  if (previewBackgroundColor) {
+    applyPreviewBackgroundColor(previewBackgroundColor)
+  }
+}
+
+const getRenderTarget = () => {
+  if (!shadowToggle.checked && previewHost.shadowRoot) {
+    /* ShadowRoot cannot be detached, so recreate the host for light DOM mode. */
+    if (reactRoot) {
+      reactRoot.unmount()
+      reactRoot = null
+    }
+    recreatePreviewHost()
+  }
+
   if (shadowToggle.checked) {
     if (!previewHost.shadowRoot) {
       previewHost.attachShadow({ mode: 'open' })
@@ -234,7 +325,10 @@ const applyStyles = (target, cssText) => {
   if (!target) return
 
   const styleTag = document.createElement('style')
-  styleTag.textContent = cssText
+  const isShadowTarget = target instanceof ShadowRoot
+  styleTag.textContent = isShadowTarget
+    ? cssText
+    : `@scope (#preview-host) {\n${cssText}\n}`
   target.append(styleTag)
 }
 
@@ -554,15 +648,33 @@ const evaluateUserModule = async (helpers = {}) => {
       throw error
     }
 
-    const transpiledUserCode = transpileJsxSource(userCode, {
-      sourceType: 'script',
-    }).code
+    const transpileMode = helpers.React && helpers.reactJsx ? 'react' : 'dom'
+    const transpileOptionsByMode = {
+      dom: {
+        sourceType: 'script',
+        createElement: 'jsx.createElement',
+        fragment: 'jsx.Fragment',
+      },
+      react: {
+        sourceType: 'script',
+        createElement: 'React.createElement',
+        fragment: 'React.Fragment',
+      },
+    }
+    const transpiledUserCode = transpileJsxSource(
+      userCode,
+      transpileOptionsByMode[transpileMode],
+    ).code
     const moduleFactory = createUserModuleFactory(transpiledUserCode)
 
     if (helpers.React && helpers.reactJsx) {
       return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx, helpers.React)
     }
 
+    if (transpileMode === 'dom') {
+      return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx, helpers.React)
+    }
+
     const { React, reactJsx } = await ensureReactRuntime()
     return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx ?? reactJsx, React)
   }
@@ -605,7 +717,7 @@ const ensureReactRuntime = async () => {
 
 const renderDom = async () => {
   const { jsx } = await ensureCoreRuntime()
-  const target = getShadowRoot()
+  const target = getRenderTarget()
   clearTarget(target)
   const compiledStyles = await compileStyles()
   applyStyles(target, compiledStyles.css)
@@ -627,13 +739,13 @@ const renderDom = async () => {
 }
 
 const renderReact = async () => {
-  const target = getShadowRoot()
+  const target = getRenderTarget()
   clearTarget(target)
   const compiledStyles = await compileStyles()
   applyStyles(target, compiledStyles.css)
 
   const { reactJsx, createRoot, React } = await ensureReactRuntime()
-  const renderFn = await evaluateUserModule({ jsx: reactJsx, reactJsx })
+  const renderFn = await evaluateUserModule({ jsx: reactJsx, reactJsx, React })
   if (!renderFn) {
     throw new Error('Expected a render() function or a component named App/View.')
   }
@@ -666,7 +778,7 @@ const renderPreview = async () => {
     setStatus('Rendered')
   } catch (error) {
     setStatus('Error')
-    const target = getShadowRoot()
+    const target = getRenderTarget()
     clearTarget(target)
     const message = document.createElement('pre')
     message.textContent = error instanceof Error ? error.message : String(error)
@@ -686,6 +798,10 @@ const maybeRender = () => {
   }
 }
 
+const updateRenderButtonVisibility = () => {
+  renderButton.hidden = autoRenderToggle.checked
+}
+
 renderMode.addEventListener('change', maybeRender)
 styleMode.addEventListener('change', () => {
   if (cssCodeEditor) {
@@ -695,15 +811,31 @@ styleMode.addEventListener('change', () => {
 })
 shadowToggle.addEventListener('change', maybeRender)
 autoRenderToggle.addEventListener('change', () => {
+  updateRenderButtonVisibility()
   if (autoRenderToggle.checked) {
     renderPreview()
   }
 })
 renderButton.addEventListener('click', renderPreview)
+if (clipboardSupported) {
+  copyComponentButton.addEventListener('click', () => {
+    void copyComponentSource()
+  })
+  copyStylesButton.addEventListener('click', () => {
+    void copyStylesSource()
+  })
+} else {
+  copyComponentButton.hidden = true
+  copyStylesButton.hidden = true
+}
+clearComponentButton.addEventListener('click', clearComponentSource)
+clearStylesButton.addEventListener('click', clearStylesSource)
 jsxEditor.addEventListener('input', maybeRender)
 cssEditor.addEventListener('input', maybeRender)
 
+updateRenderButtonVisibility()
 setStyleCompiling(false)
 setCdnLoading(true)
+initializePreviewBackgroundPicker()
 void initializeCodeEditors()
 renderPreview()
diff --git a/src/defaults.js b/src/defaults.js
new file mode 100644
index 0000000..2d5516b
--- /dev/null
+++ b/src/defaults.js
@@ -0,0 +1,114 @@
+export const defaultJsx = [
+  'const Item = ({ value }) => <li>{value}</li>',
+  'const List = ({ items, onClick }) => (',
+  '  <ul onClick={onClick}>',
+  '    {items.map(item => <Item key={item} value={item} />)}',
+  '  </ul>',
+  ')',
+  'const Checkbox = ({ checked = false }) => <input type="checkbox" checked={checked} />',
+  'const App = () => {',
+  "  const items = ['apple', 'banana', 'orange']",
+  '  const checkbox = <Checkbox checked={true} />',
+  '  const onClickList = evt => {',
+  '    if (evt.target.contains(checkbox)) {',
+  '      checkbox.remove()',
+  '    } else {',
+  '      evt.target.appendChild(checkbox)',
+  '    }',
+  '  }',
+  '',
+  '  return <List items={items} onClick={onClickList} />',
+  '}',
+  '',
+].join('\n')
+
+export const defaultCss = `ul {
+  --list-bg: linear-gradient(160deg, #d4dcec 0%, #c4cfe6 100%);
+  --list-border: #a5b4d8;
+  --item-bg: #b9bcc4;
+  --item-hover: #c5c8cf;
+  --item-text: #1f2a44;
+  --item-accent: #3658c8;
+  --check-ring: #6d86d1;
+
+  margin: 0;
+  padding: 14px;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+  max-width: 340px;
+  border-radius: 16px;
+  border: 1px solid var(--list-border);
+  background: var(--list-bg);
+  box-shadow:
+    0 14px 30px rgba(17, 27, 56, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.55);
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 40px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(54, 88, 200, 0.24);
+  background: var(--item-bg);
+  color: var(--item-text);
+  font-weight: 650;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    transform 130ms ease,
+    background-color 130ms ease,
+    border-color 130ms ease,
+    box-shadow 130ms ease;
+}
+
+li:hover {
+  transform: translateY(-1px);
+  background: var(--item-hover);
+  border-color: rgba(54, 88, 200, 0.34);
+  box-shadow: 0 8px 18px rgba(24, 40, 95, 0.16);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border-radius: 5px;
+  border: 1.5px solid #4a63b6;
+  background: #fff;
+  display: inline-grid;
+  place-items: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+input[type='checkbox']::after {
+  content: '';
+  width: 8px;
+  height: 4px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-right: 0;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 120ms ease;
+}
+
+input[type='checkbox']:checked {
+  background: linear-gradient(145deg, var(--item-accent), #345ee0);
+  border-color: var(--item-accent);
+}
+
+input[type='checkbox']:checked::after {
+  transform: rotate(-45deg) scale(1);
+}
+
+input[type='checkbox']:focus-visible {
+  outline: 2px solid var(--check-ring);
+  outline-offset: 2px;
+}
+`
diff --git a/src/index.html b/src/index.html
index ed5af10..d5a18c7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,39 +25,115 @@ <h1>
 
     <main class="app-grid">
       <section class="panel component-panel">
-        <div class="panel-header">
-          <h2>Component</h2>
-          <div class="controls">
-            <label>
-              Render mode
-              <select id="render-mode">
-                <option value="dom" selected>DOM (default)</option>
-                <option value="react">React</option>
-              </select>
-            </label>
-            <label class="toggle">
-              <input id="auto-render" type="checkbox" checked />
-              Auto render
-            </label>
-            <button class="render-button" id="render-button" type="button">Render</button>
+        <div class="panel-header panel-header--stack">
+          <div class="panel-header-row">
+            <h2>Component</h2>
+          </div>
+          <div class="panel-header-row panel-header-row--quick-actions">
+            <div class="controls controls--actions controls--quick-actions">
+              <button
+                class="icon-button"
+                id="copy-component"
+                type="button"
+                title="Copy component source"
+                aria-label="Copy component source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="9" y="9" width="10" height="10" rx="2"></rect>
+                  <path
+                    d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
+                  ></path>
+                </svg>
+              </button>
+              <button
+                class="icon-button"
+                id="clear-component"
+                type="button"
+                title="Clear component source"
+                aria-label="Clear component source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M4 7h16"></path>
+                  <path d="M10 11v6"></path>
+                  <path d="M14 11v6"></path>
+                  <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
+                  <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="panel-header-row panel-header-row--actions">
+            <div class="controls controls--actions">
+              <button class="render-button" id="render-button" type="button">
+                Render
+              </button>
+              <label class="toggle">
+                <input id="auto-render" type="checkbox" checked />
+                Auto render
+              </label>
+              <label>
+                <span class="sr-only">Render mode</span>
+                <select id="render-mode">
+                  <option value="dom" selected>DOM</option>
+                  <option value="react">React</option>
+                </select>
+              </label>
+            </div>
           </div>
         </div>
         <textarea id="jsx-editor" spellcheck="false"></textarea>
       </section>
 
       <section class="panel styles-panel">
-        <div class="panel-header">
-          <h2>Styles</h2>
-          <div class="controls">
-            <label>
-              Style mode
-              <select id="style-mode">
-                <option value="css" selected>Native CSS</option>
-                <option value="module">CSS Modules</option>
-                <option value="less">Less</option>
-                <option value="sass">Sass</option>
-              </select>
-            </label>
+        <div class="panel-header panel-header--stack">
+          <div class="panel-header-row">
+            <h2>Styles</h2>
+          </div>
+          <div class="panel-header-row panel-header-row--quick-actions">
+            <div class="controls controls--actions controls--quick-actions">
+              <button
+                class="icon-button"
+                id="copy-styles"
+                type="button"
+                title="Copy styles source"
+                aria-label="Copy styles source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="9" y="9" width="10" height="10" rx="2"></rect>
+                  <path
+                    d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
+                  ></path>
+                </svg>
+              </button>
+              <button
+                class="icon-button"
+                id="clear-styles"
+                type="button"
+                title="Clear styles source"
+                aria-label="Clear styles source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M4 7h16"></path>
+                  <path d="M10 11v6"></path>
+                  <path d="M14 11v6"></path>
+                  <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
+                  <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="panel-header-row panel-header-row--actions">
+            <div class="controls controls--actions">
+              <label>
+                <span class="sr-only">Style mode</span>
+                <select id="style-mode">
+                  <option value="css" selected>Native CSS</option>
+                  <option value="module">CSS Modules</option>
+                  <option value="less">Less</option>
+                  <option value="sass">Sass</option>
+                </select>
+              </label>
+            </div>
           </div>
         </div>
         <textarea id="css-editor" spellcheck="false"></textarea>
@@ -68,10 +144,22 @@ <h2>Styles</h2>
         <div class="panel-header">
           <h2>Preview</h2>
           <div class="controls">
+            <label class="color-control" for="preview-bg-color">
+              Background
+              <input id="preview-bg-color" type="color" value="#12141c" />
+            </label>
             <label class="toggle">
               <input id="shadow-toggle" type="checkbox" checked />
               ShadowRoot (open)
             </label>
+            <button
+              class="hint-icon shadow-hint"
+              type="button"
+              aria-label="About ShadowRoot mode"
+              data-tooltip="Turning ShadowRoot off renders the preview in light DOM, so @knighted/develop styles can affect preview output."
+            >
+              i
+            </button>
           </div>
         </div>
         <div class="preview-host" id="preview-host"></div>
diff --git a/src/styles.css b/src/styles.css
index 75fc4c8..0170403 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -14,6 +14,18 @@
   box-sizing: border-box;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -86,6 +98,7 @@ body {
 
 .preview-panel {
   grid-area: preview;
+  position: relative;
 }
 
 @media (max-width: 900px) {
@@ -119,6 +132,8 @@ body {
   padding: 16px 18px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(15, 17, 23, 0.9);
+  position: relative;
+  z-index: 2;
 }
 
 .panel-header h2 {
@@ -126,6 +141,26 @@ body {
   font-size: 1rem;
 }
 
+.panel-header--stack {
+  align-items: stretch;
+  gap: 10px;
+}
+
+.panel-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-header-row--actions {
+  justify-content: flex-start;
+}
+
+.panel-header-row--quick-actions {
+  justify-content: flex-start;
+}
+
 .controls {
   display: flex;
   gap: 12px;
@@ -135,6 +170,14 @@ body {
   flex-wrap: wrap;
 }
 
+.controls--actions {
+  justify-content: flex-start;
+}
+
+.controls--quick-actions {
+  gap: 10px;
+}
+
 .controls label {
   display: flex;
   flex-direction: column;
@@ -224,6 +267,8 @@ textarea:focus {
   padding: 18px;
   overflow: auto;
   position: relative;
+  background: #12141c;
+  z-index: 1;
 }
 
 .preview-host[data-style-compiling='true']::before {
@@ -262,17 +307,121 @@ textarea:focus {
   }
 }
 
-.toggle {
+.controls label.toggle {
   flex-direction: row;
   align-items: center;
   gap: 8px;
   cursor: pointer;
 }
 
+.controls label.color-control {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.controls input[type='color'] {
+  width: 34px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.controls input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.controls input[type='color']::-webkit-color-swatch {
+  border: none;
+  border-radius: 6px;
+}
+
 .toggle input {
   accent-color: #7a6bff;
 }
 
+.hint-icon {
+  display: inline-grid;
+  place-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  color: #dbe5ff;
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0.9;
+  background: transparent;
+}
+
+.shadow-hint {
+  position: relative;
+  cursor: help;
+  border-width: 1px;
+  padding: 0;
+}
+
+.shadow-hint::before,
+.shadow-hint::after {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease,
+    visibility 120ms ease;
+}
+
+.shadow-hint::before {
+  content: '';
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 4px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid rgba(9, 12, 20, 0.96);
+  transform: translateY(-4px);
+  z-index: 31;
+}
+
+.shadow-hint::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  width: min(320px, calc(100vw - 36px));
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(9, 12, 20, 0.96);
+  color: #dfe6f7;
+  font-size: 0.78rem;
+  font-weight: 500;
+  line-height: 1.35;
+  text-align: left;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
+  transform: translateY(-4px);
+  z-index: 30;
+}
+
+.shadow-hint:hover::before,
+.shadow-hint:hover::after,
+.shadow-hint:focus-visible::before,
+.shadow-hint:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.shadow-hint:focus-visible {
+  outline: 2px solid rgba(122, 107, 255, 0.9);
+  outline-offset: 2px;
+}
+
 .render-button {
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(122, 107, 255, 0.2);
@@ -287,6 +436,50 @@ textarea:focus {
   background: rgba(122, 107, 255, 0.35);
 }
 
+.icon-button {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.06);
+  color: #d8e0ef;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-grid;
+  place-content: center;
+}
+
+.icon-button:hover {
+  background: rgba(255, 255, 255, 0.13);
+}
+
+.icon-button:focus-visible {
+  outline: 2px solid rgba(122, 107, 255, 0.8);
+  outline-offset: 1px;
+}
+
+.icon-button svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (max-width: 900px) {
+  .panel-header-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .panel-header-row--actions,
+  .controls--actions {
+    justify-content: flex-start;
+  }
+}
+
 .app-footer {
   padding: 12px 24px 24px;
   color: #9aa3b2;