@font-face {
	  font-family: 'PressStart2P';
	  src: url('/PressStart2P-Regular.ttf');
	  font-display: swap;
	}
	.pressStart {
	  font-family: 'PressStart2P';
	  font-weight: 400;
	  font-style: normal;
	}
	.prStrtH2 {
	  font-family: 'PressStart2P';
	  font-size: 1.1em;
	  text-transform: uppercase;
	}
	table.exampleTable {padding: 0 0 0 0; margin: 1em 0 1em 0; text-align: center; border-top: 1px dotted silver; border-left: 1px dotted silver;}
	table.exampleTable tr {padding: 0 0 0 0; margin: 0.25em 0 0.25em 0; text-align: center;}
	table.exampleTable td, table.exampleTable th  {border-right: 1px dotted silver; border-bottom: 1px dotted silver; padding: 0 0.1em 0 0.1em; text-align: center; white-space: nowrap;}
	table.exampleTable th {text-align: left;}
	ul {list-style: none; padding: 0; margin: 0;}
	ul li {padding-left: 1em; margin-bottom: 1px;}
	ul li span {text-decoration: underline; cursor: pointer;}
	li::before {
content: "•";
padding-right: 0.5em;
	}
	li.isPlus::before {
content: "+";
padding-right: 0.25em;
	}
	li.isScale::before {content: "⚖"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isTakeaway::before {content: "⬆️"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isCounting::before {content: "🔢"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isChecking::before {content: "✅"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isBaking::before {content: "🧑‍🍳"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isPause::before {content: "⏸️"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isFactory::before {content: "🏭"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isCoffee::before {content: "☕"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isCocktail::before {content: "🍹"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isSorting::before {content: "📦"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isTracking::before {content: "📈"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isDensity::before {content: "💎"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isSolution::before {content: "🧪"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isSales::before {content: "🛍️"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isCclub::before {content: "🥦"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isCompounding::before {content: "⚕"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	li.isNone::before {
content: "";
padding-right: 0;
	}
	
	a.intLink {color: black;}
	p.upscaleTop {width: auto; text-align: center; color: #000; text-shadow: 1px 1px 2px #000, 0 0 1em #ECFFDC, 0 0 0.2em #ECFFDC; font-size: 1.7em; margin-top: 0; margin-bottom: 0; opacity: 0.90;}
	p.upscaleTop a {text-decoration: none; color: inherit;}
	h1 {width: auto; text-align: center; color: #000; font-size: 0.75em; opacity: 0.66; margin-bottom: 0; margin-top: 0; margin-bottom: 2px; text-shadow: 1px 1px 2px #AFE1AF, 0 0 1em #AFE1AF, 0 0 0.2em #AFE1AF;}
	
	h2 {background-color: #e1e1e1; margin-top: 1.75em; margin-bottom: 0.25em; padding: 0.5em 0 0.5em 0.25em; border-radius: 0.25em;}
	h3, h5.likeH3 {border-bottom: 0.25em solid #e1e1e1; margin-top: 1em; margin-bottom: 0.25em; padding: 0 0 0 0;}
	h3::before, h5.likeH3::before {content: "➥"; font-size: 1.2em; font-weight: bold; padding-right: 0.25em; line-height: 1em;}
	h4, h5.likeH4 {border-bottom: 10px solid #e1e1e1; margin-top: 1em; margin-bottom: 0.25em; padding: 0 0 0 0; display: inline-block;}
	h4.longBigOne, h5.likeH4 {font-size: 1.1em; display: block;}
	
	p {padding-left: 0.5em;}
	hr {margin: 1em 0 2em 0; border-bottom: 30px solid #e1e1e1; border-top: 0; border-left: 0; border-right: 0; color: #e1e1e1;}
	p.blowH5p {margin-left: 0.25em; margin-top: 0.1em; margin-bottom: 1.5em;}
	div.useCase {margin: 0.75em 0 0.75em 0.5em; padding: 0.4em 0.6em; background-color: #f4f4f4; border-left: 0.4em solid #AFE1AF; border-radius: 0.25em;}
	div.useCase p {padding-left: 0; margin: 0.3em 0;}
	h5, h4.likeH5, h6 {padding-bottom: 0.1em; border-bottom: 0.1em solid #000; display: inline-block; margin: 0 0 0 0; font-size: 1em; margin-left: 0.4em; margin-bottom: 0.25em; font-size: 0.9em;} 
	h5.blowH5top0 {margin-left: 0.25em; margin-bottom: 0; margin-top: 0;}
	h5.topM, h6.topM {margin-top: 1em;}
	h5.extraTop, h3 {font-size: 1.1em; display: block; border-width: 0.5em; border-top: 0.5em solid #e1e1e1; padding-top: 0.3em; padding-bottom: 0.2em;}
	span.supScale {font-size: 1.75em; line-height: 0.5em; font-weight: bold; color: #fff;}
	@media screen and (min-width: 710px) {
body {max-width: 800px; margin-left: auto; margin-right: auto;}
p.upscaleTop {text-align: left; margin-left: 0; padding-left: 0;}
h1 {font-size: 1.1em; text-align: left; margin-left: 0; padding-left: 0;}
	}
	h3 {border-width: 1em; text-transform: uppercase;}
	h5.likeH4 {margin-left: 0;}
	dl {margin-left: 0.5em;}
	dl dt {font-weight: bold;}
	dl dd {margin-left: 1.5em; padding: 0.25em;}
	/* parts, mode intros, contents and the side navigation */
	html {scroll-behavior: smooth;}
	div.manPart {margin: 3em 0 0.5em 0; padding: 0.7em 0.75em; background-color: #454B1B; color: yellow; font-family: 'PressStart2P'; font-size: 0.9em; line-height: 1.5em; text-transform: uppercase; border-radius: 0.4em;}
	div.manPart span {color: #AFE1AF; margin-right: 0.5em; text-decoration: none; cursor: default;}
	div.modeIntro {margin: 0.5em 0 1em 0.5em; padding: 0.4em 0.75em; background-color: #f4f4f4; border-left: 0.4em solid #AFE1AF; border-radius: 0.25em;}
	div.modeIntro p {padding-left: 0;}
	p.modeIntroTitle {font-weight: bold; margin: 0.3em 0;}
	/* the special mode for labs and pharmacies (COMPOUNDING ASSISTANT) */
	div.modeIntro.labSpecial {background-color: #eef4fb; border-left-color: #1e5aa8;}
	span.labBadge {display: inline-block; margin-left: 0.4em; padding: 0.1em 0.5em; border-radius: 0.8em; background-color: #1e5aa8; color: #fff; font-size: 0.75em; font-weight: bold; vertical-align: middle;}
	#manToc {display: grid; grid-template-columns: 1fr; gap: 0.6em; margin: 1em 0 2em 0;}
	@media screen and (min-width: 710px) {#manToc {grid-template-columns: 1fr 1fr;}}
	div.tocPart {border: 2px solid #e1e1e1; border-radius: 0.5em; padding: 0.5em 0.6em;}
	div.tocPart > a {display: block; margin-bottom: 0.4em; font-family: 'PressStart2P'; font-size: 0.75em; line-height: 1.5em; color: #454B1B; text-decoration: none; text-transform: uppercase;}
	div.tocPart > a span {display: inline-block; min-width: 1.6em; margin-right: 0.3em; text-align: center; background-color: #454B1B; color: yellow; border-radius: 0.3em; text-decoration: none;}
	#manNav {position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: min(320px, 85vw); box-sizing: border-box; overflow-y: auto; padding: 0.75em 0.5em 4em 0.5em; background-color: #fff; border-right: 2px solid #e1e1e1; box-shadow: 0 0 1em rgba(0,0,0,0.25); font-size: 0.85em; transform: translateX(-110%); transition: transform 0.2s;}
	body.manNavOpen #manNav {transform: none;}
	#manNav ul {list-style: none; margin: 0; padding: 0;}
	#manNav ul li {margin: 0; padding: 0;}
	#manNav li::before {content: none; padding: 0;}
	#manNav a {display: block; padding: 0.2em 0.4em; color: #222; text-decoration: none; line-height: 1.3em; border-radius: 0.3em;}
	#manNav a:hover {background-color: #f0f0f0;}
	#manNav a.navTitle {font-family: 'PressStart2P'; font-size: 0.8em; color: #000;}
	#manNav a.navPart {margin-top: 1em; font-family: 'PressStart2P'; font-size: 0.65em; line-height: 1.6em; color: #454B1B; text-transform: uppercase;}
	#manNav ul ul a {padding-left: 0.9em;}
	#manNav ul ul ul {display: none;}
	#manNav ul ul ul a {padding-left: 1.7em; font-size: 0.95em; color: #444;}
	#manNav li.open > ul {display: block;}
	#manNav a.active {background-color: #AFE1AF; font-weight: bold; color: #000;}
	#manNavBtn, #manTopBtn {position: fixed; right: 12px; z-index: 21; width: 3em; height: 3em; border: 0; border-radius: 50%; background-color: #454B1B; color: yellow; font-size: 1.1em; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer;}
	#manNavBtn {bottom: 12px;}
	#manTopBtn {bottom: calc(12px + 3.6em); display: none;}
	body.manScrolled #manTopBtn {display: block;}
	@media screen and (min-width: 1320px) {
#manNav {transform: none; width: 250px; left: max(0px, calc(50% - 400px - 280px)); border-right: 0; box-shadow: none; background-color: transparent;}
#manNavBtn {display: none;}
#manTopBtn {bottom: 12px;}
	}
	@media print {#manNav, #manNavBtn, #manTopBtn {display: none;}}