/* ── Keyframes ── */
	@keyframes svelte-1pepxcq-twinkle {
		0%, 100% { opacity: 0.08; }
		50% { opacity: 0.40; }
	}
	@keyframes svelte-1pepxcq-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
	@keyframes svelte-1pepxcq-gg-pop {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.04); }
	}
	@keyframes svelte-1pepxcq-gg-wiggle {
		0%, 100% { transform: rotate(0deg); }
		25% { transform: rotate(-8deg); }
		75% { transform: rotate(8deg); }
	}
	@keyframes svelte-1pepxcq-gg-shine {
		0% { left: -60%; }
		100% { left: 120%; }
	}
	@keyframes svelte-1pepxcq-gg-underline {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
	@keyframes svelte-1pepxcq-crown-bob {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-4px); }
	}

	/* ── Course card — dynamic colors via CSS variables (per-card, per-category) ── */
	.course-card-vertical.svelte-1pepxcq {
		flex: 0 0 min(272px, 80vw);
		scroll-snap-align: start;
		background: #FFFFFF;
		border-radius: 20px;
		overflow: hidden;
		border: 1.5px solid var(--card-accent-light, rgba(18,181,165,0.18));
		box-shadow: 0 4px 18px rgba(14,42,48,0.08);
		transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		height: 100%;
		text-decoration: none;
	}
	.course-card-vertical.svelte-1pepxcq:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(14,42,48,0.14);
		border-color: var(--card-accent-border, rgba(18,181,165,0.333));
	}

	/* Grid override: cards in grid lose slider sizing */
	.grid.svelte-1pepxcq .course-card-vertical:where(.svelte-1pepxcq),
	.grid-cols-1.svelte-1pepxcq .course-card-vertical:where(.svelte-1pepxcq),
	.grid-cols-2.svelte-1pepxcq .course-card-vertical:where(.svelte-1pepxcq),
	.grid-cols-3.svelte-1pepxcq .course-card-vertical:where(.svelte-1pepxcq) {
		flex: unset;
		scroll-snap-align: unset;
	}

	/* ── Card children using CSS variables ── */
	.card-cat-label.svelte-1pepxcq {
		position: absolute;
		top: 10px;
		left: 10px;
		background: rgba(255,255,255,0.92);
		backdrop-filter: blur(6px);
		border: 1px solid var(--card-accent-border, rgba(18,181,165,0.333));
		border-radius: 8px;
		padding: 3px 8px;
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 0.5px;
		max-width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.card-emoji-icon.svelte-1pepxcq {
		position: absolute;
		bottom: 10px;
		left: 12px;
		width: 34px;
		height: 34px;
		border-radius: 10px;
		background: rgba(255,255,255,0.95);
		backdrop-filter: blur(8px);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		border: 1px solid var(--card-accent-border, rgba(18,181,165,0.333));
		box-shadow: 0 2px 8px rgba(14,42,48,0.12);
	}
	.card-meta-level.svelte-1pepxcq {
		font-size: 10px;
		font-weight: 800;
		background: var(--card-accent-light, rgba(18,181,165,0.094));
		border-radius: 6px;
		padding: 2px 6px;
		border: 1px solid var(--card-accent-border, rgba(18,181,165,0.227));
	}
	.card-title.svelte-1pepxcq {
		font-size: 13px;
		font-weight: 900;
		color: #0E2A30;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 2.8em;
	}