#editable, #output {
	line-height: 1.3;
	tab-size: 2;
	font-variant-ligatures: none;
	font-family: "Fira Code", monospace;
	font-size: 18px;
	width: auto;
	padding: 0.3em;
	white-space: pre;
	color: black;
	caret-color: orange;
	&::selection {
		background-color: lightgray;
		color:;
	}
	.line-number {
		user-select: none !important;
		-webkit-user-select: none !important;
		min-width: 1.5em;
		display: inline-block;
		text-align: right;
		font-size: 80%;
		font-weight: bold;
		vertical-align: middle;
		padding-right: 0.2em;
		color: rgb(0,0,0 / 0.5);
		padding: 0.2em;
		line-height: 1.3;
	}

	
	&::highlight(pp-line-comment), &::highlight(pp-block-comment), &::highlight(mark-white-space), &::highlight(mark-block-comment), &::highlight(mark-line-comment){
		color: gray;
		background: white;
	}
	&::highlight(pp-white-space), .pp-white-space, &::highlight(pp-newLine), .pp-newline, &::highlight(mark-white-space) {
		background: white;
	}
	&::highlight(pp-unfinished-block-comment), .pp-unclosed-comment {
		color: gray;
		background: white;
	}
	&::highlight(pp-identifier), .pp-identifier {
		color: #2b31a8;
	}
	&::highlight(pp-reserved-identifier), .pp-reserved-identifier {
		color: hsl(289deg 79% 50%);
		--base-color: hsl(289deg 79% 50% / 0.3) !important;
	}
	&::highlight(pp-underscore-identifier), .pp-reserved-identifier {
		color: hsl(209deg 79% 50%);
		--base-color: hsl(209deg 79% 50% / 0.3) !important;
	}
	&::highlight(pp-unexpanded-identifier), .pp-unexpanded-identifier {
		color: #2b31a8;
		text-decoration: underline wavy #fa6413;
	}
	&::highlight(pp-raw-string), .pp-raw-string {
		color: orange;
		--base-color: hsl(39deg 100% 50% / 0.1) !important;
		background: hsl(39deg 100% 50% / 0.1);
	}
	&::highlight(pp-unfinished-raw-string), .pp-unfinished-raw-string {
		color: orange;
		--base-color: hsl(7deg 100% 50% / 0.3) !important;
		background: hsl(39deg 100% 50% / 0.1);
	}
	&::highlight(pp-raw-string-udl), .pp-raw-string-udl {
		color: orangered;
		--base-color: hsl(39deg 100% 50% / 0.3) !important;
		background: hsl(39deg 100% 50% / 0.3);
	}
	&::highlight(pp-string), .pp-string {
		color: orange;
		--base-color: hsl(39deg 100% 50% / 0.1) !important;
		background: hsl(39deg 100% 50% / 0.1) ;
	}
	&::highlight(pp-udl-string), .pp-udl-string {
		color: orangered;
		--base-color: hsl(39deg 100% 50% / 0.3) !important;
		background: hsl(39deg 100% 50% / 0.3);
	}
	&::highlight(pp-udl-character), .pp-udl-character {
		color: #ff00d2;
		--base-color: hsl(311deg 100% 50% / 0.3) !important;
		background: hsl(311deg 100% 50% / 0.3);
	}
	&::highlight(pp-character), .pp-character {
		color: #ff00d2;
		--base-color: hsl(311deg 100% 50% / 0.1) !important;
		background: hsl(311deg 100% 50% / 0.1);
	}
	&::highlight(pp-pp-number), .pp-pp-number {
		color: #ff00d2;
		--base-color: hsl(311deg 100% 50% / 0.1) !important;
		background: hsl(311deg 100% 50% / 0.1);
	}
	&::highlight(pp-punctuation), .pp-punctuation {
		color: hsl(83 98% 25%);
		--base-color: hsl(83 88% 45% / 0.1) !important;
	}
	&::highlight(pp-preprocessor-operator), .pp-preprocessor-operator {
		color: black;
		--base-color: black !important;
		background: hsl(311deg 100% 0% / 0.1);
	}
	&::highlight(pp-preprocessor-token-pasting-operator), .pp-preprocessor-token-pasting-operator {
		color: black;
		--base-color: black !important;
		background: hsl(311deg 100% 0% / 0.1);
	}
	&::highlight(pp-kw-import), .pp-kw-import,
	&::highlight(pp-kw-export), .pp-kw-export,
	&::highlight(pp-kw-module), .pp-kw-module,
	&::highlight(pp-kw-include), .pp-kw-include,
	&::highlight(pp-kw-ifdef), .pp-kw-ifdef,
	&::highlight(pp-kw-ifndef), .pp-kw-ifndef,
	&::highlight(pp-kw-if), .pp-kw-if,
	&::highlight(pp-kw-elifdef), .pp-kw-elifdef,
	&::highlight(pp-kw-elifndef), .pp-kw-elifndef,
	&::highlight(pp-kw-elif), .pp-kw-elif,
	&::highlight(pp-kw-else), .pp-kw-else,
	&::highlight(pp-kw-endif), .pp-kw-endif,
	&::highlight(pp-kw-define), .pp-kw-define,
	&::highlight(pp-kw-undef), .pp-kw-undef,
	&::highlight(pp-kw-pragma), .pp-kw-pragma,
	&::highlight(pp-kw-embed), .pp-kw-embed,
	&::highlight(pp-kw-error), .pp-kw-error,
	&::highlight(pp-kw-warning), .pp-kw-warning,
	&::highlight(pp-kw-line), .pp-kw-line,
	&::highlight(mark-pp)
	 {
		color: black;
		--base-color: black !important;
		background: hsl(311deg 100% 0% / 0.1);
	}
	
	&::highlight(pp-header-name), .pp-header-name {
		color: black;
		--base-color: hsl(311deg 100% 30% / 0.1) !important;
		background: hsl(311deg 100% 30% / 0.1);
	}
	
	&::highlight(pp-curly-open), .pp-curly-open, &::highlight(pp-curly-close), .pp-curly-close {
		color: hsl(130 79% 50%);
		background-color: hsl(130 79% 50% / 0.1);
		--base-color: hsl(130 79% 50% / 0.1) !important;
	}
	&::highlight(pp-square-open), .pp-square-open, &::highlight(pp-square-close), .pp-square-close {
		color: hsl(169 79% 50%);
		background-color: hsl(169 79% 50% / 0.1);
		--base-color: hsl(169 79% 50% / 0.1) !important;
	}
	&::highlight(pp-parents-open), .pp-parents-open, &::highlight(pp-parents-close), .pp-parents-close {
		color: hsl(250 79% 50%);
		background-color: hsl(250 79% 50% / 0.1);
		--base-color: hsl(250 79% 50% / 0.1) !important;
	}
	&::highlight(pp-splice-open), .pp-splice-open, &::highlight(pp-splice-close), .pp-splice-close {
		color: hsl(275 79% 50%);
		background-color: hsl(275 79% 50% / 0.1);
		--base-color: hsl(275 79% 50% / 0.1) !important;
	}
	
	
	&::highlight(pp-changed-character) {
		background: #8a8aff;
	}
	&::highlight(pp-named-character) {
		background: #c18aff;
	}
	&::highlight(pp-unicode-character-block) {
		background: #eaff8a;
	}
	&::highlight(pp-unicode-character-4hex) {
		background: #8affb6;
	}
	&::highlight(pp-unicode-character-8hex) {
		background: #8ac9ff;
	}
	&::highlight(pp-removed-character) {
		background: #ff9d8a;
	}
	
	
	.pp-changed-character {
		margin: 0.1em;
		outline: 2px dotted color-mix(in hsl, #8a8aff, black);
	}
	.pp-named-character {
		margin: 0.1em;
		outline: 2px dotted color-mix(in hsl, #c18aff, black);
	}
	.pp-unicode-character-block {
		margin: 0.1em;
		outline: 2px dotted color-mix(in hsl, #eaff8a, black);
	}
	.pp-unicode-character-4hex {
		margin: 0.1em;
		outline: 2px dotted color-mix(in hsl, #8affb6, black);
	}
	.pp-unicode-character-8hex {
		margin: 0.1em;
		outline: 2px dotted color-mix(in hsl, #8ac9ff, black);
	}
	.pp-removed-character {
		margin: 0.1em;
		outline: 2px solid #ff9d8a;
	}
	
	&::highlight(pp-error), .pp-error {
		text-decoration: underline wavy red;
		background: hsl(356 94% 50% / 0.2);
		color: red;
	}
	&::highlight(mark-skipped) {
		background-color: pink;
	}
	&::highlight(mark-expansion) {
		text-decoration: underline wavy #28b373;
	}
	&::highlight(mark-stopped-expansion) {
		text-decoration: underline dashed red;
	}
	&::highlight(mark-preprocessor) {
		background-color: lightgray;
	}
	&::highlight(mark-macro) {
		text-decoration: underline wavy black;
	}
	&::highlight(mark-true-branch) {
		color: #01cd22;
	}
	&::highlight(mark-false-branch) {
		color: #cd1e01;
	}
	&::highlight(pp-unfinished-raw-string), .pp-unfinished-raw-string,
	&::highlight(pp-unfinished-string), .pp-unfinished-string,
	&::highlight(pp-unfinished-header-name), .pp-unfinished-header-name {
		color: red;
		background: rgba(255,128,128,0.2);
		
	}
	&::highlight(pp-other), .pp-other {
		background: rgba(255,128,128,0.2);
		--base-color: hsl(275 79% 50% / 0.1) !important;
		color: orange;
	}
	
	&::highlight(pp-missing-translation), .pp-missing-translation {
		color: red
		--base-color: red !important;
	}
	
}

body {
	padding: 0;
	margin: 0;
	background-color: #EEE;
	font-family: Helvetica;
	container: main size;
}
#hyperlink_click {
	border: none;
	cursor: pointer;
	transform: rotate(45deg);
	display: block;
	&:hover {
		color: orange
	}
}
#columns {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows:  max-content 1fr;
	grid-template-areas:
	"x x"
	"a b"
	"a e";
	align-content: start;
	

	
	.info {
		user-select: none !important;
		-webkit-user-select: none !important;
		display: flex;
		grid-area: x;
		.origami {
			font-weight: bold;
			margin-right: 1em;
			text-align: center;
			color: #e4a9a0;
		}
		#measurement_box {
			display: none;
		}

		border-bottom: 1px dotted gray;
		background-color: black;
		color: white;
		align-content: center;
		min-height: 1.5em;
		padding: 0.5em 1em;
		> * {
			align-content: center;
		}
		select {
			margin-right: 1em;
			background-color: #2d0e09;
			border-color: #e4a9a0;
			border-radius: 0.5em;
			color: white;
		}
		label {
			margin-right: 0.5em;
			font-size: 80%;
			line-height: 25px;
			cursor: pointer;
			
			input[type=checkbox] {
				margin-right: 0.5em;
				cursor: pointer;
				
			}
			&:hover {
				text-decoration: underline;
			}
		}
		.options {
			flex-grow: 1
		}
		.conditional > * {
			display: none;
		
		}
		.options > * {
			display: inline-block;
		}
		&:has(#origami_mode > option[value=preprocessor]:checked) {
			.conditional > .preprocessor {
				display: block;
			}
		}
		.link {
			color: #e4a9a0;
			float: right;
		}
	}
	
	
	#parent_of_code {
		border-right: 1px dotted gray;
		grid-area: a;
		position: relative;
		.point_error {
			display: inline;
			font-family: "Helvetica", "Times New Roman";
			font-size: 100%;
			color: #790d0d;
			position: relative;
			z-index: 100;
			.area {
				cursor: help;
				background-color: transparent;
				width: 20px;
				height: 20px;
				font-size: 15px;
				text-align: center;
				color: red;
				transition: color 1s ease;
				display: inline-block;
				z-index: 1000;
				position: relative;
				right: 9px;
				top: -5px;
				font-weight: bold;
				
				&:hover, &:active {
					color: black;
				}
			}
			.msg {
				pointer-events: none;
				position: absolute;
				transition: opacity 0.75s ease-in, border 0.75s ease-in, backdrop-filter 0.75s ease-in;
				opacity: 0.15;
				width: max-content;
				padding: 0.3em;
				pointer-events: none;
				border-radius: 1em;
				color: red;
				backdrop-filter: blur(0px);
				background: rgb(255 0 0 / 0.2);
				box-shadow: 0 0 20px white;
				left: -5px;
				white-space: pre-line;
				z-index: -100;
				@starting-style {
					backdrop-filter: blur(10px);
					opacity: 1;
				}
			
			}
			&:has(.area:hover), &:has(.area:active), &:has(.msg:hover) {
				
				.msg {
					z-order: 10000;
					backdrop-filter: blur(10px);
					opacity: 1;
				}
			}
		}
		#editable {
			outline: none;
			position: absolute;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
		}
		
		
	}
	#output {
	}
	
	#errors {
		grid-area: e;
		background: #333;
		color: #DDD;
		border-top: 1px dotted gray;
		max-height: 30vh;
		overflow-y: scroll;
		&:not(:empty) {
			padding: 0.5em;
		}
		&:empty {
			border-top: none;
		}
		span.srcloc {
			font-family: "Fira Code";
			b {
				color: orange;
			}
		}
	}
	
	#output {
		background-color: white;
		grid-area b;
		span.token {
			margin-left: 0.2em;
			margin-right: 0.2em;
			--base-color: hsl(208 94% 56%);
			--outline-width: 2px;
			&.pp-white-space, &.pp-comment, &.pp-line-comment, &.pp-block-comment, &.pp-newline{
				--base-color: purple;
				opacity: 0.25;
				background-color: white;
				line-height: 16px;
			}
			&.pp-newline, &.pp-white-space {
				color: var(--base-color);
			}
			background-color: hsl(from var(--base-color) h s l / 0.1);
			outline-color: hsl(from var(--base-color) h s l / 1);
			outline-style: dotted;
			outline-width: var(--outline-width);
			&:hover {
				cursor: pointer;
				background-color: hsl(from var(--base-color) h s l / 0.2);
			
				color: hsl(from var(--base-color) h s l / 1);
			}
		}
	}
	
	#output, #editable {
		font-family: 'Fira Code';
		white-space: pre;
		padding: 0 0.5em;
		position: relative;
		padding: 0.25em;
		overflow-y: scroll;
	}
}
@media (max-width: 768px) {
	#columns {
		position: relative;
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;
		display: grid;
		
		.info {
			border-bottom: 2px dotted gray;
		}
		
		grid-template-columns: 1fr;
		grid-template-rows:  max-content 1fr;
		grid-template-areas:
		"x"
		"b" "a" "e";
	}
	#output {
		grid-area: "a";
		border-bottom: 2px dotted gray;
	}
	#output, #editable {
		padding: 0.25em 0.5em !important;
	}
	#editable {
		grid-area: "b";
		border-left: 1px solid gray;
		border-bottom: 1px solid gray;
		position: relative !important;
		bottom: 0;
		background-color: rgb(255 255 255 / 0.6) !important;
		top: 0;
		left: 0;
		right: 0;
	}
	&:has(#origami_mode > option[value=preprocessor]:checked), &:has(#origami_mode > option[value=pp_lexer]:checked) {
		#editable {
			margin-left: 1.5em !important;
			
		}
	}
}