html,body{
  margin:0;
  height:100%;
  background:#000000;
  color:#00ff88;
  font:12px 'Courier New', ui-monospace,monospace;
}

#ui{
  position:fixed;
  top:16px;
  left:16px;
  right:16px;
  z-index:100;
  backdrop-filter:blur(8px);
  display:flex;
  gap:12px;
  align-items:center;
}

select{
  padding:12px 12px;
  border:unset;
  background:rgba(0,0,0,1);
  color:#00ff88;
  cursor:pointer;
  font-family:'Courier New',monospace;
  font-size:12px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(0,255,136,0.1);
  outline:none;
}

select:hover{
  background:rgba(0,0,0,0.95);
}

select:focus{
  border-color:#00ff88;
}

select option{
  background:#000000;
  color:#00ff88;
  padding:4px;
}

canvas{
  display:block;
  width:100vw;
  height:100vh;
}

input[type="range"]{
  flex:1;
  height:8px;
  background:rgba(0,0,0,0.9);
  border:1px solid rgba(0,255,136,0.3);
  border-radius:4px;
  outline:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(0,255,136,0.1);
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  background:#00ff88;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,255,136,0.3), 0 0 0 2px rgba(0,0,0,0.8);
  transition:all 0.2s ease;
}

input[type="range"]::-moz-range-thumb{
  width:20px;
  height:20px;
  background:#00ff88;
  border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(0,0,0,0.8);
  box-shadow:0 2px 8px rgba(0,255,136,0.3);
  transition:all 0.2s ease;
}

input[type="range"]:hover{
  border-color:#00ff88;
  box-shadow:0 4px 16px rgba(0,255,136,0.2), inset 0 1px 0 rgba(0,255,136,0.2);
}

input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow:0 4px 16px rgba(0,255,136,0.5), 0 0 0 2px rgba(0,0,0,0.8);
  transform:scale(1.1);
}

input[type="range"]:hover::-moz-range-thumb{
  box-shadow:0 4px 16px rgba(0,255,136,0.5);
  transform:scale(1.1);
}