html {
	--input-font-size: 28px;
	--input-font-size-large: 56px;
	--input-font-size-small: 20px;
	
	/* --selection: hsl(40, 100%, 48%); */
	--background: hsl(279, 100%, 92%);

	--selection: hsl(279, 100%, 72%);
	/* --selection: hsla(279, 100%, 50%, 40%); */

	--hover: hsla(279, 100%, 50%, 15%);
	--hover-outline: hsl(279, 100%, 78%);
	
	/* --highlight-1: hsl(40, 100%, 55%); */
	--highlight-1: hsl(279, 100%, 65%);
	/* --highlight-2: hsl(150, 50%, 42%); */
	/* --highlight-2-bk: hsl(150, 80%, 92%); */
	--highlight-2: hsl(279, 100%, 65%);
	--highlight-2-bk: hsl(279, 80%, 92%);
	--highlight-3: #afafaf;
	/* --highlight-3: red; */
	
	--box: #dfdfdf;
	--box-dark: #afafaf;

	--font-size-regular: 18px;	
	--font-size-med: 14px;
	--font-size-small: 12px;
	--font-size-tiny: 9px;
	
	--font-size-header: var(--font-size-small);
}
@media all and (max-width: 1023px) {  
	html {
		--input-font-size: 24px;
		--input-font-size-large: 24px;
		--input-font-size-small: 24px;		
		
		--font-size-regular: 18px;	
		--font-size-med: 16px;
		--font-size-small: 14px;
		--font-size-tiny: 10px;

		--font-size-header: var(--font-size-tiny);		
	}
}

* {
	scrollbar-color: black var(--background);
	scrollbar-width: thin;	
	scrollbar-gutter: stable;
}

body {
	padding: 0;
	margin: 0;
	/* display: flex; */
	overflow: hidden;
	overflow: clip;
	background: 	var(--background);
	max-height: 100vh;
	
	scroll-behavior: smooth;
	
	/* text-rendering: geometricPrecision; */
	/* text-rendering: optimizeLegibility; */
	font-variant-ligatures: contextual;
	
	-webkit-tap-highlight-color: transparent;
}
@media all and (max-width: 1023px) {  
	body {
		overflow: auto;	
	}
}

body {
	font-size: var(--font-size-regular);
	font-family: OutputSans, sans-serif;
	font-feature-settings: "lnum";
}
body {
	--current-input-font-size: var(--input-font-size);	
}

body[data-input-font-size='small'] {
	--current-input-font-size: var(--input-font-size-small);
}
body[data-input-font-size='large'] {
	--current-input-font-size: var(--input-font-size-large);
}


.hidden {
	display: none !important;
}

.input,
.output {
	font-size: var(--current-input-font-size) !important;
	/* letter-spacing: .02em; */
}
.input,
.clear-input {
	transition: font-size .5s;	
	caret-color: var(--selection);
}
.input::selection {
	background: var(--selection);
}
.input,
.output/*,
.token */{
	/* font-family: system-ui, sans-serif; */
	font-family: system-ui, sans-serif;
}

.token {
	font-family: system-ui, NotoSansJustCombining, sans-serif;
}

.token.emoji/*,
.token[data-token-group="complex-emoji"]*/ {
	/* font-family: system-ui, AdobeBlank, sans-serif; */
	font-family: "Apple Color Emoji", sans-serif, system-ui;
}

body[data-emoji-font='noto-color'] .input,
body[data-emoji-font='noto-color'] .output,
body[data-emoji-font='noto-color'] .token {
	font-family: system-ui, NotoColorEmojiRegular, NotoSansJustCombining, sans-serif;
}
body[data-emoji-font='noto-color'] .token.emoji {
	font-family: NotoColorEmojiRegular, system-ui, NotoSansJustCombining, sans-serif;
}

body[data-emoji-font='noto-bw'] .input,
body[data-emoji-font='noto-bw'] .output,
body[data-emoji-font='noto-bw'] .token {
	font-family: system-ui, NotoEmoji, NotoSansJustCombining, sans-serif;
}
body[data-emoji-font='noto-bw'] .token.emoji {
	font-family: NotoEmoji, system-ui, NotoSansJustCombining, sans-serif;
}
body[data-emoji-font='twitter'] .input,
body[data-emoji-font='twitter'] .output,
body[data-emoji-font='twitter'] .token {
	font-family: system-ui, TwitterEmoji, NotoSansJustCombining, sans-serif;
}
body[data-emoji-font='twitter'] .token.emoji {
	font-family: TwitterEmoji, system-ui, NotoSansJustCombining, sans-serif;
}
body[data-emoji-font='segoe-ui'] .input,
body[data-emoji-font='segoe-ui'] .output,
body[data-emoji-font='segoe-ui'] .token {
	font-family: system-ui, SegoeUI, NotoSansJustCombining, sans-serif;
}
body[data-emoji-font='segoe-ui'] .token.emoji {
	font-family: SegoeUI, system-ui, NotoSansJustCombining, sans-serif;
}

body[data-extreme-fallback='extreme-fallback'] .output,
body[data-extreme-fallback='extreme-fallback'] .token {
	font-family: system-ui, NotoSansJustCombining, sans-serif, NotoSymbols, NotoSymbols2, Unifont, NotoColorEmojiRegular;
}
body[data-extreme-fallback='extreme-fallback'][data-font='charter'] .input,
body[data-extreme-fallback='extreme-fallback'][data-font='charter'] .output,
body[data-extreme-fallback='extreme-fallback'][data-font='charter'] .token {
	font-family: Charter, system-ui, NotoSansJustCombining, sans-serif, NotoSymbols, NotoSymbols2, Unifont, NotoColorEmojiRegular;
}
body[data-font='charter'] .input,
body[data-font='charter'] .output,
body[data-font='charter'] .token {
	font-family: Charter, system-ui, NotoSansJustCombining, sans-serif;
}

body[data-font='unifont'] .input,
body[data-font='unifont'] .output,
body[data-font='unifont'] .token {
	font-family: Unifont, system-ui, NotoSansJustCombining, sans-serif;
}
body[data-extreme-fallback='extreme-fallback'][data-font='unifont'] .input,
body[data-extreme-fallback='extreme-fallback'][data-font='unifont'] .output,
body[data-extreme-fallback='extreme-fallback'][data-font='unifont'] .token {
	font-family: Unifont, system-ui, NotoSansJustCombining, sans-serif, NotoSymbols, NotoSymbols2, Unifont, NotoColorEmojiRegular;
}
.extreme-fallback {
	font-family: system-ui, sans-serif, NotoSymbols, NotoSymbols2, Unifont, NotoColorEmojiRegular;
}

.extreme-fallback-1 {
	font-family: NotoSymbols, BlankFont !important;
}
.extreme-fallback-2 {
	font-family: NotoSymbols2, BlankFont !important;
}
.extreme-fallback-3 {
	font-family: Unifont, BlankFont !important;
}
.extreme-fallback-4 {
	font-family: NotoColorEmojiRegular, BlankFont !important;
}


.input::placeholder {
	color: #bfbfbf;
	font-weight: 200;
}

.sidebar {
	position: absolute;
	left: 0;
	top: 55px;
	bottom: 20px;
	width: 300px;
	background: white;
	z-index: 100;
	outline: .5px solid black;
	
	/* color-scheme: light; */
	
	transform: translateX(-270px);
	transition: transform 100ms;
}
@media all and (max-width: 1023px) {  
	.sidebar {
		left: 20px;
		right: 20px;
		top: 20px;
		width: auto;
		transition: transform 500ms;
		transform: translateY(-100vh);
	}
}


.sidebar .window-contents {
	/* background: black; */
	margin-left: -30px;
	padding-left: 30px;
	padding-top: 0;
	padding-right: 230px;
	margin-right: -230px;
	/* right: -30px; */
	/* padding-right: 30px; */
	transform: translateX(-230px);
	transition: transform 100ms;
	box-sizing: border-box;
}
@media all and (max-width: 1023px) {  
	.sidebar .window-contents {
		padding-right: 0;
		margin-right: 0;
		transform: translateX(0);
	}
}

.sidebar-visible .sidebar {
	transform: translateX(0);
	transition: transform 300ms;
}
.sidebar-visible .sidebar .window-contents {
	transform: translateX(0);
	transition: transform 300ms;
}
.main {
	transition: transform 100ms;	
}
@media all and (max-width: 1023px) {  
	.main {
		transition: transform 500ms, opacity 1000ms;	
	}
}
.sidebar-visible .main {
	transform: translateX(280px);
	transition: transform 300ms;
}
@media all and (max-width: 1023px) {  
	.sidebar-visible .main {
		transform: translateY(20vh);
		opacity: 0;
		transition: transform 300ms, opacity 300ms;
	}
}


.main {
	display: grid;
	gap: 25px;
	padding: 20px;
	padding-left: 50px;
	
	grid-template-columns: auto 28vw;
	grid-template-rows: 10px auto 1fr;

	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	/* max-height: calc(100vh - 40px); */
	box-sizing: border-box;
	/* height: calc(100vh); */
	/* height: 200px; */
}
.main.main-about {
	grid-template-columns: minmax(auto, 800px) 400px;
}
@media all and (max-width: 1023px) {  
	.main,
	.main.main-about {
		display: block;
		padding-top: 10px;
		padding-left: 10px;
		grid-template-columns: auto;	
		grid-template-rows: auto;	
		height: auto;
	}
}



.about-wrapper {
	grid-column: 1;
	grid-row: 1 / span 3;
	/* min-height: calc(100vh - 90px); /* TODO: bad way of doing this. */	 */
}
@media all and (max-width: 1023px) {  
	.about-wrapper {
		min-height: 0;
		margin-bottom: 20px;
	}
}

.shortcuts-wrapper {
	grid-column: 2;
	grid-row: 1 / span 3;
	/* min-height: calc(100vh - 90px); /* TODO: bad way of doing this. */	 */
}


.input-output-wrapper {
	grid-column: 1;
	grid-row: 2 / span 2;
	min-height: calc(100vh - 100px); /* TODO: bad way of doing this. */
}
@media all and (max-width: 1023px) {  
	.input-output-wrapper {
		min-height: 0;
		margin-bottom: 20px;
	}
}

.char-info-wrapper {
	max-height: 35vh;
}

@media all and (max-width: 1023px) {  
	.char-info-wrapper {
		max-height: none;
		margin-bottom: 20px;
	}
}


.details-wrapper {
	min-height: 0;
}
@media all and (max-width: 1023px) {  
	.details-wrapper {
		max-height: none;
		grid-column: 1;
		grid-row: 3;
	}
}


/* Three columns if super wide screen */
@media only screen and (min-width: 1680px) {
	.main {
		grid-template-columns: auto 400px 400px;
	}
	.char-info-wrapper {
		grid-column: 2;
		grid-row: 2 / span 2;
		min-height: calc(100vh - 100px);
		max-height: none;
		/* max-width: 400px; */
	}
	.details-wrapper {
		grid-column: 3;
		grid-row: 2 / span 2;
		min-height: calc(100vh - 100px);
		/* max-width: 400px; */
	}
}

header.phone-header {
	display: none;
}
@media all and (max-width: 1023px) {  
	header.phone-header {
		line-height: 2.2;
		display: flex;
		box-sizing: border-box;
		/* height: 10px; */
		/* line-height: 12px; */
		padding: 0;
		padding-bottom: 20px;
		margin-right: -5px;
		font-size: var(--font-size-med);
	}
	header.phone-header strong {
		flex-grow: 1;
	}
}

footer {
	grid-column: 1 / span 2;
	grid-row: 1;
	
	height: 10px;
	line-height: 12px;
	padding: 0 20px;
	font-size: var(--font-size-med);
}
@media all and (max-width: 1023px) {  
	footer {
		line-height: 1.5;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}


.window > div,
.sidebar > div {
	overflow: clip;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.window-contents {
	/* box-sizing: border-box; */
	padding: 20px;
	
	position: relative;
	background: white;
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: auto;
	height: 100%;
	
	display: flex;
	flex-direction: column;
}
.output-list {
	/* flex-grow: 1; */
	
	user-select: none;
}
.select-honeypot {
	flex-grow: 1;	
}

.output {
	user-select: text;
}

.window {
	outline: .5px solid black;
	background: white;	
	position: relative;	
	box-sizing: border-box;

}
.window:after,
.sidebar:after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 10px;
	top: 10px;
	width: 100%;
	height: 100%;
	
	background-image: linear-gradient(black 50%, transparent 50%);
	background-size: 1000px 2px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.sidebar:before {
	/* position: absolute; */
	/* z-index: -10 !important; */
	/* z-index: 99; */
}







.scroll-indicator {
	position: absolute;
	width: 10px;
	/* height: 10px; */
	/* background: red; */
	z-index: 100;
	pointer-events: none;
	user-select: none;
	display: none;

	font-family: InterRegular;
	font-size: calc(var(--current-input-font-size) / 2);
	line-height: 4;
	margin-top: 10px;
	text-align: center;
	color: #7f7f7f;
	/* outline: 1px solid red;	 */
}
.scroll-indicator.visible {
	display: block;
}

.scroll-indicator-left {
	left: 10px;
	top: 0;
}
.scroll-indicator-right {
	right: 0;
	top: 0;
}

.input-wrapper {
	position: relative;
	margin-top: 10px;
}

.input {
	/* background: #f2f2f2; */
	padding: 10px .6em;
	/* padding-right: calc(.6em + 30px); */
	
	font-size: inherit;
	
	line-height: 2;
	
	width: 100%;
	box-sizing: border-box;	

	box-shadow: none;
	outline: none;
	border: .5px solid black;
	border-left: 10px solid black;
	background: #f2f2f2;
	
	/* color: #3f3f3f; */
}


.input:focus {
	background: #eaeaea;
	/* border: .5px solid blue; */
	/* background: red !important; */
}


.options {
	text-align: left;
	margin-top: 10px;
	margin-bottom: 40px;
	font-size: var(--font-size-med);	
}
@media all and (max-width: 1023px) {  
	.options {
		margin-bottom: 0;
	}
}

.options select {
	/* border: none; */
	margin-right: 0;
}



.output-header {
	/* font-size: 15px; */
	margin-top: 20px;
	margin-bottom: 8px;
	/* color: #7f7f7f; */
	
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .05em;
	font-size: var(--font-size-header);
	
	display: inline-block;
	background: black;
	color: white;
	padding: 5px 10px;
	margin-bottom: 0;
	
	user-select: none;
}
/* .output-header.hidden { */
	/* display: none; */
/* } */

.output {
	/* background: #f2f2f2; */
	border: .5px solid black;
	border-left: 10px solid black;
	padding: 20px .6em;
	/* color: #3f3f3f; */
	/* box-sizing: border-box; */
	
	position: relative;
}
.output.hidden {
	display: none;
}
.output.has-groups {
	line-height: 4;
	padding-top: 0;
	padding-bottom: 0;
}
.output.has-groups-and-subgroups {
	line-height: 6;
	padding-top: 0;
	padding-bottom: 0;
}



.token {
	color: black;
}

.output .token {
	display: inline-block;
	z-index: 10;
	cursor: default;
	line-height: calc(var(--current-input-font-size) * 1.8);	
	height: calc(var(--current-input-font-size) * 1.8);	
	vertical-align: middle;
	/* border-radius: 3px; */
	padding: 2px 0;
	/* margin: 0 -1px; */
	
}

.token .token-inner {
	/* display: inline-block; */
}

.token:active .token-inner {
	/* outline: 5px solid red; */
	/* transform: scale(.95); */
}

.output .token::selection,
.output .token-inner::selection {
	/* We are drawing our own selection */
	background: transparent;
}
.output .token:hover {
	/* background: hsl(40, 100%, 76%); */
}


.token.special {
	margin: 0 5px;
	background: white;
	outline: .5px solid #7f7f7f;
	color: #7f7f7f;
	position: relative;
}
.token.special + .token.special {
	margin-left: 0;
}


.token.special.subtype .token-inner:before {
	z-index: 100;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	top: 0;
	line-height: 220%;
	font-size: calc(var(--current-input-font-size) * .2);
	user-select: none;
	color: #7f7f7f;
	/* position: absolute; */
	/* opacity: .2; */	
}
.token.special.subtype-regional-indicator .token-inner:before {
	font-family: NotoEmoji;
	content: '🏴';
}
.token.special.subtype-language-tag .token-inner:before {
	font-family: NotoSymbols2;
	content: '🗨';
	font-weight: 300;
}
.token.special.subtype-sf-symbol .token-inner:before {
	/* font-family: NotoSymbols2; */
	content: '';
	font-size: calc(var(--current-input-font-size) * .6);
	line-height: 140%;
	font-weight: 300;
}

.token.special .token-inner {
	font-size: calc(var(--current-input-font-size) * .6);
	/* vertical-align: top; */
	font-family: InterRegular;
	font-feature-settings: "case";
	vertical-align: 10%;
}
.char-info .token.special .token-inner {
	font-size: calc(var(--font-size) * .6);
}
.token.special.subtype .token-inner {
	vertical-align: -14%;
}

.output.explain .token {
	margin: 0 .05em !important;
	/* margin: 0 0 !important; */
	/* border-right: 3px solid transparent; */
	outline: .5px solid var(--box) !important;	
	box-shadow: 1px 1px 0 var(--box);
	min-width: .25em;
	position: relative;
}
/* This is here just to create a margin that’s still intercepted as a mouse,
   just to allow contunity of hover states between characters */
.output.explain .token:after {
  content: '';
	/* margin-left: 0; */
	margin-top: -2px;
	left: 100%;
	width: calc(.05em * 2);
	height: 100%;
	position: absolute;
	background: transparent;
	/* background: red; */
}
.output.explain .token.special {
	/* outline: 1px solid black !important; */
	background: #f2f2f2;
}



.output .token.highlighted {
	/* color: #ef7f7f; */
	color: var(--highlight-1);
}
.output .token.highlighted-2 {
	color: var(--highlight-2);
}
.output.explain .token.highlighted-2 {
	background: var(--highlight-2-bk);
}
.output .token.highlighted-3 {
	color: var(--highlight-3);
}
.output .token.hidden-character {
	color: #afafaf;
	padding-left: 3px;
	padding-right: 3px;
	/* user-select: none; */
}
.output .token.hidden-character.selected {
	color: black;
}

.output .token.combining-character {
  width: .4em;
}
.details .token.combining-character {
	width: .4em;
}

.output .token {
	transition: background 200ms;
}


.output .token.selected {
	background: var(--selection) !important;
	/* box-shadow: 2px 2px 0 var(--hover); */
	/* outline: .5px solid hsl(40, 100%, 52%) !important; */
	/* border-radius: 0; */
	/* color: white !important; */
	color: black;
	
	/* filter: sepia(50%); */
	transition: none;
}
.output .token.selected-via-hover {
	background: var(--hover) !important;	
	/* outline: .5px solid var(--hover-outline); */
	
	transition: none;
}
.output .token.special.selected {
	outline: none;
}

.output.explain .token.selected {
	outline-color: var(--selection) !important;
}
/* .output .token.selected-via-hover { */
	/* background: var(--hover) !important;	 */
/* } */

/* Connective tissue */

.output.explain .token + .token:before {
	content: '';
	left: calc(var(--current-input-font-size) * -.12);
	width: calc(var(--current-input-font-size) * .12);
	height: calc(100% + 1px);
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: #00000000;
	margin-top: -2.5px;
	transform: scaleY(0);
	transform-origin: 50% 50%;
	transition: background 500ms, transform 150ms;
}



.output.explain .token.selected:not(.selected-via-hover) + .token.selected:before {
	/* content: ''; */
	/* left: calc(var(--current-input-font-size) * -.12); */
	/* width: calc(var(--current-input-font-size) * .12); */
	/* height: calc(100% + 1px); */
	/* position: absolute; */
	/* z-index: -1; */
	background: var(--selection);
	pointer-events: auto;
	transform: scaleY(1);
	/* margin-top: -2.5px; */
	transition: background 0;
}


.output .token.selected.first-selected {
	/* background: green; */
	/* border-top-left-radius: 10px; */
	/* border-bottom-left-radius: 10px; */
}
.output .token.selected.last-selected {
	/* background: blue; */
	/* border-top-right-radius: 10px; */
	/* border-bottom-right-radius: 10px; */
}
.output .token.selected.partial-selected {
	/* outline: 1px solid blue; */
	
	/* opacity: .5; */
	outline: calc(var(--current-input-font-size) * .08) solid var(--selection) !important;
	padding: 0 0;
	margin: 2px 0;
	/* padding-top: 0; */
	/* padding-bottom: 0; */
	background: white !important;
	/* z-index: -1; */
}


.output .token.cursor-before:before,
.output .token.cursor-after:after {
	content: '';
	position: absolute;
	width: calc(var(--current-input-font-size) * .08);
	height: 1.5em;
	margin-top: .25em;
	background: var(--selection);
	/* background: red; */
	pointer-events: none;
}
.output .token.cursor-before:before {
	margin-left: calc(var(--current-input-font-size) * (-.08));
}
.output .token.cursor-after:after {
	margin-left: calc(var(--current-input-font-size) * (.03));
}
.output.explain .token.cursor-before:before,
.output.explain .token.cursor-after:after {
	height: 2.5em;
	margin-top: -.25em;
}

.output .group {
	font-family: system-ui;
	font-size: var(--font-size-tiny);
	font-weight: 350;
	color: #8f8f8f;

	position: absolute;
	white-space: nowrap;
	/* border-bottom: 1px solid #afafaf; */
	border: .5px solid var(--box);
	box-shadow: .5px .5px 0 var(--box);
	height: calc(var(--current-input-font-size) * 3.4);
	/* pointer-events: none; */
	padding: .5em;
	pointer-events: none;
	user-select: none;
	/* padding-bottom: 3px; */
	margin-top: calc(var(--current-input-font-size) * (-.9));
	box-sizing: border-box;
	overflow: clip;
	z-index: 0;
	
	cursor: default;
	
	line-height: 1.2;
	
	text-transform: uppercase;
	letter-spacing: .08em;	
}
.output .group.outer-group {
	height: calc(var(--current-input-font-size) * 5.4);	
	margin-top: calc(var(--current-input-font-size) * (-1.9));
}


.output .group.open-right {
	border-right-color: transparent;
}
.output .group.open-left {
	border-left-color: transparent;
	color: transparent;
}



.continued:after {
	content: '+';
	user-select: none;
	color: #7f7f7f;
	/* margin-left: -3px; */
	/* margin-right: -3px; */
	vertical-align: top;
	line-height: 2.8;
	font-size: 75%;
}

.token:has(+ .continued) {
	/* margin-left: .3em; */
}
.continued + .token {
	/* margin-right: .3em; */
	/* background: red !important; */
}



.window h1, 
.sidebar h1 {
	font-style: italic;
	
	font-size: var(--font-size-regular);
	color: white;
	background: black;
	padding: 10px 20px;
	/* margin: -20px; */
	margin: 0;
	/* margin-bottom: 20px; */
	
	font-weight: 300;
	
	position: relative;
	
	/* position: sticky; */
	/* left: 0; */
	/* top: -20px; */
}
.sidebar h1 {
	/* color: black; */
	/* background: var(--selection); */
}
.details h1 {
	/* margin-left: -30px; */
}

h1 .close-box {
	
}
h1 .close-box:after {
	content: '×';
	/* background: red; */
	cursor: pointer;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: calc(var(--font-size-regular) * 1.6);
	right: 0;
	top: 0;
	bottom: 0;
	/* height: 100%; */
	width: 1.5em;
	line-height: 100%;
}

.big-arrow {
	font-family: InterRegular;
	font-size: 30px;
	color: #bfbfbf;
	font-weight: 200;
	margin: .5em 0;
}

.detail-header {
	font-size: 15px;
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: -10px;
	/* color: #7f7f7f; */
	
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .05em;
	font-size: var(--font-size-small);
	
	display: inline-block;
	background: black;
	color: white;
	padding: 5px 10px;
	/* margin-bottom: 0; */
}
.detail-header:not(:first-child) {
	margin-top: 40px;
	/* border-top: 1px solid #afafaf; */
	/* padding-top: 10px; */
}

.details .details-outer {
	/* text-align: center; */
	/* display: block; */
	flex-grow: 1;
	padding-top: 0; /* necessary for scroll adjustments to work when clicking on replace-y things */
}

.details .details-outer .scrolling-top-buffer {
	position: absolute;
	left: 20px;
	top: 0;
	right: 0;
	/* background: #ff00007f; */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-med);
}

.details .details-outer .scrolling-top-buffer:not(.minimal):after {
	content: 'This space intentionally left blank.';
	color: #7f7f7f;
	text-shadow: 0 0 2px white;
}

.details .container {
	/* outline: 1px solid blue; */
	/* display: inline-block; */
	/* vertical-align: top; */
	/* outline: 1px solid red; */
}
.char-info-outer .container {
	display: flex;
	flex-wrap: wrap;
	/* vertical-align: bottom; */
	/* outline: 1px solid red; */
}
.char-info-outer .container > .token-wrapper {
	min-height: 100%;
	/* outline: 1px solid red; */
}

.char-info .token-wrapper {
	display: flex;
	width: min-content;
	flex-direction: column;
	/* outline: 1px solid red; */
	margin-bottom: 10px;
	margin-right: 5px;
}
.char-info .token-wrapper.adjacent {
	margin-right: -5px;
}
.char-info .token-wrapper.large {
	flex-direction: row;
	gap: 10px;
}
.token-wrapper a {
	text-decoration: none;
	display: inline-block;
	padding: 0;
	margin: 0;
}
.token-wrapper a:hover .token {
	background: #e2e2e2;
}



.char-info .token {
	--font-size: 50px;
	font-size: var(--font-size) !important;

	/* outline: 1px solid red; */
	display: block;
	/* outline: .5px solid black; */
	outline: .5px solid black !important;	
	box-shadow: 1px 1px 0 black;
	
	/* flex-grow: 1; */
	/* flex-shrink: 0; */
	width: min-content;
	
	font-weight: 400 !important;
	
	margin-bottom: 5px;
	
	/* display: inline-block; */
	background: white;
	padding: 5px 10px;
	/* border-radius: 10px; */
	/* font-size: 50px;	 */
	margin-right: 5px;
	font-weight: bold;
	line-height: 1.5;
	height: calc(var(--font-size) * 1.5);
	/* vertical-align: top; */
}
.char-info .token-wrapper.large .token {
	/* font-size: 100px; */
	
	--font-size: 100px;
}

.char-info .token-name-canvas .name {
	/* display: flex; */
	/* outline: 1px solid red; */
	/* width: fit-content; */

	font-size: var(--font-size-small);
	text-align: left;
	color: #7f7f7f;
	display: block;
	/* outline: 1px solid red; */
	margin-right: 10px;
	/* flex-shrink: 1; */
	/* flex-grow: 0; */
	/* min-width: 0; */
	/* max-width: 70%; */
	
	/* flex-grow: 0; */
	/* flex-shrink: 0; */
	/* flex-basis: 0; */
	/* flex: 1 1 0; */
	/* width: auto; */
	/* min-width: 0; */
	/* min-width: 0; */
	/* width: fit-content; */
	word-break: break-word;
	min-width: 4em; /* For stuff like zero-width space */
	/* hyphens: auto; */
	/* display: block; */
	/* width: 100%; */
	/* width: min-content; */
}
.char-info .token-wrapper.large .name {
	min-width: 8em;
	font-size: var(--font-size-regular);
}

.token-wrapper:not(.large) .token-name-canvas {
	/* outline: 2px solid blue; */
	flex-grow: 1;
	/* align-content: end; */
}

.token-wrapper .token-name-canvas {
	display: flex;
	flex-direction: column;
}
.token-wrapper .token-name-canvas .name {
	flex-grow: 1;
	/* outline: 1px solid red; */
}

.token-wrapper.large .links-actions {
	padding-bottom: 4px;
}

.token-wrapper .links-actions a,
.token-wrapper .links-actions .link-like {
	appearance: none;
	background: inherit;
	display: inline-block;
	border: 1px solid #cfcfcf;
	box-shadow: 1px 1px 0 #efefef;
	padding: 3px 2px;

	font-family: system-ui;
	font-size: 10px;
	font-weight: 350;
	text-transform: uppercase;
	color: #afafaf !important;
	text-decoration: none;
	line-height: 10px;
	width: 18px;
	box-sizing: border-box;
	text-align: center;
	/* margin-left: 10px; */

	margin-top: 5px;
	margin-right: 5px;
}
.token-wrapper.large .links-actions a,
.token-wrapper.large .links-actions .link-like {
	letter-spacing: .03em;
	white-space: nowrap;
	font-size: var(--font-size-small);
	padding: 5px 8px;
	width: auto;
	line-height: auto;
}

.links-actions a:hover,
.links-actions .link-like:hover {
	background: #8f8f8f;
	border-color: #8f8f8f;
	color: white !important;
}


.char-info .token.special {
	background: #f2f2f2;
	margin-left: 0;
}


.char-info .metadata {
	font-family: system-ui;
	font-size: var(--font-size-small);
	font-weight: 350;
	color: #afafaf;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.window .info {
	color: #7f7f7f;
	font-size: var(--font-size-med);
	font-style: italic;
}

.window .instructions {
	border-top: 1px solid #7f7f7f;
	padding-top: 20px;
	margin-top: 20px;
	font-size: 15px;
	color: #7f7f7f;
	margin-left: -20px;
	padding-left: 20px;
	margin-right: -20px;
	padding-right: 20px;
	font-style: italic;
}
.window .instructions.hidden {
	display: block !important;
	visibility: hidden;
}
@media all and (max-width: 1023px) {  
	.window .instructions.hidden {
		display: none !important;
	}
}


.toolbar-buttons {
	/* outline: 3px solid red; */
	position: absolute;
	z-index: 10;
	right: 14px;
	top: 28px;
}
.phone-sticky-buttons {
	display: none;
}

.main {
	/* background: red; */
}

@media all and (max-width: 1023px) {  
	.input-output .toolbar-buttons {
		display: none;
	}
	.phone-sticky-buttons {
		position: fixed;
		display: block;
		/* width: 100%; */
		box-sizing: border-box;
		text-align: right;
		height: 0;
		z-index: 100;
		right: 33px;
		top: 80px;
	}
}

h2 {
	font-weight: 500;
	font-size: var(--font-size-med);
	margin: 0;
	padding: 0;
	margin-top: 30px;
	text-transform: uppercase;
	letter-spacing: .05em;	
	margin-left: -20px;
	padding-left: 20px;
	margin-right: -20px;
	padding-right: 20px;
}
h2:before {
	content: '';
	position: absolute;
	left: 0;
	margin-top: .2em;
	width: .3em;
	height: .95em;
	background: black;
}

.details .explanation-header {	
	border-top: .5px solid black;
	padding-top: 30px;
	
	position: relative;
}

.details .explanation-header:first-child {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}
.details .detail-header + .explanation-header {
	margin-top: 0;
}

.details .explanation-header.compact {
	padding-top: 5px;
	
	border-top: none;
	/* outline: 1px solid red; */
}
.details .explanation-header.compact:first-child {
	padding-top: 0;
}


.details .explanation-description {
	font-size: var(--font-size-med);
	margin-top: 20px;
	line-height: 1.5;
}
@media all and (max-width: 1023px) {  
	.details .explanation-description {
		margin-top: 10px;
	}
}

.details .explanation-header + .explanation-header {
	margin-top: 1em;
}
.details .interactive-outer + .explanation-description {
	margin-top: 20px;
}

.details .interactive-outer {
	margin-top: 10px;
	margin-bottom: 5px;
}

.details .interactive-option {
	display: none;
}

/* .details .interactive-option,  */
.radio-label,
button:not(.link-like),
select {
	appearance: none;
	border: 0;
	border-radius: 0;
	color: black;
	user-select: none;
	background: white;
	/* width: 30px; */
	/* height: 30px; */
	display: inline-block;
	/* margin-right: 2px; */
	/* margin-bottom: 2px; */
	margin: 0;
	margin-right: 7px;
	margin-bottom: .5px;
	padding: 0;
	font-family: OutputSans, system-ui, sans-serif;
	line-height: 1.5;
	padding: 4px 10px 2px;
	/* outline: 1px solid red; */
	/* background: red; */
	outline: .5px solid black;
	font-size: var(--font-size-small);
	font-weight: bold;
	cursor: default;
	position: relative;
	box-shadow: 3px 3px 0 black;
}
.ui-icon {
	font-family: system-ui, sans-serif !important;
}

.radio-label {
	margin-right: -1px;
}
.radio-label.hover-only {
	/* background: red; */
}
/* This is here just to create a margin that’s still intercepted as a mouse,
 just to allow contunity of hover states between characters */
/*.radio-label:after {
	content: '';
	margin-left: 10px;
	width: 7px;
	height: 100%;
	position: absolute;
	background: transparent;
}*/
input:checked + .radio-label:not(.hover-only),
button:not(.link-like):active {
	position: relative;
	left: 2px;
	top: 2px;
	box-shadow: 1px 1px 0 black;
}
button.link-like:active {
	background: black !important;
	border-color: black;
}
input:active + .radio-label:not(.hover-only) {
	position: relative;
	left: 3px;
	top: 3px;
	box-shadow: none;
}
input:checked + .radio-label:not(.hover-only) {
	background: black;
	color: white;
}

.radio-label:hover {
	background: #e2e2e2;
	/* color: white; */
}

.details .token.regular {
	--font-size: 100px;
	font-size: var(--font-size) !important;
	outline: .5px solid var(--box);
	cursor: default;	
}

.details .explanation-description .related {
	font-size: 200%;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: -10px;
	padding-left: 10px;
	margin-right: -10px;
	padding-right: 10px;
	/* box-sizing: border-box; */

	width: 100%;		
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height: calc(1.6em * 3 + 4px * 3 + 6px + 10px);

	/* white-space: nowrap;	 */
	overflow-x: auto;
	overflow-y: clip;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

.insert, 
.insert * {
	cursor: copy !important;
	text-decoration: none;
}
.insert .token:hover {
	background: #e2e2e2;	
}
body.meta-key-held .insert,
body.meta-key-held .insert * {
	cursor: pointer !important;
}
body.meta-key-held .token {
	cursor: pointer !important;
}


.detail-insert {
	font-weight: bold;
	cursor: copy !important;
}
.detail-insert:hover {
	color: var(--selection);
}
.detail-insert:active {
	background: black;
	color: white;
}

.detail-insert:after {
	content: ' ';
	font-family: InterRegular;
	font-size: 80%;
	white-space: nowrap;
}





.details .related .token {
	/* outline: 1px solid red; */
	margin-right: 4px;
	margin-bottom: 4px;
	outline: .5px solid var(--box);
	box-shadow: 1px 1px 0 var(--box);
	min-width: 1.5em;
	height: 1.6em;
	line-height: 1.6em;
	/* flex-grow: 0; */
	/* flex-shrink: 0; */
	display: inline-block;
	text-align: center;
	cursor: default;
}


.loading {
	
}

.intro {
	line-height: 1.5;
}
.intro .use-sidebar {
	font-size: 30px;
	/* padding-left: 2em; */
	position: relative;
	/* font-style: italic; */
}
.intro .use-sidebar:before {
	content: '←';
	/* position: absolute; */
	display: block;
	
	/* left: 0; */
	margin-bottom: 10px;
	background: black;
	color: white;
	text-align: center;
	line-height: 1.5em;
	width: 1.5em;
	height: 1.5em;
}
@media all and (max-width: 1023px) {  
	.intro .use-sidebar {
		display: none;
	}
}

.intro .phone-intro {
	display: none;
}
@media all and (max-width: 1023px) {  
	.intro .phone-intro {
		display: block;
	}
}

.proof-of-concept {
	padding: 20px 25px;
	outline: 2px solid var(--selection);
	color: var(--selection);
	margin-top: 50px;
	margin-bottom: 0;
}
.proof-of-concept a {
	color: var(--selection) !important;
}

.loading {
	font-style: italic;
	color: #7f7f7f;
	margin-top: 20px;
}


.intro.invisible {
	display: none;
}









.sidebar-examples {
	padding: 0;
}

.sidebar-examples .header {	
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .05em;
	font-size: var(--font-size-small);
	
	display: inline-block;
	background: black;
	color: white;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 5px 10px;
	padding-left: 20px;
}

.sidebar-examples li {
	background: white;
	list-style: none;
	font-size: 16px;
	padding: 10px;
	padding-left: 20px;
	cursor: pointer;
	/* outline: .5px solid var(--box-dark); */
	/* box-shadow: 3px 3px 0 var(--box-dark); */
	margin-bottom: .5px;
	/* margin-bottom: 10px; */
	overflow: hidden;
	overflow: clip;
	
	user-select: none;
}
.sidebar-examples li:hover {
	background: black;
	color: white;
	/* color: var(--selection); */
}
.sidebar-examples .title {
	/* text-decoration: underline; */
	/* width: 15em; */
	/* display: inline-block; */
	/* line-height: 1.2; */
	/* vertical-align: middle; */
	white-space: nowrap;
}
.sidebar-examples .title .new:after {
	content: 'New!';
	padding-left: .5em;
	color: var(--selection);
}
.sidebar-examples .example {
	display: block;
	font-size: var(--font-size-small);
	color: #8f8f8f;
	width: 20em;
	white-space: nowrap;
	-webkit-line-clamp: 1;
	margin-top: 5px;
	/* height: 1em; */
	line-height: 1.2;
	/* text-overflow: ellipsis; */
	/* overflow: hidden; */
	vertical-align: middle;
	font-family: system-ui, sans-serif;
}
.sidebar-examples li:hover .example {
	color: white;
	/* color: var(--selection); */
}

 
.key {
	padding: .2em .5em;
	/* outline: .5px solid black; */
	background: black;
	color: white;
	margin: 0 .1em;
	font-style: normal;
}

.emoji-font {
	font-family: "Apple Color Emoji", sans-serif;
}

a {
	color: inherit;
}
a:visited {
	color: #8f7faf;
}
.window a:visited {
	color: #7f7f7f;
}


.about {
	font-size: var(--font-size-med);
	line-height: 1.5;
	
	p {
		margin-bottom: 0;
	}
}

.window table {
	font-size: var(--font-size-med);
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
}
.window td {
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 5px;
	border-bottom: 1px solid var(--box);
}
.window tr:last-child td {
	border-bottom: none;
}
.about td:first-child {
	width: 40%;
}
.about td:last-child {
	width: 60%;
}
.about table .yes {
	font-weight: bold;
}


 

@font-face {
	font-family: NotoColorEmojiRegular;
	src: url(fonts/NotoColorEmoji-Regular.woff2);
}
@font-face {
	font-family: NotoEmoji;
	src: url(fonts/NotoEmoji-VariableFont_wght.woff2);
}
@font-face {
	font-family: TwitterEmoji;
	src: url(fonts/Twemoji.Mozilla.woff2);
}
@font-face {
	font-family: SegoeUI;
	src: url(fonts/seguiemj.ttf);
}
 
@font-face {
	font-family: BlankFont;
	src: url(fonts/Blank.woff2);
}
 


@font-face {
	font-family: OutputSans;
	src: url(fonts/WarblerText-Regular.woff2);
}
@font-face {
	font-family: OutputSans;
	font-style: italic;
	src: url(fonts/WarblerText-Italic.woff2);
}
@font-face {
	font-family: OutputSans;
	font-weight: 500;
	src: url(fonts/WarblerText-SemiBold.woff2);
}
@font-face {
	font-family: OutputSans;
	font-weight: 700;
	src: url(fonts/WarblerText-Bold.woff2);
}
@font-face {
	font-family: OutputSans;
	font-weight: 900;
	src: url(fonts/WarblerText-ExtraBold.woff2);
}

@font-face {
	font-family: NotoSansJustCombining;
	src: url(fonts/NotoSansJustCombining.woff2);
}


@font-face {
	font-family: Unifont;
	src: url(fonts/unifont-17.0.01.woff2);
}
@font-face {
	font-family: NotoSymbols;
	src: url(fonts/NotoSansSymbols-VariableFont_wght.woff2);
}
@font-face {
	font-family: NotoSymbols2;
	src: url(fonts/NotoSansSymbols2-Regular.woff2);
}

@font-face {
	font-family: InterRegular;
	src: url(fonts/Inter-Regular.woff2);
}