header {
    font-family: -system-ui, sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    display: grid;
    place-items: center;
    background-color: purple;
    color: white;
    font-weight: bold
}

#map {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0
}

dialog#cards {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
    position: relative;

    & tracker-card {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 1rem;
        transform: translateY(100%);
        transition: transform 500ms;
        will-change: transform;
    }

    &[open] {
        transform: none;
        opacity: 1;

        & tracker-card {
            transform: none;

            @starting-style {
                transform: translateY(100%);
            }
        }
    }
}