html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a;
            /* Deep slate / Navy */
            background-image:
                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0, transparent 50%),
                radial-gradient(at 50% 0%, rgba(56, 189, 248, 0.05) 0, transparent 50%),
                radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.05) 0, transparent 50%);
            color: #cbd5e1;
            line-height: 1.7;
            /* Slate 300 */
        }

        /* Typography sizing tweaks for readability */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: #f8fafc;
            /* Slate 50 */
        }

        .code-block {
            background-color: #020617;
            /* Very dark slate / almost black */
            color: #e2e8f0;
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .step-circle {
            background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            border: 2px solid rgba(15, 23, 42, 1);
            color: #ffffff;
        }

        .glass-panel {
            background: rgba(30, 41, 59, 0.6);
            /* Slate 800 with opacity */
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .readable-dark .text-slate-500 {
            color: #94a3b8;
        }

        .readable-dark .text-slate-400 {
            color: #cbd5e1;
        }

        @media (max-width: 640px) {
            .readable-dark {
                font-size: 16px;
            }

            .readable-dark .text-xs {
                font-size: 0.875rem;
                line-height: 1.6;
            }

            .readable-dark .text-sm {
                font-size: 1rem;
                line-height: 1.7;
            }

            .readable-dark [class*="text-[11px]"] {
                font-size: 0.8125rem !important;
                line-height: 1.5;
            }

            .readable-dark .p-8 {
                padding: 1.5rem;
            }

            .readable-dark .px-8 {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }

            .readable-dark .py-5 {
                padding-top: 1rem;
                padding-bottom: 1rem;
            }

            .readable-dark .space-y-12 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 2rem;
            }

            .readable-dark .space-y-8 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 1.25rem;
            }

            .readable-dark .code-block code,
            .readable-dark pre {
                white-space: pre-wrap;
                word-break: break-word;
            }

            .readable-dark .overflow-x-auto {
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
            }

            .readable-dark [class*="opacity-0 group-hover:opacity-100"] {
                opacity: 1;
            }
        }

        ::selection {
            background: rgba(99, 102, 241, 0.3);
            /* Soft indigo */
            color: #f8fafc;
        }