/** reset.css **/
		article, aside, audio, command, datagrid, details, dialog, embed,
		figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
		video, wbr {
			display: block;
		}

		bdi, figcaption, keygen, mark, meter, progress, rp, rt, ruby, time {
			display: inline;
		}

		acronym, applet, big, center, dir, font, frame, frameset, noframes, s,
		strike, tt, u, xmp {
			display: none;
		}

		a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
		canvas, caption, cite, code, col, colgroup, command, datalist, dd, del,
		details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
		h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img,
		input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
		noscript, object, ol, optgroup, option, output, p, param, pre, progress,
		q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup,
		table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
			background: transparent;
			border: 0;
			font-size: 100%;
			font: inherit;
			margin: 0;
			outline: none;
			padding: 0;
			text-align: left;
			text-decoration: none;
			z-index: 1;
		}

		ol, ul {
			list-style: none;
		}

		blockquote, q {
			quotes: none;

		}

		blockquote:before, blockquote:after, q:before, q:after {
			content: '';
			content: none;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/** END reset.css **/
		
		:root {
			&:not(:has(.btn-switch input[type="checkbox"]:checked)) {
				--scaleVis: grid;
				--contextVis: none;
			}
			&:has(.btn-switch input[type="checkbox"]:checked) {
				--scaleVis: none;
				--contextVis: block;
			}
			--h1-weight: 400;
			--h2-weight: 400;
			--h3-weight: 400;
			--h4-weight: 400;
			--h5-weight: 400;
			--h6-weight: 400;
			--p-weight: 400;
			--small-weight: 400;
		}
		html {
		}
		body {
			font-family: "Roboto", serif;
			font-weight: 400;
		}
		/** BEGIN form **/
		.form-container {
			padding: 2.5rem;
			box-shadow: 0 1.25rem 1.875rem -0.075rem rgba(0,0,0,0.1);
			border: 0.0625rem solid #EAEAEA;
			min-width: 32rem; /* this is hacky; min-width should be auto-calc'd */
		}
		label {
			font-size: 0.875rem;
			margin-bottom: 0.25rem;
			display: block;
		}
		input, textarea, .select {
			font-size: 1rem;
			border: 0.0625rem solid #6B6B6E;
			box-sizing: border-box;
			padding: 0.375rem;
			width: 100%;
			line-height: 1.25rem;
			margin-bottom: 0.75rem;
		}
		select {
			width: inherit;
		}
		textarea {
			width: 25rem;
			height: 10rem;
		}
		::placeholder {
			color: #C8C8C8;
			opacity: 1;
		}
		fieldset {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
		legend {
			margin-bottom: 0.75rem;
			width: 100%;
			font-size: 0.875rem;
			line-height: 1.875rem;
			color: #C8C8C8;
			border-bottom: 0.0625rem solid #C8C8C8;
			text-transform: uppercase;
		}
		button {
			border: 0.1875rem solid #221f00;
			line-height: 2.5rem;
			padding: 0 1.25rem;
			background-color: #fff;
			display: inline-block;
			color: #222f00;
			text-align: center;
			text-decoration: none;
			transition: all .1s cubic-bezier(0.4, 0.0, 0.2, 1);
		}
		button:hover, button:focus {
			cursor: pointer;
			outline: none;
			border: 0.1875rem solid #C4DB4F;
			background-color: #C4DB4F;
			box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 1), 0 0.625rem 0.625rem -0.625rem rgba(0, 0, 0, 0.4);
		}
		button:active { 
			border-color: #bbd14b;
			background-color: #bbd14b;
			box-shadow: 0 0 0 0.0625rem rgba(255, 255, 255, 1), 0 0.25rem 0.25rem -0.25rem rgba(0, 0, 0, 0.8);
		}
		/** custom form decoration **/
		.input_Wrapper {
			display: inline-block;
			position: relative;
		}
		.input_Invalid, .input_Warning {
			margin-bottom: 0.875rem;
		}
		.input_Invalid::after, .input_Warning::after {
			content: "";
			height: 0.1875rem;
			background-color: #dd2315;
			position: absolute;
			left: 1px; right: 1px; bottom: 0.75rem;
			z-index: 2000;
		}
		.input_Invalid::before, .input_Warning::before {
			content: "Numbers only";
			position: absolute;
			bottom: -0.375rem;
			left: 0;
			font-size: 0.75rem;
			color: #dd2315;
		}
		.input_Warning::after {
			background-color: #F7941D;
		}
		.input_Warning::before {
			content: "Should be greater than font size";
			color: #F7941D;
		}
		.input_Pixel::after {
			content: "px";
			position: absolute;
			top: 0.5rem;
			right: 2rem;
			color: #aaa;
		}
		.input_Percent::after {
			content: "%";
			position: absolute;
			top: 0.5rem;
			right: 2rem;
			color: #aaa;
		}
		.input_Weight::after {
			content: "wt";
			position: absolute;
			top: 0.5rem;
			right: 1.25rem;
			color: #aaa;
		}
		.infoMark {
			display: inline-block;
			position: relative;
			top: -0.1rem;
			width: 0.9rem;
			height: 0.9rem;
			margin-left: 0.4rem;
			font-family: monospace;
			font-weight: 600;
			font-size: 0.65rem;
			line-height: 1rem;
			text-align: center;
			border: 1.5px solid #aaa;
			border-radius: 1rem;
			color: #999;
		}
		/** END form **/
		section {
			margin: 2.5rem;
		}
		code {
			font-family: SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
			font-size: 0.8rem;
			background-color: #f1f1f1;
			padding: 0.25rem;
			text-align: right;
		
		}
		.grid-template {
			display: grid;
			grid-gap: 2rem;
			grid-template-columns: 12.5rem 1fr;
		}
		.grid-pos-01 {
		}
		.grid-pos-02 { 
			min-width: 0; /* dreadful hack to prevent blowout */
		}
		.output-container {
			display: inline-block;
			border: 0.1875rem solid #C4DB4F;
			background: rgba(196, 219, 79, 0.2);
			padding: 0.625rem;
			line-height: 1.25rem;
			min-width: 12.5rem;
			max-width: calc(100% - 2rem); /* dreadful hack to prevent blowout */
			white-space: nowrap;
			overflow: auto;
		}
		
		#ScaleVisualizer {
			display: grid;
			grid-gap: 0rem 1rem;
			grid-template-columns: 4rem 1fr;
			align-items: baseline;
		}
		#ContextVisualizer {
			display: none;
		}
		
		/** scrappy styles to show/hide the main blocks **/
		#ScaleVisualizer { display: var(--scaleVis); } 
		#ContextVisualizer { display: var(--contextVis); }
		#VisualizerContainer { display: none; }
		#VisualizerContainer.generated { display: block; }
		#styleCorral {
			position: absolute; top: -10rem; left: 10rem;
			padding: 0; margin: 0; height: 0; width: 0;
			overflow: hidden;
		}
		#styleCorral > * { display: inline-block; width: 10000rem; white-space: nowrap; }

		/** fairly rubbish styles swiped from another project; mostly here to demo responsiveness without breakpoints **/
		.flexy-grid {
			display: grid;
			grid-gap: 2rem;
			grid-template-columns: repeat(auto-fit, minmax(23.75rem, 1fr) ); /* 23.75rem = 380 px */
			margin: auto;
			margin-top: 2em;
		}
		.flexy-grid .container-wrapper {
			padding: 1rem; padding-top: 0;
			border: 0.063rem solid #fff;
			border-radius: 0.5rem;
			box-shadow: 0px 0.25rem 0.5rem 0px rgba(170, 170, 170, 0.40), 0px 0.063rem 0.125rem 0px rgba(85, 85, 85, 0.25), 0px 0px 0.063rem 0px rgba(85, 85, 85, 0.30);
			container-name: container-wrapper;
			container-type: inline-size;
		}
		.flexy-grid .styled-container {
			display: grid;
			grid-column-gap: 2rem;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: "gridTitle gridTitle" "gridContent gridImage";
			@container (width < 33.75rem) { /*33.75rem = 540px */
				grid-template-columns: 1fr;
				grid-template-areas: "gridTitle" "gridImage" "gridContent";
			}
		}
		.styled-container .gridTitle { grid-area: gridTitle; }
		.styled-container .gridContent { grid-area: gridContent; }
		.styled-container .gridImage { grid-area: gridImage; }
		
		.styled-container figure { 
			margin: 1em 0;
			padding: 0;
		}
		.styled-container figcaption { 
			display: inline-flex; /* allows the caption child element's margin to apply */
		}
		.styled-container .image {
			display: block;
			width: minmax(20rem, 1fr);
			height: auto;
			aspect-ratio: 16 / 9;
			@container container-wrapper (width > 33.75rem) {
				aspect-ratio: 4 / 3;
			}
			background-color: #ddd;
		}
		
		/** flaky toggle button **/
		.btn-switch label {
			font-size: 0.875rem;
			font-family: "Roboto", serif;
			font-weight: 400;
		}

		.btn-switch {
			display: inline-block;
			margin: 0px;
			position: relative;
		}

		.btn-switch > label.btn-switch-inner{
			margin: 0;
			width: 13.5rem;
			height: 2rem;
			background: #E0E0E0;
			border-radius: 26px;
			overflow: hidden;
			position: relative;
			transition: all 0.3s ease;
			display: block;
		}

		.btn-switch > label.btn-switch-inner:before { /* right side */
			content: attr(data-on);
			position: absolute;
			font-size: 0.875rem;
			top: .5rem;
			right: 1.2rem;
		}

		.btn-switch > label.btn-switch-inner:after { /* left side */
			content: attr(data-off);
			width: 6rem;
			height: 1rem;
			background: #fff;
			border-radius: 2rem;
			position: absolute;
			left: 0.2rem;
			top: 0.2rem;
			text-align: center;
			transition: all 0.3s ease;
			box-shadow: 0px 0px 0.4rem -0.2rem #111;
			padding: 0.3rem 0px;
		}

		.btn-switch input[type="checkbox"]{
			cursor: pointer;
			width: 3rem;
			height: 1.5rem;
			opacity: 0;
			position: absolute;
			top: 0;
			z-index: 1000;
			margin: 0px;
		}

		.btn-switch input[type="checkbox"]:checked + label.btn-switch-inner{ }

		.btn-switch input[type="checkbox"]:checked + label.btn-switch-inner:after{
			content: attr(data-on);
			width: 7.3rem;
			left: 6rem;
		}

		.btn-switch input[type="checkbox"]:checked + label.btn-switch-inner:before{
			content: attr(data-off);
			right: auto;
			left: 20px;
		}

		.btn-switch input[type="checkbox"]:checked + label.btn-switch-inner{ }
		/** end flaky toggle button **/

		/* lazy intervention to show the h-level **/
		#ContextVisualizer h1, #ContextVisualizer h2, #ContextVisualizer h3, #ContextVisualizer h4, #ContextVisualizer h5, #ContextVisualizer h6, #ContextVisualizer small { position: relative; padding-right: 2rem; }
		#ContextVisualizer h1::before { content: "h1"; }
 		#ContextVisualizer h2::before { content: "h2"; }
		#ContextVisualizer h3::before { content: "h3"; }
		#ContextVisualizer h4::before { content: "h4"; }
		#ContextVisualizer h5::before { content: "h5"; }
		#ContextVisualizer h6::before { content: "h6"; }
		Dp::before { content: "p"; }
		#ContextVisualizer small::before { content: "sm"; }
		
		#ContextVisualizer h1::before,
		#ContextVisualizer h2::before,
		#ContextVisualizer h3::before,
		#ContextVisualizer h4::before,
		#ContextVisualizer h5::before,
		#ContextVisualizer h6::before,
		Dp::before,
		#ContextVisualizer small::before {
			display: inline-block;
			font-family: SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
			font-size: 0.8rem;
			width: 1rem;
			border-left: 2px solid #e1e1e1;
			color: #c1c1c1;
			margin: 0; margin-left: 0.5rem;
			padding: 0; padding-left: 0.25rem;
			position: absolute;
			right: 0;
		}