:root {
          --background: #f8fafc;
          --card-bg: #ffffff;
          --text: #1e293b;
          --text-muted: #64748b;
          --border: #e2e8f0;
        }

        .dark {
          --background: #0f172a;
          --card-bg: #1e293b;
          --text: #f8fafc;
          --text-muted: #94a3b8;
          --border: #334155;
        }
        body {
            background-color: var(--background);
            color: var(--text);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .guide-backdrop {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 999;
            backdrop-filter: blur(2px);
        }
        .highlight-section {
            position: relative;
            z-index: 1000;
            border-radius: 0.75rem;
            box-shadow: 0 0 0 4px hsla(243, 75%, 59%, 0.7), 0 0 20px 10px hsla(243, 75%, 59%, 0.4);
            transition: box-shadow 0.3s ease-in-out;
        }
        .guide-modal {
            position: fixed;
            z-index: 1001;
        }