.panel h3 {
	margin: 0;
	font-size: 12px;
	color: #00ffcc;
}

#helpPanel {
    background: #151821;
    padding: 12px 12px;
    border-radius: 4px;

    font-size: 12px;
    color: #dadada;
	font-family: monospace;

    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 180px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.help-section, .warning-section {
    flex: 1 1 300px; /* Let them sit side-by-side, wrapping automatically if screen space narrows */
}

#helpPanel h3 {
    margin-top: 0;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.help-section h3 {
    color: #00ffcc; /* Cyan signature style */
}

.warning-section h3 {
    color: #ffb300; /* Caution amber style */
}

.help-list, .warning-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-list li, .warning-list li {
    line-height: 1.2;
}

/* Warning block code tag style */
.warning-list .warn-highlight {
    color: #fff;
    background: #211b14;
    padding: 1px 4px;
    border: 1px solid #4a3b1a;
    border-radius: 2px;
}

.warning-list em {
    color: #ffb300;
    font-style: normal;
    font-weight: bold;
}

.marker-yellow {
    color: #ffd700; /* Vibrant DAW gold/yellow */
    background: #2e2709; /* Dark gold tint backdrop */
    padding: 1px 5px;
    border: 1px solid #4a421a;
    border-radius: 2px;
    font-weight: bold;
}

.marker-red {
    color: #ff4a4a; /* Precise warning red */
    background: #290808; /* Dark red tint backdrop */
    padding: 1px 5px;
    border: 1px solid #4a1a1a;
    border-radius: 2px;
    font-weight: bold;
}