<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@font-face {
	font-family: champ;
	src: url('images/style/font-champ-bold.ttf') format('truetype');
	font-display: swap;
}
/*@font-face {
	font-family: raleway;
	src: url('images/style/font-raleway-regular.ttf') format('truetype');
	font-display: swap;
}*/
/* 0 red, 30 orange, 60 yellow, 90 lime, 120 green, 150 turquoise, 180 cyan, 210 cobalt, 240 blue, 270 violet, 300 magenta, 330 crimson */

:root {
  /* https://contrast-ratio.com */

--txtClr: #333;
--bgClr: hsl(0, 0%, 100%);
--bg: linear-gradient(to right, hsla(214, 100%, 90%, 100%) 0%, hsla(214, 100%, 90%, 0%) 20%, hsla(214, 100%, 90%, 0%) 50%, hsla(214, 100%, 90%, 0%) 80%, hsla(214, 100%, 90%, 100%) 100%);

--a0Clr: hsl(60, 100%, 97%);    /* v v light yellow */   
--a1Clr: hsl(50, 100%, 95%);    /* v light yellow */   
--a2Clr: hsl(50, 100%, 85%);    /* light yellow  */ 
--a3Clr: hsl(45, 100%, 77%);    /* sand */ 
--a4Clr: hsl(50, 100%, 28%);    /* gold (text) */

--b0Clr: hsl(213, 100%, 96%);   /* v v light  blue */ 
--b1Clr: hsl(214, 100%, 93%);   /* v light blue */ 
--b2Clr: hsl(214, 100%, 84%);   /* light blue */ 
--b3Clr: hsl(214, 65%, 43%);    /* pretty blue (text) */
--b4Clr: hsl(214, 100%, 25%);   /* dark blue (text) */

--o1Clr:  hsl(30, 100%, 45%);   /* orange (text) https://contrast-ratio.com contrast min 3 (large text) 4.5 (normal text) to b1Clr */
/*--o1Clr: hsl(36, 80%, 40%); hsl(60, 80%, 30%); hsl(30, 100%, 41%) orange  hsl(100, 100%, 30%) green */
--r1Clr: hsl(0, 100%, 60%);    /* red (text) */

--hdrImg: url(images/hdr-lite.svg);
--hdrAdvImg: url(images/hdr/hdr-adv-lite.svg);
--h1Shadow2: 2px 2px 2px hsl(0, 0%, 100%), inset 1px 1px 1px hsl(24, 100%, 100%);
--h1Shadow: 1px 1px 1px hsl(0, 0%, 100%), -1px -1px 1px hsl(0, 0%, 100%);

--trans: all linear 0.5s; 

--boldWt: bold;
--boldPct: 100%;
}

:root[theme='dark'] {
--txtClr: hsl(0, 0%, 90%);
--bgClr: hsla(214, 20%, 10%, 100%);
--bg: linear-gradient(to right, hsl(214, 50%, 10%) 0%, hsl(214, 20%, 9%) 20%, hsl(214, 20%, 9%) 50%, hsl(214, 20%, 9%) 80%, hsl(214, 50%, 10%) 100%);

--a0Clr: hsl(220, 50%, 20%);    /* dark blue is much nicer than dark yellow */   
--a1Clr: hsl(220, 65%, 26%);    /*  dark blue*/     
--a2Clr: hsl(220, 50%, 30%);    /*  */ 
--a3Clr: hsl(50, 90%, 85%);    /* sand */ 
--a4Clr: hsl(50, 100%, 90%);    /* v light yellow (text) */

--b0Clr: hsl(210, 80%, 9%);   /* dk blue */ 
--b1Clr: hsl(210, 80%, 12%);    /* dk blue */ 
--b2Clr: hsl(210, 100%, 25%);    /* med blue */ 

--b3Clr: hsl(214, 100%, 84%);   /* light blue (text) */
--b4Clr: hsl(214, 100%, 94%);   /* v light blue (text) */

--o1Clr: hsl(50, 100%, 50%);    /* gold (orange) */
--r1Clr: hsl(0, 100%, 65%);    /* red (text) */

--hdrImg: url(images/hdr-dark.svg);
--hdrAdvImg: url(images/hdr/hdr-adv-dark.svg);
--h1Shadow1: 2px 2px 2px hsl(214, 10%, 19%), -2px -2px 2px hsl(214, 10%, 19%), 2px -2px 2px hsl(214, 10%, 19%), -2px 2px 2px hsl(214, 10%, 19%); 
--h1Shadow2: 1px 2px 5px hsl(220, 90%, 20%), 0px 0px 0 hsl(214, 100%, 100%);
--h1Shadow: 2px 2px 2px hsl(0, 0%, 0%), -2px -2px 2px hsl(0, 0%, 0%);

--trans: all linear 0.5s; 

--boldWt: 900;
--boldPct: 106%;
}

.imgBg {background-color: aqua; border:3px solid aqua; border-radius: 3px;}
/* algebra/binomial-theorem.html */

b { font-weight: var(--boldWt); font-size: var(--boldPct); }

/* themed bgs used in: quadrilaterals.html numbers/golden-ratio.html cross-number.js et al */
	.bg {background-color:var(--bgClr);}
	.bga1 {background-color:var(--a1Clr);}
	.bga2 {background-color:var(--a2Clr);}
	.bgb1 {background-color:var(--b1Clr);}
	.bgb2 {background-color:var(--b2Clr);}
	.fga3 {color:var(--a3Clr);}
	.fga4 {color:var(--a4Clr);}
	.fgb3 {color:var(--b3Clr);}
	.fgb4 {color:var(--b4Clr);}
	.fgo1 {color:var(--o1Clr);}
	.fgr1 {color:var(--r1Clr);}

/* svg blue background: 6666ff1a hsla(240,100%,70%,10%)
 
good cross-theme setting:
   border: 2px solid hsla(240,100%,70%,10%);
   background-color: hsla(240,100%,70%,10%);
 
 * */

@media all {
	body { margin: 0; padding: 0; background:var(--bg); color:var(--txtClr); }
	html { font-size: 16px; font-family: Verdana, Arial, Tahoma, sans-serif;  line-height:1.52; }
	.mid { max-width: 800px;  margin:auto; background: none; }

	img { max-width: 100%; min-width:8px; height:auto; }

/*img:not([alt]){ outline:0.4rem solid red; }*/
/*div {border: 1px solid blue;} */

	article { margin-left:2px; }  /* so text is not hard against left edge */

/* color: var(--b3Clr); mix-blend-mode: difference; text-shadow: var(--h1Shadow);outline: 5px dotted green;*/
	
	h1 { margin-top: 20px; font: 1.8rem Verdana, Tahoma, Arial, sans-serif;
  background-color: var(--b4Clr);  color: transparent;   text-shadow: 0px 2px 4px var(--b0Clr);           background-clip: text; }

	h2 { margin: 3.7rem 0 0.8rem 0; font: 2rem champ, Verdana; color: var(--r1Clr); }
	h3 { margin: 2.1rem 0 0.6rem 0; font-weight: normal; font-size: 1.3rem; color: var(--b3Clr); }
	h4 { margin: 1.4rem 0 0.6rem 0; font-weight: normal; font-size: 1.2rem; font-variant: small-caps; color: var(--o1Clr); }
	
	
	h1 + h2 {margin-top: 2rem;}  /* h2 directly following h1 can have a smaller gap */
	h1 + h3 {margin-top: 1rem;}  
	h2 + h3 {margin-top: 1rem;}

	textarea {color: var(--b3Clr); background-color:  var(--b1Clr); padding:5px; border-radius:10px; font-size: 1.1rem; font-family: Verdana, Arial, Tahoma, sans-serif;}

/* General */
	.large { font-size: 1.1rem; color: var(--b3Clr); }
	.larger { font-size: 1.2rem; color: var(--o1Clr); transition: var(--trans);}
	.largest { font-size: 1.6rem; color: var(--a4Clr); }
  .huge { font-size: 1.6rem; font-weight: bold; color: var(--b3Clr);}

	p { min-width:10ch; max-width: 68ch; padding: 0.25rem 0; overflow: auto; }  /* padding fixes strange vert scrollbars with overflow auto */

/* links within p */
	p a { display:inline-block; padding: 0.1rem 0.3rem 0.1rem 0.3rem; border: solid 1px var(--b2Clr); border-radius: 0.6rem; background-color: var(--a0Clr);  }
	p a:hover { border: solid 1px var(--a3Clr); background-color:var(--a2Clr); cursor: pointer; }
	
	a:link { color: var(--b4Clr); }
	a:visited { color: var(--b3Clr); }	

	
	.nobr	{ white-space:nowrap; }
 
	.center, .centerfull { margin-left:auto; margin-right:auto; text-align: center;  }
	.full { overflow-x: scroll; overflow-y: hidden; width: 96vw; margin-left: -48vw; margin-right: -48vw;
		position: relative; left: 50%; right: 50%;
		box-shadow: 0 0 3px 2px var(--b2Clr);
	}


	/* example  */
	.example { margin: 1.3rem 0.6rem 1.9rem 3rem; background-color:  var(--b1Clr); padding: 0.3rem 0.6rem 0.6rem 0.6rem; border: 2px solid var(--bgClr); border-radius: 0.6rem;
    box-shadow: 0.2rem 0.2rem 0.3rem hsl(214, 100%, 20%); overflow:hidden; }
	.example h3, .example .h3 { font-size: 1.1rem; margin: 0.1rem -0.1rem 0.1rem -0.1rem; padding: 0.1rem 0.3rem; background:  var(--a1Clr); border-radius: 0.5rem; color: var(--b4Clr) }


	/* center80  */
	.center80 { margin: 1.3rem auto 0.8rem auto; padding: 0.5rem; max-width: 66ch; 	
		background: linear-gradient(170deg, var(--b0Clr) 0%, var(--b1Clr) 90px, var(--b1Clr) calc(100% - 90px), var(--b2Clr) 100%);
		border: 0.15rem solid   var(--b2Clr); border-radius: 1.9rem;
	}
	.center80 h3 { margin: 0.3rem 0 1.3rem 0.6rem; color: var(--b3Clr); }
	.center80 p { margin: 0.6rem 0 0.5rem 0; }

	.indent50px {
		margin-left: 2rem;
	}

.mono {
	font-family: "Courier New", Courier, monospace;
	font-size: 20px;
	line-height: 24px;

}


	
	.times { font: bold 130% "Times New Roman", serif; }

	.head { margin: 0.2rem 0 0.6rem 0; padding: 0.5rem; color: var(--fgClr); text-align:center;
		background: var(--a1Clr) 0%;	border: 2px solid var(--a2Clr); border-radius: 25px; font: bold 1.1rem Verdana; }
		







 /* li */

  p+ul {  margin-top: -1rem;}
	li { color: var(--b4Clr); list-style-type: disc;  padding-top: 0.5rem;}
	li:hover { color: var(--b3Clr); }


ul ul {   /* reduce indent for nested ul */
	margin-left: -9px;
}

ul p {
	text-indent: 0;/* cancel any text indent */
}

ul.large {margin-top:3px;}
ul.large &gt; li { font-size: 1rem; margin-top: 9px; padding: 2px 12px 4px 9px; color: var(--b4Clr); border-radius: 10px; background-color: var(--b1Clr);  list-style-image: url('images/style/disc.svg'); }
ul.large &gt; li:hover { background-color: var(--a1Clr); }

ul.larger {margin-top:3px;}
ul.larger &gt; li { font-size: 1rem; margin-top: 10px; padding: 10px; color: var(--b4Clr); background-color: var(--b1Clr); border-radius: 10px; list-style-image: url('images/style/disc.svg'); }
ul.larger &gt; li:hover { background-color: var(--b2Clr);  }


ul.none {
	text-indent: 1.5rem;
}
ul.none li {
	list-style: none;
}


ul.disc {
	text-indent: -1.5rem;
}
ul.disc li {
	list-style: none;
}
ul.disc li::before {
	content: "\25CF"  !important;
  margin-right: 9px;
  color: var(--b2Clr);
	font-size: 140%;
	line-height: 100%;
}

ul.dart {
 	text-indent: -1.5rem;
}
ul.dart li {
	list-style: none;
}
ul.dart li::before {
	content: "\27A4"  !important;
  margin-right: 9px;
  color: var(--a4Clr);
	font-size: 110%;
	line-height: 90%;
}

ul.star {
	text-indent: -1.5rem;
}
ul.star li {
	list-style: none;
}
ul.star li::before {
	content: "\273A"  !important;
  margin-right: 9px;
  color: var(--a3Clr);
	font-size: 110%;
	line-height: 100%;
}

/* https://www.toptal.com/designers/htmlarrows/symbols/ heart 2661 2764, gear 2699, tick 2714, star 2605, open star 2729, 8-star 2737 (nice), angle brack: 276F  */
ul.gear {
	text-indent: -1.5rem;
}
ul.gear li {
	list-style: none;
}
ul.gear li::before {
	content: "\2699"  !important;
  margin-right: 9px;
  color: var(--a3Clr);
	font-size: 130%;
	line-height: 100%;
}
 
	/* so  */
	.so { background: url(images/style/so.svg) no-repeat 3rem 25%; padding: 0 0 0.6rem 100px; color: var(--b3Clr); font-size: 1.1rem; }
	p.so { margin:3px; }
	li .so { padding: 0 0 0.6rem 6.6rem; margin-top:4px;}
	.so ul { margin-top: 0.4rem; }
	
	/* tables  */	
	.simple { overflow:auto; }
	.simple table { border-collapse: collapse; background-color: var(--b1Clr); }
	.simple .tbl { background-color: var(--b0Clr); padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.3rem;}
	.simple th, .simple td { border: solid 0.1rem var(--bgClr); padding: 0.3rem; }
	.simple th { background-color: var(--b2Clr); }
	
	.beach { overflow:auto; }
	.beach p { background-color: var(--b0Clr); }
	.beach table { border-collapse: collapse; background-color: var(--b0Clr);  }
	.beach th, .beach td { border: solid 0.1rem var(--bgClr); padding: 0.3rem; color: var(--b4Clr);  }
	.beach th { background-color: var(--a2Clr); color: var(--a4Clr);  }
	
	/* NB: different attempts to have a single background image PLUS a gradient from corner to corner */
	/* history */
	.history {
		min-height:3rem;
		margin: 1.6rem 2rem 1.3rem 2rem;
		padding: 0.6rem 0.8rem 0.7rem 5rem;
		color: var(--txtClr);
		border: 0.2rem solid var(--a1Clr);
		text-indent: 0.6rem;
		border-radius: 0.6rem;
		background: var(--a1Clr) url(images/style/scroll.svg) no-repeat;
		background-position: 0.3rem 0.3rem; 
		box-shadow: inset 0 0 1.1rem 0  var(--a2Clr); 
	}  
	.history p { margin: 0.5rem 0 0.3rem 0; }
	
  /* words */
  .words {
		margin: 0.9rem 2rem 1.6rem 2rem;
		padding: 0.3rem 0.3rem 0.4rem 4rem;
    background: var(--b1Clr) url(images/style/word.svg) no-repeat;
    background-position: 0.3rem 0.2rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--b2Clr);
		border-radius: 0.6rem; 
		min-height: 2.1rem;
	}
	.words p { margin: 0.5rem 0 0.3rem 0; }

	  	/* info */
	.info { 
		margin: 0.9rem 2rem 1.6rem 2rem;
	  padding: 0.6rem 0.3rem 0.7rem 4rem; 
		background-image: url(images/style/info.svg), linear-gradient(170deg, var(--bgClr) 0%, var(--b2Clr) 100%);
		background-position: 9px 0.4rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--b2Clr); 
		border-radius: 1.9rem;
		box-shadow: inset 0 0 0.9rem 0.2rem  var(--b2Clr); 
		min-height: 2.3rem;
	}
		.info p { margin: 0.5rem 0 0.3rem 0; }

	  /* fun */
  /*.fun {margin: 0.6rem 1.3rem 0.6rem 1.3rem; padding: 0.3rem 1.4rem 0.1rem 26px; 
	border: 0.1rem solid var(--a2Clr); border-left: 0.4rem solid var(--a2Clr); border-right: 0.4rem solid var(--a2Clr); border-radius: 2.1rem;
	background: var(--a1Clr); box-shadow: inset 0 0 0.6rem var(--a4Clr); }      handsome!*/
  /*.fun {margin: 0.6rem 1.3rem 0.6rem 1.3rem; padding: 0.3rem 1.4rem 0.1rem 26px; 
	border: 0.3rem solid var(--a2Clr);border-radius: 2.1rem; box-shadow: inset 0 0 9px var(--a4Clr);
	background: var(--a1Clr);  }      handsome!*/
/*.fun {margin: 0.6rem 1.3rem 0.6rem 1.3rem; padding: 0.3rem 1.4rem 0.1rem 26px; border-radius: 2.1rem; 
	border-top: 0.2rem dotted var(--a3Clr);
	border-right: 0.2rem dotted var(--a3Clr);
	border-bottom: 0.2rem dotted var(--a3Clr);
	border-left: 0.2rem dotted var(--a3Clr);
	background: var(--a0Clr);  } */
	
	.fun {
		padding: 0.2rem 1.3rem 0 1.4rem;
		margin: 1rem;
		border-radius: 3rem;
		border: 2px solid var(--bgClr);
		box-shadow: 1rem 1rem 1rem -1rem var(--b3Clr), /* dn rt */
		1rem -1rem 1rem -1rem var(--a3Clr), /* up rt */
		-1rem 1rem 1rem -1rem var(--a3Clr), /* dn lt */
		-1rem -1rem 1rem -1rem var(--a3Clr);    /* up lt */
		background: linear-gradient(170deg, var(--bgClr) 0%, var(--bgClr) 50%, var(--a0Clr) 100%);
	}  
	.fun h3 { margin-top: 0.9rem;}
	p.fun {padding: 0.6rem 1.3rem 0.6rem 1.4rem; }
	
  /* def */
	/*.def {margin: 0.6rem 0.9rem 0.6rem 0.9rem; padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1.9rem; background:var(--a0Clr); 
	border: 1px solid var(--a2Clr);   box-shadow: inset 0 0 0.4rem var(--a2Clr);} */
	
	.def {margin: 1.6rem 1rem 1.3rem 1rem; padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(160deg, var(--a0Clr) 0%, var(--a0Clr) 100%);
		border: 2px solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);
/*		content-visibility: auto;
		contain-intrinsic-size: 1px 200px; */
	}
	.def h3 {margin-top: 1rem;}

	   /* hide */
	.hide { color: var(--a2Clr); background-color: var(--a2Clr);  border: 1px solid var(--a3Clr); padding: 3px 15px 3px 15px; }
  .hide:hover { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--a2Clr); }

	.dotpoint { margin: 0 0 0.6rem 0.2rem; padding: 0.3rem 0.6rem 0.3rem 1.1rem; color: var(--b4Clr);
		background:  linear-gradient(-5deg, var(--a0Clr) 0%, var(--a1Clr) 100%); font-size: 1rem;
		/*background-color: var(--a1Clr);*/
    /*background-image: url(images/style/dotpoint.svg); background-repeat: no-repeat;  background-position: left center;*/
		border: 2px solid var(--a2Clr);  border-radius: 25px;
    border-left: 9px solid var(--b2Clr);  
	}
  .dotpoint p { font-size: 1rem; }
  .dotpoint h3 { margin-top: 1rem; }
 
  
	/* questions */
	.questions { min-height:3rem; margin: 2rem 0.3rem 2rem 0.3rem; padding: 0.6rem 0.3rem 0.7rem 118px; border: 1px solid var(--b3Clr); 
		border-radius: 0.6rem; font-size: 1.1rem; 
		background-image: url(images/style/questions.svg), linear-gradient(120deg, var(--a0Clr) 0%, var(--a1Clr) 100%); background-repeat: no-repeat;
	}  
	.questionshuh { min-height: 3rem; margin: 2rem 2rem 2rem 2rem; padding: 0.6rem 0.3rem 0.7rem 7.4rem; border: 1px solid var(--b3Clr); border-radius: 0.6rem; font-size: 1.1rem; background: var(--b0Clr) url(images/style/questions.svg) no-repeat; }  /* #DFFFE1*/
  .questions a { padding: 5px 3px 5px 3px; font-weight: normal; font-size: 1.1rem; }

	
	/* activity */
	.activity { font-size: 1.1rem; background: var(--b1Clr) url(images/style/activity-div.svg) no-repeat;  padding: 0.6rem 0.3rem 0.7rem 11.3rem;  
	border: 1px solid var(--b3Clr); border-radius: 0.6rem; margin: 2.1rem 2.1rem 1.9rem 2.1rem; }
	.activity a { font-size: 1.1rem; font-weight: normal; padding: 0; }
	
	
 /* related */
	.rel-title { font-weight: bold; font-size: 1.1rem;  }
	.related { min-height: 3.1rem; border-top: 0.2rem solid  var(--b2Clr); border-bottom: 0.2rem solid var(--b2Clr); 
		margin-top: 0.6rem; margin-bottom: 0.6rem; padding-top: 0.8rem; padding-bottom: 9px;  
		font-weight: bold; font-size: 1.1rem; 	
		background-image: url(images/style/related.svg), linear-gradient(120deg, var(--b0Clr) 0%, var(--b1Clr) 100%);
		background-repeat: no-repeat;	
		clear: none; 
	}
	.related a { display: list-item; margin-top: 0.1rem; margin-left: 180px; font-weight: normal; list-style-type: circle; }	
	
	

	
	
.shadow {
	/* https://neumorphism.io/#d0cbf5 */
	padding: 0.2rem 1.5rem;
	border-radius: 2.1rem;
	background: var(--b2Clr);
	box-shadow: inset 0.3rem 0.3rem 0.6rem var(--b0Clr), inset -0.3rem -0.3rem 0.6rem var(--b3Clr);
		/* x y blur spread inset color 
		0.5rem 0.5rem 0.9rem var(--b1Clr),
		0.5rem -0.5rem 0.9rem var(--b0Clr)*/
	}

	
/*.video { position: absolute; left:0px; min-width:70px; min-height:37px; }*/
	.video { float:left;  min-width:80px; min-height:37px; margin-right:-80px; font-size: 12px; }

	/* in-line "table" fractions */
	.intbl { text-indent:0; display: inline-table; text-align: center; vertical-align: 40%; margin: 0 0.1rem 0 0.1rem; border-collapse: collapse; }
	.intbl em { display: table-row; text-align: center; border-bottom: 0.12ch solid; font-size: 93%; font-style: inherit; line-height: 130%;}
	.intbl strong { display: table-row; text-align: center; font-weight: inherit; font-size: 93%; line-height: 120%; }
	.intbl em:before, .intbl em:after, .intbl strong:before, .intbl strong:after { content: "\2005";	}  /* 2005=unicode 1/4 em space */

	.hilite { background-color: var(--a2Clr); padding-left: 0.3rem; padding-right: 0.3rem;  }
	
	sup .intbl em { line-height: 100%; }
	sup .intbl strong { line-height: 100%; }


	/**** LAYOUTS ****/
	
	.flexx {display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.6rem; }
	.flexx .col {  text-align: center;   }

	/* deprecate and repurpose */
	.flexy {display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.3rem; margin-bottom: 0.6rem; }
	.flexy .col {  text-align: center;   }
	.flexy .rt {  text-align: left; max-width: 60ch;  }

	.box {
	display: inline-block;
	text-align: center;
	vertical-align:top;
 	margin: 0 10px 20px 0;
/* 	border: 1px solid blue; */
}
.box:not(:last-child) {
  margin-bottom: 2%;
}
.box + .box {
  margin-left: 2%;
}

	/* "table"-like features for equations etc calculus/introduction.html */
	.tbl { display: table; table-layout:auto; margin-right: auto; margin-left: auto; border-collapse:separate; border-spacing: 0 0.6rem;
	background: linear-gradient(to bottom right, var(--t0Clr) 0%, var(--t0Clr) 50%, var(--t0Clr) 100%);
	border: 1px solid var(--b0Clr); padding: 0 0.5rem 0 0.5rem; border-radius: 0.6rem;  }
	.tbl .row { display: table-row; height: 1.6rem; }
	.tbl .row .lt,	.tbl .row .left { display: table-cell; text-align: right; padding: 0 0.6rem 0 0; color: var(--a4Clr); font-size: 1.05rem; vertical-align:baseline; }
	.tbl .row .rt,	.tbl .row .right	.tbl .row .rtlt	.tbl .row .rtct	.tbl .row .rtrt { display: table-cell; padding: 0 0 0 0.4rem; color: var(--b3Clr); font-size: 1.1rem; font-weight: normal;  vertical-align:baseline; white-space: nowrap;}
	.tbl .row .rtlt  { text-align: left;  white-space: normal; }
	.tbl .row .rtct  { text-align: center;  white-space: normal; }
	.tbl .row .rtrt  { text-align: right;  white-space: normal; }
	.tbl .row img {  vertical-align:middle; }
	.tbl .row i { font-size: 0.9rem; color: var(--txtClr); }
	.tbl p { margin: 0.6rem auto 0.6rem auto; color: var(--b3Clr);  }


.two {
  display: grid;
  grid-template-columns: auto auto;
	justify-content: center;
	align-items: end;
	margin:auto;
	width:fit-content;
	row-gap: 10px;
 	background: linear-gradient(to bottom right, var(--b1Clr) 0%, var(--b0Clr) 50%, var(--b1Clr) 100%);
/*  	border: 1px solid var(--b2Clr);  */
	padding: 0.5rem; border-radius: 0.6rem;
}
.two .lt {
	grid-column: 1 / span 1;
  text-align: right; padding: 0 0.7rem 0 0; color: var(--a4Clr); font-size: 1.05rem; vertical-align:baseline; align-self:start;
/* border: 1px solid blue; */
}
.two .rt {
	grid-column: 2 / span 1;
/* border: 1px solid blue; */
  padding: 0 0 0 0.4rem; color: var(--b3Clr); font-size: 1.1rem; font-weight: normal;  vertical-align:baseline; white-space: nowrap;
/* 	justify-self: start; */
}
.two .rt.flow {
    white-space: normal;
}

.two .ct {
	grid-column: 1 / -1;
	text-align: center;
}

/* manually control sup text so it does not push whole line down */
.two .rt sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4rem; /* Adjust the value as needed for alignment */
}

.many {
	display: grid;
	grid-template-columns: repeat(auto-fill, 220px);
	gap: 1rem;
	justify-content: center; /* Centers the grid within the container */
}
.many .ct {
	padding: 0.3rem;
	text-align: center;
}
.many .lt {
	padding: 0.3rem;
	text-align: left;
}


	.floatLt {float:left; margin:0 10px 10px 0;  text-align:center;}
	.floatRt {float:right; margin:0 0 10px 10px; text-align:center;}

/* SNIPPETS best used locally

nice simple table formatting
table {border-spacing: 0px;}
td, th {  border: 1px solid hsla(240,100%,70%,0.3) }
geometry/ellipse-perimeter.html 

.tall {display:inline-block;  margin: -4% 0.1% 4% 0%; transform: scaleY(2.5) translateX(20%);}
geometry/ellipse-perimeter.html

integrals, sums   ...   DEPRECATE use intgl locally instead as each page can have different needs 

.int { font: italic 150% Georgia, Arial; position: relative; top: 1px; padding: 0 1px 0 0.2rem;} 
differential-equations-first-order-linear.html, differential-equations-bernoulli.html, differential-equations-variation-parameters.html

.intgl {...}
numbers/factorial.html calculus/arc-length.html, solids-revolution-disk-washer, solids-revolution-shells.html /algebra/infinite-series.html

.sigma {...}
calculus/fourier-series.html

.limit .lim {...}
numbers/gamma-function.html  calculus/limits-infinity.html  

.choose {...} (n choose r)
combinatorics/combinations-permutations.html, pascals-triangle.html

.nthroot {font-size:75%;display:inline-block; margin-left: -0.5em; transform: translateX(0.8em) translateY(-1em);}  
 algebra/exponent-fractional.html, /numbers/nth-root.html (started)

.mat {...}
/physics/bra-ket-notation.html, /algebra/matrix-inverse.html

.bra {...} .ket {...} .braket {...}
/physics/bra-ket-notation.html

.vertellip {...}  vertical ellipsis
/numbers/nth-root.html 

time-clocks.html, sets/boolean-algebra.html

*/



	.overline { border-top: 0.11rem solid; }

 .bar {
    display: inline-block;
    text-decoration: none;
    position: relative;
  }
 .bar:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0.25rem;
    left: 0;
    border-top: 0.11rem solid;
}




	/* JavaScript   */
	.js { position:relative; border-radius: 10px; text-align:center; margin:auto; border: 1px solid var(--b0Clr); }
	.jsCanvas {color: var(--txtClr); background-color:var(--bgClr);}  /* so js can look up theme colors */
	.can {  border-radius:10px; background-color:var(--b0Clr);}   /* when we want a nice border/bg for canvas, such as graphs */
	.pop { padding: 0.4rem; border-radius: 0.5rem; background-color:var(--b2Clr);
		box-shadow: 0.4rem 0.4rem 0.3rem 0 rgba(40,40,40,0.75);
		transition: all linear 0.5s; text-align: center;
	}
	
	.control {  border-radius:0.6rem; padding: 0.3rem 0.3rem;  transition: all linear 0.3s;
		background: linear-gradient(to bottom right, var(--b0Clr) 0%, var(--b1Clr) 100%);
	}
	.wow { padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(120deg, var(--a0Clr) 0%, var(--a1Clr) 100%);
		border: 0.1rem solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);
	}
	
	.sect { background-color:var(--b1Clr); border-radius: 0.3rem; padding: 0.1rem; margin: 0.2rem; border: 1px inset;}
	.label { color:  var(--txtClr); padding: 0.1rem;  outline-style:none; } 

	.item { color: var(--txtClr); background-color: var(--a0Clr);  padding: 0.15rem;  font: 1.2rem Arial; outline-style:none;}
	.item:hover { background-color: var(--b2Clr); }

/*.input  { color: var(--txtClr); background-color: var(--a0Clr); border: 2px inset var(--a1Clr); border-radius: 0.6rem; padding: 2px; font: 1.2rem Arial; outline-style:none; text-align:center; }
	.input:hover { background-color: var(--b0Clr); border: 2px inset var(--b1Clr); }*/
	.input { color: var(--txtClr); background-color: var(--b1Clr); border: 2px inset var(--b1Clr); border-radius: 0.6rem; padding: 3px; font: 1.2rem Arial; outline-style:none; text-align:center;} 
	.input:hover {  box-shadow: inset 2px 2px 2px var(--b2Clr), inset -2px -2px 2px var(--b2Clr);}
	
	.output { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--b2Clr); border-radius: 0.6rem; padding: 3px; font: 1.2rem Arial; text-align: center;  }

	.outbig {  padding: 0.5rem; background: linear-gradient(120deg, var(--b0Clr) 0%, var(--b1Clr) 100%);	border-radius: 1.9rem; 	border: 0.1rem solid  var(--b2Clr);  }
	
	.select { font: 1.1rem Arial; color: var(--txtClr); background: var(--b1Clr); padding: 1px; line-height:1.9rem; text-align:center; cursor:pointer; }
	.radio { font: 1.2rem Arial; background: var(--b0Clr); border: 1px solid var(--a1Clr); padding: 2px 10px; border-radius: 0.6rem; line-height:1.9rem; text-align:left; margin:1px; }
	.radio label {font: 1rem Arial;}
	.radio input {  cursor:pointer; }
	.radio input+label {  cursor:pointer; }
	.radio input:checked+label { font-weight: bold;  }
	/* input[type="radio"]:checked+label {font: 2.2rem Arial; border: 1px solid blue;} */

  /*.script { font: italic 1.2rem Courier; } display:none;*/
	.script { color: var(--bgClr); }

	.btn { text-align: center; margin: 0.1rem; padding: 0 0.5rem 0 0.5rem; text-decoration: none; font: bold 0.9rem/1.6rem Arial, sans-serif; color: var(--b3Clr); 
		border: 0.1rem solid var(--b2Clr); border-radius: 0.6rem; cursor: pointer; background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 30%, var(--bgClr) 100%); 
		outline-style:none; user-select: none;
	}
  .btn:hover, .btn.lo:hover, .btn.hi:hover { background: linear-gradient(to top, var(--a2Clr) 0%, var(--b0Clr) 100%); color: var(--txtClr) }
  .btn.yy { border: solid 0.1rem rgba(255,220,130,0.5); background: linear-gradient(to top right, rgba(255,220,130,1) 0%, var(--bgClr) 100%);  }
  .btn.lo { border: solid 0.1rem var(--b2Clr); background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 100%);  }
  .btn.hi { border: solid 0.1rem white; background: linear-gradient(to top right, var(--a2Clr) 0%, var(--a1Clr) 50%, var(--a0Clr) 100%); box-shadow: 0.1rem 0.1rem 0.3rem var(--b2Clr); }

	.btn2 {
		display: inline-block; 
		margin: 4px 1px; border: 1px solid; border-radius: 6px; padding: 6px 12px; 
		font-family: arial; font-size: 17px; text-decoration: none; 
		background: linear-gradient(to top, var(--a2Clr) 0%, var(--a1Clr) 100%);
	}
  .btn2:hover { background: linear-gradient(to top, var(--b1Clr) 0%, var(--b2Clr) 100%); }
	.btn2:active { position: relative; top: 1px; }

	
  /* large button */
.btnLg {  text-align: center;  padding: 4px; }
.btnLg a { display:inline-block; width:93px; height:39px; padding: 20px 0px 0px 0px; font: bold 16px sans-serif; color:white;
	background: url("images/style/button.svg") 0 0 no-repeat;	text-decoration: none; text-align: center; outline-style:none; }
.btnLg a:hover {
		background-position: -100px 0;
		color:white;
		}
.btnLg a:active {
		background-position: -200px 0;
		color:white;
		}

/* TODO: merge btn and playbtn */

.playbtn {display: inline-block; position: relative; margin-right: 0.2em; padding: 0.6em; 
		 border-radius: 100%;
		background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 20%, var(--bgClr) 100%); 
		border:none;
		cursor: pointer; outline-style:none; user-select: none; }
		
.playbtn:hover {background: linear-gradient(to top right, var(--a2Clr) 0%, var(--b0Clr) 100%); }
.playbtn:before, button:after {content: " "; position: absolute; }
.playbtn:active {top: 0.05em; box-shadow: 0 0.02em 0.03em rgba(0,0,0,.4); }

.play:before {  left: 0.4em; top: 0.26em; border: 0.33em solid transparent;
border-left-width: 0.52em; border-left-color: var(--b3Clr);  }
.play:hover:before {border-left-color: var(--txtClr); }

.pause:before, .pause:after {display: block; left: 0.33em; top: 0.32em; width: 0.22em; height: 0.54em; background-color: var(--b3Clr); }
.pause:after {left: 0.62em; }
.pause:hover:before, .pause:hover:after {background-color: var(--txtClr); }



/* better slider styling for FF var(--a0Clr)*/
.slider { background:none;  }
.slider::-moz-range-progress {
  background-color: var(--b3Clr);
  height: 0.5rem;
}
.slider::-moz-range-track {
  background-color: var(--b2Clr);
}

/* TODO: https://larsenwork.com/easing-gradients/#editor */

	
/* Template Items */

	#menuLt { display: table-cell; width: 7rem; height: 3.8rem; vertical-align: middle; padding: 0 0 0 1.9rem; text-decoration: none; background: transparent url("images/style/arrow-tall-left.svg") no-repeat left center; }
	#menuRt { display: table-cell; width: 7rem; height: 3.8rem; vertical-align: middle; padding: 0 1.9rem 0 0; text-decoration: none; background: transparent url("images/style/arrow-tall-right.svg") no-repeat right center; }

	/* menu */
	#menuWide { display: block; position:relative;  margin: 0 auto 0 auto;  }
	#menuTiny { display: block; position: fixed; right: 0.2rem; top: 0.2rem; height: 3.6rem; text-align: left; margin: 0;  }  
	#menuSlim { display: none; position: fixed; left:100px; right:100px; top: 6px; }

	.menu {  height: 2.5rem; text-align: center; margin: 0 auto 0.3rem auto; }
	.menu ul { display: inline; margin: 0; padding: 0; font-size: 0; }
	.menu li { display: inline-block; position: relative;  margin: 0; padding: 0.4rem 0.1rem 0.4rem 0.1rem;  border: 1px solid var(--a1Clr); background-color: var(--a0Clr); }
 .menu li:hover { background-color: var(--b2Clr); }
  .menu li:before { content: none; }
	.menu li a { font-size: 0.9rem;  text-decoration: none; padding: 0.4rem 0.4rem 0.3rem 0.4rem; height:1.6rem;  color: var(--txtClr);}
	.menu li ul { display: block; position: absolute; right: 0; top: 27px; z-index: 1; }
	.menu li li { display: block; background-color: var(--b1Clr); }
	.menu ul ul { display: none; }
	.menu ul li:hover &gt; ul { display: block; }

	header {height:100px;}
	
	#hdr { position: absolute; top: 0; width: 100%; height: 100px; margin: auto; z-index: -1; background: var(--hdrImg) no-repeat fixed center top; }
	.adv #hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdrAdvImg) no-repeat fixed center top; }

	#logo { position: absolute;  top:8px; }
	#logo img { display:none;  width: 42px; height: 42px;}

	
	#cookOK { position:absolute; right:2px; top:42px; border-radius: 0.6rem; background-color: var(--b1Clr);
	padding:1px 1px 1px 0.5rem; font: 0.9rem Arial; }
	
	/*	#adHide { position: absolute; left: 50%; top: 0.2rem; margin-left: 410px; text-align: center; font: 0.8rem Verdana; padding:2px; z-index:10; }*/
	#adHide { position: absolute; right: 3px; top: 78px; text-align: center; font: 1rem Verdana; padding:2px;  }
	#adsHide1 { display: inline; }
	#adsShow1 { display: none; }
	
	/* links margin: 0 0 98px auto;*/
	#linkto { position:absolute; right:2px; top:100px; height: 48px; margin: 0 0 5px auto; width: 270px; }

		/* https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ */
	#linkfb, #linktw, #linkpi, #linkgp, #linkem, #linkus, #linkli { display: block; width: 48px; height: 48px; float: left; margin-left: 5px; text-indent: -9999px; background: transparent url(images/style/links48.svg) no-repeat; }
	#linkfb:hover, #linktw:hover, #linkpi:hover, #linkgp:hover, #linkem:hover, #linkus:hover, #linkli:hover { background-color: var(--b2Clr); border-radius: 0.2rem; }	
	#linkfb { background-position: 0 0; }
	#linktw { background-position: -50px 0; }
	#linkpi { background-position: -100px 0; }
	#linkgp { background-position: -150px 0; }
	#linkem { background-position: -250px 0; }
	#linkus { background-position: -300px 0; width: 50px; }
	#linkli { background-position: -350px 0; }
	
	/* hover generally */
	.hov:hover { background-color: var(--a1Clr); border-radius: 0.5rem; }	
	

/* search */
	#search { display:none; position:relative; height: 3rem; margin: 0 auto 20px auto; width: 330px; border: 1px solid blue; }

	#searchFld { width: 16rem; margin: 1px; padding: 0.3rem; border-radius: 0.4rem; font-size: 1.1rem; color: var(--b4Clr); background-color: var(--a0Clr);
	border-color: var(--b2Clr); text-align: left; }
	#searchFld:hover { background-color: var(--b2Clr); }
	#searchBtn { width: 50px; height: 50px; vertical-align: middle; margin-bottom: 1px; border: 1px solid var(--a2Clr); border-radius: 0.3rem; background: var(--a0Clr) url(images/style/search.svg) no-repeat; cursor: pointer;border-style: outset; }
	#searchBtn:hover { background-color: var(--b2Clr); }
	::placeholder { color: var(--b3Clr); opacity: 1; }

		/* Footer*/
		/* https://the-echoplex.net/flexyboxes */
  .foot { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: flex-start; align-items: flex-start;
  background-color: var(--b0Clr); margin-top:30px; padding:10px 0 10px 0; border-top: 1px solid blue;}
  .footCol { order: 0; flex: 0 1 auto; align-self: auto; text-align:left; }
  .footHdr { font: bold 1.1rem Arial; margin: 0 0 5px -6px;  }
  .footItem { margin: 0 0 2px 0; }
  .footCol a {  padding:3px;  text-decoration: none;}

		
	#footMenu { text-align:center; margin: 0.8rem auto 0.5rem auto; }
	#copyrt, .copyrt { margin: 0.6rem auto 0.3rem auto; text-align: center; font: 0.7rem Arial; color: var(--o1Clr); }


/* themeChg: the box around the theme slider */
#themeChg { position: absolute; left: 5px; top: 8px; width: 60px; height: 34px; }
#themeChg input { opacity: 0; width: 0; height: 0; } /* Hide default checkbox */

	/* theme */
	#themeIcon1 { margin: 0.1rem; vertical-align: top; } 
	#themeIcon2 { margin-top: 0.4rem; vertical-align: top;  }  
	.themelite, .themedark { display: inline-block; width: 48px; height: 34px; text-indent: -9999px; background: transparent url(images/style/theme.svg) no-repeat; }
	.themelite { background-position: 0 0; }
	.themedark { background-position: -50px 0; }

#themeSlider1 { position: absolute; top: 0; left: 0; right: 0;  bottom: 0;  background-color: #2196f3;cursor: pointer;  transition: 0.4s;}
#themeSlider1:before {  position: absolute;  content: "";  height: 40px;  width: 40px;  left: 0px; bottom: 4px;  top: 0;  bottom: 0;
  margin: auto 0;  transition: 0.4s;  box-shadow: 0 0px 15px #2020203d;  background: white url(images/style/theme-lite.svg) center no-repeat; }
#themeSlider1:hover { box-shadow: 0 0 5px 5px var(--b4Clr); }

input:checked + #themeSlider1 {  background-color: var(--b3Clr); }
input:checked + #themeSlider1:before {  transform: translateX(24px);  background: white url(images/style/theme-dark.svg) center no-repeat; }

/* Rounded sliders */
#themeSlider1.round { border-radius: 30px; height:30px; }
#themeSlider1.round:before { border-radius: 50%; }


/* example: q.html page */
.minimal header { height: 20px; }
.minimal #hdr { background-image:none;}

.minimal #adHide,
.minimal #menuWide,
.minimal #linkto,
.minimal #adHide,
.minimal #copyrt,
.minimal #footMenu, 
.minimal #cookOK { display: none; }

	.minimal #logo { position: absolute;  top:8px; }
	.minimal #themeChg { position: absolute; left: 5px; top: 8px;   }
}

/* Nov 2020 resolutions: 360 or less: 11%, 361 to 414: 21%, 760 to 1279: 3%, 1280 and up: 50% (majority around 1300)  */ 


@media (max-width: 700px) {

	html { font-size: 14px; }
	
	.example { margin: 0.9rem 0.3rem 1.9rem 1.3rem;  }
	.related a { margin-left: 170px; }
	.def {padding: 0.2rem 0.6rem 0.2rem 0.6rem; }

	#linkto { display:none;  }

	#logo { position: absolute;  top:-38px; z-index:2; }
	.minimal #logo { position: absolute;  top:8px; }

/* #themeChg { position: absolute; left:-3px; top:0px; width: 60px; height: 34px; } */

	#search { display:none; margin-top: 1px; margin-bottom: 25px;  }
	#searchFld { width: 14rem; }

	#menuLt { display: none; }
	#menuRt { display: none; }
	
	/* #menuWide { display: none; } */
	#menuTiny { display: block; position: fixed; right: 0.2rem; top: 0.2rem; height: 3.6rem; text-align: left; margin: 0;  }  
	#menuSlim { display: none; position: fixed; left:10px; right:10px; top: 6px; }
	
	/* #search { display: none; margin: 52px auto 10px auto; } */

	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
}

@media print {
.noprint {display: none;}
	#logo { position: absolute; left: 0; top: 0; }
	#hdr {display: none;}
	#adTop {display: none;}
	#adend {display: none;}
	#footer {display: none;}
	#gtran {display: none; }
	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
	#linkto { display: none;}
	#linktort {display: none;}
	#menuWide { display: none; }
	#menuSlim { display: none; }
	#menuTiny { display: none; }
	#search { display: none; }
	.related { display: none; }
	#menuLt { display: none; }
	#menuRt { display: none; }
	#advText { display: none; }
	.bg { height: 6.3rem; }
	#bodybg { background: none; }
		body { background: none; } 

	h1 {color: var(--b4Clr); }
}
</pre></body></html>