@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
    
    :root {
      --accent: #67f6ff;
    }
    
    body {
      font-family: 'Inter', system_ui, sans-serif;
    }
    
    .font-display {
      font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    .book-card {
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                  box-shadow 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
      background: #18181b;
    }
    
    .book-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 
                  0 8px 10px -6px rgb(0 0 0 / 0.1),
                  0 0 0 1px #27272a;
    }

    .cover-container {
      aspect-ratio: 2 / 3;
      overflow: hidden;
      background: #111113;
      position: relative;
    }

    .cover-container img {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                  filter 0.3s ease;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .book-card:hover .cover-container img {
      transform: scale(1.04);
    }

    .section-header {
      font-size: 1.1rem;
      letter-spacing: 0.05em;
      font-weight: 600;
      color: #a1a1aa;
    }

    .blurb-clamp {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nav-active {
      color: #67f6ff;
      border-bottom: 2px solid #67f6ff;
    }

    .modal {
      animation: modalEnter 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes modalEnter {
      from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .sci-fi-grid {
      background-image: 
        linear-gradient(rgba(103, 246, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 246, 255, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    .arc-badge {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 1px 9px;
      border-radius: 9999px;
    }

    .book-number {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }

    .starfield {
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(1px 1px at 20px 30px, white, transparent),
        radial-gradient(1px 1px at 90px 80px, white, transparent),
        radial-gradient(1px 1px at 140px 20px, white, transparent),
        radial-gradient(1px 1px at 300px 120px, white, transparent),
        radial-gradient(1px 1px at 450px 40px, #67f6ff, transparent);
      background-size: 520px 220px;
      opacity: 0.6;
      pointer-events: none;
    }

    .nav {
      backdrop-filter: blur(12px);
    }

    .book-modal-cover {
      box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6),
                  0 10px 10px -6px rgb(0 0 0 / 0.5),
                  0 0 0 1px #27272a;
    }

    .stat {
      font-variant-numeric: tabular-nums;
    }