:root{font-family:Arial,Helvetica,sans-serif;font-weight:400;line-height:1.5}body{color:#e6f1ff;background:0 0;margin:0;font-family:Arial,Helvetica,sans-serif}html{scroll-behavior:smooth}*{box-sizing:border-box}a{text-decoration:none}.skip-link{color:#000;z-index:1000;background:#facc15;border-radius:10px;padding:10px 14px;font-weight:700;transition:top .2s;position:absolute;top:-48px;left:16px}.skip-link:focus{top:16px}a:focus-visible,button:focus-visible,.project-btn:focus-visible,.primary-btn:focus-visible,.secondary-btn:focus-visible,.resume-btn:focus-visible,.nav-links a:focus-visible,.contact-link:focus-visible{outline-offset:3px;border-radius:10px;outline:3px solid #facc15}.contact-link{text-underline-offset:3px;align-items:center;gap:8px;text-decoration:underline;display:inline-flex}.contact-link svg{flex-shrink:0}.app{isolation:isolate;width:100%;min-height:100vh;padding:24px;position:relative}.app:before{content:"";filter:brightness(.48);opacity:.58;z-index:-2;pointer-events:none;background:url(/assets/retro-computer-CjZS8xB4.png) 50%/cover no-repeat;position:fixed;inset:0}.app:after{content:"";pointer-events:none;z-index:-1;background:radial-gradient(circle at 20% 20%,#38bdf814,#0000 34%),radial-gradient(circle at 80% 30%,#8b5cf612,#0000 34%),radial-gradient(circle at 50% 80%,#f09fda0d,#0000 32%);animation:18s ease-in-out infinite alternate glowMove;position:fixed;inset:0}.navbar,.hero,.section{max-width:1200px;margin-left:auto;margin-right:auto}.navbar{justify-content:space-between;align-items:center;margin-bottom:80px;display:flex}.nav-links{gap:24px;display:flex}.nav-links a{color:#dbeafe;font-weight:700;transition:color .22s,text-shadow .22s,transform .22s}.nav-links a:hover{color:#7dd3fc;text-shadow:0 0 10px #7dd3fc47;transform:translateY(-1px)}.profile-pic{object-fit:cover;will-change:transform, box-shadow;border:4px solid #facc15;border-radius:50%;width:120px;height:120px;transition:transform .28s,box-shadow .28s;box-shadow:0 0 18px #facc158c,0 0 34px #facc1540}.profile-pic:hover{transform:scale(1.05);box-shadow:0 0 22px #facc15a6,0 0 42px #facc154d}.hero{padding:60px 0}.hero-tag{color:#cbd5e1;letter-spacing:.12em;font-weight:700}.hero-title{margin-bottom:12px;font-size:64px;line-height:1.05}.hero-title span{color:#7dd3fc;text-shadow:0 0 12px #7dd3fc73,0 0 24px #7dd3fc33}.hero-subtitle{color:#cbd5e1;font-size:20px}.btn-row{gap:16px;margin-top:20px;display:flex}.primary-btn,.secondary-btn,.resume-btn{will-change:transform, box-shadow;border-radius:14px;padding:14px 24px;font-weight:700;transition:transform .22s,box-shadow .22s,border-color .22s,color .22s,background .22s}.primary-btn{color:#fff;background:linear-gradient(90deg,#38bdf8,#8b5cf6);box-shadow:0 0 14px #38bdf838}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 0 18px #38bdf84d,0 0 28px #8b5cf629}.secondary-btn{color:#dbeafe;background:#0f172ac7;border:1px solid #7dd3fc61;box-shadow:0 0 10px #7dd3fc1f}.secondary-btn:hover{color:#fff;border-color:#7dd3fcb3;transform:translateY(-2px);box-shadow:0 0 16px #7dd3fc38}.resume-btn{color:#fff;background:linear-gradient(90deg,#f09fda,#c084fc);box-shadow:0 0 14px #f09fda2e}.resume-btn:hover{transform:translateY(-2px);box-shadow:0 0 18px #f09fda3d,0 0 28px #c084fc29}.section{margin-bottom:80px}.section h2{margin-bottom:20px;font-size:36px}.card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172ad1;border:1px solid #94a3b81f;border-radius:20px;padding:24px;box-shadow:0 8px 28px #02061738}.skills-grid{grid-template-columns:repeat(5,1fr);gap:20px;display:grid}.skill-card{text-align:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);will-change:transform, box-shadow;background:#0f172ad1;border:1px solid #94a3b81a;border-radius:20px;padding:24px;transition:transform .22s,box-shadow .22s,border-color .22s}.skill-icon{margin-bottom:10px;font-size:40px}.skill-card:hover{border-color:#ffffff1f;transform:translateY(-5px)scale(1.02)}.skill-html{color:#e34f26}.skill-html:hover{box-shadow:0 0 18px #e34f26bf,0 0 34px #e34f266b}.skill-css{color:#4ea8de}.skill-css:hover{box-shadow:0 0 18px #1572b6bf,0 0 34px #1572b66b}.skill-js{color:#f7df1e}.skill-js:hover{box-shadow:0 0 18px #f7df1eb8,0 0 34px #f7df1e61}.skill-react{color:#61dafb}.skill-react:hover{box-shadow:0 0 18px #61dafbbf,0 0 34px #61dafb6b}.skill-node{color:#68c266}.skill-node:hover{box-shadow:0 0 18px #3c873ab8,0 0 34px #3c873a61}.skill-express{color:#fff}.skill-express:hover{box-shadow:0 0 16px #ffffff47,0 0 30px #ffffff24}.skill-postgres{color:#5b8db8}.skill-postgres:hover{box-shadow:0 0 18px #336791b8,0 0 34px #33679166}.skill-neon{color:#0fc}.skill-neon:hover{box-shadow:0 0 18px #00ffccb8,0 0 34px #0fc6}.skill-github{color:#fff}.skill-github:hover{box-shadow:0 0 16px #ffffff47,0 0 30px #ffffff24}.skill-postman{color:#ff6c37}.skill-postman:hover{box-shadow:0 0 18px #ff6c37bf,0 0 34px #ff6c376b}.projects-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.project-card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);will-change:transform, box-shadow;background:#0f172ad1;border:1px solid #94a3b81f;border-radius:20px;padding:24px;transition:transform .22s,box-shadow .22s,border-color .22s}.project-card:hover{border-color:#7dd3fc38;transform:translateY(-5px);box-shadow:0 0 18px #38bdf838,0 0 30px #8b5cf61f}#contact a[href^=mailto],#contact a[href*=github],#contact a[href*=linkedin]{color:#dbeafe;font-weight:700;transition:color .22s,text-shadow .22s}#contact a[href^=mailto]:hover,#contact a[href*=github]:hover,#contact a[href*=linkedin]:hover{color:#7dd3fc;text-shadow:0 0 10px #7dd3fc38}.page-enter{animation:.8s ease-out pageFadeIn}.profile-wrapper{justify-content:center;align-items:center;display:flex}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes glowMove{0%{transform:translate(0)}50%{transform:translate(-14px,14px)}to{transform:translate(14px,-14px)}}.project-buttons{flex-wrap:wrap;gap:12px;margin-top:15px;display:flex}.project-btn{will-change:transform, box-shadow;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:700;text-decoration:none;transition:transform .22s,box-shadow .22s,opacity .22s,border-color .22s;display:inline-block}.live-btn{color:#fff;background:linear-gradient(90deg,#38bdf8,#0ea5e9);box-shadow:0 0 12px #38bdf833}.live-btn:hover{transform:translateY(-2px);box-shadow:0 0 18px #38bdf847}.github-btn{color:#e2e8f0;background:#0f172ad6;border:1px solid #94a3b83d;box-shadow:0 0 10px #0f172a29}.github-btn:hover{color:#fff;border-color:#7dd3fc73;transform:translateY(-2px);box-shadow:0 0 16px #7dd3fc29}.project-btn:hover{opacity:.98}.unfinished-btn{color:#fff;box-shadow:none;background:#000;border:1px solid #333}.unfinished-btn:hover{box-shadow:none;color:#fff;border-color:#444;transform:none}@media (width<=1024px){.app{padding:20px}.navbar,.hero,.section{max-width:100%}.hero-title{font-size:52px}.hero-subtitle{font-size:18px}.skills-grid{grid-template-columns:repeat(3,1fr)}.projects-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.app{padding:16px}.navbar{text-align:center;flex-direction:column;gap:18px;margin-bottom:50px}.nav-links{flex-wrap:wrap;justify-content:center;gap:14px}.profile-pic{width:96px;height:96px}.hero{text-align:center;padding:32px 0}.hero-tag{font-size:14px;line-height:1.5}.hero-title{font-size:42px;line-height:1.1}.hero-subtitle{font-size:17px;line-height:1.6}.btn-row{flex-direction:column;align-items:center}.primary-btn,.secondary-btn,.resume-btn{text-align:center;width:100%;max-width:260px}.section{margin-bottom:56px}.section h2{text-align:center;font-size:30px}.card{padding:20px}.card h3{font-size:18px;line-height:1.6}.skills-grid{grid-template-columns:repeat(2,1fr);gap:16px}.skill-card{padding:20px}.skill-icon{font-size:34px}.projects-grid{grid-template-columns:1fr;gap:18px}.project-card{padding:20px}.project-buttons{flex-direction:column}.project-btn{text-align:center;width:100%}#projects>h3{text-align:center;font-size:18px;line-height:1.6}#contact .card p{word-break:break-word;line-height:1.7}}@media (width<=480px){.app{padding:14px}.hero-title{font-size:34px}.hero-subtitle{font-size:16px}.section h2{font-size:26px}.skills-grid{grid-template-columns:1fr 1fr;gap:12px}.skill-card{padding:16px}.skill-icon{font-size:30px}.card,.project-card{padding:18px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}.page-enter,.app:after{animation:none!important}}