: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:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}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}}.about-me{opacity:0;transform:translate(100%);transition:opacity 1s ease-out,transform 1s ease-out}.about-me.slide-in{opacity:1;transform:translate(0)}.title{font-size:2em;margin-bottom:.5em}p{font-size:1.2em;line-height:1.6}.experience-wrapper{padding:60px 20px;max-width:1000px;margin:0 auto;font-family:sans-serif}.title{text-align:center;font-size:32px;font-weight:700;margin-bottom:40px}.timeline{position:relative;margin:0 auto;padding-left:20px;border-left:3px solid #ddd;max-width:600px}.timeline-item{position:relative;margin:60px 0;display:flex;justify-content:flex-start;transition:transform .3s ease;cursor:pointer}.timeline-item.right{justify-content:flex-end}.timeline-item:hover .content-box{transform:scale(1.02)}.timeline-dot{position:absolute;top:20px;left:50%;transform:translate(-50%);width:20px;height:20px;background:#fff;border:4px solid #000;border-radius:50%;transition:transform .3s ease;z-index:1}.timeline-dot.active{transform:translate(-50%) scale(1.4);background:#000}.timeline-item.left .content-box{margin-right:auto;margin-left:0;text-align:right}.timeline-item.right .content-box{margin-left:auto;margin-right:0;text-align:left}.content-box{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 12px #0000001a;transform:scale(1);transition:transform .3s ease;width:fit-content;max-width:500px;position:relative;z-index:2}.content-box.expanded{background:#f9f9f9}.company{font-size:14px;color:#666;margin-bottom:10px}.details ul{padding-left:20px;margin-top:10px}.details li{margin-bottom:10px}.tech-stack{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}.tech-chip{background:#000;color:#fff;font-size:12px;padding:4px 10px;border-radius:999px}.icon{color:#007bff;margin-right:8px}.projects-wrapper{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;padding:60px 20px;background:#f7f7f7}.project-card{background:#fff;border-radius:20px;box-shadow:0 10px 20px #0000001a;overflow:hidden;width:350px;transition:transform .4s ease,box-shadow .4s ease;cursor:pointer;perspective:1000px}.project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 32px #0003}.project-img{width:100%;height:200px;object-fit:cover;transition:transform .4s ease}.project-card:hover .project-img{transform:scale(1.05)}.project-content{padding:20px}.project-content h3{font-size:20px;font-weight:700;margin-bottom:5px}.subtitle{font-size:13px;color:#888;margin-bottom:15px}.description{font-size:14px;color:#555;margin-bottom:15px;line-height:1.5}.tech-stack{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.tech-chip{background:#000;color:#fff;padding:4px 10px;font-size:12px;border-radius:999px}.live-url{display:inline-block;font-weight:600;color:#fff;background-color:#000;padding:8px 14px;border-radius:8px;text-decoration:none;transition:background-color .3s ease}.live-url:hover{background-color:#444}.testimonials-section{padding:4rem 2rem;background:#fff;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.testimonials-title{font-size:2rem;font-weight:700;margin-bottom:2rem}.testimonials-marquee-wrapper{overflow:hidden;position:relative}.testimonials-container{display:flex;gap:1.5rem;flex-wrap:nowrap;animation:marquee 18s linear infinite;will-change:transform}.testimonials-marquee-wrapper:hover .testimonials-container{animation-play-state:paused}.testimonial-card{min-width:300px;max-width:360px;background:#ffffffe6;border-radius:16px;padding:1.5rem;box-shadow:0 0 12px #0000000d;position:relative;flex-shrink:0}.window-buttons{position:absolute;top:10px;left:12px;display:flex;gap:6px}.window-buttons span{width:10px;height:10px;border-radius:50%;display:inline-block}.red{background-color:#ff5f56}.yellow{background-color:#ffbd2e}.green{background-color:#27c93f}.testimonial-content{margin-top:2rem;font-size:.95rem;color:#333}.testimonial-name{margin-top:1rem;font-weight:700;color:#333}.testimonial-position{font-size:.9rem;color:#666}.skills-section{padding:4rem 2rem;text-align:center;font-family:Segoe UI,sans-serif;background:#fff}.skills-title{font-size:2.5rem;font-weight:700}.skills-subtitle{margin-top:.5rem;font-size:.95rem;color:#777}.skills-grid{display:flex;flex-wrap:wrap;justify-content:center;margin-top:2rem;gap:2rem}.skills-category{width:250px}.skills-category h3{font-size:1.2rem;font-weight:700;margin-bottom:1rem}.skills-items{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center}.skill-item{display:flex;flex-direction:column;align-items:center;width:80px;transition:transform .3s}.skill-item:hover{transform:scale(1.1)}.skill-item img{width:50px;height:50px;object-fit:contain}.skill-item p{font-size:.8rem;color:#888;margin-top:.4rem}.jinda-container{overflow:hidden;white-space:nowrap;width:100%;background:#fff;padding:2rem 0}.jinda-track{display:inline-block;animation:marquee 15s linear infinite;font-size:4rem;font-weight:700;color:#0000001a;letter-spacing:.1em}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.contact-section{padding:40px;max-width:700px;margin:0 auto;font-family:Segoe UI,sans-serif}.contact-title{text-align:center;font-size:2rem;font-weight:700}.contact-subtitle{text-align:center;margin-bottom:30px;color:#777}.contact-form{display:flex;flex-direction:column;gap:15px}input,textarea{padding:12px;font-size:1rem;border:1px solid #ddd;border-radius:6px}.submit-btn{background:linear-gradient(to right,#000,#2d2dff,#000);background-size:300% 100%;animation:gradientMove 3s linear infinite;color:#fff;font-weight:700;padding:14px;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease}.submit-btn:hover{transform:scale(1.02)}@keyframes gradientMove{0%{background-position:0% 50%}to{background-position:200% 50%}}.success-msg{color:green;margin-top:10px;font-weight:700}.matrixeffect-canvas{display:block;background:#fff;margin:0 auto}.footer{text-align:center;padding:1rem;background-color:#f8f4f4;color:#eab1b1;font-size:.9rem;margin-top:2rem}.footer a{color:#e65cba;text-decoration:none}.footer a:hover{text-decoration:underline}body{margin:0;font-family:Segoe UI,sans-serif;background-color:#fff;background-image:linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);background-size:32px 32px;color:#333;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;overflow-x:hidden;scroll-behavior:smooth}.app{display:flex;flex-direction:column;align-items:center;width:100%;padding:32px;box-sizing:border-box}.navbar{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#f2f2f2;padding:12px 20px;border-radius:30px;display:flex;align-items:center;gap:20px;box-shadow:0 8px 20px #00000014;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-wrap:wrap}.avatar-nav{width:45px;height:45px;border-radius:50%;object-fit:cover;box-shadow:0 2px 6px #0000001a}.nav-list{display:flex;gap:16px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center}.nav-item{padding:6px 12px;border-radius:10px;cursor:pointer;transition:.2s ease;font-weight:500}.nav-item:hover{background-color:#ddd;transform:translateY(-2px)}.hero{display:flex;justify-content:center;align-items:center;padding:120px 32px 40px;width:100%;max-width:1200px;box-sizing:border-box;gap:20px}.hero-left{flex:1;text-align:center;padding:16px}.hero-left h1{font-size:40px;font-weight:800;margin-bottom:12px;animation:slideInLeft 2s ease-out}.hero-left h2{font-size:22px;color:#555;margin-bottom:12px;animation:slideInRight 1s ease-out}.hero-left p{font-size:16px;color:#444;margin-bottom:20px;animation:slideInRight 1s ease-out}.hero-left p span{color:#1e90ff;font-weight:500}.icons{display:flex;gap:18px;font-size:22px;justify-content:center;animation:slideInRight 1s ease-out}.icons i{cursor:pointer;transition:transform .2s ease,color .2s ease}.icons i:hover{transform:translateY(-4px);color:#1e90ff}.hero-right{flex:1;display:flex;justify-content:center;padding:16px}.hero-right img{width:100%;max-width:400px;border-radius:8px;object-fit:cover}.section{width:100%;max-width:1024px;padding:64px 20px;box-sizing:border-box}@media screen and (max-width: 992px){.hero{flex-direction:column;padding-top:140px}.hero-left h1{font-size:32px}.hero-left h2{font-size:18px}.hero-left p{font-size:14px}.hero-right img{max-width:320px}}@media screen and (max-width: 600px){.navbar{flex-direction:column;gap:10px;padding:8px 12px;border-radius:16px}.nav-list{flex-direction:column;gap:8px}.hero-left h1{font-size:26px}.hero-left h2{font-size:15px}.hero-left p{font-size:13px}.hero-right img{max-width:220px}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.jin-title span{display:inline-block;opacity:0;transform:translate(-20px);animation:fadeInLetter .5s ease-out forwards}.jin-title span:nth-child(1){animation-delay:0s}.jin-title span:nth-child(2){animation-delay:.1s}.jin-title span:nth-child(3){animation-delay:.2s}.jin-title span:nth-child(4){animation-delay:.3s}.jin-title span:nth-child(5){animation-delay:.4s}.jin-title span:nth-child(6){animation-delay:.5s}.jin-title span:nth-child(7){animation-delay:.6s}.jin-title span:nth-child(8){animation-delay:.7s}.jin-title span:nth-child(9){animation-delay:.8s}.jin-title span:nth-child(10){animation-delay:.9s}.jin-title span:nth-child(11){animation-delay:1s}@keyframes fadeInLetter{to{opacity:1;transform:translate(0)}}