:root { color-scheme: dark; }
  body { font-family: system-ui, Segoe UI, Roboto, sans-serif; margin: 20px; background:#0b0b0f; color:#e8e8ef; }
h1,h2,h3 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 4px;
}
h2,h3 {
	letter-spacing: 1px;
	text-align: left;
    margin-bottom: 10px;
}

h1 a { text-decoration:none; }
h1 a:hover { text-decoration:underline; }

.app  {
    width: 100%;
    padding-bottom: 100px;
}

  .row { display:flex; gap:12px;  flex-wrap: wrap; align-items: anchor-center;}
	.master .row {  flex-wrap: nowrap;}
  .panel {position: relative; border:1px solid #2b2b35; border-radius:12px; padding:10px; margin-bottom:14px; background:#121219; }
  .panel h2 { font-size:15px; margin:0 0 10px; font-weight:600; color:#cfd6ff;    text-transform: uppercase; }
  label { font-size:12px; opacity:.9; display:flex; align-items:center; gap:8px; }
  input[type="range"] { width: 220px; }
  input[type="number"] { width: 40px; }
  select, input, button { background:#1a1a23; color:#e8e8ef; border:1px solid #2b2b35; border-radius:8px; padding:6px 8px; }
  button { cursor:pointer; }
  .grid { display:grid; grid-template-columns: 1fr; gap:8px; }
  .osc { border:1px solid #2b2b35; border-radius:10px; padding:5px; background:#0f0f16; width: 125px; position:relative; height:110px;}
  .osc h3 { margin:0 0 8px; font-size:13px; color:#b9c2ff; display:flex; justify-content:space-between; align-items:center; }
  .documentation { opacity:.75; font-size:12px; }
  .spacer { flex:1 1 auto; }
  .valueTag { font-variant-numeric: tabular-nums; opacity:.85; }
  .subhead { font-size:12px; text-transform:uppercase;
    flex: 0 0 100%;
}
  .warn { color:#ffc07a; font-size:12px; }
  
  
  .group-settings  span {
    white-space: nowrap;
}
  
  
  .group-head { align-items:center; gap:10px;    position: relative; }
  .group-title {
	  font-size: 13px;
    font-weight: 600;
    color: #cfd6ff;
    margin: 0 0 0 10px;
    width: 80px;
    position: relative;
    top: -7px;
    height: 10px;
    left: 0;
}
  .delGroup { margin-left:auto; }
  .divider { border-top: 1px solid #232330; margin: 10px 0; }
  .dim { opacity: .5; pointer-events: none; }
  
  .det-range,.num-osc{
    padding: 3px 4px !important;
}
  .col-1 span {
	  display:inline-block;
	  width:30px;
  }
  .col-2 span{
    display: inline-block;
    width: 64px;
    margin-left: 20px;
}

#createGroupBtn{
    font-size:22px;
	height:45px;
}
  /* .amp { display: none; } */
  #groupsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
  .group-panel {
	  margin:0;
    overflow: hidden;
    height: 10000px;
    transition: all .5s;
    max-height: fit-content;
	    flex: 1 0 auto;
}
  .panel.osciliscope:has(.accordion input[type="checkbox"]:checked),
  .panel.midi:has(.accordion input[type="checkbox"]:checked) {
    height:50px;
}
  .group-panel:has(.accordion input[type="checkbox"]:checked) {
    height: 170px;
}
  .accordion:has(input[type="checkbox"]:checked):before {
    /* content: "SHOW OSC"; */
    content: " ";
    background: url(icons/maximize.svg);
    background-size: 28px 28px;
    display: inline-block;
    width: 28px;
    height: 29px;
    background-repeat: no-repeat;
}
  label.accordion:before {
    /* content: "HIDE OSC"; */
    content: " ";
    background: url(icons/minimize.svg);
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}
.accordion input { display:none; }
.accordion:hover { cursor:pointer; text-decoration:underline; }


label.accordion {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #313141;
    border-radius: 6px;
    overflow: hidden;
}


.midiGroup {
    position: relative;
    top: -7px;
    left: -10px;
}
.midiChSel{
    padding: 3px;
    width: 85px;
}
button.createOSC {
    padding: 4px 4px;
    margin-left: 10px;
}


 /* knob css */


label:has(.knob-wrap) {
	font-size: 9px;
    opacity: .9;
    align-items: center;
    gap: 8px;
    display: inline-block;
    margin: 0 8px;
    width: 50px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #5d646c;
    position: relative;
	}
/* --- Knob styles (shared) --- */
.knob-wrap {
    display: inline-flex;
    gap: .75rem;
    align-items: center;
    position: relative;
    /* left: -41px; */
    top: 7px;
}
.knob-wrap:has(input:disabled) {
    opacity: .4;
}
.knob-container {
  position: relative;
    width: 50px;
    height: 50px;
    --ring-width: 22px;
    --ring-space: 0px;
  --accent: #4aa3ff;
  user-select: none;
}
.knob-container .ring,
.knob-container .ring-fill,
.knob-container .space,
.knob-container .knob {
  position: absolute;
  border-radius: 50%;
  width: 100%; height: 100%;
}
.knob-container .ring {
  background: conic-gradient(#545C64 140deg, rgba(255,255,255,0.0) 0 220deg, #545C64 0deg);
}
.knob-container .ring-fill {
  background: conic-gradient(var(--accent) 140deg, rgba(255,255,255,0.0) 0 360deg, var(--accent) 0deg);
}
.knob-container .space {
  background-color: #32383F;
  width: calc(100% - var(--ring-width));
  height: calc(100% - var(--ring-width));
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.knob-container .knob {
  background: linear-gradient(#6D757F, #596067);
  width: calc(100% - (var(--ring-width) + var(--ring-space)));
  height: calc(100% - (var(--ring-width) + var(--ring-space)));
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
.knob-indicator-container {
  width: 100%; height: 100%;
  display: flex; justify-content: center;
  transform: rotate(140deg);
  /* important for touch/drag */
  touch-action: none;
}
.knob-indicator {
  background: transparent;
      width: 3%;
    height: 25%;
  margin-top: 4%;
}
span.valueTag {
    position: relative;
    color: #fff;
    top: -30px;
    text-align: center;
    pointer-events: none;
    display: inline-block;
    width: 25px;
    font-size: 10px;
    letter-spacing: 1px;
	}
select, input, button {
    background: #292932;
    color: #e8e8ef;
    border: 1px solid #2b2b35;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    text-transform: uppercase;
}

#distType{
    background: #292932;
    color: #e8e8ef;
    border: 1px solid #2b2b35;
    border-radius: 4px;
    text-transform: uppercase;
	
	padding: 0px 0px;
    position: relative;
    left: 4px;
    top: 21px;
    font-size: 10px;
}
button:hover {
	cursor:pointer;
	background-color:#4d535a;
}
button:active {
	cursor:pointer;
	background-color:#9d9d9d;
	color:#0b0b0f;
}

#syncLfosBtn{
    font-size: 10px;
    margin-top: 5px;
}
select.waveform[data-value="sine"]    { background-image: url('icons/sine-wave.svg'); }
select.waveform[data-value="square"]  { background-image: url('icons/square-wave.svg'); }
select.waveform[data-value="sawtooth"]{ background-image: url('icons/sawtooth-wave.svg'); }
select.waveform[data-value="triangle"]{ background-image: url('icons/triangle-wave.svg'); }

/*
select.waveform[data-value="sine"]:hover    { background-image: url('icons/sine-wave-dark.svg'); }
select.waveform[data-value="square"]:hover  { background-image: url('icons/square-wave-dark.svg'); }
select.waveform[data-value="sawtooth"]:hover{ background-image: url('icons/sawtooth-wave-dark.svg'); }
select.waveform[data-value="triangle"]:hover{ background-image: url('icons/triangle-wave-dark.svg'); }

*/
select.waveform {
	grid-column: span 2 / span 2;
    grid-row-start: 2;
  appearance: none;
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox      */
  background-color:transparent;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: 0px 1px;
    padding: 0px 5px;
    border: none;
    font-size: 0px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    justify-self: center;
	opacity: .6;
}
select.waveform option {
    color: #ffffff;
    font-size: 10px;
    text-transform: uppercase;
    padding-left: 0;
}

select.waveform:hover{
	cursor:pointer;
	background-color:#5e646c;
	    opacity: 1;
}

/* Old IE/Legacy Edge */
select.no-arrow::-ms-expand {
  display: none;
}

select.waveform#defType {
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

button.delGroup,
button.delBtn {
    background-image: url(icons/close-button.svg);
    padding: 0;
    font-size: 0px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color: #181822;
    border: none;
}

button.delGroup {
    position: absolute;
    top: -5px;
    right: -5px;
}
button.delGroup:hover,
button.delBtn:hover {
	cursor: pointer;
	background-color:#000;
}

.osc .row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1fr, 30px);
    gap: 0px;
    width: 100%;
    place-items: center;
    margin-top: 1px;
    text-align: center;
}
.osc h3 {
	margin: 0;
    font-size: 13px;
    color: #b9c2ff;
    align-items: center;
    display: inline-block;
    float: right;
    position: absolute;
    top: -4px;
    right: 4px;
}
.osc label.wave {
    width: 30px;
    height: 30px;
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
label.amp,label.detune {
    margin: 3px 5px;
}

.osc label {
    font-size: 7px;
    letter-spacing: 3px;
    align-items: center;
    gap: 8px;
    display: inline-block;
    width: 50px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: transparent;
	position:relative
}
.osc label:hover {
    color: grey;
}

.osc label span {
    width: 100%;
    display: inline-block;
    padding-left: 2px;
}
.osc .knob-wrap {
    display: inline-flex;
    gap: .75rem;
    align-items: center;
    position: relative;
    top: 5;
}

.group-panel .grid { 
  /*  margin-top: -40px; */
  
    grid-template-columns: repeat(auto-fill, 140px);
    gap: 10px;
    justify-content: start;
	grid-column: span 2 / span 2;
}

.row.groupMaster  {  
	align-items: flex-start;
    gap: 0px;
    border: 1px solid #2b2b35;
    border-radius: 12px;
    padding: 10px;
    background: #200202;
    height: 100px;
}
.muteLabel {
    display: inline-block;
    padding: 0 3px;
    border-radius: 4px;
    height: 15px;
    font-size: 10px;
    margin-top: 3px;

	&:hover {
		cursor:pointer;
		background: #545a61;
		color:#fff;
	} 
	&:has(> input:checked){
		background: #dfc405;
		color:#000;
	} 
	input { display:none; } 
}


.oscGroupGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    gap: 10px;
    justify-content: start;
}
.groupMaster { grid-column: span 2 / span 2; }
.tremelo { grid-column: span 2 / span 2; }
.vibrato { grid-column: span 2 / span 2; }



.row.modulation{
    /* position: relative; */
    top: -78px;
    left: 150px;
    width: fit-content;
	height: 110px;
	border: 1px solid #b0b0cd;
    border-radius: 12px;
    padding: 10px;
    background: #010130;
    height: 100px;
    margin: 0px;
	}
	.row.modulation label {
		margin: -20px 12px 3px 1px;
	}
.row.modPanel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
}
.subhead.modPanelTitle {
    position: relative;
    top: -16px;
	    font-size: 10px;

}
.subhead.modPanelTitle label {
    display: inline-block;
}
.subhead.modPanelTitle .lfoTypeLabel {
    position: relative;
    top: -4px;
    left: 13px;
} 
.subhead.modPanelTitle select.lfoDivSelect {
    padding: 0px 0px;
    position: relative;
    left: 4px;
    top: 0px; 
    font-size: 10px;
    border-radius: 4px;
}

label.lfoQuantLabel input { 
	position: relative;
    top: 2px;
	vertical-align:bottom; 
}
.row.modPanelRow {
    gap: 24px;
}
.row.modulation label.pwLabel {
    position: relative;
    top: -2px;
    margin: -20px 1px 3px 1px;
}
.divCol {
    display: flex;
    flex-direction: column;
}

.divCol label {
    display: inline-block;
	font-size: 10px;
    margin-top: 0 !important;
}

label.lfoQuantLabel {
    text-align: right;
    margin-top: 14px !important;
}
.sAndHModeLabel { display: none; }

label.beat-track { display:none; }


label.beat-division {
    position: relative;
    left: 13px;
}
.beatDivSelect {
    padding: 0px 0px;
    font-size: 10px;
    border-radius: 4px;
	width: 45px;
}


/* optional: hide original range but keep it accessible/focusable */
.detune-range,
input[type="range"][data-knob],
.mod-bypass { display:none !important; }

.master .row .panel {
    height: 110px;
	flex: 0 0 auto; 
}
.master .row .panel.osciliscope {
	  flex: 1 1 auto;   /* grow to fill */
  min-width: 0;     /* important so it can actually shrink if content is wide */

}
.master .row .panel.osciliscope canvas 
{
    width: calc(100vw - 833px);
    height: 110px;
    margin-right: 0;
}

/* Panel #3: take all remaining space */
.row .panel.flex-fill {
}


.master-volume{
    top: -13px;
    color: #fff ! important;
}
.master label{
    color: #fff ! important;
}

#masterFreqDisplay {
    width: 100%;
    display: block;
    margin-top: 6px;
}

/* The switch - the box around the slider */
.switch {
  position: absolute;
  display: inline-block;
    width: 18px;
    height: 18px;
    top: 4px;
    right: 4px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2b2b35;
  -webkit-transition: .4s;
  transition: .4s;
}

/*
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 14px;
    background-color: #5a6269;
    -webkit-transition: .4s;
    transition: .4s;
}
*/
input:checked + .slider {
  background-color: #4595e8;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4595e8;
}
/*
input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateY(12px);
}
*/

/* Rounded sliders */
.slider.round {
  border-radius: 26px;
}

.slider.round:before {
  border-radius: 50%;
}
.range  { display:none; }
.range.show  { display:inline; }
 
.midi h2, .midi label, .midi .row {
    display: inline-block;
}

.transport { min-width:100px; }
.transport button {
    display: block;
	width:100%;
	margin-bottom:10px;
}  
.transport .instructions {
    display: inline-block;
    text-transform: uppercase;
    width: 50px;
    padding-left: initial;
    margin-top: initial;
    font-size: 10px;
}
.transport .instructions  .switch{
    position: relative;
    top: initial;
    left: initial;
}
.utilities,
.documentation { 
	margin-bottom:0;
	max-height:0px; 
	opacity:0;
	overflow:hidden;
	padding: 0px 10px; 
	transition: all .5s;
}  

body:has(input#showUtilities[type="checkbox"]:checked) .utilities,
body:has(input#showInstructions[type="checkbox"]:checked) .documentation { 
	margin-bottom:14px;
	max-height:500px;
	opacity:1;
	padding: 10px 10px;  
}
.documentation em { text-transform:uppercase; font-weight:bold;  } 

#midiStatus { font-size:12px; }

.effect {
}

/* SEQUENCER STYLES */

.sequences-col {
	width:-webkit-fill-available;
	
	.seq-list{
		padding: 5px;
		min-height: 45px;
		        background: #5d646c33;
        border: 1px solid #5d646c;
		border-radius: 5px;	
		display: flex;
    flex-wrap: wrap;
	}
	
}
.timeline-col {
	width: -webkit-fill-available;
	 
	 
	 label { display:inline-block; margin-left:15px; }
	.seq-timeline  {
		padding: 5px;
		min-height: 45px;
		background: #4595e824;
        border: 1px solid #4595e8;
		border-radius: 5px;
	
		
		
	}
}

.seq-tag {
    border: 1px solid black;
    border-radius: 5px;
    padding: 0px 32px 4px 2px;
    background: #4e555c;
    margin: 4px;
white-space: nowrap;
	
	input {
		margin-right: 3px;
	}
	input.seq-name { width: 100px; }
	input.seq-morph { width: 35px; }
	input.seq-name { width: 100px; }
	button.seq-del, button.seq-step-del { width: 27px; }
	button.seq-tag-play {
    	height: 28px;
    	position: relative;
    	top: 2px;
    	margin: 0 3px 0 0;
	}
}

.seq-step {
	width:fit-content;
    border: 1px solid black;
    border-radius: 5px;
    padding: 2px;
    background: #4e555c;
    margin: 4px;
    float: left;

	span.seq-step-label {
		width: fit-content;
		display: inline-block;
		background: #292932;
		color: #e8e8ef;
		border: 1px solid #2b2b35;
		border-radius: 8px;
		padding: 6px 8px;
		font-size: 12px;
		text-transform: uppercase;
		margin-right: 3px;
	}
}
/*
.seq-step-current {
  outline: 2px solid var(--accent);
  border-radius: 4px;
     background: url(images/snapshot-bg.png) no-repeat;
    background-position-x: 0px;
}
*/

/* Current step: show the progress texture */
.seq-step-current{
	outline: 2px solid var(--accent);
	border-radius: 4px;

	/* replace the solid color */
	background-color: transparent;

	/* your green rectangle image */
     background-image: url(images/snapshot-bg.png);
	background-repeat: no-repeat;

	/* important: if your green image is EXACTLY the step width, you won't see motion.
	   Make it wider than the element so sliding is visible. */
	background-size: 200% 100%; /* try 200%, 300%, etc */

	/* we'll animate X in JS */
	background-position: 0px 0px;
}



#startBtn.is-active,
#seqPlayBtn.is-active{ background:green; }
#stopBtn.is-active,
#seqStopBtn.is-active{ background:red; }
#seqPauseBtn.is-active{ background:yellow; }
.seq-tag:hover, .seq-step:hover { cursor:grab; }
.grips em {
    display: inline-block;
    height: 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width: 4px;
    /* vertical-align: middle; */
    float: right;
    position: relative;
    top: 8px;
    right: -27px;
}

.grips em:before {
    display: inline-block;
    content: ' ';
    height: 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width: 4px;
    position: relative;
    top: -2px;
    right: 11px;
}

.row.documentation.panel {
    background: #2e2e2e;
    font-size: 16px;
	
	h3 {
    font-size: 16px;
}
}

/* oscope settings */

.osciliscope  {
	fieldset{
		border: none;
    display: flex;
        padding: 0;
	}
	input[type="range"] {
    width: 60px;
}
}

@media only screen and (max-width: 768px){
	.row.modulation {
		position: initial;
		margin: 0px;
	/*	width: calc(100% - 22px); */
	}
	.group-panel:has(.accordion input[type="checkbox"]:checked) {
		height: 264px;
	}

	label:has(.knob-wrap) {
		margin: 0 5px;
	}
}
@media only screen and (max-width: 720px){ 
	.group-title {
		flex: 0 0 90px !important;
		width: 90px;
	}
}

@media only screen and (max-width: 628px){ 
	.group-panel .grid {
		gap: 10px;
		justify-content: center;
	}
	.osc {
		padding: 5px;
	}
	label.amp { margin: 20px 5px 10px 0px; }
	label.detune { margin: 20px 0px 10px 5px;}
	
	.midi{ display: none; }
}

.like-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

#likeBtn {
    background: #222;
    color: #f5d76e;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
}

#likeBtn.liked {
    background: #f5d76e;
    color: #222;
}
header {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px 0;
}

body:has(#startBtn.is-active) #createGroupBtn { border: 2px solid green; } 

#fps{ display:none; }
h1{ margin:7px 0 9px 0 !important; }
#contact a{ 
    text-transform: uppercase;
    font-size: 16px;
    color: #4595e8;
    text-decoration: none;
 }
 
 body:not(#startBtn.is-active) .docs { 
    .slider { background-color: #4dff00; }
    .slider:before { background-color: #163216; }
	 input:checked + .slider {
		background-color: #4595e8;
	}
 }

 /*
 .group-panel[data-group-id="2"]  {
  background: linear-gradient(300deg,deepskyblue,darkviolet,blue);
  background-size: 180% 180%;
  animation: gradient-animation 3s ease infinite;
}


*/
.group-panel {
  --gHue: 220;

	--gAmp: 0;
	--vizStrength: 1; /* optional global override */
  --gSpeed: 3s;

  background: linear-gradient(300deg,
    hsl(var(--gHue) 90% calc(35% + var(--gAmp) * 25%)),
    hsl(calc(var(--gHue) + 60) 90% calc(30% + var(--gAmp) * 25%)),
    hsl(calc(var(--gHue) + 120) 90% calc(25% + var(--gAmp) * 25%))
  );

  background-size: 180% 180%;
  animation: gradient-animation var(--gSpeed) ease infinite;

  /* optional: extra “energy” glow 
  filter: saturate(calc(1 + var(--gAmp) * 1.5)) brightness(calc(1 + var(--gAmp) * 0.6));*/
  
	filter:
		saturate(calc(1 + var(--gAmp) * 1.5 * var(--vizStrength)))
		brightness(calc(1 + var(--gAmp) * 0.6 * var(--vizStrength)));
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* VIZ OFF: remove animated gradients and any reactive look */
body.viz-off .group-panel {
	animation: none !important;
	filter: none !important;

	/* kill the gradient */
	background-image: none !important;
	background: rgba(255,255,255,0.03) !important; /* or whatever neutral panel bg */
}


.group-settings.grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
}  

.osc-groups {
    margin-right: 4px;

	.panel{
		height: 68px;
	}
}
.visualizer {
    margin-left: 4px;
	
	.switch {
		top: 4px;
		left: 4px;
	}
}

.sequences-col h3{
    display: inline-block;
    margin-bottom: 0px;
    position: relative;
    top: -6px;
    left: 4px;
}

.sequencer { 
	max-height:500px; 
	overflow:hidden; 
	transition: all .4s; 

	&:has(.accordion input[type="checkbox"]:checked) {
		max-height: 23px;
	}
}

.seq-list {
    margin-top: 5px;
}


/*  responsive fixes



.panel {
    padding: 8px;
    margin-bottom: 8px;
}

.row {
    gap: 8px;
}




*/