:root{--bg: #f5f5f5;--fg: #213547;--muted: #667085;--brand: #646cff;--card: #ffffff;--border: rgba(0,0,0,.08)}html{scrollbar-gutter:stable both-edges}html.modal-open{scrollbar-gutter:auto}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--fg);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5}a{color:var(--brand);text-decoration:none}a:hover{color:#535bf2}.site-header{position:sticky;top:0;z-index:10;width:100%;background:#ffffffb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);box-shadow:0 4px 12px #0000001a}.nav{max-width:1100px;margin:0 auto;padding:.75rem 1rem;display:flex;align-items:center;justify-content:center}.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--fg)}.logo-text{font-weight:700;font-size:1.25rem;line-height:1}.logo-subtitle{font-size:.75rem;color:var(--muted);font-weight:400;margin-top:.125rem}.nav-tabs{display:flex;gap:.5rem;background:#0000000d;padding:.25rem;border-radius:12px}.nav-tab{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500;transition:all .2s ease;position:relative}.nav-tab:hover{color:var(--fg);background:#ffffff80}.nav-tab.active{color:var(--fg);background:var(--card);box-shadow:0 2px 4px #0000001a}.nav-icon{font-size:1.25rem}.nav-label{font-size:1rem}main{max-width:1100px;margin:0 auto;padding:1rem}.btn-primary,.btn-secondary,.btn-link{display:inline-block;padding:.6em 1.1em;border-radius:8px;border:1px solid transparent}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:#535bf2}.btn-secondary{background:transparent;color:var(--brand);border-color:var(--brand)}.btn-secondary:hover{background:#646cff14}.btn-link{color:var(--brand)}.section{padding:2rem 0}.section h2{margin:0 0 .75rem}.home-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem}.photo-card{display:grid;place-items:center;text-align:center}.profile-photo{width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:.5rem;border:3px solid var(--card);box-shadow:0 4px 12px #0000001a,0 0 0 1px var(--border);transition:transform .2s ease,box-shadow .2s ease}.profile-photo:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026,0 0 0 1px var(--border)}.summary-card p{margin:0;color:var(--muted);text-align:justify}.hobbies-card{position:relative}.hobbies-card .chip-list{flex-wrap:wrap}.contact-card a{color:var(--brand)}.education-list{display:flex;flex-direction:column;gap:.75rem;text-align:left}.education-item h3{margin:.5rem 0 .25rem;font-size:1rem}.education-item p{margin:0;font-size:.9rem;color:var(--muted)}.hobby-chip{cursor:pointer;transition:all .2s}.hobby-chip:hover{transform:translateY(-2px);cursor:pointer}.hobby-tooltip{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.75rem;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:200px;max-width:300px;pointer-events:none;text-align:justify}.hobby-tooltip h4{margin:0 0 .5rem;font-size:.9rem}.hobby-tooltip p{margin:0;font-size:.8rem;color:var(--muted);line-height:1.4}.chip-list{list-style:none;display:flex;gap:.5rem;padding:0;margin:0}.chip{padding:.4rem .6rem;border:1px solid var(--border);border-radius:999px}.filters{display:flex;gap:1rem;align-items:center;margin-bottom:1rem;width:100%}.filters label{display:flex;gap:.5rem;align-items:center}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.project-card{padding:1rem;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--card);box-shadow:0 2px 4px #0000001a}.tag-list{list-style:none;display:flex;gap:.5rem;padding:0;margin:.25rem 0 0}.tag{font-size:.85rem;opacity:.8}.modal-backdrop{position:fixed;inset:0;background:#00000080;display:grid;place-items:center;padding:1rem;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:9999;animation:fadeIn .2s ease-out}.modal{background:#fff;color:var(--fg);max-width:640px;width:100%;border-radius:12px;padding:1.25rem;position:relative;max-height:80vh;overflow-y:auto}.modal-animate{animation:slideIn .2s ease-out}.modal-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.modal-logo{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0}.modal-logo img{width:100%;height:100%;object-fit:cover}.modal-short-desc{font-weight:500;margin-bottom:1rem;color:var(--muted)}.modal-image{margin:1rem 0;text-align:center}.modal-image img{max-width:100%;height:auto;border-radius:6px;box-shadow:0 4px 12px #0000001a}.modal-close{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:1.5rem;line-height:1;cursor:pointer;z-index:10}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.filter-chips{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.filter-label{font-size:.9rem;color:var(--muted);margin-right:.25rem}.clear-filters{width:10rem}.chip-btn{border:2px solid var(--chip-color, #CBD5E1);background:#fff;color:#000;border-radius:999px;padding:.35rem .7rem;font-size:.9rem;cursor:pointer}.chip-btn:hover{background:#eee;color:#000}.chip-btn.selected{background:var(--chip-color, #CBD5E1);color:var(--chip-text, #000)}.project-logos{display:flex;gap:.4rem;margin-bottom:2rem}.logo-circle{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:.75rem}.tech-logo{width:16px;height:16px}@media (prefers-color-scheme: dark){:root{--bg: #0f172a;--fg: #e2e8f0;--muted: #94a3b8;--card: #0b1222;--border: rgba(255,255,255,.08)}.modal{background:#0b1222;color:var(--fg)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}