/* REVERSE DRAWING STROKE ON GRADIENT */
/* WITH "HNTS" NEXT STRAT-POINTS */



body {
	margin: 0px;
	/*background-color: hsla(130 100% 50% / 1);*/
	background-color: hsla(130 100% 100% / 1);
}
/* KEEP BACKGROUND SAME COLOR/WHITE IN FULLSCREEN_MODE */
body::backdrop {
  /*background-color: hsla(130 100% 50% / 1);*/
  /*background-color: hsla(130 100% 100% / 1);*/
}


/* CONTAINER-DIVS */
/* ======================= */
/* Z-INDEX STACKING ORDER FOLLOWS "NATURAL" PLACEMENT */

.template_wrapper {
	position: absolute;
  display: flex;
  align-items: top;
  justify-content: left;
  width: 100%; /* NEEDED FOR SAFARI/CHROME TO FIT-WIDTH-TO-WINDOW */
}
.completed_wrapper {
	position: absolute;
  display: flex;
  align-items: top;
  justify-content: left;
  width: 100%;
}
.drawing_wrapper {
	position: absolute;
  display: flex;
  align-items: top;
  justify-content: left;
  width: 100%;
}
.stencil_wrapper {
	position: absolute;
  display: flex;
  align-items: top;
  justify-content: left;
  width: 100%;
/* DEBUG ONLY // THIS CAUSES TRACE OFFSET */
	box-sizing: border-box;
	border: 0px dotted rgba(0 0 255 / 1);
}

/* CONTENT-SVG */
svg {
	box-sizing: border-box;
	border: 0px solid cyan; /* DEBUG ONLY */
	height: 100%; /* SCALE TO FULL HEIGHT OF WRAPPER */
}
/* BUTTON-SVG/NOT SCALING */
.btn {
	height: 30px;
	border: none;
}


.typebox rect {
	fill: none;
	stroke: rgba(255 0 0 / .5);
	stroke-width: 1px;
}
.typebox line {
	fill: none;
	stroke: rgba(255 255 0 / .5);
	stroke-width: 1px;
}
/* TEMPLATE TO COMPUTE CIRCLES ONLY */
.glyph {
	fill: none;
	stroke: rgba(0 0 0 / 0);																																				/* PATH NOT VISIBLE FOR REVERSE DRAWING */
	stroke-width: 150px;
	stroke-linecap: round; /* butt square round */
	stroke-linejoin: round; /* bevel miter round */
}


/* STENCIL/"TRACK" */
.lutpoints circle {
	stroke: rgba(255 0 0 / 0);
	stroke-width: 1px;
/* THIS SETS "TOLERANCE" (75-200) */
/* TBD // IMPLEMENT --VAR */
	r: 100px;
/* FILL NECESSARY FOR EVENT-LISTENER // "NONE" WILL NOT REGISTER */
	fill: transparent; 
}

/* (MOUSE ONLY) */
.lutpoints circle:hover {
	stroke: rgba(0 0 0 / .5);
	stroke-width: 2px;
	/* fill: rgba(0 0 255 / 0.25); */
}

.lutpoints .hotpoint {
	stroke: rgba(0 0 0 / 1);
	stroke-width: 2px;
	r: 100px;
	fill: transparent;
}


/* ======================= */
/* REVERSE "DRAWING" UN-COVERS "COMPLETEDPATH" GRADIENT */
.drawing {
	fill: none;
	stroke: hsla(0 0% 90% / 1);
	stroke-width: 152; /* +2PX FOR SPREAD */
	/*stroke-linecap: round;*/ 			/*butt square round*/																		        /* INIT AND RESET USING "SET_ATTRIBUTE" */
	stroke-linejoin: round; 	 /* bevel miter round */
	/*marker-end: none;*/																														                /* INIT AND RESET USING "SET_ATTRIBUTE" */
}

.completedpath {
	fill: none;
	stroke: url(#Gradient);																																					/* ONLY (SVG) URL-DEF WORKS ON SVG-STROKE */
	/*stroke: linear-gradient(to right, 
		hsla(180 100% 50% / 1) 0%, 
		hsla(60 100% 50% / 1) 50%, 
		hsla(300 100% 50% / 1) 100%);*/
	stroke-width: 148; /* -2PX TO UNDERCUT */
	stroke-linecap: round;			/*butt square round*/
	stroke-linejoin: round;		  /* bevel miter round */
}


/* ======================= */
			/* INTERFACE/BUTTON TEMP REMOVED */
/* TEXT */
#dis {
	position: absolute;
	left: 25px;
	top: 90%;
  width: 100px;
  border: none;
}
pre {
	font-size: 12px;
	line-height: 10%;
  width: 50px;
  color: rgba(0 0 0 / .5);
}