:root{
  --bg:#0f1115;
  --panel:#121318;
  --muted:#9aa0a6;
  --accent:#ff6b6b;
  --surface:#16171b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:#e6eef3;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; -webkit-font-smoothing:antialiased}
main{display:flex;height:100vh;gap:12px;padding:12px}
#controls{width:320px;max-width:40%;background:linear-gradient(180deg,var(--panel),#0c0d10);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
#canvasWrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;border-radius:12px;overflow:hidden;background:var(--surface)}
canvas{max-width:100%;max-height:100%;display:block;background:#000;width:100%;height:100%;object-fit:cover}
.row{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:8px;background:#1a1b20;border:1px solid rgba(255,255,255,0.03);color:#e6eef3;cursor:pointer;position:relative;overflow:hidden}
.btn input[type=file]{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;cursor:pointer}
.primary{background:linear-gradient(180deg,var(--accent),#ff4b4b);color:#0a0a0a}
label{font-size:13px;color:var(--muted)}
input[type=range]{flex:1}
#controls input[type=number]{width:80px;padding:8px;border-radius:8px;border:0;background:#101214;color:#e6eef3}
select{flex:1;padding:8px;border-radius:8px;border:0;background:#101214;color:#e6eef3}
#overlayHint{position:absolute;bottom:10px;left:10px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,0.45);font-size:12px;color:var(--muted)}
@media (max-width:700px){
  main{padding:10px;gap:8px}
  #controls{width:46%;max-width:46%}
}