/* Preloader styling */
    #preloader {
        position: fixed;
        inset: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.35s ease;
    }

    .preloader-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .preloader-container .preloader {
        animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
    }

    @keyframes rotate {
        50% {
            transform: rotate(360deg);
        }

        100% {
            transform: rotate(720deg);
        }
    }

    .preloader span {
        position: absolute;
        display: block;
        height: 64px;
        width: 64px;
        background: #3fc1f2;
        border: 1px solid #3fc1f2;
        border-radius: 100%;
    }

    .preloader span:nth-child(1) {
        transform: translate(-28px, -28px);
        animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
    }

    @keyframes shape_1 {
        60% {
            transform: scale(0.4);
        }
    }

    .preloader span:nth-child(2) {
        transform: translate(28px, -28px);
        animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
    }

    @keyframes shape_2 {
        40% {
            transform: scale(0.4);
        }
    }

    .preloader span:nth-child(3) {
        position: relative;
        border-radius: 0px;
        transform: scale(0.98) rotate(-45deg);
        animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
    }

    @keyframes shape_3 {
        50% {
            border-radius: 100%;
            transform: scale(0.5) rotate(-45deg);
        }

        100% {
            transform: scale(0.98) rotate(-45deg);
        }
    }

    .shadow {
        position: relative;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        height: 16px;
        width: 64px;
        border-radius: 50%;
        background-color: #d9d9d9;
        border: 1px solid #d9d9d9;
        animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
    }

    @keyframes shadow {
        50% {
            transform: translateX(-50%) scale(0.5);
            border-color: #f2f2f2;
        }
    }

    .preloader-hide {
        opacity: 0;
        pointer-events: none;
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .hero-bg {
        background-image: linear-gradient(rgba(239, 251, 255, 0.4), rgba(239, 251, 255, 0.4)), url(https://lh3.googleusercontent.com/aida-public/AB6AXuB36FI_3q0RP79FZPFMCkNancPUtXu39zjlDWivxb1N2ogStZ0OZKTzPrExRCrBt6UIE5fbgA1ctJ1yhVwxf-fEK_c_6MbURJqfowG6RkyyhgFHyB8n64s38W6Zby4zWSLJjl70YWSGz4pM_yqPPicEgaAPgFRPnGfkhJxrhPXZ_I07btWqiN99By_wA2ZPp_Qs0whoTLjf_9wxIKjAGLr_j_Mp1qvZA3r9rawMtQFHHzwb34DCBlPHdnjT9XCbo3XdM2n3oY-vNAw);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .hand-drawn-overlay {
        background-image: url(https://www.transparenttextures.com/patterns/p6.png);
        opacity: 0.15;
        pointer-events: none;
    }

    .piano-key-white {
        background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
        border: 1px solid #d1d1d1;
        border-bottom: 4px solid #c0c0c0;
        transition: transform 0.1s, border-bottom 0.1s;
    }

    .piano-key-white:active,
    .piano-key-white.active {
        transform: translateY(2px);
        border-bottom-width: 1px;
        background: #e0e0e0;
    }

    .piano-key-black {
        background: linear-gradient(to bottom, #333 0%, #000 100%);
        border: 1px solid #000;
        border-radius: 0 0 2px 2px;
        z-index: 10;
    }

    .piano-key-black:active,
    .piano-key-black.active {
        background: #444;
        transform: translateY(2px);
    }

    .piano-keys .key.hide span {
        display: none !important;
    }

    .material-symbols-outlined {
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    }

    @keyframes code-drift {
        0% {
            transform: translateY(0);
            opacity: 0.3;
        }

        50% {
            transform: translateY(-10px);
            opacity: 0.6;
        }

        100% {
            transform: translateY(0);
            opacity: 0.3;
        }
    }

    .code-float {
        animation: code-drift 5s ease-in-out infinite;
    }

    /* Custom cursors */
    body,
    html {
        cursor: url("../curoshair/normal.cur"), auto;
    }

    a,
    button,
    select,
    option,
    input[type="range"] {
        cursor: url("../curoshair/link700.cur"), pointer !important;
    }

    input,
    textarea,
    [contenteditable="true"] {
        cursor: url("../curoshair/text_select.cur"), text;
    }