:root {
      --bg1: #ffd1dc;
      --bg2: #fff5f7;
      --pink: #ffcef8;
      --soft: rgba(255, 255, 255, 0.75);
      --text: #ffffff;
      --terminal: #1e1e1e;
      --terminalText: #eaeaea;
      --green: #7CFFB2;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }

    body {
      min-height: 100vh;
      background: linear-gradient(135deg, var(--bg1), var(--bg2));
      background-size: 400% 400%;
      animation: gradient-shift 15s ease infinite;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
      padding-top: 60px;
      position: relative;
    }

    @keyframes gradient-shift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    h1 {
      font-size: 36px;
      margin: 0;
      height: 60px;
      color: var(--pink);
    }

    .subtitle {
      opacity: 0.85;
      margin-bottom: 10px;
      margin-top: 8px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .section-title {
      font-weight: 600;
      margin: 0;
      color: var(--pink);
    }

    ul {
      list-style: none;
    }

    li {
      margin: 6px 0;
    }

    a {
      color: var(--pink);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    /* Sparkle/Snowflake effect */
    .sparkles-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .sparkle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: radial-gradient(circle, rgba(255, 206, 248, 0.9), rgba(255, 206, 248, 0.3));
      border-radius: 50%;
      box-shadow: 0 0 6px rgba(255, 206, 248, 0.6);
      animation: float-down 6s infinite linear;
    }

    @keyframes float-down {
      0% {
        transform: translateY(-10px) translateX(0px);
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
      100% {
        transform: translateY(100vh) translateX(30px);
        opacity: 0;
      }
    }

    .sparkle:nth-child(odd) {
      animation-duration: 7s;
      animation-delay: calc(var(--delay) * 1s);
    }

    .sparkle:nth-child(even) {
      animation-duration: 8s;
      animation-delay: calc(var(--delay) * 1.2s);
      width: 3px;
      height: 3px;
    }

    /* Glow effect on hover */
    @keyframes glow-pulse {
      0%, 100% {
        box-shadow: 0 8px 32px rgba(255, 206, 248, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04),
                    0 0 0 0 rgba(255, 206, 248, 0.4);
      }
      50% {
        box-shadow: 0 8px 32px rgba(255, 206, 248, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04),
                    0 0 20px 0 rgba(255, 206, 248, 0.3);
      }
    }

    /* Page load animation */
    .page-load-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: overlay-fade 3.5s ease-out forwards;
      pointer-events: none;
    }

    @keyframes overlay-fade {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }

    .load-heart {
      width: 100px;
      height: 100px;
      animation: heart-glow 3.5s ease-out forwards;
    }

    @keyframes heart-glow {
      0% {
        opacity: 0;
        transform: scale(0.5);
        filter: drop-shadow(0 0 20px rgba(255, 206, 248, 0.8));
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(255, 206, 248, 1));
      }
      100% {
        opacity: 0;
        transform: scale(1);
        filter: drop-shadow(0 0 60px rgba(255, 206, 248, 0.4));
      }
    }