*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",Inter,"SF Mono",monospace,sans-serif;background:#fafafa;color:#1a1a1a;line-height:1.6;padding-top:56px;overflow-x:hidden}
::selection{background:rgba(129,140,248,0.3);color:#fff}

/* Navbar */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,250,250,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.06);height:56px}
nav .in{max-width:900px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:100%;justify-content:space-between}
nav .logo{font-weight:700;font-size:20.0px;background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}
nav .lk{display:flex;gap:20px;align-items:center}
nav .lk a{color:#52525b;text-decoration:none;font-size:18.0px;transition:all 0.25s;position:relative}
nav .lk a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:#818cf8;transition:width 0.3s}
nav .lk a:hover{color:#1a1a1a}
nav .lk a:hover::after{width:100%}

/* App */
#app{max-width:900px;margin:0 auto;padding:0 24px 0}

/* Hero */
.hero{position:relative;padding:100px 0 60px;text-align:center;overflow:hidden;min-height:420px;display:flex;align-items:center;justify-content:center}
#hero-canvas{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:900px;height:100%;pointer-events:none;z-index:0}
.hero .c{position:relative;z-index:1}
.hero .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,0.08) 0%,rgba(167,139,250,0.03) 40%,transparent 70%);pointer-events:none;z-index:-1}
.hero h1{font-size:clamp(2.2rem,6vw,3.5rem);font-weight:800;margin-bottom:14px;letter-spacing:-0.03em;background:linear-gradient(135deg,#1a1a1a 0%,#52525b 30%,#6366f1 60%,#a78bfa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeUp 0.8s ease-out;text-shadow:none}
.hero .sub{font-size:clamp(0.95rem,2vw,1.1rem);color:#52525b;margin-bottom:24px;animation:fadeUp 0.8s ease-out 0.15s both}
.hero .tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;animation:fadeUp 0.8s ease-out 0.3s both}
.hero .tag{padding:5px 14px;border-radius:20px;font-size:17.5px;color:#6366f1;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(167,139,250,0.05));border:1px solid rgba(99,102,241,0.2)}

/* Sections */
.section{margin-bottom:48px}
.st{font-size:17.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:#1a1a1a;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.st::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0.08),transparent)}

/* About Me Card */
.about-card{background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:28px 30px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03)}
.about-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#6366f1,#a78bfa,transparent);background-size:200% 100%;animation:gradientMove 4s ease infinite}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.about-left{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.about-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,rgba(129,140,248,0.2),rgba(192,132,252,0.15));display:flex;align-items:center;justify-content:center;font-size:29.0px;flex-shrink:0}
.about-name{font-size:23.0px;font-weight:700;color:#1a1a1a}
.about-role{font-size:18.0px;color:#52525b;margin-top:2px}
.about-body{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.about-line{display:flex;align-items:baseline;gap:10px;font-size:19.0px;line-height:1.6}
.about-label{color:#818cf8;font-weight:500;white-space:nowrap;min-width:90px;font-size:18.0px}
.about-val{color:#52525b}
.about-tags{display:flex;gap:6px;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06)}
.about-tag{padding:4px 12px;border-radius:20px;font-size:17.0px;background:rgba(129,140,248,0.08);border:1px solid rgba(129,140,248,0.1);color:#818cf8}

/* Building Cards */
.bc{background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:22px 26px;margin-bottom:10px;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03)}
.bc::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,#818cf8,#a78bfa,transparent);opacity:0;transition:opacity 0.35s}
.bc:hover{background:rgba(99,102,241,0.02);border-color:rgba(99,102,241,0.15);transform:translateY(-3px);box-shadow:0 4px 16px rgba(0,0,0,0.04),0 8px 24px rgba(99,102,241,0.04)}
.bc:hover::before{opacity:1}
.bc .n{font-size:21.0px;font-weight:600;color:#1a1a1a;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.bc .n .st-badge{display:inline-block;font-size:15.0px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.04em}
.bc .n .st-badge.done{background:rgba(52,211,153,0.12);color:#34d399;border:1px solid rgba(52,211,153,0.2)}
.bc .n .st-badge.wip{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.2)}
.bc .d{font-size:18.5px;color:#52525b;line-height:1.6}
.bc .m{font-size:17.0px;color:#71717a;margin-top:5px;font-family:'SF Mono',Menlo,monospace}

/* Research Cards */
.rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.rc{background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:20px 22px;cursor:pointer;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.rc::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,0.07) 0%,transparent 60%);opacity:0;transition:opacity 0.4s}
.rc:hover{transform:translateY(-5px);border-color:rgba(99,102,241,0.15);box-shadow:0 4px 16px rgba(0,0,0,0.04),0 8px 24px rgba(99,102,241,0.04)}
.rc:hover::before{opacity:1}
.rc .i{font-size:31.0px;margin-bottom:8px;display:block}
.rc .n3{font-weight:600;font-size:19.0px;color:#1a1a1a;margin-bottom:4px}
.rc .dp{font-size:17.5px;color:#52525b;line-height:1.6}
.rc .exp{font-size:17.5px;color:#a1a1aa;line-height:1.6;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.06)}

/* Projects */
.pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pc{background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:24px;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03)}
.pc::after{content:'';position:absolute;bottom:0;left:20%;width:60%;height:1.5px;background:linear-gradient(90deg,transparent,#818cf8,#a78bfa,transparent);opacity:0;transition:opacity 0.35s}
.pc:hover{transform:translateY(-5px);border-color:rgba(99,102,241,0.15);box-shadow:0 4px 16px rgba(0,0,0,0.04),0 8px 24px rgba(99,102,241,0.04)}
.pc:hover::after{opacity:1}
.pc .pi{font-size:33.0px;margin-bottom:10px;display:block}
.pc .pn{font-weight:600;font-size:21.0px;color:#1a1a1a;margin-bottom:6px}
.pc .pd{font-size:18.0px;color:#52525b;line-height:1.6;margin-bottom:12px}
.pc .pl{display:inline-flex;align-items:center;gap:4px;font-size:18.0px;color:#818cf8;text-decoration:none;font-weight:500;transition:all 0.25s}
.pc .pl:hover{gap:8px;color:#a78bfa;text-decoration:none}

/* Projects page */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.proj-card{background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:24px;cursor:pointer;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03)}
.proj-card::after{content:'';position:absolute;bottom:0;left:20%;width:60%;height:1.5px;background:linear-gradient(90deg,transparent,#818cf8,#a78bfa,transparent);opacity:0;transition:opacity 0.35s}
.proj-card:hover{transform:translateY(-5px);border-color:rgba(99,102,241,0.15);box-shadow:0 4px 16px rgba(0,0,0,0.04),0 8px 24px rgba(99,102,241,0.04)}
.proj-card:hover::after{opacity:1}
.proj-card .p-icon{font-size:37.0px;margin-bottom:10px;display:block}
.proj-card .p-name{font-weight:600;font-size:22.0px;color:#1a1a1a;margin-bottom:6px}
.proj-card .p-desc{font-size:18.0px;color:#52525b;line-height:1.6;margin-bottom:10px}
.proj-card .p-techs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.proj-card .p-tech{font-size:16.0px;padding:2px 8px;border-radius:6px;background:rgba(129,140,248,0.07);color:#818cf8}
.proj-card .p-status{font-size:16.0px;color:#71717a;display:flex;align-items:center;gap:4px}
.proj-card .p-status .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.proj-card .p-status .dot.done{background:#34d399}
.proj-card .p-status .dot.wip{background:#fbbf24}
.blogs-section{position:relative;overflow:hidden;width:100vw;left:50%;margin-left:-50vw;min-height:100vh;box-sizing:border-box;margin-bottom:0}
#blogs-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:0.5}
.blogs-section .st{color:#1a1a1a;padding-top:40px;padding-left:30px;padding-right:30px}
.blogs-section .st::after{background:linear-gradient(90deg,rgba(255,255,255,0.06),transparent)}
.blogs-section .bc{position:relative;z-index:1;margin:0 30px 10px}
.projects-section{position:relative;overflow:hidden;width:100vw;left:50%;margin-left:-50vw;padding:80px 24px;min-height:100vh;box-sizing:border-box;margin-bottom:0} .projects-section .projects-grid,.projects-section .st{margin-left:0;margin-right:0}
.projects-section .st{color:#1a1a1a}
.projects-section .st::after{background:linear-gradient(90deg,rgba(255,255,255,0.06),transparent)}
#projects-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:0.5}

/* All Projects button */
.st .all-projects-btn{font-size:17.0px;font-weight:500;color:#818cf8;text-decoration:none;margin-left:auto;padding:5px 14px;border-radius:8px;border:1px solid rgba(129,140,248,0.2);transition:all 0.25s;white-space:nowrap;text-transform:none;letter-spacing:0}
.st .all-projects-btn:hover{background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.4)}

/* Contact */
.contact{background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:24px 28px;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03)}
.contact-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:19.0px;color:#52525b}
.contact-item+.contact-item{border-top:1px solid rgba(255,255,255,0.04)}
.contact-item .ci-icon{font-size:23.0px;width:26px;text-align:center;flex-shrink:0}
.contact-item .ci-label{color:#71717a;min-width:62px;font-size:17.5px;font-weight:500}
.contact-item a{color:#818cf8;text-decoration:none;transition:color 0.2s}
.contact-item a:hover{color:#c084fc;text-decoration:underline}
.contact-item .ci-val{color:#52525b}

/* Background Three.js canvas */
#bg-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1;opacity:0.7}
.contact-wrap{position:relative;overflow:hidden;border-radius:16px}
#contact-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.4}
.contact{position:relative;z-index:1}

/* Project Detail */
.proj-detail{padding-top:40px}
.proj-detail .back-link{display:inline-flex;align-items:center;gap:6px;color:#71717a;text-decoration:none;font-size:19.0px;margin-bottom:24px;transition:color 0.2s}
.proj-detail .back-link:hover{color:#818cf8}
.proj-detail .pd-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.proj-detail .pd-icon{font-size:45.0px}
.proj-detail .pd-name{font-size:29.0px;font-weight:700;color:#1a1a1a}
.proj-detail .pd-meta{font-size:18.0px;color:#52525b;margin-bottom:20px;display:flex;gap:12px;flex-wrap:wrap}
.proj-detail .pd-meta span{background:rgba(0,0,0,0.03);padding:4px 12px;border-radius:8px}
.proj-detail .pd-body{font-size:19.0px;color:#52525b;line-height:1.8;margin-bottom:24px}
.proj-detail .pd-body p{margin-bottom:12px}
.proj-detail .pd-techs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.proj-detail .pd-tech{font-size:17.0px;padding:4px 12px;border-radius:8px;background:rgba(129,140,248,0.08);color:#818cf8;border:1px solid rgba(129,140,248,0.1)}
.proj-detail .pd-links{display:flex;gap:12px;margin-bottom:32px}
.proj-detail .pd-links a{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:10px;font-size:19.0px;font-weight:500;text-decoration:none;transition:all 0.25s}
.proj-detail .pd-links .btn-primary{background:#818cf8;color:#fff}
.proj-detail .pd-links .btn-primary:hover{background:#6366f1}
.proj-detail .pd-links .btn-outline{border:1px solid rgba(0,0,0,0.1);color:#71717a}
.proj-detail .pd-links .btn-outline:hover{border-color:#818cf8;color:#818cf8}
.proj-detail .pd-github{display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border-radius:12px;font-size:19.0px;font-weight:500;text-decoration:none;transition:all 0.3s;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:#e4e4e7}
.proj-detail .pd-github:hover{background:rgba(129,140,248,0.08);border-color:rgba(129,140,248,0.3);color:#818cf8;transform:translateY(-2px);box-shadow:0 6px 20px rgba(129,140,248,0.08)}
.proj-detail .pd-github .gh-icon{font-size:25.0px}
.proj-detail .pd-github .gh-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
.proj-detail .pd-github .gh-name{font-size:18.0px;color:#71717a}
.proj-detail .pd-github .gh-label{font-size:16.0px;color:#71717a}
.proj-detail .pd-github:hover .gh-name{color:#818cf8}
.proj-detail .pd-github:hover .gh-label{color:#6366f1}
.proj-detail .pd-links .btn-outline:hover{border-color:#818cf8;color:#818cf8}

/* Footer */
.ft{text-align:center;padding:40px 0 24px;border-top:1px solid rgba(0,0,0,0.06);margin-top:48px}
.ft .lk{display:flex;gap:20px;justify-content:center;margin-bottom:10px}
.ft a{color:#71717a;text-decoration:none;font-size:18.0px;transition:color 0.25s;position:relative}
.ft a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#818cf8;transition:width 0.3s}
.ft a:hover{color:#1a1a1a}
.ft a:hover::after{width:100%}
.ft p{font-size:17.0px;color:#71717a}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fi{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
.fi.v{opacity:1;transform:translateY(0)}

@media(max-width:640px){
  .hero{padding:60px 0 40px;min-height:320px}
  .rg{grid-template-columns:1fr}
  .pg{grid-template-columns:1fr}
}