@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;font-weight:400;color-scheme:dark;color:#fffffff2;--primary-color: #6366f1;--primary-hover: #818cf8;--secondary-color: #8b5cf6;--accent-color: #ec4899;--accent-hover: #f472b6;--bg-primary: #0a0a0f;--bg-secondary: #111118;--bg-tertiary: #1a1a24;--bg-glass: rgba(26, 26, 36, .7);--bg-glass-hover: rgba(26, 26, 36, .9);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);--gradient-secondary: linear-gradient(135deg, #1e1e2f 0%, #2a2a3b 100%);--gradient-text: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);--gradient-overlay: linear-gradient(180deg, rgba(10, 10, 15, 0) 0%, rgba(10, 10, 15, .8) 100%);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(99, 102, 241, .3);--shadow-glow-hover: 0 0 30px rgba(99, 102, 241, .5);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}*{box-sizing:border-box}a{font-weight:500;color:var(--primary-color);text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}a:hover{color:var(--primary-hover)}a:after{content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background:var(--gradient-primary);transition:width .3s cubic-bezier(.4,0,.2,1)}a:hover:after{width:100%}body{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:320px;min-height:100vh;background:var(--bg-primary);background-image:radial-gradient(at 0% 0%,rgba(99,102,241,.1) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,.1) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(236,72,153,.05) 0px,transparent 50%);background-attachment:fixed;color:var(--text-primary);overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:700;margin:0;letter-spacing:-.02em;line-height:1.2}h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:600}p{line-height:1.7;color:var(--text-secondary)}button{border-radius:var(--radius-md);border:1px solid transparent;padding:.75em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background:var(--gradient-primary);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:var(--shadow-md)}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}button:hover:before{left:100%}button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}button:active{transform:translateY(0)}button:focus,button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .6s ease-out forwards}@keyframes staggerFadeIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.stagger-item{opacity:0;animation:staggerFadeIn .6s ease-out forwards}.stagger-item:nth-child(1){animation-delay:.1s}.stagger-item:nth-child(2){animation-delay:.2s}.stagger-item:nth-child(3){animation-delay:.3s}.stagger-item:nth-child(4){animation-delay:.4s}.stagger-item:nth-child(5){animation-delay:.5s}@media (max-width: 768px){h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}#root{max-width:1400px;margin:0 auto;padding:var(--spacing-lg);text-align:center;width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.4,0,.2,1);position:sticky;top:var(--spacing-md);z-index:100}header:hover{background:var(--bg-glass-hover);box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-2px)}header h1{font-size:clamp(1.5rem,3vw,2rem);margin:0;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}nav ul{list-style:none;display:flex;gap:var(--spacing-md);padding:0;margin:0;align-items:center}nav li{position:relative}nav a{color:var(--text-secondary);font-weight:500;font-size:.95rem;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:block}nav a:after{display:none}nav a:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-primary);border-radius:var(--radius-sm);opacity:0;transition:opacity .3s ease;z-index:-1}nav a:hover{color:var(--text-primary);transform:translateY(-2px)}nav a:hover:before{opacity:.1}main{display:flex;flex-direction:column;gap:var(--spacing-xl);animation:fadeIn .8s ease-out}section{padding:var(--spacing-xl);background:var(--bg-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-primary);text-align:left;box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}section:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}section:hover:before{opacity:1}section:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:#6366f14d}section h2{font-size:clamp(2rem,4vw,2.5rem);margin-bottom:var(--spacing-md);background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}section#about{text-align:center}section#about p{font-size:1.1rem;max-width:700px;margin:0 auto;line-height:1.8;color:var(--text-secondary)}footer{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--bg-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-secondary);text-align:center;box-shadow:var(--shadow-md)}footer p{margin:0;font-size:.9rem}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--spacing-lg);padding:var(--spacing-md) 0}.project-card{background:var(--bg-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);text-align:center;color:var(--text-primary);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column}.project-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-primary);opacity:0;transition:opacity .4s ease;z-index:0;border-radius:var(--radius-lg)}.project-card:hover:before{opacity:.05}.project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg),var(--shadow-glow-hover);border-color:#6366f166}.project-card>*{position:relative;z-index:1}.project-image-container{width:100%;height:220px;overflow:hidden;position:relative;background:var(--bg-tertiary);border-radius:var(--radius-md) var(--radius-md) 0 0}.project-image{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1);border-radius:var(--radius-md) var(--radius-md) 0 0}.project-image-container:hover .project-image{transform:scale(1.1)}.image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gradient-overlay);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.project-image-container:hover .image-overlay{opacity:1}.image-overlay span{background:var(--bg-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:.9rem;font-weight:600;border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow-md);transform:translateY(10px);transition:transform .3s ease}.project-image-container:hover .image-overlay span{transform:translateY(0)}.project-card h3{font-size:1.5rem;margin:var(--spacing-md) var(--spacing-md) var(--spacing-xs);color:var(--text-primary);font-weight:700}.project-date{font-size:.85rem;color:var(--text-tertiary);margin:0 var(--spacing-md) var(--spacing-sm);font-style:italic;font-weight:400}.project-card p{font-size:1rem;margin:0 var(--spacing-md) var(--spacing-md);line-height:1.6;color:var(--text-secondary);flex-grow:1}.project-links{display:flex;justify-content:center;gap:var(--spacing-sm);margin:0 var(--spacing-md) var(--spacing-md);flex-wrap:wrap}.project-card button{margin:0;padding:.65em 1.3em;font-size:.95rem;font-weight:600;color:#fff;background:var(--gradient-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);min-width:120px}.project-card button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--shadow-glow)}.github-link button{background:var(--bg-tertiary);border:1px solid rgba(255,255,255,.1);color:var(--text-primary)}.github-link button:hover{background:var(--bg-secondary);border-color:#6366f180;box-shadow:var(--shadow-md)}.github-link button:before{display:none}.loader{display:flex;justify-content:center;align-items:center;height:100vh;background:var(--bg-primary);background-image:radial-gradient(at 0% 0%,rgba(99,102,241,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,.15) 0px,transparent 50%);position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;animation:fadeIn .3s ease-out}.atom{position:relative;width:120px;height:120px;animation:spin 4s linear infinite}.nucleus{width:24px;height:24px;background:var(--gradient-primary);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #6366f199,0 0 40px #8b5cf666;animation:pulse 2s ease-in-out infinite}.electron{width:12px;height:12px;background:var(--gradient-primary);border-radius:50%;position:absolute;box-shadow:0 0 10px #6366f1cc}.orbit-1{animation:orbit-1 2s linear infinite}.orbit-2{animation:orbit-2 3s linear infinite}.orbit-3{animation:orbit-3 4s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}@keyframes orbit-1{0%{top:0;left:50%;transform:translate(-50%)}25%{top:50%;left:100%;transform:translate(-50%,-50%)}50%{top:100%;left:50%;transform:translate(-50%,-100%)}75%{top:50%;left:0;transform:translate(-50%,-50%)}to{top:0;left:50%;transform:translate(-50%)}}@keyframes orbit-2{0%{top:50%;left:0;transform:translateY(-50%)}25%{top:0;left:50%;transform:translate(-50%)}50%{top:50%;left:100%;transform:translate(-100%,-50%)}75%{top:100%;left:50%;transform:translate(-50%,-100%)}to{top:50%;left:0;transform:translateY(-50%)}}@keyframes orbit-3{0%{top:100%;left:50%;transform:translate(-50%,-100%)}25%{top:50%;left:0;transform:translateY(-50%)}50%{top:0;left:50%;transform:translate(-50%)}75%{top:50%;left:100%;transform:translate(-100%,-50%)}to{top:100%;left:50%;transform:translate(-50%,-100%)}}section#contact{text-align:center}section#contact p{font-size:1.1rem;color:var(--text-secondary)}section#contact a{color:var(--primary-color);font-weight:600;font-size:1.1rem;transition:all .3s ease;display:inline-block;margin-left:.5rem}section#contact a:hover{color:var(--primary-hover);transform:translateY(-2px)}section#contact a:after{width:100%;height:2px}@media (max-width: 768px){#root{padding:var(--spacing-md)}header{flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md);position:relative;top:0}nav ul{flex-direction:column;gap:var(--spacing-sm);width:100%}nav a{width:100%;text-align:center;padding:var(--spacing-sm)}section{padding:var(--spacing-md)}.projects-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.project-links{flex-direction:column}.project-card button{width:100%}}@media (max-width: 480px){#root{padding:var(--spacing-sm)}section{padding:var(--spacing-sm)}.project-image-container{height:180px}}html{scroll-behavior:smooth}::selection{background:#6366f14d;color:var(--text-primary)}::-moz-selection{background:#6366f14d;color:var(--text-primary)}.media-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.media-modal-content{position:relative;max-width:90%;max-height:90%;overflow:hidden}.media-modal-close{position:absolute;top:10px;right:10px;background:#00000080;border:none;color:#fff;font-size:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1001}.media-modal-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:4px;transform-origin:center;animation:fadeIn .3s ease}.media-modal-content video{max-width:100%;max-height:80vh;border-radius:4px}.youtube-embed{width:80vw;height:45vw;max-width:1024px;max-height:576px;border-radius:4px;border:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.maintenance-container{display:flex;justify-content:center;align-items:center;height:100vh;background:url(/path/to/your/background-image.jpg) no-repeat center center;background-size:cover;color:#fff;text-align:center;font-family:Arial,sans-serif;padding:20px}.maintenance-content{background:#000000b3;padding:30px;border-radius:10px;box-shadow:0 4px 10px #0000004d}.maintenance-title{font-size:2.5rem;margin-bottom:1rem}.maintenance-message{font-size:1.2rem;margin-bottom:1.5rem}.maintenance-button{background-color:#ff6b6b;color:#fff;border:none;padding:10px 20px;font-size:1rem;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.maintenance-button:hover{background-color:#ff4c4c}
