:root { --b:#e5e7eb; }
  body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
  .bar { display:flex; gap:8px; align-items:center; padding:10px 12px; background:#f7f7f7; border-bottom:1px solid var(--b); position:sticky; top:0; z-index:1;}
  .bar select, .bar button, .bar label { font:inherit; }
  .stack { display:flex; flex-direction:column; gap:12px; padding:12px; }
  .pane { border:1px solid var(--b); border-radius:10px; background:#fff; }
  .pane .title { padding:8px 10px; border-bottom:1px solid var(--b); background:#fbfbfb; font-size:14px; font-weight:600; }
  .pane .body { padding:12px; }

  /* top editor */
  #editor { min-height:40vh; outline:none; }
  #editor img { max-width:100%; height:auto; }

  /* bottom preview */
  .preview { overflow:auto; }
  pre { margin:0; }
  pre code { display:block; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95em; }

  .hint { margin-left:auto; color:#666; font-size:12px; }