html,body{margin:0;padding:0;width:100%;height:100%;background:#020617;overflow:hidden}#root{width:100%;height:100%;position:relative}#root{width:100%;height:100%;margin:0;padding:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pageTransitionIn{0%{opacity:0}to{opacity:1}}.page-transition-wrapper{animation:pageTransitionIn .5s ease-in}.animate-fadeIn{animation:fadeIn 1s ease-out;opacity:0}.app-container{width:100vw;height:100vh;position:relative}.center-content{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;pointer-events:none;opacity:1;transition:opacity .8s ease-out}.center-content.hidden{opacity:0;pointer-events:none;transition:opacity .3s ease-out}.main-title{font-family:Impact,sans-serif;font-size:12rem;font-weight:400;color:#fff;margin-bottom:0;line-height:1;animation-delay:.2s;animation-fill-mode:both;z-index:10;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.subtitle{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:2rem;font-weight:400;color:#ffffffb3;margin-top:.2rem;margin-bottom:2rem;letter-spacing:.3rem;text-transform:uppercase;animation-delay:.4s;animation-fill-mode:both;z-index:10;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.button-container{display:flex;gap:1.5rem;animation-delay:.6s;animation-fill-mode:both;z-index:10}.portfolio-button,.portfolio-button *,.portfolio-button :after,.portfolio-button :before,.portfolio-button:after,.portfolio-button:before{border:0 solid;box-sizing:border-box}.portfolio-button{-webkit-tap-highlight-color:transparent;-webkit-appearance:button;background-color:#000;background-image:none;color:#fff;cursor:pointer;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:100%;line-height:1.5;margin:0;-webkit-mask-image:-webkit-radial-gradient(#000,#fff);padding:0;text-transform:uppercase}.portfolio-button:disabled{cursor:default}.portfolio-button:-moz-focusring{outline:auto}.portfolio-button svg{display:block;vertical-align:middle}.portfolio-button [hidden]{display:none}.portfolio-button{border:1px solid;overflow:hidden;padding:2rem 10rem;position:relative;text-align:center;z-index:10000;animation-delay:.8s;animation-fill-mode:both;pointer-events:auto}.portfolio-button span{mix-blend-mode:difference;position:relative;font-size:1.5rem;letter-spacing:.2rem}.portfolio-button:before{--stripe: #0000ff;background:linear-gradient(135deg,transparent 25%,var(--stripe) 25%,var(--stripe) 50%,transparent 50%,transparent 75%,var(--stripe) 75%);background-size:.3rem .3rem;content:"";inset:0;position:absolute;transform:translateY(-100%);transition:transform .4s}.portfolio-button:hover:before{transform:translateY(0)}.animated-button,.animated-button *,.animated-button :after,.animated-button :before,.animated-button:after,.animated-button:before{border:0 solid;box-sizing:border-box}.animated-button{-webkit-tap-highlight-color:transparent;-webkit-appearance:button;background-color:#000;background-image:none;color:#fff;cursor:pointer;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:3rem;font-weight:900;line-height:1.5;margin:0;-webkit-mask-image:-webkit-radial-gradient(#000,#fff);padding:0;text-transform:uppercase;pointer-events:auto;text-decoration:none;display:inline-block}.animated-button:disabled{cursor:default}.animated-button:-moz-focusring{outline:auto}.animated-button svg{display:block;vertical-align:middle}.animated-button [hidden]{display:none}.animated-button{border-radius:99rem;border-width:2px;overflow:hidden;padding:2rem 10rem;position:relative}.animated-button span{mix-blend-mode:difference}.animated-button:after,.animated-button:before{background:linear-gradient(90deg,#0000ff 25%,transparent 0,transparent 50%,#0000ff 0,#0000ff 75%,transparent 0);content:"";inset:0;position:absolute;transform:translateY(var(--progress, 100%));transition:transform .2s ease}.animated-button:after{--progress: -100%;background:linear-gradient(90deg,transparent 0,transparent 25%,#0000ff 0,#0000ff 50%,transparent 0,transparent 75%,#0000ff 0);z-index:-1}.animated-button:hover:after,.animated-button:hover:before{--progress: 0}.menu-options{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2rem;z-index:10000;opacity:0;pointer-events:none;transition:opacity .4s ease-out}.menu-options.visible{opacity:1;pointer-events:auto}.menu-option{background:transparent;border:none;color:#fff;font-family:Impact,sans-serif;font-size:12rem;font-weight:400;text-transform:uppercase;cursor:pointer;letter-spacing:-2px;line-height:1;padding:0;margin:0;transition:color .4s ease}.menu-option:hover{color:#00f}.menu-close-button{position:fixed;top:2rem;right:2rem;background:transparent;border:none;color:#fff;font-size:4rem;line-height:1;cursor:pointer;padding:0;margin:0;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;transition:color .3s ease;z-index:10001;opacity:0;pointer-events:none}.menu-close-button.visible{opacity:1;pointer-events:auto}.menu-close-button:hover{color:#00f}.creative-page{position:fixed;inset:0;width:100%;height:100vh;overflow:hidden}.creative-background{position:fixed!important;top:0;left:0;width:100%!important;height:100%!important;z-index:0}.creative-background>div{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}.creative-background canvas{display:block!important;width:100%!important;height:100%!important;position:absolute!important;top:0;left:0}.page-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;color:#fff}.page-title{font-family:Impact,sans-serif;font-size:8rem!important;font-weight:400!important;color:#fff;margin-bottom:-1rem;text-transform:uppercase;letter-spacing:-2px}.page-description{font-size:3.5rem;font-family:Impact,sans-serif;color:#ffffffb3;margin-bottom:2rem;margin-top:-1rem;text-transform:uppercase;letter-spacing:.2rem}.back-button{background:transparent;border:1px solid #fff;color:#fff;padding:1rem 3rem;font-size:1rem;text-transform:uppercase;letter-spacing:.2rem;cursor:pointer;transition:all .3s ease}.developer-page{position:fixed;inset:0;width:100%;height:100vh;overflow-y:auto;overflow-x:hidden}.developer-background{position:fixed!important;top:0;left:0;width:100%!important;height:100%!important;z-index:0}.developer-background>div,.developer-background canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}.back-button{position:fixed;top:2rem;left:2rem;z-index:100;background:transparent;border:1px solid #fff;color:#fff;padding:1rem 3rem;font-size:1rem;text-transform:uppercase;letter-spacing:.2rem;cursor:pointer;transition:all .3s ease}.back-button:hover{background:#fff;color:#000}.dev-content-full{position:relative;z-index:10;width:100%;min-height:100vh;padding:6rem 4rem 8rem;display:flex;flex-direction:column;align-items:center;scroll-behavior:smooth}.page-title{font-family:Impact,sans-serif;font-size:8rem!important;font-weight:400!important;color:#fff;margin-bottom:2rem;text-transform:uppercase;letter-spacing:-2px;text-align:center}.intro-section{width:100%;max-width:1400px;margin-bottom:4rem;text-align:center}.intro-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#ffffffe6;font-size:1.5rem;font-weight:400;margin:0 0 2.5rem;letter-spacing:.5px}.tech-stack-icons{display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap}.tech-icon-item{color:#fffc;font-size:3rem;transition:all .3s ease;cursor:pointer}.tech-icon-item:hover{color:#fff;transform:translateY(-5px) scale(1.1)}.custom-tech-text{font-family:Impact,sans-serif;font-size:2rem;font-weight:700}.project-section{width:100%;max-width:1600px;margin-bottom:2rem}.section-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none;padding:1rem 0;transition:all .3s ease}.section-header:hover .section-title{color:#fff}.section-title{font-family:Impact,sans-serif;font-size:3rem;font-weight:400;color:#ffffffe6;margin:0;text-transform:uppercase;letter-spacing:-1px;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:1rem;flex:1;transition:color .3s ease}.section-title-static{font-family:Impact,sans-serif;font-size:3rem;font-weight:400;color:#ffffffe6;margin:0 0 3rem;text-transform:uppercase;letter-spacing:-1px;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:1rem}.collapse-icon{font-size:3rem;color:#ffffffb3;font-weight:300;line-height:1;transition:transform .3s ease,color .3s ease;margin-left:1rem}.section-header:hover .collapse-icon{color:#fff}.section-content{max-height:0;overflow:hidden;transition:max-height .5s ease,opacity .3s ease;opacity:0}.section-content.open{max-height:10000px;opacity:1;padding-top:2rem}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:2rem;width:100%;margin-bottom:2rem;align-items:start}@media(max-width:1024px){.projects-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.projects-grid{grid-template-columns:1fr}}.show-more-button{display:block;margin:3rem auto 0;background:#0009;border:1px solid rgba(255,255,255,.3);color:#fff;padding:1rem 3rem;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.1rem;cursor:pointer;border-radius:8px;transition:all .3s ease;position:relative;z-index:50}.show-more-button:hover{background:#000c;border-color:#fff;transform:translateY(-2px)}.section-content-grid{max-height:0;overflow:hidden;transition:max-height .5s ease,opacity .3s ease;opacity:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.section-content-grid.open{max-height:10000px;opacity:1;padding-top:2rem}.fade-in{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.fade-in-visible{opacity:1;transform:translateY(0)}.project-card-compact{background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .3s ease;display:flex;flex-direction:column;gap:1.5rem;height:450px;width:85%}.project-card-compact:hover{background:#000000b3;border-color:#fff3;transform:translateY(-3px)}.card-header-compact{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.card-title{font-family:Impact,sans-serif;font-size:1.65rem;font-weight:400;color:#fff;margin:0;line-height:1.3;flex:1}.personal-project-badge{background:linear-gradient(135deg,#8b5cf64d,#6366f14d);color:#c4b5fd;font-family:Impact,sans-serif;padding:.35rem .8rem;border-radius:6px;font-size:.7rem;font-weight:400;text-transform:uppercase;letter-spacing:.05rem;white-space:nowrap;border:1px solid rgba(139,92,246,.5)}.card-description{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#ffffffbf;font-size:1.05rem;line-height:1.65;margin:0;flex:1}.github-button{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:.7rem 1.5rem;font-size:.95rem;font-weight:500;text-decoration:none;border-radius:6px;transition:all .3s ease;align-self:flex-start}.github-button:hover{background:#ffffff1a;border-color:#fff}.card-tech-labels{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}.tech-label{background:#ffffff14;color:#fffc;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:.4rem .9rem;border-radius:6px;font-size:.85rem;font-weight:500;letter-spacing:.02rem;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.tech-label:hover{background:#ffffff1f;border-color:#fff3}.card-image-container{position:relative;width:100%;height:200px;overflow:hidden}.card-img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .3s ease}.card-img:hover{transform:scale(1.1)}.card-badge{position:absolute;top:1rem;right:1rem;padding:.4rem .8rem;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card-badge.professional{background:#3b82f6d9;color:#fff;border:1px solid rgba(59,130,246,1)}.card-badge.personal{background:#a855f7d9;color:#fff;border:1px solid rgba(168,85,247,1)}.card-content{padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;flex:1}.card-year{color:#ffffff80;font-size:.85rem;font-weight:600;margin:0}.card-tech-icons{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.tech-icon{font-size:1.8rem;transition:transform .2s ease;cursor:help}.tech-icon:hover{transform:scale(1.2)}.card-link{display:inline-block;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.6rem 1.2rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.1rem;text-decoration:none;text-align:center;transition:all .3s ease;border-radius:8px}.card-link:hover{background:#ffffff26;border-color:#fff}.project-card{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;margin-bottom:2rem;transition:all .3s ease}.project-card:hover{background:#ffffff14;border-color:#fff3}.project-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.project-year{color:#ffffff80;font-size:1rem;font-weight:600}.project-title-card{font-family:Impact,sans-serif;font-size:2rem;font-weight:400;color:#fff;margin:0;text-transform:uppercase;letter-spacing:-1px;flex:1}.project-badge{padding:.4rem 1rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem}.project-badge.professional{background:#3b82f633;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.project-badge.personal{background:#a855f733;color:#c084fc;border:1px solid rgba(168,85,247,.3)}.project-body{display:flex;gap:2rem;margin-bottom:1.5rem}.project-img{width:300px;height:200px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .3s ease;flex-shrink:0}.project-img:hover{transform:scale(1.05)}.project-info{flex:1;display:flex;flex-direction:column;gap:1rem}.project-description{color:#fffc;font-size:1rem;line-height:1.6;margin:0}.github-link{display:inline-block;background:transparent;border:1px solid #fff;color:#fff;padding:.8rem 2rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.1rem;text-decoration:none;transition:all .3s ease;align-self:flex-start;position:relative;overflow:hidden}.github-link:hover{background:#fff;color:#000}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem}.project-tags span{background:#ffffff1a;color:#fff;padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.05rem}.image-preview-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer}.image-preview-overlay img{max-width:90%;max-height:90%;object-fit:contain;border-radius:12px}.dev-container,.dev-sidebar,.menu-link,.sidebar-note,.dev-content{display:none}