* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin: 0; padding: 0; display:flex; flex-direction:column; min-height:100vh; }
header { background:#222; color:#fff; padding:12px 16px; }
main { display:flex; gap:16px; padding:16px; flex:1; }
.editor, .preview { flex:1; display:flex; flex-direction:column; }
textarea { width:100%; height:60vh; font-family: monospace; font-size:13px; padding:8px; border:1px solid #ccc; border-radius:4px; }
.imgwrap { border:1px solid #ccc; border-radius:4px; padding:8px; background:#fff; display:flex; align-items:center; justify-content:center; min-height:60vh; }
img { max-width:100%; height:auto; }
.controls { margin-top:8px; display:flex; gap:8px; align-items:center; }
footer { padding:8px 16px; font-size:12px; color:#555; }
@media (max-width:900px) { main { flex-direction:column; } textarea { height:40vh; } .imgwrap { min-height:40vh; } }