* {
       margin: 0;
       padding: 0;
       box-sizing: border-box
   }

   body {
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   ::-webkit-scrollbar {
       width: 6px;
       height: 6px
   }

   ::-webkit-scrollbar-thumb {
       background: #6366f1;
       border-radius: 10px
   }

   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-8px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   @keyframes scaleIn {
       from {
           opacity: 0;
           transform: scale(.9)
       }

       to {
           opacity: 1;
           transform: scale(1)
       }
   }

   @keyframes fadeIn {
       from {
           opacity: 0
       }

       to {
           opacity: 1
       }
   }

   @keyframes spin {
       to {
           transform: rotate(360deg)
       }
   }

   @keyframes toastIn {
       from {
           transform: translateX(120%);
           opacity: 0
       }

       to {
           transform: translateX(0);
           opacity: 1
       }
   }

   .slide-down {
       animation: slideDown .25s ease
   }

   .scale-in {
       animation: scaleIn .3s ease
   }

   .fade-in {
       animation: fadeIn .3s ease
   }

   .toast-anim {
       animation: toastIn .4s ease
   }

   .spin-icon {
       animation: spin 1s linear
   }

   .tab-content {
       display: none
   }

   .tab-content.active {
       display: block;
       animation: fadeIn .3s ease
   }

   .code-font {
       font-family: 'JetBrains Mono', 'Courier New', monospace
   }

   .code-block {
       background: #0f172a;
       color: #e2e8f0;
       font-family: 'JetBrains Mono', monospace;
       font-size: 12px;
       line-height: 1.6
   }

   .code-block .kw {
       color: #c084fc
   }

   .code-block .str {
       color: #86efac
   }

   .code-block .fn {
       color: #7dd3fc
   }

   .code-block .cm {
       color: #64748b;
       font-style: italic
   }

   .code-block .num {
       color: #fbbf24
   }