:root {

        font-family: Inter,
   Arial,
   Helvetica,
   sans-serif;

        --bg: #ffffff;

        --text: #253144;

        --muted: #6f7c8f;

        --line: #cdd8e8;

        --blue: #1595aa;

        --pink: #e85280;
}

      * {

        box-sizing: border-box;
}

      body {

        margin: 0;

        background: var(--bg);

        color: var(--text);

        line-height: 1.25;

        min-width: 430px;

        overflow-x: auto;
}

      main {

        width: 430px;

        min-width: 430px;

        margin: 0 auto;

        padding: 24px 14px 34px;
}

      h1 {

        position: absolute;

        width: 1px;

        height: 1px;

        overflow: hidden;

        clip: rect(0,
   0,
   0,
   0);

        white-space: nowrap;
}

      .compare {

        position: relative;

        min-height: 100vh;

        padding-top: 8px;
}

      .ancestor {

        position: relative;

        display: flex;

        justify-content: center;

        margin-bottom: 110px;
}

      .ancestor .card {

        position: relative;

        padding-left: 34px;
}

      .ancestor .card::before {

        content: "";

        position: absolute;

        top: 15px;

        left: 10px;

        width: 14px;

        height: 14px;

        border-radius: 2px;

        background: var(--blue);
}

      .ancestor::after {

        content: "";

        position: absolute;

        left: 50%;

        top: 58px;

        width: 0;

        height: 68px;

        border-left: 2px dashed var(--line);
}

      .ancestor .card::after {

        content: "";

        position: absolute;

        left: 50%;

        top: 92px;

        width: 0;

        height: 18px;

        border-left: 2px dashed var(--line);
}

      .ancestor::before {

        content: "";

        position: absolute;

        left: 46px;

        right: 46px;

        top: 92px;

        border-top: 2px dashed var(--line);
}

      .row {

        position: relative;

        display: grid;

        grid-template-columns: 42px minmax(0,
   1fr) 92px;

        column-gap: 14px;

        min-height: 82px;
}

      .row::before {

        content: "";

        position: absolute;

        top: 22px;

        bottom: -38px;

        left: 21px;

        border-left: 2px dashed var(--line);
}

      .row:last-child::before {

        display: none;
}

      .marker {

        position: relative;

        z-index: 1;

        width: 14px;

        height: 14px;

        margin-top: 14px;

        justify-self: center;

        border-radius: 2px;

        background: var(--blue);
}

      .marker.pink {

        border-radius: 50%;

        background: var(--pink);
}

      .marker.photo {

        width: 26px;

        height: 26px;

        margin-top: 8px;

        overflow: hidden;

        border: 2px solid var(--bg);

        border-radius: 50%;

        background: var(--bg);
}

      .marker.photo img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;
}

      .card {

        align-self: start;

        min-height: 48px;

        padding: 12px 10px;

        background: transparent;
}

      .name {

        margin: 0;

        color: var(--text);

        font-size: 15px;

        font-weight: 800;

        white-space: nowrap;
}

      .date {

        margin: 2px 0 0;

        color: var(--muted);

        font-size: 13px;

        font-weight: 700;

        white-space: nowrap;
}

      .number {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 10px;

        align-self: start;

        margin-top: 14px;

        color: #9aa8ba;

        font-size: 15px;

        font-style: italic;

        font-weight: 700;

        white-space: nowrap;
}

      .number::before {

        content: "";

        display: block;

        width: 42px;

        flex: 0 0 42px;

        border-top: 2px dashed #9aa8ba;
}

      .row.sammi {

        grid-template-columns: 42px minmax(0,
   1fr) 92px;

        min-height: 76px;
}

      .row.sammi .marker.photo {

        width: 54px;

        height: 54px;

        margin-top: 0;

        border-width: 3px;
}

      .person-photo {

        display: block;

        width: 100%;

        height: 100%;

        border-radius: 50%;

        object-fit: cover;

        object-position: center center;
}

      .row.sammi .card {

        padding-top: 8px;
}

      .row.sammi .number {

        margin-top: 16px;
}