/* YIN GENERATIVE BACKGROUND MODE */

html.yin-background-studio-generative {
    background-image: none !important;
}

html.yin-background-studio-generative body {
    position: relative;
    min-height: 100vh;
}

.yin-background-generative-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
    background: var(--yin-generative-base, #000000);
}

.yin-background-generative-tile {
    position: absolute;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    outline: 1px solid rgba(0, 0, 0, 0.34);
    outline-offset: -1px;
}

.yin-background-generative--hilbert
    .yin-background-generative-tile {
    outline-color: rgba(255, 255, 255, 0.16);
}

.yin-background-generative--voronoi
    .yin-background-generative-tile,
.yin-background-generative--delaunay
    .yin-background-generative-tile,
.yin-background-generative--lloyd-voronoi
    .yin-background-generative-tile,
.yin-background-generative--phyllotaxis
    .yin-background-generative-tile,
.yin-background-generative--radial-fan
    .yin-background-generative-tile,
.yin-background-generative--truchet
    .yin-background-generative-tile {
    outline: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.yin-background-generative--treemap
    .yin-background-generative-tile {
    outline-width: 2px;
    outline-color: rgba(0, 0, 0, 0.42);
}

.yin-background-generative--ulam-spiral
    .yin-background-generative-tile {
    outline-color: rgba(255, 255, 255, 0.2);
}

.yin-background-generative--voronoi {
    background-color: var(--yin-generative-base, #000000);
}

.yin-background-generative--delaunay
    .yin-background-generative-tile {
    filter: saturate(1.04) contrast(1.02);
}

html.yin-background-studio-generative body > #page {
    position: relative;
    z-index: 1;
}