*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: rgb( 0, 0, 0 );
}

canvas {
    touch-action: none;
}

/*
Author badge
Small signature link back to niklasknaack.de.
Not part of the actual experiment.
*/
.nk {
    --_size: 48px;
    --_padding: 16px;
    --_blur-filter: 3px;
    --_color-bg-start: rgba(255,255,255,0.55);
    --_color-bg-end: rgba(255,255,255,0.80);
    --_color-bg: var(--_color-bg-start);
    --_color-logo-start: rgba(0,0,0,0.55); 
    --_color-logo-end: rgba(0,0,0,1.00); 
    --_color-logo: var(--_color-logo-start);
    --_logo-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 251 140'%3E%3Cpath fill='black' d='M 97.35 70 L 95.7 67.8 Q 95.421875 67.47421875 95.15 67.1 94.7875 66.66484375 94.4 66.2 92.9564453125 64.3546875 91.5 62.5 L 70 35.1 69.95 35 42.55 0 0 0 0 140 42.55 140 42.55 62.5 42.6 62.5 103.25 140 152.35 140 140 124.25 139.95 124.15 Q 136.15 119.4 132.4 114.6 131.45 113.4 130.55 112.2 129.8 111.3 129.15 110.4 L 97.55 70 152.35 0 97.35 0 97.35 70 M 201.3 0 L 198.05 4.2 Q 197.65 4.65 197.3 5.15 L 195 8.1 195 7.95 170.75 39.15 170.7 39.1 170.6 39.25 146.6 70 146.65 70.05 158.25 84.9 Q 163.1 91.15 168.05 97.4 168.3 97.75 168.6 98.15 168.8 98.4 169 98.7 L 170.25 100.3 170.6 100.85 170.7 100.95 170.75 100.9 171.6 102 Q 171.75 102.15 171.9 102.35 172.05 102.6 172.25 102.85 173 103.8 173.8 104.8 L 201.2 140 250.8 140 203.2 80.25 Q 202.95 79.95 202.75 79.7 L 201.3 77.95 201.3 77.85 195.1 70.05 195.1 70 250.75 0 201.3 0 Z'/%3E%3C/svg%3E");
    --_logo-size: 56%;
    position: fixed;
    right: var(--_padding);
    bottom: var(--_padding);
    z-index: 9999;
    display: block;
    width: var(--_size);
    aspect-ratio: 1;
    border-radius: 50%;
}

.nk:before,
.nk:after { 
    content: ''; 
    position: absolute; 
    transition: background-color 250ms ease-in-out;
}
.nk:before {
    inset: 0;
    background-color: var(--_color-bg);
    border-radius: inherit;
    backdrop-filter: blur(var(--_blur-filter));
    -webkit-backdrop-filter: blur(var(--_blur-filter));
    mask:
        linear-gradient(#000 0 0),
        var(--_logo-url) center / var(--_logo-size) auto no-repeat;
    -webkit-mask:
        linear-gradient(#000 0 0),
        var(--_logo-url) center / var(--_logo-size) auto no-repeat;
    mask-composite: exclude;
    -webkit-mask-composite: xor; 
}
.nk:after { 
    inset: calc((100% - var(--_logo-size)) * .5);
    background-color: var(--_color-logo);
    mask: var(--_logo-url) center / contain no-repeat;
    -webkit-mask: var(--_logo-url) center / contain no-repeat;
}

.nk:hover {
    --_color-bg: var(--_color-bg-end);
    --_color-logo: var(--_color-logo-end);
}