html, body {margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body {background:#fff;color:#000;font-size:18px;line-height: 1.4;font-family: Arial, Helvetica, sans-serif;margin: 1em;}
img{max-width: 100%;height: auto;}
main {max-width: 500px;}
section { margin: 3em 0;}
details {padding: 0.8em 0 0.8em 0;
    border-radius: inherit;}
details:last-child {border-bottom: none;}
summary::-webkit-details-marker {display: none;list-style: none;}
summary h3 {    margin: 0;}
summary {line-height: 1.2;
display: grid;list-style: none;
  cursor: default;
  padding-right: 4em;
  position: relative;
}

/* Серый круг */
summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.5em;
    height: 1.5em;
    background: #000;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

/* Черная стрелка */
summary::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0.5em; /* Позиционируем стрелку внутри круга */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.15rem solid #fff; /* Черная стрелка */
    border-bottom: 0.15rem solid #fff; /* Черная стрелка */
    transform: translateY(-65%) rotate(45deg); /* Поворачиваем стрелку вниз */
    transition: transform 0.2s;
}

/* Стрелка вверх при открытии */
details[open] summary::before {
    transform: translateY(-35%) rotate(-135deg); /* Поворачиваем стрелку вверх */
}