/* ==========================================================================
   App Single Page 1.2 - theme styles
   Light + dark, gradient accents, layered depth.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens -- */
:root {
	--asp-accent: #2563eb;
	--asp-accent-2: #7c3aed;
	--asp-accent-dark: #1d4ed8;
	--asp-accent-soft: #eef2ff;
	--asp-accent-ring: rgba(37, 99, 235, .30);
	--asp-on-accent: #ffffff;

	--asp-hero-1: #2563eb;
	--asp-hero-2: #7c3aed;
	--asp-btn-1: #2563eb;
	--asp-btn-2: #7c3aed;

	--asp-text: #0f172a;
	--asp-muted: #64748b;
	--asp-line: #e6eaf2;
	--asp-line-soft: #eef1f7;

	--asp-bg: #f5f7fc;
	--asp-card: #ffffff;
	--asp-card-2: #fafbfe;
	--asp-header: rgba(255, 255, 255, .74);

	--asp-glow-1: rgba(37, 99, 235, .10);
	--asp-glow-2: rgba(124, 58, 237, .10);

	--asp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--asp-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -8px rgba(15, 23, 42, .14);
	--asp-shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 24px 56px -16px rgba(15, 23, 42, .26);

	--asp-radius: 18px;
	--asp-radius-sm: 12px;
	--asp-radius-xs: 10px;
	--asp-max: 880px;

	color-scheme: light;
}

/* Explicit dark choice. */
[data-theme="dark"] {
	--asp-accent: #60a5fa;
	--asp-accent-2: #a78bfa;
	--asp-accent-dark: #3b82f6;
	--asp-accent-soft: rgba(96, 165, 250, .14);
	--asp-accent-ring: rgba(96, 165, 250, .26);
	--asp-on-accent: #0b1220;

	--asp-hero-1: #1e40af;
	--asp-hero-2: #6d28d9;
	--asp-btn-1: #2f6ae0;
	--asp-btn-2: #7645d6;

	--asp-text: #e8edf7;
	--asp-muted: #94a3b8;
	--asp-line: #232c3b;
	--asp-line-soft: #1b2331;

	--asp-bg: #0a0e16;
	--asp-card: #121a26;
	--asp-card-2: #0f1621;
	--asp-header: rgba(18, 26, 38, .78);

	--asp-glow-1: rgba(59, 130, 246, .16);
	--asp-glow-2: rgba(139, 92, 246, .14);

	--asp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--asp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -10px rgba(0, 0, 0, .7);
	--asp-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 28px 60px -18px rgba(0, 0, 0, .8);

	color-scheme: dark;
}

/* System preference, when the visitor has not chosen. */
@media (prefers-color-scheme: dark) {
	/* :not(.editor-styles-wrapper) keeps the block editor canvas light. */
	:root:not([data-theme="light"]):not(.editor-styles-wrapper) {
		--asp-accent: #60a5fa;
		--asp-accent-2: #a78bfa;
		--asp-accent-dark: #3b82f6;
		--asp-accent-soft: rgba(96, 165, 250, .14);
		--asp-accent-ring: rgba(96, 165, 250, .26);
		--asp-on-accent: #0b1220;

		--asp-hero-1: #1e40af;
		--asp-hero-2: #6d28d9;
		--asp-btn-1: #2f6ae0;
		--asp-btn-2: #7645d6;

		--asp-text: #e8edf7;
		--asp-muted: #94a3b8;
		--asp-line: #232c3b;
		--asp-line-soft: #1b2331;

		--asp-bg: #0a0e16;
		--asp-card: #121a26;
		--asp-card-2: #0f1621;
		--asp-header: rgba(18, 26, 38, .78);

		--asp-glow-1: rgba(59, 130, 246, .16);
		--asp-glow-2: rgba(139, 92, 246, .14);

		--asp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--asp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -10px rgba(0, 0, 0, .7);
		--asp-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 28px 60px -18px rgba(0, 0, 0, .8);

		color-scheme: dark;
	}
}

/* ---------------------------------------------------------------- Base --- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	color: var(--asp-text);
	background-color: var(--asp-bg);
	background-image:
		radial-gradient(900px 520px at 8% -12%, var(--asp-glow-1), transparent 62%),
		radial-gradient(820px 460px at 96% -6%, var(--asp-glow-2), transparent 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.72;
	letter-spacing: -.003em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; height: auto; }

a {
	color: var(--asp-accent);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}
a:hover, a:focus { text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--asp-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

.asp-container {
	max-width: var(--asp-max);
	margin: 0 auto;
	padding: 0 18px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 999;
	width: auto; height: auto; clip: auto;
	background: var(--asp-card); color: var(--asp-text);
	padding: 10px 18px; border-radius: 10px; box-shadow: var(--asp-shadow);
}

/* -------------------------------------------------------------- Header --- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--asp-header);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--asp-line);
}
.site-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--asp-accent), var(--asp-accent-2), transparent);
	opacity: .5;
}

.asp-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 66px;
	flex-wrap: wrap;
}

.site-title {
	margin: 0;
	font-size: 20px;
	font-weight: 750;
	letter-spacing: -.025em;
	line-height: 1.2;
}
.site-title a { color: var(--asp-text); }
.site-title a:hover {
	text-decoration: none;
	background: linear-gradient(120deg, var(--asp-accent), var(--asp-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.site-description { margin: 1px 0 0; font-size: 12.5px; color: var(--asp-muted); letter-spacing: 0; }
.custom-logo { max-height: 44px; width: auto; }

.asp-header-tools { display: flex; align-items: center; gap: 8px; }

.asp-menu {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.asp-menu li { position: relative; }
.asp-menu a {
	display: block;
	padding: 8px 13px;
	border-radius: 999px;
	color: var(--asp-text);
	font-size: 14.5px;
	font-weight: 550;
	letter-spacing: -.01em;
}
.asp-menu a:hover {
	background: var(--asp-accent-soft);
	color: var(--asp-accent);
	text-decoration: none;
}
.asp-menu .current-menu-item > a {
	color: #fff;
	background-image: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	box-shadow: 0 4px 12px -4px var(--asp-accent-ring);
}
.asp-menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	background: var(--asp-card);
	border: 1px solid var(--asp-line);
	border-radius: 14px;
	box-shadow: var(--asp-shadow-lg);
	padding: 6px;
	list-style: none;
	margin: 0;
}
.asp-menu li:hover > .sub-menu,
.asp-menu li:focus-within > .sub-menu { display: block; }
.asp-menu .sub-menu a { border-radius: 9px; }

/* Icon buttons in the header. */
.asp-icon-btn {
	width: 40px;
	height: 40px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--asp-line);
	background: var(--asp-card);
	color: var(--asp-text);
	border-radius: 12px;
	cursor: pointer;
	position: relative;
	box-shadow: var(--asp-shadow-sm);
	transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.asp-icon-btn:hover {
	transform: translateY(-1px);
	border-color: var(--asp-accent);
	background: var(--asp-accent-soft);
}

.asp-theme-toggle svg { width: 19px; height: 19px; display: block; }
.asp-theme-toggle .asp-moon { display: none; }
[data-theme="dark"] .asp-theme-toggle .asp-moon { display: block; }
[data-theme="dark"] .asp-theme-toggle .asp-sun { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .asp-theme-toggle .asp-moon { display: block; }
	:root:not([data-theme="light"]) .asp-theme-toggle .asp-sun { display: none; }
	:root[data-theme="light"] .asp-theme-toggle .asp-moon { display: none; }
	:root[data-theme="light"] .asp-theme-toggle .asp-sun { display: block; }
}

.asp-nav-toggle { display: none; }
.asp-nav-toggle-bar,
.asp-nav-toggle-bar::before,
.asp-nav-toggle-bar::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.asp-nav-toggle-bar::before { top: -6px; left: 0; right: 0; }
.asp-nav-toggle-bar::after { top: 6px; left: 0; right: 0; }
.asp-nav-toggle[aria-expanded="true"] .asp-nav-toggle-bar { background: transparent; }
.asp-nav-toggle[aria-expanded="true"] .asp-nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.asp-nav-toggle[aria-expanded="true"] .asp-nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------- Content --- */
.site-main { padding: 30px 0 56px; }

.asp-page,
.asp-card {
	background: var(--asp-card);
	border: 1px solid var(--asp-line);
	border-radius: var(--asp-radius);
	box-shadow: var(--asp-shadow);
	padding: 32px;
	position: relative;
}

.asp-page-header { margin-bottom: 20px; }
.asp-page-title {
	margin: 0 0 8px;
	font-size: 33px;
	font-weight: 780;
	line-height: 1.2;
	letter-spacing: -.032em;
}
.asp-meta {
	margin: 0;
	font-size: 13px;
	color: var(--asp-muted);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--asp-card-2);
	border: 1px solid var(--asp-line);
	border-radius: 999px;
	padding: 3px 12px;
}
.asp-featured { margin: 0 0 24px; }
.asp-featured img { border-radius: var(--asp-radius-sm); box-shadow: var(--asp-shadow); }

.asp-content > *:first-child { margin-top: 0; }

/* Section heading: gradient rule, title, hairline running to the edge. */
.asp-content h2:not(.asp-download-title) {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 25px;
	font-weight: 750;
	margin: 44px 0 16px;
	letter-spacing: -.028em;
	line-height: 1.28;
	scroll-margin-top: 88px;
}
.asp-content h2:not(.asp-download-title)::before {
	content: "";
	flex: none;
	align-self: stretch;
	width: 5px;
	min-height: 1.1em;
	border-radius: 99px;
	background: linear-gradient(180deg, var(--asp-accent), var(--asp-accent-2));
}
.asp-content h2:not(.asp-download-title)::after {
	content: "";
	flex: 1 1 20px;
	height: 1px;
	min-width: 20px;
	background: linear-gradient(90deg, var(--asp-line), transparent);
}

/* First paragraph of a section reads as a lead line. */
.asp-content h2 + p {
	font-size: 1.045em;
	line-height: 1.68;
}

.asp-content h3:not(.asp-details-title):not(.asp-shots-heading) {
	position: relative;
	font-size: 19.5px;
	font-weight: 700;
	margin: 30px 0 10px;
	padding-left: 18px;
	letter-spacing: -.02em;
	scroll-margin-top: 88px;
}
.asp-content h3:not(.asp-details-title):not(.asp-shots-heading)::before {
	content: "";
	position: absolute;
	left: 0; top: .56em;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--asp-accent), var(--asp-accent-2));
	box-shadow: 0 0 0 4px var(--asp-accent-soft);
}

.asp-content p { margin: 0 0 17px; }

/* Text links get a gradient underline. */
.asp-content p a,
.asp-content li a {
	background-image: linear-gradient(90deg, var(--asp-accent), var(--asp-accent-2));
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 1px;
	text-decoration: none;
}
.asp-content p a:hover,
.asp-content li a:hover { opacity: .78; text-decoration: none; }

/* Default lists. */
.asp-content ul,
.asp-content ol { margin: 0 0 18px; padding-left: 4px; list-style: none; counter-reset: asp-ol; }
.asp-content li { margin-bottom: 9px; padding-left: 30px; position: relative; }
.asp-content ul > li::before {
	content: "";
	position: absolute;
	left: 7px; top: .62em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--asp-accent), var(--asp-accent-2));
}
.asp-content ol > li { counter-increment: asp-ol; }
.asp-content ol > li::before {
	content: counter(asp-ol);
	position: absolute;
	left: 0; top: .16em;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--asp-accent-soft);
	color: var(--asp-accent);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.asp-content li ul,
.asp-content li ol { margin-top: 9px; }

/* Block style: "Feature cards" (core/list). */
.asp-content ul.is-style-cards {
	display: grid;
	gap: 10px;
	padding-left: 0;
}
.asp-content ul.is-style-cards > li {
	margin: 0;
	padding: 14px 18px 14px 52px;
	background: var(--asp-card-2);
	border: 1px solid var(--asp-line);
	border-radius: 14px;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.asp-content ul.is-style-cards > li:hover {
	transform: translateX(3px);
	border-color: var(--asp-accent);
	box-shadow: var(--asp-shadow);
}
.asp-content ul.is-style-cards > li::before {
	content: "\2713";
	left: 16px;
	top: 50%;
	margin-top: -12px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px -3px var(--asp-accent-ring);
}

/* Block style: "Steps" (core/list, ordered). */
.asp-content ol.is-style-steps { padding-left: 0; }
.asp-content ol.is-style-steps > li {
	margin: 0 0 10px;
	padding: 15px 18px 15px 58px;
	background: var(--asp-card-2);
	border: 1px solid var(--asp-line);
	border-radius: 14px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.asp-content ol.is-style-steps > li:hover { border-color: var(--asp-accent); box-shadow: var(--asp-shadow); }
.asp-content ol.is-style-steps > li::before {
	left: 16px;
	top: 15px;
	width: 28px; height: 28px;
	font-size: 13px;
	background: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	box-shadow: 0 4px 10px -3px var(--asp-accent-ring);
}
.asp-content ol.is-style-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 29px;
	top: 49px;
	bottom: -12px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--asp-accent), transparent);
	opacity: .45;
}

/* Block style: "Lead" and "Callout" (core/paragraph). */
.asp-content p.is-style-lead {
	font-size: 1.16em;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: -.014em;
	color: var(--asp-text);
}
.asp-content p.is-style-callout {
	position: relative;
	margin-bottom: 20px;
	padding: 16px 20px 16px 56px;
	border: 1px solid var(--asp-line);
	border-radius: 14px;
	background-image: linear-gradient(135deg, var(--asp-accent-soft), transparent 70%);
	font-size: .97em;
}
.asp-content p.is-style-callout::before {
	content: "!";
	position: absolute;
	left: 18px; top: 17px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Block style: "Panel" (core/group). */
.asp-content .wp-block-group.is-style-panel {
	background: var(--asp-card-2);
	border: 1px solid var(--asp-line);
	border-radius: var(--asp-radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: var(--asp-shadow-sm);
}

/* Quotes. */
.asp-content blockquote {
	position: relative;
	margin: 0 0 22px;
	padding: 20px 22px 20px 58px;
	border: 1px solid var(--asp-line);
	background-image: linear-gradient(135deg, var(--asp-accent-soft), transparent 65%);
	border-radius: var(--asp-radius-sm);
	color: var(--asp-text);
	font-size: 1.02em;
}
.asp-content blockquote::before {
	content: "\201C";
	position: absolute;
	left: 16px; top: 2px;
	font-size: 54px;
	line-height: 1.1;
	font-weight: 700;
	background: linear-gradient(135deg, var(--asp-accent), var(--asp-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: .55;
}
.asp-content blockquote p:last-child { margin-bottom: 0; }
.asp-content blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	color: var(--asp-muted);
	font-style: normal;
}

/* Media inside the content. */
.asp-content figure { margin: 0 0 22px; }
.asp-content figure img,
.asp-content > img { border-radius: var(--asp-radius-sm); box-shadow: var(--asp-shadow); }
.asp-content figcaption {
	margin-top: 9px;
	font-size: 13.5px;
	color: var(--asp-muted);
	text-align: center;
}

/* "On this page" index. */
.asp-toc {
	margin: 0 0 28px;
	padding: 16px 18px;
	background: var(--asp-card-2);
	border: 1px solid var(--asp-line);
	border-radius: var(--asp-radius-sm);
}
.asp-toc-title {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--asp-muted);
}
.asp-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: asp-toc;
}
.asp-toc li { margin: 0; padding: 0; counter-increment: asp-toc; }
.asp-toc li::before { display: none; }
.asp-toc a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--asp-card);
	border: 1px solid var(--asp-line);
	border-radius: 999px;
	padding: 6px 15px 6px 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--asp-text);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.asp-toc a::before {
	content: counter(asp-toc);
	width: 22px; height: 22px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.asp-toc a:hover {
	text-decoration: none;
	border-color: var(--asp-accent);
	transform: translateY(-1px);
	box-shadow: var(--asp-shadow-sm);
}
/* The index sits inside the content, so opt it out of the link underline. */
.asp-content .asp-toc a {
	background-image: none;
	padding-bottom: 6px;
	opacity: 1;
}

.asp-content table:not(.asp-details) {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 20px;
	font-size: 15px;
	border: 1px solid var(--asp-line);
	border-radius: var(--asp-radius-xs);
	overflow: hidden;
}
.asp-content table:not(.asp-details) th,
.asp-content table:not(.asp-details) td {
	border-bottom: 1px solid var(--asp-line);
	padding: 10px 14px;
	text-align: left;
}
.asp-content table:not(.asp-details) tr:last-child th,
.asp-content table:not(.asp-details) tr:last-child td { border-bottom: 0; }
.asp-content table:not(.asp-details) th { background: var(--asp-card-2); font-weight: 650; }

.asp-content code {
	background: var(--asp-accent-soft);
	color: var(--asp-accent);
	padding: 2px 7px;
	border-radius: 6px;
	font-size: .88em;
}
.asp-content pre {
	background: #0b1220;
	color: #e6edf3;
	padding: 18px;
	border-radius: var(--asp-radius-sm);
	overflow: auto;
	box-shadow: var(--asp-shadow);
}
.asp-content pre code { background: none; color: inherit; padding: 0; }
.asp-content hr {
	border: 0;
	height: 1px;
	margin: 32px 0;
	background: linear-gradient(90deg, transparent, var(--asp-line), transparent);
}
.asp-content .alignwide { margin-left: -22px; margin-right: -22px; }
.asp-content .alignfull { margin-left: -32px; margin-right: -32px; max-width: calc(100% + 64px); }

/* ------------------------------------------------------------- Buttons --- */
.asp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	background-image: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff !important;
	border-radius: 14px;
	font-weight: 650;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -.01em;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 8px 20px -6px var(--asp-accent-ring), inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.asp-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .6s ease;
}
.asp-btn:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -8px var(--asp-accent-ring), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.asp-btn:hover::after { transform: translateX(120%); }
.asp-btn:active { transform: translateY(0); }

.asp-btn-ghost {
	background-image: none;
	background-color: var(--asp-card);
	color: var(--asp-accent) !important;
	border: 1px solid var(--asp-line);
	box-shadow: var(--asp-shadow-sm);
}
.asp-btn-ghost:hover {
	background-color: var(--asp-accent-soft);
	border-color: var(--asp-accent);
	box-shadow: var(--asp-shadow);
}
.asp-btn-ghost::after { display: none; }
.asp-btn-size { font-weight: 500; opacity: .82; font-size: 14px; }

/* ------------------------------------------------------- Download box ---- */
.asp-download {
	border: 1px solid var(--asp-line);
	border-radius: var(--asp-radius);
	background: var(--asp-card);
	overflow: hidden;
	margin: 0 0 30px;
	box-shadow: var(--asp-shadow-lg);
	scroll-margin-top: 88px;
}

.asp-download-head {
	position: relative;
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 24px 22px;
	flex-wrap: wrap;
	background-image: linear-gradient(135deg, var(--asp-hero-1), var(--asp-hero-2));
	color: #fff;
	isolation: isolate;
}
.asp-download-head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(520px 200px at 88% -30%, rgba(255, 255, 255, .28), transparent 70%),
		radial-gradient(360px 180px at 0% 130%, rgba(0, 0, 0, .22), transparent 70%);
}

.asp-download-icon {
	width: 78px;
	height: 78px;
	border-radius: 20px;
	object-fit: cover;
	background: #fff;
	border: 0;
	flex: none;
	box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .28);
}

.asp-download-headings { flex: 1 1 220px; min-width: 0; }
.asp-download-title {
	margin: 0;
	font-size: 25px;
	font-weight: 760;
	line-height: 1.24;
	letter-spacing: -.028em;
	color: #fff;
}
.asp-download-tagline {
	margin: 5px 0 0;
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
}

.asp-download-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding: 20px 22px;
	background: var(--asp-card);
	border-bottom: 1px solid var(--asp-line);
}
.asp-download-actions .asp-btn { flex: 1 1 210px; }

.asp-details-title,
.asp-shots-heading {
	margin: 0;
	padding: 18px 22px 0;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--asp-muted);
}

.asp-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 12px 0 0;
}
.asp-details th,
.asp-details td {
	padding: 11px 22px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--asp-line-soft);
}
.asp-details tr:nth-child(odd) th,
.asp-details tr:nth-child(odd) td { background: var(--asp-card-2); }
.asp-details tr:hover th,
.asp-details tr:hover td { background: var(--asp-accent-soft); }
.asp-details th {
	width: 38%;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--asp-muted);
	letter-spacing: .01em;
}
.asp-details td { color: var(--asp-text); font-weight: 550; }

.asp-download-note {
	margin: 0;
	padding: 15px 22px;
	background: var(--asp-card-2);
	border-top: 1px solid var(--asp-line);
	font-size: 14px;
	color: var(--asp-muted);
}

/* --------------------------------------------------------- Screenshots --- */
.asp-shots {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 14px 22px 18px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--asp-line) transparent;
}
.asp-shots::-webkit-scrollbar { height: 8px; }
.asp-shots::-webkit-scrollbar-thumb { background: var(--asp-line); border-radius: 99px; }
.asp-shots::-webkit-scrollbar-track { background: transparent; }

.asp-shot {
	flex: none;
	scroll-snap-align: start;
	display: block;
	line-height: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--asp-line);
	background: var(--asp-card-2);
	box-shadow: var(--asp-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.asp-shot:hover,
.asp-shot:focus-visible {
	transform: translateY(-4px) scale(1.012);
	box-shadow: var(--asp-shadow-lg);
	border-color: var(--asp-accent);
	text-decoration: none;
}
.asp-shot img {
	height: 240px;
	width: auto;
	max-width: none;
	display: block;
	object-fit: cover;
}

/* ------------------------------------------------------------ Lightbox --- */
.asp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(6, 9, 15, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 52px 18px;
	animation: asp-fade .18s ease;
}
@keyframes asp-fade { from { opacity: 0; } to { opacity: 1; } }
.asp-lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
	animation: asp-zoom .22s ease;
}
@keyframes asp-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.asp-lightbox-btn {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, transform .15s ease;
}
.asp-lightbox-btn:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.asp-lightbox-close { top: 16px; right: 16px; }
.asp-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.asp-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.asp-lightbox-prev:hover, .asp-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.asp-lightbox-count {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	padding: 4px 14px;
	margin: 0;
}
body.asp-lightbox-open { overflow: hidden; }

/* ------------------------------------------------------- Jump / anchors -- */
.asp-jump {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 14px 22px;
	border-top: 1px solid var(--asp-line);
	background: var(--asp-card-2);
}
.asp-jump a {
	font-size: 14px;
	font-weight: 600;
	background: var(--asp-card);
	border: 1px solid var(--asp-line);
	border-radius: 999px;
	padding: 6px 14px;
}
.asp-jump a:hover { background: var(--asp-accent-soft); border-color: var(--asp-accent); text-decoration: none; }

/* ----------------------------------------------------------- Blog list --- */
.asp-post-list { display: grid; gap: 20px; }
.asp-card {
	display: flex;
	gap: 20px;
	padding: 20px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.asp-card:hover { transform: translateY(-2px); box-shadow: var(--asp-shadow-lg); }
.asp-card-thumb img { border-radius: var(--asp-radius-xs); width: 170px; height: auto; }
.asp-card-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.asp-card-title a { color: var(--asp-text); }
.asp-card-title a:hover { color: var(--asp-accent); text-decoration: none; }
.asp-card-body p { margin: 10px 0 14px; color: var(--asp-muted); font-size: 15px; }

.pagination { margin-top: 26px; }
.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--asp-line);
	border-radius: 10px;
	background: var(--asp-card);
	margin-right: 6px;
	color: var(--asp-text);
	font-weight: 600;
	font-size: 15px;
}
.pagination .page-numbers:hover { border-color: var(--asp-accent); color: var(--asp-accent); text-decoration: none; }
.pagination .current {
	background-image: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	border-color: transparent;
}

/* ------------------------------------------------------------ Comments --- */
.asp-comments {
	margin-top: 28px;
	background: var(--asp-card);
	border: 1px solid var(--asp-line);
	border-radius: var(--asp-radius);
	box-shadow: var(--asp-shadow);
	padding: 28px;
}
.asp-comments-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.asp-comment-list { list-style: none; margin: 0 0 22px; padding: 0; }
.asp-comment-list ol { list-style: none; padding-left: 24px; }
.asp-comment-list .comment-body { border-bottom: 1px solid var(--asp-line); padding: 16px 0; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-field {
	width: 100%;
	max-width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--asp-line);
	border-radius: 11px;
	font: inherit;
	font-size: 15px;
	background: var(--asp-card-2);
	color: var(--asp-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.comment-form input:focus,
.comment-form textarea:focus,
.search-field:focus {
	outline: none;
	border-color: var(--asp-accent);
	box-shadow: 0 0 0 4px var(--asp-accent-ring);
}
.comment-form input[type="submit"],
.search-submit {
	margin-top: 12px;
	padding: 12px 24px;
	background-image: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	border: 0;
	border-radius: 12px;
	font-weight: 650;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 8px 20px -6px var(--asp-accent-ring);
}

/* -------------------------------------------------------------- Footer --- */
.site-footer {
	position: relative;
	background: var(--asp-card);
	border-top: 1px solid var(--asp-line);
	padding: 30px 0;
	margin-top: 24px;
	font-size: 15px;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--asp-accent), var(--asp-accent-2), transparent);
	opacity: .45;
}
.asp-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
	margin-bottom: 20px;
}
.asp-footer-menu {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	flex-wrap: wrap;
	font-weight: 550;
}
.asp-copyright { margin: 0; color: var(--asp-muted); font-size: 14px; }

.asp-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background-image: linear-gradient(135deg, var(--asp-btn-1), var(--asp-btn-2));
	color: #fff;
	box-shadow: 0 10px 26px -6px var(--asp-accent-ring);
	cursor: pointer;
	font-size: 19px;
	z-index: 40;
	transition: transform .18s ease, box-shadow .18s ease;
}
.asp-to-top:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -8px var(--asp-accent-ring); }

/* ---------------------------------------------------------- Responsive --- */
@media (max-width: 782px) {
	body { font-size: 16px; }

	.asp-nav-toggle { display: inline-flex; order: 3; }
	.asp-nav {
		flex-basis: 100%;
		display: none;
		padding-bottom: 12px;
	}
	.asp-nav.is-open { display: block; animation: asp-slide .2s ease; }
	@keyframes asp-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
	.asp-menu { flex-direction: column; gap: 2px; }
	.asp-menu a { padding: 10px 14px; border-radius: 10px; }
	.asp-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: 12px; background: none; }

	.asp-page, .asp-comments { padding: 20px; }
	.asp-page-title { font-size: 26px; }
	.asp-content h2:not(.asp-download-title) { font-size: 21px; margin-top: 34px; gap: 11px; }
	.asp-content h3:not(.asp-details-title):not(.asp-shots-heading) { font-size: 18px; }
	.asp-content ul.is-style-cards > li { padding: 13px 15px 13px 48px; }
	.asp-content ol.is-style-steps > li { padding: 14px 15px 14px 54px; }
	.asp-content blockquote { padding: 18px 18px 18px 52px; }
	.asp-toc { padding: 14px 15px; }
	.asp-toc a { font-size: 13.5px; }
	.asp-content .alignwide,
	.asp-content .alignfull { margin-left: -20px; margin-right: -20px; max-width: calc(100% + 40px); }

	.asp-card { flex-direction: column; }
	.asp-card-thumb img { width: 100%; }

	.asp-download-head { padding: 18px; align-items: flex-start; }
	.asp-download-headings { flex: 1 1 140px; }
	.asp-download-icon { width: 66px; height: 66px; border-radius: 17px; }
	.asp-download-title { font-size: 21px; }
	.asp-download-actions { padding: 16px 18px; }
	.asp-download-actions .asp-btn { flex: 1 1 100%; }
	.asp-details th { width: 44%; }
	.asp-details th, .asp-details td { padding: 10px 16px; }
	.asp-details-title, .asp-shots-heading, .asp-download-note { padding-left: 18px; padding-right: 18px; }
	.asp-shots { padding: 12px 18px 16px; }
	.asp-shot img { height: 200px; }

	.asp-lightbox { padding: 66px 12px; }
	.asp-lightbox-prev { left: 10px; }
	.asp-lightbox-next { right: 10px; }
}

@media (max-width: 420px) {
	.asp-download-icon { width: 58px; height: 58px; border-radius: 15px; }
	.asp-download-title { font-size: 19px; }
	.asp-page-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.asp-btn:hover, .asp-shot:hover, .asp-card:hover, .asp-to-top:hover { transform: none; }
}

@media print {
	.site-header, .site-footer, .asp-to-top, .asp-jump, .asp-shots { display: none; }
	body { background: #fff; }
	.asp-page { border: 0; box-shadow: none; padding: 0; }
	.asp-download-head { background: none !important; color: #000; }
	.asp-download-title, .asp-download-tagline { color: #000; }
}