body {
    --m: 1;
    --s: 1;
    --w: calc(352px * var(--m));
    --ε: 0.1px;
    --w-ε: calc(var(--w) - var(--ε));
    perspective: 600px;
    image-rendering: pixelated;
}
* {
    transform-style: preserve-3d;
    transition: all 1s;
}
brick-house {
    display: block;
    position: relative;
    rotate: 1 1 1 5deg;
    top: max(50px, 20vh);
    transition: all 1s;
    width: var(--w);
    margin-left: auto; margin-right: auto;
    animation-name: doner; animation-duration:16s; animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes doner {
    0% { rotate: y 0turn; }
    to { rotate: y 1turn; }
}
brick-wall {
    display: block;
    background-color: rgb(0,0,0,25%);
    width: var(--w);
    position: absolute;
    line-height: 0;
    &:nth-child(1) { transform: translateZ(calc(var(--w-ε) / 2)); }
    &:nth-child(2) { transform: rotateY(0.25turn) translateZ(calc(var(--w-ε) / 2)); }
    &:nth-child(3) { transform: rotateY(0.5turn) translateZ(calc(var(--w-ε) / 2)); }
    &:nth-child(4) { transform: rotateY(0.75turn) translateZ(calc(var(--w-ε) / 2)); }
    overflow-x: clip;
}
brick-course {
    display: flex;
    position: relative;
    &:nth-child(2n) { right: calc(var(--m) * (22px + (1 - var(--s)) * 66px)); }
    &:nth-child(2n+1) { right: calc(66px * var(--m) * var(--s)); }
    & > * { min-width: calc(88px * var(--m)); }
}
img:not(#thanks) {
    width: calc(88px * var(--m));
    height: calc(31px * var(--m));
}

body:has(#b:checked) brick-house { animation-name: none }
body:has(#c:checked) {
    main { rotate: -1 -1 -1 40deg; }
    input {
        margin: 1em;
        scale: 3;
        transform: translateZ(calc(var(--w) / 4));
    }
}
body:has(#d:checked) { --s: 0; }
body:has(#e:checked) { perspective-origin: top left; }
body:has(#f:checked) { perspective: var(--w); }
body:has(#g:checked) {
    --m: 2;
    input {
        scale: 1.5;
        rotate: -390deg;
    }
}
body:has(#h:checked) input { scale: 1 40; transform-origin: top; }

#i:not(:checked) {
    filter: sepia() saturate(99) contrast(5) hue-rotate(10deg);
    scale: 2;
    margin-left: calc(var(--w) / 4);
}
body:has(#i:checked), body:has(#b:not(:checked)):has(#d:checked):has(#e:checked) {
    #i { display: inline; }
}
#i, #j, #k, #l, #m, #z {
    display: none;
    margin: 0;
    animation: appear 1s;
}
@keyframes appear {
    0% { scale: 0 1; margin: 0; }
    to { }
}
body:has(#i:checked) {
    #i { scale: 0.5; }
    #j, #k, #l, #m { display: inline; }
}

a { border-style: solid; border-width: 0; }
body:has(#j:checked):has(#i:checked) {
    a { rotate: 10deg; margin: 7px; scale: 1.1; }
    img:not(#thanks) { rotate: -5deg; }
    brick-wall { background-color: transparent; }
    #j { rotate: -10deg; }
}

body:has(#k:checked):has(#i:checked) {
    #k {
        outline: outset 6px;
        margin: 6px;
    }
    a {
        outline-style: outset;
        outline-width: 6px; margin: 6px;
        min-width: calc(88px * var(--m) - 12px);
    }
}

body:has(#l:checked):has(#i:checked) {
    brick-wall, #l {
        animation: rave 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}
@keyframes rave {
    0% { filter: saturate(5) hue-rotate(0turn); }
    50% { filter: saturate(2) hue-rotate(0.5turn); }
    to { filter: saturate(5) hue-rotate(1turn); }
}

body:has(#m:checked):has(#i:checked) {
    brick-wall {
        &:nth-child(1) { transform: rotateX(-0.25turn) translateZ(calc(var(--w-ε) / 0.8)); }
        &:nth-child(2) { transform: rotateY(1.75turn) rotateZ(0.6turn) rotateX(1.1turn) translateZ(calc(var(--w-ε) / 1.4)); }
        &:nth-child(3) { transform: rotateY(1.59turn) rotateX(5.2turn) translateZ(calc(var(--w-ε) / 2)); }
        &:nth-child(4) { transform: rotateY(-1.75turn) rotateX(1.2turn) translateZ(calc(var(--w-ε) / 3)); }
    }
    #m { transform: translateY(calc(var(--w) / 8)); }
}

#z {
    scale: 1;
    animation: charlie 3s;
}
@keyframes charlie {
    0% { opacity: 0; scale: 413; }
    to { opacity: 1; }
}
body:has(#j:checked):has(#k:checked):has(#l:checked):has(#m:checked) #z, #z:checked {
    display: inline;
}
body:has(#z:checked) {
    brick-wall, brick-house {
        scale: 0;
    }
    main { rotate: none; }
    #thanks { display: block; transform: translateZ(0.1px);}
    input { transform: none; }
}
#thanks {
    display: none;
    margin-left: auto; margin-right: auto; margin-top: calc(var(--w) / 4);
    animation: thanks 1s;
}
@keyframes thanks {
    0% { max-width: 0; margin-top: 0; }
    to { max-width: min(352px, 100%); }
}