.yf-course-player-scroll-hint {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	max-width: min(320px, 45vw);
	margin-right: 12px;
	text-align: right;
}

.yf-course-player-scroll-hint.is-visible {
	display: flex;
}

.yf-course-player-scroll-hint__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: #4d5e6f;
}

.yf-course-player-scroll-hint__goto {
	border: 0;
	background: transparent;
	color: var(--accent-100, #195cff);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yf-course-player-scroll-hint__goto:hover,
.yf-course-player-scroll-hint__goto:focus {
	opacity: 0.85;
	outline: none;
}

.masterstudy-course-player-navigation_dark-mode .yf-course-player-scroll-hint__text {
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
	.yf-course-player-scroll-hint {
		display: none;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 58px;
		max-width: none;
		margin: 0;
		padding: 10px 12px;
		background: #fff;
		border: 1px solid #dbe0e9;
		border-radius: 8px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		text-align: left;
		z-index: 8;
	}

	.yf-course-player-scroll-hint.is-visible {
		display: flex;
	}

	.masterstudy-course-player-navigation_dark-mode + .yf-course-player-scroll-hint,
	.masterstudy-course-player-content_dark-mode .yf-course-player-scroll-hint {
		background: #2d2d2d;
		border-color: rgba(255, 255, 255, 0.1);
	}
}