@import"https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&display=swap";@import"https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100vh;background:#000;position:relative;overflow:hidden}body:before{content:"";position:fixed;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 50%,rgba(147,51,234,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(147,51,234,.08) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(124,58,237,.05) 0%,transparent 40%);animation:float 20s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes float{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{background:transparent;min-height:100vh;width:100%;margin:0;padding:0;overflow:hidden;position:relative}.app:after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(147,51,234,.02) 50%,transparent 100%);pointer-events:none;z-index:0}.name-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;position:relative;animation:shrink-container 1s ease-in-out 1.2s forwards}@keyframes shrink-container{to{height:150px}}.name-display{font-size:5rem;color:#fff;font-weight:400;text-align:center;margin:0;font-family:Bruno Ace SC,sans-serif;letter-spacing:.1em;text-transform:uppercase;position:absolute;top:50%;transform:translateY(-50%);-webkit-animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both,move-to-top 1s ease-in-out 1.2s forwards;animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both,move-to-top 1s ease-in-out 1.2s forwards}@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}to{-webkit-filter:blur(0px);filter:blur(0px);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}to{-webkit-filter:blur(0px);filter:blur(0px);opacity:1}}@-webkit-keyframes move-to-top{0%{top:50%;transform:translateY(-50%);font-size:5rem}to{top:60px;transform:translateY(0);font-size:2.5rem}}@keyframes move-to-top{0%{top:50%;transform:translateY(-50%);font-size:5rem}to{top:60px;transform:translateY(0);font-size:2.5rem}}@media (max-width: 768px){.name-display{font-size:3.5rem}@keyframes move-to-top{0%{top:50%;transform:translateY(-50%);font-size:3.5rem}to{top:40px;transform:translateY(0);font-size:2rem}}}@media (max-width: 480px){.name-display{font-size:2.5rem}@keyframes move-to-top{0%{top:50%;transform:translateY(-50%);font-size:2.5rem}to{top:30px;transform:translateY(0);font-size:1.5rem}}}.social-links{position:absolute;top:120px;display:flex;align-items:center;gap:15px;font-family:Courier New,monospace;font-size:.85rem;opacity:0;animation:fade-in .8s ease-in-out 2.2s forwards}.social-link{color:#ccc;text-decoration:none;transition:color .3s ease}.social-link:hover{color:#fff}.separator{color:#888;opacity:.7}@media (max-width: 768px){.social-links{top:100px;font-size:.9rem;gap:10px}}@media (max-width: 480px){.social-links{top:80px;font-size:1rem;gap:8px;flex-wrap:wrap;justify-content:center;padding:0 10px}}.main-content{opacity:0;animation:fade-in 1s ease-in-out 2.5s forwards;padding:0;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh}.quadrant-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:40vw;height:50vw;max-width:600px;max-height:600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);gap:0;background:transparent}.quadrant-grid:before{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:#fff;transform:translateY(-50%);pointer-events:none;z-index:5;transition:top .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}.quadrant-grid:after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#fff;transform:translate(-50%);pointer-events:none;z-index:5;transition:left .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}.quadrant-grid.active-experience:before{top:100%;transform:translateY(-2px)}.quadrant-grid.active-experience:after{left:100%;transform:translate(-2px)}.quadrant-grid.active-projects:before{top:100%;transform:translateY(-2px)}.quadrant-grid.active-projects:after{left:0;transform:translate(0)}.quadrant-grid.active-about:before{top:0;transform:translateY(0)}.quadrant-grid.active-about:after{left:100%;transform:translate(-2px)}.quadrant-grid.active-blog:before{top:0;transform:translateY(0)}.quadrant-grid.active-blog:after{left:0;transform:translate(0)}.quadrant-grid.closing:before{animation:border-horizontal-return .6s cubic-bezier(.4,0,.2,1) .5s forwards}.quadrant-grid.closing:after{animation:border-vertical-return .6s cubic-bezier(.4,0,.2,1) .5s forwards}@keyframes border-horizontal-return{to{top:50%;transform:translateY(-50%)}}@keyframes border-vertical-return{to{left:50%;transform:translate(-50%)}}.quadrant{background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:visible;border:none}.quadrant:hover:not(.active){background:#1a1a1a}.quadrant.hidden{opacity:0;pointer-events:none;transition:opacity 0s;position:relative}.quadrant.hidden .quadrant-title{visibility:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fade-in-quadrant{0%{opacity:0}to{opacity:1}}.quadrant.active{position:absolute;z-index:10;cursor:default;background:transparent}.quadrant.top-left.active{animation:expand-top-left .6s cubic-bezier(.4,0,.2,1) forwards}.quadrant.top-right.active{animation:expand-top-right .6s cubic-bezier(.4,0,.2,1) forwards}.quadrant.bottom-left.active{animation:expand-bottom-left .6s cubic-bezier(.4,0,.2,1) forwards}.quadrant.bottom-right.active{animation:expand-bottom-right .6s cubic-bezier(.4,0,.2,1) forwards}.quadrant.top-left.closing{top:0;left:0;width:100%;height:100%;animation:collapse-top-left .6s cubic-bezier(.4,0,.2,1) .5s forwards}.quadrant.top-right.closing{top:0;right:0;width:100%;height:100%;animation:collapse-top-right .6s cubic-bezier(.4,0,.2,1) .5s forwards}.quadrant.bottom-left.closing{bottom:0;left:0;width:100%;height:100%;animation:collapse-bottom-left .6s cubic-bezier(.4,0,.2,1) .5s forwards}.quadrant.bottom-right.closing{bottom:0;right:0;width:100%;height:100%;animation:collapse-bottom-right .6s cubic-bezier(.4,0,.2,1) .5s forwards}@keyframes expand-top-left{0%{top:0;left:0;width:calc(50% - 1px);height:calc(50% - 1px)}to{top:0;left:0;width:100%;height:100%}}@keyframes expand-top-right{0%{top:0;right:0;width:calc(50% - 1px);height:calc(50% - 1px)}to{top:0;right:0;width:100%;height:100%}}@keyframes expand-bottom-left{0%{bottom:0;left:0;width:calc(50% - 1px);height:calc(50% - 1px)}to{bottom:0;left:0;width:100%;height:100%}}@keyframes expand-bottom-right{0%{bottom:0;right:0;width:calc(50% - 1px);height:calc(50% - 1px)}to{bottom:0;right:0;width:100%;height:100%}}@keyframes collapse-top-left{0%{top:0;left:0;width:100%;height:100%}to{top:0;left:0;width:calc(50% - 1px);height:calc(50% - 1px)}}@keyframes collapse-top-right{0%{top:0;right:0;width:100%;height:100%}to{top:0;right:0;width:calc(50% - 1px);height:calc(50% - 1px)}}@keyframes collapse-bottom-left{0%{bottom:0;left:0;width:100%;height:100%}to{bottom:0;left:0;width:calc(50% - 1px);height:calc(50% - 1px)}}@keyframes collapse-bottom-right{0%{bottom:0;right:0;width:100%;height:100%}to{bottom:0;right:0;width:calc(50% - 1px);height:calc(50% - 1px)}}.quadrant-title{font-family:Bruno Ace SC,sans-serif;font-size:1.2rem;color:#fff;letter-spacing:.1em;text-transform:uppercase;margin:0;padding:0;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.quadrant.active:not(.closing) .quadrant-title{animation:title-to-top .3s ease-in-out .8s forwards}.quadrant.active.closing .quadrant-title{animation:title-to-center .3s ease-in-out forwards!important}@keyframes title-to-top{0%{top:50%;left:50%;transform:translate(-50%,-50%)}to{top:1.5rem;left:50%;transform:translate(-50%)}}@keyframes title-to-center{0%{top:1.5rem;left:50%;transform:translate(-50%)}to{top:50%;left:50%;transform:translate(-50%,-50%)}}.close-button{position:absolute;top:1.5rem;right:1.5rem;background:transparent;border:none;color:#fff;font-size:1.2rem;cursor:pointer;z-index:100;line-height:1;padding:0;margin:0;opacity:0;animation:fade-in-button .3s ease-in-out 1.1s forwards;font-family:Bruno Ace SC,sans-serif;letter-spacing:.1em;transform:translateY(0);outline:none}.quadrant.closing .close-button{animation:none;opacity:0}.close-button:hover{opacity:.7!important}.close-button:focus{outline:none}.section-content{width:100%;height:calc(100% - 4rem);margin-top:2rem;opacity:0;animation:fade-in-content .3s ease-in-out 1.1s forwards;overflow:hidden}.quadrant.closing .section-content{animation:none;opacity:0}@keyframes fade-in-content{0%{opacity:0}to{opacity:1}}@keyframes fade-in-button{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.resume-button{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);font-family:Courier New,monospace;font-size:1.2rem;color:#ccc;text-decoration:underline;transition:color .3s ease;z-index:1000;opacity:0;animation:fade-in 1s ease-in-out 2.5s forwards}.resume-button:hover{color:#fff}.experience-container{display:flex;flex-direction:column;gap:2.5rem;padding:1.5rem;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.experience-item{display:flex;flex-direction:column;gap:.75rem}.experience-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.company-info{display:flex;align-items:center;gap:.75rem}.company-name{font-family:Bruno Ace SC,sans-serif;font-size:.8rem;color:#fff;margin:0;letter-spacing:.05em}.company-link{display:flex;align-items:center;color:#888;transition:color .3s ease;text-decoration:none}.company-link:hover{color:#fff}.company-link svg{width:16px;height:16px}.experience-period{font-family:Courier New,monospace;font-size:.8rem;color:#888;margin:0;white-space:nowrap}.experience-description{font-family:Courier New,monospace;font-size:.8rem;color:#ccc;line-height:1.6;margin:0}.technologies{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}.tech-tag{font-family:Courier New,monospace;font-size:.6rem;color:#fff;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);padding:.35rem .75rem;border-radius:4px;letter-spacing:.05em;transition:all .3s ease}.tech-tag:hover{background:#ffffff26;border-color:#ffffff4d}.about-content{display:flex;flex-direction:column;gap:1.5rem}.about-text{font-family:Courier New,monospace;font-size:.85rem;color:#ccc;line-height:1.8;margin:0}@media (max-width: 768px){.experience-container{padding:1rem;gap:2rem}.company-name{font-size:1rem}.experience-header{flex-direction:column;gap:.5rem;align-items:flex-start}.experience-period{align-self:flex-start}}
