:root{
    --sz: 40px;           /* размер стрелки */
    --clr: #00c853;       /* зелёный цвет */
    --blink-ms: 1500ms;    /* скорость мигания */
}

/* Общие стили/анимация */
.arrow, .ascii {
    width: var(--sz);
    height: var(--sz);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color: var(--clr);
    display: flex;          /* горизонтальное выравнивание */
   /* отступ слева     margin-left: 100px;   */
    flex-wrap: wrap;        /* чтобы на узких экранах переносились */
    align-items: center;    /* выравнивание по вертикали */
}
.blink {
    animation: blink var(--blink-ms) steps(1,end) infinite;
}
@keyframes blink { 50%{ opacity:0; } }

/* SVG-стрелки (чёткие и «жирные») */
.svg { width: 100%; height: 100%; }
.stroke { stroke: currentColor; stroke-width: 12; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Символьные стрелки на базе -> и т.п. */
.ascii {
    font: 900 calc(var(--sz) * 0.62)/1 "Courier New", ui-monospace, Menlo, Consolas, monospace;
    /* подгоняем межбуквенный интервал, чтобы влезало в 50px */
    letter-spacing: -0.08em;
    user-select: none;
}

/* Опционально: уважать системную настройку «уменьшить движения» */
@media (prefers-reduced-motion: reduce) {
    .blink { animation: none; }
}