/*	gSW v3.2	*/

/*	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
	*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, /* sub, sup, */ tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/*	HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 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;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */

body {
	--back-0: rgba(160,200,224,0);
		--back-1: rgba(160,200,224,0.25);
		--back-2: rgba(160,200,224,0.5);
		--back-3: rgba(160,200,224,0.75);
		--back-4: rgba(160,200,224,1);		
	--front-0: rgba(23,64,9,0);
		--front-1: rgba(23,64,9,0.25);
		--front-2: rgba(23,64,9,0.5);
		--front-3: rgba(23,64,9,0.75);
		--front-4: rgba(23,64,9,1);
	--high-0: rgba(190,0,63,0);
		--high-1: rgba(190,0,63,0.25);
		--high-2: rgba(190,0,63,0.5);
		--high-3: rgba(190,0,63,0.75);
		--high-4: rgba(190,0,63,1);
	--curtain: rgba(82,35,194,1);
	--prim-r: rgba(226,91,64,1);
	--prim-o: rgba(238,160,25,1);
	--prim-y: rgba(230,210,37,1);
	--prim-g: rgba(133,192,90,1);
	--prim-b: rgba(87,137,219,1);
	--prim-p: rgba(159,62,214,1);

/*	Bracket Schemes: Always Accessible */

	--bracket-xn-back: rgba(255,255,255,1);		
	--bracket-xn-front: rgba(0,0,0,1);

	--bracket-1-back: rgba(255,255,0,1);		
	--bracket-1-front: rgba(0,0,0,1);

	--bracket-2-back: rgba(166,166,166,1);		
	--bracket-2-front: rgba(0,0,0,1);

	--bracket-3-back: rgba(240,170,108,1);
	--bracket-3-front: rgba(14,7,50,1);		

	--bracket-4-back: rgba(167,206,141,1);
	--bracket-4-front: rgba(23,64,9,1);		

	--bracket-5-back: rgba(160,200,224,1);		
	--bracket-5-front: rgba(23,64,9,1);

	--bracket-6-back: rgba(132,149,233,1);		
	--bracket-6-front: rgba(11,8,1,1);

	--bracket-7-back: rgba(82,66,126,1);		
	--bracket-7-front: rgba(255,224,248,1);

	--bracket-8-back: rgba(0,0,0,1);		
	--bracket-8-front: rgba(245,245,245,1);

	--bracket-9-back: rgba(44,22,11,1);		
	--bracket-9-front: rgba(0,241,164,1);

	--bracket-xp-back: rgba(255,255,255,1);		
	--bracket-xp-front: rgba(44,22,11,1);

}

/*	Compared with HMD, brackets are one step bigger.
	(Treat HMD n01 as gSW p00.)	*/
	
	
/*	Bracket (xn) Extra Negative: Diagram	*/
body.entity-n40, body.entity-n39, body.entity-n38, body.entity-n37, body.entity-n36, body.entity-n35, body.entity-n34, body.entity-n33, body.entity-n32, body.entity-n31, body.entity-n30, body.entity-n29, body.entity-n28, body.entity-n27, body.entity-n26, body.entity-n25, body.entity-n24, body.entity-n23, body.entity-n22, body.entity-n21, body.entity-n20, body.entity-n19, body.entity-n18, body.entity-n17 {
	--back-0: rgba(255,255,255,0);
		--back-1: rgba(255,255,255,0.25);
		--back-2: rgba(255,255,255,0.5);
		--back-3: rgba(255,255,255,0.75);
		--back-4: rgba(255,255,255,1);		
	--front-0: rgba(0,0,0,0);
		--front-1: rgba(0,0,0,0.25);
		--front-2: rgba(0,0,0,0.5);
		--front-3: rgba(0,0,0,0.75);
		--front-4: rgba(0,0,0,1);
}
/*	Bracket 1: Yellow Womb	*/
body.entity-n16, body.entity-n15, body.entity-n14, body.entity-n13, body.entity-n12, body.entity-n11 {
	--back-0: rgba(255,255,0,0);
		--back-1: rgba(255,255,0,0.25);
		--back-2: rgba(255,255,0,0.5);
		--back-3: rgba(255,255,0,0.75);
		--back-4: rgba(255,255,0,1);		
	--front-0: rgba(0,0,0,0);
		--front-1: rgba(0,0,0,0.25);
		--front-2: rgba(0,0,0,0.5);
		--front-3: rgba(0,0,0,0.75);
		--front-4: rgba(0,0,0,1);
}
/*	Bracket 2: Grayscale	*/
body.entity-n10, body.entity-n09, body.entity-n08, body.entity-n07 {
	--back-0: rgba(166,166,166,0);
		--back-1: rgba(166,166,166,0.25);
		--back-2: rgba(166,166,166,0.5);
		--back-3: rgba(166,166,166,0.75);
		--back-4: rgba(166,166,166,1);		
	--front-0: rgba(255,255,255,0);
		--front-1: rgba(0,0,0,0.25);
		--front-2: rgba(0,0,0,0.5);
		--front-3: rgba(0,0,0,0.75);
		--front-4: rgba(0,0,0,1);
}
/*	Bracket 3: Human Tissue	*/
body.entity-n06, body.entity-n05, body.entity-n04 {
	--back-0: rgba(240,170,108,0);
		--back-1: rgba(240,170,108,0.25);
		--back-2: rgba(240,170,108,0.5);
		--back-3: rgba(240,170,108,0.75);
		--back-4: rgba(240,170,108,1);
	--front-0: rgba(14,7,50,0);
		--front-1: rgba(14,7,50,0.25);
		--front-2: rgba(14,7,50,0.5);
		--front-3: rgba(14,7,50,0.75);
		--front-4: rgba(14,7,50,1);		
}
/*	Bracket 4: Leaf Litter	*/
body.entity-n03, body.entity-n02 {
	--back-0: rgba(167,206,141,0);
		--back-1: rgba(167,206,141,0.25);
		--back-2: rgba(167,206,141,0.5);
		--back-3: rgba(167,206,141,0.75);
		--back-4: rgba(167,206,141,1);
	--front-0: rgba(23,64,9,0);
		--front-1: rgba(23,64,9,0.25);
		--front-2: rgba(23,64,9,0.5);
		--front-3: rgba(23,64,9,0.75);
		--front-4: rgba(23,64,9,1);		
}
/*	Bracket 5: Natural Sky	*/
body.entity-n01, body.entity-p00, body.entity-p01 {
	--back-0: rgba(160,200,224,0);
		--back-1: rgba(160,200,224,0.25);
		--back-2: rgba(160,200,224,0.5);
		--back-3: rgba(160,200,224,0.75);
		--back-4: rgba(160,200,224,1);		
	--front-0: rgba(23,64,9,0);
		--front-1: rgba(23,64,9,0.25);
		--front-2: rgba(23,64,9,0.5);
		--front-3: rgba(23,64,9,0.75);
		--front-4: rgba(23,64,9,1);
	--high-0: rgba(190,0,63,0);
		--high-1: rgba(190,0,63,0.25);
		--high-2: rgba(190,0,63,0.5);
		--high-3: rgba(190,0,63,0.75);
		--high-4: rgba(190,0,63,1);
}
/*	Bracket 6: Natural Dusk	*/
body.entity-p02, body.entity-p03 {
	--back-0: rgba(132,149,233,0);
		--back-1: rgba(132,149,233,0.25);
		--back-2: rgba(132,149,233,0.5);
		--back-3: rgba(132,149,233,0.75);
		--back-4: rgba(132,149,233,1);		
	--front-0: rgba(11,8,1,0);
		--front-1: rgba(11,8,1,0.25);
		--front-2: rgba(11,8,1,0.5);
		--front-3: rgba(11,8,1,0.75);
		--front-4: rgba(11,8,1,1);
}
/*	Bracket 7: Artificial Dusk	*/
body.entity-p04, body.entity-p05, body.entity-p06 {
	--back-0: rgba(82,66,126,0);
		--back-1: rgba(82,66,126,0.25);
		--back-2: rgba(82,66,126,0.5);
		--back-3: rgba(82,66,126,0.75);
		--back-4: rgba(82,66,126,1);		
	--front-0: rgba(255,224,248,0);
		--front-1: rgba(255,224,248,0.25);
		--front-2: rgba(255,224,248,0.5);
		--front-3: rgba(255,224,248,0.75);
		--front-4: rgba(255,224,248,1);
	--high-0: rgba(255,200,52,0);
		--high-1: rgba(255,200,52,0.25);
		--high-2: rgba(255,200,52,0.5);
		--high-3: rgba(255,200,52,0.75);
		--high-4: rgba(255,200,52,1);
}
/*	Bracket 8: Empty Void	*/
body.entity-p07, body.entity-p08, body.entity-p09, body.entity-p10, 
body.entity-p11, body.entity-p12 {
	--back-0: rgba(0,0,0,0);
		--back-1: rgba(0,0,0,0.25);
		--back-2: rgba(0,0,0,0.5);
		--back-3: rgba(0,0,0,0.75);
		--back-4: rgba(0,0,0,1);		
	--front-0: rgba(245,245,245,0);
		--front-1: rgba(245,245,245,0.25);
		--front-2: rgba(245,245,245,0.5);
		--front-3: rgba(245,245,245,0.75);
		--front-4: rgba(245,245,245,1);
	--high-0: rgba(255,200,52,0);
		--high-1: rgba(255,200,52,0.25);
		--high-2: rgba(255,200,52,0.5);
		--high-3: rgba(255,200,52,0.75);
		--high-4: rgba(255,200,52,1);
}
/*	Bracket 9: Tron Void	*/
body.entity-p13, body.entity-p14, body.entity-p15, body.entity-p16, body.entity-p17, body.entity-p18, 
body.entity-p19, body.entity-p20, body.entity-p21, body.entity-p22 {
	--back-0: rgba(44,22,11,0);
		--back-1: rgba(44,22,11,0.25);
		--back-2: rgba(44,22,11,0.5);
		--back-3: rgba(44,22,11,0.75);
		--back-4: rgba(44,22,11,1);		
	--front-0: rgba(0,241,164,0);
		--front-1: rgba(0,241,164,0.25);
		--front-2: rgba(0,241,164,0.5);
		--front-3: rgba(0,241,164,0.75);
		--front-4: rgba(0,241,164,1);
	--high-0: rgba(255,200,52,0);
		--high-1: rgba(255,200,52,0.25);
		--high-2: rgba(255,200,52,0.5);
		--high-3: rgba(255,200,52,0.75);
		--high-4: rgba(255,200,52,1);
}
/*	Bracket (xp) Extra Positive: Drawing	*/
body.entity-p23, body.entity-p24, body.entity-p25, body.entity-p26, body.entity-p27, body.entity-p28, body.entity-p29, body.entity-p30, body.entity-p31, body.entity-p32, body.entity-p33 {
	--back-0: rgba(255,255,255,0);
		--back-1: rgba(255,255,255,0.25);
		--back-2: rgba(255,255,255,0.5);
		--back-3: rgba(255,255,255,0.75);
		--back-4: rgba(255,255,255,1);		
	--front-0: rgba(44,22,11,0);
		--front-1: rgba(44,22,11,0.25);
		--front-2: rgba(44,22,11,0.5);
		--front-3: rgba(44,22,11,0.75);
		--front-4: rgba(44,22,11,1);
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 1000
// <casual>: Use a value from 0 to 1
// <cursive>: Use a value from 0 to 1

.recursive-base {
	font-family: "Recursive", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:
		"slnt" 0,
		"CASL" <casual>,
		"CRSV" <cursive>,
		"MONO" 0;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900

.source-sans-3-base {
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.material-symbols {
	font-family: "Material Symbols Outlined";
}
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

/*	------------------------------------------------------------------------------------
	Teaching and Visualization Lab: 
		11,860 x 1080 px; 
		~85 ft in width (listed);
		~2.118 m in height (measured);
		510 px/m (measured);
		2.16 m wide visible panels at either end.
	--------------------------------------------------------------------------------- */

:root { font-size: 16px; } 

* { box-sizing: border-box; }

.none, .hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }

.icon { font-family: "Material Symbols Outlined"; }

body {
	margin: 0;
    padding: 0;
    font-family: "Source Sans 3", sans-serif;    
		font-optical-sizing: auto;
	/*	In practice the following colors are hidden behind the main div */
    background-color: var(--back-4);
    color: var(--front-4);
}

main {
	contain: layout paint;
	position: fixed;
	top: 60px; right: 60px; bottom: 80px; left: 60px;
    background-color: var(--back-4);
    color: var(--front-4);
}
@media (max-height: 767px) {
	main { bottom: 8px; }
}
@media (max-width: 449px), (max-height: 449px) {
  main { top: 88px; right: 8px; bottom: 8px; left: 8px; }
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	MENU BAR ------------------------------------------------------------------------ */

#site-title {
	z-index: 30;
	user-select: none;
	transform: translate(0, -50%);
	position: fixed;
	top: 30px; left: 60px;
}
#site-title:hover { 
	cursor: crosshair; 
	color: var(--front-0); 
}
@media (max-width: 449px), (max-height: 449px) {
	#site-title, #site-title:hover { 
		cursor: auto;
		top: 26px; left: 8px;
		padding: 4px 0;
		color: var(--front-4);
	}
}


.title {
	transform: translate(0, -50%);
	position: absolute;
	white-space: nowrap;
	color: var(--front-1);
	font-family: "Recursive", sans-serif;
	font-variation-settings:
		"slnt" 0,
		"CASL" 0,
		"CRSV" 0,
		"MONO" 0;
	font-size: 36px;
	line-height: 1;
}
#title-1 { font-weight: 300; color: var(--front-4); }
#title-2 { font-weight: 400; }
#title-3 { font-weight: 600; }
#title-4 { font-weight: 800; }
#title-5 { font-weight: 1000; }
#site-title:hover #title-2, #site-title:hover #title-3, #site-title:hover #title-4, #site-title:hover #title-5 { 
	color: var(--front-0);
}
@media (max-width: 449px), (max-height: 449px) {
	.title {
		color: var(--front-1);
		font-size: 24px;
	}
	#title-1, #title-1:hover { color: var(--front-4); }
}

#menu-bar {
	position: fixed;
	left: 0; right: 0;
	top: 0;
	height: 60px;
	font-size: 24px;
}

#site-logo {
	z-index: 30;
	user-select: none;
	position: fixed;
	margin: 5px;
	width: 50px; height: 50px;
}
@media (max-width: 449px), (max-height: 449px) {
	#site-logo { display: none; }
}

.logo {
	position: absolute;
	font-family: "Material Symbols Outlined";
	font-variation-settings: 
		'FILL' 1,
		'wght' 200,
		'obsz' 24;
}
#logo-large { top: 0; right: 0; }
#logo-small { bottom: 0; left: 0; }

body.entity-n40 #logo-large, body.entity-n39 #logo-large, body.entity-n38 #logo-large, body.entity-n37 #logo-large, body.entity-n36 #logo-large, body.entity-n35 #logo-large, body.entity-n34 #logo-large, body.entity-n33 #logo-large, body.entity-n32 #logo-large, body.entity-n31 #logo-large, body.entity-n30 #logo-large, body.entity-n29 #logo-large, body.entity-n28 #logo-large, body.entity-n27 #logo-large, body.entity-n26 #logo-large, body.entity-n25 #logo-large, body.entity-n24 #logo-large, body.entity-n23 #logo-large, body.entity-n22 #logo-large, body.entity-n21 #logo-large, body.entity-n20 #logo-large, body.entity-n19 #logo-large, body.entity-n18 #logo-large, body.entity-n17 #logo-large, body.entity-n16 #logo-large, body.entity-n15 #logo-large, body.entity-n14 #logo-large, body.entity-n13 #logo-large, body.entity-n12 #logo-large, body.entity-n11 #logo-large, body.entity-n10 #logo-large, body.entity-n09 #logo-large, body.entity-n08 #logo-large, body.entity-n07 #logo-large, body.entity-n06 #logo-large, body.entity-n05 #logo-large, body.entity-n04 #logo-large, body.entity-n03 #logo-large, body.entity-n02 #logo-large, body.entity-p00 #logo-small, body.entity-p01 #logo-small, body.entity-p02 #logo-small, body.entity-p03 #logo-small, body.entity-p04 #logo-small, body.entity-p05 #logo-small, body.entity-p06 #logo-small, body.entity-p07 #logo-small, body.entity-p08 #logo-small, body.entity-p09 #logo-small, body.entity-p10 #logo-small, body.entity-p11 #logo-small, body.entity-p12 #logo-small, body.entity-p13 #logo-small, body.entity-p14 #logo-small, body.entity-p15 #logo-small, body.entity-p16 #logo-small, body.entity-p17 #logo-small, body.entity-p18 #logo-small, body.entity-p19 #logo-small, body.entity-p20 #logo-small, body.entity-p21 #logo-small, body.entity-p22 #logo-small, body.entity-p23 #logo-small, body.entity-p24 #logo-small, body.entity-p25 #logo-small, body.entity-p26 #logo-small, body.entity-p27 #logo-small, body.entity-p28 #logo-small, body.entity-p29 #logo-small, body.entity-p30 #logo-small, body.entity-p31 #logo-small, body.entity-p32 #logo-small, body.entity-p33 #logo-small {
	margin: 6px;
	font-size: 20px;
}

body.entity-p00 #logo-large, body.entity-p01 #logo-large, body.entity-p02 #logo-large, body.entity-p03 #logo-large, body.entity-p04 #logo-large, body.entity-p05 #logo-large, body.entity-p06 #logo-large, body.entity-p07 #logo-large, body.entity-p08 #logo-large, body.entity-p09 #logo-large, body.entity-p10 #logo-large, body.entity-p11 #logo-large, body.entity-p12 #logo-large, body.entity-p13 #logo-large, body.entity-p14 #logo-large, body.entity-p15 #logo-large, body.entity-p16 #logo-large, body.entity-p17 #logo-large, body.entity-p18 #logo-large, body.entity-p19 #logo-large, body.entity-p20 #logo-large, body.entity-p21 #logo-large, body.entity-p22 #logo-large, body.entity-p23 #logo-large, body.entity-p24 #logo-large, body.entity-p25 #logo-large, body.entity-p26 #logo-large, body.entity-p27 #logo-large, body.entity-p28 #logo-large, body.entity-p29 #logo-large, body.entity-p30 #logo-large, body.entity-p31 #logo-large, body.entity-p32 #logo-large, body.entity-p33 #logo-large, body.entity-n40 #logo-small, body.entity-n39 #logo-small, body.entity-n38 #logo-small, body.entity-n37 #logo-small, body.entity-n36 #logo-small, body.entity-n35 #logo-small, body.entity-n34 #logo-small, body.entity-n33 #logo-small, body.entity-n32 #logo-small, body.entity-n31 #logo-small, body.entity-n30 #logo-small, body.entity-n29 #logo-small, body.entity-n28 #logo-small, body.entity-n27 #logo-small, body.entity-n26 #logo-small, body.entity-n25 #logo-small, body.entity-n24 #logo-small, body.entity-n23 #logo-small, body.entity-n22 #logo-small, body.entity-n21 #logo-small, body.entity-n20 #logo-small, body.entity-n19 #logo-small, body.entity-n18 #logo-small, body.entity-n17 #logo-small, body.entity-n16 #logo-small, body.entity-n15 #logo-small, body.entity-n14 #logo-small, body.entity-n13 #logo-small, body.entity-n12 #logo-small, body.entity-n11 #logo-small, body.entity-n10 #logo-small, body.entity-n09 #logo-small, body.entity-n08 #logo-small, body.entity-n07 #logo-small, body.entity-n06 #logo-small, body.entity-n05 #logo-small, body.entity-n04 #logo-small, body.entity-n03 #logo-small, body.entity-n02 #logo-small {
	margin: 0;
	font-size: 40px;
}

body.entity-n01 #logo-large, body.entity-n01 #logo-small {
	margin: 3px;
	font-size: 30px;
}

#zoom-label {
	user-select: none;
	transform: translate(0, -50%);
	position: fixed;
	top: 30px; right: calc(50% + 4.5rem + 16px);
	border-right: 2px solid var(--front-4);
	padding: 4px 12px;
	font-size: 16px;
	text-align: right;
}
@media (max-width: 1100px) {
	#zoom-label {
		right: calc(100% - 380px);
	}
}
@media (max-width: 449px), (max-height: 449px) {
  #zoom-label { display: none; }
}

#zoom-current {
	user-select: none;
	transform: translate(0, -50%);
	position: fixed;
	top: 30px; left: calc(50% - 4.5rem);
	font-weight: 350;
	font-size: 42px;
	white-space: nowrap;
}
@media (max-width: 2100px) {
	#zoom-current {
		font-size: 42px;
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current {
		font-size: 36px;
	}
}
@media (max-width: 1700px) {
	#zoom-current {
		font-size: 39px;
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current {
		font-size: 30px;
	}
}
@media (max-width: 1400px) {
	#zoom-current {
		font-size: 33px;
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current {
		font-size: 24px;
	}
}
@media (max-width: 1050px) {
	#zoom-current {
		font-size: 27px;
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current {
		font-size: 20px;
	}
}
@media (max-width: 975px) {
	#zoom-current {
		font-size: 22px;
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current {
		font-size: 18px;
	}
}
@media (max-width: 900px) {
	#zoom-current {
		font-size: 19px;
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current {
		font-size: 16px;
	}
}
@media (max-width: 449px), (max-height: 449px) {
	#zoom-current, body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current { 
		transform: none;
		top: 48px; left: 8px; right: 8px;
		border-top: 1px solid var(--front-1);
		padding-top: 8px;
		font-size: 20px;
		line-height: 1;
		/* This is all repeated below for extra mobile override */
	}
	body.entity-n40 #zoom-current, body.entity-n39 #zoom-current, body.entity-n38 #zoom-current, body.entity-n37 #zoom-current, body.entity-n36 #zoom-current, body.entity-n35 #zoom-current, body.entity-n34 #zoom-current, body.entity-n33 #zoom-current, body.entity-n32 #zoom-current, body.entity-n31 #zoom-current, body.entity-n30 #zoom-current, body.entity-n29 #zoom-current, body.entity-n28 #zoom-current, body.entity-n27 #zoom-current, body.entity-n26 #zoom-current, body.entity-n25 #zoom-current, body.entity-n24 #zoom-current, body.entity-n23 #zoom-current, body.entity-n22 #zoom-current, body.entity-n21 #zoom-current, body.entity-n20 #zoom-current, body.entity-n19 #zoom-current, body.entity-p19 #zoom-current, body.entity-p20 #zoom-current, body.entity-p21 #zoom-current, body.entity-p22 #zoom-current, body.entity-p23 #zoom-current, body.entity-p24 #zoom-current, body.entity-p25 #zoom-current, body.entity-p26 #zoom-current, body.entity-p27 #zoom-current, body.entity-p28 #zoom-current, body.entity-p29 #zoom-current, body.entity-p30 #zoom-current, body.entity-p31 #zoom-current, body.entity-p32 #zoom-current, body.entity-p33 #zoom-current { 
		font-size: 16px;
		line-height: 1.25;
	}
}

@media (max-width: 1100px) {
	#zoom-current {
		left: calc(0% + 396px);
	}
}
@media (max-width: 1220px) {
	html.above-96 #zoom-current { left: calc(0% + 396px); }
	html.above-96 #zoom-label { right: calc(100% - 380px); }
}
@media (max-width: 1332px) {
	html.above-120 #zoom-current { left: calc(0% + 396px); }
	html.above-120 #zoom-label { right: calc(100% - 380px); }
}
@media (max-width: 1534px) {
	html.above-150 #zoom-current { left: calc(0% + 396px); }
	html.above-150 #zoom-label { right: calc(100% - 380px); }
}
@media (max-width: 449px), (max-height: 449px) {
	#zoom-current, html.ppi-default #zoom-current, html.above-9 #zoom-current, html.above-19 #zoom-current, html.above-39 #zoom-current, html.above-50 #zoom-current, html.above-65 #zoom-current, html.above-80 #zoom-current, html.above-88 #zoom-current, html.above-96 #zoom-current, html.above-120 #zoom-current, html.above-150 #zoom-current, html.above-200 #zoom-current {
		transform: none;
		top: 48px; left: 8px; right: 8px;
		border-top: 1px solid var(--front-1);
		padding-top: 8px;
		font-size: 20px;
		line-height: 1;
	}
}

.mobile-superjump {
	display: none;
	position: fixed;
	top: 0;
	padding: 9px 6px;
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 250,
		'GRAD' 25,
		'opsz' 24;
	font-size: 30px;
	line-height: 1;
}

#mobile-minuscule { right: 90px; }
#mobile-zero { right: 45px; }
#mobile-massive { right: 0; }

.superjump-spacer {
	display: none;
	position: fixed;
	top: 8px;
	width: 1px; height: 32px;
	background-color: var(--front-1);
}

#sjs-left { right: 88px; }
#sjs-right { right: 43px; }

@media (max-width: 449px), (max-height: 449px) {
	.mobile-superjump, .superjump-spacer { display: block; }
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	TOOLBAR ------------------------------------------------------------------------- */

#toolbar {
	z-index: 26;
	overflow: hidden;
	position: fixed;
	left: 0;
	top: 60px; 
	padding: 0;
	width: 60px;
	font-size: 16px;
}
@media (max-width: 449px), (max-height: 449px) {
  #toolbar { display: none; }
}

.tool {
	user-select: none;
	box-sizing: content-box;
	margin: 0 10px;
	border-style: solid;
	border-bottom: 1px solid var(--front-4);
	padding: 8px 0;
	background-color: transparent;
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 200,
		'GRAD' 75,
		'opsz' 24;
	font-size: 30px;
	line-height: 1;
	text-align: center;
}
.tool:hover {
	transition: none !important;
	background-color: var(--front-1);
	/* font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 200,
		'opsz' 24; */
}
.tool.inactive { color: var(--front-2); }
.tool.inactive:hover { background-color: transparent; }
.tool-gap:hover { background-color: transparent; }

#tool-zoom, #tool-entity, #tool-info, #tool-help {
	border-bottom: 1px solid var(--front-1);
}

.active, #tool-recalibration { cursor: pointer; }

.notation-scientific #tool-scientific, .notation-standard #tool-standard {
	color: var(--front-2);
}
.notation-scientific:hover #tool-scientific, .notation-standard:hover #tool-standard {
	background-color: transparent;
}

#tool-key, .tool:hover #tool-key {
	margin-top: 60px;
	font-variation-settings:
		'FILL' 1,
		'wght' 100,
		'GRAD' 0,
		'opsz' 24;
}

.tool-gap {
	font-size: 0;
}

.toule {
	cursor: pointer; 
	user-select: none;
	box-sizing: content-box;
	margin: 0 10px;
	padding: 8px 0;
	background-color: transparent;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-align: center;
}
.toule:hover { 
	transition: none !important; 
	background-color: var(--front-1); 
}

.mode-ratio #toule-ratio, .mode-zoom #toule-zoom, .mode-ratio .tool { 
	display: none;
}

.toule b {
	display: block;
	font-weight: 900;
	font-size: 36px;
	line-height: 1.25;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	UNIT KEY ------------------------------------------------------------------------ */

#unit-key {
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 60px; bottom: 120px;
	padding: 0;
	width: 60px;
	font-size: 16px;
}
@media (max-height: 767px) {
	#unit-key { bottom: 48px; }
}
@media (max-width: 449px), (max-height: 449px) {
	#unit-key { display: none; }
}

.metric {
	user-select: none;
	cursor: pointer; 
	box-sizing: content-box;
	margin: 0 10px;
	border-bottom: 1px solid var(--front-1);
	padding: 8px 0;
	background-color: var(--front-0);
	color: var(--front-3);
	font-family: "Source Sans 3", sans-serif;
	font-weight: 350;
	font-size: 16px;
	line-height: 1.25;
	text-align: center;
}
@media (max-height: 840px) {
	.metric {
		padding: 6px 0;
		line-height: 1.125;
	}
}
@media (max-height: 767px) {
	.metric {
		padding: 4px 0;
		line-height: 1;
	}
}
@media (max-height: 640px) {
	.metric {
		padding: 2px 0;
		font-size: 14px;
	}
}

#metric-yotta { border-top: 1px solid var(--front-4); }
#metric-kilo, #metric-meter, #metric-yocto { border-bottom: 1px solid var(--front-4); }

.metric:hover { transition: none !important; background-color: var(--front-1); }


body.entity-n40 #metric-yocto, body.entity-n39 #metric-yocto, body.entity-n38 #metric-yocto, body.entity-n37 #metric-yocto, body.entity-n36 #metric-yocto, body.entity-n35 #metric-yocto, body.entity-n34 #metric-yocto, body.entity-n33 #metric-yocto, body.entity-n32 #metric-yocto, body.entity-n31 #metric-yocto, body.entity-n30 #metric-yocto, body.entity-n29 #metric-yocto, body.entity-n28 #metric-yocto, body.entity-n27 #metric-yocto, body.entity-n26 #metric-yocto, body.entity-n25 #metric-yocto, body.entity-n24 #metric-yocto, body.entity-n23 #metric-yocto, body.entity-n22 #metric-yocto, 

body.entity-n21 #metric-zepto, body.entity-n20 #metric-zepto, body.entity-n19 #metric-zepto, 
body.entity-n18 #metric-atto, body.entity-n17 #metric-atto, body.entity-n16 #metric-atto, 
body.entity-n15 #metric-femto, body.entity-n14 #metric-femto, body.entity-n13 #metric-femto, 
body.entity-n12 #metric-pico, body.entity-n11 #metric-pico, body.entity-n10 #metric-pico, 
body.entity-n09 #metric-nano, body.entity-n08 #metric-nano, body.entity-n07 #metric-nano, 
body.entity-n06 #metric-micro, body.entity-n05 #metric-micro, body.entity-n04 #metric-micro, 
body.entity-n03 #metric-milli, body.entity-n02 #metric-milli, body.entity-n01 #metric-milli,

body.entity-p00 #metric-meter, body.entity-p01 #metric-meter, body.entity-p02 #metric-meter, 

body.entity-p03 #metric-kilo, body.entity-p04 #metric-kilo, body.entity-p05 #metric-kilo, 
body.entity-p06 #metric-mega, body.entity-p07 #metric-mega, body.entity-p08 #metric-mega, 
body.entity-p09 #metric-giga, body.entity-p10 #metric-giga, body.entity-p11 #metric-giga, 
body.entity-p12 #metric-tera, body.entity-p13 #metric-tera, body.entity-p14 #metric-tera, 
body.entity-p15 #metric-peta, body.entity-p16 #metric-peta, body.entity-p17 #metric-peta, 
body.entity-p18 #metric-exa, body.entity-p19 #metric-exa, body.entity-p20 #metric-exa, 
body.entity-p21 #metric-zetta, body.entity-p22 #metric-zetta, body.entity-p23 #metric-zetta, 

body.entity-p24 #metric-yotta, body.entity-p25 #metric-yotta, body.entity-p26 #metric-yotta, body.entity-p27 #metric-yotta, body.entity-p28 #metric-yotta, body.entity-p29 #metric-yotta, body.entity-p30 #metric-yotta, body.entity-p31 #metric-yotta, body.entity-p32 #metric-yotta, body.entity-p33 #metric-yotta {
	color: var(--front-4);
	font-weight: 850;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	PROGRESS STRIP ------------------------------------------------------------------ */

#progress-strip {
	z-index: 12;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-behavior: smooth;
	/* Hide scrollbar for Chrome, Safari and Opera */
	scrollbar-width: none; /* For Firefox */
	-ms-overflow-style: none; /* For IE and Edge */
	position: fixed;
	left: 0; right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	height: 80px;
	font-family: "Recursive", sans-serif;
	font-variation-settings:
		"slnt" 0,
		"CASL" 0,
		"CRSV" 0,
		"MONO" 0;
	font-weight: 400;
	font-style: normal;
	line-height: 0;
	text-align: center;
}
@media (max-height: 767px) {
	#progress-strip { display: none; }
}
@media (max-width: 449px), (max-height: 449px) {
  #progress-strip { display: none; }
}

#progress-strip::-webkit-scrollbar {
    display: none; /* Hides scrollbar (Chrome/Safari) */
}

#progress-strip #progress-inner > div {
}

#progress-inner {
	display: inline-block;
	position: relative;
	padding: 0;
	height: 80px;
	font-size: 0;
	line-height: 1;
}

.progress-world, .progress-spacer {
	user-select: none;
	overflow: hidden;
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	border-top-width: 6px;
	border-bottom-width: 6px;
	border-style: solid;
	border-color: var(--back-4);
	width: 80px;
	height: 80px;
	color: white;
	font-size: 18px;
}
.progress-world:hover { cursor: pointer; }

/* Negative range */
.entity-n39 #pw-n40, .entity-n39 #pw-n39, .entity-n39 #pw-n38,
.entity-n38 #pw-n39, .entity-n38 #pw-n38, .entity-n38 #pw-n37,
.entity-n37 #pw-n38, .entity-n37 #pw-n37, .entity-n37 #pw-n36,
.entity-n36 #pw-n37, .entity-n36 #pw-n36, .entity-n36 #pw-n35,
.entity-n35 #pw-n36, .entity-n35 #pw-n35, .entity-n35 #pw-n34,
.entity-n34 #pw-n35, .entity-n34 #pw-n34, .entity-n34 #pw-n33,
.entity-n33 #pw-n34, .entity-n33 #pw-n33, .entity-n33 #pw-n32,
.entity-n32 #pw-n33, .entity-n32 #pw-n32, .entity-n32 #pw-n31,
.entity-n31 #pw-n32, .entity-n31 #pw-n31, .entity-n31 #pw-n30,
.entity-n30 #pw-n31, .entity-n30 #pw-n30, .entity-n30 #pw-n29,
.entity-n29 #pw-n30, .entity-n29 #pw-n29, .entity-n29 #pw-n28,
.entity-n28 #pw-n29, .entity-n28 #pw-n28, .entity-n28 #pw-n27,
.entity-n27 #pw-n28, .entity-n27 #pw-n27, .entity-n27 #pw-n26,
.entity-n26 #pw-n27, .entity-n26 #pw-n26, .entity-n26 #pw-n25,
.entity-n25 #pw-n26, .entity-n25 #pw-n25, .entity-n25 #pw-n24,
.entity-n24 #pw-n25, .entity-n24 #pw-n24, .entity-n24 #pw-n23,
.entity-n23 #pw-n24, .entity-n23 #pw-n23, .entity-n23 #pw-n22,
.entity-n22 #pw-n23, .entity-n22 #pw-n22, .entity-n22 #pw-n21,
.entity-n21 #pw-n22, .entity-n21 #pw-n21, .entity-n21 #pw-n20,
.entity-n20 #pw-n21, .entity-n20 #pw-n20, .entity-n20 #pw-n19,
.entity-n19 #pw-n20, .entity-n19 #pw-n19, .entity-n19 #pw-n18,
.entity-n18 #pw-n19, .entity-n18 #pw-n18, .entity-n18 #pw-n17,
.entity-n17 #pw-n18, .entity-n17 #pw-n17, .entity-n17 #pw-n16,
.entity-n16 #pw-n17, .entity-n16 #pw-n16, .entity-n16 #pw-n15,
.entity-n15 #pw-n16, .entity-n15 #pw-n15, .entity-n15 #pw-n14,
.entity-n14 #pw-n15, .entity-n14 #pw-n14, .entity-n14 #pw-n13,
.entity-n13 #pw-n14, .entity-n13 #pw-n13, .entity-n13 #pw-n12,
.entity-n12 #pw-n13, .entity-n12 #pw-n12, .entity-n12 #pw-n11,
.entity-n11 #pw-n12, .entity-n11 #pw-n11, .entity-n11 #pw-n10,
.entity-n10 #pw-n11, .entity-n10 #pw-n10, .entity-n10 #pw-n09,
.entity-n09 #pw-n10, .entity-n09 #pw-n09, .entity-n09 #pw-n08,
.entity-n08 #pw-n09, .entity-n08 #pw-n08, .entity-n08 #pw-n07,
.entity-n07 #pw-n08, .entity-n07 #pw-n07, .entity-n07 #pw-n06,
.entity-n06 #pw-n07, .entity-n06 #pw-n06, .entity-n06 #pw-n05,
.entity-n05 #pw-n06, .entity-n05 #pw-n05, .entity-n05 #pw-n04,
.entity-n04 #pw-n05, .entity-n04 #pw-n04, .entity-n04 #pw-n03,
.entity-n03 #pw-n04, .entity-n03 #pw-n03, .entity-n03 #pw-n02,
.entity-n02 #pw-n03, .entity-n02 #pw-n02, .entity-n02 #pw-n01,
.entity-n01 #pw-n02, .entity-n01 #pw-n01, .entity-n01 #pw-p00,
/* Zero transition */
.entity-p00 #pw-n01, .entity-p00 #pw-p00, .entity-p00 #pw-p01,
/* Positive range */
.entity-p01 #pw-p00, .entity-p01 #pw-p01, .entity-p01 #pw-p02,
.entity-p02 #pw-p01, .entity-p02 #pw-p02, .entity-p02 #pw-p03,
.entity-p03 #pw-p02, .entity-p03 #pw-p03, .entity-p03 #pw-p04,
.entity-p04 #pw-p03, .entity-p04 #pw-p04, .entity-p04 #pw-p05,
.entity-p05 #pw-p04, .entity-p05 #pw-p05, .entity-p05 #pw-p06,
.entity-p06 #pw-p05, .entity-p06 #pw-p06, .entity-p06 #pw-p07,
.entity-p07 #pw-p06, .entity-p07 #pw-p07, .entity-p07 #pw-p08,
.entity-p08 #pw-p07, .entity-p08 #pw-p08, .entity-p08 #pw-p09,
.entity-p09 #pw-p08, .entity-p09 #pw-p09, .entity-p09 #pw-p10,
.entity-p10 #pw-p09, .entity-p10 #pw-p10, .entity-p10 #pw-p11,
.entity-p11 #pw-p10, .entity-p11 #pw-p11, .entity-p11 #pw-p12,
.entity-p12 #pw-p11, .entity-p12 #pw-p12, .entity-p12 #pw-p13,
.entity-p13 #pw-p12, .entity-p13 #pw-p13, .entity-p13 #pw-p14,
.entity-p14 #pw-p13, .entity-p14 #pw-p14, .entity-p14 #pw-p15,
.entity-p15 #pw-p14, .entity-p15 #pw-p15, .entity-p15 #pw-p16,
.entity-p16 #pw-p15, .entity-p16 #pw-p16, .entity-p16 #pw-p17,
.entity-p17 #pw-p16, .entity-p17 #pw-p17, .entity-p17 #pw-p18,
.entity-p18 #pw-p17, .entity-p18 #pw-p18, .entity-p18 #pw-p19,
.entity-p19 #pw-p18, .entity-p19 #pw-p19, .entity-p19 #pw-p20,
.entity-p20 #pw-p19, .entity-p20 #pw-p20, .entity-p20 #pw-p21,
.entity-p21 #pw-p20, .entity-p21 #pw-p21, .entity-p21 #pw-p22,
.entity-p22 #pw-p21, .entity-p22 #pw-p22, .entity-p22 #pw-p23,
.entity-p23 #pw-p22, .entity-p23 #pw-p23, .entity-p23 #pw-p24,
.entity-p24 #pw-p23, .entity-p24 #pw-p24, .entity-p24 #pw-p25,
.entity-p25 #pw-p24, .entity-p25 #pw-p25, .entity-p25 #pw-p26,
.entity-p26 #pw-p25, .entity-p26 #pw-p26, .entity-p26 #pw-p27,
.entity-p27 #pw-p26, .entity-p27 #pw-p27, .entity-p27 #pw-p28,
.entity-p28 #pw-p27, .entity-p28 #pw-p28, .entity-p28 #pw-p29,
.entity-p29 #pw-p28, .entity-p29 #pw-p29, .entity-p29 #pw-p30,
.entity-p30 #pw-p29, .entity-p30 #pw-p30, .entity-p30 #pw-p31,
.entity-p31 #pw-p30, .entity-p31 #pw-p31, .entity-p31 #pw-p32,
.entity-p32 #pw-p31, .entity-p32 #pw-p32, .entity-p32 #pw-p33 {
	border-top-color: var(--front-4);
}

#pw-n40, #pw-n39, #pw-n38, #pw-n37, #pw-n36, #pw-n35, #pw-n34, #pw-n33, #pw-n32, #pw-n31, #pw-n30, #pw-n29, #pw-n28, #pw-n27, #pw-n26, #pw-n25, #pw-n24, #pw-n23, #pw-n22, #pw-n21, #pw-n20, #pw-n19, #pw-n18, #pw-n17 {
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-xn-back) 110%);
	border-bottom-color: var(--bracket-xn-back);
}

#pw-n16, #pw-n15, #pw-n14, #pw-n13, #pw-n12, #pw-n11 {
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-1-back) 110%);
	border-bottom-color: var(--bracket-1-back);
}

#pw-n10, #pw-n09, #pw-n08, #pw-n07 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-2-back) 110%);
	border-bottom-color: var(--bracket-2-back); 
}

#pw-n06, #pw-n05, #pw-n04 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-3-back) 110%);
	border-bottom-color: var(--bracket-3-back); 
}

#pw-n03, #pw-n02 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-4-back) 110%);
	border-bottom-color: var(--bracket-4-back); 
}

#pw-n01, #pw-p00, #pw-p01 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-5-back) 110%);
	border-bottom-color: var(--bracket-5-back); 
}

#pw-p02, #pw-p03 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-6-back) 110%);
	border-bottom-color: var(--bracket-6-back); 
}

#pw-p04, #pw-p05, #pw-p06 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-7-back) 110%);
	border-bottom-color: var(--bracket-7-back); 
}

#pw-p07, #pw-p08, #pw-p09, #pw-p10, #pw-p11, #pw-p12 { 
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-8-back) 110%);
    border-bottom-color: var(--bracket-8-back); 
}

#pw-p13, #pw-p14, #pw-p15, #pw-p16, #pw-p17, #pw-p18, #pw-p19, #pw-p20, #pw-p21, #pw-p22 {
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-9-back) 110%);
	border-bottom-color: var(--bracket-9-back);
}

#pw-p23, #pw-p24, #pw-p25, #pw-p26, #pw-p27, #pw-p28, #pw-p29, #pw-p30, #pw-p31, #pw-p32, #pw-p33 {
	background: linear-gradient(to bottom, transparent 69%, var(--bracket-xp-back) 110%);
	border-bottom-color: var(--bracket-xp-back);
}

.progress-thumbnail {
	display: block;
	opacity: 1;
	margin-top: 40px; margin-bottom: -96px;
	margin-left: 12px; margin-right: 12px;
	width: 56px; height: 56px;
}
.progress-world:hover .progress-thumbnail {
	opacity: 1;
}

.progress-number {
	display: block;
	margin-top: 8px;
	padding: 2px 4px;
	width: 100%;
	color: var(--front-4);
	font-size: 21px;
	line-height: 24px;
	text-align: center;
}
.progress-world:hover .progress-number { 
	cursor: pointer;
	font-weight: 900; 
}

.progress-arrow {
	cursor: pointer;
	user-select: none;
	z-index: 13;
	position: fixed;
	bottom: 80px;
	margin-bottom: -1px;
	border-bottom: 1px solid var(--front-2);
	width: 40px; height: 50px;
	color: var(--front-4);
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' -25,
		'opsz' 24;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
}
@media (max-height: 767px) {
	.progress-arrow { display: none; }
}
@media (max-width: 449px), (max-height: 449px) {
	.progress-arrow { display: none; }
}
	
.progress-arrow:hover { 
	font-variation-settings:
		'FILL' 0,
		'wght' 500,
		'GRAD' 200,
		'opsz' 24;
}

#progress-backward { left: 10px; }
#progress-forward { right: 10px; }

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	OPTIONAL PANELS ----------------------------------------------------------------- */

#optional-panels {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
}
@media (max-width: 449px), (max-height: 449px) {
  #optional-panels { display: none; }
}

.panel-tabs {
	overflow: hidden;
	user-select: none;
	display: flex;
	align-items: center;
	padding: 12px;
	font-size: 16px;
	line-height: 1;
}

.tab-head, .tab, .tab-close {
	border: 1px solid var(--front-4);
	border-left: 1px solid transparent;
	margin-right: -1px;
}

.tab-head {
	flex: 1;
	padding: 6px 6px 6px 0;
}
.panel-tabs div.tab-head {
	border-top: 1px solid transparent;
}

.tab {
	pointer-events: auto;
	cursor: pointer;
	padding: 6px;
}

.tab-selected {
	cursor: default;
	margin-bottom: 1px;
	border-bottom: none;
}

.tab:hover {
	transition: none !important;
	background-color: var(--front-1);
}
.tab.tab-selected:hover {
	background-color: transparent;
}

.tab-close {
	cursor: pointer;
	padding: 2px;
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 150,
		'GRAD' -25,
		'opsz' 24;
	font-size: 24px;
}

.tab-close:hover {
	transition: none !important;
	background-color: var(--front-1);
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' 200,
		'opsz' 24;
}

#optional-panels p, #optional-panels ul, #optional-panels h2 {
	margin: 12px;
}

#optional-panels p.credit {
	margin: 0 12px;
	border-top: 1px solid var(--front-1);
	padding: 12px 0;
	font-size: 14px;
}

#optional-panels ul {
	list-style-type: square;
	padding-left: 24px;
}

#optional-panels li {
	margin: 4px 0;
}

#optional-panels .hyperlinks li {
	margin: 4px 0 8px;
}

#optional-panels h2 {
	font-weight: 800;
	font-size: 20px;
	line-height: 1.125;
}

#optional-panels em {
	font-style: italic;
}

#optional-panels strong {
	font-weight: 650;
}

#optional-panels sup, #optional-panels sub {
	font-weight: 450; 
	font-size: 0.7em;
	vertical-align: 0.4em;
	line-height: 1;
}
#optional-panels sub {
	vertical-align: -0.2em;
}

#optional-panels a {
	border-bottom: 1px solid var(--front-4);
	color: var(--front-4);
	font-weight: 750;
	text-decoration: none;
}

#optional-panels a:hover {
	border-bottom: 1px solid var(--high-4);
	color: var(--high-4);
}

.icon-hint {
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' 200,
		'opsz' 24;	
	line-height: 0.75;
	vertical-align: -0.2em;
}

#panel-description, #panel-information, #panel-help, #panel-reconfigure, #panel-si {
	z-index: 11;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	position: fixed;
	left: 70px; top: 70px;
	padding: 5px;
	width: 380px;
	max-height: calc(100vh - 160px);
	background-color: var(--back-4);
	color: var(--front-4);
	&::-webkit-scrollbar {
		display: none;
	}
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Set ALL panels to hidden by default */
#panel-description, 
#panel-information, 
#panel-help, 
#panel-si {
	display: none; /* Changed from block to none */
}

/* This becomes redundant but can stay for JS toggling */
#panel-description.hidden, 
#panel-information.hidden, 
#panel-help.hidden, 
#panel-si.hidden { 
	display: none; 
}

/* Add this for when panels should be visible */
#panel-description:not(.hidden),
#panel-information:not(.hidden), 
#panel-help:not(.hidden), 
#panel-si:not(.hidden) {
	display: block;
}

/* Allow metric buttons to be clickable */
#unit-key .metric {
  pointer-events: auto;
}

.info-logo {
	vertical-align: middle;
}

#logo-nsf {
	margin-left: -3px;
	width: 70px; height: 70px;
}

#logo-ncsu {
	width: 102px; height: 49px;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	SCALING INPUTS ------------------------------------------------------------------ */

#moveUpBtn, #moveDownBtn {
	user-select: none;
	transform: scaleX(-1);
	z-index: 13;
	position: absolute;
	padding: 0.4rem;
	background-color: var(--front-4);
	color: var(--back-4);
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 250,
		'GRAD' 25,
		'opsz' 24;
	font-size: 1.6rem;
	text-align: center;
}
#moveUpBtn {
	padding: 0.3rem;
	font-size: 1.2rem;
}
#moveUpBtn:hover, #moveDownBtn:hover {
	cursor: pointer;
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 200,
		'opsz' 24;
}

#moveUpBtn { left: calc(50% + 2.4rem); top: calc(50% + 2.4rem); }
#moveDownBtn { left: calc(50% + 3.6rem); top: calc(50% + 3.6rem); }

@media (max-width: 449px), (max-height: 449px) {
	#moveUpBtn, #moveDownBtn { 
		transform: none;
		position: fixed;
		top: auto; bottom: 0;
		margin: 0;
		padding: 12px;
		background-color: transparent;
		color: var(--front-4);
		font-size: 48px;
		line-height: 1;
	}
	#moveUpBtn:hover, #moveDownBtn:hover {
		font-variation-settings:
			'FILL' 0,
			'wght' 250,
			'GRAD' 25,
			'opsz' 24;	
	}
	#moveUpBtn { 
		left: 0; right: auto; 
	}
	#moveDownBtn { 
		left: auto; right: 0; 
	}
}

	/* Extreme circumstances, assume projector */
	html.above-9 #moveUpBtn, html.above-9 #moveDownBtn {
		display: none;
	}

#hint-scaling {
	display: none;
	user-select: none;
	z-index: 13;
	position: absolute;
	left: calc(50% + 4.6rem);
	top: calc(50% + 2.4rem);
	padding: 0.1rem 0.25rem;
	background-color: var(--front-4);
	color: var(--back-4);
	font-weight: 600;
	font-size: 0.6rem;
	line-height: 1;
}
@media (max-width: 449px), (max-height: 449px) {
  #hint-scaling { display: none; }
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	GLOBAL ANIMATIONS --------------------------------------------------------------- */

/*	Animations implemented on both mobile and desktop	*/

body.entity-n40 .entity, 
body.entity-n39 .entity, 
body.entity-n38 .entity, 
body.entity-n37 .entity, 
body.entity-n36 .entity {
	transition: transform 280ms ease, 
	top 280ms ease, right 280ms ease, bottom 280ms ease, left 280ms ease, 
	border-color 280ms ease, width 280ms ease, height 280ms ease, 
	background-color 280ms ease, color 280ms ease;
}
/*	Here begin the permitted arrival points.	*/
body.entity-n35 .entity {
	transition: transform 280ms ease, 
	top 280ms ease, right 280ms ease, bottom 280ms ease, left 280ms ease, 
	border-color 280ms ease, width 280ms ease, height 280ms ease, 
	background-color 280ms ease, color 280ms ease;
}
body.entity-n34 .entity {
	transition: transform 290ms ease, 
	top 290ms ease, right 290ms ease, bottom 290ms ease, left 290ms ease, 
	border-color 290ms ease, width 290ms ease, height 290ms ease, 
	background-color 290ms ease, color 290ms ease;
}
body.entity-n33 .entity {
	transition: transform 300ms ease, 
	top 300ms ease, right 300ms ease, bottom 300ms ease, left 300ms ease, 
	border-color 300ms ease, width 300ms ease, height 300ms ease, 
	background-color 300ms ease, color 300ms ease;
}
body.entity-n32 .entity {
	transition: transform 310ms ease, 
	top 310ms ease, right 310ms ease, bottom 310ms ease, left 310ms ease, 
	border-color 310ms ease, width 310ms ease, height 310ms ease, 
	background-color 310ms ease, color 310ms ease;
}
body.entity-n31 .entity {
	transition: transform 320ms ease, 
	top 320ms ease, right 320ms ease, bottom 320ms ease, left 320ms ease, 
	border-color 320ms ease, width 320ms ease, height 320ms ease, 
	background-color 320ms ease, color 320ms ease;
}
body.entity-n30 .entity {
	transition: transform 330ms ease, 
	top 330ms ease, right 330ms ease, bottom 330ms ease, left 330ms ease, 
	border-color 330ms ease, width 330ms ease, height 330ms ease, 
	background-color 330ms ease, color 330ms ease;
}
body.entity-n29 .entity {
	transition: transform 340ms ease, 
	top 340ms ease, right 340ms ease, bottom 340ms ease, left 340ms ease, 
	border-color 340ms ease, width 340ms ease, height 340ms ease, 
	background-color 340ms ease, color 340ms ease;
}
body.entity-n28 .entity {
	transition: transform 350ms ease, 
	top 350ms ease, right 350ms ease, bottom 350ms ease, left 350ms ease, 
	border-color 350ms ease, width 350ms ease, height 350ms ease, 
	background-color 350ms ease, color 350ms ease;
}
body.entity-n27 .entity {
	transition: transform 360ms ease, 
	top 360ms ease, right 360ms ease, bottom 360ms ease, left 360ms ease, 
	border-color 360ms ease, width 360ms ease, height 360ms ease, 
	background-color 360ms ease, color 360ms ease;
}
body.entity-n26 .entity {
	transition: transform 370ms ease, 
	top 370ms ease, right 370ms ease, bottom 370ms ease, left 370ms ease, 
	border-color 370ms ease, width 370ms ease, height 370ms ease, 
	background-color 370ms ease, color 370ms ease;
}
body.entity-n25 .entity {
	transition: transform 380ms ease, 
	top 380ms ease, right 380ms ease, bottom 380ms ease, left 380ms ease, 
	border-color 380ms ease, width 380ms ease, height 380ms ease, 
	background-color 380ms ease, color 380ms ease;
}
body.entity-n24 .entity {
	transition: transform 390ms ease, 
	top 390ms ease, right 390ms ease, bottom 390ms ease, left 390ms ease, 
	border-color 390ms ease, width 390ms ease, height 390ms ease, 
	background-color 390ms ease, color 390ms ease;
}
body.entity-n23 .entity {
	transition: transform 400ms ease, 
	top 400ms ease, right 400ms ease, bottom 400ms ease, left 400ms ease, 
	border-color 400ms ease, width 400ms ease, height 400ms ease, 
	background-color 400ms ease, color 400ms ease;
}
body.entity-n22 .entity {
	transition: transform 410ms ease, 
	top 410ms ease, right 410ms ease, bottom 410ms ease, left 410ms ease, 
	border-color 410ms ease, width 410ms ease, height 410ms ease, 
	background-color 410ms ease, color 410ms ease;
}
body.entity-n21 .entity {
	transition: transform 420ms ease, 
	top 420ms ease, right 420ms ease, bottom 420ms ease, left 420ms ease, 
	border-color 420ms ease, width 420ms ease, height 420ms ease, 
	background-color 420ms ease, color 420ms ease;
}
body.entity-n20 .entity {
	transition: transform 430ms ease, 
	top 430ms ease, right 430ms ease, bottom 430ms ease, left 430ms ease, 
	border-color 430ms ease, width 430ms ease, height 430ms ease, 
	background-color 430ms ease, color 430ms ease;
}
body.entity-n19 .entity {
	transition: transform 440ms ease, 
	top 440ms ease, right 440ms ease, bottom 440ms ease, left 440ms ease, 
	border-color 440ms ease, width 440ms ease, height 440ms ease, 
	background-color 440ms ease, color 440ms ease;
}
body.entity-n18 .entity {
	transition: transform 450ms ease, 
	top 450ms ease, right 450ms ease, bottom 450ms ease, left 450ms ease, 
	border-color 450ms ease, width 450ms ease, height 450ms ease, 
	background-color 450ms ease, color 450ms ease;
}
body.entity-n17 .entity {
	transition: transform 500ms ease, 
	top 500ms ease, right 500ms ease, bottom 500ms ease, left 500ms ease, 
	border-color 500ms ease, width 500ms ease, height 500ms ease, 
	background-color 500ms ease, color 500ms ease;
}
body.entity-n16 .entity {
	transition: transform 550ms ease, 
	top 550ms ease, right 550ms ease, bottom 550ms ease, left 550ms ease, 
	border-color 550ms ease, width 550ms ease, height 550ms ease, 
	background-color 550ms ease, color 550ms ease;
}
body.entity-n15 .entity {
	transition: transform 600ms ease, 
	top 600ms ease, right 600ms ease, bottom 600ms ease, left 600ms ease, 
	border-color 600ms ease, width 600ms ease, height 600ms ease, 
	background-color 600ms ease, color 600ms ease;
}
body.entity-n14 .entity {
	transition: transform 650ms ease, 
	top 650ms ease, right 650ms ease, bottom 650ms ease, left 650ms ease, 
	border-color 650ms ease, width 650ms ease, height 650ms ease, 
	background-color 650ms ease, color 650ms ease;
}
body.entity-n13 .entity {
	transition: transform 700ms ease, 
	top 700ms ease, right 700ms ease, bottom 700ms ease, left 700ms ease, 
	border-color 700ms ease, width 700ms ease, height 700ms ease, 
	background-color 700ms ease, color 700ms ease;
}
body.entity-n12 .entity {
	transition: transform 750ms ease, 
	top 750ms ease, right 750ms ease, bottom 750ms ease, left 750ms ease, 
	border-color 750ms ease, width 750ms ease, height 750ms ease, 
	background-color 750ms ease, color 750ms ease;
}
body.entity-n11 .entity {
	transition: transform 800ms ease, 
	top 800ms ease, right 800ms ease, bottom 800ms ease, left 800ms ease, 
	border-color 800ms ease, width 800ms ease, height 800ms ease, 
	background-color 800ms ease, color 800ms ease;
}
body.entity-n10 .entity {
	transition: transform 850ms ease, 
	top 850ms ease, right 850ms ease, bottom 850ms ease, left 850ms ease, 
	border-color 850ms ease, width 850ms ease, height 850ms ease, 
	background-color 850ms ease, color 850ms ease;
}
body.entity-n09 .entity {
	transition: transform 900ms ease, 
	top 900ms ease, right 900ms ease, bottom 900ms ease, left 900ms ease, 
	border-color 900ms ease, width 900ms ease, height 900ms ease, 
	background-color 900ms ease, color 900ms ease;
}
body.entity-n08 .entity {
	transition: transform 950ms ease, 
	top 950ms ease, right 950ms ease, bottom 950ms ease, left 950ms ease, 
	border-color 950ms ease, width 950ms ease, height 950ms ease, 
	background-color 950ms ease, color 950ms ease;
}
body.entity-n07 .entity {
	transition: transform 1000ms ease, 
	top 1000ms ease, right 1000ms ease, bottom 1000ms ease, left 1000ms ease, 
	border-color 1000ms ease, width 1000ms ease, height 1000ms ease, 
	background-color 1000ms ease, color 1000ms ease;
}
body.entity-n06 .entity {
	transition: transform 1050ms ease, 
	top 1050ms ease, right 1050ms ease, bottom 1050ms ease, left 1050ms ease, 
	border-color 1050ms ease, width 1050ms ease, height 1050ms ease, 
	background-color 1050ms ease, color 1050ms ease;
}
body.entity-n05 .entity {
	transition: transform 1100ms ease, 
	top 1100ms ease, right 1100ms ease, bottom 1100ms ease, left 1100ms ease, 
	border-color 1100ms ease, width 1100ms ease, height 1100ms ease, 
	background-color 1100ms ease, color 1100ms ease;
}
body.entity-n04 .entity {
	transition: transform 1150ms ease, 
	top 1150ms ease, right 1150ms ease, bottom 1150ms ease, left 1150ms ease, 
	border-color 1150ms ease, width 1150ms ease, height 1150ms ease, 
	background-color 1150ms ease, color 1150ms ease;
}
body.entity-n03 .entity {
	transition: transform 1200ms ease, 
	top 1200ms ease, right 1200ms ease, bottom 1200ms ease, left 1200ms ease, 
	border-color 1200ms ease, width 1200ms ease, height 1200ms ease, 
	background-color 1200ms ease, color 1200ms ease;
}
body.entity-n02 .entity {
	transition: transform 1250ms ease, 
	top 1250ms ease, right 1250ms ease, bottom 1250ms ease, left 1250ms ease, 
	border-color 1250ms ease, width 1250ms ease, height 1250ms ease, 
	background-color 1250ms ease, color 1250ms ease;
}
body.entity-n01 .entity {
	transition: transform 1300ms ease, 
	top 1300ms ease, right 1300ms ease, bottom 1300ms ease, left 1300ms ease, 
	border-color 1300ms ease, width 1300ms ease, height 1300ms ease, 
	background-color 1300ms ease, color 1300ms ease;
}
body.entity-p00 .entity {
	transition: transform 1350ms ease, 
	top 1350ms ease, right 1350ms ease, bottom 1350ms ease, left 1350ms ease, 
	border-color 1350ms ease, width 1350ms ease, height 1350ms ease, 
	background-color 1350ms ease, color 1350ms ease;
}
body.entity-p01 .entity {
	transition: transform 1400ms ease, 
	top 1400ms ease, right 1400ms ease, bottom 1400ms ease, left 1400ms ease, 
	border-color 1400ms ease, width 1400ms ease, height 1400ms ease, 
	background-color 1400ms ease, color 1400ms ease;
}
body.entity-p02 .entity {
	transition: transform 1450ms ease, 
	top 1450ms ease, right 1450ms ease, bottom 1450ms ease, left 1450ms ease, 
	border-color 1450ms ease, width 1450ms ease, height 1450ms ease, 
	background-color 1450ms ease, color 1450ms ease;
}
body.entity-p03 .entity {
	transition: transform 1500ms ease, 
	top 1500ms ease, right 1500ms ease, bottom 1500ms ease, left 1500ms ease, 
	border-color 1500ms ease, width 1500ms ease, height 1500ms ease, 
	background-color 1500ms ease, color 1500ms ease;
}
body.entity-p04 .entity {
	transition: transform 1550ms ease, 
	top 1550ms ease, right 1550ms ease, bottom 1550ms ease, left 1550ms ease, 
	border-color 1550ms ease, width 1550ms ease, height 1550ms ease, 
	background-color 1550ms ease, color 1550ms ease;
}
body.entity-p05 .entity {
	transition: transform 1600ms ease, 
	top 1600ms ease, right 1600ms ease, bottom 1600ms ease, left 1600ms ease, 
	border-color 1600ms ease, width 1600ms ease, height 1600ms ease, 
	background-color 1600ms ease, color 1600ms ease;
}
body.entity-p06 .entity {
	transition: transform 1650ms ease, 
	top 1650ms ease, right 1650ms ease, bottom 1650ms ease, left 1650ms ease, 
	border-color 1650ms ease, width 1650ms ease, height 1650ms ease, 
	background-color 1650ms ease, color 1650ms ease;
}
body.entity-p07 .entity {
	transition: transform 1700ms ease, 
	top 1700ms ease, right 1700ms ease, bottom 1700ms ease, left 1700ms ease, 
	border-color 1700ms ease, width 1700ms ease, height 1700ms ease, 
	background-color 1700ms ease, color 1700ms ease;
}
body.entity-p08 .entity {
	transition: transform 1750ms ease, 
	top 1750ms ease, right 1750ms ease, bottom 1750ms ease, left 1750ms ease, 
	border-color 1750ms ease, width 1750ms ease, height 1750ms ease, 
	background-color 1750ms ease, color 1750ms ease;
}
body.entity-p09 .entity {
	transition: transform 1800ms ease, 
	top 1800ms ease, right 1800ms ease, bottom 1800ms ease, left 1800ms ease, 
	border-color 1800ms ease, width 1800ms ease, height 1800ms ease, 
	background-color 1800ms ease, color 1800ms ease;
}
body.entity-p10 .entity {
	transition: transform 1850ms ease, 
	top 1850ms ease, right 1850ms ease, bottom 1850ms ease, left 1850ms ease, 
	border-color 1850ms ease, width 1850ms ease, height 1850ms ease, 
	background-color 1850ms ease, color 1850ms ease;
}
body.entity-p11 .entity {
	transition: transform 1900ms ease, 
	top 1900ms ease, right 1900ms ease, bottom 1900ms ease, left 1900ms ease, 
	border-color 1900ms ease, width 1900ms ease, height 1900ms ease, 
	background-color 1900ms ease, color 1900ms ease;
}
body.entity-p12 .entity {
	transition: transform 1950ms ease, 
	top 1950ms ease, right 1950ms ease, bottom 1950ms ease, left 1950ms ease, 
	border-color 1950ms ease, width 1950ms ease, height 1950ms ease, 
	background-color 1950ms ease, color 1950ms ease;
}
body.entity-p13 .entity {
	transition: transform 2000ms ease, 
	top 2000ms ease, right 2000ms ease, bottom 2000ms ease, left 2000ms ease, 
	border-color 2000ms ease, width 2000ms ease, height 2000ms ease, 
	background-color 2000ms ease, color 2000ms ease;
}
body.entity-p14 .entity {
	transition: transform 2050ms ease, 
	top 2050ms ease, right 2050ms ease, bottom 2050ms ease, left 2050ms ease, 
	border-color 2050ms ease, width 2050ms ease, height 2050ms ease, 
	background-color 2050ms ease, color 2050ms ease;
}
body.entity-p15 .entity {
	transition: transform 2100ms ease, 
	top 2100ms ease, right 2100ms ease, bottom 2100ms ease, left 2100ms ease, 
	border-color 2100ms ease, width 2100ms ease, height 2100ms ease, 
	background-color 2100ms ease, color 2100ms ease;
}
body.entity-p16 .entity {
	transition: transform 2150ms ease, 
	top 2150ms ease, right 2150ms ease, bottom 2150ms ease, left 2150ms ease, 
	border-color 2150ms ease, width 2150ms ease, height 2150ms ease, 
	background-color 2150ms ease, color 2150ms ease;
}
body.entity-p17 .entity {
	transition: transform 2200ms ease, 
	top 2200ms ease, right 2200ms ease, bottom 2200ms ease, left 2200ms ease, 
	border-color 2200ms ease, width 2200ms ease, height 2200ms ease, 
	background-color 2200ms ease, color 2200ms ease;
}
body.entity-p18 .entity {
	transition: transform 2250ms ease, 
	top 2250ms ease, right 2250ms ease, bottom 2250ms ease, left 2250ms ease, 
	border-color 2250ms ease, width 2250ms ease, height 2250ms ease, 
	background-color 2250ms ease, color 2250ms ease;
}
body.entity-p19 .entity {
	transition: transform 2300ms ease, 
	top 2300ms ease, right 2300ms ease, bottom 2300ms ease, left 2300ms ease, 
	border-color 2300ms ease, width 2300ms ease, height 2300ms ease, 
	background-color 2300ms ease, color 2300ms ease;
}
body.entity-p20 .entity {
	transition: transform 2350ms ease, 
	top 2350ms ease, right 2350ms ease, bottom 2350ms ease, left 2350ms ease, 
	border-color 2350ms ease, width 2350ms ease, height 2350ms ease, 
	background-color 2350ms ease, color 2350ms ease;
}
body.entity-p21 .entity {
	transition: transform 2400ms ease, 
	top 2400ms ease, right 2400ms ease, bottom 2400ms ease, left 2400ms ease, 
	border-color 2400ms ease, width 2400ms ease, height 2400ms ease, 
	background-color 2400ms ease, color 2400ms ease;
}
body.entity-p22 .entity {
	transition: transform 2450ms ease, 
	top 2450ms ease, right 2450ms ease, bottom 2450ms ease, left 2450ms ease, 
	border-color 2450ms ease, width 2450ms ease, height 2450ms ease, 
	background-color 2450ms ease, color 2450ms ease;
}
body.entity-p23 .entity {
	transition: transform 2500ms ease, 
	top 2500ms ease, right 2500ms ease, bottom 2500ms ease, left 2500ms ease, 
	border-color 2500ms ease, width 2500ms ease, height 2500ms ease, 
	background-color 2500ms ease, color 2500ms ease;
}
body.entity-p24 .entity {
	transition: transform 2550ms ease, 
	top 2550ms ease, right 2550ms ease, bottom 2550ms ease, left 2550ms ease, 
	border-color 2550ms ease, width 2550ms ease, height 2550ms ease, 
	background-color 2550ms ease, color 2550ms ease;
}
body.entity-p25 .entity {
	transition: transform 2600ms ease, 
	top 2600ms ease, right 2600ms ease, bottom 2600ms ease, left 2600ms ease, 
	border-color 2600ms ease, width 2600ms ease, height 2600ms ease, 
	background-color 2600ms ease, color 2600ms ease;
}
body.entity-p26 .entity {
	transition: transform 2650ms ease, 
	top 2650ms ease, right 2650ms ease, bottom 2650ms ease, left 2650ms ease, 
	border-color 2650ms ease, width 2650ms ease, height 2650ms ease, 
	background-color 2650ms ease, color 2650ms ease;
}
body.entity-p27 .entity {
	transition: transform 2700ms ease, 
	top 2700ms ease, right 2700ms ease, bottom 2700ms ease, left 2700ms ease, 
	border-color 2700ms ease, width 2700ms ease, height 2700ms ease, 
	background-color 2700ms ease, color 2700ms ease;
}
body.entity-p28 .entity {
	transition: transform 2750ms ease, 
	top 2750ms ease, right 2750ms ease, bottom 2750ms ease, left 2750ms ease, 
	border-color 2750ms ease, width 2750ms ease, height 2750ms ease, 
	background-color 2750ms ease, color 2750ms ease;
}
/*	Here end the permitted arrival points.	*/
body.entity-p29 .entity, 
body.entity-p30 .entity, 
body.entity-p31 .entity, 
body.entity-p32 .entity, 
body.entity-p33 .entity {
	transition: transform 2750ms ease, 
	top 2750ms ease, right 2750ms ease, bottom 2750ms ease, left 2750ms ease, 
	border-color 2750ms ease, width 2750ms ease, height 2750ms ease, 
	background-color 2750ms ease, color 2750ms ease;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */

/*	What animations to implement on desktop only	*/

@media (min-width: 450px) and (min-height: 450px) {

body.entity-n40, body.entity-n40 *, 
body.entity-n39, body.entity-n39 *, 
body.entity-n38, body.entity-n38 *, 
body.entity-n37, body.entity-n37 *, 
body.entity-n36, body.entity-n36 * {
	transition: transform 280ms ease, 
	top 280ms ease, right 280ms ease, bottom 280ms ease, left 280ms ease, 
	border-color 280ms ease, width 280ms ease, height 280ms ease, 
	background-color 280ms ease, color 280ms ease;
}
/*	Here begin the permitted arrival points.	*/
body.entity-n35, body.entity-n35 * {
	transition: transform 280ms ease, 
	top 280ms ease, right 280ms ease, bottom 280ms ease, left 280ms ease, 
	border-color 280ms ease, width 280ms ease, height 280ms ease, 
	background-color 280ms ease, color 280ms ease;
}
body.entity-n34, body.entity-n34 * {
	transition: transform 290ms ease, 
	top 290ms ease, right 290ms ease, bottom 290ms ease, left 290ms ease, 
	border-color 290ms ease, width 290ms ease, height 290ms ease, 
	background-color 290ms ease, color 290ms ease;
}
body.entity-n33, body.entity-n33 * {
	transition: transform 300ms ease, 
	top 300ms ease, right 300ms ease, bottom 300ms ease, left 300ms ease, 
	border-color 300ms ease, width 300ms ease, height 300ms ease, 
	background-color 300ms ease, color 300ms ease;
}
body.entity-n32, body.entity-n32 * {
	transition: transform 310ms ease, 
	top 310ms ease, right 310ms ease, bottom 310ms ease, left 310ms ease, 
	border-color 310ms ease, width 310ms ease, height 310ms ease, 
	background-color 310ms ease, color 310ms ease;
}
body.entity-n31, body.entity-n31 * {
	transition: transform 320ms ease, 
	top 320ms ease, right 320ms ease, bottom 320ms ease, left 320ms ease, 
	border-color 320ms ease, width 320ms ease, height 320ms ease, 
	background-color 320ms ease, color 320ms ease;
}
body.entity-n30, body.entity-n30 * {
	transition: transform 330ms ease, 
	top 330ms ease, right 330ms ease, bottom 330ms ease, left 330ms ease, 
	border-color 330ms ease, width 330ms ease, height 330ms ease, 
	background-color 330ms ease, color 330ms ease;
}
body.entity-n29, body.entity-n29 * {
	transition: transform 340ms ease, 
	top 340ms ease, right 340ms ease, bottom 340ms ease, left 340ms ease, 
	border-color 340ms ease, width 340ms ease, height 340ms ease, 
	background-color 340ms ease, color 340ms ease;
}
body.entity-n28, body.entity-n28 * {
	transition: transform 350ms ease, 
	top 350ms ease, right 350ms ease, bottom 350ms ease, left 350ms ease, 
	border-color 350ms ease, width 350ms ease, height 350ms ease, 
	background-color 350ms ease, color 350ms ease;
}
body.entity-n27, body.entity-n27 * {
	transition: transform 360ms ease, 
	top 360ms ease, right 360ms ease, bottom 360ms ease, left 360ms ease, 
	border-color 360ms ease, width 360ms ease, height 360ms ease, 
	background-color 360ms ease, color 360ms ease;
}
body.entity-n26, body.entity-n26 * {
	transition: transform 370ms ease, 
	top 370ms ease, right 370ms ease, bottom 370ms ease, left 370ms ease, 
	border-color 370ms ease, width 370ms ease, height 370ms ease, 
	background-color 370ms ease, color 370ms ease;
}
body.entity-n25, body.entity-n25 * {
	transition: transform 380ms ease, 
	top 380ms ease, right 380ms ease, bottom 380ms ease, left 380ms ease, 
	border-color 380ms ease, width 380ms ease, height 380ms ease, 
	background-color 380ms ease, color 380ms ease;
}
body.entity-n24, body.entity-n24 * {
	transition: transform 390ms ease, 
	top 390ms ease, right 390ms ease, bottom 390ms ease, left 390ms ease, 
	border-color 390ms ease, width 390ms ease, height 390ms ease, 
	background-color 390ms ease, color 390ms ease;
}
body.entity-n23, body.entity-n23 * {
	transition: transform 400ms ease, 
	top 400ms ease, right 400ms ease, bottom 400ms ease, left 400ms ease, 
	border-color 400ms ease, width 400ms ease, height 400ms ease, 
	background-color 400ms ease, color 400ms ease;
}
body.entity-n22, body.entity-n22 * {
	transition: transform 410ms ease, 
	top 410ms ease, right 410ms ease, bottom 410ms ease, left 410ms ease, 
	border-color 410ms ease, width 410ms ease, height 410ms ease, 
	background-color 410ms ease, color 410ms ease;
}
body.entity-n21, body.entity-n21 * {
	transition: transform 420ms ease, 
	top 420ms ease, right 420ms ease, bottom 420ms ease, left 420ms ease, 
	border-color 420ms ease, width 420ms ease, height 420ms ease, 
	background-color 420ms ease, color 420ms ease;
}
body.entity-n20, body.entity-n20 * {
	transition: transform 430ms ease, 
	top 430ms ease, right 430ms ease, bottom 430ms ease, left 430ms ease, 
	border-color 430ms ease, width 430ms ease, height 430ms ease, 
	background-color 430ms ease, color 430ms ease;
}
body.entity-n19, body.entity-n19 * {
	transition: transform 440ms ease, 
	top 440ms ease, right 440ms ease, bottom 440ms ease, left 440ms ease, 
	border-color 440ms ease, width 440ms ease, height 440ms ease, 
	background-color 440ms ease, color 440ms ease;
}
body.entity-n18, body.entity-n18 * {
	transition: transform 450ms ease, 
	top 450ms ease, right 450ms ease, bottom 450ms ease, left 450ms ease, 
	border-color 450ms ease, width 450ms ease, height 450ms ease, 
	background-color 450ms ease, color 450ms ease;
}
body.entity-n17, body.entity-n17 * {
	transition: transform 500ms ease, 
	top 500ms ease, right 500ms ease, bottom 500ms ease, left 500ms ease, 
	border-color 500ms ease, width 500ms ease, height 500ms ease, 
	background-color 500ms ease, color 500ms ease;
}
body.entity-n16, body.entity-n16 * {
	transition: transform 550ms ease, 
	top 550ms ease, right 550ms ease, bottom 550ms ease, left 550ms ease, 
	border-color 550ms ease, width 550ms ease, height 550ms ease, 
	background-color 550ms ease, color 550ms ease;
}
body.entity-n15, body.entity-n15 * {
	transition: transform 600ms ease, 
	top 600ms ease, right 600ms ease, bottom 600ms ease, left 600ms ease, 
	border-color 600ms ease, width 600ms ease, height 600ms ease, 
	background-color 600ms ease, color 600ms ease;
}
body.entity-n14, body.entity-n14 * {
	transition: transform 650ms ease, 
	top 650ms ease, right 650ms ease, bottom 650ms ease, left 650ms ease, 
	border-color 650ms ease, width 650ms ease, height 650ms ease, 
	background-color 650ms ease, color 650ms ease;
}
body.entity-n13, body.entity-n13 * {
	transition: transform 700ms ease, 
	top 700ms ease, right 700ms ease, bottom 700ms ease, left 700ms ease, 
	border-color 700ms ease, width 700ms ease, height 700ms ease, 
	background-color 700ms ease, color 700ms ease;
}
body.entity-n12, body.entity-n12 * {
	transition: transform 750ms ease, 
	top 750ms ease, right 750ms ease, bottom 750ms ease, left 750ms ease, 
	border-color 750ms ease, width 750ms ease, height 750ms ease, 
	background-color 750ms ease, color 750ms ease;
}
body.entity-n11, body.entity-n11 * {
	transition: transform 800ms ease, 
	top 800ms ease, right 800ms ease, bottom 800ms ease, left 800ms ease, 
	border-color 800ms ease, width 800ms ease, height 800ms ease, 
	background-color 800ms ease, color 800ms ease;
}
body.entity-n10, body.entity-n10 * {
	transition: transform 850ms ease, 
	top 850ms ease, right 850ms ease, bottom 850ms ease, left 850ms ease, 
	border-color 850ms ease, width 850ms ease, height 850ms ease, 
	background-color 850ms ease, color 850ms ease;
}
body.entity-n09, body.entity-n09 * {
	transition: transform 900ms ease, 
	top 900ms ease, right 900ms ease, bottom 900ms ease, left 900ms ease, 
	border-color 900ms ease, width 900ms ease, height 900ms ease, 
	background-color 900ms ease, color 900ms ease;
}
body.entity-n08, body.entity-n08 * {
	transition: transform 950ms ease, 
	top 950ms ease, right 950ms ease, bottom 950ms ease, left 950ms ease, 
	border-color 950ms ease, width 950ms ease, height 950ms ease, 
	background-color 950ms ease, color 950ms ease;
}
body.entity-n07, body.entity-n07 * {
	transition: transform 1000ms ease, 
	top 1000ms ease, right 1000ms ease, bottom 1000ms ease, left 1000ms ease, 
	border-color 1000ms ease, width 1000ms ease, height 1000ms ease, 
	background-color 1000ms ease, color 1000ms ease;
}
body.entity-n06, body.entity-n06 * {
	transition: transform 1050ms ease, 
	top 1050ms ease, right 1050ms ease, bottom 1050ms ease, left 1050ms ease, 
	border-color 1050ms ease, width 1050ms ease, height 1050ms ease, 
	background-color 1050ms ease, color 1050ms ease;
}
body.entity-n05, body.entity-n05 * {
	transition: transform 1100ms ease, 
	top 1100ms ease, right 1100ms ease, bottom 1100ms ease, left 1100ms ease, 
	border-color 1100ms ease, width 1100ms ease, height 1100ms ease, 
	background-color 1100ms ease, color 1100ms ease;
}
body.entity-n04, body.entity-n04 * {
	transition: transform 1150ms ease, 
	top 1150ms ease, right 1150ms ease, bottom 1150ms ease, left 1150ms ease, 
	border-color 1150ms ease, width 1150ms ease, height 1150ms ease, 
	background-color 1150ms ease, color 1150ms ease;
}
body.entity-n03, body.entity-n03 * {
	transition: transform 1200ms ease, 
	top 1200ms ease, right 1200ms ease, bottom 1200ms ease, left 1200ms ease, 
	border-color 1200ms ease, width 1200ms ease, height 1200ms ease, 
	background-color 1200ms ease, color 1200ms ease;
}
body.entity-n02, body.entity-n02 * {
	transition: transform 1250ms ease, 
	top 1250ms ease, right 1250ms ease, bottom 1250ms ease, left 1250ms ease, 
	border-color 1250ms ease, width 1250ms ease, height 1250ms ease, 
	background-color 1250ms ease, color 1250ms ease;
}
body.entity-n01, body.entity-n01 * {
	transition: transform 1300ms ease, 
	top 1300ms ease, right 1300ms ease, bottom 1300ms ease, left 1300ms ease, 
	border-color 1300ms ease, width 1300ms ease, height 1300ms ease, 
	background-color 1300ms ease, color 1300ms ease;
}
body.entity-p00, body.entity-p00 * {
	transition: transform 1350ms ease, 
	top 1350ms ease, right 1350ms ease, bottom 1350ms ease, left 1350ms ease, 
	border-color 1350ms ease, width 1350ms ease, height 1350ms ease, 
	background-color 1350ms ease, color 1350ms ease;
}
body.entity-p01, body.entity-p01 * {
	transition: transform 1400ms ease, 
	top 1400ms ease, right 1400ms ease, bottom 1400ms ease, left 1400ms ease, 
	border-color 1400ms ease, width 1400ms ease, height 1400ms ease, 
	background-color 1400ms ease, color 1400ms ease;
}
body.entity-p02, body.entity-p02 * {
	transition: transform 1450ms ease, 
	top 1450ms ease, right 1450ms ease, bottom 1450ms ease, left 1450ms ease, 
	border-color 1450ms ease, width 1450ms ease, height 1450ms ease, 
	background-color 1450ms ease, color 1450ms ease;
}
body.entity-p03, body.entity-p03 * {
	transition: transform 1500ms ease, 
	top 1500ms ease, right 1500ms ease, bottom 1500ms ease, left 1500ms ease, 
	border-color 1500ms ease, width 1500ms ease, height 1500ms ease, 
	background-color 1500ms ease, color 1500ms ease;
}
body.entity-p04, body.entity-p04 * {
	transition: transform 1550ms ease, 
	top 1550ms ease, right 1550ms ease, bottom 1550ms ease, left 1550ms ease, 
	border-color 1550ms ease, width 1550ms ease, height 1550ms ease, 
	background-color 1550ms ease, color 1550ms ease;
}
body.entity-p05, body.entity-p05 * {
	transition: transform 1600ms ease, 
	top 1600ms ease, right 1600ms ease, bottom 1600ms ease, left 1600ms ease, 
	border-color 1600ms ease, width 1600ms ease, height 1600ms ease, 
	background-color 1600ms ease, color 1600ms ease;
}
body.entity-p06, body.entity-p06 * {
	transition: transform 1650ms ease, 
	top 1650ms ease, right 1650ms ease, bottom 1650ms ease, left 1650ms ease, 
	border-color 1650ms ease, width 1650ms ease, height 1650ms ease, 
	background-color 1650ms ease, color 1650ms ease;
}
body.entity-p07, body.entity-p07 * {
	transition: transform 1700ms ease, 
	top 1700ms ease, right 1700ms ease, bottom 1700ms ease, left 1700ms ease, 
	border-color 1700ms ease, width 1700ms ease, height 1700ms ease, 
	background-color 1700ms ease, color 1700ms ease;
}
body.entity-p08, body.entity-p08 * {
	transition: transform 1750ms ease, 
	top 1750ms ease, right 1750ms ease, bottom 1750ms ease, left 1750ms ease, 
	border-color 1750ms ease, width 1750ms ease, height 1750ms ease, 
	background-color 1750ms ease, color 1750ms ease;
}
body.entity-p09, body.entity-p09 * {
	transition: transform 1800ms ease, 
	top 1800ms ease, right 1800ms ease, bottom 1800ms ease, left 1800ms ease, 
	border-color 1800ms ease, width 1800ms ease, height 1800ms ease, 
	background-color 1800ms ease, color 1800ms ease;
}
body.entity-p10, body.entity-p10 * {
	transition: transform 1850ms ease, 
	top 1850ms ease, right 1850ms ease, bottom 1850ms ease, left 1850ms ease, 
	border-color 1850ms ease, width 1850ms ease, height 1850ms ease, 
	background-color 1850ms ease, color 1850ms ease;
}
body.entity-p11, body.entity-p11 * {
	transition: transform 1900ms ease, 
	top 1900ms ease, right 1900ms ease, bottom 1900ms ease, left 1900ms ease, 
	border-color 1900ms ease, width 1900ms ease, height 1900ms ease, 
	background-color 1900ms ease, color 1900ms ease;
}
body.entity-p12, body.entity-p12 * {
	transition: transform 1950ms ease, 
	top 1950ms ease, right 1950ms ease, bottom 1950ms ease, left 1950ms ease, 
	border-color 1950ms ease, width 1950ms ease, height 1950ms ease, 
	background-color 1950ms ease, color 1950ms ease;
}
body.entity-p13, body.entity-p13 * {
	transition: transform 2000ms ease, 
	top 2000ms ease, right 2000ms ease, bottom 2000ms ease, left 2000ms ease, 
	border-color 2000ms ease, width 2000ms ease, height 2000ms ease, 
	background-color 2000ms ease, color 2000ms ease;
}
body.entity-p14, body.entity-p14 * {
	transition: transform 2050ms ease, 
	top 2050ms ease, right 2050ms ease, bottom 2050ms ease, left 2050ms ease, 
	border-color 2050ms ease, width 2050ms ease, height 2050ms ease, 
	background-color 2050ms ease, color 2050ms ease;
}
body.entity-p15, body.entity-p15 * {
	transition: transform 2100ms ease, 
	top 2100ms ease, right 2100ms ease, bottom 2100ms ease, left 2100ms ease, 
	border-color 2100ms ease, width 2100ms ease, height 2100ms ease, 
	background-color 2100ms ease, color 2100ms ease;
}
body.entity-p16, body.entity-p16 * {
	transition: transform 2150ms ease, 
	top 2150ms ease, right 2150ms ease, bottom 2150ms ease, left 2150ms ease, 
	border-color 2150ms ease, width 2150ms ease, height 2150ms ease, 
	background-color 2150ms ease, color 2150ms ease;
}
body.entity-p17, body.entity-p17 * {
	transition: transform 2200ms ease, 
	top 2200ms ease, right 2200ms ease, bottom 2200ms ease, left 2200ms ease, 
	border-color 2200ms ease, width 2200ms ease, height 2200ms ease, 
	background-color 2200ms ease, color 2200ms ease;
}
body.entity-p18, body.entity-p18 * {
	transition: transform 2250ms ease, 
	top 2250ms ease, right 2250ms ease, bottom 2250ms ease, left 2250ms ease, 
	border-color 2250ms ease, width 2250ms ease, height 2250ms ease, 
	background-color 2250ms ease, color 2250ms ease;
}
body.entity-p19, body.entity-p19 * {
	transition: transform 2300ms ease, 
	top 2300ms ease, right 2300ms ease, bottom 2300ms ease, left 2300ms ease, 
	border-color 2300ms ease, width 2300ms ease, height 2300ms ease, 
	background-color 2300ms ease, color 2300ms ease;
}
body.entity-p20, body.entity-p20 * {
	transition: transform 2350ms ease, 
	top 2350ms ease, right 2350ms ease, bottom 2350ms ease, left 2350ms ease, 
	border-color 2350ms ease, width 2350ms ease, height 2350ms ease, 
	background-color 2350ms ease, color 2350ms ease;
}
body.entity-p21, body.entity-p21 * {
	transition: transform 2400ms ease, 
	top 2400ms ease, right 2400ms ease, bottom 2400ms ease, left 2400ms ease, 
	border-color 2400ms ease, width 2400ms ease, height 2400ms ease, 
	background-color 2400ms ease, color 2400ms ease;
}
body.entity-p22, body.entity-p22 * {
	transition: transform 2450ms ease, 
	top 2450ms ease, right 2450ms ease, bottom 2450ms ease, left 2450ms ease, 
	border-color 2450ms ease, width 2450ms ease, height 2450ms ease, 
	background-color 2450ms ease, color 2450ms ease;
}
body.entity-p23, body.entity-p23 * {
	transition: transform 2500ms ease, 
	top 2500ms ease, right 2500ms ease, bottom 2500ms ease, left 2500ms ease, 
	border-color 2500ms ease, width 2500ms ease, height 2500ms ease, 
	background-color 2500ms ease, color 2500ms ease;
}
body.entity-p24, body.entity-p24 * {
	transition: transform 2550ms ease, 
	top 2550ms ease, right 2550ms ease, bottom 2550ms ease, left 2550ms ease, 
	border-color 2550ms ease, width 2550ms ease, height 2550ms ease, 
	background-color 2550ms ease, color 2550ms ease;
}
body.entity-p25, body.entity-p25 * {
	transition: transform 2600ms ease, 
	top 2600ms ease, right 2600ms ease, bottom 2600ms ease, left 2600ms ease, 
	border-color 2600ms ease, width 2600ms ease, height 2600ms ease, 
	background-color 2600ms ease, color 2600ms ease;
}
body.entity-p26, body.entity-p26 * {
	transition: transform 2650ms ease, 
	top 2650ms ease, right 2650ms ease, bottom 2650ms ease, left 2650ms ease, 
	border-color 2650ms ease, width 2650ms ease, height 2650ms ease, 
	background-color 2650ms ease, color 2650ms ease;
}
body.entity-p27, body.entity-p27 * {
	transition: transform 2700ms ease, 
	top 2700ms ease, right 2700ms ease, bottom 2700ms ease, left 2700ms ease, 
	border-color 2700ms ease, width 2700ms ease, height 2700ms ease, 
	background-color 2700ms ease, color 2700ms ease;
}
body.entity-p28, body.entity-p28 * {
	transition: transform 2750ms ease, 
	top 2750ms ease, right 2750ms ease, bottom 2750ms ease, left 2750ms ease, 
	border-color 2750ms ease, width 2750ms ease, height 2750ms ease, 
	background-color 2750ms ease, color 2750ms ease;
}
/*	Here end the permitted arrival points.	*/
body.entity-p29, body.entity-p29 *, 
body.entity-p30, body.entity-p30 *, 
body.entity-p31, body.entity-p31 *, 
body.entity-p32, body.entity-p32 *, 
body.entity-p33, body.entity-p33 * {
	transition: transform 2750ms ease, 
	top 2750ms ease, right 2750ms ease, bottom 2750ms ease, left 2750ms ease, 
	border-color 2750ms ease, width 2750ms ease, height 2750ms ease, 
	background-color 2750ms ease, color 2750ms ease;
}

}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	RULERS -------------------------------------------------------------------------- */

/*	u7 = xxl (does not display)
	u6 = xl
	u5 = l (person-size; pixelated)
	u4 = m (hand-size; primary for tablet and monitor)
	u3 = s (eyeball-size; primary for handheld)
	u2 = xs
	u1 = xxs 
	u0 = xxxs (does not display)
	*/

.u7 { transform: translate(-50%, -50%) scale(100); }
.u6 { transform: translate(-50%, -50%) scale(100); }
.u5 { transform: translate(-50%, -50%) scale(10); }
.u4 { transform: translate(-50%, -50%) scale(1); } /* At-state = hand-size */
.u3 { transform: translate(-50%, -50%) scale(0.1); }
.u2 { transform: translate(-50%, -50%) scale(0.01); }
.u1 { transform: translate(-50%, -50%) scale(0.001); }
.u0 { transform: translate(-50%, -50%) scale(0.001); }

.u0, .u7 { visibility: hidden; z-index: 3; }

/*	.u0, .u1, .u2 { z-index: 9; }
.u3 { z-index: 7; }
.u4, .u5 { z-index: 5; }
.u6, .u7 { z-index: 3; }	*/
#wedge-upper { z-index: 10; }
#wedge-mid { z-index: 13; }
#wedge-lower { z-index: 4; }

.u0, .u1, .u2, .u3, .u4, .u5, .u6, .u7 {
	/*	backface-visibility: hidden;	*/
	/*	transform-style: preserve-3d;	*/
	/*	will-change: transform, visibility;	*/
}
.u1, .u2, .u3, .u4, .u5, .u6 { will-change: transform; }


.world-ruler { 
	user-select: none;
	transform: translate(-50%, -50%); 
	position: absolute;
	top: 50%; left: 50%;
}
@media (max-width: 449px), (max-height: 449px) {
	.world-ruler { display: none; }
}

	/* Extreme circumstances, assume projector */
	html.above-9 .world-ruler {
		display: none;
	}
	
.world-ruler .ruler-length, .world-ruler .ruler-hash {
	transform: translate(-50%, -50%);
	overflow: hidden;
	position: absolute;
	background-color: var(--back-4);
}

#wedge-upper { width: 2rem; height: 2rem; display: none; }

#wedge-upper .ruler-length { left: 50%; top: 75%; width: calc(100% + 1px); height: 1px; }
#wedge-upper .ruler-hash { width: 1px; }
#wedge-upper .ruler-zero { left: 0; top: 71%; height: 8%; }
#wedge-upper .ruler-ten { left: 50%; top: 71%; height: 8%; }
#wedge-upper .ruler-twenty { left: 100%; top: 71%; height: 8%; }
#wedge-upper .ruler-five { left: 25%; top: 73%; height: 4%; }
#wedge-upper .ruler-fifteen { left: 75%; top: 73%; height: 4%; }
#wedge-upper .ruler-one { left: 5%; top: 74%; height: 2%; }
#wedge-upper .ruler-two { left: 10%; top: 74%; height: 2%; }
#wedge-upper .ruler-three { left: 15%; top: 74%; height: 2%; }
#wedge-upper .ruler-four { left: 20%; top: 74%; height: 2%; }

#wedge-mid { 
	transition: none !important;
	/*	will-change: transform;	*/
	transform: translate(-50%, -50%) rotate(-90deg);
	left: calc(50% - 6rem + 1px);
	width: calc(20rem + 2px); height: 2rem; 
}
#wedge-mid.rotated {
	transform: translate(-50%, -50%) rotate(-180deg);
}

#wedge-mid-inner {
	width: 100%; height: 100%;
	background-color: var(--front-4);
	color: var(--back-4);
}

#wedge-mid .ruler-length, #wedge-mid .ruler-hash { 
	transform: none;
	background-color: var(--back-4); 
}

#wedge-mid .ruler-length { bottom: 0; left: 0; right: 0; height: 2px; }
#wedge-mid .ruler-hash { bottom: 1px; width: 2px; }
#wedge-mid .ruler-zero { left: 0; top: 0; }
#wedge-mid .ruler-ten { left: calc(50% - 1px); height: 0.9rem; }
#wedge-mid .ruler-twenty { right: 0; top: 0; }
#wedge-mid .ruler-five { left: calc(25% - 1px); height: 0.6rem; }
#wedge-mid .ruler-fifteen { right: calc(25% - 1px); height: 0.6rem; }

#wedge-mid .ruler-one { left: calc(5% - 1px); height: 0.3rem; }
#wedge-mid .ruler-two { left: calc(10% - 1px); height: 0.3rem; }
#wedge-mid .ruler-three { left: calc(15% - 1px); height: 0.3rem; }
#wedge-mid .ruler-four { left: calc(20% - 1px); height: 0.3rem; }
#wedge-mid .ruler-six { left: calc(30% - 1px); height: 0.3rem; }
#wedge-mid .ruler-seven { left: calc(35% - 1px); height: 0.3rem; }
#wedge-mid .ruler-eight { left: calc(40% - 1px); height: 0.3rem; }
#wedge-mid .ruler-nine { left: calc(45% - 1px); height: 0.3rem; }
#wedge-mid .ruler-eleven { left: calc(55% - 1px); height: 0.3rem; }
#wedge-mid .ruler-twelve { left: calc(60% - 1px); height: 0.3rem; }
#wedge-mid .ruler-thirteen { left: calc(65% - 1px); height: 0.3rem; }
#wedge-mid .ruler-fourteen { left: calc(70% - 1px); height: 0.3rem; }
#wedge-mid .ruler-sixteen { left: calc(80% - 1px); height: 0.3rem; }
#wedge-mid .ruler-seventeen { left: calc(85% - 1px); height: 0.3rem }
#wedge-mid .ruler-eighteen { left: calc(90% - 1px); height: 0.3rem; }
#wedge-mid .ruler-nineteen { left: calc(95% - 1px); height: 0.3rem; }

#rotator-mid {
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%; top: 50%;
	width: 2rem; height: 2rem;
}

#rotator-mid div {
	margin: 0.4rem;
	padding: calc(0.2rem - 1px);
	border: 1px solid var(--back-4);
	background-color: var(--front-4);
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 200,
		'GRAD' 25,
		'opsz' 24;
	font-size: 0.8rem;
	line-height: 1;
	text-align: center;
}

#units-s {
	display: none;
	transform: translateZ(0); /* Forces GPU layer */
	z-index: 10;
	transform: translate(-50%, -50%); 
	position: absolute;
	top: 50%; left: 50%;
	color: var(--back-4);
}
#units-s { width: 2rem; height: 2rem; }

.unit-s { 
	transform: translate(-50%, -50%); 
	position: absolute;
	top: calc(75% + 1em);
	width: 10em; 
	font-size: 16px;
	text-align: center;
}

#unit-s-0 { left: 0; display: none; }

body.entity-n40 #unit-s-0, body.entity-n39 #unit-s-0, body.entity-n38 #unit-s-0, body.entity-n37 #unit-s-0, body.entity-n36 #unit-s-0, body.entity-n35 #unit-s-0, body.entity-n34 #unit-s-0, body.entity-n33 #unit-s-0, body.entity-n32 #unit-s-0, body.entity-n31 #unit-s-0 {
	visibility: hidden; 
}

#unit-s-1 { left: 25%; visibility: hidden; }
#unit-s-2 { left: 50%; visibility: hidden; }
#unit-s-3 { left: 75%; visibility: hidden; }
#unit-s-4 { left: 100%; }

.unit-m-outer {
	transition: none !important;
	transform: translate(0, -50%); 
	position: absolute;
	top: 25%;
	font-size: 0.67rem; 
}

.unit-m { 
	color: var(--back-4);
}
#unit-m-1-outer, #unit-m-2-outer, #unit-m-3-outer { transform: translate(-50%, -50%); }

#unit-m-0-outer { left: 0.33rem; right: auto; }
.rotated #unit-m-0-outer { 
	transform: translate(0, -50%) rotate(180deg); 
	left: auto; right: 0.33rem; 
}

#unit-m-1-outer { left: 25%; display: none; }

#unit-m-2-outer { left: 50%; }
.rotated #unit-m-2-outer { 
	transform: translate(-50%, -50%) rotate(180deg); 
}

#unit-m-3-outer { left: 75%; display: none; }

#unit-m-4-outer { left: auto; right: 0.33rem; }
.rotated #unit-m-4-outer { 
	transform: translate(0, -50%) rotate(180deg); 
	left: 0.33rem; right: auto; 
}

#wedge-mid {
	cursor: grab;
}

#rotator-mid {
	visibility: hidden;
	cursor: pointer;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	ENTITY LABELS ------------------------------------------------------------------- */

	/* Big conditionals beyond mobile layout switch */
	/* main ≤ 767vh removes progress strip */

	@media (max-height: 654px) {
		#e-id-l { display: none; }
	}
	@media (max-height: 782px) {
		html.above-65 #e-id-l { display: none; }
	}
	@media (max-height: 816px) {
		html.above-80 #e-id-l { display: none; }
	}
	@media (max-height: 846px) {
		html.above-88 #e-id-l { display: none; }
	}
	@media (max-height: 942px) {
		html.above-96 #e-id-l { display: none; }
	}
	@media (max-height: 1060px) {
		html.above-120 #e-id-l { display: none; }
	}
	@media (max-height: 1258px) {
		html.above-150 #e-id-l { display: none; }
	}

	@media (max-height: 460px) {
		html.above-50 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-50 #e-pointer-m { display: none; }
	}
	@media (max-height: 520px) {
		html.above-65 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-65 #e-pointer-m { display: none; }
	}
	@media (max-height: 550px) {
		html.above-80 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-80 #e-pointer-m { display: none; }
	}
	@media (max-height: 582px) {
		html.above-88 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-88 #e-pointer-m { display: none; }
	}
	@media (max-height: 676px) {
		html.above-96 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-96 #e-pointer-m { display: none; }
	}
	@media (max-height: 866px) {
		html.above-120 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-120 #e-pointer-m { display: none; }
	}
	@media (max-height: 1064px) {
		html.above-150 #e-id-m {
			top: 10px; bottom: auto;
		}
		html.above-150 #e-pointer-m { display: none; }
	}
	
	/* Extreme circumstances, assume projector */
	html.above-9 #e-id-s, html.above-9 #e-pointer-s, html.above-9 #e-pointer-m {
		display: none;
	}


	/* Back to proper Entity Labels styles */

.e-pointer {
	pointer-events: none;
	z-index: 12;
	position: absolute;
	height: 4px;
	background-color: var(--back-4);
}
@media (max-width: 449px), (max-height: 449px) {
  .e-pointer { display: none; }
}

#e-pointer-s { 
	transform: translate(0, -50%);
	left: calc(50% + 1rem); 
	right: 199px;
	bottom: 50%;
}

#e-pointer-m { 
	transform: translate(0, -50%);
	left: calc(50% + 5rem); 
	right: 199px;
	bottom: calc(50% + 5rem);
}

html.above-19 #e-pointer-m, html.above-39 #e-pointer-m { display: none; }

.e-id {
	/*	No negative-value translation here!	*/ 
	pointer-events: none;
	user-select: none;
	z-index: 12;
	position: absolute;
	right: 10px;
	width: 190px;
	padding: 0.5em;
	background-color: var(--back-4);
	color: var(--front-4);
	font-size: 20px;
}

#e-id-s { 
	bottom: calc(50% - 30px);
}
@media (max-width: 449px), (max-height: 449px) {
	#e-id, #e-id-s {
		transition: none !important; /* Was transform, fixed? */
		position: fixed;
		bottom: 0;
		left: 0; right: 0px;
		margin: 0;
		padding: 6px 72px;
		width: auto;
		background-color: var(--back-4);
		font-size: 18px;
		line-height: 1;
		text-align: center;
	}
}
@media (max-width: 400px), (max-height: 400px) {
	#e-id, #e-id-s {
		font-size: 15px;
		line-height: 1.2;
	}
}

#e-id-m { 
	bottom: calc(50% + 5rem - 30px);
}
@media (max-width: 449px), (max-height: 449px) {
	#e-id-m { display: none; }
}
html.above-19 #e-id-m, html.above-39 #e-id-m { 	top: 10px; bottom: auto; }

#e-id-l { 
	top: 10px;
}
html.above-19 #e-id-l, html.above-39 #e-id-l { display: none; }

.e-name {
	font-family: "Recursive", sans-serif;
	font-weight: 850;
	font-style: normal;
	font-variation-settings:
		"slnt" 0,
		"CASL" 1,
		"CRSV" 0,
		"MONO" 0;
}
@media (max-width: 449px), (max-height: 449px) {
	.e-name {
		overflow: hidden;
		margin-bottom: -8px;
		padding: 8px 0;
		background-color: transparent;
	}
}

.e-name em {
	font-variation-settings:
		"slnt" -8,
		"CASL" 1,
		"CRSV" 1,
		"MONO" 0;
}

.e-size { 
	margin-top: 0.33em;
	font-weight: 500; 
	word-spacing: -0.05em;
}
@media (max-width: 449px), (max-height: 449px) {
	.e-size {
		overflow: hidden;
		margin-top: -8px;
		padding: 8px 0;
		background-color: transparent;
	}
}

.e-size sup { 
	font-weight: 650; 
	font-size: 0.7em;
	vertical-align: 0.4em;
	line-height: 1;
}

/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	ENTITIES ------------------------------------------------------------------------ */

/*	This should be called .world-box but .entity was pre-coded; too easy.	*/
.entity {
	/*	will-change: transform, visibility, opacity;	*/
    /*	backface-visibility: hidden;	*/
	position: absolute;
	left: 50%; top: 50%;
	width: 20rem; height: 20rem;
}

.entity-box { 
	/*	will-change: transform, visibility;	*/
    backface-visibility: hidden;
	width: 100%; height: 100%;
}

.entity-box img {
	/*	will-change: transform, visibility;	*/
    /*	backface-visibility: hidden;	*/
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%; top: 50%;
	width: 100%; height: 100%; 
}

@media (min-width: 450px) and (min-height: 450px) {
	.entity-box img {
		backface-visibility: hidden;
		will-change: transform;
	}

	.entity {
		backface-visibility: hidden;
	}
}

/*	These are all overrides, so they are not necessary for new worlds.	*/

#entity-p27 .entity-box img { width: 44.2%; height: 44.2%; }
#entity-p25 .entity-box img { top: 52%; left: 52%; width: 52.8%; height: 60%; }
#entity-p23 .entity-box img { top: 50.118%; left: 49.9222%; width: 47.3%; height: 47.3%; }
#entity-p22 .entity-box img { top: 51.18%; left: 49.222%; width: 94.6%; height: 94.6%; }
#entity-p21 .entity-box img { top: 61.8%; left: 42.22%; width: 35.475%; height: 70.95%; }
#entity-p19 .entity-box img { width: 20%; height: 20%; }
#entity-p18 .entity-box img { top: 49.55%; left: 55.25%; width: 65%; height: 51.7%; }
#entity-p15 .entity-box img { top: 46.5%; left: 46.5%; width: 100%; height: 86.4%; }
#entity-p12 .entity-box img { width: 85%; height: 85%; }
#entity-p11 .entity-box img { width: 51%; height: 51%; }
#entity-p10 .entity-box img { width: 83%; height: 83%; }
#entity-p09 .entity-box img { width: 70%; height: 70%; }
#entity-p08 .entity-box img { top: 60%; left: 49%; width: 166.5%; height: 88.8%; }
#entity-p07 .entity-box img { width: 64%; height: 64%; }
#entity-p06 .entity-box img { width: 105%; height: 58.2%; }
#entity-p05 .entity-box img { width: 95%; height: 70.7%; }
#entity-p04 .entity-box img { width: 65%; height: 70.5%; }
#entity-p03 .entity-box img { top: 45%; width: 92.5%; height: 11.4%; }
#entity-p02 .entity-box img { width: 61.6%; height: 45.3%; }
#entity-p01 .entity-box img { width: 75%; height: 47.8%; }

<!-- #entity-p00 .entity-box img { width: 67.5%; height: 97.5%; } -->
#entity-p00 .entity-box img { width: 78%; height: 92%; }

#entity-n01 .entity-box img { top: 50%; width: 87.4%; height: 77.7%; }
#entity-n02 .entity-box img { width: 75.6%; height: 104.5%; }
#entity-n03 .entity-box img { top: 40%; width: 120%; height: 88.4%; }
#entity-n04 .entity-box img { width: 105%; height: 105%; }
#entity-n05 .entity-box img { width: 72%; height: 72%; }
#entity-n06 .entity-box img { width: 94.5%; height: 86.2%; }
#entity-n07 .entity-box img { width: 55%; height: 55%; }
#entity-n08 .entity-box img { width: 47.2%; height: 50%; }
#entity-n09 .entity-box img { top: 53.05%; left: 46.1%; width: 61.5%; height: 70.1%; }
#entity-n10 .entity-box img { width: 88%; height: 88%; }
#entity-n11 .entity-box img { width: 200%; height: 37.33%; }
#entity-n12 .entity-box img { width: 400%; height: 93.33%; }
#entity-n13 .entity-box img { width: 100%; height: 100%; }
#entity-n14 .entity-box img { width: 58%; height: 58%; }
#entity-n15 .entity-box img { width: 88%; height: 88%; }
#entity-n17 .entity-box img { width: 40%; height: 40%; }
#entity-n18 .entity-box img { width: 60%; height: 60%; }
#entity-n35 .entity-box img { width: 80%; height: 80%; }










/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	RATIO MODE ---------------------------------------------------------------------- */

/*	--------------------------------------------------------------------------------- */
/*	Exclusions ---------------------------------------------------------------------- */

@media (max-width: 449px), (max-height: 449px) {
	aside, #ratio-label, #ratio-current, #number-line { display: none; }
}

/*	--------------------------------------------------------------------------------- */
/*	Main Container (aside) ---------------------------------------------------------- */

aside {
	display: none;
	z-index: 25;
	position: fixed;
	top: 0; bottom: 0;
	left: 0; right: 0;
	padding-top: 2px; /* Resets the overlap */
	background-color: var(--back-4);
}

/*	--------------------------------------------------------------------------------- */
/*	Ratio Headers ------------------------------------------------------------------- */

#ratio-current {
	user-select: none;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 80px; left: 50%;
	border-radius: 6px;
	padding: 6px 18px;
	background-color: var(--front-4);
	color: var(--back-4);
	font-family: "Recursive", sans-serif;
	font-variation-settings:
		"slnt" 0,
		"CASL" 1,
		"CRSV" 0,
		"MONO" 0;
	font-weight: 800;
	font-size: 42px;
	white-space: nowrap;
}

#ratio-current.highlight { background-color: var(--high-4); }

#ratio-current sup {
	font-weight: 900; 
	font-size: 0.7em;
	vertical-align: 0.4em;
	line-height: 1;
}

#ratio-label {
	user-select: none;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 32px; left: 50%;
	padding: 3px 6px;
	background-color: var(--front-1);
	color: var(--front-4);
	font-size: 16px;
	text-align: center;
}

/*	--------------------------------------------------------------------------------- */
/*	Visual Ratios ------------------------------------------------------------------- */

#visual-ratios {
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	overflow: visible;
	transform: translate(-50%, -50%);
	position: relative;
	left: 50%; top: 40%;
	width: 25em;
	font-size: 50px; /* Max size, range dipping no lower than 35–50 */
	text-align: center;
}
@media (max-height: 1100px) {
	#visual-ratios { font-size: 45px; }
}
@media (max-height: 950px) {
	#visual-ratios { top: 42.5%; font-size: 40px; }
}
@media (max-height: 800px) {
	#visual-ratios { top: 45%; font-size: 35px; }
}
@media (max-height: 750px) {
	#visual-ratios { top: 50%; }
}
@media (max-height: 650px) {
	#visual-ratios { top: 55%; }
}
@media (max-height: 600px) {
	#visual-ratios { top: 60%; }
}

#visual-ratios > div {
}

.ratio-unit {
	position: relative;
	width: 4em;
}

.ratio-unit::before {
	content: "";
	position: absolute;
	top: -2.5em;
	bottom: -2.125em;
	left: 0;
	right: 0;
	background: transparent;
	pointer-events: auto;
}

.ratio-unit img {
	margin: 0 auto;
	width: 3em; height: 3em;
}

.unit-size {
    height: 1em;
    font-weight: 500;
    font-size: 1em;
}
.unit-size.highlight { color: var(--high-4); }

.unit-size sup {
	font-weight: 650; 
	font-size: 0.7em;
	vertical-align: 0.4em;
	line-height: 1;
}
.unit-size sup.highlight { color: var(--high-4); }

.unit-name {
	overflow: clip;
	height: 3em;
	font-family: "Recursive", sans-serif;
	font-variation-settings:
		"slnt" 0,
		"CASL" 1,
		"CRSV" 0,
		"MONO" 0;
	font-weight: 850;
	font-size: 0.45em;
	line-height: 1;
}
.unit-name.highlight { color: var(--high-4); }

.unit-name em {
	font-variation-settings:
		"slnt" -8,
		"CASL" 1,
		"CRSV" 1,
		"MONO" 0;
}

.ratio-colon {
	margin-bottom: 0.25em;
	font-weight: 600;
	font-size: 4em;
	line-height: 0.5;
}
.ratio-colon.highlight { color: var(--high-4); }

.change-ratio {
	cursor: pointer;
	z-index: 26;
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%; top: -1.4em;
	padding: 0.05em;
	border-radius: 50%;
	border: 2px solid var(--front-2);
	background-color: var(--back-4);
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 1,
		'wght' 200,
		'GRAD' 72,
		'opsz' 24;
	font-size: 0.8em;
	line-height: 1;
	text-align: center;
}
.change-ratio.down-1 { top: 7.8em; }

.up-1::before, .down-1::before {
	content: "";
	position: absolute;
	left: -0.7em;
	right: -0.7em;
	background: transparent;
	pointer-events: auto;
}
.up-1::before { top: -0.1em; bottom: -2em; }
.down-1::before { top: -2em; bottom: -0.1em; }

.change-ratio:hover {
	transition: none !important;
	background-color: var(--high-4);
	color: var(--back-4);
}

.change-ratio.up-5, .change-ratio.down-5 {
	top: -4em;
	border-radius: 0;
	padding: 0;
	border: 1px solid var(--front-2);
	color: var(--front-2);
	font-size: 0.5em;
	word-spacing: -1.25em;
	white-space: nowrap;
}
.change-ratio.down-5 { top: 14.25em; }
.change-ratio.up-5:hover, .change-ratio.down-5:hover { color: var(--back-4); }

.ratio-cap {
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	border-left: 2px solid var(--front-2);
	border-right: 2px solid var(--front-2);
	width: 19.2em; height: 1.25em;
	font-size: 0.8em;
}
.lpr .ratio-cap { width: 27em; }

#r-cap-top {
	top: -0.8em;
	border-top: 2px solid var(--front-2);
}

#r-cap-bottom {
	top: 7.2em;
	border-bottom: 2px solid var(--front-2);
}

.ratio-unit .up-5,
.ratio-unit .down-5 {
	visibility: hidden;
	transition: visibility 0.1s ease;
}

.ratio-unit:hover .up-5,
.ratio-unit:hover .down-5 {
	visibility: visible;
}

.up-hint, .down-hint {
	transform: translate(0, -50%);
	position: absolute;
	left: calc(50% + 0.6em);
	color: var(--front-4);
	font-weight: 600;
	text-align: left;
}
.up-hint { top: -1.14em; }
.down-hint { top: 6.23em; }

.up-hint div, .down-hint div { font-size: 15px; line-height: 1.5; }

@media (max-height: 950px) {
	.up-hint div, .down-hint div { font-size: 14px; }
}

/*	--------------------------------------------------------------------------------- */
/*	Verbal Ratio -------------------------------------------------------------------- */

#verbal-ratio {
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%; top: 15em;
	width: 25.75em;
	font-family: "Recursive", sans-serif;
	font-variation-settings:
		"slnt" 0,
		"CASL" 1,
		"CRSV" 0,
		"MONO" 0;
	font-weight: 400;
	font-size: 0.6em;
	line-height: 1.15;
	text-align: left; 
}
@media (max-height: 750px) {
	#verbal-ratio { display: none; }
}

#verbal-ratio span:hover {
}

.call-a, .call-b, .call-c, .call-d, .call-e, .call-f, .call-g {
	font-weight: 750;
}

.call-b.highlight, .call-2.highlight, .call-c.highlight, .call-3.highlight, .call-d.highlight, .call-f.highlight, .call-6.highlight, .call-g.highlight {
	color: var(--high-4);
}

/*	--------------------------------------------------------------------------------- */
/*	Number Line --------------------------------------------------------------------- */

#number-line {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-behavior: smooth;
	/* Hide scrollbar for Chrome, Safari and Opera */
	scrollbar-width: none; /* For Firefox */
	-ms-overflow-style: none; /* For IE and Edge */
	position: fixed;
	left: 0; right: 0;
	bottom: 50px;
	margin: 0;
	padding: 0;
	height: 140px;
	font-family: "Recursive", sans-serif;
	font-variation-settings:
		"slnt" 0,
		"CASL" 0,
		"CRSV" 0,
		"MONO" 0;
	font-weight: 400;
	line-height: 0;
	text-align: center;
}
@media (max-height: 1000px) {
	#number-line { bottom: 30px; }
}
@media (max-height: 850px) {
	#number-line { bottom: 10px; }
}
@media (max-height: 650px) {
	#number-line { display: none; }
}
@media (max-width: 449px), (max-height: 449px) {
	#number-line { display: none; }
}

#number-line::-webkit-scrollbar {
    display: none; /* Hides scrollbar (Chrome/Safari) */
}

#number-line #number-inner > div {
}

#number-inner {
	display: inline-block;
	position: relative;
	padding: 0;
	height: 140px;
	font-size: 0;
	line-height: 1;
}

.numline-position, .numline-spacer {
	user-select: none;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	margin: 0;
	width: 80px;
	height: 140px;
	font-size: 18px;
}

.numline-thumbnail {
	display: block;
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%; 
	top: 100px;
	width: 56px; height: 56px;
}
.numline-position:hover .numline-thumbnail {
}

.numline-number {
	display: block;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 20px; left: 50%;
	padding: 8px 16px;
	color: var(--front-4);
	font-weight: 500;
	font-size: 21px;
	line-height: 24px;
	text-align: center;
}
.numline-position:hover .numline-number { 
}

.numline-arrow {
	z-index: 27;
	cursor: pointer;
	user-select: none;
	position: fixed;
	bottom: 192px;
	width: 40px; height: 50px;
	color: var(--front-4);
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' -25,
		'opsz' 24;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
}
@media (max-height: 1000px) {
	.numline-arrow { bottom: 172px; }
}
@media (max-height: 850px) {
	.numline-arrow { bottom: 152px; }
}
@media (max-height: 600px) {
	.numline-arrow { display: none; }
}
@media (max-width: 449px), (max-height: 449px) {
	.numline-arrow { display: none; }
}
	
.numline-arrow:hover { 
	font-variation-settings:
		'FILL' 0,
		'wght' 500,
		'GRAD' 200,
		'opsz' 24;
}

#numline-backward { left: 10px; }
#numline-forward { right: 10px; }

.nlp-h, .nlp-v {
	transition: none !important;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 55px; left: 50%;
	background-color: var(--front-3);
}

.nlp-h { width: 100%; height: 2px; }
/*	#nlp-p04 .nlp-h { 
	width: 800%; height: 6px; 
	background-color: var(--front-4);
}	*/

.nlp-v { width: 2px; height: 32px; }
/*	#nlp-n04 .nlp-v, #nlp-p00 .nlp-v, #nlp-p04 .nlp-v, #nlp-p08 .nlp-v, #nlp-p12 .nlp-v { 
	width: 6px;
	background-color: var(--front-4);
}	*/

/*	--------------------------------------------------------------------------------- */
/*	Export Ratio -------------------------------------------------------------------- */

#export-ratio {
	cursor: pointer;
	position: absolute;
	top: 60px; left: 56px;
	padding: 0;
	width: 16px;
	font-weight: 600;
	font-size: 15px;
}

#ex-rat {
	margin: 0;
	padding: 5px;
	border-top: 1px solid var(--front-4);
	border-right: 1px solid var(--front-4);
	border-bottom: 1px solid var(--front-4);
	width: 41px;
	background-color: var(--front-0);
	color: var(--front-4);
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 1,
		'wght' 200,
		'GRAD' 72,
		'opsz' 24;
	font-size: 30px;
	line-height: 1;
}

#export-ratio:hover #ex-rat { 
	transition: none !important;
	background-color: var(--front-1); 
}

#beneath-rat {
	height: 64px;
	border-left: 1px solid var(--front-4);
}

#beneath-rat span {
	display: none;
	position: absolute;
	top: 2px; left: 44px;
	padding: 4px; 
}
#export-ratio:hover #beneath-rat span { display: block; }

/*	--------------------------------------------------------------------------------- */
/*	Exported Ratio ------------------------------------------------------------------ */

	/* This appears in main (zoom mode) */

#exported-ratio {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 10px; left: 10px;
	padding: 9.25px;
	min-width: 190px;
	background-color: var(--back-4);
	color: var(--front-4);
	font-weight: 600;
	font-size: 45px;
	line-height: 1;
}
@media (max-width: 449px), (max-height: 449px) {
	#exported-ratio { display: none; }
}

#exported-ratio img {
	transition: none !important;
	cursor: pointer;
	display: block;
	width: 49px; height: 49px;
}
#exported-ratio img:hover {
	transition: none !important;
	margin: -3px;
	width: 55px; height: 55px;
}

/*	--------------------------------------------------------------------------------- */
/*	Mode Tabs ----------------------------------------------------------------------- */

#mode-tabs {
	overflow: hidden;
	user-select: none;
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px; right: 8px;
	padding-right: 2px;
	font-size: 20px;
	line-height: 1;
}

.mtab-head, .mtab, #mtab-close {
	border: 1px solid var(--front-4);
	border-left: 1px solid transparent;
	margin-right: -1px;
}

.mtab-head {
	flex: 1;
	padding: 8px 16px 8px 0;
}
#mode-tabs div.mtab-head {
	border-top: 1px solid transparent;
}

.mtab {
	pointer-events: auto;
	padding: 8px;
}

.mtab-selected {
	cursor: default;
	margin-bottom: 1px;
	border-bottom: none;
}
.mtab.mtab-available:hover {
	transition: none !important;
	background-color: var(--front-1);
}

#mtab-close {
	cursor: pointer;
	padding: 3px;
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 150,
		'GRAD' -25,
		'opsz' 30;
	font-size: 30px;
}

#mtab-close:hover {
	transition: none !important;
	background-color: var(--front-1);
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' 200,
		'opsz' 30;
}





/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	--------------------------------------------------------------------------------- */
/*	CALIBRATION --------------------------------------------------------------------- */

#size-calibration {
	z-index: 50;
	position: fixed;
	left: 0; top: 0;
	right: 0; bottom: 0;
	background-color: var(--back-4);
	color: var(--front-4);
	font-weight: 400;
	font-size: 16px;
}

#size-calibration, #size-calibration * {
	transition: none;
}

#size-calibration strong { font-weight: 800; }

#calibration-header h2 {
	transform: translate(-50%, -50%);
	position: fixed;
	left: 50%; top: 80px;
	padding: 0.125em 0.25em;
	border-bottom: 2px solid var(--front-4);
	min-width: 14.5em;
	font-size: 36px;
	text-align: center;
	white-space: nowrap;
}

#calibration-header h2 .icon {
	position: relative;
	top: 0.2em;
	margin: 0;
	font-size: 36px;
}

#calibration-header p {
	transform: translate(-50%, 0%);
	position: fixed;
	left: calc(50% + 10px); top: 120px;
	width: 500px;
	font-size: 20px;
	line-height: 1.25;
	text-align: left;
}
.ch-inner { background-color: var(--back-4); }

@media (max-width: 549px), (max-height: 549px) {
	#calibration-header p {
		transform: translate(0, 0);
		left: 0; top: 0; right: 0;
		width: auto;
		padding: 16px;
		font-size: 18px; 
	}
	.ch-inner { background-color: transparent; }
}


#calibration-elements {
	transform: translate(0, -50%);
	position: fixed;
	left: 12%; top: 50%; 
	/* border-left: solid 1px var(--front-2); */
	padding: 2em 0;
	/* font-size: 1rem; */
}

.calibration-box {
	margin: 0.25em 0;
	position: relative;
	background-size: cover;
}
#card-box {
	border-radius: 0.33em;
	background-image: url('images/credit-card-half-i.jpg');
}
#inch-box {
	background-image: url('images/ruler-custom.png');
}

#calibration-footer {
}

#calibration-button {
	transform: translate(-50%, 50%);
	cursor: pointer;
	display: block;
	position: absolute;
	left: 50%; bottom: 60px;
	border-radius: 0.5em;
	border: 3px solid var(--back-4);
	padding: 0.5em 0.75em;
	background-color: var(--front-4);
	color: var(--back-4);
	font-size: 28px;
}
@media (max-width: 549px), (max-height: 549px) {
	#calibration-button {
		transform: translate(0, 0);
		left: auto; bottom: 16px; right: 16px;
		border: none;
	}
}

#calibration-button:hover {
	background-color: var(--high-4);
}

#calibration-button:active { color: var(--front-4); }

#ppi-measure {
	transform: translate(-50%, 50%);
	position: fixed;
	left: 50%; bottom: 210px;
	padding: 0.125em 0.25em;
	background-color: var(--back-4);
	color: var(--front-4);
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
}
@media (max-width: 549px), (max-height: 549px) {
	#ppi-measure {
		transform: translate(0, 0);
		left: 8px; bottom: 12px;
		padding: 4px 8px;
		background-color: var(--back-4);
		font-size: 16px;
	}
}

#ppi-output {
	transform: translate(-50%, 50%);
	position: fixed;
	left: 50%; bottom: 170px;
	padding: 0.125em 0.25em;
	background-color: var(--back-4);
	color: var(--front-4);
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
}
@media (max-width: 549px), (max-height: 549px) {
	#ppi-output {
		transform: translate(0, 0);
		left: 8px; bottom: 28px;
		padding: 8px;
		background-color: var(--back-4);
		font-size: 36px;		
	}
}

/* Slider styling */
#ppi-slider {
	transform: translate(-50%, 50%);
	-webkit-appearance: none;
	appearance: none;
	transform-origin: center;
	position: absolute;
	left: 50%;
	bottom: 120px;
	border: 1px solid var(--front-4);
	width: 76vw;
	max-width: 960px;
	height: 8px; 
	background-color: var(--back-4);
	border-radius: 4px;
	--progress: 0%;
}
@media (max-width: 549px), (max-height: 549px) {
	#ppi-slider {
		bottom: 120px;
		width: calc(100vw - 32px);
		max-width: auto;
	}
}

/* Track (unfilled part) */
#ppi-slider::-webkit-slider-runnable-track {
	background-color: var(--back-4);
	width: 8px;
	height: 100%;
	border-radius: 4px;
}

/* Thumb (Draggable handle) */
#ppi-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	background: var(--high-4);
	border-radius: 50%;
	cursor: pointer;
	margin-top: -9px;
}

/* Filled portion - FIXED gradient to fill from bottom to top */
#ppi-slider::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--high-4) var(--progress), var(--back-4) var(--progress));
	width: 8px;
	height: 100%;
	border-radius: 4px;
}

/* Firefox-specific */
#ppi-slider::-moz-range-track {
	width: 8px;
	height: 100%;
	border-radius: 4px;
	border: 1px solid var(--front-4);
	background-color: var(--back-4);
}

#ppi-slider::-moz-range-progress {
	background: var(--high-4); /* Filled portion */
	width: 8px;
	border-radius: 4px;
}

/*	Firefox attempt	*/

/* Firefox thumb */
#ppi-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--high-4);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Firefox track progress */
#ppi-slider::-moz-range-progress {
    background: var(--high-4);
    height: 100%;
    border-radius: 4px;
}

/* Firefox track */
#ppi-slider::-moz-range-track {
    background: var(--back-4);
    height: 100%;
    border-radius: 4px;
    border: 1px solid var(--front-4);
}

/* For Firefox, we need to adjust the progress fill differently */
#ppi-slider {
    background: linear-gradient(to right, var(--high-4) var(--progress), var(--back-4) var(--progress));
}

/* Fixing the slider-on-mobile issue */

.desktop-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 549px), (max-height: 549px) {
	.desktop-only { display: none; }
	.mobile-only { display: block; }
}

.calibration-buttons {
	position: fixed;
	display: none;
	flex-wrap: wrap;
	left: 11px; bottom: 11px;
	padding: 0;
	width: 180px;
	background-color: white;
	font-weight: 600;
	font-size: 20px;
}

.calibration-buttons button {
	display: block;
	margin: 5px;
	width: 50px;
    border-radius: 6px;
	border: 2px solid var(--front-4);
	background-color: var(--back-4);
	color: var(--front-4);
	line-height: 45px;
	text-align: center;
}

.calibrating, .calibrating * {
	transition: none !important;
}





#input-blocker {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
}