:root {
  --ptpian-control-toggle-color: #FFA500;
  --ptpian-control-select-color: #FFA500;
  --ptpian-txt-piano-color: #FFA500;
  --ptpian-mark-bg-color: #00FFFF;
  --ptpian-mark-text-color: #555555;
  --ptpian-theme-bg: url('../theme/default-theme.png');
  --ptpian-keylight-color : #00FFFF;
  --ptpian-mark-bg-color: #ffe082;
}

.ptpiano-wrapper{
		background: 
		linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 42%, var(--ptpian-control-bg-color));		
		background-blend-mode: overlay;
	
}
.switch input:checked+.slider {
    background-color: var(--ptpian-control-toggle-color);
}

.chord-option select {
	color: var(--ptpian-control-select-color);
}

.reverb-box select {
	color: var(--ptpian-control-select-color);
}

#songPopup select {
	color: var(--ptpian-control-select-color);
}

select option {
	color: var(--ptpian-control-select-color);
}

.piano-keys .key .note-label {
  color: var(--ptpian-txt-piano-color);
}

.piano-keys .key.white {
  position: relative;
  background: linear-gradient(to bottom, #fff, #eee);
  overflow: hidden;  
}

.piano-keys .key.white.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ptpian-mark-bg-color), #000); 
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
	
.piano-keys .key.black {
  position: relative;
  background: linear-gradient(to bottom, #333, #000);
  overflow: hidden;  
  z-index: 2; /* Ensures black keys are visually on top */
}

.piano-keys .key.black.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ptpian-mark-bg-color), #000); 
  opacity: 0.4;
  z-index: 3;
  pointer-events: none;
}


.columnboxpiano {
  background-image: var(--ptpian-theme-bg);
  background-repeat: repeat;
}

.hidden {
  display: none !important;
}

.key.glow {
  box-shadow: 0 5px 25px 8px var(--ptpian-keylight-color);
  border-radius: 6px;
}

.key.guide {
    background: orange !important;
    box-shadow: 0 0 15px orange;
}