html,body { height:100%; margin:0; font-family: Inter, Roboto, system-ui, sans-serif; background: linear-gradient(180deg,#0b0320,#1e0033); color:#fff; }
#app { display:flex; height:100vh; gap:12px; padding:12px; box-sizing:border-box; }
#canvas-wrap { flex:1; border-radius:12px; overflow:hidden; box-shadow: 0 6px 30px rgba(0,0,0,0.6); background:linear-gradient(180deg,#000000, #120018); }
canvas { display:block; width:100%; height:100%; }
#ui { width:420px; max-width:40%; min-width:320px; padding:14px; box-sizing:border-box; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:12px; }
h1 { margin:0 0 8px 0; font-size:18px; }
label { display:block; font-size:13px; margin-top:8px; }
input[type="number"], input[type="range"], select, button, textarea { width:100%; box-sizing:border-box; margin-top:6px; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:transparent; color:#fff; }
.row { display:flex; gap:8px; }
.row > * { flex:1; }
.controls { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.controls button { flex:1 0 30%; }
.history { max-height:200px; overflow:auto; margin-top:8px; font-size:13px; background:rgba(255,255,255,0.02); padding:8px; border-radius:8px; }
.muted { color:rgba(255,255,255,0.6); font-size:13px; }
footer { margin-top:10px; font-size:12px; color:rgba(255,255,255,0.6); }
.small { font-size:13px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:8px; }