body { margin: 0; font-family: "Segoe UI", sans-serif; background: #000; color: #e8ffe8; } .header { padding: 20px; text-align: center; background: #0a0a0a; border-bottom: 2px solid #00ff66; } .logo { font-size: 1.8rem; font-weight: 700; color: #00ff66; } .hero { text-align: center; padding: 40px 20px; } .hero-title { font-size: 2rem; font-weight: 700; color: #00ff66; } .hero-subtitle { font-size: 1rem; color: #b5ffcf; } .drill-card { background: #111; margin: 20px auto; padding: 24px; border-radius: 12px; max-width: 600px; border: 1px solid #00ff66; box-shadow: 0 0 20px rgba(0, 255, 102, 0.2); } .pill-row { display: flex; gap: 8px; margin-bottom: 12px; } .pill { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; background: #00ff66; color: #000; font-weight: 600; } .drill-title { font-size: 1.4rem; margin-bottom: 10px; color: #00ff66; } .drill-description { font-size: 1rem; line-height: 1.5; margin-bottom: 12px; } .drill-meta { font-size: 0.85rem; color: #b5ffcf; margin-bottom: 20px; } .buttons { display: flex; justify-content: center; margin-bottom: 20px; } .primary { background: #00ff66; color: #000; border: none; padding: 12px 20px; border-radius: 999px; font-size: 1rem; cursor: pointer; font-weight: 700; } .filters { display: flex; gap: 10px; justify-content: center; } select { background: #000; color: #00ff66; border: 1px solid #00ff66; padding: 8px 12px; border-radius: 999px; } .footer { text-align: center; padding: 20px; color: #00ff66; margin-top: 40px; }