.sgt-wrapper {
    display: flex;
    gap: 30px;
    width:100%;
    font-family: Arial, sans-serif;
}

.preview-preset-code-wrap{
width: 40%;
}
.sgt-preview {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    background: #ddd;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.sgt-controls {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 5px;
     text-align: left;
}

.sgt-controls label{font-size:14px;}

#sgt-angle-value{font-size:14px;}

.sgt-stop {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
	margin-bottom: 10px;
}

.sgt-stop button{
	
	margin-top: 10px;
  padding: 5px 5px;
  border: none;
  background: #eaeaea;
  color: #7d7d7d;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.sgt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sgt-directions {
    display: flex;
    gap: 5px;
}

.sgt-directions button {
    flex: 1;
    padding: 5px;
    cursor: pointer;
    padding: 3px;
  font-size: 12px;
}

#sgt-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

#sgt-presets div {
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
}

textarea {
    height: 120px;
    font-family: monospace;
}

input[type="range"] {
    width: 100%;
    cursor: pointer;
}

#sgt-presets div {
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#sgt-presets div:hover {
    transform: scale(1.05);
}

#sgt-add {
padding: 5px!important;
  font-size: 12px!important;
}

#sgt-copy{
padding: 5px!important;
  font-size: 12px!important;
}

.section-heading{font-size:20px;}