@property --primary-bg-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #000;
}

@property --primary-fg-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #ffe400;
}

@property --primary-link-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #fffacc;
}

@property --secondary-link-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #2058ff;
}

@property --button-hover-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #4d7aff;
}

@property --disabled-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #4a4a4a;
}

@property --toggle-off-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #666;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	height: 100%;
	height: -webkit-fill-available;
	height: 100dvh;
	font-size: clamp(10px, min(4vw, calc(100vh / 42)), 16px);
	font-size: clamp(10px, min(4vw, calc(100dvh / 42)), 16px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background-color: #000;
	color-scheme: dark;
	overflow: hidden;
}

body {
	background-color: var(--primary-bg-color);
	color: var(--primary-fg-color);
	margin: 0;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}

#contentContainer {
	width: 100%;
	height: 100%;
	position: relative;
}

html.standalone,
html.standalone body,
html.standalone #contentContainer {
	height: 100%;
	height: 100vh;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
	html,
	body,
	#contentContainer {
		height: 100%;
		height: 100vh;
	}
}

button {
	font-family: "Times New Roman", Times, serif;
	color: var(--primary-link-color);
	font-size: 1em;
	cursor: pointer;
	border: none;
	background-color: transparent;
	outline: none;
	padding: 6px 8px 6px 8px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

button:focus-visible {
	outline: 2px solid var(--secondary-link-color);
	outline-offset: 2px;
}

select:focus-visible {
	outline: 3px solid var(--secondary-link-color);
	outline-offset: 3px;
}

button:hover:not(:disabled) {
	color: var(--button-hover-color);
}

button:disabled {
	color: var(--disabled-color);
	cursor: not-allowed;
}

button[hidden] {
	display: none !important;
}

.iconButton {
	position: relative;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 6px;
}

.iconOnlyButton {
	padding: 6px;
}

.iconButton .icon {
	width: 28px;
	height: 28px;
}

.buttonLabel {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.iconButton:focus-visible .buttonLabel {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	margin: 0;
	padding: 4px 8px;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
	border: 0;
	font-size: 0.875rem;
	line-height: 1.2;
	text-align: center;
	color: var(--primary-bg-color);
	background-color: var(--primary-fg-color);
	border-radius: 4px;
	z-index: 2;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.iconButton:hover .buttonLabel {
		position: absolute;
		bottom: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		height: auto;
		margin: 0;
		padding: 4px 8px;
		overflow: visible;
		clip: auto;
		white-space: nowrap;
		border: 0;
		font-size: 0.875rem;
		line-height: 1.2;
		text-align: center;
		color: var(--primary-bg-color);
		background-color: var(--primary-fg-color);
		border-radius: 4px;
		z-index: 2;
		pointer-events: none;
	}

	.iconButton:disabled:hover .buttonLabel {
		color: var(--primary-link-color);
		background-color: var(--disabled-color);
	}
}

.iconButton:disabled:focus-visible .buttonLabel {
	color: var(--primary-link-color);
	background-color: var(--disabled-color);
}

.icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	background-color: currentColor;
}

.homeIcon {
	mask: url(icons/home.svg) no-repeat center / contain;
	-webkit-mask: url(icons/home.svg) no-repeat center / contain;
	background-color: currentColor;
}

.startIcon {
	mask: url(icons/start.svg) no-repeat center / contain;
	-webkit-mask: url(icons/start.svg) no-repeat center / contain;
	background-color: currentColor;
}

.microphoneIcon {
	mask: url(icons/microphone.svg) no-repeat center / contain;
	-webkit-mask: url(icons/microphone.svg) no-repeat center / contain;
	background-color: currentColor;
}

.microphoneMutedIcon {
	mask: url(icons/microphone-muted.svg) no-repeat center / contain;
	-webkit-mask: url(icons/microphone-muted.svg) no-repeat center / contain;
	background-color: currentColor;
}

.settingsIcon {
	mask: url(icons/settings.svg) no-repeat center / contain;
	-webkit-mask: url(icons/settings.svg) no-repeat center / contain;
	background-color: currentColor;
}

.signOutIcon {
	mask: url(icons/sign-out.svg) no-repeat center / contain;
	-webkit-mask: url(icons/sign-out.svg) no-repeat center / contain;
	background-color: currentColor;
}

.signUpIcon {
	mask: url(icons/sign-up.svg) no-repeat center / contain;
	-webkit-mask: url(icons/sign-up.svg) no-repeat center / contain;
	background-color: currentColor;
}

.switchIcon {
	mask: url(icons/switch.svg) no-repeat center / contain;
	-webkit-mask: url(icons/switch.svg) no-repeat center / contain;
	background-color: currentColor;
}

.backIcon {
	mask: url(icons/back.svg) no-repeat center / contain;
	-webkit-mask: url(icons/back.svg) no-repeat center / contain;
	background-color: currentColor;
}

.submitIcon {
	mask: url(icons/submit.svg) no-repeat center / contain;
	-webkit-mask: url(icons/submit.svg) no-repeat center / contain;
	background-color: currentColor;
}

.openInNewIcon {
	mask: url(icons/open-in-new.svg) no-repeat center / contain;
	-webkit-mask: url(icons/open-in-new.svg) no-repeat center / contain;
	background-color: currentColor;
}

.settingsCloseButton {
	position: absolute;
	top: max(16px, env(safe-area-inset-top));
	left: max(16px, env(safe-area-inset-left));
	font-size: 1.2em;
}

.visuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#toast {
	position: fixed;
	bottom: max(24px, calc(12px + env(safe-area-inset-bottom)));
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	z-index: 20;
	padding: 12px 20px;
	background-color: var(--primary-fg-color);
	color: var(--primary-bg-color);
	border-radius: 10px;
	font-family: "Times New Roman", Times, serif;
	font-size: 1.2em;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}