* {
         margin: 0;
         padding: 0;
         box-sizing: border-box; 
         }

:root {
    --bg-color: #ffffff;
    --card-bg-color: #ffffff;
    --text-color: #1a1a1a;
    --muted-text-color: #666666;
    --primary-color: #1a1a1a;
    --primary-hover-color: #4d4d4d;
    --border-color: #f0f0f0;
    --code-bg-color: #1a1a1a;
    --code-text-color: #f1f1f1;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --header-height: 70px;
    --header-bg: rgba(255, 255, 255, 0.8);
    --section-bg: #fafafa;
    --input-bg: #f8f9fa;
    --footer-bg: #ffffff;
    --btn-secondary-border: #e0e0e0;
    --btn-secondary-hover-bg: #f8f8f8;
    --btn-secondary-hover-border: #d0d0d0;
    --copy-btn-bg: #444;
    --copy-btn-hover-bg: #555;
    --icon-color: #ffffff;
    --logo-color: #1a1a1a;
    --btn-secondary-color: #1a1a1a;
    --btn-secondary-hover-color: #1a1a1a;
}

body.dark {
    --bg-color: #121212;
    --card-bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --muted-text-color: #999999;
    --primary-color: #e0e0e0;
    --primary-hover-color: #ffffff;
    --border-color: #2e2e2e;
    --code-bg-color: #282c34;
    --code-text-color: #abb2bf;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --header-bg: rgba(18, 18, 18, 0.8);
    --section-bg: #1a1a1a;
    --input-bg: #2e2e2e;
    --footer-bg: #1e1e1e;
    --btn-secondary-border: #444;
    --btn-secondary-hover-bg: #333;
    --btn-secondary-hover-border: #555;
    --copy-btn-bg: #555;
    --copy-btn-hover-bg: #666;
    --icon-color: #121212;
    --logo-color: #e0e0e0;
    --btn-secondary-color: #e0e0e0;
    --btn-secondary-hover-color: #e0e0e0;
}

         html,body{
             max-width: 100%;
             overflow-x: hidden;
         }
         html {
             scroll-behavior: smooth;
             scroll-padding-top: var(--header-height);
         }

         body {
             font-family: 'Inter', sans-serif;
             background-color: var(--bg-color);
             color: var(--text-color);
             margin: 0;
             max-width: 100%;
             overflow-x: hidden;
             line-height: 1.6;
             font-size: 16px;
             transition: background-color 0.3s ease, color 0.3s ease;
         }
        
         body.mobile-nav-open {
             overflow: hidden;
         }
        
         /* --- Custom Scrollbar --- */
         ::-webkit-scrollbar {
             width: 10px;
         }
         ::-webkit-scrollbar-track {
             background: #f1f1f1;
         }
         ::-webkit-scrollbar-thumb {
             background: #888;
             border-radius: 5px;
         }
         ::-webkit-scrollbar-thumb:hover {
             background: #555;
         }


         /* --- Global Components --- */
         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 20px;
         }

         section {
             padding: 80px 0;
         }

         .section-title {
             font-size: 2.5rem;
             text-align: center;
             margin-bottom: 1rem;
             font-weight: 700;
         }

         .section-subtitle {
             font-size: 1.1rem;
             text-align: center;
             color: var(--muted-text-color);
             max-width: 600px;
             margin: 0 auto 60px auto;
         }
        
         .demo-card .demo-subtitle {
             padding: 0 30px 20px;
             color: var(--muted-text-color);
             margin-top: -15px;
             border-bottom: 1px solid var(--border-color);
         }

         .btn {
             display: inline-block;
             padding: 12px 24px;
             border-radius: 8px;
             font-weight: 600;
             text-decoration: none;
             transition: all 0.3s ease;
             cursor: pointer;
             border: none;
             font-size: 1rem;
         }

         .btn-primary {
             background-color: var(--primary-color);
             color: var(--bg-color);
         }

         .btn-primary:hover {
             background-color: var(--primary-hover-color);
             transform: translateY(-2px);
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
        
         .btn-secondary {
             background-color: transparent;
             color: var(--btn-secondary-color);
             border: 1px solid var(--btn-secondary-border);
         }

         .btn-secondary:hover {
             background-color: var(--btn-secondary-hover-bg);
             border-color: var(--btn-secondary-hover-border);
             color: var(--btn-secondary-hover-color);
             transform: translateY(-2px);
         }
        
         /* --- Header --- */
         header {
             position: fixed;
             top: 0;
             width: 100%;
             background-color: var(--header-bg);
             backdrop-filter: blur(10px);
             border-bottom: 1px solid var(--border-color);
             z-index: 1002;
             height: var(--header-height);
         }

         .dummyHeader{
             width: 100%;
             height: var(--header-height);
         }

         header .container {
             display: flex;
             justify-content: space-between;
             align-items: center;
             height: 100%;
         }
        
         .header-right {
             display: flex;
             align-items: center;
             gap: 1rem; /* Spacing between nav items and buttons */
         }

         .logo {
             font-size: 1.8rem;
             font-weight: 700;
             text-decoration: none;
             color: var(--logo-color);
         }

         .desktop-nav a {
             margin-left: 25px;
             text-decoration: none;
             color: var(--muted-text-color);
             font-weight: 500;
             transition: color 0.3s ease;
         }

         .desktop-nav a:hover {
             color: var(--text-color);
         }
        
         /* --- Theme Toggle --- */
         #theme-toggle {
             position: relative;
             width: 28px;
             height: 28px;
             background: none;
             border: none;
             cursor: pointer;
             color: var(--text-color);
         }
         #theme-toggle svg {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             width: 20px;
             height: 20px;
             transition: opacity 0.3s ease, transform 0.3s ease;
         }
         /* Light mode: show moon icon, hide sun */
         #theme-toggle-sun-icon {
             opacity: 0;
             transform: translate(-50%, -50%) rotate(-90deg);
         }
         #theme-toggle-moon-icon {
             opacity: 1;
             transform: translate(-50%, -50%) rotate(0deg);
         }
         /* Dark mode: show sun icon, hide moon */
         body.dark #theme-toggle-sun-icon {
             opacity: 1;
             transform: translate(-50%, -50%) rotate(0deg);
         }
         body.dark #theme-toggle-moon-icon {
             opacity: 0;
             transform: translate(-50%, -50%) rotate(90deg);
         }
        
         /* --- Mobile Nav --- */
         .mobile-nav-toggle {
             display: none;
             background: none;
             border: none;
             cursor: pointer;
             padding: 0;
             z-index: 1002;
             width: 25px;
             height: 20px;
             position: relative;
         }

         .hamburger-line {
             position: absolute;
             left: 0;
             display: block;
             width: 100%;
             height: 2px;
             background-color: var(--text-color);
             transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease, bottom 0.3s ease;
         }
         .hamburger-line:nth-child(1) { top: 0; }
         .hamburger-line:nth-child(2) { top: 50%; transform: translateY(-50%); }
         .hamburger-line:nth-child(3) { bottom: 0; top: auto; }


         .mobile-nav {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-color: var(--bg-color);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             transform: translateX(100%);
             transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
             z-index: 1001;
         }

         .mobile-nav a {
             font-size: 2rem;
             color: var(--text-color);
             text-decoration: none;
             margin: 20px 0;
             font-weight: 600;
             opacity: 0;
             transform: translateY(20px);
             transition: opacity 0.4s ease, transform 0.4s ease;
         }

         body.mobile-nav-open .mobile-nav { transform: translateX(0); }

         body.mobile-nav-open .mobile-nav a {
             opacity: 1;
             transform: translateY(0);
         }
        
         body.mobile-nav-open .mobile-nav a:nth-child(1) { transition-delay: 0.2s; }
         body.mobile-nav-open .mobile-nav a:nth-child(2) { transition-delay: 0.3s; }
         body.mobile-nav-open .mobile-nav a:nth-child(3) { transition-delay: 0.4s; }
         body.mobile-nav-open .mobile-nav a:nth-child(4) { transition-delay: 0.5s; }


         body.mobile-nav-open .mobile-nav-toggle .hamburger-line:nth-child(1) {
             top: 50%;
             transform: translateY(-50%) rotate(45deg);
         }
         body.mobile-nav-open .mobile-nav-toggle .hamburger-line:nth-child(2) {
             opacity: 0;
         }
         body.mobile-nav-open .mobile-nav-toggle .hamburger-line:nth-child(3) {
             top: 50%;
             bottom: auto;
             transform: translateY(-50%) rotate(-45deg);
         }


         /* --- Hero Section --- */
         #hero {
             text-align: center;
             padding: 100px 20px;
             position: relative;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             box-sizing: border-box;
         }

         #hero::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-image:
                 linear-gradient(to right, var(--border-color) 1px, transparent 1px),
                 linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
             background-size: 40px 40px;
             opacity: 0;
             animation: fadeInGrid 2s ease forwards;
             animation-delay: 0.5s;
             z-index: 0;
         }

         .hero-content {
             position: relative;
             z-index: 1;
         }
        
         .hero-pretitle {
             font-size: 0.9rem;
             font-weight: 600;
             letter-spacing: 1.5px;
             text-transform: uppercase;
             color: var(--muted-text-color);
             margin-bottom: 1rem;
             opacity: 0;
             animation: fadeInUp 1s ease-out forwards;
         }

         #hero h1 {
             font-size: 5rem;
             font-weight: 700;
             margin-bottom: 0.5rem;
             line-height: 1.1;
             letter-spacing: -2px;
             opacity: 0;
             animation: fadeInUp 1s ease-out 0.1s forwards;
         }

         #hero p {
             font-size: 1.3rem;
             max-width: 700px;
             margin: 0 auto 30px auto;
             color: var(--muted-text-color);
             opacity: 0;
             animation: fadeInUp 1s ease-out 0.2s forwards;
         }
        
         #hero p span {
             color: var(--text-color);
             font-weight: 600;
         }

         #hero .hero-buttons {
             display: flex;
             justify-content: center;
             gap: 15px;
             flex-wrap: wrap;
             opacity: 0;
             animation: fadeInUp 1s ease-out 0.3s forwards;
         }
        
         /* --- Installation Section --- */
         #installation {
             background-color: var(--section-bg);
             border-top: 1px solid var(--border-color);
             border-bottom: 1px solid var(--border-color);
         }
         .installation-options {
             display: grid;
             grid-template-columns: 1fr;
             gap: 40px;
             max-width: 800px;
             margin: 0 auto;
         }

         .installation-card h3 {
             margin-top: 0;
             margin-bottom: 15px;
             font-size: 1.5rem;
         }
         .installation-card p {
             color: var(--muted-text-color);
             margin-top: 0;
         }
          .installation-card h4 {
             margin-top: 25px;
             margin-bottom: 10px;
             font-size: 1.1rem;
             font-weight: 600;
         }
         .installation-card .code-container {
             padding: 20px;
             border-radius: 8px;
         }
         .installation-card .code-container code {
             font-size: 0.95rem;
         }


         /* --- Features Section --- */
         #features .features-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 30px;
         }

         .feature-card {
             background-color: var(--card-bg-color);
             padding: 30px;
             border-radius: 12px;
             border: 1px solid var(--border-color);
             box-shadow: 0 4px 15px var(--shadow-color);
             transition: transform 0.3s ease, box-shadow 0.3s ease;
             display: flex;
             flex-direction: column;
             align-items: flex-start;
         }
         .feature-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
         }
         .feature-card .icon {
             font-size: 2rem;
             margin-bottom: 15px;
             background: var(--primary-color);
             color: var(--icon-color);
             width: 50px;
             height: 50px;
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: 10px;
         }
         .feature-card h3 {
             margin: 0 0 10px 0;
             font-size: 1.2rem;
             font-weight: 600;
         }
         .feature-card p {
             margin: 0;
             color: var(--muted-text-color);
             font-size: 0.95rem;
         }

         /* --- Demos Section --- */
         .demo-card {
             background-color: var(--card-bg-color);
             border-radius: 12px;
             border: 1px solid var(--border-color);
             margin-bottom: 40px;
             overflow: hidden;
             box-shadow: 0 4px 15px var(--shadow-color);
         }

         .demo-card h3 {
             font-size: 1.5rem;
             margin-top: 0;
             padding: 25px 30px;
             margin-bottom: 0;
         }

         .demo-content {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 0;
         }

         .demo-controls {
             padding: 30px;
             display: flex;
             flex-direction: column;
             gap: 20px;
             border-right: 1px solid var(--border-color);
         }
        
         .demo-controls .control-group {
             display: flex;
             flex-direction: column;
             gap: 10px;
         }

         .demo-controls .control-row {
             display: flex;
             gap: 15px;
         }
         .demo-controls .control-row .control-group {
             flex: 1;
         }
        
         .demo-controls label {
             font-weight: 500;
             color: var(--muted-text-color);
             font-size: 0.9rem;
             display: flex;
             align-items: center;
         }
        
         .demo-controls select,
         .demo-controls input[type="text"],
         .demo-controls input[type="number"] {
             width: 100%;
             padding: 10px;
             border-radius: 8px;
             border: 1px solid var(--border-color);
             font-family: 'Inter', sans-serif;
             font-size: 1rem;
             background-color: var(--input-bg);
             color: var(--text-color);
             box-sizing: border-box;
             outline: none;
             transition: all 0.2s ease;
         }
        
         .demo-controls select:focus,
         .demo-controls input[type="text"]:focus,
         .demo-controls input[type="number"]:focus {
             border-color: var(--primary-color);
             box-shadow: 0 0 0 2px rgba(224, 224, 224, 0.1);
         }

         .demo-controls input[type="color"] {
             width: 100%;
             height: 45px;
             padding: 5px;
             border-radius: 8px;
             border: 1px solid var(--border-color);
             background-color: var(--bg-color);
             box-sizing: border-box;
             outline: none;
         }

         .demo-controls input[type="checkbox"] {
             margin-right: 8px;
             transform: translateY(1px);
             width: 16px;
             height: 16px;
         }

         .demo-controls .buttons-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
             gap: 10px;
         }

         .code-container {
             max-width: 100%;
             overflow-x: auto;
             white-space: nowrap;
             background-color: var(--code-bg-color);
             padding: 10px;
             position: relative;
         }

         .code-container pre {
             margin: 0;
             white-space: pre-wrap;
             word-wrap: break-word;
         }
         .code-container code {
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.9rem;
             line-height: 1.5;
             color: var(--code-text-color);
         }

         @media screen and (max-width: 599px) {
       .installContainer{
         max-width: 93%;
       }
       .footerP{
         font-size: small;
       }
     }
        
         .copy-btn {
             position: absolute;
             top: 10px;
             right: 10px;
             background-color: var(--copy-btn-bg);
             color: white;
             border: none;
             padding: 5px 8px;
             border-radius: 6px;
             cursor: pointer;
             transition: background-color 0.3s ease;
             font-family: 'Inter', sans-serif;
         }

         .copy-btn:hover {
             background-color: var(--copy-btn-hover-bg);
         }
        
         .copy-btn.copied {
             background-color: gray;
         }
        
         /* --- Support Section --- */
         #support {
             background-color: var(--section-bg);
             text-align: center;
         }
         #support .btn-github {
             background-color: #24292e;
             color: white;
             display: inline-flex;
             align-items: center;
             gap: 10px;
         }
          #support .btn-github:hover {
             background-color: #444;
          }


         /* --- Footer --- */
         footer {
             text-align: center;
             padding: 40px 0;
             border-top: 1px solid var(--border-color);
             background-color: var(--footer-bg);
         }

         footer p {
             margin: 0;
             color: var(--muted-text-color);
         }
        
         /* --- Animations --- */
         @keyframes fadeInGrid {
             to { opacity: 0.5; }
         }

         @keyframes fadeInUp {
             from {
                 opacity: 0;
                 transform: translateY(20px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }

         /* --- Responsiveness --- */
         @media (max-width: 992px) {
             .demo-content {
                 grid-template-columns: 1fr;
             }
             .demo-controls {
                 border-right: none;
                 border-bottom: 1px solid var(--border-color);
             }
         }
        
         @media (max-width: 768px) {
              .desktop-nav {
                   display: none;
               }
               .mobile-nav-toggle {
                   display: block;
               }
              
               #hero h1 {
                   font-size: 3.5rem;
               }
              
               .section-title {
                   font-size: 2rem;
               }
         }
        
         @media (max-width: 480px) {
             #hero .hero-buttons {
                 flex-direction: column;
             }
         }
        
         /* Custom Theme for Demo */
         .notAToastcustomTheme {
             background: linear-gradient(to right, #4caf50, #8bc34a);
             color: white;
             border: 2px solid #388e3c;
             border-radius: 12px;
             box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }

        /* --- Custom Animations & Themes for Demos --- */
        /* Custom Entry/Exit Animations */
        @keyframes notAToastfoldIn {
            0% { transform: scaleY(0) rotateX(-90deg); opacity: 0; transform-origin: top; }
            100% { transform: scaleY(1) rotateX(0); opacity: 1; }
        }

        @keyframes notAToastfoldOut {
            0% { transform: scaleY(1) rotateX(0); opacity: 1; }
            100% { transform: scaleY(0) rotateX(90deg); opacity: 0; }
        }

        /* Custom Progress Bar Animation */
        @keyframes notAToastslideProgress {
            0% { width: 100%; background: limegreen; }
            50% { width: 50%; background: orange; }
            100% { width: 0%; background: red; }
        }

        /* Custom Action Button Theme */
        .notAToastmyButtonTheme {
            background: linear-gradient(135deg, #6366f1, #4338ca); /* Indigo gradient */
            color: #fff;
            border: none;
            border-radius: 999px; /* pill-shaped */
            padding: 8px 18px;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.3px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(67, 56, 202, 0.3);
            transition: all 0.3s ease;
        }

        .notAToastmyButtonTheme:hover {
            background: linear-gradient(135deg, #4f46e5, #312e81);
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 6px 14px rgba(67, 56, 202, 0.4);
        }

        /* Custom Icon Animation */
        @keyframes notAToastIcontada {
            0% { transform: scale(1); }
            10%, 20% { transform: scale(0.7) rotate(-6deg); }
            30%, 50%, 70%, 90% { transform: scale(1.3) rotate(6deg); }
            40%, 60%, 80% { transform: scale(1.3) rotate(-6deg); }
            100% { transform: scale(1) rotate(0); }
        }