body { background-color: #0a0a0a; color: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; }
        h1,h2,h3,h4,.font-anton { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: rgb(28 206 84 / var(--tw-text-opacity, 0.5)); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #333 , 1 }
        ::selection { background-color: #0a0a0a ; color: black; }

        :root { --green: #1cce54; }
        .site-logo { height: 5rem; width: auto; object-fit: contain; }

        .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.5,0,0,1), transform 0.7s cubic-bezier(0.5,0,0,1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 80ms; }
        .delay-200 { transition-delay: 160ms; }

        .hero-gradient { background: linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,0.35) 100%); }

        #mobile-menu { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
        #mobile-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

        pre[class*="language-"] {
            background: #0d0d0d !important; border-radius: 0.25rem;
            border: 1px solid rgba(255,255,255,0.06); margin: 0 !important;
            padding: 1.5rem !important; overflow-x: auto; max-height: 560px;
        }
        code[class*="language-"] { font-size: 0.76rem; line-height: 1.65; }

        .hw-item { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: #d1d5db; font-size: 0.875rem; }
        .hw-item:last-child { border-bottom: none; }
        .hw-item i { color: var(--green); font-size: 1.2rem; flex-shrink: 0; }

        .dl-btn {
            display: inline-flex; align-items: center; gap: 0.6rem;
            background: #161616; border: 1px solid rgba(255,255,255,0.08);
            color: #e5e7eb; font-family: 'Anton', sans-serif; letter-spacing: 0.04em;
            font-size: 0.8rem; padding: 0.65rem 1.1rem; border-radius: 2px;
            transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
            text-decoration: none; white-space: nowrap;
        }
        .dl-btn:hover { background: #1cce54; border-color: #1cce54; color: #000; transform: translateY(-1px); }
        .dl-btn:hover i { color: #000; }
        .dl-btn i { color: #1cce54; font-size: 1.1rem; transition: color 0.2s; }
        .dl-btn-primary { background: #1cce54; border-color: #1cce54; color: #000; }
        .dl-btn-primary i { color: #000; }
        .dl-btn-primary:hover { background: #1fe05d; border-color: #1fe05d; }

        .md-col { color: #d1d5db; font-size: 0.82rem; line-height: 1.7; font-weight: 300; }
        .md-col h1,.md-col h2,.md-col h3,.md-col h4 {
            font-family: 'Anton', sans-serif; text-transform: uppercase;
            letter-spacing: 0.02em; color: #fff; margin-top: 1.1em; margin-bottom: 0.4em;
        }
        .md-col h1 { font-size: 1.1rem; color: #1cce54; margin-top: 0; }
        .md-col h2 { font-size: 1rem; }
        .md-col h3 { font-size: 0.88rem; color: #9ca3af; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 0.2em; }
        .md-col h4 { font-size: 0.82rem; color: #6ac475; }
        .md-col p { margin-bottom: 0.55em; }
        .md-col strong { font-weight: 600; color: #fff; }
        .md-col em { font-style: italic; color: #a3e6b8; }
        .md-col code { font-family: 'Courier New', monospace; font-size: 0.78em; background: rgba(28,206,84,0.1); color: #1cce54; padding: 0.1em 0.35em; border-radius: 3px; }
        .md-col ul { list-style: none; padding-left: 0; margin-bottom: 0.55em; }
        .md-col ul li { position: relative; padding-left: 1.2em; margin-bottom: 0.28em; }
        .md-col ul li::before { content: ""; position: absolute; left: 0; top: 0.56em; width: 5px; height: 5px; background: #1cce54; border-radius: 50%; }
        .md-col ul ul { margin-top: 0.2em; margin-bottom: 0; padding-left: 0.9em; }
        .md-col ul ul li::before { background: rgba(28,206,84,0.4); width: 4px; height: 4px; }
        .md-col ol { padding-left: 1.3em; margin-bottom: 0.55em; }
        .md-col ol li { margin-bottom: 0.28em; }
        .md-col hr { display: none; }
        .md-col blockquote { border-left: 3px solid #1cce54; padding-left: 0.9em; color: #9ca3af; font-style: italic; margin: 0.55em 0; }
        .md-divider { width: 1px; background: rgba(255,255,255,0.07); flex-shrink: 0; }