.avl-library,
.avl-library * {
	box-sizing: border-box;
}

.avl-library {
	--avl-primary: #13395e;
	--avl-primary-dark: #1d5077;
	--avl-ink: #12192b;
	--avl-muted: #6f7687;
	--avl-border: #e7e9ef;
	--avl-surface: #ffffff;
	width: min(1380px, calc(100% - 32px));
	margin: 0 auto;
	color: var(--avl-ink);
	font-family: inherit;
}

.avl-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
	align-items: center;
	gap: 32px;
	min-height: 330px;
	padding: clamp(44px, 7vw, 80px) clamp(24px, 7vw, 88px);
	overflow: hidden;
	border-radius: 24px;
	color: #fff;
	background:
		radial-gradient(circle at 12% 15%, rgba(101, 71, 245, 0.45), transparent 30%),
		radial-gradient(circle at 82% 100%, rgba(75, 124, 255, 0.18), transparent 34%),
		linear-gradient(125deg, #0d1425 0%, #121c36 52%, #0b1324 100%);
	background: radial-gradient(circle at 12% 15%, rgb(178 140 91 / 38%), transparent 30%), radial-gradient(circle at 82% 100%, rgba(75, 124, 255, 0.18), transparent 34%), linear-gradient(125deg, #0d1425 0%, #121c36 52%, #0b1324 100%) !important;
}

.avl-hero::before,
.avl-hero::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

.avl-hero::before {
	inset: 0;
	opacity: 0.3;
	background-image:
		linear-gradient(115deg, transparent 0 64%, rgba(255,255,255,.08) 64.2%, transparent 64.5%),
		linear-gradient(115deg, transparent 0 73%, rgba(255,255,255,.05) 73.2%, transparent 73.5%);
}

.avl-hero::after {
	width: 220px;
	height: 220px;
	inset-inline-end: -90px;
	bottom: -110px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 50%;
	box-shadow: 0 0 0 36px rgba(255,255,255,.025), 0 0 0 72px rgba(255,255,255,.018);
}

.avl-hero__content,
.avl-hero__art {
	position: relative;
	z-index: 1;
}

.avl-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	margin-bottom: 14px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	color: #d9d3ff;
	background: rgba(255,255,255,.07);
	font-size: 13px;
	font-weight: 700;
}

.avl-hero h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.03em;
}

.avl-hero p {
	max-width: 670px;
	margin: 18px 0 0;
	color: #c8cedb;
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.9;
}

.avl-hero__art {
	min-height: 210px;
}

.avl-hero__screen {
	position: absolute;
	inset-inline-end: 35px;
	top: 5px;
	display: grid;
	place-items: center;
	width: 230px;
	height: 160px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 24px;
	background: linear-gradient(145deg, #202b46, #10182b);
	box-shadow: 0 25px 55px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.08);
	transform: rotate(-3deg);
}

.avl-hero__screen::before {
	content: '•••';
	position: absolute;
	top: 9px;
	inset-inline-start: 15px;
	color: #8f98ad;
	letter-spacing: 3px;
}

.avl-play-shape {
	width: 0;
	height: 0;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
	border-inline-start: 44px solid #8b6cff;
	filter: drop-shadow(0 8px 12px rgba(101,71,245,.4));
}

.avl-hero__clapper {
	position: absolute;
	inset-inline-end: 0;
	bottom: 0;
	width: 118px;
	height: 84px;
	border-radius: 8px 8px 16px 16px;
	background: repeating-linear-gradient(135deg, #f3f5fb 0 14px, #20283b 14px 28px);
	box-shadow: 0 22px 38px rgba(0,0,0,.28);
	transform: rotate(9deg);
}

.avl-hero__clapper::after {
	content: '';
	position: absolute;
	inset: 19px 0 0;
	border-radius: 4px 4px 15px 15px;
	background: #273047;
}

.avl-content {
	padding: clamp(36px, 5vw, 62px) 0 10px;
}

.avl-content__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.avl-content__kicker {
	display: block;
	margin-bottom: 4px;
	color: var(--avl-primary);
	font-size: 13px;
	font-weight: 800;
}

.avl-content__heading h3 {
	margin: 0;
	color: var(--avl-ink);
	font-size: clamp(25px, 3vw, 34px);
	font-weight: 800;
}

.avl-count {
	padding: 7px 12px;
	border-radius: 999px;
	color: #555e70;
	background: #f4f5f8;
	font-size: 13px;
	font-weight: 700;
}

.avl-grid {
	display: grid;
	grid-template-columns: repeat(var(--avl-columns), minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 26px);
}

.avl-card {
	min-width: 0;
}

.avl-card__button {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--avl-border);
	border-radius: 17px;
	overflow: hidden;
	color: inherit;
	background: var(--avl-surface);
	box-shadow: 0 9px 30px rgba(25, 31, 45, 0.055);
	cursor: pointer;
	font: inherit;
	text-align: right;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.avl-card__button:hover,
.avl-card__button:focus-visible {
	transform: translateY(-6px);
	border-color: rgba(101,71,245,.35);
	box-shadow: 0 18px 42px rgba(29, 34, 50, 0.12);
	outline: none;
}

.avl-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #131b30;
}

.avl-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.avl-card__button:hover .avl-card__media img {
	transform: scale(1.045);
}

.avl-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8,12,22,.2), transparent 55%);
}

.avl-card__placeholder {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: rgba(255,255,255,.86);
	background:
		linear-gradient(135deg, rgba(101,71,245,.55), rgba(53,70,125,.18)),
		linear-gradient(135deg, #111a31, #1f2b4a);
}

.avl-card__placeholder svg {
	position: relative;
	z-index: 1;
	width: 62px;
	height: 62px;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

.avl-placeholder__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
}

.avl-placeholder__orb--one {
	width: 140px;
	height: 140px;
	inset-inline-start: -40px;
	top: -45px;
	background: rgba(125, 92, 255, .55);
}

.avl-placeholder__orb--two {
	width: 120px;
	height: 120px;
	inset-inline-end: -25px;
	bottom: -50px;
	background: rgba(66, 155, 255, .28);
}

.avl-card__play {
	position: absolute;
	z-index: 2;
	inset: 50% auto auto 50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--avl-primary), var(--avl-primary-dark));
	box-shadow: 0 12px 24px rgba(54,32,174,.36);
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}

.avl-card__button:hover .avl-card__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.avl-card__play svg {
	width: 22px;
	height: 22px;
	margin-left: 2px;
}

.avl-card h4 {
	min-height: 70px;
	margin: 0;
	padding: 18px 18px 20px;
	color: var(--avl-ink);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.7;
}

.avl-pagination {
	margin-top: 36px;
}

.avl-pagination .page-numbers {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 0;
}

.avl-pagination a,
.avl-pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 11px;
	border: 1px solid var(--avl-border);
	border-radius: 10px;
	color: #555d6c;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.avl-pagination .current {
	border-color: var(--avl-primary);
	color: #fff;
	background: var(--avl-primary);
}

.avl-empty {
	padding: 70px 22px;
	border: 1px dashed #d9dce5;
	border-radius: 18px;
	text-align: center;
	background: #fafbfc;
}

.avl-empty__icon {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin: 0 auto 18px;
	border-radius: 24px;
	color: var(--avl-primary);
	background: #efecff;
}

.avl-empty__icon svg {
	width: 44px;
	height: 44px;
}

.avl-empty h3 {
	margin: 0 0 7px;
	font-size: 23px;
}

.avl-empty p {
	margin: 0;
	color: var(--avl-muted);
}

.avl-modal[hidden] {
	display: none !important;
}

.avl-modal {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
}

.avl-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 9, 18, .84);
	backdrop-filter: blur(8px);
}

.avl-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(1080px, 96vw);
	max-height: 92vh;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	background: #0c1220;
	box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.avl-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 18px;
	color: #fff;
	background: #121a2b;
}

.avl-modal__header h3 {
	margin: 0;
	color: #fff;
	font-size: 17px;
	line-height: 1.5;
}

.avl-modal__close {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(255,255,255,.09);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
}

.avl-modal__close:hover,
.avl-modal__close:focus-visible {
	background: rgba(255,255,255,.18);
	outline: 2px solid rgba(255,255,255,.75);
	outline-offset: 2px;
}

.avl-modal__player {
	aspect-ratio: 16 / 9;
	background: #000;
}

.avl-modal__player video {
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
}

html.avl-modal-open,
html.avl-modal-open body {
	overflow: hidden;
}

@media (max-width: 1100px) {
	.avl-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.avl-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.avl-hero__art {
		display: none;
	}

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

@media (max-width: 560px) {
	.avl-hero {
		padding: 38px 22px;
		border-radius: 18px;
	}

	.avl-content__heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.avl-grid {
		grid-template-columns: 1fr;
	}

	.avl-card h4 {
		min-height: 0;
	}

	.avl-modal {
		padding: 10px;
	}

	.avl-modal__dialog {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.avl-card__button,
	.avl-card__media img,
	.avl-card__play {
		transition: none;
	}
}
.avl-hero__art {
    display: none !important;
}