:root {
            color-scheme: dark;
        }

        body {
            background-color: #040409;
            color: #f8fafc;
            background-image: 
                radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.18), transparent 70%),
                radial-gradient(ellipse 40% 40% at 85% 60%, rgba(6, 182, 212, 0.08), transparent 70%),
                radial-gradient(ellipse 40% 40% at 15% 40%, rgba(139, 92, 246, 0.06), transparent 70%),
                linear-gradient(to bottom, transparent, #040409 95%),
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
            background-position: 0 0, 0 0, 0 0, 0 0, -1px -1px, -1px -1px;
            overflow-x: hidden;
        }

        .glass-panel {
            background: rgba(11, 11, 22, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .glass-panel-interactive {
            background: rgba(11, 11, 22, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.07);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-panel-interactive:hover {
            border-color: rgba(139, 92, 246, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5), 0 0 20px -5px rgba(139, 92, 246, 0.2);
        }

        .code-window {
            background: #090912;
            border: 1px solid rgba(255, 255, 255, 0.09);
            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(139, 92, 246, 0.2);
        }

        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Syntax Highlighting */
        .token-keyword { color: #f472b6; font-weight: 600; }
        .token-function { color: #38bdf8; font-weight: 500; }
        .token-string { color: #34d399; }
        .token-comment { color: #64748b; font-style: italic; }
        .token-number { color: #fb923c; }
        .token-type { color: #fbbf24; }
        .token-operator { color: #a78bfa; }
        .token-variable { color: #e2e8f0; }
        .token-boolean { color: #f43f5e; font-weight: 600; }

        /* Code Line Numbering */
        .line-numbers code {
            counter-reset: step;
            counter-increment: step 0;
        }
        .line-numbers code .line::before {
            content: counter(step);
            counter-increment: step;
            width: 1.5rem;
            margin-right: 1.25rem;
            display: inline-block;
            text-align: right;
            color: #334155;
            user-select: none;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #040409;
        }
        ::-webkit-scrollbar-thumb {
            background: #1e1e38;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #2e2e50;
        }

        /* Toast Animation */
        #toast {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        }

        /* Playground Editor textarea */
        .editor-textarea {
            tab-size: 2;
            caret-color: #38bdf8;
            resize: none;
        }