:root{
  --bg:#0f0f10;
  --panel:#111213;
  --accent:#ffb84d;
  --muted:#9aa0a6;
  --safe:44px;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;background:var(--bg);color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#app{display:flex;flex-direction:column;gap:10px;padding:10px}
.controls{display:flex;flex-direction:column;gap:8px}
.filebtn{display:inline-grid;place-items:center;padding:10px;border-radius:10px;background:linear-gradient(180deg,#1b1b1c,#0f0f10);cursor:pointer;font-weight:600}
.filebtn input{display:none}
.row{display:flex;gap:8px}
.btn{flex:1;padding:10px;border-radius:10px;background:var(--accent);color:#000;font-weight:700;border:none}
.btn:disabled{opacity:0.5}
.sliders{display:grid;gap:6px;padding:6px;background:var(--panel);border-radius:10px}
.sliders label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:6px;padding:4px}
.preview{flex:1;display:flex;align-items:center;justify-content:center;min-height:220px}
canvas{max-width:100%;max-height:62vh;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.6);background:#141414}
@media (min-width:700px){
  #app{flex-direction:row;padding:16px}
  .controls{width:320px}
  .preview{flex:1}
}