body { 
    font-family: 'Inter', sans-serif; 
    background-color: #09090b; /* mapped from theme('colors.background') */
    color: #f4f4f5; /* zinc-100 */
}
.font-mono { font-family: 'JetBrains Mono', monospace; }
html { scroll-behavior: smooth; }

.bg-grid {
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.code-card {
    background: #18181b; /* mapped from theme('colors.surface') */
    border: 1px solid #27272a; /* mapped from theme('colors.border') */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.token-keyword { color: #ff7b72; }
.token-function { color: #d2a8ff; }
.token-string { color: #a5d6ff; }
.token-comment { color: #8b949e; font-style: italic; }

textarea::-webkit-scrollbar { width: 6px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
textarea::-webkit-scrollbar-thumb:hover { background: #3f3f46; }