.app{min-height:100vh;position:relative;overflow-x:hidden;background:linear-gradient(135deg,#0a0a0f,#1a1520,#0f0a15);background-attachment:fixed}.liquid-cursor{position:fixed;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#ff572299,#ff98004d);border:1px solid rgba(255,255,255,.2);pointer-events:none;transform:translate(-50%,-50%);z-index:10000;transition:width .3s ease,height .3s ease;filter:blur(6px);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mix-blend-mode:screen;animation:liquidPulse 2s ease-in-out infinite;box-shadow:0 0 20px #ff57224d,inset 0 0 10px #ffffff1a}@keyframes liquidPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}.ripple{position:fixed;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,87,34,.5);transform:translate(-50%,-50%);pointer-events:none;z-index:9999;animation:rippleExpand 1s ease-out forwards}@keyframes rippleExpand{0%{width:20px;height:20px;opacity:1}to{width:200px;height:200px;opacity:0}}.gradient-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:radial-gradient(circle at 20% 80%,rgba(255,87,34,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(156,39,176,.15) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(0,188,212,.12) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,193,7,.12) 0%,transparent 50%),linear-gradient(135deg,#0a0a0f,#1a1520,#0f0a15);animation:gradientFloat 20s ease-in-out infinite}.gradient-bg.mobile-optimized{background:linear-gradient(135deg,#0a0a0f,#1a1520,#0f0a15);animation:none}.gradient-bg.mobile-optimized .gradient-orb{animation-duration:15s;filter:blur(80px)}@keyframes gradientFloat{0%,to{background-position:0% 0%,100% 100%,50% 50%,100% 0%}25%{background-position:100% 0%,0% 100%,30% 70%,80% 20%}50%{background-position:100% 100%,0% 0%,70% 30%,20% 80%}75%{background-position:0% 100%,100% 0%,50% 50%,50% 50%}}.gradient-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.4;mix-blend-mode:screen;animation:floatOrb 25s ease-in-out infinite}.orb-1{width:700px;height:700px;background:radial-gradient(circle,rgba(255,87,34,.6),transparent 70%);top:-250px;left:-150px;animation-delay:0s;animation-duration:20s}.orb-2{width:600px;height:600px;background:radial-gradient(circle,rgba(156,39,176,.5),transparent 70%);bottom:-200px;right:-200px;animation-delay:5s;animation-duration:25s}.orb-3{width:550px;height:550px;background:radial-gradient(circle,rgba(0,188,212,.4),transparent 70%);top:35%;right:5%;animation-delay:10s;animation-duration:30s}.orb-4{width:650px;height:650px;background:radial-gradient(circle,rgba(255,193,7,.35),transparent 70%);bottom:15%;left:10%;animation-delay:15s;animation-duration:22s}@keyframes floatOrb{0%,to{transform:translate(0) scale(1) rotate(0)}25%{transform:translate(80px,-80px) scale(1.1) rotate(90deg)}50%{transform:translate(-40px,60px) scale(.9) rotate(180deg)}75%{transform:translate(-60px,-40px) scale(1.05) rotate(270deg)}}.noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.03;z-index:1;pointer-events:none}.main-container{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:80px 32px;animation:fadeInUp 1s ease-out}@media (max-width: 768px){.main-container{padding:24px 16px}}@media (max-width: 480px){.main-container{padding:20px 12px}}.main-container:before{content:"";position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:1200px;height:100vh;background:radial-gradient(ellipse at center,rgba(255,255,255,.03) 0%,transparent 70%);pointer-events:none;z-index:-1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hero-section{display:flex;align-items:center;gap:clamp(16px,5vw,48px);margin-bottom:clamp(32px,6vw,60px);padding:clamp(20px,5vw,52px);background:linear-gradient(145deg,#ffffff1a,#ffffff0d,#ffffff08);border-radius:clamp(24px,4vw,40px);border:2px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(50px) saturate(200%);backdrop-filter:blur(50px) saturate(200%);box-shadow:0 10px 40px #00000080,0 4px 12px #0000004d,inset 0 3px #fff3,inset 0 -6px 12px #00000026,0 0 0 1px #ffffff14,0 20px 60px #ff572226;animation:slideInLeft .8s ease-out,floatHero 6s ease-in-out infinite 1s;position:relative;overflow:visible;will-change:transform}@media (max-width: 768px){.hero-section{animation:slideInLeft .8s ease-out;flex-direction:row;text-align:left;align-items:center;gap:12px}.avatar-container{flex-shrink:0}.hero-content{flex:1;min-width:0}.hero-title{justify-content:flex-start}}@keyframes floatHero{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.hero-section:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:36px;padding:1px;background:linear-gradient(135deg,rgba(255,87,34,.3),transparent 30%,transparent 70%,rgba(156,39,176,.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.avatar-container{position:relative;flex-shrink:0}.avatar-glow{position:absolute;inset:clamp(-10px,-2vw,-15px);background:linear-gradient(135deg,#ff5722,#ff9800,#f44336,#e91e63);border-radius:50%;filter:blur(clamp(15px,3vw,25px));opacity:.6;animation:rotateBg 8s linear infinite}@media (max-width: 768px){.avatar-glow{opacity:.5}}@keyframes rotateBg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hero-avatar{width:clamp(70px,15vw,140px);height:clamp(70px,15vw,140px);border-radius:50%;border:clamp(2px,.5vw,5px) solid rgba(255,255,255,.15);object-fit:cover;position:relative;z-index:1;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 40px #00000080,0 2px 8px #0000004d,inset 0 2px #fff3,inset 0 -2px 4px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 768px){.hero-avatar{width:clamp(70px,18vw,90px);height:clamp(70px,18vw,90px)}}.hero-avatar:hover{transform:scale(1.08) rotate(5deg) translateY(-4px);box-shadow:0 15px 60px #ff572266,0 5px 15px #0006,inset 0 2px #ffffff4d,inset 0 -2px 6px #00000040;border-color:#ffffff40}.status-indicator{position:absolute;bottom:10px;right:10px;display:flex;align-items:center;gap:6px;padding:8px 14px;background:linear-gradient(145deg,#0009,#0006);border-radius:24px;border:1px solid rgba(76,175,80,.4);-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%);z-index:2;box-shadow:0 4px 12px #0006,inset 0 1px #ffffff1a,inset 0 -1px #0000004d,0 0 20px #4caf5033}.status-dot{width:8px;height:8px;border-radius:50%;background:#4caf50;animation:statusPulse 2s ease-in-out infinite}@keyframes statusPulse{0%,to{box-shadow:0 0 #4caf50b3}50%{box-shadow:0 0 0 8px #4caf5000}}.status-text{font-size:.7rem;color:#4caf50;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.hero-content{flex:1}.hero-title{display:flex;align-items:center;gap:clamp(6px,1.5vw,12px);margin-bottom:clamp(6px,1.5vw,12px)}@media (max-width: 768px){.hero-title{justify-content:center}}.hero-name{font-size:clamp(2.5rem,6vw,3.8rem);font-weight:900;background:linear-gradient(135deg,#fff,#ffd54f,#ff9800,#ff5722,#f44336);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:clamp(-2px,-.02em,-2.5px);animation:shimmerText 8s ease-in-out infinite;position:relative;line-height:1.1}.hero-name:before{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;background:linear-gradient(135deg,#ff5722,#ff9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:blur(20px);opacity:.5}@keyframes shimmerText{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-sparkle{color:#ffc107;animation:sparkleRotate 3s ease-in-out infinite}@keyframes sparkleRotate{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}}.hero-tagline{font-size:clamp(1.1rem,2.5vw,1.4rem);color:#ffffffd9;margin-bottom:24px;font-weight:400;letter-spacing:.5px;line-height:1.6;text-shadow:0 2px 20px rgba(255,255,255,.15);animation:fadeIn 1s ease-out .3s both}@media (max-width: 768px){.hero-tagline{margin-bottom:0;line-height:1.3;color:#fff;font-size:.9rem!important;font-weight:500;letter-spacing:.2px;word-wrap:break-word;max-width:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero-badges{display:flex;gap:12px;flex-wrap:wrap}.badge{padding:10px 18px;background:linear-gradient(145deg,#ffffff1f,#ffffff0f);border-radius:14px;border:1px solid rgba(255,255,255,.15);font-size:.9rem;color:#ffffffd9;font-weight:600;-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0003,inset 0 1px #ffffff26,inset 0 -2px 4px #0000001a}.badge:hover{background:linear-gradient(145deg,#ffffff2e,#ffffff1a);transform:translateY(-3px);border-color:#ffffff40;box-shadow:0 8px 24px #ff572233,inset 0 2px #fff3,inset 0 -2px 6px #00000026}.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-bottom:60px}@media (max-width: 768px){.bento-grid{gap:14px;margin-bottom:32px}}.bento-card{position:relative;padding:clamp(24px,4vw,36px) clamp(20px,3.5vw,32px);border-radius:28px;text-decoration:none;color:#fff;overflow:hidden;border:1.5px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);transition:all .4s cubic-bezier(.4,0,.2,1);animation:bentoSlideIn .6s ease-out backwards;cursor:pointer;box-shadow:0 8px 32px #0006,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026;min-height:140px;display:flex;align-items:center;-webkit-tap-highlight-color:transparent}@media (max-width: 768px){.bento-card{padding:16px;min-height:80px;border-radius:20px}}.bento-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.08) 0%,transparent 50%,rgba(0,0,0,.1) 100%);pointer-events:none}@keyframes bentoSlideIn{0%{opacity:0;transform:translateY(40px) scale(.95);filter:blur(10px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.bento-card:nth-child(1){animation-delay:.1s}.bento-card:nth-child(2){animation-delay:.15s}.bento-card:nth-child(3){animation-delay:.2s}.bento-card:nth-child(4){animation-delay:.25s}.bento-card:nth-child(5){animation-delay:.3s}.bento-card:nth-child(6){animation-delay:.35s}.bento-card.large{grid-column:span 2}.bento-card.mobile-layout .bento-card-content{flex-direction:row;align-items:center;justify-content:flex-start}.bento-card.mobile-layout .bento-text{flex:1}.bento-card.mobile-layout .bento-title{margin-bottom:0;font-size:1rem}.bento-link-wrapper{text-decoration:none;color:inherit;display:block}.bento-card.gradient-1{background:linear-gradient(145deg,#e1306c4d,#c1358433,#9c27b026);box-shadow:0 8px 32px #e1306c33,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026}.bento-card.gradient-1:hover{box-shadow:0 20px 60px #e1306c66,0 8px 25px #c135844d,inset 0 3px #ffffff26,inset 0 -5px 12px #0003}.bento-card.gradient-2{background:linear-gradient(145deg,#32323266,#1e1e1e4d,#0f0f0f40);box-shadow:0 8px 32px #00000080,0 2px 8px #0000004d,inset 0 2px #ffffff1a,inset 0 -4px 8px #0003}.bento-card.gradient-2:hover{box-shadow:0 20px 60px #0009,0 8px 25px #ffffff0d,inset 0 3px #ffffff26,inset 0 -5px 12px #00000040}.bento-card.gradient-3{background:linear-gradient(145deg,#37474f66,#2632384d,#151c2340);box-shadow:0 8px 32px #37474f4d,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026}.bento-card.gradient-3:hover{box-shadow:0 20px 60px #37474f80,0 8px 25px #607d8b4d,inset 0 3px #ffffff26,inset 0 -5px 12px #0003}.bento-card.gradient-4{background:linear-gradient(145deg,#9c27b059,#e91e6340,#f4433633);box-shadow:0 8px 32px #9c27b04d,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026;animation:specialGlow 3s ease-in-out infinite}@keyframes specialGlow{0%,to{box-shadow:0 8px 32px #9c27b04d,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026}50%{box-shadow:0 12px 48px #9c27b080,0 4px 12px #e91e634d,inset 0 2px #ffffff26,inset 0 -4px 8px #00000026}}.bento-card.gradient-4:hover{box-shadow:0 20px 60px #9c27b099,0 8px 25px #e91e6366,inset 0 3px #ffffff26,inset 0 -5px 12px #0003;animation:none}.bento-card.gradient-5{background:linear-gradient(145deg,#00bcd44d,#00968838,#00838f2e);box-shadow:0 8px 32px #00bcd440,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026}.bento-card.gradient-5:hover{box-shadow:0 20px 60px #00bcd473,0 8px 25px #0096884d,inset 0 3px #ffffff26,inset 0 -5px 12px #0003}.bento-card.gradient-6{background:linear-gradient(145deg,#ff98004d,#ff572238,#f4511e2e);box-shadow:0 8px 32px #ff980040,0 2px 8px #0003,inset 0 2px #ffffff1a,inset 0 -4px 8px #00000026}.bento-card.gradient-6:hover{box-shadow:0 20px 60px #ff980073,0 8px 25px #ff57224d,inset 0 3px #ffffff26,inset 0 -5px 12px #0003}.bento-card-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(145deg,rgba(255,255,255,.05),transparent);opacity:0;transition:opacity .4s ease}.bento-card:hover .bento-card-bg{opacity:1}.bento-card-content{position:relative;z-index:1;display:flex;align-items:center;gap:16px}.bento-icon-wrapper{flex-shrink:0}.bento-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff26,#ffffff14);border-radius:18px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 20px #0000004d,inset 0 2px #ffffff40,inset 0 -3px 6px #0003,0 0 0 1px #ffffff0d;transition:all .4s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.bento-icon{width:44px;height:44px;border-radius:12px}}.bento-card:hover .bento-icon{background:linear-gradient(145deg,#ffffff38,#ffffff1f);transform:scale(1.15) rotate(-8deg) translateY(-2px);border-color:#ffffff4d;box-shadow:0 12px 40px #ffffff26,0 4px 12px #0003,inset 0 2px #ffffff59,inset 0 -4px 8px #00000040,0 0 20px #ff57224d}.bento-text{flex:1}.bento-title{font-size:1.3rem;font-weight:700;margin-bottom:6px;color:#fff;letter-spacing:-.3px;text-shadow:0 2px 10px rgba(0,0,0,.3);transition:all .3s ease}.bento-card:hover .bento-title{transform:translate(4px);text-shadow:0 4px 20px rgba(255,255,255,.2)}.bento-subtitle{font-size:.95rem;color:#ffffffa6;font-weight:400;letter-spacing:.3px;transition:all .3s ease}.bento-card:hover .bento-subtitle{color:#ffffffd9;transform:translate(4px)}.bento-arrow{font-size:1.5rem;opacity:0;transform:translate(-10px);transition:all .3s ease}.bento-card:hover .bento-arrow{opacity:1;transform:translate(0)}.bento-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .7s ease;pointer-events:none}.bento-card:hover .bento-shine{left:100%}.bento-card:hover{transform:translateY(-14px) scale(1.03);border-color:#ffffff4d;-webkit-backdrop-filter:blur(50px) saturate(200%);backdrop-filter:blur(50px) saturate(200%)}.bento-card:active{transform:translateY(-4px) scale(.98);box-shadow:0 12px 40px #0006,inset 0 2px 8px #0000004d}.footer-modern{display:flex;justify-content:space-between;align-items:center;padding:36px 44px;background:linear-gradient(145deg,#ffffff0f,#ffffff08);border-radius:28px;border:1.5px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a,inset 0 -2px 6px #0000001a}@media (max-width: 768px){.footer-modern{padding:20px;border-radius:18px;margin-top:32px}}.footer-text{color:#ffffff80;font-size:.95rem;font-weight:500}.heart{color:#ff5722;display:inline-block;animation:heartBeat 1.5s ease-in-out infinite}@keyframes heartBeat{0%,to{transform:scale(1)}10%,30%{transform:scale(1.2)}20%,40%{transform:scale(1)}}.footer-links{display:flex;gap:16px}.footer-link{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff14,#ffffff0a);border-radius:14px;color:#ffffffb3;border:1px solid rgba(255,255,255,.15);text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0003,inset 0 1px #ffffff26,inset 0 -2px 4px #0000001a;-webkit-tap-highlight-color:transparent}.footer-link:hover{background:linear-gradient(145deg,#ffffff26,#ffffff14);color:#fff;border-color:#ffffff40;transform:translateY(-4px);box-shadow:0 12px 35px #ff57224d,inset 0 2px #fff3,inset 0 -2px 6px #00000026}.bento-card:before{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,.1) 0%,transparent 100%);border-radius:28px 0 0 28px;pointer-events:none;opacity:0;transition:opacity .5s ease}.bento-card:hover:before{opacity:1}.hero-section:after{content:"";position:absolute;top:12px;left:12px;right:12px;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 50%,transparent 100%);border-radius:32px 32px 0 0;pointer-events:none}.bento-card:after{transition:all .4s ease}.bento-card:hover:after{background:linear-gradient(145deg,rgba(255,255,255,.12) 0%,transparent 50%,rgba(0,0,0,.15) 100%)}.badge{animation:floatBadge 3s ease-in-out infinite}.badge:nth-child(1){animation-delay:0s}.badge:nth-child(2){animation-delay:.5s}.badge:nth-child(3){animation-delay:1s}@keyframes floatBadge{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.hero-sparkle{filter:drop-shadow(0 0 8px rgba(255,193,7,.6))}@media (max-width: 1200px){.main-container{padding:60px 28px}.bento-card.large{grid-column:span 2}}@media (max-width: 1024px){.main-container{padding:50px 24px}.bento-card.large{grid-column:span 1}.hero-section{gap:36px;padding:40px}}@media (max-width: 768px){.hero-section{flex-direction:row}.hero-badges{justify-content:flex-start}.bento-grid{grid-template-columns:1fr}.bento-subtitle{display:none}.footer-modern{flex-direction:column;gap:16px;text-align:center}.liquid-cursor,.ripple{display:none}.gradient-orb{opacity:.3}.bento-card:hover,.project-card:hover{transform:translateY(-4px) scale(1.005)}.project-link{display:none}}@media (max-width: 640px){.main-container{padding:32px 16px}.hero-section{padding:24px 20px;border-radius:28px}.hero-avatar{width:110px;height:110px}.badge{padding:8px 14px;font-size:.85rem}.bento-icon{width:50px;height:50px}.bento-title{font-size:1.15rem}.bento-subtitle{font-size:.9rem}.spotify-player{padding:20px;border-radius:16px}.project-icon{width:48px;height:48px}.project-link{width:36px;height:36px}}@media (max-width: 480px){.main-container{padding:24px 12px}.hero-section{padding:20px 16px;border-radius:24px;margin-bottom:40px}.hero-avatar{width:100px;height:100px}.badge{padding:7px 12px;font-size:.8rem}.bento-card{border-radius:20px;min-height:120px}.bento-icon{width:48px;height:48px}.bento-title{font-size:1.05rem}.spotify-section,.projects-section{margin-top:40px}.section-header{margin-bottom:24px}.spotify-player{padding:16px}.project-card{border-radius:20px}.project-tags{gap:6px}.project-tag{padding:5px 12px;font-size:.75rem}.footer-modern{padding:24px 20px;border-radius:20px}.footer-text{font-size:.85rem}.footer-link{width:40px;height:40px}}@media (max-height: 600px) and (orientation: landscape){.hero-section{flex-direction:row;text-align:left;padding:24px}.hero-avatar{width:80px;height:80px}.main-container{padding:32px 20px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.liquid-cursor,.ripple,.gradient-orb{display:none}}.spotify-section{margin-top:60px;animation:bentoSlideIn .8s cubic-bezier(.4,0,.2,1) .3s both;margin-bottom:60px}@media (max-width: 768px){.spotify-section{margin-top:40px;margin-bottom:40px}}.section-header{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding:0 8px}@media (max-width: 768px){.section-header{gap:10px;margin-bottom:16px;padding:0 4px}}.section-icon{color:#ff5722;filter:drop-shadow(0 0 12px rgba(255,87,34,.6));animation:sparkleRotate 3s ease-in-out infinite}.section-title{font-size:clamp(1.75rem,4vw,2.2rem);font-weight:700;background:linear-gradient(135deg,#fff,#ffd54f,#ff9800,#ff5722,#f44336);background-size:200% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em;position:relative;animation:shimmerText 8s ease-in-out infinite;text-shadow:0 0 30px rgba(255,87,34,.3);line-height:1.2}.section-title:after{content:"";position:absolute;left:0;bottom:-8px;width:60px;height:3px;background:linear-gradient(90deg,#ff5722,#9c27b0);border-radius:2px;box-shadow:0 0 12px #ff572299}.spotify-player{position:relative;background:linear-gradient(145deg,#140f1ecc,#0a080fe6);-webkit-backdrop-filter:blur(50px) saturate(200%);backdrop-filter:blur(50px) saturate(200%);border-radius:20px;padding:clamp(16px,2.5vw,24px);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px #0009,0 8px 24px #0006,inset 0 2px #ffffff1a,inset 0 -2px 6px #00000080,0 2px 8px #ff572226,0 0 0 1px #ffffff0d;transition:all .5s cubic-bezier(.4,0,.2,1);overflow:hidden}.spotify-player:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,87,34,.08) 50%,transparent 70%);animation:spotifyShimmer 8s linear infinite;pointer-events:none}@keyframes spotifyShimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.spotify-player:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(145deg,rgba(255,87,34,.05) 0%,transparent 50%,rgba(156,39,176,.05) 100%);border-radius:20px;opacity:0;transition:opacity .5s ease;pointer-events:none}.spotify-player:hover{transform:translateY(-6px);border-color:#ff57224d;box-shadow:0 30px 80px #000000b3,0 12px 32px #ff572266,inset 0 2px #ffffff26,inset 0 -2px 8px #0009,0 0 0 1px #ff57224d}.spotify-player:hover:after{opacity:1}.spotify-player iframe{position:relative;z-index:1;border-radius:12px!important;filter:brightness(.95) contrast(1.05)}.projects-section{margin-top:0;margin-bottom:60px;animation:bentoSlideIn .8s cubic-bezier(.4,0,.2,1) .35s both}@media (max-width: 768px){.projects-section{margin-top:0;margin-bottom:40px}}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,3vw,28px);margin-top:32px}@media (max-width: 768px){.projects-grid{gap:14px;margin-top:16px}}.project-card{position:relative;background:linear-gradient(145deg,#140f1eb3,#0a080fcc);-webkit-backdrop-filter:blur(50px) saturate(200%);backdrop-filter:blur(50px) saturate(200%);border-radius:24px;padding:clamp(24px,4vw,36px);border:1px solid rgba(255,255,255,.1);overflow:hidden;cursor:pointer;animation:bentoSlideIn .8s cubic-bezier(.4,0,.2,1) both;box-shadow:0 20px 60px #00000080,0 8px 24px #0000004d,inset 0 2px #ffffff1a,inset 0 -2px 6px #00000080,0 2px 8px #ff57221a,0 0 0 1px #ffffff0d;transition:all .5s cubic-bezier(.4,0,.2,1);text-decoration:none;color:inherit;display:block;-webkit-tap-highlight-color:transparent}@media (max-width: 768px){.project-card{padding:18px;border-radius:18px}}@keyframes projectSlideIn{0%{opacity:0;transform:translateY(40px) scale(.95);filter:blur(10px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.project-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(145deg,#ff572214,#9c27b00d,#00bcd414);opacity:0;transition:opacity .5s ease;pointer-events:none;border-radius:24px}.project-card:hover:before{opacity:1}.project-card-glow{position:absolute;top:-100px;right:-100px;bottom:-100px;left:-100px;background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(255,87,34,.2) 0%,transparent 50%);opacity:0;transition:opacity .5s ease;pointer-events:none}.project-card:hover .project-card-glow{opacity:1}.project-card:hover{transform:translateY(-12px) scale(1.02);border-color:#ff572266;box-shadow:0 30px 80px #0009,0 12px 32px #ff572266,inset 0 2px #ffffff26,inset 0 -2px 8px #0009,0 4px 16px #ff57224d,0 0 0 1px #ff57224d}.project-card-content{position:relative;z-index:2}.project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}@media (max-width: 768px){.project-header{margin-bottom:12px}}.project-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ff572240,#9c27b040);border-radius:16px;border:1px solid rgba(255,255,255,.15);color:#ff5722;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #ff57224d,inset 0 2px #fff3,inset 0 -2px 4px #0000004d;filter:drop-shadow(0 0 8px rgba(255,87,34,.4));overflow:hidden}.project-icon img{width:100%;height:100%;object-fit:cover;border-radius:14px}@media (max-width: 768px){.project-icon{width:44px;height:44px;border-radius:12px}.project-icon img{border-radius:10px}}.project-card:hover .project-icon{transform:rotate(-8deg) scale(1.15);box-shadow:0 12px 32px #ff572280,inset 0 2px #ffffff4d,inset 0 -2px 6px #0006;filter:drop-shadow(0 0 16px rgba(255,87,34,.6));background:linear-gradient(145deg,#ff572266,#9c27b04d)}.project-link{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;border:1px solid rgba(255,255,255,.08);color:#ffffffb3;transition:all .3s ease;pointer-events:none}.project-card:hover .project-link{background:#ff572233;border-color:#ff572266;color:#ff5722;transform:scale(1.1) rotate(5deg)}.secret-lock{color:#ffc107cc;filter:drop-shadow(0 0 8px rgba(255,193,7,.5));animation:lockPulse 2s ease-in-out infinite}@keyframes lockPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.project-title{font-size:clamp(1.3rem,3vw,1.6rem);font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:-.01em;transition:all .3s ease;text-shadow:0 2px 8px rgba(0,0,0,.3);line-height:1.3}@media (max-width: 768px){.project-title{margin-bottom:8px}}.project-card:hover .project-title{background:linear-gradient(135deg,#fff,#ff9800,#ff5722);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(255,87,34,.6);transform:translate(4px)}.project-description{font-size:clamp(.9rem,2vw,.95rem);line-height:1.7;color:#ffffffb3;margin-bottom:16px;transition:color .3s ease}.project-card:hover .project-description{color:#fffc}.project-description-wrapper{margin-bottom:20px}@media (max-width: 768px){.project-description-wrapper{margin-bottom:12px}}.expand-button{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;margin-top:8px;background:#ff572226;border:1px solid rgba(255,87,34,.3);border-radius:16px;color:#fffc;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-tap-highlight-color:transparent}.expand-button:hover{background:#ff572240;border-color:#ff572280;color:#ff5722;transform:translateY(-2px)}.expand-button:active{transform:translateY(0)}.project-card.mobile-layout .project-header{margin-bottom:16px}.project-card.mobile-layout .project-icon{width:48px;height:48px}.project-card.mobile-layout .project-title{font-size:1.25rem;margin-bottom:10px}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.project-tag{display:inline-block;padding:6px 14px;background:#ff57221a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,87,34,.2);border-radius:20px;font-size:.8rem;font-weight:500;color:#fffc;transition:all .3s ease;white-space:nowrap}.project-tag.tag-count{background:#ff980026;border-color:#ff98004d;color:#ff9800e6;font-weight:600}.project-card:hover .project-tag{background:#ff572233;border-color:#ff572266;color:#ff5722;transform:translateY(-2px)}.project-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);transition:left .6s ease;pointer-events:none}.project-card:hover .project-shine{left:100%}.project-card.secret{background:linear-gradient(145deg,#19140fcc,#0f0c08e6);border-color:#ffc1074d;box-shadow:0 20px 60px #00000080,0 8px 24px #ffc10733,inset 0 2px #ffc10726,inset 0 -2px 6px #00000080,0 0 0 1px #ffc10733}.project-card.secret:before{background:linear-gradient(145deg,#ffc1071f,#ff980014,#ff57221f)}.project-card.secret:hover{border-color:#ffc10780;box-shadow:0 30px 80px #0009,0 12px 32px #ffc10766,inset 0 2px #ffc10733,inset 0 -2px 8px #0009,0 4px 16px #ffc1074d,0 0 0 1px #ffc10766}@media (max-width: 768px){.projects-grid{grid-template-columns:1fr;gap:20px}.project-card{padding:clamp(20px,3.5vw,28px)}.section-title{font-size:clamp(1.6rem,4vw,2rem)}.spotify-player{padding:10px!important;border-radius:14px!important}}.back-button{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#ffffffe6;text-decoration:none;font-weight:500;font-size:.95rem;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:2rem;animation:fadeInDown .6s cubic-bezier(.4,0,.2,1)}.back-button:hover{background:#ffffff14;border-color:#fff3;transform:translate(-4px)}.ss-icon-container{position:relative;width:fit-content;margin:0 auto 2rem;animation:floatAvatar 6s ease-in-out infinite}.ss-icon-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;background:radial-gradient(circle,rgba(147,51,234,.4) 0%,rgba(236,72,153,.3) 30%,transparent 70%);border-radius:50%;filter:blur(30px);animation:pulseGlow 3s ease-in-out infinite;z-index:0}.ss-icon-wrapper{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9333ea26,#ec489926);border:2px solid rgba(255,255,255,.1);border-radius:35px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #00000080,inset 0 2px #ffffff1a;z-index:1}.ss-main-icon{color:#fffffff2;filter:drop-shadow(0 0 20px rgba(147,51,234,.6))}.intro-section{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:2.5rem;margin-bottom:2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;overflow:hidden;animation:fadeInUp .8s cubic-bezier(.4,0,.2,1) .3s backwards;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff0d}.intro-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.intro-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:#fffffff2;margin-bottom:1rem;background:linear-gradient(135deg,#fff,#fffc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-text{font-size:1.05rem;line-height:1.7;color:#ffffffb3;margin:0}.section-description{color:#fff9;font-size:.95rem;margin:-.5rem 0 1rem}.last-updated{display:flex;align-items:center;gap:6px;color:#fff6;font-size:.8rem;font-style:italic;margin-top:.75rem;justify-content:flex-end}.music-note{display:inline-block;animation:bounce 2s ease-in-out infinite;color:#ec4899cc;font-size:1.2em}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes floatAvatar{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulseGlow{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (max-width: 768px){.back-button{padding:10px 16px;font-size:.9rem}.ss-icon-container{margin-bottom:1.5rem}.ss-icon-wrapper{width:100px;height:100px;border-radius:25px}.ss-icon-glow{width:130px;height:130px}.intro-section{padding:1.5rem;margin-bottom:1.5rem}.intro-text{font-size:1rem;line-height:1.6}.section-description{font-size:.9rem}}@font-face{font-family:Fira Code;src:url(/fonts/FiraCode-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/fonts/FiraCode-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/fonts/FiraCode-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/fonts/FiraCode-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/fonts/FiraCode-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}body,*{font-feature-settings:"liga" 1,"calt" 1}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--accent: #ff5722;--accent-hover: #ff7043;--text-primary: #ffffff;--text-secondary: #b0b0b0;--border-radius: 12px}body{font-family:Fira Code,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(255,87,34,0.8)" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>') 12 12,auto}a,button{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgba(255,87,34,0.5)" stroke="rgba(255,87,34,1)" stroke-width="2"><circle cx="12" cy="12" r="6"/></svg>') 12 12,pointer}#root{min-height:100vh}