.chord-card {
	background-color: #f9f9f9;
	padding: .3em .6em;
	border: 1px solid #ccc;
	border-radius: 0.5em; /* 8px = 0.5em */
}

div.chord-card { /* For a simple layout */
	text-align: center;
}

 details.chord-card {
	overflow: auto; /*  Forces the container to expand to contain the floated elements. */
	transition: background-color 0.3s ease;
}

details.chord-card[open] {
	background-color: #e9f7ef;
}

.chord-card summary {
	font-weight: bold;
	cursor: pointer;
	display: flex; /* Needed to hide the default marker */
	align-items: center;
	transition: color 0.3s ease;
}

details.chord-card summary::-webkit-details-marker { /* Targets the default marker (usually a triangle. */
	display: none;
}

.chord-card summary::before {
	content: '+';
	margin-right: 0.7em;
	font-size: 1.2em;
	transition: transform 0.3s ease;
}

.chord-card[open] summary::before {
	transform: rotate(45deg);
}

.chord-card__diagram {
	text-align: center;
	margin: calc(0.4em * 2) 0 0;
}
	div.chord-card p {
		text-align: left;
	}

details .chord-card__diagram {
	float: right;
	padding: 0 0 .2em .3em;
}

.chord-card__audio-toggle {
	background: #EEE;
	border: 1px solid #AAA;
	border-radius: 0.5em;
	cursor: pointer;
	font-size: 0.8rem; /* Adjust size as needed */

	padding: .2em .8em;
	height: 2em;
}

.chord-card p {
	margin: 0.4em 0;
	color: #444;
	font-size: .88em;
}