.matino-code {
	--slambo-code-accent: #78ad4b;
	--slambo-code-accent-bright: #91c95d;
	--slambo-code-bg: #101820;
	--slambo-code-bar: #17212a;
	--slambo-code-border: rgb(74 112 132 / 46%);
	--slambo-code-text: #e7edf0;
	--slambo-code-muted: #aebbc3;
	--slambo-code-comment: #91a0aa;
	color-scheme: dark;
	position: relative;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 1.75rem 0;
	overflow: hidden;
	color: var(--slambo-code-text);
	background: var(--slambo-code-bg);
	border: 1px solid var(--slambo-code-border);
	border-radius: 0.75rem;
	box-shadow: 0 10px 26px rgb(9 16 22 / 14%);
}

body[data-theme='dark'] .matino-code {
	--slambo-code-bg: #0b1013;
	--slambo-code-bar: #11181c;
	--slambo-code-border: rgb(145 201 93 / 24%);
	--slambo-code-text: #edf2f4;
	--slambo-code-muted: #b7c1c7;
	--slambo-code-comment: #94a3ad;
	box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
}

.matino-code,
.matino-code * {
	box-sizing: border-box;
}

.matino-code__bar {
	display: flex;
	min-block-size: 3rem;
	align-items: center;
	gap: 0.75rem;
	padding-inline: 1rem 0.625rem;
	background: var(--slambo-code-bar);
	border-block-end: 1px solid color-mix(in srgb, var(--slambo-code-border) 72%, transparent);
}

.matino-code__lights {
	display: inline-flex;
	flex: none;
	gap: 0.42rem;
}

.matino-code__lights i {
	display: block;
	inline-size: 0.625rem;
	block-size: 0.625rem;
	border-radius: 50%;
}

.matino-code__lights i:nth-child(1) {
	background: #cf6671;
}

.matino-code__lights i:nth-child(2) {
	background: #e2b943;
}

.matino-code__lights i:nth-child(3) {
	background: var(--slambo-code-accent-bright);
}

.matino-code__language {
	overflow: hidden;
	color: var(--slambo-code-muted);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.matino-code__copy,
.matino-code__expand {
	display: inline-flex;
	min-block-size: 2.75rem;
	align-items: center;
	justify-content: center;
	color: var(--slambo-code-accent-bright);
	background: color-mix(in srgb, var(--slambo-code-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--slambo-code-accent) 32%, transparent);
	border-radius: 0.5rem;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.matino-code__copy {
	min-inline-size: 58px;
	min-block-size: 36px;
	margin-inline-start: auto;
	padding: 5px 10px;
	font-size: 12px;
}

.matino-code__copy:hover,
.matino-code__copy.is-copied,
.matino-code__expand:hover {
	color: #0b1008;
	background: var(--slambo-code-accent-bright);
	border-color: var(--slambo-code-accent-bright);
}

.matino-code__copy:focus-visible,
.matino-code__expand:focus-visible,
.matino-code pre:focus-visible {
	outline: 3px solid var(--slambo-code-accent-bright);
	outline-offset: -3px;
}

.matino-code__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.matino-code pre,
.entry-content .matino-code pre {
	max-inline-size: 100%;
	margin: 0;
	padding: 1.125rem 1.25rem;
	overflow: auto hidden;
	color: var(--slambo-code-text);
	background: var(--slambo-code-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
	font-weight: 400;
	line-height: 1.6;
	overflow-wrap: normal;
	scrollbar-color: color-mix(in srgb, var(--slambo-code-accent) 62%, transparent) transparent;
	scrollbar-width: thin;
	tab-size: 2;
	text-align: start;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}

.matino-code.is-collapsible:not(.is-expanded) pre {
	max-block-size: 22rem;
	overflow-y: hidden;
}

.matino-code code,
.entry-content .matino-code code {
	display: block;
	inline-size: max-content;
	min-inline-size: 100%;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	font: inherit;
	text-shadow: none;
	white-space: inherit;
}

.matino-code__expand {
	inline-size: calc(100% - 1.25rem);
	min-block-size: 2.875rem;
	gap: 0.6rem;
	margin: 0 0.625rem 0.625rem;
	padding: 0.65rem 1rem;
}

.matino-code__expand i {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 2px solid currentcolor;
	border-block-end: 2px solid currentcolor;
	transform: rotate(45deg) translateY(-2px);
	transform-origin: center;
}

.matino-code.is-expanded .matino-code__expand i {
	transform: rotate(225deg) translate(-1px, -1px);
}

.matino-code .token.comment,
.matino-code .token.prolog,
.matino-code .token.doctype,
.matino-code .token.cdata {
	color: var(--slambo-code-comment);
	font-style: italic;
}

.matino-code .token.punctuation,
.matino-code .token.operator {
	color: #8ab8d1;
}

.matino-code .token.property,
.matino-code .token.tag,
.matino-code .token.boolean,
.matino-code .token.number,
.matino-code .token.constant,
.matino-code .token.symbol {
	color: #d7a9df;
}

.matino-code .token.selector,
.matino-code .token.attr-name,
.matino-code .token.string,
.matino-code .token.char,
.matino-code .token.builtin,
.matino-code .token.inserted {
	color: #9fce75;
}

.matino-code .token.atrule,
.matino-code .token.attr-value,
.matino-code .token.keyword,
.matino-code .token.function,
.matino-code .token.class-name {
	color: #82c6e1;
}

.matino-code .token.regex,
.matino-code .token.important,
.matino-code .token.variable {
	color: #e7c565;
}

.matino-code .token.important,
.matino-code .token.bold {
	font-weight: 700;
}

.matino-code .token.italic {
	font-style: italic;
}

@media (max-width: 600px) {
	.matino-code {
		margin: 1.5rem 0;
		border-radius: 0.625rem;
	}

	.matino-code__bar {
		padding-inline: 0.75rem 0.5rem;
	}

	.matino-code pre,
	.entry-content .matino-code pre {
		padding: 1rem;
	}

	.matino-code.is-collapsible:not(.is-expanded) pre {
		max-block-size: 18rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.matino-code__copy,
	.matino-code__expand {
		transition: none;
	}
}

@media print {
	.matino-code {
		color: #111;
		background: #fff;
		border-color: #aaa;
		box-shadow: none;
	}

	.matino-code__bar,
	.matino-code__expand {
		display: none;
	}

	.matino-code pre,
	.entry-content .matino-code pre,
	.matino-code.is-collapsible:not(.is-expanded) pre {
		max-block-size: none;
		overflow: visible;
		color: #111;
		background: #fff;
		white-space: pre-wrap;
	}
}