@import "output.css";

    :root {
      --bg-color: #0a0a0f;
      --surface-color: #141420;
      --text-color: #e8e6f0;
      --primary-color: #7c3aed;
      --secondary-color: #22d3ee;
    }
    html, body { height: 100%; }
    body {
      font-family: 'Crimson Pro', Georgia, serif;
      background: var(--bg-color);
      color: var(--text-color);
    }
    .mono { 
      font-family: 'JetBrains Mono', monospace;
     }
    .glass {
      background: rgba(20, 20, 32, 0.7);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(124, 58, 237, 0.2);
    }
    .grid-bg {
      background-image: 
        linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .math-block {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(34, 211, 238, 0.05));
      border-left: 3px solid var(--primary-color);
    }
    .vector-canvas {
      background: radial-gradient(circle at center, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
    }
    .glow { box-shadow: 0 0 30px rgba(124, 58, 237, 0.3); }
    .example-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .example-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 40px rgba(124, 58, 237, 0.2);
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-in { 
      animation: fadeInUp 0.6s ease forwards; 
    }
    .delay-1 { animation-delay: 0.1s; opacity: 0; }
    .delay-2 { animation-delay: 0.2s; opacity: 0; }
    .delay-3 { animation-delay: 0.3s; opacity: 0; }
    .matrix {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      padding: 0 8px;
    }
    .matrix::before, .matrix::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 6px;
      border: 2px solid var(--secondary-color);
    }
    .matrix::before { 
      left: 0; border-right: none; border-radius: 4px 0 0 4px; 
    }
    .matrix::after { 
      right: 0; border-left: none; border-radius: 0 4px 4px 0; 
    }
    .matrix-row { 
      display: flex; 
      gap: 12px; 
      justify-content: center; 
      padding: 2px 8px; 
    }
    
    input[type="range"] {
      -webkit-appearance: none;
      background: rgba(124, 58, 237, 0.3);
      border-radius: 4px;
      height: 6px;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      background: var(--secondary-color);
      border-radius: 50%;
      cursor: pointer;
    }
    .tab-btn {
      transition: all 0.3s ease;
    }
    .tab-btn.active {
      background: var(--primary-color);
      color: white;
    }
    .icon-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.25rem;
    }