:root {
	--article-muted: #526476;
	--article-divider: #dce5ef;
	--article-danger-bg: #fff0f0;
	--article-danger-title: #b42318;
	--article-danger-copy: #172033;
	--article-code-bg: #07111e;
	--article-code-gutter: #1e2e43;
	--article-code-muted: #8ab4d8;
	--article-table-head: #f4f7fa;
	--article-quote-bg: #f4f7fa;
	--article-update-bg: #eaf9ef;
	--article-success: #287543;
	--article-community: linear-gradient(112deg, #071526 0%, #0a2948 66%, #085da8 125%);
	--article-community-border: rgb(0 104 217 / 28%);
	--article-community-eyebrow: #89c4ff;
	--article-community-muted: #b8cbe0;
	--article-back: #0068d9;
	--article-category: #0068d9;
	--article-category-bg: #eaf4ff;
	--article-code-line-number: #566d88;
	--article-quote-cite: #5b6778;
	--article-related-rank: #5d6878;
	--article-toc-active: #0068d9;
}

:root[data-theme="dark"] {
	--article-muted: #aab8c6;
	--article-divider: #3b3b3b;
	--article-danger-bg: #b42318;
	--article-danger-title: #fff0f0;
	--article-danger-copy: #fff;
	--article-code-bg: #000;
	--article-table-head: #3b3b3b;
	--article-quote-bg: #1c1c1c;
	--article-update-bg: #0b3620;
	--article-success: #34d06b;
	--article-community: linear-gradient(112deg, #121923 0%, #0b263f 66%, #074f91 125%);
	--article-community-border: rgb(137 196 255 / 22%);
	--article-community-eyebrow: #89c4ff;
	--article-community-muted: #c0d0df;
	--article-back: #89c4ff;
	--article-category: #0078fc;
	--article-category-bg: rgb(0 120 252 / 20%);
	--article-code-line-number: #66717f;
	--article-quote-cite: #aab8c6;
	--article-related-rank: #aab8c6;
	--article-toc-active: #0078fc;
}

.site-main--article {
	background: var(--canvas);
}

.article-page {
	color: var(--text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-synthesis: none;
}

.article-reading-progress {
	--article-reading-progress: 0;
	position: fixed;
	z-index: 60;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	overflow: hidden;
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	pointer-events: none;
}

.article-reading-progress__value {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--primary), var(--border-brand), var(--brand));
	box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 58%, transparent);
	transform: scaleX(var(--article-reading-progress));
	transform-origin: left center;
	will-change: transform;
}

.admin-bar .article-reading-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .article-reading-progress {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .article-reading-progress {
		top: 0;
	}
}

.article-intro {
	padding: 24px 0 32px;
	background: var(--canvas);
}

.article-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.article-breadcrumbs {
	display: flex;
	min-height: 32px;
	align-items: center;
	gap: 12px;
	color: var(--article-muted);
	font-size: 12px;
	line-height: 17px;
}

.article-breadcrumbs ol {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
	overflow: hidden;
}

.article-breadcrumbs li {
	display: flex;
	min-width: 0;
	align-items: center;
	white-space: nowrap;
}

.article-breadcrumbs li + li::before {
	margin-right: 8px;
	color: var(--text-muted);
	content: "/";
}

.article-breadcrumbs li[aria-current="page"] {
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-breadcrumbs a {
	transition: color 160ms ease;
}

.article-back {
	display: grid;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	place-items: center;
	border: 1px solid var(--border-brand);
	border-radius: 12px;
	color: var(--article-back);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.article-intro__divider {
	width: 100%;
	height: 1px;
	background: var(--border);
}

.article-meta {
	display: flex;
	min-height: 24px;
	align-items: center;
	gap: 9px;
	color: var(--text-secondary);
	font-size: 10px;
	line-height: 13px;
}

.article-meta__category {
	display: inline-flex;
	min-height: 24px;
	align-items: center;
	justify-content: center;
	padding: 6px 9px;
	border-radius: var(--pill);
	background: var(--article-category-bg);
	color: var(--article-category);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 12px;
	text-transform: uppercase;
}

.article-meta__tag {
	color: var(--brand);
	font-weight: 500;
}

.article-title {
	max-width: 1040px;
	color: var(--text);
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -1.25px;
	line-height: 56px;
	text-wrap: wrap;
}

.article-lead {
	max-width: 820px;
	color: var(--text-secondary);
	font-size: 18px;
	line-height: 29px;
}

.article-featured {
	padding-bottom: 32px;
	background: var(--canvas);
}

.article-featured__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1240 / 318;
	margin: 0;
	overflow: hidden;
	border-radius: 21px;
	background: var(--surface);
}

.article-featured__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-main {
	padding: 32px 0 64px;
	background: var(--surface);
}

.article-layout {
	display: grid;
	align-items: start;
	grid-template-columns: minmax(0, 780px) minmax(0, 320px);
	gap: 60px;
}

.article-prose {
	width: 100%;
	max-width: 780px;
	min-width: 0;
	color: var(--text);
	font-size: 18px;
	line-height: 30px;
}

.article-prose > :first-child {
	margin-top: 0;
}

.article-prose > :last-child {
	margin-bottom: 0;
}

.article-prose :is(h2, h3, h4)[id] {
	scroll-margin-top: 24px;
}

.article-prose h2 {
	max-width: 720px;
	margin: 32px 0 16px;
	color: var(--text);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.35px;
	line-height: 36px;
	text-wrap: wrap;
}

.article-prose h3 {
	max-width: 720px;
	margin: 32px 0 16px;
	color: var(--text);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.article-prose h4 {
	max-width: 720px;
	margin: 28px 0 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
}

.article-prose p {
	max-width: 720px;
	margin: 0 0 16px;
	color: var(--text-secondary);
}

.article-prose :is(ul, ol) {
	max-width: 720px;
	margin: 16px 0 32px;
	padding-left: 25px;
	color: var(--text);
}

.article-prose ul {
	list-style: disc;
}

.article-prose ol {
	list-style: decimal;
}

.article-prose li {
	padding-left: 3px;
}

.article-prose li + li {
	margin-top: 10px;
}

.article-prose li::marker {
	color: var(--brand);
	font-weight: 600;
}

.article-prose a:not(.button) {
	color: var(--brand);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition:
		color 160ms ease,
		text-decoration-color 160ms ease;
}

.article-prose :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed) {
	max-width: 780px;
	margin: 32px 0;
}

.article-prose :is(figure, .wp-block-image) img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.article-prose figcaption,
.article-video__caption {
	margin-top: 10px;
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 20px;
}

.article-prose .wp-block-separator {
	width: 100%;
	height: 1px;
	margin: 32px 0 12px;
	border: 0;
	background: var(--article-divider);
}

.article-prose .alignwide,
.article-prose .alignfull {
	width: 100%;
	max-width: 780px;
	margin-inline: 0;
}

.article-callout--critical,
.article-prose .wp-block-group.is-style-hucker-critical {
	display: grid;
	width: 100%;
	margin: 16px 0 32px;
	padding: 24px;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 8px 16px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--article-danger-bg);
	color: var(--article-danger-copy);
}

.article-callout--critical::before,
.article-prose .wp-block-group.is-style-hucker-critical::before {
	width: 24px;
	height: 24px;
	grid-row: 1 / span 2;
	background: url("../images/article-alert.svg") center / contain no-repeat;
	content: "";
}

:root[data-theme="dark"] .article-callout--critical::before,
:root[data-theme="dark"] .article-prose .wp-block-group.is-style-hucker-critical::before {
	background-image: url("../images/article-alert-dark.svg");
}

.article-callout--critical > *,
.article-prose .wp-block-group.is-style-hucker-critical > * {
	max-width: none;
	margin: 0;
	grid-column: 2;
	color: var(--article-danger-copy);
}

.article-callout--critical > :first-child,
.article-prose .wp-block-group.is-style-hucker-critical > :first-child {
	color: var(--article-danger-title);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.article-callout--critical > :last-child,
.article-prose .wp-block-group.is-style-hucker-critical > :last-child {
	margin: 0;
	color: var(--article-danger-copy);
	font-size: 16px;
	line-height: 24px;
}

.article-action-list,
.article-prose .wp-block-group.is-style-hucker-actions {
	width: 100%;
	margin: 32px 0;
	padding: 24px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--selected);
	color: var(--text);
}

:root[data-theme="dark"] .article-action-list,
:root[data-theme="dark"] .article-prose .wp-block-group.is-style-hucker-actions {
	border-color: var(--border-brand);
}

.article-action-list h2,
.article-action-list h3,
.article-prose .wp-block-group.is-style-hucker-actions :is(h2, h3) {
	margin: 0 0 16px;
	font-size: 20px;
	letter-spacing: 0;
	line-height: 28px;
}

.article-action-list ol,
.article-prose .wp-block-group.is-style-hucker-actions ol {
	margin: 0;
	padding-left: 20px;
	font-size: 16px;
	line-height: 26px;
}

.article-action-list li + li,
.article-prose .wp-block-group.is-style-hucker-actions li + li {
	margin-top: 6px;
}

.article-table,
.article-prose .wp-block-table,
.article-prose .wp-block-table.is-style-hucker-data {
	width: 100%;
	margin: 16px 0 32px;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	scrollbar-color: var(--border-strong) transparent;
	scrollbar-width: thin;
}

.article-table table,
.article-prose .wp-block-table table {
	width: 100%;
	min-width: 700px;
	border: 0;
	border-collapse: collapse;
	color: var(--text);
	font-size: 14px;
	line-height: 20px;
}

.article-table th,
.article-prose .wp-block-table th {
	height: 46px;
	padding: 14px 16px;
	background: var(--article-table-head);
	color: var(--article-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	text-align: left;
	text-transform: uppercase;
}

.article-table td,
.article-prose .wp-block-table td {
	height: 54px;
	padding: 16px;
	border: 0;
	border-top: 1px solid var(--border);
	background: var(--surface);
	vertical-align: middle;
}

.article-table td:not(:first-child),
.article-prose .wp-block-table td:not(:first-child) {
	color: var(--text-secondary);
}

.article-table td.is-safe,
.article-prose .wp-block-table td.is-safe {
	color: var(--article-success);
}

.article-table td code,
.article-prose .wp-block-table td code {
	color: var(--text);
	font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.article-table--ioc th,
.article-table:has(td code) th {
	color: var(--text-secondary);
	font-weight: 600;
}

.article-table--ioc td,
.article-table:has(td code) td {
	color: var(--text);
}

.article-table--ioc td:first-child,
.article-table:has(td code) td:first-child {
	color: var(--text-secondary);
	font-weight: 600;
}

.article-code {
	position: relative;
	width: 100%;
	margin: 16px 0 32px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--article-code-bg);
	color: #fff;
}

.article-code__toolbar {
	display: flex;
	height: 72px;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 16px;
}

.article-code__label {
	overflow: hidden;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.article-code__copy {
	display: inline-flex;
	height: 32px;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 8px;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		transform 160ms ease;
}

.article-code__copy img {
	width: 16px;
	height: 16px;
}

.article-code__viewport {
	position: relative;
	max-width: 100%;
	margin: 0 24px 24px;
	overflow: hidden;
}

.article-code__viewport pre,
.article-prose > pre.wp-block-code {
	max-width: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border: 0;
	background: transparent;
	color: #dce7f5;
	font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
	font-size: 14px;
	line-height: 23px;
	white-space: pre;
	tab-size: 4;
}

.article-prose > pre.wp-block-code {
	margin: 16px 0 32px;
	padding: 24px;
	border-radius: 12px;
	background: var(--article-code-bg);
}

.article-code__viewport code {
	display: block;
	min-width: max-content;
	color: inherit;
	font: inherit;
}

.article-code:not(.is-collapsible) .article-code__viewport pre {
	color: #fff;
}

.article-code.is-collapsible .article-code__viewport {
	max-height: 216px;
	margin-bottom: 0;
	padding-left: 56px;
}

.article-code.is-collapsible pre {
	line-height: 22px;
}

.article-code__line-numbers {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 32px;
	color: var(--article-code-line-number);
	font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
	font-size: 12px;
	line-height: 22px;
	pointer-events: none;
	text-align: right;
	white-space: pre;
}

.article-code__gutter {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 44px;
	width: 1px;
	background: var(--article-code-gutter);
	content: "";
	pointer-events: none;
}

.article-code.is-expanded .article-code__viewport {
	max-height: none;
}

.article-code__fade {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 132px;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgb(7 17 30 / 0%) 0%,
		rgb(7 17 30 / 8%) 28%,
		rgb(7 17 30 / 28%) 52%,
		rgb(7 17 30 / 58%) 72%,
		rgb(7 17 30 / 86%) 88%,
		var(--article-code-bg) 100%
	);
}

.article-code.is-expanded .article-code__fade {
	display: none;
}

.article-code__expand-row {
	display: flex;
	height: 56px;
	align-items: center;
	justify-content: center;
}

.article-code__expand {
	display: inline-flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 8px;
	border: 0;
	border-radius: var(--pill);
	background: transparent;
	color: var(--article-code-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	transition:
		background-color 160ms ease,
		color 160ms ease;
}

.article-code__expand img {
	width: 16px;
	height: 16px;
	transition: transform 180ms ease;
}

.article-code.is-expanded .article-code__expand img {
	transform: rotate(180deg);
}

.article-code .token.keyword,
.article-code .tok-keyword {
	color: #d2a8ff;
}

.article-code .token.function,
.article-code .token.class-name,
.article-code .tok-function,
.article-code .tok-type {
	color: #79c0ff;
}

.article-code .token.builtin,
.article-code .tok-primitive {
	color: #ffa657;
}

.article-code .token.string,
.article-code .tok-string {
	color: #a8db8f;
}

.article-code .token.constant,
.article-code .tok-constant {
	color: #ffca80;
}

.article-code .token.comment,
.article-code .tok-comment {
	color: #8b9db1;
}

.article-quote,
.article-prose blockquote,
.article-prose .wp-block-quote.is-style-hucker-expert {
	width: 100%;
	margin: 32px 0;
	padding: 24px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--article-quote-bg);
	color: var(--text);
}

:root[data-theme="dark"] .article-quote,
:root[data-theme="dark"] .article-prose blockquote,
:root[data-theme="dark"] .article-prose .wp-block-quote.is-style-hucker-expert {
	border-color: var(--border);
}

.article-eyebrow,
.article-quote__eyebrow {
	color: var(--brand);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
	text-transform: uppercase;
}

.article-quote p,
.article-prose blockquote p {
	max-width: none;
	margin: 12px 0 0;
	color: var(--text);
	font-size: 17px;
	line-height: 28px;
}

.article-quote cite,
.article-prose blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--article-quote-cite);
	font-size: 13px;
	font-style: normal;
	line-height: 20px;
}

.article-inline-media {
	width: 100%;
	aspect-ratio: 780 / 318;
	margin: 32px 0;
	overflow: hidden;
	border-radius: 21px;
	background: #006fe6;
}

.article-inline-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-editorial,
.article-prose .wp-block-group.is-style-hucker-editorial {
	width: 100%;
	margin: 32px 0;
	padding: 24px;
	overflow: hidden;
	border-left: 4px solid var(--border-brand);
	border-radius: 16px;
	background: var(--surface);
}

.article-editorial > :first-child,
.article-prose .wp-block-group.is-style-hucker-editorial > :first-child {
	max-width: none;
	margin: 0 0 12px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
	text-transform: uppercase;
}

.article-editorial > :last-child,
.article-prose .wp-block-group.is-style-hucker-editorial > :last-child {
	max-width: 732px;
	margin: 0;
	color: var(--text);
	font-size: 17px;
	font-weight: 500;
	line-height: 28px;
}

.article-sources {
	width: 100%;
	margin: 32px 0;
	padding-top: 12px;
	border-top: 1px solid var(--article-divider);
}

.article-sources h2 {
	margin: 0 0 12px;
}

.article-sources ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-sources li + li {
	margin-top: 8px;
}

.article-sources a {
	display: block;
	font-size: 16px;
	line-height: 24px;
}

.article-technical {
	width: 100%;
	margin: 32px 0;
	padding-top: 16px;
	border-top: 1px solid var(--article-divider);
}

.article-technical > h2 {
	margin: 0 0 16px;
}

.article-file,
.article-prose .wp-block-file {
	display: flex;
	width: 100%;
	min-height: 92px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.article-file__copy {
	min-width: 0;
}

.article-file__title,
.article-prose .wp-block-file > a:first-child {
	display: block;
	overflow: hidden;
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article-file__meta {
	margin-top: 4px;
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 20px;
}

.article-file__action,
.article-prose .wp-block-file__button {
	flex: 0 0 auto;
	color: var(--brand);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.article-prose a.article-file__action,
.article-prose .wp-block-file a.wp-block-file__button {
	color: var(--brand);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.article-video {
	width: 100%;
	margin-top: 16px;
}

.article-video__preview,
.article-prose .wp-block-embed__wrapper {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
	background: var(--article-code-bg);
}

.article-prose .wp-block-embed__wrapper iframe,
.article-prose .wp-block-embed__wrapper video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.article-video__content {
	position: relative;
	z-index: 1;
	display: flex;
	max-width: 600px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-align: center;
}

.article-video__play {
	display: grid;
	width: 56px;
	height: 56px;
	margin-bottom: 1px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #0068d9;
	font-size: 16px;
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
}

.article-video__play img {
	display: none;
	width: 18px;
	height: 18px;
}

.article-video__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
}

.article-video__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.article-updates,
.article-prose .wp-block-group.is-style-hucker-updates {
	width: 100%;
	margin: 32px 0 0;
	padding: 24px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--article-update-bg);
}

.article-updates > :first-child,
.article-prose .wp-block-group.is-style-hucker-updates > :first-child {
	max-width: none;
	margin: 0 0 12px;
	color: var(--article-success);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
	text-transform: uppercase;
}

.article-update + .article-update {
	margin-top: 12px;
}

.article-update__meta {
	color: var(--article-success);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
	text-transform: uppercase;
}

.article-update__body {
	margin-top: 4px;
	color: var(--text);
	font-size: 15px;
	line-height: 24px;
}

.article-prose .article-update__meta {
	margin: 0;
	color: var(--article-success);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	line-height: 16px;
}

.article-prose .article-update__body {
	margin: 4px 0 0;
	color: var(--text);
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
}

.article-page-links {
	display: flex;
	gap: 8px;
	margin-top: 32px;
	color: var(--brand);
}

.article-toc {
	position: sticky;
	top: 24px;
	width: 320px;
	border-radius: 16px;
	filter: drop-shadow(0 1px 1.5px rgb(7 17 30 / 6%));
}

.article-toc[hidden] {
	display: none;
}

.article-toc h2 {
	margin-bottom: 12px;
	color: var(--text);
	font-size: 20px;
	font-weight: 600;
	line-height: 25px;
}

.article-toc ol {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.article-toc a {
	display: flex;
	min-height: 32px;
	align-items: center;
	padding: 0;
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 32px;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		padding 160ms ease;
}

.article-toc a[aria-current="location"] {
	min-height: 44px;
	padding: 12px;
	background: var(--selected);
	color: var(--article-toc-active);
	font-weight: 500;
	line-height: 20px;
}

.article-post-footer {
	margin-top: 20px;
}

.article-forum-cta {
	display: flex;
	width: 100%;
	max-width: 780px;
	min-height: 156px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	overflow: hidden;
	border: 1px solid var(--border-brand);
	border-radius: 16px;
	background: var(--selected);
}

.article-forum-cta__copy {
	max-width: 500px;
}

.article-forum-cta h2 {
	margin-top: 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 25px;
}

.article-forum-cta__copy > p:last-child {
	margin-top: 8px;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 24px;
}

.article-forum-cta__button {
	width: 180px;
	flex: 0 0 180px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	white-space: nowrap;
}

.article-related {
	padding-top: 46px;
	background: var(--canvas);
}

.article-related__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.article-related__header h2 {
	flex: 0 0 auto;
	font-size: 24px;
	font-weight: 600;
	line-height: 29px;
}

.article-related__header > span {
	display: none;
	height: 1px;
	flex: 1;
	background: var(--border);
}

.article-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.article-related-card {
	display: flex;
	min-height: 155px;
	flex-direction: column;
	justify-content: space-between;
	padding: 15px 15px 14px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.article-related-card__meta {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 9px;
}

.article-related-card__number {
	color: var(--article-related-rank);
	font-size: 22px;
	font-weight: 600;
	line-height: 25px;
}

.article-related-card:first-child .article-related-card__number {
	color: var(--brand);
}

.article-related-card__category {
	color: var(--brand);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 12px;
	text-transform: uppercase;
}

.article-related-card__line {
	display: none;
}

.article-related-card__time {
	display: block;
	color: var(--text-secondary);
	font-size: 9px;
	font-weight: 400;
	line-height: 12px;
}

.article-related-card h3 {
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
}

.article-related-card h3 a {
	display: block;
}

.article-related-card__link {
	align-self: flex-end;
	color: var(--brand);
	font-size: 10px;
	font-weight: 500;
	line-height: 13px;
}

.article-community {
	padding: 46px 0;
	background: var(--canvas);
}

.article-community__panel {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: 172px;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 48px;
	padding: 32px 36px;
	overflow: hidden;
	border: 1px solid var(--article-community-border);
	border-radius: 20px;
	background: var(--article-community);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 8%),
		0 18px 48px rgb(7 21 38 / 12%);
	color: #fff;
}

.article-community__panel::before {
	position: absolute;
	z-index: -1;
	inset: 0 0 0 48%;
	background:
		linear-gradient(90deg, transparent 0%, rgb(0 120 252 / 8%) 42%, rgb(0 120 252 / 18%) 100%),
		linear-gradient(rgb(137 196 255 / 8%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(137 196 255 / 8%) 1px, transparent 1px);
	background-size:
		auto,
		28px 28px,
		28px 28px;
	content: "";
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}

.article-community__panel::after {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 124px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(0 120 252 / 25%) 0%, rgb(0 120 252 / 0%) 70%);
	content: "";
	transform: translateY(-50%);
}

.article-community__copy {
	position: relative;
	max-width: 620px;
	padding-left: 52px;
}

.article-community__eyebrow-row {
	display: flex;
	align-items: center;
}

.article-community .article-eyebrow {
	color: var(--article-community-eyebrow);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.9px;
	line-height: 13px;
}

.article-community__chat {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid rgb(137 196 255 / 24%);
	border-radius: 11px;
	background: rgb(0 120 252 / 18%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.article-community h2 {
	max-width: 520px;
	margin-top: 8px;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 32px;
}

.article-community__button {
	display: inline-flex;
	min-width: 202px;
	height: 52px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-inline: 22px;
	border: 1px solid rgb(137 196 255 / 30%);
	border-radius: 14px;
	background: #0078fc;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 20%),
		0 10px 30px rgb(0 70 150 / 28%);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.article-community__button[href]:not([aria-disabled="true"]) {
	cursor: pointer !important;
}

.article-community__button > span {
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
}

@media (min-width: 768px) {
	.article-breadcrumbs a:hover,
	.article-meta__tag:hover,
	.article-prose a:not(.button):hover {
		color: var(--brand);
		text-decoration-color: currentcolor;
	}

	.article-back:hover {
		border-color: var(--interactive-border);
		background: var(--selected);
		transform: translateX(-2px);
	}

	.article-code__copy:hover {
		border-color: rgb(255 255 255 / 40%);
		background: rgb(255 255 255 / 20%);
	}

	.article-code__expand:hover {
		background: rgb(138 180 216 / 12%);
		color: #b9d8f2;
	}

	.article-video__play:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
	}

	.article-toc a:hover {
		padding-left: 12px;
		background: var(--selected);
		color: var(--article-toc-active);
	}

	.article-related-card:hover {
		border-color: var(--border-brand);
		box-shadow: var(--shadow-sm);
		transform: translateY(-2px);
	}

	.article-related-card__link:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.article-community__button:hover {
		border-color: rgb(255 255 255 / 48%);
		background: #0068d9;
		color: #fff;
		transform: translateY(-1px);
	}
}

@media (max-width: 1279px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 40px;
	}

	.article-prose,
	.article-forum-cta {
		width: 100%;
	}

	.article-toc {
		width: 280px;
	}
}

@media (max-width: 1163px) {
	.article-layout {
		display: block;
	}

	.article-prose,
	.article-forum-cta {
		margin-inline: auto;
	}

	.article-toc {
		display: none;
	}
}

@media (max-width: 1023px) {
	.article-title {
		max-width: 900px;
		font-size: 40px;
		letter-spacing: -0.8px;
		line-height: 48px;
	}

	.article-featured__media {
		aspect-ratio: 16 / 9;
	}

	.article-related__grid {
		gap: 20px;
	}

	.article-community__copy {
		width: auto;
	}
}

@media (max-width: 767px) {
	.article-intro {
		padding: 16px 0 24px;
	}

	.article-intro__inner {
		gap: 12px;
	}

	.article-breadcrumbs {
		gap: 8px;
	}

	.article-breadcrumbs ol {
		gap: 6px;
	}

	.article-breadcrumbs li + li::before {
		margin-right: 6px;
	}

	.article-meta {
		flex-wrap: wrap;
		gap: 8px;
	}

	.article-meta__category {
		letter-spacing: 0.55px;
	}

	.article-title {
		width: 100%;
		font-size: 30px;
		letter-spacing: -0.45px;
		line-height: 36px;
	}

	.article-lead {
		width: 100%;
		font-size: 16px;
		line-height: 25px;
	}

	.article-featured {
		padding-bottom: 24px;
	}

	.article-featured__media {
		aspect-ratio: 16 / 9;
		border-radius: 16px;
	}

	.article-main {
		padding: 24px 0 40px;
	}

	.article-prose {
		font-size: 16px;
		line-height: 26px;
	}

	.article-prose h2 {
		margin: 24px 0 12px;
		font-size: 24px;
		letter-spacing: -0.2px;
		line-height: 30px;
	}

	.article-prose h3 {
		margin: 24px 0 12px;
		font-size: 20px;
		letter-spacing: -0.1px;
		line-height: 26px;
	}

	.article-prose h3 + ul {
		line-height: 25px;
	}

	.article-prose p {
		margin-bottom: 12px;
		line-height: 26px;
	}

	.article-prose :is(ul, ol) {
		margin: 12px 0 24px;
		padding-left: 22px;
	}

	.article-prose li + li {
		margin-top: 8px;
	}

	.article-prose :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed) {
		margin: 24px 0;
	}

	.article-callout--critical,
	.article-prose .wp-block-group.is-style-hucker-critical {
		margin: 12px 0 24px;
		padding: 16px;
		grid-template-columns: 20px minmax(0, 1fr);
		gap: 10px;
	}

	.article-callout--critical::before,
	.article-prose .wp-block-group.is-style-hucker-critical::before {
		width: 20px;
		height: 20px;
	}

	.article-callout--critical > :first-child,
	.article-prose .wp-block-group.is-style-hucker-critical > :first-child {
		font-size: 15px;
		line-height: 22px;
	}

	.article-callout--critical > :last-child,
	.article-prose .wp-block-group.is-style-hucker-critical > :last-child {
		font-size: 14px;
		line-height: 22px;
	}

	.article-action-list,
	.article-prose .wp-block-group.is-style-hucker-actions {
		margin: 24px 0;
		padding: 24px;
	}

	.article-prose .article-action-list h2,
	.article-prose .article-action-list h3,
	.article-prose .wp-block-group.is-style-hucker-actions :is(h2, h3) {
		margin: 0 0 16px;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 28px;
	}

	.article-action-list ol,
	.article-prose .wp-block-group.is-style-hucker-actions ol {
		margin: 0;
		padding-left: 20px;
		font-size: 16px;
		line-height: 26px;
	}

	.article-table,
	.article-prose .wp-block-table {
		margin: 12px 0 24px;
		padding-bottom: 4px;
	}

	.article-table table,
	.article-prose .wp-block-table table {
		min-width: 700px;
	}

	.article-code {
		margin: 12px 0 24px;
	}

	.article-code__toolbar {
		height: 40px;
		padding: 4px 12px 4px 16px;
	}

	.article-code__label {
		font-size: 11px;
		letter-spacing: 0.55px;
		line-height: 14px;
	}

	.article-code__viewport {
		margin: 0;
		padding: 16px;
	}

	.article-code__viewport pre,
	.article-prose > pre.wp-block-code {
		font-size: 13px;
		line-height: 22px;
	}

	.article-prose > pre.wp-block-code {
		margin: 12px 0 24px;
		padding: 16px;
	}

	.article-code.is-collapsible .article-code__viewport {
		max-height: 214px;
		padding-left: 60px;
	}

	.article-code.is-collapsible pre {
		font-size: 12px;
		line-height: 20px;
	}

	.article-code__line-numbers {
		top: 16px;
		left: 16px;
		width: 24px;
		font-size: 11px;
		line-height: 20px;
	}

	.article-code__gutter {
		left: 48px;
	}

	.article-code__fade {
		height: 128px;
	}

	.article-code.is-collapsible .article-code__viewport::after {
		position: absolute;
		top: 0;
		right: 0;
		width: 36px;
		height: 126px;
		pointer-events: none;
		background: linear-gradient(90deg, transparent, var(--article-code-bg));
		content: "";
	}

	.article-code.is-expanded .article-code__viewport::after {
		display: none;
	}

	.article-quote,
	.article-prose blockquote {
		margin: 24px 0;
		padding: 16px;
	}

	.article-eyebrow,
	.article-quote__eyebrow,
	.article-editorial > :first-child,
	.article-prose .wp-block-group.is-style-hucker-editorial > :first-child {
		font-size: 11px;
		letter-spacing: 0.6px;
		line-height: 14px;
	}

	.article-quote p,
	.article-prose blockquote p {
		margin-top: 10px;
		font-size: 16px;
		line-height: 26px;
	}

	.article-quote cite,
	.article-prose blockquote cite {
		display: none;
	}

	.article-inline-media {
		aspect-ratio: 16 / 9;
		margin: 24px 0;
		border-radius: 16px;
	}

	.article-editorial,
	.article-prose .wp-block-group.is-style-hucker-editorial {
		margin: 24px 0;
		padding: 16px;
	}

	.article-editorial > :last-child,
	.article-prose .wp-block-group.is-style-hucker-editorial > :last-child {
		font-size: 16px;
		font-weight: 400;
		line-height: 25px;
	}

	.article-sources,
	.article-technical {
		margin: 24px 0;
	}

	.article-sources h2,
	.article-technical > h2 {
		margin-top: 0;
	}

	.article-prose .article-sources ol {
		margin: 0;
		padding: 0;
	}

	.article-sources li {
		position: relative;
		min-height: 66px;
		padding: 11px 32px 11px 0;
	}

	.article-sources li + li {
		margin-top: 12px;
	}

	.article-sources li::after {
		position: absolute;
		top: 23px;
		right: 0;
		color: var(--brand);
		content: "→";
	}

	.article-sources a {
		font-size: 14px;
		line-height: 22px;
	}

	.article-file,
	.article-prose .wp-block-file {
		min-height: 132px;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.article-file__title,
	.article-prose .wp-block-file > a:first-child {
		font-size: 16px;
		line-height: 22px;
		white-space: normal;
	}

	.article-prose .article-file__meta {
		margin: 0;
		color: var(--text-secondary);
		font-size: 12px;
		line-height: 18px;
	}

	.article-file__action,
	.article-prose .wp-block-file__button {
		display: flex;
		width: 100%;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: var(--pill);
		background: var(--brand);
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	.article-prose a.article-file__action,
	.article-prose .wp-block-file a.wp-block-file__button {
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	.article-video__preview,
	.article-prose .wp-block-embed__wrapper {
		aspect-ratio: 16 / 9;
	}

	.article-video__content {
		max-width: 326px;
		gap: 6px;
	}

	.article-video__play {
		width: 48px;
		height: 48px;
	}

	.article-video__play > span {
		display: none;
	}

	.article-video__play img {
		display: block;
	}

	.article-video__eyebrow {
		font-size: 9px;
		letter-spacing: 0.55px;
		line-height: 12px;
	}

	.article-video__title {
		font-size: 17px;
		line-height: 22px;
	}

	.article-video__caption {
		font-size: 13px;
		line-height: 20px;
	}

	.article-updates,
	.article-prose .wp-block-group.is-style-hucker-updates {
		margin-top: 24px;
		padding: 16px;
	}

	.article-updates > :first-child,
	.article-prose .wp-block-group.is-style-hucker-updates > :first-child {
		margin-bottom: 12px;
		font-size: 11px;
		letter-spacing: 0.6px;
		line-height: 14px;
	}

	.article-update + .article-update {
		margin-top: 14px;
	}

	.article-prose .article-update__meta {
		margin: 0;
		font-size: 11px;
		letter-spacing: 0.35px;
		line-height: 16px;
	}

	.article-prose .article-update:nth-of-type(n + 2) .article-update__meta {
		font-size: 10px;
		line-height: 14px;
	}

	.article-prose .article-update__body {
		margin: 4px 0 0;
		color: var(--text);
		font-size: 14px;
		line-height: 22px;
	}

	.article-post-footer {
		margin-top: 16px;
	}

	.article-forum-cta {
		min-height: 211px;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 16px;
	}

	.article-forum-cta__copy {
		max-width: none;
	}

	.article-forum-cta h2 {
		margin-top: 10px;
		font-size: 20px;
		letter-spacing: -0.1px;
		line-height: 25px;
	}

	.article-forum-cta__copy > p:last-child {
		margin-top: 10px;
		font-size: 14px;
		line-height: 22px;
	}

	.article-forum-cta__button {
		width: 100%;
		min-height: 44px;
		flex: 0 0 44px;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	.article-related {
		padding-top: 32px;
	}

	.article-related__header {
		gap: 12px;
		margin-bottom: 16px;
	}

	.article-related__header h2 {
		font-size: 20px;
		letter-spacing: -0.1px;
		line-height: 25px;
	}

	.article-related__header > span {
		display: block;
	}

	.article-related__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.article-related-card {
		min-height: 168px;
		padding: 16px;
	}

	.article-related-card__meta {
		gap: 8px;
	}

	.article-related-card__number {
		display: grid;
		width: 28px;
		height: 28px;
		flex: 0 0 28px;
		place-items: center;
		border-radius: 8px;
		background: var(--selected);
		color: var(--brand);
		font-size: 10px;
		line-height: 13px;
	}

	.article-related-card__line {
		display: block;
		height: 1px;
		flex: 1;
		background: var(--border);
	}

	.article-related-card__time {
		display: block;
		color: var(--article-muted);
		font-size: 10px;
		line-height: 13px;
	}

	.article-related-card h3 {
		font-size: 17px;
		letter-spacing: -0.05px;
		line-height: 22px;
	}

	.article-related-card__category {
		letter-spacing: 0.55px;
	}

	.article-related-card__link {
		display: flex;
		width: 100%;
		min-height: 44px;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid var(--border);
		font-size: 12px;
		line-height: 17px;
	}

	.article-community {
		padding: 12px 0;
	}

	.article-community__panel {
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: 20px;
		padding: 20px;
		border-radius: 18px;
	}

	.article-community__copy {
		width: 100%;
		max-width: none;
		padding-left: 0;
	}

	.article-community .article-eyebrow {
		color: #fff;
		font-size: 10px;
		letter-spacing: 0.7px;
		line-height: 13px;
		opacity: 0.78;
	}

	.article-community__chat {
		top: -2px;
		right: 0;
		left: auto;
	}

	.article-community h2 {
		max-width: calc(100% - 36px);
		margin-top: 10px;
		font-size: 23px;
		letter-spacing: 0;
		line-height: 29px;
	}

	.article-community__button {
		width: 100%;
		height: 48px;
		margin-top: 0;
		background: #006fe6;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	.article-community__panel::before {
		inset: 42% 0 0 0;
		mask-image: linear-gradient(180deg, transparent 0%, #000 36%, #000 100%);
		opacity: 0.65;
	}

	.article-community__panel::after {
		right: -100px;
		width: 240px;
		height: 240px;
	}

	.article-community__button > span {
		font-size: 18px;
		font-weight: 500;
		line-height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article-back,
	.article-code__copy,
	.article-code__expand,
	.article-code__expand img,
	.article-video__play,
	.article-toc a,
	.article-related-card,
	.article-community__button {
		transition-duration: 0.01ms;
	}
}

@media print {
	.article-reading-progress {
		display: none;
	}
}

@media (forced-colors: active) {
	.article-reading-progress {
		background: Canvas;
	}

	.article-reading-progress__value {
		background: Highlight;
		box-shadow: none;
	}
}