.tab {
    flex-grow: 1;
    border: var(--border);
    padding: var(--space-small);
}

.tabLink {
    display: none;
}

.tabLink:not(:checked)+.tab {
    display: none;
}

.tabLinkLabel {
    border: var(--border);
    border-bottom: none;
    background-color: var(--color-page-special);
    padding: var(--space-small);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-large);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
}

.tabLinkLabel[active] {
    color: var(--color-foreground);
    background-color: var(--color-page);
    z-index: 1;
    margin-bottom: -1px;
}

.marker {
    display: block;
    text-align: center;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    padding-top: 0.2rem;
    font-weight: var(--font-weight-large);
    color: white;
    background-color: red;
    pointer-events: all !important;
    cursor: pointer;
    z-index: 10;
    clip-path: polygon(90% 0, 90% 80%, 70% 80%, 50% 100%, 30% 80%, 10% 80%, 10% 0);
}

.marker:hover {
    color: brown;
}