body {
  font-family: system-ui, Arial;
  padding: 20px;
  max-width: 980px;
  margin: auto;
}
h1 { margin-bottom: 6px; }
.panel { display: flex; gap: 18px; flex-wrap: wrap; }
.controls { flex: 1; min-width: 300px; }
.preview { flex: 1; min-width: 300px; }
label { display: block; margin-top: 10px; font-weight: 600; }
input[type=range] { width: 100%; }
textarea { width: 100%; height: 130px; padding: 8px; border-radius: 6px; }
button { margin-top: 12px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.small { font-size: 0.9rem; color: #444; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
pre { background: #f4f4f4; padding: 8px; border-radius: 6px; overflow-x: auto; }