* {
	margin:0;
	padding:0;
	border: 0;
	font-family: "AppFont", sans-serif;
	font-size: var(--calculator-font-size);
	font-weight: 500;
}

:root {
	--app-safe-top: env(safe-area-inset-top, 0px);
	--app-viewport-left: 0px;
	--app-viewport-top: 0px;
	--app-viewport-width: 100vw;
	--app-viewport-height: 100vh;
	--app-scale-width: 100vw;
	--app-scale-height: 100vh;
	--calculator-width: min(var(--app-scale-width), calc(var(--app-scale-height) * 0.55), calc(var(--app-viewport-height) * 0.55));
	--calculator-font-size: calc(var(--calculator-width) * 0.063);
	--plot-basis: calc((var(--app-scale-width) + var(--app-scale-height)) * 0.5);
	--plot-font-size: clamp(15px, calc(var(--plot-basis) * 0.027), 30px);
	--plot-small-font-size: clamp(11px, calc(var(--plot-basis) * 0.019), 23px);
	--plot-control-size: 40px;
	--plot-close-size: 48px;
	--plot-control-icon-size: 20px;
	--plot-control-inset: 16px;
	--plot-control-tight-inset: max(6px, calc(var(--plot-control-size) * 0.12));
	--plot-viewport-left: 0px;
	--plot-viewport-top: 0px;
	--plot-viewport-width: 100vw;
	--plot-viewport-height: 100vh;
	--fn-ui-font: "DINRoundProLight", sans-serif;
	--fn-description-font: "DINRoundProLight", sans-serif;
	--fn-background: #000000;
	--fn-panel-background: #000000;
	--fn-section-background: #242426;
	--fn-edge-reserve: 0px;
	--fn-row-background: #000000;
	--fn-row-active-background: #17171a;
	--fn-separator: #818181;
	--fn-strong-separator: #818181;
	--fn-primary-color: rgba(255, 255, 255, 0.94);
	--fn-secondary-color: rgba(235, 235, 245, 0.64);
	--fn-tertiary-color: rgba(235, 235, 245, 0.42);
	--fn-label-font-size: calc(var(--calculator-font-size) * 0.84);
	--fn-search-font-size: var(--fn-label-font-size);
	--fn-primary-font-size: calc(var(--calculator-font-size) * 0.61);
	--fn-secondary-font-size: calc(var(--calculator-font-size) * 0.61);
	--fn-caption-font-size: calc(var(--calculator-font-size) * 0.5);
	--fn-symbol-font-size: calc(var(--calculator-font-size) * 0.82);
	--fn-list-inline-padding: calc(var(--calculator-font-size) * 0.63);
	--fn-row-min-height: calc(var(--calculator-font-size) * 4.95);
	--fn-control-edge-inset: calc(var(--calculator-font-size) * 0.25);
	--fn-bar-height: calc(var(--calculator-font-size) * 2.25);
	--fn-section-bar-height: var(--fn-bar-height);
	--fn-control-size: calc(var(--fn-bar-height) - (2 * var(--fn-control-edge-inset)));
	--fn-control-icon-size: calc(var(--calculator-font-size) * 1.05);
	--fn-toggle-icon-size: calc(var(--calculator-font-size) * 0.86);
	--fn-search-icon-size: calc(var(--calculator-font-size) * 1.05);
	--fn-search-icon-left: calc(var(--calculator-font-size) * 0.55);
	--fn-search-text-left: calc(var(--calculator-font-size) * 2.05);
	--fn-row-padding-top: calc(var(--calculator-font-size) * 0.76);
	--fn-row-padding-bottom: calc(var(--calculator-font-size) * 0.7);
	--fn-viewport-left: 0px;
	--fn-viewport-top: 0px;
	--fn-viewport-width: 100vw;
	--fn-viewport-height: 100vh;
	--fn-viewport-bottom-inset: 0px;
	--logo-width: calc(var(--calculator-width) * 0.54);
	--logo-height: calc(var(--logo-width) / 3);
	--logo-holder-min-height: calc(var(--calculator-width) * 0.36);
	--logo-holder-safe-top: 0px;
	--cell-input-padding-top: 0.55em;
	--cell-input-padding-bottom: 0.2em;
	--cell-line-height: 1.25em;
	--result-line-padding-bottom: 0.05em;
	--result-line-last-padding-bottom: 0.55em;
	--draft-result-reserve-height: calc(var(--cell-line-height) + var(--result-line-last-padding-bottom));
	--draft-section-min-height: calc(var(--cell-input-padding-top) + var(--cell-line-height) + var(--cell-input-padding-bottom) + var(--draft-result-reserve-height));
	--cell-inline-padding: 0.63em;
	--keypad-padding: calc(var(--calculator-width) * 0.035);
	--keypad-width: calc(var(--calculator-width) - (2 * var(--keypad-padding)));
}

html.is-standalone {
	--logo-holder-safe-top: var(--app-safe-top);
}

@media (pointer: coarse) and (max-aspect-ratio: 55/100) {
	:root {
		--keypad-padding: 0px;
	}
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
	:root {
		--calculator-width: var(--app-scale-height);
	}
}

@media (pointer: coarse) {
	:root {
		--plot-control-size: 46px;
		--plot-close-size: 54px;
		--plot-control-icon-size: 22px;
		--plot-control-inset: 18px;
	}
}

@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
	:root {
		--plot-control-size: 48px;
		--plot-close-size: 56px;
		--plot-control-icon-size: 23px;
		--plot-control-inset: 20px;
	}
}

@media (pointer: fine) and (min-width: 900px) {
	:root {
		--plot-control-size: 38px;
		--plot-close-size: 46px;
		--plot-control-icon-size: 19px;
		--plot-control-inset: 16px;
	}
}

::-webkit-scrollbar {
	width: 0px;
}

@font-face {
	font-family: "AppFont";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/DIN Round Pro/DINRoundPro-Medium-Extended.ttf?din-cc8385b6") format("truetype");
}

@font-face {
	font-family: "DINRoundProLight";
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url("../fonts/DIN Round Pro/dinroundpro_light.otf") format("opentype");
}

html {
	overscroll-behavior: none;  /* iOS Cordova use DisallowOverscroll = true and WKWebView ... other source: I had to set webView.scrollView.bounces = false in the viewDidLoad func in swift.Try it and let us know if it solves your problem. */
	overflow: hidden;
	position: absolute; /* keep absolute otherwise issue with bottom bar */
	height: 100vh;
	width: 100vw;
	background-color: black;
}

body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: black;
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 55/100) {
	body {
		background-image: url('../images/math_background_3_colors.png');
	}
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: calc(var(--app-safe-top) * 1.6);
	z-index: 100000;
	pointer-events: none;
	background: linear-gradient(to bottom, #000000 0%, #000000 48%, rgba(0, 0, 0, 0) 88%);
}

.app-booting body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 200000;
	pointer-events: none;
	background: #000000;
	opacity: 1;
	animation: appStartupFade 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes appStartupFade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

#overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: black;
	z-index: 99999;
	pointer-events: none;
	opacity: 1;
	transition: all 0.25s ease-in-out;
}

#overlay.fadeout {
	opacity: 0;
}


#topContainer {
	flex-direction: column-reverse;
	display: flex;
	width: 100%;
	overflow-y: scroll;
	scrollbar-width: none;
	background-color: black;
	flex: 1 1 auto;
	min-height: 0;
	/*background-color: mauve;*/
}

#topContainer::before {
	content: "";
	display: block;
	flex: 0 0 0.45em;
}

#bottomContainer {
	width: 100%;
	box-sizing: border-box;
	padding-inline: var(--keypad-padding);
	background-color: black;
	flex: 0 0 auto;
	overflow: hidden;
}

#svg255 {
	display: block;
	width: 100%;
	height: auto;
}

.mainContainer {
	flex-direction: column-reverse;
	height: var(--app-viewport-height);
	width: var(--calculator-width);
	box-sizing: border-box;
	background-color: black;
	position: fixed;
	left: calc(var(--app-viewport-left) + (var(--app-viewport-width) * 0.5));
	top: var(--app-viewport-top);
	transform: translateX(-50%);
	display: flex;
}

html.fn-browser-open,
html.fn-browser-open body {
	background: #000000;
	overflow: hidden;
}

html.fn-browser-open .mainContainer {
	visibility: hidden;
	pointer-events: none;
}

@media (min-aspect-ratio: 55/100) {
	.mainContainer {
		box-shadow: 0px 44px 150px 36px rgba(35, 65, 35, 0.47), 0 18px 72px 16px rgba(0, 0, 0, 0.39), 0 0 56px 20px rgba(0, 0, 0, 0.26);
	}
}

@media (min-aspect-ratio: 55/100) and (min-resolution: 2dppx) {
	.mainContainer {
		box-shadow: 0px 44px 150px 36px rgba(35, 65, 35, 0.47), 0 18px 72px 16px rgba(0, 0, 0, 0.39), 0 0 56px 20px rgba(0, 0, 0, 0.26);
	}
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
	.mainContainer {
		height: var(--app-viewport-width);
		left: calc(var(--app-viewport-left) + (var(--app-viewport-width) * 0.5));
		top: calc(var(--app-viewport-top) + (var(--app-viewport-height) * 0.5));
		transform: translate(-50%, -50%) rotate(90deg);
		box-shadow: none;
	}
}

/* ================================== */


#logoHolder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	container-name: logo-holder;
	container-type: size;
	flex: 1 1 var(--logo-holder-min-height);
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	overflow: hidden;
	contain: paint;
	padding-top: var(--logo-holder-safe-top);
}

/*
#innerLogoHolder {
	display:inline-block;
	height: 100%;
	width: 100vw;
	bottom: 0;
	background: green;
	text-align: center;
	display: flex;
	padding-top: env(safe-area-inset-top);
}
*/

#svgLogo {
	flex: 0 0 auto;
	display: block;
	height: var(--logo-height);
	width: var(--logo-width);
	/*background-color: #000000;
	box-shadow: inset 0 -5px 10px #757575;*/
}

@container logo-holder (min-aspect-ratio: 6 / 1) {
	#svgLogo {
		visibility: hidden;
	}
}


.section {
	display: inline-block;
	width: 100%;
	/*box-shadow: 0 0px 1px #ffffff;*/
	border-top: solid 0.5px #818181;
	flex: 0 0 auto;
	/*background-color:black;*/
    caret-color: white;
	color: white;
}

.draftSection {
	min-height: var(--draft-section-min-height);
}

.section > .editable {
	outline: none;
    caret-color: white !important;
	/*color: #bcbcbc;*/
	/*background-color: black;*/
	display: block;
    margin: 0;
    padding: var(--cell-input-padding-top) var(--cell-inline-padding) var(--cell-input-padding-bottom);
    line-height: var(--cell-line-height);
	min-height: var(--cell-line-height);
    word-break: break-all;
    /*word-wrap: break-word;*/
    -webkit-user-modify: read-write-plaintext-only;
    user-modify: read-write-plaintext-only;
	-webkit-user-select: text; /* for Safari selection bug, but does not seem to solve it*/
	user-select: text;
}

.section > .editable:focus {
	/*color: white !important;*/
    outline: none !important;
    caret-color: white;
}

.temp {
	word-break: break-all;
	/*color: #a1a1a1;*/
}

.triplet {
	margin-left: .175em;
}

.result .triplet {
	display: inline-block;
	margin-left: 0;
	padding-left: .175em;
	line-height: inherit;
}

.leftMarginClass {
	margin-left: .1em;
}

.rightMarginClass {
	margin-right: .1em;
}

.bigLeftMarginClass {
	margin-left: .15em;
}

.bigRightMarginClass {
	margin-right: .15em;
}

.hexClass {
	color: #FFD700;
}

.radixClass {
	color: #fff;
}

.radixPrefix {
	color: #818181;
}

.smallCaps {
	font-variant: all-small-caps;
	font-size: 1em;
	line-height: 1;
}

.variableSuffix {
	font-size: inherit;
	line-height: 1;
}

.operandClass {
	color: #fe9f0a; /*#b1b1b1 #a1a1a1*/
}

.matrixShapeMeta {
	color: #8b8b8b;
}

.matrixShapeKind {
	margin-left: 0;
}

.resultLine {
	display: block;
	position: relative;
    padding: 0 var(--cell-inline-padding) var(--result-line-padding-bottom);
    line-height: var(--cell-line-height);
	min-height: var(--cell-line-height);
    /*word-wrap: break-word;*/
    word-break: break-all;
    text-align:right;
	-webkit-user-select: none; /* for Safari */
	user-select: none;
	/*background-color: black;*/
}

.resultLine:last-child {
	padding-bottom: var(--result-line-last-padding-bottom);
}

.draftSection > .results {
	display: block;
	min-height: var(--draft-result-reserve-height);
}

.result {
	-webkit-user-select: text; /* for Safari */
	user-select: text;
}

.result.collapsibleResultCandidate {
	line-height: inherit;
}

.result.collapsibleResultCandidate.collapsedResultFull {
	display: none;
}

.resultCollapsedPreview {
	display: none;
	-webkit-user-select: text;
	user-select: text;
}

.resultCollapsedPreview.visibleCollapsedPreview {
	display: inline;
}

.resultExpandButtonHitArea {
	display: inline;
	margin-left: 0.35em;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.resultLabel {
	color: darkgrey;
}

.plotInlineLabel {
	color: darkgrey;
	margin-left: 0.48em;
}

.plotInlineLabel * {
	color: darkgrey !important;
}

.plotButtonHitArea,
.odeButtonHitArea {
	display: inline;
	margin-left: 0.48em;
	-webkit-user-select: none;
	user-select: none;
}

.plotButton,
.odeButton {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 0.82em;
	min-width: 1.72em;
	margin-right: 0;
	margin-left: 0;
	padding: 0 0.18em;
	border: 1px solid #404040;
	border-radius: 0.16em;
	color: #000000;
	background-color: #404040;
	font-family: sans-serif;
	font-size: inherit;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: 0.18em;
	transition: background-color 0.6s, border-color 0.6s;
	-webkit-user-select: none;
	user-select: none;
}

.plotButton {
	min-width: 1.28em;
	padding: 0 0.12em;
	color: #ffffff;
}

.resultExpandButton {
	color: #8b8b8b;
	font-weight: 700;
}

.plotButton.touchCls,
.odeButton.touchCls {
	border-color: #737373;
	background-color: #737373;
	transition: background-color 0.1s, border-color 0.1s;
}

.resultExpandButton.touchCls {
	color: #b0b0b0;
}

.plotButtonText,
.odeButtonText {
	display: block;
	font-size: calc(var(--calculator-font-size) * 0.46);
	line-height: 1;
	letter-spacing: 0.04em;
	transform: translateY(-0.04em);
}

.resultExpandButtonText {
	letter-spacing: 0;
}

.revert {
	color: black;
	background-color: white;
	caret-color: black;
	text-align: left;
	font-family: sans-serif;
	font-size: calc(var(--calculator-font-size) * 0.63);
}

.resultLine.clicked::after {
	content: "Copied to clipboard";
	user-select: none;
	position: absolute;
	right: 1.9em;
	top: -16px;
	padding-right: 5px;
	padding-left: 5px;
	display: block;
	font-size: calc(var(--calculator-font-size) * 0.48);
	color: white;
	text-transform: uppercase;
	background-color: #333333;
	height: calc(var(--calculator-font-size) * 0.78);
	line-height: calc(var(--calculator-font-size) * 0.78);
}

/* ================================== */

/* a5a5a5 to d9d9d8 */
.greyCls {
	fill: #a5a5a5;
	transition: fill 0.6s;
}
.greyCls.touchCls {
	fill: #d9d9d8;
	transition: fill 0.1s;
}

/* 333333 to 737373 */
.darkCls {
	fill: #333333;
	transition: fill 0.6s;
}
.darkCls.touchCls {
	fill: #737373;
	transition: fill 0.1s;
}

/* fe9f0a to fbc78b */
.orangeCls {
	fill: #fe9f0a;
	transition: fill 0.6s;
}
.orangeCls.touchCls {
	fill: #fbc78b;
	transition: fill 0.1s;
}

/* modblu grpblu #7996be 59769e to 95d5ff 9fefff */
.bluCls, #pathblu { /* 7996be */
	fill: #495a6f;
	transition: fill 0.3s;
}
.bluCls.touchCls, #pathblu.touchCls, #modblu.touchCls {
	fill: #c0e3ff;
	transition: fill 0.2s;
}

/* modgre grpgre #a1cb8d to a1ff8d */
/* modgre grpgre #91bb7d to a1ff8d */
/* modgre grpgre #719b5d to a1ff8d */

.greenCls, #pathgre {
	fill: #263a23; /*32462a 3a5131 3e5b32 405637 #213b1d #91bb7d; */
	transition: fill 0.3s;
}

#modblu {
	fill: #7996be;
	transition: fill 0.3s;
}

#modgre {
	fill: #91bb7d; /*405637 3e5b32 */
	transition: fill 0.3s;
}

.greenCls.touchCls, #pathgre.touchCls, #modgre.touchCls {
	fill: #a1ff8d;
	transition: fill 0.2s;
}

#txtalock.active {
	fill: #a1ff8d;
}

#inf2nd { fill: #c0e3ff; }
#infalp { fill: #a1ff8d; }
#infalo { fill: #a1ff8d; }

#infmod > * {
	opacity:0;
	transition: opacity 0.3s;
}

#infmod.second > #inf2nd {
	opacity:1;
	transition: opacity 0.2s;
}

#infmod.alpha > #infalp {
	opacity:1;
	transition: opacity 0.2s;
}

#infmod.alock > #infalo {
	opacity:1;
	transition: opacity 0.2s;
}

#grpopt1 > *,
#grpopt2 > * {
	fill: #737373;
	opacity: 0;
	transition: opacity 0.2s;
}

#grpopt1:not(.deg):not(.rad) > #infdeg,
#grpopt1.deg > #infdeg,
#grpopt1.rad > #infrad,
#grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infflt,
#grpopt2.flt > #infflt,
#grpopt2.eng > #infeng,
#grpopt2.sci > #infsci,
#grpopt2.rei > #infrei,
#grpopt2.fra > #inffra {
	opacity: 1;
}

.calc-opt-one-rad #grpopt1:not(.deg):not(.rad) > #infdeg,
.calc-opt-two-eng #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infflt,
.calc-opt-two-sci #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infflt,
.calc-opt-two-fra #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infflt,
.calc-opt-two-rei #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infflt {
	opacity: 0;
}

.calc-opt-one-deg #grpopt1:not(.deg):not(.rad) > #infdeg,
.calc-opt-one-rad #grpopt1:not(.deg):not(.rad) > #infrad,
.calc-opt-two-flt #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infflt,
.calc-opt-two-eng #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infeng,
.calc-opt-two-sci #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infsci,
.calc-opt-two-fra #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #inffra,
.calc-opt-two-rei #grpopt2:not(.flt):not(.eng):not(.sci):not(.rei):not(.fra) > #infrei {
	opacity: 1;
}

#optone,
#opttwo {
	transition: fill 0.6s;
}

#optone.touchCls,
#opttwo.touchCls {
	fill: #333333;
	transition: fill 0.1s;
}

.noclick {
		pointer-events: none;
}

/* ================================== */

.plotOverlay {
	position: fixed;
	left: var(--plot-viewport-left);
	top: var(--plot-viewport-top);
	z-index: 99998;
	width: var(--plot-viewport-width);
	height: var(--plot-viewport-height);
	overflow: hidden;
	background: #000000;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.plotCanvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

.plotCanvas:active {
	cursor: grabbing;
}

.plotCloseButton {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--plot-close-size);
	height: var(--plot-close-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: rgba(190, 190, 190, 0.94);
	background: rgba(0, 0, 0, 0.7);
	-webkit-appearance: none;
	appearance: none;
	font-family: "AppFont", sans-serif !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}

.plotCloseButton:active {
	background: rgba(255, 255, 255, 0.18);
}

.fnOverlay {
	--fn-scale-width: var(--app-scale-width);
	--fn-scale-height: var(--app-scale-height);
	--calculator-width: min(var(--fn-scale-width), calc(var(--fn-scale-height) * 0.55));
	--calculator-font-size: calc(var(--calculator-width) * 0.063);
	position: fixed;
	left: var(--fn-viewport-left);
	top: var(--fn-viewport-top);
	z-index: 99998;
	box-sizing: border-box;
	width: var(--fn-viewport-width);
	height: var(--fn-viewport-height);
	overflow: hidden;
	overscroll-behavior: none;
	background: var(--fn-background);
	color: var(--fn-primary-color);
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html.is-standalone .fnOverlay {
	z-index: 100001;
}

.fnOverlay,
.fnOverlay * {
	box-sizing: border-box;
	font-family: var(--fn-ui-font);
	letter-spacing: 0;
}

.fnShell {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background: var(--fn-background);
}

.fnHeader {
	position: absolute;
	top: var(--app-safe-top);
	right: 0;
	left: 0;
	display: block;
	height: var(--fn-bar-height);
	background: var(--fn-panel-background);
	box-shadow: 0 1px 0 var(--fn-separator);
	z-index: 3;
	touch-action: none;
}

.fnSearchBox {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--fn-panel-background);
	box-shadow: none;
	z-index: 2;
	touch-action: none;
}

.fnSearchIcon {
	position: absolute;
	left: var(--fn-search-icon-left);
	top: 50%;
	width: var(--fn-search-icon-size);
	height: var(--fn-search-icon-size);
	transform: translateY(-50%);
	color: var(--fn-tertiary-color);
	pointer-events: none;
}

.fnSearchInput {
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0 calc(var(--fn-control-size) + (3 * var(--fn-control-edge-inset))) 0 var(--fn-search-text-left);
	border: 0;
	outline: 0;
	border-radius: 0;
	color: var(--fn-primary-color);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--fn-ui-font);
	font-size: var(--fn-search-font-size);
	font-weight: 300;
	line-height: 1.1;
}

.fnSearchInput::placeholder {
	color: var(--fn-tertiary-color);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-search-font-size);
	font-weight: 300;
}

.fnSearchInput::-webkit-search-decoration,
.fnSearchInput::-webkit-search-cancel-button,
.fnSearchInput::-webkit-search-results-button,
.fnSearchInput::-webkit-search-results-decoration {
	display: none;
}

.fnCloseButton {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fn-bar-height);
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: rgba(235, 235, 245, 0.82);
	transform: none;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.fnCloseButton:focus,
.fnCloseButton:focus-visible {
	outline: 0;
}

.fnCloseButton:active {
	background: rgba(255, 255, 255, 0.12);
}

.fnCloseButton .plotControlGlyph {
	width: calc(var(--fn-control-icon-size) * 0.78);
	height: calc(var(--fn-control-icon-size) * 0.78);
}

.fnClearSearchButton {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fn-search-text-left);
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: rgba(235, 235, 245, 0.78);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.fnClearSearchButton[hidden] {
	display: none;
}

.fnClearSearchButton:focus,
.fnClearSearchButton:focus-visible {
	outline: 0;
}

.fnClearSearchButton::before {
	content: "";
	position: absolute;
	left: calc(var(--fn-search-icon-left) + (var(--fn-search-icon-size) * 0.5));
	top: 50%;
	width: calc(var(--fn-control-icon-size) * 0.95);
	height: calc(var(--fn-control-icon-size) * 0.95);
	border-radius: 50%;
	background: rgba(235, 235, 245, 0.18);
	transform: translate(-50%, -50%);
}

.fnClearSearchButton:active::before {
	background: rgba(235, 235, 245, 0.28);
}

.fnClearSearchButton .plotControlGlyph {
	position: absolute;
	left: calc(var(--fn-search-icon-left) + (var(--fn-search-icon-size) * 0.5) + (var(--fn-control-icon-size) * 0.006));
	top: 50%;
	z-index: 1;
	width: calc(var(--fn-control-icon-size) * 0.45);
	height: calc(var(--fn-control-icon-size) * 0.45);
	transform: translate(-50%, -50%);
}

.fnContent {
	position: absolute;
	top: calc(var(--app-safe-top) + var(--fn-bar-height));
	right: 0;
	bottom: max(var(--fn-viewport-bottom-inset), env(safe-area-inset-bottom, 0px));
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0 10px;
	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behavior: contain;
	touch-action: pan-y;
	contain: layout paint;
	scrollbar-width: none;
	-webkit-overflow-scrolling: auto;
}

html.is-standalone .fnContent {
	bottom: var(--fn-viewport-bottom-inset);
}

.fnContent::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.fnFooter {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border-top: 0.5px solid var(--fn-separator);
	background: var(--fn-panel-background);
}

.fnCount {
	color: var(--fn-tertiary-color);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-caption-font-size);
	font-weight: 400;
	line-height: 1.2;
}

.fnSection {
	margin: 0;
	width: 100%;
}

.fnSectionTitle {
	position: sticky;
	top: 0;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--fn-section-bar-height);
	align-items: center;
	width: 100%;
	height: var(--fn-section-bar-height);
	overflow: hidden;
	padding: 0 0 0 var(--fn-list-inline-padding);
	border: 0;
	border-bottom: 1px solid var(--fn-separator);
	color: var(--fn-tertiary-color);
	background: var(--fn-section-background);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-label-font-size);
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.fnSectionLabel {
	display: flex;
	align-items: center;
	gap: .45em;
	grid-column: 1;
	transform: translateY(-0.085em);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-label-font-size);
	font-weight: 300;
	line-height: 1;
	min-width: 0;
	width: 100%;
	overflow: visible;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: none;
}

.fnContentRtl .fnSectionLabel {
	direction: rtl;
}

.fnSectionName {
	color: var(--fn-primary-color);
	display: block;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	min-width: 0;
	overflow: visible;
	white-space: nowrap;
}

.fnSectionCount {
	color: var(--fn-tertiary-color);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	white-space: nowrap;
}

.plotAxisButton.fnSectionToggle {
	position: relative;
	display: block;
	grid-column: 2;
	width: var(--fn-section-bar-height);
	height: var(--fn-section-bar-height);
	min-width: var(--fn-section-bar-height);
	min-height: var(--fn-section-bar-height);
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--fn-tertiary-color);
	background: transparent;
	backdrop-filter: none;
	font-family: var(--fn-description-font);
	font-size: var(--fn-label-font-size);
	font-weight: 400;
	line-height: 1;
	text-align: center;
}

.fnSectionToggleIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: calc(var(--fn-toggle-icon-size) * 0.9);
	height: calc(var(--fn-toggle-icon-size) * 0.9);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.plotAxisButton.fnSectionToggle:focus,
.plotAxisButton.fnSectionToggle:focus-visible {
	outline: 0;
}

.plotAxisButton.fnSectionToggle .plotControlGlyph {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
	pointer-events: none;
}

.fnLanguageSection .fnSectionTitle {
	background: #000000;
}

.fnLanguageSection .fnSectionLabel {
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: visible;
}

.fnLanguageSection .fnSectionName {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--fn-tertiary-color);
	line-height: 1;
}

.fnLanguageIcon {
	display: block;
	width: calc(var(--fn-label-font-size) * 1.38);
	height: calc(var(--fn-label-font-size) * 1.38);
	fill: currentColor;
}

.fnLanguageCurrent {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: visible;
	color: var(--fn-primary-color);
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fnGrid {
	display: block;
}

.fnSection[hidden],
.fnGrid[hidden],
.fnItem[hidden],
.fnLanguageButton[hidden] {
	display: none;
}

.fnItem {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	min-height: var(--fn-row-min-height);
	padding: var(--fn-row-padding-top) var(--fn-list-inline-padding) var(--fn-row-padding-bottom);
	border: 0;
	border-bottom: 1px solid var(--fn-separator);
	border-radius: 0;
	color: var(--fn-primary-color);
	background: var(--fn-row-background);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-primary-font-size);
	font-weight: 400;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
}

.fnItem:active {
	background: var(--fn-row-active-background);
}

.fnLanguageButton {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	min-height: var(--fn-bar-height);
	padding: 0 var(--fn-list-inline-padding);
	border: 0;
	border-bottom: 1px solid var(--fn-separator);
	border-radius: 0;
	color: var(--fn-secondary-color);
	background: #000000;
	font-family: var(--fn-ui-font);
	font-size: var(--fn-primary-font-size);
	font-weight: 400;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
}

.fnLanguageButton:active {
	background: var(--fn-row-active-background);
}

.fnLanguageButtonActive {
	color: var(--fn-primary-color);
}

.fnLanguageName {
	display: block;
	overflow: hidden;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: var(--fn-bar-height);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fnSymbol {
	position: relative;
	top: calc(var(--calculator-font-size) * -0.32);
	overflow: hidden;
	color: var(--fn-primary-color);
	font-family: "AppFont", sans-serif;
	font-size: var(--fn-symbol-font-size);
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fnShort {
	display: block;
	margin-top: calc(var(--calculator-font-size) * 0.08);
	overflow: visible;
	color: var(--fn-secondary-color);
	font-family: var(--fn-description-font);
	font-size: var(--fn-primary-font-size);
	font-weight: 400;
	line-height: 1.25;
	text-align: left;
	white-space: normal;
}

.fnValue,
.fnUsage {
	margin-top: calc(var(--calculator-font-size) * 0.48);
	overflow: visible;
	color: rgba(245, 245, 247, 0.88);
	font-family: "AppFont", sans-serif;
	font-size: var(--fn-secondary-font-size);
	line-height: 1.2;
	white-space: normal;
	word-break: break-word;
}

.fnDescription {
	display: -webkit-box;
	margin-top: calc(var(--calculator-font-size) * 0.42);
	overflow: hidden;
	color: var(--fn-secondary-color);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-primary-font-size);
	font-weight: 400;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.fnEmpty {
	display: none;
	padding: 40px 8px;
	color: var(--fn-tertiary-color);
	font-family: var(--fn-ui-font);
	font-size: var(--fn-primary-font-size);
	line-height: 1.25;
	text-align: center;
}

.fnOverlay.fnNoResults .fnEmpty {
	display: none;
}

.plotHud {
	position: absolute;
	left: 0.7rem;
	right: 3.3rem;
	top: 0.55rem;
	pointer-events: none;
}

.plotAxisControlsRoot {
	pointer-events: none;
}

.plotAxisControls {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0;
	pointer-events: auto;
}

.plotAxisControlsRoot3d .plotAxisControls {
	left: 0;
	top: 0;
	right: auto;
	bottom: auto;
	display: block;
	width: 0;
	height: 0;
	transform: none;
}

.plotAxisControlsRoot3d .plotAxisButton {
	position: absolute;
	margin: 0;
}

.plotAxisControlsRoot3d .plotAxisButton:active {
	background: transparent;
}

.plotAxisControlsRoot3d .plotAxisButton .plotControlGlyph {
	position: relative;
	z-index: 1;
}

.plotAxisLabelButton3d {
	position: absolute;
	display: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: transparent;
	-webkit-appearance: none;
	appearance: none;
	font-size: 0;
	line-height: 0;
	pointer-events: auto;
	touch-action: manipulation;
}

.plotAxisControlsX {
	right: var(--plot-control-tight-inset);
	bottom: var(--plot-control-tight-inset);
}

.plotAxisControlsY {
	left: var(--plot-control-tight-inset);
	top: var(--plot-control-tight-inset);
	flex-direction: column;
}

.plotAxisControlsZ {
	left: 50%;
	top: var(--plot-control-tight-inset);
	bottom: auto;
	flex-direction: column;
	transform: translateX(-50%);
}

@media (orientation: landscape) {
	.plotCloseButton {
		right: min(env(safe-area-inset-right, 0px), 8px);
	}

	.plotAxisControlsX {
		right: calc(var(--plot-control-tight-inset) + min(env(safe-area-inset-right, 0px), 8px));
	}

	.plotAxisControlsY {
		left: calc(var(--plot-control-tight-inset) + min(env(safe-area-inset-left, 0px), 8px));
	}
}

html.is-standalone .plotCloseButton {
	top: var(--app-safe-top);
}

html.is-standalone .plotAxisControlsY {
	top: max(var(--plot-control-tight-inset), var(--app-safe-top));
}

html.is-standalone .plotAxisControlsZ {
	top: max(var(--plot-control-tight-inset), var(--app-safe-top));
}

.plotAxisButton {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--plot-control-size);
	height: var(--plot-control-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.42);
	background: transparent;
	backdrop-filter: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: "AppFont", sans-serif !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	font-synthesis: none;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}

.plotControlGlyph {
	display: block;
	flex: 0 0 auto;
	width: var(--plot-control-icon-size);
	height: var(--plot-control-icon-size);
	fill: currentColor;
	pointer-events: none;
	transform: none;
}

.plotCloseButton .plotControlGlyph {
	width: calc(var(--plot-control-icon-size) * 1.28);
	height: calc(var(--plot-control-icon-size) * 1.28);
}

.plotAxisButton .plotControlGlyph {
	width: var(--plot-control-icon-size);
	height: var(--plot-control-icon-size);
}

.plotAxisButton:active {
	background: transparent;
}

.plotAxisControlsX .plotAxisButton:first-child {
	border-radius: 50%;
}

.plotAxisControlsX .plotAxisButton:last-child {
	margin-left: -1px;
	border-radius: 50%;
}

.plotAxisControlsY .plotAxisButton:first-child {
	border-radius: 50%;
}

.plotAxisControlsY .plotAxisButton:last-child {
	margin-top: -1px;
	border-radius: 50%;
}

.plotAxisControlsZ .plotAxisButton:first-child {
	border-radius: 50%;
}

.plotAxisControlsZ .plotAxisButton:last-child {
	margin-top: -1px;
	border-radius: 50%;
}

.plotAxisControlsRoot2dPositioned .plotAxisControls {
	left: 0;
	top: 0;
	right: auto;
	bottom: auto;
	display: block;
	width: 0;
	height: 0;
	transform: none;
}

.plotAxisControlsRoot2dPositioned .plotAxisButton,
.plotAxisControlsRoot2dPositioned .plotAxisControls .plotAxisButton:first-child,
.plotAxisControlsRoot2dPositioned .plotAxisControls .plotAxisButton:last-child {
	position: absolute;
	margin: 0;
	border-radius: 50%;
}

.plotAxisControlsRoot3d .plotAxisControlsZ .plotAxisButton:first-child,
.plotAxisControlsRoot3d .plotAxisControlsZ .plotAxisButton:last-child {
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	margin: 0;
}

.plotAxisControlsRoot3d .plotAxisControlsZ {
	width: 0;
	height: 0;
}

.plotAxisControlsRoot3d .plotAxisControls .plotAxisButton,
.plotAxisControlsRoot3d .plotAxisControls .plotAxisButton:first-child,
.plotAxisControlsRoot3d .plotAxisControls .plotAxisButton:last-child {
	border-radius: 50%;
}

.plotLegend {
	display: inline-block;
	box-sizing: border-box;
	max-width: min(28rem, 100%);
	padding: 0.46rem 0.58rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.45rem;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.62);
	font-family: "AppFont", sans-serif;
	font-size: var(--plot-small-font-size);
	line-height: 1.28;
	letter-spacing: 0;
	backdrop-filter: blur(7px);
}

.plotTitle {
	max-width: 100%;
	margin-bottom: 0.2rem;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.84);
	font-size: var(--plot-small-font-size);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.plotLegendRow {
	display: flex;
	align-items: center;
	min-width: 0;
	margin-top: 0.12rem;
}

.plotLegendSwatch {
	flex: 0 0 auto;
	width: 0.66rem;
	height: 0.66rem;
	margin-right: 0.38rem;
	border-radius: 50%;
}

.plotLegendLabel,
.plotLegendNotice {
	min-width: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--plot-small-font-size);
	white-space: nowrap;
	text-overflow: ellipsis;
}