:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;background-image:radial-gradient(circle at var(--x-0) var(--y-0),var(--c-0) var(--s-start-0),transparent var(--s-end-0)),radial-gradient(circle at var(--x-1) var(--y-1),var(--c-1) var(--s-start-1),transparent var(--s-end-1)),radial-gradient(circle at var(--x-2) var(--y-2),var(--c-2) var(--s-start-2),transparent var(--s-end-2)),radial-gradient(circle at var(--x-3) var(--y-3),var(--c-3) var(--s-start-3),transparent var(--s-end-3)),radial-gradient(circle at var(--x-4) var(--y-4),var(--c-4) var(--s-start-4),transparent var(--s-end-4)),radial-gradient(circle at var(--x-5) var(--y-5),var(--c-5) var(--s-start-5),transparent var(--s-end-5)),radial-gradient(circle at var(--x-6) var(--y-6),var(--c-6) var(--s-start-6),transparent var(--s-end-6)),radial-gradient(circle at var(--x-7) var(--y-7),var(--c-7) var(--s-start-7),transparent var(--s-end-7)),radial-gradient(circle at var(--x-8) var(--y-8),var(--c-8) var(--s-start-8),transparent var(--s-end-8)),radial-gradient(circle at var(--x-9) var(--y-9),var(--c-9) var(--s-start-9),transparent var(--s-end-9));animation:hero-gradient-animation 10s linear infinite alternate;background-blend-mode:normal,normal,normal,normal,normal,normal,normal,normal,normal,normal;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:block;place-items:center;min-width:320px;min-height:100vh}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@keyframes hero-gradient-animation{0%{--c-0: hsla(212, 0%, 0%, 1);--x-0: 93%;--s-start-0: 14.489998991212337%;--s-end-0: 72%;--y-0: 93%;--y-1: 9%;--s-start-1: 0%;--s-end-1: 45%;--x-1: 26%;--c-1: hsla(212, 0%, 0%, 1);--y-2: 79%;--x-2: 15%;--c-2: hsla(257.14285714285717, 91%, 27%, .35);--s-start-2: 2.9253667596993065%;--s-end-2: 22.388851682060018%;--s-start-3: 3.985353824694249%;--s-end-3: 47.580278608924694%;--x-3: 40%;--y-3: 104%;--c-3: hsla(212.47058823529412, 100%, 50%, .5);--c-4: hsla(224.44444444444443, 72%, 36%, 1);--x-4: 0%;--y-4: 60%;--s-start-4: 2.391200382592061%;--s-end-4: 29.307684556768592%;--c-5: hsla(248.30769230769235, 52%, 24%, 1);--x-5: 92%;--s-start-5: 2.9253667596993065%;--s-end-5: 22.388851682060018%;--y-5: 37%;--s-start-6: 13.173642363290591%;--s-end-6: 31.747336520355095%;--x-6: 101%;--y-6: 16%;--c-6: hsla(212.47058823529412, 100%, 50%, .19);--c-7: hsla(227.6470588235294, 98%, 53%, 1);--x-7: 90%;--s-start-7: 1%;--s-end-7: 31%;--y-7: 13%;--y-8: 56%;--x-8: 104%;--s-start-8: 3.985353824694249%;--s-end-8: 13.103042116379756%;--c-8: hsla(166.53061224489795, 71%, 60%, .32);--y-9: 19%;--s-start-9: 18.597054544690312%;--s-end-9: 31%;--c-9: hsla(219.2079207920792, 83%, 23%, .18);--x-9: 97%}to{--c-0: hsla(306, 0%, 0%, 1);--x-0: 7%;--s-start-0: 2.391200382592061%;--s-end-0: 43.902064173373226%;--y-0: 9%;--y-1: 93%;--s-start-1: 9%;--s-end-1: 54.805582404585024%;--x-1: 96%;--c-1: hsla(306, 0%, 0%, 1);--y-2: 103%;--x-2: -2%;--c-2: hsla(166.53061224489795, 72%, 60%, 1);--s-start-2: 3%;--s-end-2: 26.722813338714598%;--s-start-3: 2.391200382592061%;--s-end-3: 32.0689540200964%;--x-3: 33%;--y-3: 82%;--c-3: hsla(180, 100%, 50%, .26);--c-4: hsla(212.43243243243245, 88%, 26%, .58);--x-4: 37%;--y-4: 81%;--s-start-4: 4.40642490323111%;--s-end-4: 37.23528104246256%;--c-5: hsla(271.9148936170212, 98%, 53%, .31);--x-5: 54%;--s-start-5: 3%;--s-end-5: 32.537089799783296%;--y-5: 99%;--s-start-6: 6%;--s-end-6: 42.501105312974815%;--x-6: 104%;--y-6: 43%;--c-6: hsla(262.82352941176475, 100%, 50%, .15);--c-7: hsla(298.60465116279073, 36%, 23%, 1);--x-7: 104%;--s-start-7: 5%;--s-end-7: 13.10107024898374%;--y-7: -16%;--y-8: 30%;--x-8: 97%;--s-start-8: 2.391200382592061%;--s-end-8: 27.141813016850573%;--c-8: hsla(180, 100%, 50%, .11);--y-9: 4%;--s-start-9: 5%;--s-end-9: 21.32164536610654%;--c-9: hsla(219.2079207920792, 83%, 23%, .59);--x-9: 78%}}@property --c-0{syntax: "<color>"; inherits: false; initial-value: hsla(212,0%,0%,1);}@property --x-0{syntax: "<percentage>"; inherits: false; initial-value: 93%;}@property --s-start-0{syntax: "<percentage>"; inherits: false; initial-value: 14.489998991212337%;}@property --s-end-0{syntax: "<percentage>"; inherits: false; initial-value: 72%;}@property --y-0{syntax: "<percentage>"; inherits: false; initial-value: 93%;}@property --y-1{syntax: "<percentage>"; inherits: false; initial-value: 9%;}@property --s-start-1{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@property --s-end-1{syntax: "<percentage>"; inherits: false; initial-value: 45%;}@property --x-1{syntax: "<percentage>"; inherits: false; initial-value: 26%;}@property --c-1{syntax: "<color>"; inherits: false; initial-value: hsla(212,0%,0%,1);}@property --y-2{syntax: "<percentage>"; inherits: false; initial-value: 79%;}@property --x-2{syntax: "<percentage>"; inherits: false; initial-value: 15%;}@property --c-2{syntax: "<color>"; inherits: false; initial-value: hsla(257.14285714285717,91%,27%,.35);}@property --s-start-2{syntax: "<percentage>"; inherits: false; initial-value: 2.9253667596993065%;}@property --s-end-2{syntax: "<percentage>"; inherits: false; initial-value: 22.388851682060018%;}@property --s-start-3{syntax: "<percentage>"; inherits: false; initial-value: 3.985353824694249%;}@property --s-end-3{syntax: "<percentage>"; inherits: false; initial-value: 47.580278608924694%;}@property --x-3{syntax: "<percentage>"; inherits: false; initial-value: 40%;}@property --y-3{syntax: "<percentage>"; inherits: false; initial-value: 104%;}@property --c-3{syntax: "<color>"; inherits: false; initial-value: hsla(212.47058823529412,100%,50%,.5);}@property --c-4{syntax: "<color>"; inherits: false; initial-value: hsla(224.44444444444443,72%,36%,1);}@property --x-4{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@property --y-4{syntax: "<percentage>"; inherits: false; initial-value: 60%;}@property --s-start-4{syntax: "<percentage>"; inherits: false; initial-value: 2.391200382592061%;}@property --s-end-4{syntax: "<percentage>"; inherits: false; initial-value: 29.307684556768592%;}@property --c-5{syntax: "<color>"; inherits: false; initial-value: hsla(248.30769230769235,52%,24%,1);}@property --x-5{syntax: "<percentage>"; inherits: false; initial-value: 92%;}@property --s-start-5{syntax: "<percentage>"; inherits: false; initial-value: 2.9253667596993065%;}@property --s-end-5{syntax: "<percentage>"; inherits: false; initial-value: 22.388851682060018%;}@property --y-5{syntax: "<percentage>"; inherits: false; initial-value: 37%;}@property --s-start-6{syntax: "<percentage>"; inherits: false; initial-value: 13.173642363290591%;}@property --s-end-6{syntax: "<percentage>"; inherits: false; initial-value: 31.747336520355095%;}@property --x-6{syntax: "<percentage>"; inherits: false; initial-value: 101%;}@property --y-6{syntax: "<percentage>"; inherits: false; initial-value: 16%;}@property --c-6{syntax: "<color>"; inherits: false; initial-value: hsla(212.47058823529412,100%,50%,.19);}@property --c-7{syntax: "<color>"; inherits: false; initial-value: hsla(227.6470588235294,98%,53%,1);}@property --x-7{syntax: "<percentage>"; inherits: false; initial-value: 90%;}@property --s-start-7{syntax: "<percentage>"; inherits: false; initial-value: 1%;}@property --s-end-7{syntax: "<percentage>"; inherits: false; initial-value: 31%;}@property --y-7{syntax: "<percentage>"; inherits: false; initial-value: 13%;}@property --y-8{syntax: "<percentage>"; inherits: false; initial-value: 56%;}@property --x-8{syntax: "<percentage>"; inherits: false; initial-value: 104%;}@property --s-start-8{syntax: "<percentage>"; inherits: false; initial-value: 3.985353824694249%;}@property --s-end-8{syntax: "<percentage>"; inherits: false; initial-value: 13.103042116379756%;}@property --c-8{syntax: "<color>"; inherits: false; initial-value: hsla(166.53061224489795,71%,60%,.32);}@property --y-9{syntax: "<percentage>"; inherits: false; initial-value: 19%;}@property --s-start-9{syntax: "<percentage>"; inherits: false; initial-value: 18.597054544690312%;}@property --s-end-9{syntax: "<percentage>"; inherits: false; initial-value: 31%;}@property --c-9{syntax: "<color>"; inherits: false; initial-value: hsla(219.2079207920792,83%,23%,.18);}@property --x-9{syntax: "<percentage>"; inherits: false; initial-value: 97%;}.your_css_selector_here{--c-0: hsla(212, 0%, 0%, 1);--x-0: 93%;--y-0: 93%;--y-1: 9%;--x-1: 26%;--c-1: hsla(212, 0%, 0%, 1);--y-2: 79%;--x-2: 15%;--c-2: hsla(257.14285714285717, 91%, 27%, .35);--x-3: 40%;--y-3: 104%;--c-3: hsla(212.47058823529412, 100%, 50%, .5);--c-4: hsla(224.44444444444443, 72%, 36%, 1);--x-4: 0%;--y-4: 60%;--c-5: hsla(248.30769230769235, 52%, 24%, 1);--x-5: 92%;--y-5: 37%;--x-6: 101%;--y-6: 16%;--c-6: hsla(212.47058823529412, 100%, 50%, .19);--c-7: hsla(227.6470588235294, 98%, 53%, 1);--x-7: 90%;--y-7: 13%;--y-8: 56%;--x-8: 104%;--c-8: hsla(166.53061224489795, 71%, 60%, .32);--y-9: 19%;--c-9: hsla(219.2079207920792, 83%, 23%, .18);--x-9: 97%;background-color:#000;background-image:radial-gradient(circle at var(--x-0) var(--y-0),var(--c-0) var(--s-start-0),transparent var(--s-end-0)),radial-gradient(circle at var(--x-1) var(--y-1),var(--c-1) var(--s-start-1),transparent var(--s-end-1)),radial-gradient(circle at var(--x-2) var(--y-2),var(--c-2) var(--s-start-2),transparent var(--s-end-2)),radial-gradient(circle at var(--x-3) var(--y-3),var(--c-3) var(--s-start-3),transparent var(--s-end-3)),radial-gradient(circle at var(--x-4) var(--y-4),var(--c-4) var(--s-start-4),transparent var(--s-end-4)),radial-gradient(circle at var(--x-5) var(--y-5),var(--c-5) var(--s-start-5),transparent var(--s-end-5)),radial-gradient(circle at var(--x-6) var(--y-6),var(--c-6) var(--s-start-6),transparent var(--s-end-6)),radial-gradient(circle at var(--x-7) var(--y-7),var(--c-7) var(--s-start-7),transparent var(--s-end-7)),radial-gradient(circle at var(--x-8) var(--y-8),var(--c-8) var(--s-start-8),transparent var(--s-end-8)),radial-gradient(circle at var(--x-9) var(--y-9),var(--c-9) var(--s-start-9),transparent var(--s-end-9));animation:hero-gradient-animation 10s linear infinite alternate;background-blend-mode:normal,normal,normal,normal,normal,normal,normal,normal,normal,normal}.portfolio-container{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;background-image:radial-gradient(circle at var(--x-0) var(--y-0),var(--c-0) var(--s-start-0),transparent var(--s-end-0)),radial-gradient(circle at var(--x-1) var(--y-1),var(--c-1) var(--s-start-1),transparent var(--s-end-1)),radial-gradient(circle at var(--x-2) var(--y-2),var(--c-2) var(--s-start-2),transparent var(--s-end-2)),radial-gradient(circle at var(--x-3) var(--y-3),var(--c-3) var(--s-start-3),transparent var(--s-end-3)),radial-gradient(circle at var(--x-4) var(--y-4),var(--c-4) var(--s-start-4),transparent var(--s-end-4)),radial-gradient(circle at var(--x-5) var(--y-5),var(--c-5) var(--s-start-5),transparent var(--s-end-5)),radial-gradient(circle at var(--x-6) var(--y-6),var(--c-6) var(--s-start-6),transparent var(--s-end-6)),radial-gradient(circle at var(--x-7) var(--y-7),var(--c-7) var(--s-start-7),transparent var(--s-end-7)),radial-gradient(circle at var(--x-8) var(--y-8),var(--c-8) var(--s-start-8),transparent var(--s-end-8)),radial-gradient(circle at var(--x-9) var(--y-9),var(--c-9) var(--s-start-9),transparent var(--s-end-9));animation:hero-gradient-animation 10s linear infinite alternate;background-blend-mode:normal,normal,normal,normal,normal,normal,normal,normal,normal,normal;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.navbar{position:fixed;top:0;width:100%;padding:1rem;background:#24242466;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;z-index:1000;border-bottom:1px solid rgba(255,255,255,.1)}.nav-brand{font-size:1.5rem;font-weight:700;color:#eeefff}.nav-brand .logo{height:50px;width:auto;transition:transform .3s ease}.nav-brand .logo:hover{transform:scale(1.05)}.nav-links{display:flex;gap:2rem;width:550px}.nav-links a{color:#ffffffde;text-decoration:none;font-weight:500;transition:color .3s ease}.nav-links a:hover{color:#646cff}.nav-links a.active{color:#646cff;font-weight:700;border-bottom:2px solid #646cff;padding-bottom:2px}.hero-section{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 2rem;margin-top:60px}.hero-content{max-width:800px}.hero-title{font-size:3.5rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(135deg,#646cff,#61dafb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.5rem;color:#646cff;margin-bottom:1.5rem}.hero-description{font-size:1.1rem;margin-bottom:2rem;opacity:.9}.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.primary-btn,.secondary-btn{padding:.8rem 2rem;border-radius:8px;border:none;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.primary-btn{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #646cff4d}.secondary-btn{background:transparent;color:#646cff;border:2px solid #646cff}.secondary-btn:hover{background:#646cff;color:#fff;transform:translateY(-2px)}section{padding:4rem 2rem;max-width:1200px;margin:0 auto}section h2{font-size:2.5rem;text-align:center;margin-bottom:3rem;color:#646cff}.about-content{max-width:800px;margin:0 auto;text-align:center}.about-text p{margin-bottom:1.5rem;font-size:1.1rem;opacity:.9}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:2rem}.project-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .3s ease}.project-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #646cff33;border-color:#646cff}.project-card h3{color:#646cff;margin-bottom:1rem;font-size:1.3rem}.project-card p{margin-bottom:1.5rem;opacity:.9}.project-tech{display:flex;flex-wrap:wrap;gap:.5rem}.tech-tag{background:#646cff33;color:#646cff;padding:.3rem .8rem;border-radius:20px;font-size:.9rem;border:1px solid rgba(100,108,255,.3)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2rem}.skill-item{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;text-align:center;transition:all .3s ease}.skill-item:hover{background:#646cff33;border-color:#646cff;transform:translateY(-2px)}.contact-content{max-width:600px;margin:0 auto;text-align:center}.contact-content p{margin-bottom:2rem;font-size:1.1rem;opacity:.9}.contact-info{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;margin-bottom:2rem}.contact-info p{margin-bottom:.5rem;opacity:.9}.footer{text-align:center;padding:2rem;border-top:1px solid rgba(255,255,255,.1);opacity:.7}@media (max-width: 768px){.navbar{flex-direction:column;gap:1rem}.nav-links{gap:1rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.2rem}.hero-buttons{flex-direction:column;align-items:center}.projects-grid{grid-template-columns:1fr}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}section{padding:3rem 1rem}section h2{font-size:2rem}}html{scroll-behavior:smooth}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.project-card,.skill-item{animation:fadeInUp .6s ease-out}