/* AI MV Maker - Custom Styles */
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
 
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background-color: #000;
   color: #fff;
   min-height: 100vh;
 }
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
 }
 ::-webkit-scrollbar-track {
   background: #111;
 }
 ::-webkit-scrollbar-thumb {
   background: #333;
   border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
 
 /* Focus styles */
 *:focus-visible {
   outline: 2px solid #7c3aed;
   outline-offset: 2px;
 }
 
 /* Selection */
 ::selection {
   background-color: #7c3aed;
   color: #fff;
 }
 
 /* Line clamp */
 .line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
 .line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
 /* Prose styling for blog content */
 .prose h2 {
   font-size: 1.5rem;
   font-weight: 700;
   color: #fff;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .prose h3 {
   font-size: 1.25rem;
   font-weight: 600;
   color: #fff;
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
 
 .prose p {
   margin-bottom: 1rem;
   line-height: 1.75;
 }
 
 .prose ul, .prose ol {
   margin-bottom: 1rem;
   padding-left: 1.5rem;
 }
 
 .prose li {
   margin-bottom: 0.5rem;
 }
 
 .prose a {
   color: #a78bfa;
   text-decoration: underline;
 }
 
 .prose a:hover {
   color: #c4b5fd;
 }
 
 .prose strong {
   color: #fff;
 }
 
 .prose blockquote {
   border-left: 3px solid #7c3aed;
   padding-left: 1rem;
   margin: 1rem 0;
   color: #9ca3af;
   font-style: italic;
 }
 
 .prose code {
   background: #1f1f1f;
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
   font-size: 0.875rem;
 }
 
 .prose pre {
   background: #1f1f1f;
   padding: 1rem;
   border-radius: 8px;
   overflow-x: auto;
   margin: 1rem 0;
 }
 
 .prose img {
   max-width: 100%;
   border-radius: 8px;
   margin: 1.5rem 0;
 }
 
 /* Animations */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
 
 .animate-fade-in {
   animation: fadeIn 0.5s ease-out;
 }
 
 .animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 /* Form styles */
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="password"]:focus,
 input[type="url"]:focus,
 input[type="number"]:focus,
 textarea:focus,
 select:focus {
   border-color: #7c3aed;
   box-shadow: 0 0 0 1px #7c3aed;
 }
 
 /* Button hover transitions */
 button, a {
   transition: all 0.15s ease;
 }