* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	font-size: 150%;

	--prompter-font: "Atkinson Hyperlegible";
	--prompter-font-size: 8;
	--prompter-line-height: 1.5;
	--prompter-padding: 4;

	--toolbar-height: 2rem;
}

body {
	display: grid;
	grid-template:
		"prompter toolbar" 1fr / 1fr auto;

	font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
	background-color: #000;
	color: #fff;

	width: 100%;
	height: 100%;
}

noscript {
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 1rem;

	padding: 2rem;

	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	background-color: #000;

	overflow-y: auto;
}

noscript > h1 {
	letter-spacing: -0.04em;
}

#drop-zone {
	z-index: -99999;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

[data-is-playing="1"][data-is-idle="1"] * {
	cursor: none !important;
}

button {
	background: transparent;

	color: inherit;
	border: none;
	font: inherit;
	padding: 0.5rem;
	border-radius: 0.25rem;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}

button:hover {
	background: #fff;
	color: #000;
}

.icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	mask: var(--icon) 0 0/100% 100% no-repeat;
	
}

#toolbar {
	grid-area: toolbar;

	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	transition: opacity 1s ease;
}

[data-is-playing="1"][data-is-idle="1"] #toolbar {
	opacity: 0;
}

#toolbar > .flex-spacer {
	flex-grow: 1;
}

#toolbar > [data-tooltip] {
	position: relative;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#toolbar > [data-tooltip]::after {
	content: attr(data-tooltip);
	pointer-events: none;
	z-index: 9999;

	filter: grayscale(100%);

	display: flex;
	align-items: center;
	justify-content: end;
	position: absolute;
	top: 50%;
	right: 2rem;
	width: max-content;

	padding: 0.5rem;

	font-size: 0.667rem;

	background: #000;
	border: 1px solid #444;
	border-radius: 0.25rem;
	color: #fff;

	opacity: 0;
	transform: translate(0, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

#toolbar > [data-tooltip]:hover::after {
	opacity: 1;
	transform: translate(-1rem, -50%);
	transition: opacity .2s ease .6s, transform .2s ease .6s;
}

#toolbar > [data-tooltip][data-shortcut]::after {
	content: attr(data-tooltip) " (" attr(data-shortcut) ")";
}

#prompter {
	grid-area: prompter;

	font-family: var(--prompter-font);
	font-size: calc(1vh * var(--prompter-font-size));
	line-height: calc(1vh * var(--prompter-font-size) * var(--prompter-line-height));
	letter-spacing: 0.04em;
	
	width: 100%;
	height: 100vh;

	overflow: hidden;

	user-select: none;

	filter: grayscale(100%);

	transition: opacity .2s, scale .2s;
}

.dropping-file #prompter {
	opacity: 0.2;
	scale: 0.9;
}

#prompter.flip-x {
	transform: scaleX(-1);
}

#prompter.flip-y {
	transform: scaleY(-1);
}

#prompter.flip-x.flip-y {
	transform: scale(-1);
}

#prompter::before {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	left: calc(2.5vh + 0.5vh * var(--prompter-padding));
	width: calc(0.35vh * var(--prompter-font-size));;
	height: calc(0.35vh * var(--prompter-font-size));;
	border-radius: 100%;
	translate: -50% -50%;
	background-color: #fff;
}

#prompter > .scrolling-content {
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: none;
	width: 100%;
	height: 100%;
	padding: calc(50vh - 0.5vh * var(--prompter-font-size) * var(--prompter-line-height));
	padding-left: calc(5vh + 1vh * var(--prompter-padding));
	padding-right: calc(1vh * var(--prompter-padding));
}

#prompter > .scrolling-content > * {
	opacity: 0.5;
	transition: opacity 1s ease;
}

#prompter > .scrolling-content > pre {
	white-space: pre-wrap;
}

#prompter > .scrolling-content > .highlighted {
	opacity: 1;
}

#prompter > .scrolling-content > * + * {
	margin-top: 0.5em;
}

#prompter > .scrolling-content ul {
	list-style: square;
}

#prompter > .scrolling-content ul,
#prompter > .scrolling-content ol,
#prompter > .scrolling-content li {
	margin-left: 0.5em;
}

#prompter > .scrolling-content li {
	margin-top: 0.5em;
}

#prompter > .scrolling-content a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #888;
}

#prompter > .scrolling-content hr {
	border: none;
	height: 0.1em;
	opacity: 1;
	background-color: #888;
}