/* procedural-art.css - scoped styles for the creative demo */
.pe-art-wrap{ display:flex; gap:18px; align-items:flex-start; margin-top:1rem }
.pe-art-canvas{ flex:1; background:var(--bg); border-radius:8px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center }
.pe-art-controls{ width:300px; background:var(--surface-2); padding:12px; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.06); color:var(--text); border:1px solid var(--border) }
.pe-art-controls label{ display:block; margin-bottom:10px; font-size:.95rem }
.pe-art-controls input[type=range]{ width:100% }
.pe-art-actions{ display:flex; gap:8px; margin-top:8px }
.pe-art-controls .muted{ color:var(--text-3); font-size:.85rem; margin-top:8px }
#artCanvas{ width:100%; height:auto; max-height:600px; display:block }

@media (max-width:720px){ .pe-art-wrap{ flex-direction:column } .pe-art-controls{ width:100% } }