<style>
/* ===== Layout ===== */
#content {
	overflow-x: hidden;
}

#content h1 {
	border-bottom: none !important;
}

.academy-section {
	margin: 3rem 0;
}

.section-narrow {
	margin: 2rem 0;
}

/* ===== Grid System ===== */
.card-grid {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2rem;
	margin-top: 1.5rem;
}

.card-grid-1 {
	grid-template-columns: 1fr;
	max-width: 50%;
}

.card-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.card-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.card-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Section 1: User Guide (75%) + Quickstart (25%) */
.card-grid-hero {
	grid-template-columns: 2fr 3fr;
}

/* Section spacing */
.card-grid-hero+.card-grid-2 {
	margin-top: 4rem;
}

.card-grid-1+.card-grid-2 {
	margin-top: 4rem;
}

.card-grid-compact {
	gap: 1rem;
}

/* ===== Large Card ===== */
.card-large {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 2rem;
	text-decoration: none;
	color: inherit;
	display: flex;
	align-items: center;
	min-height: 180px;
	box-shadow: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-large:hover {
	box-shadow: 0 4px 12px rgba(25, 49, 74, 0.1);
	transform: translateY(-1px);
}

.card-large .card-content {
	position: relative;
	z-index: 1;
}

.card-large .card-title {
	font-size: 2em;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #2d3748;
}

.card-large:hover .card-title {
	color: #f40;
	transition: color 0.25s;
}

.card-large .card-description {
	font-size: 1.1em;
	line-height: 1.6;
	color: #4a5568;
}

/* Narrow variant for Quickstart */
.card-large.card-narrow {
	padding: 1.5rem;
	min-height: 0;
}

.card-large.card-narrow .card-description {
	font-size: 1em;
}

/* ===== Card Background Images ===== */
.card-large[class*="card-"] {
	background-repeat: no-repeat;
}

.card-quickstart {
	background: url(/img/academy-new/quickstart-bg.png) -55px 100% / 1000px 273px no-repeat,
		linear-gradient(108deg, #447dc2, #b4cfe9);
	background-origin: border-box;
	position: relative;
	overflow: visible;
}

.card-quickstart::after {
	content: '';
	position: absolute;
	left: -55px;
	bottom: 0;
	width: 728px;
	height: 273px;
	background: url(/img/academy-new/quickstart-rocket.png) 0 100% / 1000px 273px no-repeat;
	pointer-events: none;
}

.card-quickstart .card-content {
	top: -20px;
}

.card-quickstart .card-title,
.card-quickstart .card-description {
	color: #fff;
	text-shadow: 0 0 4px #447dc2, 0 0 4px #447dc2;
}

.card-userguide {
	background: url(/img/academy-new/userguide-bg.png) 0 100% / 850px 273px no-repeat,
		linear-gradient(88deg, #447dc2, #b4cfe9);
	background-origin: border-box;
}

.card-userguide .card-content {
	top: -20px;
}

.card-userguide .card-title,
.card-userguide .card-description {
	color: #fff;
	text-shadow: 0 0 4px #447dc2, 0 0 4px #447dc2;
}

/* ===== Medium Card ===== */
.card-medium {
	background: transparent;
	border: none;
	border-radius: 10px;
	padding: 0 0 0 1rem;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 120px;
}

.card-medium .card-image {
	width: 110px;
	height: 110px;
	flex-shrink: 0;
	pointer-events: none;
	z-index: 2;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 110px auto;
}

.card-examples .card-image { background-image: url(/img/academy-new/examples.png); }
.card-tutorials .card-image { background-image: url(/img/academy-new/tutorials.png); }
.card-tips .card-image { background-image: url(/img/academy-new/tips.png); }
.card-videos .card-image { background-image: url(/img/academy-new/videos.png); }

.card-medium .card-content {
	position: relative;
	z-index: 1;
}

.card-medium .card-title {
	font-size: 1.5em;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: #2d3748;
}

.card-medium:hover .card-title {
	color: #f40;
	transition: color 0.25s;
}

.card-inline-link {
	position: relative;
	z-index: 1;
	color: #f40;
	cursor: pointer;
}

.card-inline-link:hover {
	text-decoration: underline;
}

.card-medium .card-description {
	font-size: 1.1em;
	line-height: 1.5;
	color: #4a5568;
}

/* ===== Vertical Card (image on top, text below) ===== */
.card-large.card-vertical {
	flex-direction: column;
	padding: 0;
	overflow: visible;
	position: relative;
}

.card-vertical .card-image-area {
	width: 100%;
	height: 209px;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	position: relative;
}

.card-vertical .card-content {
	padding: 1.5rem 2rem;
}

/* Workshops */
.card-workshops .card-image-area {
	background: url(/img/academy-new/educational-workshops-bg.png) center center / 850px 209px no-repeat,
		linear-gradient(108deg, #447dc2, #b4cfe9);
}

.card-workshops::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 209px;
	background: url(/img/academy-new/workshops-monitor.png) center center / 257px 189px no-repeat;
	pointer-events: none;
}

/* Educational Institutions */
.card-educational .card-image-area {
	background: url(/img/academy-new/educational-workshops-bg.png) center center / 850px 209px no-repeat,
		linear-gradient(108deg, #447dc2, #b4cfe9);
}

.card-educational::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 209px;
	background: url(/img/academy-new/educational-diploma.png) center calc(50% + 3px) / 280px 188px no-repeat;
	pointer-events: none;
}

/* ===== Small Card ===== */
.card-small {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem;
	background: rgba(169, 222, 255, 0.25);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	text-align: left;
}

.card-small .card-content {
	flex: 1;
	position: relative;
	z-index: 1;
}

.card-small .card-title {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
	font-size: 1rem;
}

.card-small:hover .card-title {
	color: #f40;
	transition: color 0.25s;
}

.card-small .card-description {
	display: block;
	font-size: 0.9em;
	line-height: 1.5;
}

/* Small card icons */
.card-small .card-icon {
	width: 145px;
	height: 145px;
	flex-shrink: 0;
	opacity: 0.7;
	color: white;
	transform: rotate(20deg) perspective(300px) rotateY(30deg);
	position: absolute;
	left: -40px;
	top: -15px;
	z-index: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.card-small:hover .card-icon {
	opacity: 0.9;
	transform: rotate(20deg) perspective(300px) rotateY(20deg) scale(1.2) translateX(8px);
}

/* ===== Tiny Card ===== */
.card-tiny {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: rgba(169, 222, 255, 0.25);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.card-tiny .card-content {
	flex: 1;
	position: relative;
	z-index: 1;
}
.card-tiny .card-title {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
}

.card-tiny:hover .card-title {
	color: #f40;
	transition: color 0.25s;
}

.card-tiny .card-icon {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	opacity: 0.7;
	color: white;
	transform: rotate(20deg) perspective(300px) rotateY(30deg);
	position: absolute;
	left: -30px;
	top: -10px;
	z-index: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.card-tiny:hover .card-icon {
	opacity: 0.9;
	transform: rotate(20deg) perspective(300px) rotateY(20deg) scale(1.2) translateX(8px);
}

/* ===== Icon Masks ===== */
.card-icon.icon-wrench {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>');
}

.card-icon.icon-help {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.6 15.3c0-.95.18-1.72.55-2.31.37-.59.98-1.18 1.84-1.77.68-.47 1.17-.9 1.46-1.29.29-.39.44-.87.44-1.44 0-.73-.25-1.3-.76-1.72-.51-.42-1.18-.63-2.02-.63-.9 0-1.58.24-2.04.73-.46.49-.75 1.08-.88 1.77L6.6 7.56c.25-1.2.86-2.16 1.83-2.88.97-.72 2.22-1.08 3.74-1.08 1.7 0 3.04.42 4.02 1.27.98.85 1.47 2 1.47 3.45 0 .83-.19 1.54-.56 2.13-.37.59-1.02 1.21-1.94 1.86-.76.53-1.27 1.01-1.54 1.43-.27.42-.4.94-.4 1.56h-2.62Zm1.32 5.25c-.54 0-1-.18-1.38-.55-.38-.37-.57-.82-.57-1.35s.19-.98.57-1.35c.38-.37.84-.55 1.38-.55.56 0 1.03.18 1.4.55.37.37.56.82.56 1.35s-.19.98-.56 1.35c-.37.37-.84.55-1.4.55Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.6 15.3c0-.95.18-1.72.55-2.31.37-.59.98-1.18 1.84-1.77.68-.47 1.17-.9 1.46-1.29.29-.39.44-.87.44-1.44 0-.73-.25-1.3-.76-1.72-.51-.42-1.18-.63-2.02-.63-.9 0-1.58.24-2.04.73-.46.49-.75 1.08-.88 1.77L6.6 7.56c.25-1.2.86-2.16 1.83-2.88.97-.72 2.22-1.08 3.74-1.08 1.7 0 3.04.42 4.02 1.27.98.85 1.47 2 1.47 3.45 0 .83-.19 1.54-.56 2.13-.37.59-1.02 1.21-1.94 1.86-.76.53-1.27 1.01-1.54 1.43-.27.42-.4.94-.4 1.56h-2.62Zm1.32 5.25c-.54 0-1-.18-1.38-.55-.38-.37-.57-.82-.57-1.35s.19-.98.57-1.35c.38-.37.84-.55 1.38-.55.56 0 1.03.18 1.4.55.37.37.56.82.56 1.35s-.19.98-.56 1.35c-.37.37-.84.55-1.4.55Z"/></svg>');
}

.card-icon.icon-users {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>');
}

.card-icon.icon-keyboard {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h8"/><path d="M8 9h2"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h8"/><path d="M8 9h2"/></svg>');
}

.card-icon.icon-list {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>');
}

.card-icon.icon-map {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>');
}

.card-icon.icon-book {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>');
}

.card-icon.icon-github {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>');
}

.card-icon.icon-grid {
	-webkit-mask-image: url(/img/core/icon-grid.svg);
	mask-image: url(/img/core/icon-grid.svg);
}

/* ===== Academy link sections ===== */
.academy-link-section {
	--academy-card-height: 104px;
	--academy-card-gap: 1.05rem;
	--academy-card-padding: 1rem 3.85rem 1rem 1.25rem;
	--academy-content-offset: 0;
	--academy-icon-size: 34px;
	--academy-icon-color: #2f7ee8;
	margin: 1.55rem 0 2rem;
}

.academy-link-section h1 {
	margin-bottom: 0.35rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.2;
}

.academy-link-section > p {
	margin: 0 0 1.25rem;
	color: #111;
}

.academy-link-section .card-grid {
	gap: 1.25rem;
	margin-top: 0;
	margin-bottom: 0;
}

.academy-link-section .card-small,
.academy-link-section .card-tiny {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--academy-card-height);
	min-height: 0;
	gap: var(--academy-card-gap);
	padding: var(--academy-card-padding);
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #dce5ee;
	border-radius: 8px;
	box-shadow: none;
	color: #17243a;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.academy-link-section .card-small:hover,
.academy-link-section .card-tiny:hover {
	border-color: #c7d7e6;
	box-shadow: 0 4px 12px rgba(25, 49, 74, 0.1);
	transform: translateY(-1px);
}

.academy-link-section .card-small:hover .link-arrow,
.academy-link-section .card-tiny:hover .link-arrow {
	color: #f40;
}

.academy-link-section .card-content {
	position: static;
	z-index: 1;
	flex: 1;
	align-self: stretch;
	min-width: 0;
	padding-top: var(--academy-content-offset);
	box-sizing: border-box;
}

.academy-link-section .card-title {
	display: block;
	margin: 0 0 0.2rem;
	color: #17243a;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.academy-link-section .card-description {
	display: block;
	color: #3f516b;
	font-size: 0.86rem;
	line-height: 1.35;
}

.academy-link-section .link-arrow {
	position: absolute;
	right: 1.55rem;
	top: 50%;
	margin: 0;
	color: #2f7ee8;
	font-size: 1.1rem;
	transform: translateY(-50%);
}

.academy-link-section .card-icon {
	position: relative;
	left: auto;
	top: auto;
	z-index: 1;
	flex: 0 0 auto;
	display: block;
	width: var(--academy-icon-size);
	height: var(--academy-icon-size);
	margin: 0;
	background-color: var(--academy-icon-color);
	opacity: 1;
	transform: none;
	transition: none;
}

.academy-link-section .card-small:hover .card-icon,
.academy-link-section .card-tiny:hover .card-icon {
	opacity: 1;
	transform: none;
}

.academy-support-section {
	--academy-content-offset: 6px;
	--academy-support-badge-size: 58px;
	--academy-support-icon-size: 30px;
	--academy-support-icon-inset: 14px;
}

.academy-support-section .card-small::before {
	content: "";
	flex: 0 0 var(--academy-support-badge-size);
	width: var(--academy-support-badge-size);
	height: var(--academy-support-badge-size);
	border-radius: 50%;
	background: linear-gradient(135deg, #72b9ff, #316dd6);
	box-shadow: inset 0 -4px 8px rgba(20, 64, 128, 0.18);
}

.academy-support-section .card-icon {
	position: absolute;
	left: calc(1.25rem + var(--academy-support-icon-inset));
	top: 50%;
	width: var(--academy-support-icon-size);
	height: var(--academy-support-icon-size);
	background-color: #fff;
	transform: translateY(-50%);
}

.academy-support-section .card-small:hover .card-icon {
	transform: translateY(-50%);
}

.academy-reference-section {
	--academy-card-height: 98px;
	--academy-card-padding: 1rem 3.85rem 1rem 1.5rem;
	--academy-content-offset: 4px;
}

.academy-runtimes-section {
	--academy-card-height: 62px;
	--academy-card-gap: 0.8rem;
	--academy-card-padding: 0.85rem 1.15rem;
}

.academy-runtimes-panel {
	padding: 0.9rem;
	background: #eef5fb;
	border: 1px solid #dce7f0;
	border-radius: 7px;
}

.academy-runtimes-section .card-grid {
	gap: 1.35rem;
}

.academy-runtimes-section .card-tiny {
	justify-content: center;
	text-align: center;
}

.academy-runtimes-section .card-tiny .card-content {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	padding-top: 0;
}

.academy-runtimes-section .card-tiny .card-title {
	margin: 0;
	font-size: 0.98rem;
}

.academy-runtimes-section .card-tiny .link-arrow {
	display: none;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {

	.card-quickstart {
		background-position: -100px 100%, 0 0;
	}

	.card-quickstart::after {
		left: -100px;
	}
}

@media (max-width: 900px) {

	.card-quickstart {
		background-position: 0 100%, 0 0;
	}

	.card-quickstart::after {
		left: 0;
	}

	.card-grid-3,
	.card-grid-4,
	.card-grid-hero {
		grid-template-columns: 1fr;
	}

	.card-large.card-narrow {
		min-height: 180px;
	}
}

@media (max-width: 700px) {

	.card-grid-2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 500px) {

	.card-quickstart {
		background-position: -155px 100%, 0 0;
	}

	.card-quickstart::after {
		left: -155px;
	}
}
</style>

<h1>$academyTitle$</h1>
<p>$academyText$</p>
<!-- Section 1: Quickstart + User Guide -->
<div class="academy-section">
	<div class="card-grid card-grid-hero">
		<a href="/spine-getting-started" class="card-large card-quickstart">
			<div class="card-content">
				<div class="card-title">$academyQuickstartTitle$</div>
				<div class="card-description">$academyQuickstartText$</div>
			</div>
		</a>
		<a href="/spine-user-guide" class="card-large card-narrow card-userguide">
			<div class="card-content">
				<div class="card-title">$userGuide$</div>
				<div class="card-description">$academyEditorDocsText$</div>
			</div>
		</a>
	</div>
	<!-- Section 2: Examples, Tutorials, Tips, Videos -->
	<div class="section-narrow">
		<div class="card-grid card-grid-2">
			<a href="/spine-examples" class="card-medium card-examples">
				<div class="card-image"></div>
				<div class="card-content">
					<div class="card-title">$academyExamplesTitle$</div>
					<div class="card-description">$academyExamplesText$</div>
				</div>
			</a>
			<a href="https://esotericsoftware.com/forum/t/Tutorials" class="card-medium card-tutorials">
				<div class="card-image"></div>
				<div class="card-content">
					<div class="card-title">$academyTutorialsTitle$</div>
					<div class="card-description">$academyTutorialsText$</div>
				</div>
			</a>
		</div>
		<div class="card-grid card-grid-2">
			<a href="/spine-tips" class="card-medium card-tips">
				<div class="card-image"></div>
				<div class="card-content">
					<div class="card-title">$academyTipsTitle$</div>
					<div class="card-description">$academyTipsText$</div>
				</div>
			</a>
			<a href="/spine-videos" class="card-medium card-videos">
				<div class="card-image"></div>
				<div class="card-content">
					<div class="card-title">$academyVideosTitle$</div>
					<div class="card-description">$academyVideosStreamsText$</div>
				</div>
			</a>
		</div>
	</div>
	<!-- Section 3: Workshops + Educational Institutions -->
	<div class="card-grid card-grid-2">
		<a href="/spine-workshops" class="card-large card-vertical card-workshops">
			<div class="card-image-area"></div>
			<div class="card-content">
				<div class="card-title">$academyWorkshopsTitle$</div>
				<div class="card-description">$academyWorkshopsText$</div>
			</div>
		</a>
		<a href="/spine-institutions" class="card-large card-vertical card-educational">
			<div class="card-image-area"></div>
			<div class="card-content">
				<div class="card-title">$academyEdusTitle$</div>
				<div class="card-description">$academyEdusText$</div>
			</div>
		</a>
	</div>
</div>

<!-- Section 4: Troubleshooting, FAQ, Forum -->
<div class="academy-section academy-link-section academy-support-section">
	<h1>$contact$</h1>
	<p>$academyHelpText$</p>
	<div class="card-grid card-grid-3">
		<a href="/spine-troubleshooting" class="card-small">
			<span class="card-icon icon-wrench"></span>
			<span class="card-content">
				<span class="card-title">$academyTroubleshootingTitle$<i class="iconfont-arrow-right2 link-arrow"></i></span>
				<span class="card-description">$academyTroubleshootingText$</span>
			</span>
		</a>
		<a href="/support#Spine-FAQ" class="card-small">
			<span class="card-icon icon-help"></span>
			<span class="card-content">
				<span class="card-title">$faq$<i class="iconfont-arrow-right2 link-arrow"></i></span>
				<span class="card-description">$academyFaqText$</span>
			</span>
		</a>
		<a href="http://esotericsoftware.com/forum" class="card-small">
			<span class="card-icon icon-users"></span>
			<span class="card-content">
				<span class="card-title">$forum$<i class="iconfont-arrow-right2 link-arrow"></i></span>
				<span class="card-description">$academyForumText$</span>
			</span>
		</a>
	</div>
</div>
<!-- Section 5: Cheat Sheet, Changelog, Roadmap -->
<div class="academy-section academy-link-section academy-reference-section">
	<h1>$academyReferenceTitle$</h1>
	<p>$academyReferenceText$</p>
	<div class="card-grid card-grid-3">
		<a href="/spine-cheat-sheet" class="card-small">
			<span class="card-icon icon-keyboard"></span>
			<span class="card-content">
				<span class="card-title">$academyCheatSheetTitle$<i class="iconfont-arrow-right2 link-arrow"></i></span>
				<span class="card-description">$academyCheatSheetText$</span>
			</span>
		</a>
		<a href="/spine-changelog" class="card-small">
			<span class="card-icon icon-list"></span>
			<span class="card-content">
				<span class="card-title">$academyChangelogTitle$<i class="iconfont-arrow-right2 link-arrow"></i></span>
				<span class="card-description">$academyChangelogText$</span>
			</span>
		</a>
		<a href="/spine-roadmap" class="card-small">
			<span class="card-icon icon-map"></span>
			<span class="card-content">
				<span class="card-title">$academyIssuesTitle$<i class="iconfont-arrow-right2 link-arrow"></i></span>
				<span class="card-description">$academyIssuesText$</span>
			</span>
		</a>
	</div>
</div>
<!-- Section 6: Runtimes -->
<div class="academy-section academy-link-section academy-runtimes-section">
	<h1>$runtimes$</h1>
	<p>$academyRuntimesText$</p>
	<div class="academy-runtimes-panel">
	<div class="card-grid card-grid-4 card-grid-compact">
		<a href="/spine-runtimes" class="card-tiny">
			<span class="card-icon icon-book"></span>
			<span class="card-content">
				<span class="card-title">$runtimes$<i class="iconfont-arrow-right2 link-arrow"></i></span>
			</span>
		</a>
		<a href="/spine-runtimes-guide" class="card-tiny">
			<span class="card-icon icon-book"></span>
			<span class="card-content">
				<span class="card-title">$runtimesGuide$<i class="iconfont-arrow-right2 link-arrow"></i></span>
			</span>
		</a>
		<a href="https://github.com/esotericsoftware/spine-runtimes" class="card-tiny">
			<span class="card-icon icon-github"></span>
			<span class="card-content">
				<span class="card-title">$runtimesGitHub$<i class="iconfont-arrow-right2 link-arrow"></i></span>
			</span>
		</a>
		<a href="https://esotericsoftware.com/spine-skeleton-viewer" class="card-tiny">
			<span class="card-icon icon-grid"></span>
			<span class="card-content">
				<span class="card-title">$academySkeletonViewerTitle$<i class="iconfont-arrow-right2 link-arrow"></i></span>
			</span>
		</a>
	</div>
	</div>
</div>

<script>
document.querySelectorAll('.card-inline-link').forEach(el => {
	el.addEventListener('click', e => {
		e.preventDefault();
		e.stopPropagation();
		window.location.href = el.dataset.href;
	});
});
</script>
