.sr-paint-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    z-index: 40;
    overflow: hidden;
}

.sr-paint-square {
    position: absolute;
    left: var(--paint-x);
    top: var(--paint-y);
    width: 18px;
    height: 18px;
    border: 1px solid var(--paint-edge, rgba(55, 62, 58, 0.24));
    background: var(--paint-fill, rgba(71, 82, 76, 0.16));
    box-shadow: none;
    opacity: 0;
    overflow: hidden;
    transform: rotate(var(--paint-tilt, 0deg)) scale(0.72);
    animation: sr-paint-pop 180ms ease-out forwards;
}

.sr-paint-square::before {
    content: "";
    position: absolute;
    inset: 2px;
    background:
        linear-gradient(135deg, transparent 16%, var(--paint-stripe, rgba(55, 62, 58, 0.2)) 16%, var(--paint-stripe, rgba(55, 62, 58, 0.2)) 22%, transparent 22%),
        linear-gradient(135deg, transparent 47%, var(--paint-stripe, rgba(55, 62, 58, 0.2)) 47%, var(--paint-stripe, rgba(55, 62, 58, 0.2)) 53%, transparent 53%),
        linear-gradient(135deg, transparent 78%, var(--paint-stripe, rgba(55, 62, 58, 0.2)) 78%, var(--paint-stripe, rgba(55, 62, 58, 0.2)) 84%, transparent 84%);
}

.dark .sr-paint-square {
    border-color: var(--paint-edge-dark, rgba(229, 236, 231, 0.2));
    background: var(--paint-fill-dark, rgba(209, 218, 213, 0.12));
}

.dark .sr-paint-square::before {
    background:
        linear-gradient(135deg, transparent 16%, var(--paint-stripe-dark, rgba(229, 236, 231, 0.17)) 16%, var(--paint-stripe-dark, rgba(229, 236, 231, 0.17)) 22%, transparent 22%),
        linear-gradient(135deg, transparent 47%, var(--paint-stripe-dark, rgba(229, 236, 231, 0.17)) 47%, var(--paint-stripe-dark, rgba(229, 236, 231, 0.17)) 53%, transparent 53%),
        linear-gradient(135deg, transparent 78%, var(--paint-stripe-dark, rgba(229, 236, 231, 0.17)) 78%, var(--paint-stripe-dark, rgba(229, 236, 231, 0.17)) 84%, transparent 84%);
}

.sr-paint-square.is-pencil-a {
    --paint-angle-a: 142deg;
    --paint-angle-b: 31deg;
    --paint-gap-a: 5px;
    --paint-gap-b: 8px;
    --paint-edge: rgba(56, 64, 60, 0.24);
    --paint-fill: rgba(65, 74, 69, 0.16);
    --paint-stripe: rgba(56, 64, 60, 0.2);
    --paint-stripe-gap: 9px;
    --paint-mark-a: rgba(56, 64, 60, 0.24);
    --paint-mark-b: rgba(56, 64, 60, 0.15);
    --paint-wash: rgba(245, 247, 244, 0.22);
    --paint-edge-dark: rgba(226, 234, 229, 0.22);
    --paint-fill-dark: rgba(218, 226, 221, 0.12);
    --paint-stripe-dark: rgba(226, 234, 229, 0.17);
    --paint-mark-a-dark: rgba(226, 234, 229, 0.22);
    --paint-mark-b-dark: rgba(226, 234, 229, 0.13);
    --paint-wash-dark: rgba(148, 163, 153, 0.07);
}

.sr-paint-square.is-pencil-b {
    --paint-angle-a: 151deg;
    --paint-angle-b: 38deg;
    --paint-gap-a: 6px;
    --paint-gap-b: 7px;
    --paint-edge: rgba(67, 72, 68, 0.22);
    --paint-fill: rgba(77, 84, 79, 0.14);
    --paint-stripe: rgba(67, 72, 68, 0.18);
    --paint-stripe-gap: 8px;
    --paint-mark-a: rgba(67, 72, 68, 0.22);
    --paint-mark-b: rgba(67, 72, 68, 0.14);
    --paint-wash: rgba(238, 241, 236, 0.2);
    --paint-edge-dark: rgba(211, 221, 215, 0.21);
    --paint-fill-dark: rgba(202, 213, 207, 0.11);
    --paint-stripe-dark: rgba(211, 221, 215, 0.16);
    --paint-mark-a-dark: rgba(211, 221, 215, 0.21);
    --paint-mark-b-dark: rgba(211, 221, 215, 0.12);
    --paint-wash-dark: rgba(156, 163, 158, 0.06);
}

.sr-paint-square.is-pencil-c {
    --paint-angle-a: 136deg;
    --paint-angle-b: 27deg;
    --paint-gap-a: 4px;
    --paint-gap-b: 8px;
    --paint-edge: rgba(48, 58, 54, 0.2);
    --paint-fill: rgba(58, 68, 63, 0.13);
    --paint-stripe: rgba(48, 58, 54, 0.16);
    --paint-stripe-gap: 10px;
    --paint-mark-a: rgba(48, 58, 54, 0.2);
    --paint-mark-b: rgba(48, 58, 54, 0.13);
    --paint-wash: rgba(250, 250, 248, 0.18);
    --paint-edge-dark: rgba(232, 238, 234, 0.2);
    --paint-fill-dark: rgba(224, 232, 227, 0.1);
    --paint-stripe-dark: rgba(232, 238, 234, 0.15);
    --paint-mark-a-dark: rgba(232, 238, 234, 0.2);
    --paint-mark-b-dark: rgba(232, 238, 234, 0.12);
    --paint-wash-dark: rgba(130, 145, 137, 0.06);
}

.home-rail,
.products-rail,
.pricing-rail,
.articles-rail,
.discovery-rail,
.projects-rail {
    background-image: radial-gradient(circle, rgba(16, 185, 129, 0.16) 1px, transparent 1.5px) !important;
    background-size: 18px 18px !important;
}

.dark .home-rail,
.dark .products-rail,
.dark .pricing-rail,
.dark .articles-rail,
.dark .discovery-rail,
.dark .projects-rail {
    background-image: radial-gradient(circle, rgba(110, 231, 183, 0.12) 1px, transparent 1.5px) !important;
    background-size: 18px 18px !important;
}

@keyframes sr-paint-pop {
    to {
        opacity: 1;
        transform: rotate(var(--paint-tilt, 0deg)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-paint-square {
        animation: none;
        opacity: 1;
        transform: none;
    }
}