*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #050b14;--text: #ffffff;--accent: #7cc7ff;--card: rgba(255, 255, 255, .08)}:root[data-theme=light]{--bg: #f5f8ff;--text: #0b1020;--accent: #2563eb;--card: rgba(0, 0, 0, .06)}html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;scroll-behavior:smooth}:root{--accent-rgb: 124, 199, 255}:root[data-theme=light]{--accent-rgb: 37, 99, 235}canvas,.animated-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}.navbar{position:fixed;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:1rem 2.5rem;min-width:min(90%,720px);background:#0a14288c;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:18px;border:1px solid rgba(255,255,255,.08);z-index:20}.navbar .logo{font-weight:700;letter-spacing:-.02em;font-size:1.1rem;color:#e8f3ff;white-space:nowrap}.navbar>div{display:flex;align-items:center;gap:1.8rem}.navbar a{color:#7cc7ff;text-decoration:none;font-weight:500;font-size:.95rem;position:relative;transition:color .25s ease}.navbar a:after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:#7cc7ff;transition:width .25s ease}.navbar a:hover{color:#d6efff}.navbar a:hover:after{width:100%}.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.05rem;color:#7cc7ff;transition:transform .2s ease,color .2s ease}.theme-toggle:hover{transform:rotate(15deg);color:#d6efff}section{padding:140px 20px;max-width:1100px;margin:0 auto}.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}.reveal.in-view{opacity:1;transform:translateY(0)}.section-divider{height:1px;max-width:900px;margin:5rem auto;background:linear-gradient(to right,transparent,var(--accent),transparent);opacity:.4}.hero{text-align:center;padding-top:220px}.hero h1{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;animation:glowIn 1.2s ease forwards}.hero span{color:var(--accent)}.hero p{max-width:650px;margin:1.8rem auto 0;opacity:.85;font-size:1.1rem;animation:fadeUp 1.2s ease forwards}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:3rem}.project-card{background:var(--card);padding:2.2rem;border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);transition:transform .3s ease,box-shadow .3s ease,background .3s ease}.project-card:hover{transform:translateY(-8px) scale(1.01);background:#ffffff1f;box-shadow:0 20px 40px #00000059}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:2rem;margin-top:3rem}.skill-card{background:var(--card);border-radius:18px;padding:1.6rem 1rem;text-align:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);transition:transform .3s ease,box-shadow .3s ease}.skill-card:hover{transform:translateY(-8px);box-shadow:0 0 30px #7cc7ff40}.skill-card img{width:48px;height:48px;margin-bottom:.8rem}.skill-card span{font-size:.95rem;opacity:.9}.skill-card.js:hover{box-shadow:0 0 30px #f7df1e66}.skill-card.ts:hover{box-shadow:0 0 30px #3178c666}.skill-card.react:hover{box-shadow:0 0 30px #61dafb66}.skill-card.node:hover{box-shadow:0 0 30px #3c873a66}.skill-card.python:hover{box-shadow:0 0 30px #3776ab66}.skill-card.cloudflare:hover{box-shadow:0 0 30px #f6821f66}.skill-card img{filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.25))}:root[data-theme=light] .skill-card img{filter:none}.skill-card img{max-width:48px;max-height:48px;object-fit:contain}.about-text{text-align:center;max-width:760px;margin:auto;font-size:1.05rem;opacity:.85;line-height:1.7}.contact{text-align:center}.contact strong{color:var(--accent)}footer{text-align:center;padding:3rem 0;opacity:.55;font-size:.9rem}@keyframes fadeDown{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes glowIn{0%{opacity:0;text-shadow:none}to{opacity:1;text-shadow:0 0 40px rgba(106,184,255,.35)}}@media (max-width: 768px){.navbar{gap:1rem;padding:.8rem 1.2rem}.hero{padding-top:170px}.hero h1{font-size:2.2rem}section{padding:110px 16px}.projects-grid,.skills-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.timeline{max-width:800px;margin:3rem auto 0;display:flex;flex-direction:column;gap:2.5rem}.timeline-item{padding-left:1.5rem;border-left:2px solid var(--accent);position:relative}.timeline-item:before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--accent);border-radius:50%}.timeline-item span{font-size:.85rem;opacity:.6}.timeline-item h3{margin:.4rem 0}@media (max-width: 640px){.navbar{padding:.8rem 1.4rem;gap:1.5rem}.navbar>div{gap:1.1rem}.navbar a{font-size:.85rem}}.project-link:hover{color:#d6efff}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#050b14bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:50}.modal:target{opacity:1;pointer-events:auto}.modal-content{max-width:560px;margin:10vh auto;background:#0f192de6;border-radius:20px;padding:2.4rem;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px #0009;animation:modalIn .4s ease forwards}.modal-close{position:absolute;top:16px;right:18px;font-size:1.6rem;color:#7cc7ff;text-decoration:none;transition:transform .2s ease,color .2s ease}.modal-close:hover{transform:rotate(90deg);color:#fff}.modal-content h3{margin-bottom:1rem}.modal-content p{opacity:.9;line-height:1.6}.modal-content ul{margin-top:1.2rem;padding-left:1.2rem}.modal-content li{margin-bottom:.5rem;opacity:.85}@keyframes modalIn{0%{transform:translateY(30px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@media (max-width: 640px){.modal-content{margin:12vh 16px;padding:1.8rem}}.project-badge{display:inline-block;margin-bottom:.6rem;padding:.3rem .7rem;font-size:.7rem;font-weight:600;border-radius:999px;background:#7cc7ff26;color:#7cc7ff}.project-badge.github{background:#b4b4b426;color:#d0d0d0}.project-link{display:inline-block;margin-top:1rem;color:#7cc7ff;font-weight:500;text-decoration:none}.project-link:hover{text-decoration:underline}.project-filters{display:flex;justify-content:center;gap:1rem;margin:2rem 0 3rem}.project-filters button{padding:.5rem 1.2rem;border-radius:999px;background:transparent;border:1px solid rgba(124,199,255,.4);color:#7cc7ff;cursor:pointer;transition:all .25s ease}.project-filters button.active,.project-filters button:hover{background:#7cc7ff26}.featured-project{max-width:900px;margin:0 auto 4rem;padding:2.5rem;border-radius:22px;background:linear-gradient(135deg,#7cc7ff2e,#ffffff0d);border:1px solid rgba(124,199,255,.35);text-align:center}.featured-project h3{font-size:1.8rem;margin:1rem 0}.badge{display:inline-block;font-size:.7rem;padding:.3rem .7rem;border-radius:999px;background:#7cc7ff26;color:#7cc7ff}.badge.github{background:#b4b4b426;color:#ddd}.badge.featured{background:#ffd76433;color:#ffd764}.status{display:inline-block;margin-top:1rem;font-size:.75rem;padding:.35rem .8rem;border-radius:999px}.status.active{background:#00c87833;color:#00d084}.status.private{background:#ff646433;color:#ff7a7a}.status.archived{background:#b4b4b433;color:#bbb}#animated-bg-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}#animated-bg-root canvas{width:100%;height:100%;display:block}#root,nav,section,footer{position:relative;z-index:1}