:root {
	--error: #f88;
	--error-highlight: #f00;
	--background: #f3f3f3;
	--background1: #eaeaea;
	--background2: #d5d5d5;
	--color: #161616;
	--highlight: #161616;

	--b1: rgb(245, 220, 233);
	--g1: rgba(245, 220, 233, 0.8);
	--bor1: rgb(196, 176, 186);

	--b2: rgb(228, 212, 160);
	--g2: rgba(228, 212, 160, 0.8);
	--bor2: rgb(182, 170, 128);

	--b3: rgb(245, 245, 220);
	--g3: rgba(245, 245, 220, 0.8);
	--bor3: rgb(196, 196, 176);

	--b4: rgb(220, 245, 223);
	--g4: rgba(220, 245, 223, 0.8);
	--bor4: rgb(176, 196, 178);

	--b5: rgb(207, 240, 245);
	--g5: rgba(207, 240, 245, 0.8);
	--bor5: rgb(166, 192, 196);

	--b6: rgb(227, 207, 245);
	--g6: rgba(227, 207, 245, 0.8);
	--bor6: rgb(182, 166, 196);

	--border-thickness: 3px;
	--monospaceness: 65;
	--grid-size: 100px;
	--grid-line-size: 7px;
	--connection-line-width: 5px;
}

@font-face {
	font-family: Areal;
	src: url('./fonts/areal.woff2') format("woff");
}

* {
  font-family: "ABC ROM Unlicensed Trial", Areal;
	font-variation-settings: "MONO" var(--monospaceness);
	box-sizing: border-box;
	tab-size: 2em;
}

body {
	color: var(--color);
}

/* *:hover { */
/* 	font-variation-settings: "MONO" 100; */
/* } */
.mr {
	margin-right: .5em;
}

blockquote {
	background: #2222;
  padding: .125em;
  margin-left: 0;
  padding-left: 1.25em;
  padding-right: 1em;
}

p {
	font-size: 1.4em;
}

h1 {
	line-height: 1.3em;
	font-weight: 650;
	font-size: 3em;
	margin-top: .5em;
	margin-bottom: 0;
}

h2 {
	line-height: 1.3em;
	font-weight: 650;
	font-size: 2.8em;
	margin-top: .5em;
	margin-bottom: 0;
}

h3 {
	line-height: 1.3em;
	font-weight: 650;
	font-size: 2.4em;
	margin-top: .5em;
	margin-bottom: 0;
}

h4 {
	line-height: 1.3em;
	font-weight: 650;
	font-size: 1.5em;
	margin-top: .5em;
	margin-bottom: 0;
}

h5 {
	line-height: 1.3em;
	font-weight: 650;
	font-size: 1.25em;
	margin-top: .5em;
	margin-bottom: 0;
}

h6 {
	line-height: 1.3em;
	font-weight: 650;
	font-size: 1em;
	margin-top: .5em;
	margin-bottom: 0;
}

strong {
	background: #ff04;
}

.popup {
	position: fixed;
	max-width: 60vw;
	height: 60vh;
	top: 15vh;
	left: 15vh;
	border: var(--border-thickness) solid var(--highlight);
	background-color: var(--background1);
	padding: 1em;
	overflow-y: scroll;
	z-index: 99999999;
	min-width: 750px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .1);
}

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 99999998;
}

.unsaved-changes {
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: visible;
	z-index: 99999999;
}

.experimental-plugins {
	width: 800px;
	max-width: calc(100vw - 2em);
	min-width: 0;
	height: 80vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow-y: auto;
}

.experimental-plugins-close {
	position: absolute;
	top: .5em;
	right: .5em;
}

.experimental-plugin-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	margin: 1.5em 0;
}

.experimental-plugin-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	padding: 1em;
	border: 2px solid var(--highlight);
	background: var(--background);
}

.experimental-plugin-card-details {
	flex: 1;
	min-width: 0;
}

.experimental-plugin-card h4 {
	margin: 0;
}

.experimental-plugin-card p {
	margin: .5em 0 0;
}

.experimental-plugin-toggle {
	min-width: 7em;
	padding: .5em .75em;
	border-radius: 100px;
}

.experimental-plugin-toggle[aria-checked="true"] {
	background: #eaffe5;
	border-color: #004b05;
	color: #004b05;
}

.experimental-plugin-toggle[aria-checked="false"] {
	background: #ffc9c9;
	border-color: #d40000;
	color: #c80000;
}

.experimental-plugins-actions {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1em;
}

.unsaved-changes-actions {
	display: flex;
	gap: .5em;
	margin-top: 1.5em;
}

.unsaved-changes-actions > * {
  font-size: 1.2em;
}

#save-btn {
	color: #004b05;
  border-color: #004b05;
  background: #eaffe5;
}

#discard-btn {
	color: #c80000;
  border-color: #d40000;
  background: #ffc9c9;
}

.image {
	width: 100%;
	height: 100%;
	background-size: cover;
}

svg {
	pointer-events: none;
}

line {
	pointer-events: stroke;
}

line.connection-line {
	stroke-width: var(--connection-line-width);
}

line.connection-line:hover {
	stroke: #f00;
}

.bar {
	height: 100%;
	border-radius: 100px;
	border: 1px solid black;
}

.ruler {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
}

.history {
	display: flex;
}


body {
	margin: 0;
	background: var(--background);
	overflow-y: hidden;
	overflow-x: hidden;
	/* background-size: 50px 50px; */
	/* background-image: linear-gradient(to right, var(--background2) 1px, transparent 1px),linear-gradient(to bottom, var(--background2) 1px, transparent 1px); */
}

.block {
	overflow-y: scroll;
	width: 100%;
	height: 100%;
	-ms-overflow-style: none;
	scrollbar-width: none;
	z-index: 99;
}

.block.text,
.block.channel {
	padding: 1em;
	padding-top: .5em;
}

.channel-renderer h2,
.channel-renderer h4,
.channel-renderer p {
	margin-top: .25em;
	margin-bottom: .25em;
}

.channel-preview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5em;
	margin-top: .75em;
}

.channel-preview-card {
	display: block;
	width: 100%;
	position: relative;
	min-width: 0;
	aspect-ratio: 1;
	overflow: hidden;
	padding: 0;
	border: 2px solid var(--highlight);
	background: var(--background1);
	color: var(--color);
	text-align: left;
	cursor: pointer;
}

.channel-preview-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.channel-preview-text {
	display: block;
	height: 100%;
	padding: .6em;
	overflow: hidden;
	white-space: pre-wrap;
	word-break: break-word;
}

.channel-preview-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .3em .4em;
	overflow: hidden;
	background: #000b;
	color: white;
	font-size: .8em;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.channel-preview-status {
	grid-column: 1 / -1;
	padding: 1em 0;
}

.block.processing {
	display: flex;
	align-items: center;
	justify-content: center;
}

.processing-animation::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-left: .5em;
	border: .15em solid var(--background2);
	border-top-color: var(--highlight);
	border-radius: 50%;
	animation: processing-spin 800ms linear infinite;
}

@keyframes processing-spin {
	to {
		transform: rotate(360deg);
	}
}

.top-bar {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 350ms;
	padding: .3em;
	z-index: 999;
}

.bottom-bar {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: all 350ms;
	padding: .3em;
	display: flex;
	z-index: 999;
}

.bottom-bar > * {
  margin-right: .25em;
}

.controls {
	display: flex;
}

.video-current-time {
	padding: .3em;
}

.top-bar p {
	padding: .3em;
	margin: 0;
}

/* .draggable.node:hover { */
/* 	z-index: 98; */
/* } */

.draggable:hover .top-bar {
	opacity: 1;
}

.draggable:hover .bottom-bar {
	opacity: 1;
}

.draggable.group .color-bar {
	opacity: 0;
	transition: all 150ms;
}

.draggable.group:hover .color-bar {
	opacity: 1;
}

.color-bar {
	position: absolute;
	top: .3em;
	right: .3em;
}

.container {
	width: 100000px;
	height: 100000px;
	background: var(--background);
	background-size: var(--grid-size) var(--grid-size);
	background-image: linear-gradient(
		to right,
		var(--background1) var(--grid-line-size),
		transparent var(--grid-line-size)
	), linear-gradient(
		to bottom,
		var(--background1) var(--grid-line-size),
		transparent var(--grid-line-size)
	);
}

.container[holding='true'] {
	cursor: grabbing;
}

.container[dragmode='zoom'] {
	cursor: zoom-in;
}

.draggable {
	transition: background-color 500ms;
	background: var(--background);
	position: absolute;
	border: var(--border-thickness) solid var(--color);
	/* overflow: hidden; */
	/* border-radius: 8px; */
	font-family: monospace;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .13);
}

.draggable.node {
	z-index: 99;
}

.draggable.group {
	z-index: 91;
	background-color: #ff22;
	padding: 1em;
}

.big-box {
	/* Keep blocks and groups clickable above the selection's drag surface. */
	z-index: 90;
	pointer-events: auto;
}

.top-buttons {
	z-index: 99;
	position: fixed;
	left: 0;
	top: 0;
	height: max-content;
	width: 98vw;
	padding: .5em;
	display: flex;
}

.bottom-buttons {
	z-index: 99;
	position: fixed;
	left: 0;
	bottom: 0;
	height: max-content;
	width: 98vw;
	padding: .5em;
	display: flex;
}

.top-buttons button {
	height: 2em;
}

.top-buttons>*,
.bottom-buttons>*
{ margin-right: 1em; }

.snapping-control {
	display: inline-flex;
	align-items: center;
	gap: 0;
	position: relative;
}

.snap-toggle {
	width: 2em;
	height: 2em;
	padding: 0;
	line-height: 1;
	border-right: 0;
}

.snapping-panel {
	position: absolute;
	display: none;
	flex-direction: column;
	background: #eee;
	padding: .5em;
	border: 1px solid black;
	top: 100%;
	left: 0;
	z-index: 100;

	border: 2px solid black;
	margin-top: .25em;
}

.snapping-panel[open='true'] {
	display: flex;
}

.snap-slider {
	width: 10em;
}

.snap-value {
	text-align: center;
}

.spaced>*
{
	margin-right: .5em;
}

svg.background {
	z-index: 94;
	position: absolute;
	top: 0;
	left: 0;
}

.psuedo-container {
	padding: 1em;
	cursor: move;
	border: var(--border-thickness) solid var(--highlight);
	background: var(--background);
	position: fixed;
	z-index: 90;
}

.block.image {
	display: flex;
	justify-content: center;
	align-items: center;
}

.block.image.video {
	position: relative;
}

.video-subtitle {
	position: absolute;
	/* left: 1em; */
	/* right: 1em; */
	bottom: 2em;
	padding: .2em .4em;
	width: max-content;
	max-width: 95%;
	color: white;
	background: #000b;
	text-align: center;
	white-space: pre-line;
	/* pointer-events: none; */
}

.srt-scroll {
	z-index: 100;
	display: flex;
	flex-direction: column;
	padding: .75em ;
	background: black;
	color: #777;
	overflow: hidden;
}

.srt-scroll-controls {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
}

.srt-scroll-controls button {
	color: white;
	background: black;
}

.srt-scroll-line:hover {
  background: #3c3c3c;
}

.srt-scroll-lines {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.srt-scroll-line {
	margin: .5em 0;
	color: #777;
	white-space: pre-line;
	cursor: pointer;
}

.srt-scroll-line::selection,
.srt-scroll-line *::selection {
	background: white;
	color: black;
}

.srt-scroll-time {
  overflow: hidden;
  transition: all 650ms ease;
  white-space: nowrap;
  background: #eee;
  color: black;
  vertical-align: baseline;
  width: max-content;
  max-height: 0;
	max-width: 0;
  user-select: none;
	opacity: 0;
}

.srt-scroll-line.active .srt-scroll-time {
	max-width: 260px;
  padding: 0 .2em;
  max-height: 2em;
  opacity: 1;
  margin-bottom: .15em;
}

.srt-scroll-line.active {
  color: white;
  margin: 1em 0;
}


.srt-scroll-close {
	position: absolute;
	top: .5em;
	right: .5em;
	color: white;
	background: black;
}

.context-menu {
	z-index: 10000;
	min-width: 160px;
	padding: 4px;
	border: 1px solid var(--color);
	background: var(--background);
	box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
	color: var(--color);
	font: 12px Areal, sans-serif;
	cursor: pointer;
	user-select: none;
	outline: none;
}

.context-menu-item {
	display: block;
	width: 100%;
	padding: 4px 6px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.context-menu-item:hover,
.context-menu-item:focus {
	background: var(--background1);
	outline: none;
}

.context-menu-item:disabled {
	opacity: .4;
	cursor: default;
}

.context-menu-item.danger {
	color: #d33;
}

.context-menu-separator {
	height: 1px;
	margin: 4px 2px;
	background: var(--color);
	opacity: .25;
}

.context-menu-label {
	padding: 4px 6px;
	opacity: .6;
}



img,
video,
audio {
	max-width: 100%;
	max-height: 100%;
}

iframe {
	width: 95%;
	height: 95%;
	margin: 1em;
	outline: none;
	border: none;
}

button {
	/* all: unset; */
	border: 2px solid var(--highlight);
	background: var(--background);
	color: var(--color);
	text-decoration: none;
	display: inline;
}

.node[selected='true'] {
	border-width: 3px;
	border-color: #00f;
	/* box-shadow: 4px 4px 0 #ee07; */
}


.connection svg,
.connection svg line {
	pointer-events: none;
}

.big-box {}


.edge-connector {
	background: yellow;
	border: 3px solid black;
	/* border-radius: 50px; */
	color: black;
	cursor: crosshair;
	width: 40px;
	height: 40px;
	z-index: 99999;
}

.wobble {
	animation: wobble .5s ease-in-out infinite alternate;
	opacity: 1 !important;
}

@keyframes wobble {
	33% {
		transform: rotate(5deg);
	}

	66% {
		transform: rotate(-5deg);
	}
}

.search a,
.channel a {
	text-decoration: none;
}

button:hover,
a.button:hover {
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
}

button:active,
a.button:active {
	transform: translate(2px, 2px);
	background: var(--background2);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
}

td {
	border-right: 1px solid #0002;
	padding: 0.2em 1em;
	border-bottom: 1px solid #0002;
}

th {
	text-align: left;
	padding: 0 1em;
	border-bottom: 1px solid;
}

xmp,
pre {
	color: #f45d;
	font-weight: 600;
	font-family: monospace;
}

code {
	background: #2222;
	padding: 0 .2em;
}

.icon {
	margin-right: .5em;
	width: 40px;
}


.connection:hover {
	background: var(--highlight);
}

.nodes[active='false'] {
	display: none;
}

.connection {
	position: absolute;
	padding: 5px;
	width: 30px;
	height: 30px;
	background-color: var(--background);
	border: var(--border-thickness) solid var(--highlight);
}

.connection.input {
	/* top: -30px; */
	/* left: 0px; */
}

.connection.output {
	/* bottom: -30px; */
	/* right: 0px; */
}

.line-canvas {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 89;
	pointer-events: none;
}

.psuedo-slider {
	cursor: move;
	position: fixed;
	background: var(--background);
	z-index: 90;
	border: var(--border-thickness) solid var(--highlight);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, .2);
}

.absolute {
	position: absolute;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.box {
	width: 30px;
	height: 30px;
	opacity: 0;
}

.cur-se {
	cursor: se-resize;
}

.cur-s {
	cursor: s-resize;
}

.cur-e {
	cursor: e-resize;
}

.box:hover {
	/* border: 1px solid black; */
	opacity: 1;
}

.psuedo-cursor {
	width: 30px;
	height: 30px;
	position: absolute;
	font-family: monospace;
	color: var(--background);
	background: var(--highlight);
	z-index: 9;
}

.psuedo-cursor:hover {
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
	cursor: grab;
}

.connection:hover {
	cursor: crosshair;
}

textarea {
	margin-top: 1.5em;
	width: 100%;
	background-color: inherit;
	outline: none;
	border: none;
	height: 95%;
	padding: .5em;
    font-size: 1.4em;
}

.help {
	position: fixed;
	width: 30vw;
	height: 90vh;
	bottom: 5vh;
	height: max-content;
	background: var(--b4);
	border: var(--border-thickness) solid var(--highlight);
	z-index: 299;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .1);
}

.help>* {
	margin: 1rem;
	padding: .5rem;
}

.help[active='true'] {
	right: 1vw;
}

.help[active='false'] {
	right: -40vw;
}

.sidebar {
	position: fixed;
	width: 30vw;
	height: 90vh;
	top: 5vh;
	background: var(--background1);
	border: 2px solid var(--highlight);
	z-index: 299;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .1);
	transition: all 150ms ease-in-out;
	overflow-y: scroll;
}

.cursor {
	background: var(--color);
	pointer-events: none;
}

.sidebar>* {
	margin: 1rem;
	padding: .5rem;
}

.sidebar[open='true'] {
	left: 1vw;
}

.sidebar[open='false'] {
	left: -60vw;
}

.section {
	border-top: 1px solid var(--color);
	font-family: monospace;
}

.section.search button {
	margin: .2em;
	border: 1.5px solid var(--highlight);
}

.recent-slugs {
	display: flex;
	flex-direction: column;
	gap: .4em;
	height: 650px;
	max-height: 650px;
	overflow-y: auto;
	overflow-x: hidden;
}

.recent-slug {
	display: block;
	width: 100%;
	padding: .2em .5em;
	border: 1.5px solid var(--highlight);
	background: var(--background);
	color: var(--color);
	text-decoration: none;
	white-space: nowrap;
}

.recent-slug:hover {
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
}

.recent-slug:active {
	transform: translate(2px, 2px);
	background: var(--background2);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
}

.canvas-list {
	display: flex;
	flex-direction: column;
	gap: .4em;
	margin-bottom: .4em;
}

.canvas-row {
	display: flex;
	gap: .3em;
	align-items: center;
}

.canvas-row .canvas-link {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.canvas-link[open='true'] {
	background: var(--background2);
	font-weight: bold;
}

.section.canvases button {
	border: 1.5px solid var(--highlight);
}

.group .label {
	border-bottom: 1px solid black;
	max-width: 400px;
	width: max-content;

}

.notification {
	z-index: 9819945129;
	width: 25vw;
	max-width: 400px;
	color: var(--color);
	background-color: var(--background);
	padding: 1em;
	min-height: 4em;
	border: var(--border-thickness) solid var(--highlight);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .13);
	opacity: 1;
	transition: all 2500ms ease;
	pointer-events: none;
}

.notification.error {
	color: red;
	border: var(--border-thickness) solid var(--error);
	box-shadow: 6px 6px 0 rgba(255, 0, 0, .13);
	opacity: 1;
	transition: all 2500ms ease;
}

s {
	text-decoration-thickness: 4px;
}

.notification.error span {
	color: inherit;
}

.notification.error a {
	background-color: red;
	color: white;
}

button[updated='true'] {
	pointer-events: none;
	opacity: .3;
}

.change-item {}

.change-map {
	width: 100%;
	height: 350px;
}

.change-block {
	height: 350px;
	width: 350px;
	border: var(--border-thickness) solid var(--highlight);
	padding: 1em;
	scrollbar-width: none;
	overflow-y: scroll;
}

.change-block.to {
	--color: green;
}

.change-block.from {
	--color: red;
}

.change-map[showing='false'] {
	display: none;
}

.change-map[showing='true'] {
	display: grid;
	grid-template-columns: 350px 350px;
	grid-gap: 15px;
}

.timer-panel {
	position: absolute;
	display: none;
	flex-direction: column;
	background: #eee;
	padding: .5em;
	border: 2px solid black;
	margin-top: .25em;
}

.timer-panel[active='true'] {
	display: flex;
}

/* Presence in rooms */
.section.people:not(:has(.people-list)) {
	display: none;
}

.person {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: .25em 0;
}

.presence-swatch {
	display: inline-block;
	width: .8em;
	height: .8em;
	border-radius: 50%;
	flex: none;
}

.presence-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 100000;
}

.presence-cursor {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: .3em;
	transform-origin: 0 0;
	white-space: nowrap;
	font-size: 12px;
}

.presence-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color);
	box-shadow: 0 0 0 2px var(--background, white);
}

.presence-name {
	background: var(--color);
	color: white;
	padding: 0 .4em;
	border-radius: 3px;
}