a {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
}

:visited {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.5) 0.1 h);
}

a[href^="mailto:"]::after {
    background-color: currentColor;
    block-size: 1em;
    content: '';
    display: inline flex;
    inline-size: 1em;
    margin-inline-start: 0.25em;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M178.46-200q-24.58 0-41.52-16.94Q120-233.88 120-258.46v-443.08q0-24.58 16.94-41.52Q153.88-760 178.46-760h603.08q24.58 0 41.52 16.94Q840-726.12 840-701.54v443.08q0 24.58-16.94 41.52Q806.12-200 781.54-200H178.46ZM480-482.36 153.85-698.72v440.26q0 10.77 6.92 17.69 6.92 6.92 17.69 6.92h603.08q10.77 0 17.69-6.92 6.92-6.92 6.92-17.69v-440.26L480-482.36Zm0-38.46 312.72-205.33H167.95L480-520.82Zm-326.15-177.9v-27.43 467.69q0 10.77 6.92 17.69 6.92 6.92 17.69 6.92h-24.61v-464.87Z"/></svg>');
    mask-mode: alpha;
    mask-position: center;
    mask-size: contain;
    vertical-align: text-bottom;
}

a[target="_blank"]::after {
    background-color: currentColor;
    block-size: 1em;
    content: '';
    display: inline flex;
    inline-size: 1em;
    margin-inline-start: 0.25em;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M218.46-160q-24.58 0-41.52-16.94Q160-193.88 160-218.46v-523.08q0-24.58 16.94-41.52Q193.88-800 218.46-800h224.46v33.85H218.46q-9.23 0-16.92 7.69-7.69 7.69-7.69 16.92v523.08q0 9.23 7.69 16.92 7.69 7.69 16.92 7.69h523.08q9.23 0 16.92-7.69 7.69-7.69 7.69-16.92v-224.46H800v224.46q0 24.58-16.94 41.52Q766.12-160 741.54-160H218.46Zm169.13-203.33-24.1-24.26 378.56-378.56H547.54V-800H800v252.46h-33.85V-741.9L387.59-363.33Z"/></svg>');
    mask-mode: alpha;
    mask-position: center;
    mask-size: contain;
    vertical-align: text-bottom;
}

a:focus-visible,
a:hover {
    text-decoration: none;
}

.card__cta {
    @supports not (corner-shape: bevel) {
        position: relative;

        &::before {
            background-image:
                linear-gradient(
                    to top left,
                    var(--surface-color) calc(50% - 0.5rem / 16),
                    oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h) calc(50% - 0.5rem / 16)
                );
            clip-path: polygon(100% calc(-1rem / 16), 100% 100%, calc(-1rem / 16) 100%);
            block-size: 1rem;
            content: '';
            inline-size: 1rem;
            inset-block-end: calc(-1.5rem / 16);
            inset-inline-end: calc(-1.5rem / 16);
            position: absolute;
            z-index: 1;
        }
    }
}

.demo-title__repository {
    line-height: 1;
    margin-inline-start: 1rem;
    text-decoration: none;
}

.demo-title__repository svg {
    vertical-align: top;
}