:root {
	--page-inline-size: 64em;
	--page-padding: 1em;
}

html {
	tab-size: 2;
}

body {
	padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
	padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

@media (min-width: 48em) {
	.layout {
		display: flex;
		flex-flow: row nowrap;
		align-items: start;
		inline-size: 100vi;
		block-size: 100vb;
		overflow: hidden;
	}

	.layout-sidebar {
		flex: 0 0 16em;
		inline-size: 16em;
		block-size: 100%;
		background-color: var(--background-secondary);
		border-inline-end: var(--border-width-small) solid var(--border-color-body);
	}

	.layout-body {
		flex: 1 1 auto;
		block-size: 100%;
		overflow: auto;
	}
}

.sidebar-item img {
	inline-size: 2em;
	block-size: 2em;
}

.sidebar-item a {
	outline-offset: 0;

	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	padding-block: var(--spacing-component-inner);
	padding-inline: var(--spacing-component-block);
	border-radius: var(--border-radius);
	color: inherit;
	text-decoration-color: transparent;

	& .icon {
		font-size: 1.125em;
		color: var(--brand);
	}

	&.active {
		background-color: rgb(125 125 125 / .1);
	}
}

@media (prefers-color-scheme: dark) {
	.sidebar-item a.active {
		background-color: rgb(200 200 200 / .1);
	}
}

.page {
	max-inline-size: var(--page-inline-size, 64em);
	padding: var(--page-padding, 1em);
	margin-inline: auto;
}

.article {
	--page-inline-size: 80ch;
}

.article-body iframe {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
}

.article-body :where(pre, img) {
	inline-size: calc(100% + var(--page-padding) * 2);
	max-inline-size: 100dvi;
	margin-inline: calc(var(--page-padding) * -1);
}

.article-body {
	word-break: break-word;
}

.scrolls-carousel {
	container: scrolls-carousel / inline-size;

	display: block;
	inline-size: 100%;
	overflow-x: auto;
	overflow-inline: auto;
}

.scrolls-carousel-inner {
	inline-size: fit-content;
	padding-inline: calc(50% - (min(calc(var(--page-inline-size, 80ch) - (var(--page-padding, 1em) * 2)), 100cqi - (var(--page-padding, 1em) * 2)) / 2));
}

.pagination [aria-current="true"] {
	background-color: var(--brand-light);
	color: var(--brand);

	&:hover {
		background-color: var(--brand-light-hover);
	}

	&:active {
		background-color: var(--brand-light-active);
	}
}

.mb-lh {
	margin-block: 1lh;
}

.mbs-lh {
	margin-block-start: 1lh;
}

.mbe-lh {
	margin-block-end: 1lh;
}

.logo-small,
.logo,
.logo-big {
	border-radius: var(--border-radius-small);
}

.logo-small {
	inline-size: 2em;
	block-size: 2em;
}

.logo {
	inline-size: 4em;
	block-size: 4em;
}

.logo-big {
	inline-size: 6em;
	block-size: 6em;
}

input:where(:user-invalid, .invalid, [aria-invalid="true"]) {
	border-color: var(--color-danger);
}

hr.thin {
	border-width: var(--border-width-small);
}

.order-0 {
	order: 0;
}

.order-1 {
	order: 1;
}

.order-2 {
	order: 2;
}

.order-3 {
	order: 3;
}

.order-4 {
	order: 4;
}

.order-5 {
	order: 5;
}

.scrolls-alerts {
	display: contents;
}

.scrolls-alert {
	position: sticky;
	inset-block-end: 1em;
	inset-inline-start: 50%;
	inline-size: fit-content;
	max-inline-size: calc(100% - (var(--spacing-body) * 2));
	padding: var(--spacing-small);
	padding-inline: var(--spacing-body);
	background-color: var(--background-body);
	border: none;
	border-radius: var(--border-radius-pill);
	box-shadow: 0 0 1em 0 rgb(14 14 14 / .1), 0 .125em .75em 0 rgb(14 14 14 / .25);
	color: var(--color-body);
	translate: -50% 0;
	animation: alert-in .5s cubic-bezier(0.48, 0.03, 0.25, 1.35) forwards;
	z-index: 10;
}

@media (prefers-color-scheme: dark) {
	.scrolls-alert {
		border: var(--border-width-small) solid var(--border-color-body);
	}
}

@keyframes alert-in {
	0% {
		translate: -50% calc(100% + 1em);
		opacity: 0;
	}
	to {
		translate: -50%;
		opacity: 1;
	}
}

pre:has(> code.hljs) {
	padding: 0;
	background-color: transparent;
}

.container-text pre:not(:has(> code.hljs)) {
	padding-inline: var(--page-padding);
}