<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body {
            margin: auto;
            font-size:15px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: monospace;
            background: linear-gradient(#e9d1ff, #f5fffd);
        }
        body &gt; *:before, body &gt; *:after {
            content: '';
            position: absolute;
        }
        body:before {
            content: "sc.chinaz.com";
            position: absolute;
            bottom: 10px;
        }
        body:after {
            content: "Works on Chrome only :( Sorry";
            position: absolute;
            top: 10px;
        }

        .tired {
            --animation-time: 5s;

            /* TDD text */
            max-width: 175px;
            font-size: 30px;
            line-height: 1.2;
            letter-spacing: 5px;
            font-weight: bolder;


            /* computer */
            --c-computer: #3a3a3a;
            --c-computer-screen: #7c7c7c;
            box-shadow: -56px 48px 0 -49px var(--c-computer),
                        -95px 48px 0 -49px var(--c-computer-screen), 
                        -95px 48px 0 -38px var(--c-computer);
            padding-left: 22px;
            padding-bottom: 15px;

            animation: computerScreen var(--animation-time) infinite;
        }
        @keyframes computerScreen {
            /* awake state */
            10%, 20%, 30%, 40%, 50% {
                --c-computer-screen: #e4e4e4;
            }
            /* sleep state */
            60%, 70%, 80%, 90%, 100%, 0% {
                --c-computer-screen: #505050;
            }
        }
        .tired::first-line {
            font-weight: normal;
            line-height: 4;
            font-size: 21px;
            letter-spacing: initial;
            color: rgb(87, 87, 87);
        }
       
     
        /* blob subject */
        .tired:after {
            --blob-c-dark-2: #504644;
            --blob-c-dark: #ac6e63;
            --blob-c-light: #ffa899;
            background: radial-gradient(farthest-side at 28px 68px, var(--blob-c-dark-2) 0% 5%, var(--blob-c-light) 1%);
            width: 180px;
            height: 150px;
            outline: 2px solid var(--blob-c-dark);
            
            --blob-transform: translate(20px, -124px) skewX(-5deg);
            --blob-z-index: 1;
            transform: var(--blob-transform);
            border-radius: 50% 50% 70% 30% / 40% 100% 0% 60%;
            z-index: var(--blob-z-index);
            animation: blobAnim var(--animation-time) infinite;
        }
        @keyframes blobAnim {
            /* awake state */
            10%, 20%, 30%, 40%, 50% {
                --blob-c-dark-2:  #504644;
                --blob-z-index: 1;
            }
            /* awake idle state */
            10%, 15%, 20%,
            25%, 30%, 35%, 40%,
            50% {
                --blob-transform: translate(20px, -124px) skewX(0);
            }
            12%, 17%,
            27%, 32%, 37% {
                --blob-transform: translate(20px, -124px) skewX(-5deg);
            }
            
            /* sleep state */
            60%, 100%, 0% {
                --blob-c-dark-2: var(--blob-c-light);
                --blob-z-index: -1;
            }
            
            /* sleep idle state */
            60%, 66%, 72%,
            80%, 86%, 92%,
            100%, 0% {
                --blob-transform: translate(109px, -100px) scale(0.6) scaleX(-1) skewX(-3deg);
            }
            63%, 65%,
            83%, 85% {
                --blob-transform: translate(109px, -100px) scale(0.6) scaleX(-1) skewX(0deg);
            }
        }


        /* fx text */
        .tired:before {
            font-size: small;
            font-weight: bold;
            letter-spacing: initial;
            text-transform: initial;
            
            /* state awake */
            --text-content: '';
            content: var(--text-content);
            transform: translate(-64px, 110px);
            max-width: 20px;
            
            animation: textAnim var(--animation-time) infinite;
        }
        
        @keyframes textAnim {
            /* awake state */
            0%, 10%     {   --text-content: ''              ; transform: translate(-64px, 110px); }
            12%     {   --text-content: 'if'           ; transform: translate(-64px, 110px); }
            17%     {   --text-content: 'if (1'     ; transform: translate(-64px, 110px); }
            27%     {   --text-content: 'if (1+1'     ; transform: translate(-64px, 110px); }
            32%     {   --text-content: 'if (1+1 === '    ; transform: translate(-64px, 110px); }
            40%,50%,54%     {   --text-content: 'if (1+1 === 2)'    ; transform: translate(-64px, 110px); opacity: 1 }
            
            55% { transform: translate(240px, 110px); opacity: 0 }
            55%,59%     {   --text-content: '' }

            /* sleep state */
            60%     {   --text-content: 'Z'; transform: translate(220px, 90px); opacity: 1 }
            63%     {   --text-content: 'Z'; transform: translate(240px, 70px); }
            66%     {   --text-content: 'Z'; transform: translate(220px, 50px); }
            69%     {   --text-content: 'Z'; transform: translate(240px, 30px); }
            72%      {   --text-content: 'Z'; transform: translate(220px, 10px); opacity: 0 }

            75% { transform: translate(240px, 110px); opacity: 0 }
            
            80%     {   --text-content: 'Z'; transform: translate(220px, 90px); opacity: 1 }
            83%     {   --text-content: 'Z'; transform: translate(240px, 70px); }
            86%     {   --text-content: 'Z'; transform: translate(220px, 50px); }
            89%     {   --text-content: 'Z'; transform: translate(240px, 30px); }
            92%, 100%      {   --text-content: 'Z'; transform: translate(220px, 10px); opacity: 0 }
        }</pre></body></html>