:root {
	--ui-typography-font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	--ui-typography-font-size: 15px;
	--ui-typography-line-height: var(--ui-font-line-height-lg);
	--ui-typography-border-radius: var(--ui-border-radius-md);
	--ui-typography-space-inline: var(--ui-space-inline-sm) var(--ui-space-inline-md);
	--ui-typography-block-space-stack: var(--ui-space-stack-md);
	--ui-typography-block-space-inline: var(--ui-space-stack-md);

	--ui-typography-color-text: var(--ui-color-text-primary);
	--ui-typography-color-link: var(--ui-color-link-primary-base);
}

.ui-typography-container.--collapsed {
	margin: calc(var(--ui-typography-block-space-stack) * -1) 0;
}

.ui-typography-paragraph {
	margin-top: var(--ui-typography-block-space-stack);
	margin-bottom: var(--ui-typography-block-space-stack);
	padding: 0;

	font-family: var(--ui-typography-font-family), sans-serif;
	font-size: var(--ui-typography-font-size);
	line-height: var(--ui-typography-line-height);
	color: var(--ui-typography-color-text);

	white-space: break-spaces;
	overflow-wrap: anywhere;
}

.ui-typography-text-bold {
	font-weight: var(--ui-font-weight-bold);
}

.ui-typography-text-italic {
	font-style: italic;
}

.ui-typography-text-underline {
	-webkit-text-decoration: var(--ui-text-decoration-line-underline);
	        text-decoration: var(--ui-text-decoration-line-underline);
}

.ui-typography-text-strikethrough {
	-webkit-text-decoration: var(--ui-text-decoration-line-line-through);
	        text-decoration: var(--ui-text-decoration-line-line-through);
}

.ui-typography-text-underline-strikethrough {
	-webkit-text-decoration: var(--ui-text-decoration-line-underline) var(--ui-text-decoration-line-line-through);
	        text-decoration: var(--ui-text-decoration-line-underline) var(--ui-text-decoration-line-line-through);
}

.ui-typography-link {
	color: var(--ui-typography-color-link);
}

.ui-typography-link:hover {
	-webkit-text-decoration: var(--ui-text-decoration-line-underline);
	        text-decoration: var(--ui-text-decoration-line-underline);
}

.ui-typography-mention {
	color: var(--ui-typography-color-link);
	text-decoration: none;
}

.ui-typography-mention:hover {
	border-bottom: 1px solid var(--ui-typography-color-link);
}

.ui-typography-image-container {
	display: inline-block;
}

.ui-typography-image {
	max-width: 100%;
	min-width: 100%;
}

.ui-typography-image-container.--error {
	position: relative;
	background-color: var(--ui-color-base-03);
}

.ui-typography-image-container.--error .ui-typography-image {
	min-width: 100px;
	min-height: 100px;
}

.ui-typography-image-container.--error:before {
	display: block;
	position: absolute;
	content: '';
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 50%;
	-webkit-mask-image: var(--ui-icon-set__path_picture);
	        mask-image: var(--ui-icon-set__path_picture);
	-webkit-mask-size: 100%;
	        mask-size: 100%;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	background-color: var(--ui-color-base-15);
}

.ui-typography-quote {
	border: 1px solid #e0e2e3;
	background-color: #f3f6f7;
	margin: var(--ui-typography-block-space-stack) 0;
	padding: 0 var(--ui-typography-block-space-stack) 0 var(--ui-space-inset-2xl);
	border-radius: var(--ui-border-radius-sm);
	position: relative;

	font-family: var(--ui-typography-font-family), sans-serif;
	font-size: var(--ui-typography-font-size);
	line-height: var(--ui-typography-line-height);
	color: var(--ui-typography-color-text);
}

.ui-typography-quote:empty:after {
	content: '\00A0';
}

.ui-typography-quote:before {
	display: block;
	content: '';
	position: absolute;
	left: 12px;
	top: 9px;
	width: 8px;
	height: 14px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2214%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%2011.813C2.563%2010.6%203.844%209.171%203.844%207.531c-1.104-.121-2.01-.551-2.719-1.29C.417%205.5.063%204.646.063%203.675c0-1.033.348-1.903%201.046-2.612C1.807.354%202.677%200%203.72%200c1.146%200%202.146.46%203%201.382C7.573%202.303%208%203.422%208%204.738%208%208.685%205.74%2011.773%201.219%2014L0%2011.813z%22%20opacity%3D%22.303%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
}

.ui-typography-code {
	display: block;
	background-color: #fdf6e3;
	padding: var(--ui-space-inset-md) var(--ui-space-inset-sm2);
	margin: var(--ui-typography-block-space-stack) 0;
	overflow-x: auto;
	position: relative;
	-moz-tab-size: 2;
	     tab-size: 2;
	text-decoration: none;
	border-radius: var(--ui-border-radius-sm);
	white-space: pre-wrap;

	font-family: var(--ui-font-family-system-mono), monospace;
	font-size: var(--ui-typography-font-size);
	line-height: var(--ui-typography-line-height);
	color: #333;
}

.ui-typography-token-operator {
	color: #f60d04;
}

.ui-typography-token-punctuation {
	color: #999;
}

.ui-typography-token-comment {
	color: #839496;
}

.ui-typography-token-word {
	color: var(--ui-color-text-secondary);
}

.ui-typography-token-keyword {
	color: #6c71c4;
}

.ui-typography-token-regex {
	color: #2aa198;
}

.ui-typography-token-number {
	color: #cb4b16;
}

.ui-typography-token-string {
	color: #859900;
}

.ui-typography-token-semicolon {
	color: #6c71c4;
}

.ui-typography-token-bracket {
	color: #268bd2;
}

.ui-typography-token-brace {
	color: #dc322f;
}

.ui-typography-token-parentheses {
	color: #af9a9a;
}

.ui-typography-table {
	border: 1px double #bfbfbf;
	border-collapse: collapse;
	border-spacing: 0;
	overflow-y: scroll;
	overflow-x: scroll;
	margin-top: var(--ui-typography-block-space-stack);
	margin-bottom: var(--ui-typography-block-space-stack);
}

.ui-typography-table-row {

}

.ui-typography-table-cell {
	border: 1px solid #bfbfbf;
	overflow-wrap: break-word;
	min-width: 30px;
	vertical-align: top;
	text-align: start;
	padding: 0 var(--ui-typography-block-space-stack);
	position: relative;
	outline: none;
}

.ui-typography-table-cell-header {
	background: rgba(0,0,0,.05);
	text-align: start;
}

.ui-typography-smiley {
	width: 20px;
	height: 20px;
	cursor: text;
	caret-color: rgb(5, 5, 5);
	color: transparent;
	vertical-align: text-bottom;
}

.ui-typography-spoiler {
	background: #fcfcfc;
	border: 1px solid #eee;
	border-radius: 10px;
	margin-top: var(--ui-typography-block-space-stack);
	margin-bottom: var(--ui-typography-block-space-stack);

	font-family: var(--ui-typography-font-family), sans-serif;
	font-size: var(--ui-typography-font-size);
	line-height: var(--ui-typography-line-height);
	color: var(--ui-typography-color-text);
}

.ui-typography-spoiler-title {
	cursor: pointer;
	padding: 5px 5px 5px 24px;
	position: relative;
	font-weight: bold;
	list-style: none;
	outline: none;
	-webkit-user-select: contain;
	        user-select: contain;
}

.ui-typography-spoiler-title:empty:after {
	content: '\00A0';
}

.ui-typography-spoiler-title::marker,
.ui-typography-spoiler-title::-webkit-details-marker {
	display: none;
}

.ui-typography-spoiler-title:before {
	display: block;
	content: '';
	position: absolute;
	left: 3px;
	top: 7px;
	width: 20px;
	height: 20px;
	-webkit-mask-image: var(--ui-icon-set__path_plus-in-circle);
	        mask-image: var(--ui-icon-set__path_plus-in-circle);
	-webkit-mask-size: 20px;
	        mask-size: 20px;
	-webkit-mask-position: center;
	        mask-position: center;
	background-color: rgba(var(--ui-color-text-secondary-rgb), 0.5);
}

.ui-typography-spoiler[open] > .ui-typography-spoiler-title:before {
	-webkit-mask-image: var(--ui-icon-set__path_minus-in-circle);
	        mask-image: var(--ui-icon-set__path_minus-in-circle);
}

.ui-typography-spoiler-content {
	padding: 0 5px 0 20px;
	margin-top: calc(var(--ui-typography-block-space-stack) / -2);
}

.ui-typography-ol,
.ui-typography-ul {
	padding: 0 0 0 24px;
	margin-top: var(--ui-typography-block-space-stack);
	margin-bottom: var(--ui-typography-block-space-stack);

	font-family: var(--ui-typography-font-family), sans-serif;
	font-size: var(--ui-typography-font-size);
	line-height: var(--ui-typography-line-height);
	color: var(--ui-typography-color-text);
}

.ui-typography-li {
	margin: 0 12px;
	white-space: break-spaces;
	overflow-wrap: anywhere;
}

.ui-typography-hashtag {
	background-color: #5890ff26;
	border-bottom: 1px solid rgba(88,144,255,.3);
}

.ui-typography-video-container {
	display: inline-block;
}

.ui-typography-video-object {
	max-width: 100%;
	object-fit: fill;
}