DirectorDebugHud {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: white;
	font-family: monospace;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.95 );

	.director-title {
		position: absolute;
		left: 24px;
		top: 24px;
		width: 620px;
		height: 28px;
		font-size: 18px;
		line-height: 24px;
		font-weight: 700;
		letter-spacing: 1px;
		margin-bottom: 7px;
		color: white;
	}

	.director-telemetry {
		position: absolute;
		left: 24px;
		width: 620px;
		font-size: 14px;
		font-weight: 600;
		line-height: 18px;
		white-space: pre;
		color: rgba( 255, 255, 255, 0.92 );
	}

	.basic {
		top: 66px;
	}

	.director-phase-value {
		position: absolute;
		left: 134px;
		top: 84px;
		width: 300px;
		font-size: 14px;
		font-weight: 800;
		line-height: 18px;
		white-space: nowrap;

		&.phase-initializing { color: rgba( 255, 255, 255, 0.7 ); }
		&.phase-relax { color: #58d7ff; }
		&.phase-buildup { color: #ffd84a; }
		&.phase-sustain { color: #ff4f4f; }
		&.phase-fade { color: #ff9b45; }
	}

	.advanced {
		top: 178px;
		display: none;

		&.visible {
			display: flex;
		}
	}

	.director-controls {
		position: absolute;
		bottom: 24px;
		left: 0;
		width: 100%;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.4px;
		text-align: center;
		color: rgba( 255, 255, 255, 0.58 );
	}
}