.scene {
      position: relative;
      width: 750px;
      height: 550px;
    }

    /* shimmer effect for placeholders */
    .skeleton {
      background: linear-gradient(90deg, #e3e6ea 25%, #f1f2f4 50%, #e3e6ea 75%);
      background-size: 200% 100%;
      animation: shimmer 1.6s infinite linear;
    }

    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    /* connector lines */
    .connector {
      position: absolute;
      border: 1px dashed rgba(130, 130, 130, 0.35);
    }

    /* AI box */
    .ai-box {
      position: absolute;
      top: 20px;
      left: 50px;
      width: 150px;
      height: 60px;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(51, 102, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      color: #3366ff;
      font-weight: 600;
      font-size: 18px;
      animation: float 3s ease-in-out infinite;
    }

    /* Skeleton AI Box */
    .ai-box-skeleton {
      position: absolute;
      top: 20px;
      left: 50px;
      width: 160px;
      height: 60px;
      border-radius: 12px;
      /* background: #e0e0e0; */
      animation: shimmer 1.6s infinite linear;
	  background: url(../image/ai-box-bg-skel.png) no-repeat;
		background-size: 100%;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    /* Dashboard main box */
    .dashboard {
      position: absolute;
      top: 90px;
      left: 170px;
      width: 500px;
      height: auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      padding: 25px;
      overflow: hidden;
      animation: fadeIn 1.5s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .section {
      margin-bottom: 25px;
      padding: 15px;
      border-radius: 10px;
      background-color: #f7f9fc;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
    }

    /* Line Chart Section */
    .line-chart {
      position: relative;
      width: 100%;
      height: 120px;
      margin-bottom: 20px;
    }

    .line-chart svg {
      width: 100%;
      height: 100%;
    }

    .line-chart path.line1 {
      stroke: #5b7cff;
      stroke-width: 2;
      fill: none;
      animation: drawLine1 2.4s ease-in-out forwards;
    }

    .line-chart path.line2 {
      stroke: #9aa8ff;
      stroke-width: 2;
      fill: none;
      animation: drawLine2 2.4s ease-in-out forwards;
    }

    @keyframes drawLine1 {
      from {
        stroke-dasharray: 0 400;
      }

      to {
        stroke-dasharray: 400 0;
      }
    }

    @keyframes drawLine2 {
      from {
        stroke-dasharray: 0 400;
      }

      to {
        stroke-dasharray: 400 0;
      }
    }

    /* Bar Chart Section */
    .bar-chart {
      display: flex;
      justify-content: space-around;
      height: 100px;
      margin-top: 20px;
    }

    .bar {
      width: 18px;
      background: linear-gradient(180deg, #6b5bff, #3b39ff);
      border-radius: 6px;
      animation: growBar 1.5s infinite ease-in-out alternate;
    }

    @keyframes growBar {
      0% {
        transform: scaleY(0.6);
        opacity: 0.8;
      }

      100% {
        transform: scaleY(1);
        opacity: 1;
      }
    }

    .bar:nth-child(1) {
      height: 30%;
      animation-delay: 0s;
    }

    .bar:nth-child(2) {
      height: 50%;
      animation-delay: 0.3s;
    }

    .bar:nth-child(3) {
      height: 70%;
      animation-delay: 0.6s;
    }

    .bar:nth-child(4) {
      height: 55%;
      animation-delay: 0.9s;
    }

    .bar:nth-child(5) {
      height: 80%;
      animation-delay: 1.2s;
    }

    /* Right side skeleton panel (Profile and AI Box) */
    .right-skeleton {
      position: absolute;
      top: 20px;
      right: 0;
      width: 160px;
      height: 220px;
      background: #f7f9fc;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 83, 255, 0.08);
      animation: slideInRight 1.5s ease-out;
    }

    @keyframes slideInRight {
      0% {
        transform: translateX(80px);
        opacity: 0;
      }

      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .right-skeleton .skeleton {
      margin: 10px;
      height: 8px;
      border-radius: 4px;
      background: #e0e0e0;
      animation: shimmer 1.6s infinite linear;
    }

    .right-skeleton .skeleton:nth-child(1) {
      width: 60%;
      margin-top: 20px;
    }

    .right-skeleton .skeleton:nth-child(2) {
      width: 80%;
    }

    .right-skeleton .skeleton:nth-child(3) {
      width: 50%;
    }

    .right-skeleton .skeleton:nth-child(4) {
      width: 70%;
    }

    /* Profile box bottom right */
    .profile-box {
      position: absolute;
      bottom: 25px;
      right: 30px;
      width: 75px;
      height: 75px;
      border-radius: 14px;
      background: #f7f9fc;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
      animation: fadeInProfile 1.5s ease-out;
    }

    @keyframes fadeInProfile {
      from {
        opacity: 0;
        transform: scale(0.8);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .profile-icon {
      width: 36px;
      height: 36px;
      background: radial-gradient(circle at top left, #5b7cff, #3b39ff);
      border-radius: 50%;
      position: relative;
    }

    /* Code box bottom left */
    .code-box {
		position: absolute;
		bottom: 20px;
		left: 60px;
		width: 320px;
		background: #ffffff;
		color: #595959;
		border-radius: 8px;
		padding: 15px;
		font-family: "Fira Code", monospace;
		font-size: 13px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		animation: slideUp 1.3s ease-out;
	}

    @keyframes slideUp {
      from {
        transform: translateY(60px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .code-box pre {
		margin: 0;
		white-space: pre-wrap;
		text-align: left;
		line-height: 12px;
		word-wrap: break-word;
		font-size: 10px;
    }

    /* connectors */
    .line-ai-to-dashboard {
      top: 55px;
      left: 150px;
      width: 70px;
      height: 60px;
      border-left: none;
      border-bottom: none;
      border-top: 1px dashed rgba(0, 0, 0, 0.3);
      border-right: 1px dashed rgba(0, 0, 0, 0.3);
    }

    .line-dashboard-to-profile {
      top: 220px;
      left: 510px;
      width: 60px;
      height: 60px;
      border-top: 1px dashed rgba(0, 0, 0, 0.3);
      border-right: none;
    }

    .line-dashboard-to-code {
      top: 340px;
      left: 220px;
      width: 80px;
      height: 100px;
      border-left: 1px dashed rgba(0, 0, 0, 0.3);
      border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
    }