:root {
	--shade0: #000000;
	--shade1: #313131;
	--shade2: #535353;
	--shade3: #797979;
	--shade4: #999999;
	--shade5: #bdbdbd;
	--shade6: #dddddd;
	--shade7: #ffffff;
	
	--dark-blue: #004299;
	--yellow: #f0f000;
	--green: #00cd00;
	--red: #dd0000;
	--beige: #f0f0bd;
	--dark-green: #538900;
	--gold: #ffbd00;
	--light-blue: #00bdff;
	
	--soft-white: var(--shade5);
	--hard-white: var(--shade7);
	--text: var(--shade6);
}

::selection {
	background-color: var(--dark-blue);
}

@keyframes blink2 {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

@keyframes blink {
	0%, 5% { opacity: 0; }
	6%, 56% { opacity: 1; }
	57%, 100% { opacity: 0; }
}

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

html {
	font-size: 16px;
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #000;
	color: var(--text);
	padding: 0.25rem;
	height: 100vh;
	overflow: hidden;
}

body>div {
	max-width: 60rem;
	width: 100%;
}

img, canvas {
	width: 100%;
	padding: 2rem;
}

.robust-video {
	display: inline-block;
	width: 100%;
	margin-bottom: 2rem;
}

.robust-video video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
}

.robust-video-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
	transition: background-color 140ms ease, color 140ms ease;
}

.robust-video-controls button {
	min-width: 5rem;
}

.robust-video-controls input[type="range"] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 2.2rem;
	background: transparent;
	cursor: pointer;
	margin: 0;
	padding: 0;
	touch-action: none;
}
.robust-video-controls button,
.robust-video-controls input[type="range"] {
	-webkit-tap-highlight-color: transparent;
}
.robust-video-controls input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	background: linear-gradient(
		to right,
		#d8d8d8 0%,
		#d8d8d8 var(--seek-percent, 0%),
		#5b5b5b var(--seek-percent, 0%),
		#5b5b5b 100%
	);
	border: none;
	box-shadow: none;
}
.robust-video-controls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 3px;
	height: 2.8rem;
	background: #ff2a2a;
	border: none;
	margin-top: -13px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.65);
}
.robust-video-controls input[type="range"]::-moz-range-track {
	height: 2px;
	background: #5b5b5b;
	border: none;
}
.robust-video-controls input[type="range"]::-moz-range-progress {
	height: 2px;
	background: #d8d8d8;
	border: none;
}
.robust-video-controls input[type="range"]::-moz-range-thumb {
	width: 3px;
	height: 2.8rem;
	background: #ff2a2a;
	border: none;
	border-radius: 0;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.65);
}
.robust-video-controls input[type="range"]:focus,
.robust-video-controls button:focus {
	outline: 1px solid #9a9a9a;
	outline-offset: 2px;
}.robust-video.is-paused .robust-video-controls {
	background: linear-gradient(to bottom, #16110c 0%, #120d09 100%);
	border-top-color: #4a3424;
}

.robust-video.is-paused .robust-video-controls button {
	border-color: #e0b38a;
	color: #ffd7b3;
	background: #1a120d;
}

.robust-video.is-paused .robust-video-controls span {
	color: #ffd7b3;
}

.robust-video.is-paused input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(
		to right,
		#f0c7a0 0%,
		#f0c7a0 var(--seek-percent, 0%),
		#6d5240 var(--seek-percent, 0%),
		#6d5240 100%
	);
}

.robust-video.is-paused input[type="range"]::-moz-range-track {
	background: #6d5240;
}

.robust-video.is-paused input[type="range"]::-moz-range-progress {
	background: #f0c7a0;
}


table {
	width: 100%;
}

tr > th:first-child, tr > td:first-child {
	width: 30%;
}

.big-table th {
	text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid var(--soft-white);
}

.big-table td {
	padding: 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--shade2);
}

.big-table tbody tr:nth-child(even) {
    background-color: var(--shade1);
}


pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.console {
	display: flex;
	background-color: #151515;
	padding: 2rem;
	flex-grow: 1;
	border-radius: 12px;
	box-shadow: inset 0 0 0.25rem 0.5rem #000;
	overflow: hidden;
}

.soft { color: var(--soft-white); }
.small { font-size: 0.8em; }

h1, h2, h3, h4 {
	color: var(--shade7);
}
b {
	color: var(--gold);
}
h2 { margin-top: 2.4rem; }
h3 { margin-top: 1.8rem; }
h4 { margin-top: 1.4rem; }
p, .quote { margin-bottom: 1rem; }
ul, ol {
	margin-left: 1rem;
	margin-bottom: 1rem;
}
a {
	color: inherit;
	text-decoration: none;
}
.underline {
	text-decoration: underline;
}
hr {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.console::after, .scanline::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.05),
		rgba(0, 0, 0, 0.05) 0.5rem,
		transparent 0.5rem,
		transparent 1rem
	);
	pointer-events: none;
}

#_screen {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
	border-width: 1rem;
	border-color: var(--soft-white);
	border-style: solid;
	text-shadow:
		-1px -1px 1px rgba(8, 0, 255, 0.4),
		1px 1px 1px rgba(255, 0, 0, 0.4),
		0 0 1px rgba(var(--soft-white), .8);
}

.scanline, #_content {
	padding: 1.5rem;
}

#_content {
	overflow-y: auto;
	flex-grow: 1;
}

.scanline {
	position: absolute;
	overflow: hidden;
	background-color: #151515;
}

.console-input-wrapper {
	display: flex;
	font-size: 1.5rem;
	color: var(--soft-white);
}

.console-input, .text-measure {
	background: transparent;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	outline: none;
	caret-color: transparent;
	flex-grow: 1;
}

.text-measure {
	position: absolute;
	visibility: hidden;
	white-space: pre;
}

.cursor {
	background-color: var(--soft-white);
	animation: blink 0.7s steps(1) infinite;
	position: absolute;
	pointer-events: none;
}

.item {
	padding-left: 1.5rem;
	position: relative;
}

.item::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 9.5px/*50%*/;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	background-color: var(--soft-white);
}
.item.skip { padding-left: 0; }
.item.skip:before { display: none; }
.item.log:before { background-color: var(--shade5); }
.item.log[selected]:before { background-color: var(--shade3); }
.item.summary { font-size: 1.4em; margin-top: 2.4rem; }
.item.summary:before { background-color: var(--dark-green); top: 13.5px/**/; }
.item.summary[selected]:before { background-color: var(--green); }
.item.folder:before { background-color: var(--gold); }
.item.folder[selected]:before { background-color: var(--beige); }
.item.report:before { background-color: var(--dark-green); }
.item.report[selected]:before { background-color: var(--green); }
.item.special:before { background-color: var(--dark-blue); }
.item.special[selected]:before { background-color: var(--light-blue); }
.item.action:before { background-color: var(--red); }
.item.action[selected]:before { background-color: var(--shade0); }
.item.note:before { background-color: var(--shade5); }
.item.note[selected]:before { background-color: var(--shade7); }

[t] {
	display: inline-block;
	border-radius: 4px;
	padding: 0 6px;
	font-weight: bold;
	color: var(--shade0);
	background-color: var(--shade7);
}
.t1 { background-color: var(--light-blue); }
.t2 { background-color: var(--red); }
.t3 { background-color: var(--yellow); }
.t4 { background-color: var(--dark-green); }
.t5 { background-color: var(--gold); }
.t6 { background-color: var(--dark-blue); }

.toc { list-style: none; padding: 0; margin: 0; }
.toc-item { margin: .25rem 0; }
.toc-h2 { margin-left: 0; }
.toc-h3 { margin-left: 1.25rem; }
.toc-h4 { margin-left: 2.5rem; }

[heading]::before {
	content: attr(heading);
}

.item:hover {
	cursor: pointer;
}

.item[selected] {
	background-color: var(--shade5);
	color: var(--shade1);
}

.reference {
	text-indent: -1rem;
	padding-left: 1rem;
}
.reference a {
	font-weight: bold;
	text-decoration: underline;
	word-wrap: break-word;
}
.quote {
	position: relative;
}
blockquote {
	display: inline;
	position: relative;
}
blockquote::before {
	content: "\201C";
	position: absolute; 
	top: -0.1em;
	left: -0.6em;
}
blockquote::after {
	/*content: "\201D";*/
	content: "\201E";
	display: inline-block;
	margin-left: -0.6em;
	transform: translateY(0.1em);
}
.boxtext, .quote {
	padding-left: 2rem;
	padding-right: 2rem;
}
.boxtext {
	font-size: 0.8rem;
}
.indent {
	margin-left: 2rem;
}
.text-indent {
	text-indent: 2rem;
}


#_tooltip {
	overflow: hidden;
	position: absolute;
	background: #151515;
	color: var(--soft-white); 
	text-shadow: 0 0 1px rgba(var(--soft-white), .8);
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	max-width: 300px;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	box-shadow:
		rgba(17, 12, 46, 0.15) 0px 12px 100px 0.25rem,
		rgb(0, 0, 0) 0px 0px 0px 0.25rem;
	border-style: solid;
	border-width: 0.75rem;
	border-color: var(--soft-white);
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}
#_tooltip[state="1"] {
	opacity: 1;
}
[tooltip]::after {
	content: "*";
	color: var(--soft-white);
}

#_toast {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	bottom: 0;
	right: 0;
	gap: 1rem;
	max-width: 18rem;
	margin: 4rem;
	user-select: none;
	pointer-events: none;
}

.toast {
	pointer-events: auto;
	min-width: 10rem;
	max-width: 100%;
	background: #151515;
	color: var(--soft-white); 
	text-shadow: 0 0 1px rgba(var(--soft-white), .8);
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	z-index: 1;
	opacity: 0;
	box-shadow:
		rgba(17, 12, 46, 0.15) 0px 12px 100px 0.25rem,
		rgb(0, 0, 0) 0px 0px 0px 0.25rem;
	border-style: solid;
	border-width: 0.75rem;
	border-color: var(--soft-white);
	transform: translateY(10px);
	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	word-wrap: break-word;
}

.toast[show] {
	opacity: 1;
	transform: translateY(0);
}

.toast[type="1"] {
	color: var(--yellow); 
	border-color: var(--yellow);
}

.toast[type="0"] {
	color: var(--red); 
	border-color: var(--red);
}

button {
	background: none;
	border-style: solid;
	border-width: 0.5rem;
	padding: 0.5rem;
	margin: 0;
	color: var(--text);
	border-color: var(--soft-white);
}
button:hover {
	border-color: var(--hard-white);
}

.console-options-wrapper {
	display: flex;
	flex-wrap: wrap;
}
.option {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	cursor: pointer;
	text-wrap: nowrap;
	user-select: none;
}
.option[selected], a:hover {
	background-color: var(--shade5);
	color: var(--shade1);
}

div[audio] {
	margin: 2rem 0;
}
.audio-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.audio-play {
	width: 8rem;
}
.audio-name {
	flex-grow: 1;
	overflow-wrap: anywhere;
}
canvas.audio {
	image-rendering: pixelated;
	display: block;
	height: 64px;
	width: 100%;
	padding: 0;
}

.mb0 { margin-bottom: 0; }
.ml2 { margin-left: 2; }
.mbt1 { 
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.img-ref {
	margin: 0 2rem 1rem 2rem;
	font-style: italic;
	color: var(--soft-white);
}

.img-text, .person {
	display: flex;
	margin-bottom: 1rem;
	justify-content: space-between;
	align-items: center;
}
.img-text img, .person img {
	padding: 0;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	margin-right: 12px;
	display: block;
}
.img-text img {
	margin-left: 2rem;
}
.img-text p, .person p {
	margin: 0;
}
.person {
	margin-bottom: 2rem;
	gap: 1rem;
}
.person div {
	flex-grow: 1;
}
.person-title {
	font-weight: bold;
	color: var(--gold);
}
.person-role {
	font-style: italic;
	color: var(--soft-white);
}

.next {
	display: block;
	margin: 2rem auto 2rem auto;
	max-width: 26rem;
	color: var(--soft-white); 
	text-shadow: 0 0 1px rgba(var(--soft-white), .8);
	padding: 0.75rem 1rem;
	border-style: solid;
	border-width: 0.5rem;
	border-color: var(--soft-white);
	text-align: center;
}

.todo {
	background-color: teal;
	color: magenta;
}




@media only screen and (max-width: 580px) {
	h1 {
		font-size: 1.5em;
	}
	h2 {
		font-size: 1.25rem;
	}
	h3 {
		font-size: 1.175rem;
	}
	h4 {
		font-size: 1.1rem;
	}
	body {
		padding: 0;
	}
	.console {
		padding: 0rem;
		border-radius: 0;
	}
	#_screen {
		border-width: 0.5rem;
	}
}

@media print {
	body {
		overflow: initial;
	}
	p,img,div,li,a,ul,ol {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	div {
		display: block;
	}
	html, body, .console, #_screen, #_content {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-height: initial !important;
		position: initial !important;
		background: none !important;
		color: #000 !important;
		border: none !important;
		box-shadow: none !important;
	}
	#_tooltip, #_toast, .console::after, #_screen::after, #_content::after, #_footer {
		content: none;
		display: none !important;
		background: none !important;
	}
	h2 {
		page-break-before: always;
	}
	h1, h2, h3, h4 {
		color: var(--dark-blue) !important;
	}
	b {
		color: var(--red) !important;
	}	
}