:root{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#0b0b0f;
  color:#eaeaea;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
#app{height:100%;display:flex;flex-direction:column;}

.header{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.40);
}
.brand{font-weight:700;}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.control{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
}
input[type="range"],select{accent-color:#ffffff;}
button{
  padding:6px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#eaeaea;cursor:pointer;
}
button:hover{background:rgba(255,255,255,0.12);}

.canvasWrap{flex:1;}
canvas{width:100%;height:100%;display:block;touch-action:none;}