body {
            margin: 0;
            padding: 0;
            background-color: #f0f8ff;
            overflow: hidden;
            height: 100vh;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Art Canvas */
        .art-canvas {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        /* Sketch Paper */
        .sketch-paper {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        /* Sketch Grid */
        .grid-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0,0,255,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,255,0.05) 1px, transparent 1px);
            background-size: 60px 60px;
            opacity: 0.2;
        }

        /* Animated Artwork */
        .artwork {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Service Icons - Fully responsive */
        .service-icon {
            width: 80vmin;
            height: 80vmin;
            opacity: 0;
            position: absolute;
            animation: 
                fadeIn 0.5s ease-out forwards,
                zoomOut 0.5s ease-in 2.5s forwards;
        }

        /* Common SVG styles */
        .service-icon .outline {
            stroke: #333;
            stroke-width: 3;
            fill: none;
        }
        
        .service-icon .fill {
            opacity: 0;
            animation: fillColor 0.5s ease-out forwards;
        }

        /* Solar System */
        .solar {
            animation-delay: 0.2s;
        }
        .solar .outline {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: draw 1.5s ease-out 0.2s forwards;
        }
        .solar .sun {
            fill: #FFD700;
            animation-delay: 1.7s;
        }
        .solar .panel {
            fill: #1E90FF;
            animation-delay: 1.9s;
        }
        .solar .battery {
            fill: #228B22;
            animation-delay: 2.1s;
        }
        .solar .panel-frame {
            stroke: #333;
            stroke-width: 2;
            animation-delay: 1.9s;
        }

        /* Civil Engineering */
        .civil {
            animation-delay: 0.8s;
        }
        .civil .outline {
            stroke-dasharray: 3500;
            stroke-dashoffset: 3500;
            animation: draw 1.8s ease-out 0.8s forwards;
        }
        .civil .house {
            fill: #FF6347;
            animation-delay: 2.6s;
        }
        .civil .roof {
            fill: #8B0000;
            animation-delay: 2.8s;
        }
        .civil .door {
            fill: #8B4513;
            animation-delay: 3.0s;
        }
        .civil .window {
            fill: #87CEEB;
            animation-delay: 3.2s;
        }
        .civil .frame {
            stroke: #333;
            stroke-width: 2;
            animation-delay: 3.0s;
        }

        /* Tower/Building */
        .building {
            animation-delay: 1.4s;
        }
        .building .outline {
            stroke-dasharray: 4000;
            stroke-dashoffset: 4000;
            animation: draw 2s ease-out 1.4s forwards;
        }
        .building .tower {
            fill: #4682B4;
            animation-delay: 3.4s;
        }
        .building .antenna {
            fill: #333;
            animation-delay: 3.6s;
        }
        .building .windows {
            fill: #FFD700;
            animation-delay: 3.8s;
        }
        .building .window-details {
            stroke: #333;
            stroke-width: 1.5;
            animation-delay: 3.8s;
        }

        /* Network System */
        .network {
            animation-delay: 2.0s;
        }
        .network .outline {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: draw 1.5s ease-out 2.0s forwards;
        }
        .network .server {
            fill: #32CD32;
            animation-delay: 3.5s;
        }
        .network .signal {
            fill: #9370DB;
            animation-delay: 3.7s;
        }
        .network .connection {
            fill: #FF4500;
            animation-delay: 3.9s;
        }
        .network .server-details {
            stroke: #333;
            stroke-width: 2;
            animation-delay: 3.5s;
        }

        /* Logo - Fully responsive */
        .logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12vmin;
            font-weight: 900;
            color: #333;
            opacity: 0;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
            animation: fadeIn 0.5s ease-out 0.1s forwards, 
                       pulse 2s infinite 1s;
            z-index: 10;
        }

        /* Progress Bar - Responsive */
        .progress-bar {
            position: absolute;
            bottom: 5vh;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1vmin;
            min-height: 8px;
            max-height: 12px;
            background: linear-gradient(90deg, #FF4500, #FFD700, #32CD32, #4682B4);
            border-radius: 8px;
            animation: progress 3s linear forwards;
            z-index: 10;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        }

        /* Animations */
        @keyframes draw {
            to { stroke-dashoffset: 0; }
        }

        @keyframes fillColor {
            to { opacity: 1; }
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        @keyframes zoomOut {
            to { transform: scale(0.8); opacity: 0; }
        }

        @keyframes progress {
            to { width: 80%; }
        }

        @keyframes pulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.05); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }