.cn-note,
.cn-warn,
.cn-source {
    box-sizing: border-box;
    margin-block: 1.5em;
    padding: 1em 1.25em;
    color: var(--cn-ink, #333333);
    background: var(--cn-surface, #ffffff);
    border: 1px solid var(--cn-border, #d8d3cc);
    border-left: 4px solid var(--cn-accent, #d54b2a);
    border-radius: var(--cn-radius, 6px);
}

.cn-note {
    background: var(--cn-note-bg, #fff7f3);
}

.cn-warn {
    background: var(--cn-warn-bg, #fff8e1);
    border-left-color: var(--cn-warn, #b7791f);
}

.cn-source {
    color: var(--cn-muted, #5d6670);
    background: var(--cn-source-bg, #f5f6f7);
    border-left-color: var(--cn-source, #5d6670);
    font-size: 0.9em;
    line-height: 1.7;
}

.cn-note > :first-child,
.cn-warn > :first-child,
.cn-source > :first-child {
    margin-top: 0;
}

.cn-note > :last-child,
.cn-warn > :last-child,
.cn-source > :last-child {
    margin-bottom: 0;
}