body { font-family: 'Inter', sans-serif; color: #4a4a4a; }
.nav-item.active { border-bottom: 2px solid #d97706; color: #1f2937; font-weight: 600; }
.canvas-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.node-enter { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Custom Scrollbar for code blocks */
.code-scroll::-webkit-scrollbar { width: 8px; }
.code-scroll::-webkit-scrollbar-track { background: #292524; }
.code-scroll::-webkit-scrollbar-thumb { background: #57534e; border-radius: 4px; }
.code-scroll::-webkit-scrollbar-thumb:hover { background: #78716c; }

/* Chart container constraint classes */
.chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    max-height: 400px;
}
@media (min-width: 768px) { .chart-wrapper { height: 350px; } }
/* Floating Animation */
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }
@keyframes float-reverse { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(20px) rotate(-5deg); } }
.animate-float-slow { animation: float 8s ease-in-out infinite; }
.animate-float-medium { animation: float-reverse 6s ease-in-out infinite; }
.animate-float-fast { animation: float 4s ease-in-out infinite; }
.floating-obj { position: absolute; pointer-events: none; z-index: 0; }