:root {
	--color-windowCaptionBackground: AccentColor;
	--color-windowCaptionText: AccentColorText;
	--color-windowBackground: Canvas;
	--color-windowText: CanvasText;
	--color-buttonBackground: ButtonFace;
	--color-buttonText: ButtonText;
	--color-buttonBorderTop: ButtonBorder;
	--color-buttonBorderRight: ButtonBorder;
	--color-buttonBorderLeft: ButtonBorder;
	--color-buttonBorderBottom: ButtonBorder;
	--color-inputBackground: Field;
	--color-inputText: FieldText;
	--color-inputBorderTop: ButtonBorder;
	--color-inputBorderRight: ButtonBorder;
	--color-inputBorderLeft: ButtonBorder;
	--color-inputBorderBottom: ButtonBorder;
	--color-highlightBackground: Highlight;
	--color-highlightText: HighlightText;
	--color-linkText: LinkText;
	--color-visitedLinkText: VisitedText;
	--color-activeLinkText: ActiveText;
	--color-markedBackground: Mark;
	--color-markedText: MarkText;

	--length-controlBorderWidth: max(1px, 0.1ch);
}

@media(prefers-color-scheme: dark) and (forced-colors: none) {
	:root {
		--color-windowCaptionBackground: ;
		--color-windowCaptionText: ;
		--color-windowBackground: #222;
		--color-windowText: #CCC;
		--color-buttonBackground: #555;
		--color-buttonText: #FFF;
		--color-buttonBorderTop: #444;
		--color-buttonBorderRight: #333;
		--color-buttonBorderLeft: #444;
		--color-buttonBorderBottom: #333;
		--color-inputBackground: #333;
		--color-inputText: #CCC;
		--color-inputBorderTop: #111;
		--color-inputBorderRight: #111;
		--color-inputBorderLeft: #111;
		--color-inputBorderBottom: #111;
		--color-highlightBackground: #0AF;
		--color-highlightText: #FFF;
		--color-linkText: #0AF;
		--color-visitedLinkText: #05A;
		--color-activeLinkText: #AF0;
		--color-markedBackground: #0AF;
		--color-markedText: #FFF;
	}
}

@media(prefers-color-scheme: light) and (forced-colors: none) {
	:root {
		--color-windowCaptionBackground: ;
		--color-windowCaptionText: ;
		--color-windowBackground: ;
		--color-windowText: ;
		--color-buttonBackground: ;
		--color-buttonText: ;
		--color-buttonBorderTop: ;
		--color-buttonBorderRight: ;
		--color-buttonBorderLeft: ;
		--color-buttonBorderBottom: ;
		--color-inputBackground: ;
		--color-inputText: ;
		--color-inputBorderTop: ;
		--color-inputBorderRight: ;
		--color-inputBorderLeft: ;
		--color-inputBorderBottom: ;
		--color-highlightBackground: ;
		--color-highlightText: ;
		--color-linkText: ;
		--color-visitedLinkText: ;
		--color-activeLinkText: ;
		--color-markedBackground: ;
		--color-markedText: ;
	}
}

@media (prefers-contrast: more) and (prefers-color-scheme: light) and (forced-colors: none) {
	:root {
		--color-windowCaptionBackground: ;
		--color-windowCaptionText: ;
		--color-windowBackground: ;
		--color-windowText: ;
		--color-buttonBackground: ;
		--color-buttonText: ;
		--color-buttonBorderTop: ;
		--color-buttonBorderRight: ;
		--color-buttonBorderLeft: ;
		--color-buttonBorderBottom: ;
		--color-inputBackground: ;
		--color-inputText: ;
		--color-inputBorderTop: ;
		--color-inputBorderRight: ;
		--color-inputBorderLeft: ;
		--color-inputBorderBottom: ;
		--color-highlightBackground: ;
		--color-highlightText: ;
		--color-linkText: ;
		--color-visitedLinkText: ;
		--color-markedBackground: ;
		--color-activeLinkText: ;
		--color-markedText: ;

	}
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) and (forced-colors: none) {
	:root {
		--color-windowCaptionBackground: ;
		--color-windowCaptionText: ;
		--color-windowBackground: ;
		--color-windowText: ;
		--color-buttonBackground: ;
		--color-buttonText: ;
		--color-buttonBorderTop: ;
		--color-buttonBorderRight: ;
		--color-buttonBorderLeft: ;
		--color-buttonBorderBottom: ;
		--color-inputBackground: ;
		--color-inputText: ;
		--color-inputBorderTop: ;
		--color-inputBorderRight: ;
		--color-inputBorderLeft: ;
		--color-inputBorderBottom: ;
		--color-highlightBackground: ;
		--color-highlightText: ;
		--color-linkText: ;
		--color-visitedLinkText: ;
		--color-activeLinkText: ;
		--color-markedBackground: ;
		--color-markedText: ;
	}
}

:root {
	--colorset-buttonBorder: var(--color-buttonBorderTop) var(--color-buttonBorderRight) var(--color-buttonBorderBottom) var(--color-buttonBorderLeft);
	--colorset-inputBorder: var(--color-inputBorderTop) var(--color-inputBorderRight) var(--color-inputBorderBottom) var(--color-inputBorderLeft);
}

html {
	background-color: var(--color-windowBackground);
	color: var(--color-windowText);
	font-family: system-ui, sans;
	font-size: max(12pt, 3vmin);
}

body {
	margin: 0;
	padding: 1vmin;
}

body * {
	font-family: inherit;
	font-size: inherit;
}

*:disabled{
	opacity: 90%;
	filter: grayscale(1);
}

header {
	background-color: var(--color-windowCaptionBackground);
	color: var(--color-windowCaptionText);
}

main {
	margin: 10vh auto;
	padding: 0.5em;
	max-width: 90vw;
	max-height: 90vh;
	width: 75vmin;
	height: 75vmin;
	display: block;
	background-color: var(--color-windowBackground);
	border: 1px solid var(--color-windowCaptionBackground);
	color: var(--color-windowText);
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

label{
	padding: 0.1ch 0.25ch;
}

input[type="text"],
input[type="multiline"],
select {
	width: 100%;
	margin: auto;
	background-color: var(--color-inputBackground);
	color: var(--color-inputText);
	border-width: var(--length-controlBorderWidth);
	border-style: solid;
	border-color: var(--colorset-inputBorder);
}

input[type="range"] {
	appearance: none;
	background-color: var(--color-inputBackground);
	border-width: var(--length-controlBorderWidth);
	border-style: solid;
	border-color: var(--colorset-inputBorder);
}

input[type="range"]::-moz-range-track {
	height: 100%;
}
input[type="range"]::-moz-range-thumb {
	width: 2ch;
	height: 100%;
	background-color: var(--color-buttonBackground);
	border-width: var(--length-controlBorderWidth);
	border-style: solid;
	border-color: var(--colorset-buttonBorder);
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 100%;
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 2ch;
	height: 100%;
	background-color: var(--color-buttonBackground);
	border-width: var(--length-controlBorderWidth);
	border-style: solid;
	border-color: var(--colorset-buttonBorder);
}

button {
	background-color: var(--color-buttonBackground);
	color: var(--color-buttonText);
	border-width: var(--length-controlBorderWidth);
	border-style: solid;
	border-color: var(--colorset-buttonBorder);
}

main>section>*:not([hidden]) {
	display: block;
}

#parameter-controls {
	display: grid;
	grid-template-columns: max-content auto calc(4ch + 1em) max-content;
}

#phrasebook {
	display: grid;
	grid-template-rows: max-content auto;
}

#phrasebook-controls{
	display: flex;
}

#phrasebook>#phrase-list {
	display: flex;
}

#message-marque {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.25em 0.5em;
}

#message-marque>p {
	display: none;
	margin: 0.25ch;
	padding: 0.5ch;
}

#message-marque>p:first-child,
#message-marque>p.playing {
	display: block;
}

#message-marque>p:first-child {
	background-color: var(--color-markedBackground);
	color: var(--color-markedText);
}

.numeric-readout{
	text-align: right;
	font-variant-numeric: tabular-nums slashed-zero;
}