html {
    --indent-article: 0;
}
#asMain {
	overflow: clip;
}
@media (min-width: 960px) {
	html {
		--indent-article: 30px;
		background-color: #f8f8f8;
	}
    #asMain {
        padding-top: 15px;
        margin-top: -15px;
    }
    #asArticle {
        box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
    }
	#asBreadcrumb .uk-breadcrumb>:first-child>* {
		margin-left: var(--indent-article, 0);
	}
}
@media (min-width: 960px) and (max-width: 1199px) {
	#asBreadcrumb > * {
		max-width: 860px;
	}
}
@media (min-width: 1600px) {
    html {
        --indent-article: 80px;
    }
}

.hljs {display: block;background: #f8f8f8;padding: 0;color: #333;}
.hljs-comment, .hljs-meta {color: #969896}
.hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote {color: #df5000}
.hljs-keyword, .hljs-selector-tag, .hljs-type {color: #d73a49}
.hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute {color: #0086b3}
.hljs-section, .hljs-name {color: #63a35c}
.hljs-tag {color: #333}
.hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo {color: #6f42c1}
.hljs-addition {color: #55a532;background-color: #eaffea}
.hljs-deletion {color: #bd2c00;background-color: #ffecec}
.hljs-link {text-decoration: underline}
.hljs-number {color: #005cc5}
.hljs-string {color: #f0506e}

pre {
	background: #f8f8f8;
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 25px;
	border-radius: 0;
	max-height: 440px;
}
:not(pre)>code {
	background: #f1f7fe;
}
pre>code {display:block}

.uk-table {
	font-size: 0.9rem;
}
.uk-table th {
	background-color: #f8f8f8;
	font-size: 12.5px;
}
.uk-table caption {
    margin-left: 12px;
    margin-bottom: 16px;
    font-style: italic;
}
/**/
/* 
    ####################################### asArticle
*/
#asArticle {
    --as-box-margin: 70px;
    --indent-outside: 15px;
	background-color: #fff;
    max-width: 860px;
	/*margin-inline: auto;*/
	padding: var(--indent-article);
	color: #4f4f4f;
    box-sizing: border-box;
}
#asArticle .uk-container {
	/* надобно */
	padding-inline: 15px;
}

@media (min-width: 640px) {
    #asArticle {
        --indent-outside: 30px;
    }
	#asArticle .uk-container {
		/* надобно */
		padding-inline: 30px;
	}
}
#asToggle-toc {
	background: #fff;
    display: inline-flex;
    align-items: center;
	gap: 15px;
	text-transform: none;
    padding: 2px 20px;
}

#asSourceHeader ~ .uk-dropcap {
	margin-top: 40px;
}

@media (max-width:1199px) {
    #asArticle {
        margin-inline: auto;
    }
}

/* 
    ################## asArticle content as-box
*/
.as-box {
	margin-top: var(--as-box-margin);
}
/* H2 */
:where(#asArticle, .as-box) > h2 {
	background-color: var(--heading-theme, var(--bg-primary));
	margin-block: 0 40px;
	padding: 25px 20px;
	font-size: 1.33rem;
	color: white;
}
#asArticle > h2 {
	margin-top: var(--as-box-margin);
}
:where(#asArticle, .as-box) > h2 > a::before {
	content: "#";
	margin-right: 15px;
	font-size: .9em;
	display: inline-block;
	position: relative;
    vertical-align: middle;
	opacity: .5;
}
:is(#asArticle, .as-box) > h2 > a:hover {
    color: white;
}
:where(#asArticle, .as-box) > h2 > a:hover::before {
	opacity: 1;
}

[data-as-qw]::before {content: "«"}
[data-as-qw]::after, :is(#asArticle, .as-box) [data-as-qw]::after {content: "»"}

/* Links */
:where(#asArticle, .as-box) > * > a::after, 
:where(#asArticle, .as-box) > * > a::before {
	opacity: .5;
}
:where(#asArticle, .as-box) > * > a[href^="#"]:not( [class], [data-as-qw] )::before {
	content: "#";
	font-size: .75em;
}
:where(#asArticle, .as-box) > * > a[href^="/"]:not([class])::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.1' d='M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375'%3E%3C/path%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.1' d='M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375'%3E%3C/path%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.1' d='M7.925,11.875 L11.925,7.975'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 70% 50%;
	background-size: 17px;
	padding-right: 20px;
}
:where(#asArticle, .as-box) > * > a[href^=http]:not([class], [data-as-qw])::after {
	content: "→";
	transform: rotate(-45deg);
	display: inline-block;
    opacity: .7;
}
:is(#asArticle, .as-box) > * > a:hover::after, 
:is(#asArticle, .as-box) > * > a:hover::before {
	opacity: 1;
}


/* ##### .as-preview-markup */
.as-preview-markup {}
.as-preview-markup>.uk-tab>*>a {
	letter-spacing: 0.5px;
	padding: 9px 10px;
	font-size: 13px;
	line-height: 20px;
}
.uk-tab>.uk-active>a {
    transition: none;
}
.as-li-preview {
	margin-top: 20px;
	padding-block: 20px;
	border: 1px dashed rgb(229, 229, 229);
    /*overflow-x: auto; низя */
}
.as-js-copy {
    top: 7px;
}
.as-li-preview>*>:last-child {
	margin-bottom: 0;
}

/* Заметки */
.as-note {
	background: #e5ecff;
    margin-block: 40px;
	padding: 30px;
	border-left: .2rem solid var(--bg-primary);
	box-shadow: none;
}
.as-note .uk-label {
    background: var(--bg-primary);
    margin-right: 5px;
    padding-block: 1px;
	text-transform: capitalize;
	font-size: 12px;
    letter-spacing: .2px;
}


/* ##### as-figure-example */
.as-figure-example {
	position: relative;
}
.as-figure-example>ul.uk-tab::before {/* ? */
	top: 0;
	border-left: 5px solid #32d296;
}
[class*=as-figure-example]>figcaption {
	font-size: 1.4rem;
	font-weight: 300;
	margin: 40px 0;
	padding: 15px 25px;
	border-left: 5px solid #32d296;
}
.as-box[class*=as-figure-example]>figcaption {
	border-left: 5px solid #32d296;
}
[class*=as-figure-example]>figcaption::before {
	content: "пример: ";
	margin-right: 10px;
	font-size: .7em;
	padding-right: 1em;
	font-weight: normal;
	display: block;
}
.as-figure-examples>figcaption::before {
	content: "примеры: ";
}

/* width full */
:is(#asArticle, .as-box) > :where(h2, pre),
.as-li-preview, 
.as-li-markup > pre, 
[class*=as-figure-example] > figcaption {
	margin-inline: calc(-1 * var(--indent-outside));
	padding-inline: var(--indent-outside);
	border-inline: 0;
}

@media (min-width: 960px) {
    :is(#asArticle, .as-box) > :where(h2, pre),
    .as-li-preview,
    .as-li-markup > pre,
    [class*=as-figure-example] > figcaption {
        margin-inline: calc(-1 * var(--indent-article));
        padding-inline: var(--indent-article);
    }
}


/* ####################################### */
#asArticle>:last-child {
	margin-bottom: 0;
}
/* ######## ######## ######## STOP ######## ######## ######## */