:root{--bg: #0b0c10;--panel: rgba(255, 255, 255, .06);--panel-strong: rgba(255, 255, 255, .12);--text: #eaeaea;--muted: #b7b7b7;--brand: #a855f7;--brand-2: #39c6ff;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--nav-h: 72px;--mx: 50vw;--my: 50vh}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}.bg-layers,.cursor-glow{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-2}.bg-layers:before,.bg-layers:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-2}.bg-layers:before{background:radial-gradient(800px 400px at 20% 15%,rgba(168,85,247,.2),transparent),radial-gradient(800px 400px at 80% 85%,rgba(57,198,255,.18),transparent);filter:blur(30px)}.bg-layers:after{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px,40px 40px;mask:radial-gradient(circle at center,black 55%,transparent 62%)}.cursor-glow{z-index:-1;background:radial-gradient(240px 240px at var(--mx) var(--my),rgba(168,85,247,.22),transparent 65%),radial-gradient(340px 340px at calc(var(--mx) + 120px) calc(var(--my) + 80px),rgba(57,198,255,.16),transparent 70%);filter:blur(18px);mix-blend-mode:screen;transition:background-position 80ms linear}.layout{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}.navbar{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;justify-content:space-between;align-items:center;padding:0 2rem}.glass{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--panel-strong);box-shadow:var(--shadow)}.logo{font-weight:800;letter-spacing:.5px}.nav-links{display:flex;gap:1rem;align-items:center}.nav-link{color:#8fd3ff;text-decoration:none;font-weight:600;opacity:.85;transition:.2s ease;padding:.4rem .6rem;border-radius:8px}.nav-link:hover{opacity:1;background:var(--panel-strong)}.nav-link.active{color:#fff;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);box-shadow:0 8px 20px #39c6ff40}.content{padding:3rem 1.25rem}@media (min-width: 900px){.content{padding:4rem 3rem}}.footer{text-align:center;padding:1rem;font-size:.95rem;color:#9f9f9f}.footer .footer-link{color:var(--brand)}.footer .sep{opacity:.5;margin:0 .35rem}.content>.landing{padding:0;min-height:calc(100vh - var(--nav-h));display:grid;place-items:start center;padding-top:8vh;text-align:center}.hero{margin:0}.headline{font-size:clamp(2.2rem,6vw,4rem);margin:0 0 .75rem}.highlight{color:var(--brand)}.subtext{color:var(--text);opacity:.9;font-size:clamp(1rem,2.2vw,1.25rem)}.rotating{color:var(--brand-2);font-weight:700;letter-spacing:.3px}.muted{color:var(--muted)}.profile-pic{width:148px;height:148px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 1.25rem;border:2px solid var(--brand);box-shadow:0 10px 30px #a855f740}.cta-row{margin-top:1.5rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--panel-strong);padding:.65rem 1rem;border-radius:12px;color:var(--text);background:#ffffff08;cursor:pointer;transition:transform .06s ease,background .2s ease,border-color .2s ease}.btn:hover{background:#ffffff0f;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{border:none;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;box-shadow:0 10px 30px #39c6ff40}.btn-ghost{color:#cfcfcf}.page{max-width:1100px;margin:0 auto;text-align:center}.page h2{font-size:clamp(1.6rem,3vw,2rem);margin:0 0 1rem}.about-inner{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}@media (min-width: 900px){.about-inner{grid-template-columns:3fr 2fr}}.about-card{padding:1.5rem 1.75rem;border-radius:14px;text-align:left}.about-list{list-style:none;padding:0;margin:1rem 0 0;line-height:1.9}.about-list li{color:#d8d8d8}.about-photo{width:100%;max-width:380px;justify-self:center;border-radius:16px;border:2px solid var(--brand-2);box-shadow:0 16px 40px #39c6ff2e}.project-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:1.5rem}@media (min-width: 900px){.project-grid{grid-template-columns:repeat(3,1fr)}}.card{background:var(--panel);border:1px solid var(--panel-strong);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}.card:hover{transform:translateY(-6px) scale(1.01);border-color:#a855f799;box-shadow:0 18px 40px #a855f72e}.project-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.project-card h3{margin:0}.chip{font-size:.8rem;padding:.25rem .55rem;border-radius:999px;background:#a855f71f;color:#dcb8ff;border:1px solid rgba(168,85,247,.35)}.card-actions{margin-top:.75rem;display:flex;gap:.5rem}.resume-frame{width:100%;height:78vh;border:2px solid var(--brand);border-radius:12px;box-shadow:0 12px 30px #a855f72e}.download-link{display:inline-block;margin-top:1rem;color:var(--brand)}.contact-box{margin:1rem auto 0;max-width:520px;display:flex;gap:.75rem;justify-content:center;padding:1rem;border-radius:14px}.timeline{display:grid;gap:1rem;margin-top:.5rem}.timeline-card h3{margin:.4rem 0 .25rem}.timeline-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.tag-row{display:flex;gap:.4rem;margin-top:.5rem}.tag{font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#cfcfcf}.ratio{position:relative;overflow:hidden;border-radius:14px}.browser-frame{border-radius:14px;overflow:hidden;background:#0c0c0c;border:1px solid var(--panel-strong)}.browser-topbar{height:28px;display:flex;align-items:center;gap:8px;padding:0 10px;background:linear-gradient(180deg,#ffffff0f,#ffffff08);border-bottom:1px solid var(--panel-strong)}.dot{width:10px;height:10px;border-radius:50%}.dot.red{background:#ff5f57}.dot.amber{background:#febc2e}.dot.green{background:#28c840}.browser-content{padding:0}.spacer{flex:1}.frame-controls{display:flex;gap:6px}.thumb-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--panel-strong);background:#ffffff0a;color:#ddd;cursor:pointer;padding:2px 8px;border-radius:8px;font-size:14px;line-height:1}.thumb-btn:hover{background:#ffffff12}.project-thumbs{display:grid;grid-auto-flow:column;gap:6px;padding:8px;justify-content:center;border-top:1px solid var(--panel-strong);background:#ffffff05}.thumb{padding:0;border:1px solid var(--panel-strong);background:transparent;border-radius:8px;overflow:hidden;cursor:pointer;width:80px;height:56px}.thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3);transition:filter .2s ease,transform .2s ease}.thumb:hover img{filter:grayscale(0);transform:scale(1.03)}.thumb.active{border-color:#a855f799;box-shadow:0 8px 20px #a855f72e}.thumb.active img{filter:grayscale(0)}.ratio{position:relative;overflow:hidden;border-radius:14px;width:100%}.ratio>img,.ratio>video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.ratio-16x9{padding-top:56.25%}.ratio-4x3{padding-top:75%}.ratio-3x2{padding-top:66.6667%}.photo-ring{border-radius:14px;padding:2px;background:linear-gradient(135deg,var(--brand),var(--brand-2))}.photo-ring>.inner{border-radius:12px;overflow:hidden;background:#0a0a0a;height:100%}.timeline-card .photo-ring{margin:.5rem 0 .75rem}.journey-media{display:flex;align-items:center;gap:.75rem;margin:.5rem 0 .75rem}.journey-thumb{width:120px;height:80px;border-radius:10px;overflow:hidden;border:1px solid var(--panel-strong);background:#0c0c0c}.journey-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;background:#0000008c}.lb-inner{position:relative;background:#0f0f12e6;border:1px solid var(--panel-strong);border-radius:16px;padding:14px;box-shadow:0 20px 60px #00000073}.lb-img{max-width:90vw;max-height:78vh;display:block;border-radius:10px;background:#0a0a0a}.lb-close{position:absolute;top:8px;right:10px;background:#ffffff0f;border:1px solid var(--panel-strong);color:#ddd;border-radius:10px;padding:6px 10px;cursor:pointer}.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff0f;border:1px solid var(--panel-strong);color:#eee;border-radius:10px;padding:6px 10px;cursor:pointer}.lb-nav.left{left:8px}.lb-nav.right{right:8px}.lb-thumbs{margin-top:10px;display:grid;grid-auto-flow:column;gap:6px;justify-content:center}.lb-thumb{width:80px;height:56px;border-radius:8px;overflow:hidden;border:1px solid var(--panel-strong);background:#0b0b0b;padding:0;cursor:pointer}.lb-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}.lb-thumb.active{border-color:#a855f799;box-shadow:0 8px 20px #a855f72e}.lb-thumb.active img{filter:grayscale(0)}.avatar-wrap{position:relative;margin:0 auto .9rem;border-radius:50%;box-shadow:0 12px 40px #a855f738}.avatar-img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.14)}.snake-ring{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.snake-path{fill:none;stroke:url(#snakeGrad);stroke-width:10px;stroke-linecap:round;filter:url(#snakeGlow);stroke-dasharray:28 72;stroke-dashoffset:100;animation:snake-wrap 1.8s ease-out forwards}.snake-head{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#a855f7 55%,#39c6ff);box-shadow:0 0 10px #39c6ff8c,0 0 22px #a855f759;transform:translate(-50%,-50%) rotate(0) translate(var(--r));transform-origin:center;animation:head-orbit 1.8s ease-out forwards;opacity:.95}@keyframes snake-wrap{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes head-orbit{0%{transform:translate(-50%,-50%) rotate(0) translate(var(--r));opacity:1}80%{opacity:1}to{transform:translate(-50%,-50%) rotate(360deg) translate(var(--r));opacity:0}}@media (prefers-reduced-motion: reduce){.snake-path,.snake-head{animation:none!important}.snake-head{display:none}}@media (max-width: 440px){.project-card ul{display:none}}
