h3[data-collapsible="true"] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 30px;
    transition: color 0.2s ease;
}

h3[data-collapsible="true"]:hover {
    color: var(--md-primary-fg-color, #1976d2);
}

h3[data-collapsible="true"]::after {
    content: '▼';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.3s ease;
    color: #666;
}

h3[data-collapsible="true"][data-collapsed="true"]::after {
    transform: translateY(-50%) rotate(-90deg);
}

.auto-collapsible-h3-content {
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    max-height: none;
    opacity: 1;
}

.auto-collapsible-h3-content[data-collapsed="true"] {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}