:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%}@font-face{font-family:Alagard;src:url(/fonts/alagard.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--ui-scale: 1.08;--glass-opacity: .15;--glass-blur: 20px;--glass-border-opacity: .3;--glass-shadow: 0 8px 32px rgba(0, 0, 0, .37);--glass-tint: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .18);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .7);--font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;--font-display: "Alagard", monospace, sans-serif;--font-weight-light: 200;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--panel-padding: calc(2rem * var(--ui-scale));--panel-radius: calc(20px * var(--ui-scale));--button-height: calc(48px * var(--ui-scale));--button-radius: calc(12px * var(--ui-scale));--glass-transition: all .3s cubic-bezier(.4, 0, .2, 1);--hover-transition: all .2s cubic-bezier(.4, 0, .2, 1)}html{font-size:17px}*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#000;font-family:var(--font-primary);color:var(--text-primary);font-weight:var(--font-weight-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#ocean-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;z-index:1}.glass-panel{position:absolute;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));background:linear-gradient(135deg,var(--glass-tint) 0%,rgba(255,255,255,.05) 100%);border:2px solid rgba(255,255,255,.25);border-radius:var(--panel-radius);box-shadow:var(--glass-shadow),inset 0 1px #fff6,inset 1px 0 #fff3,inset 0 -1px #0003,inset -1px 0 #0000001a,inset 0 2px 4px #ffffff1a;padding:var(--panel-padding);z-index:100;will-change:transform,filter;transform-style:preserve-3d;transition:var(--glass-transition)}.glass-panel:before{content:"";position:absolute;inset:0;border-radius:var(--panel-radius);background:linear-gradient(135deg,#ffffff26,#ffffff08,#ffffff1f);box-shadow:inset 0 1px 2px #ffffff4d,inset 1px 0 1px #fff3;pointer-events:none;z-index:-1}.glass-panel:after{content:"";position:absolute;inset:2px;border-radius:calc(var(--panel-radius) - 2px);background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 50%);border:2px solid rgba(255,255,255,.3);box-shadow:0 0 8px #fff3,0 0 0 3px #ffffff1a;pointer-events:none;z-index:1}.landing-panel{top:50%;left:50%;transform:translate(-50%,-50%);width:400px;text-align:center}.landing-panel h1{font-family:var(--font-display);font-size:2.5rem;font-weight:400;line-height:1.2;margin-bottom:.5rem;letter-spacing:.05em;text-shadow:0 1px 3px rgba(0,0,0,.3);color:var(--text-primary);background:linear-gradient(135deg,#fffffff2,#fffc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@supports not (background-clip: text){.landing-panel h1{background:none;-webkit-text-fill-color:unset;color:var(--text-primary)}}.landing-panel .subtitle{font-size:1.1rem;font-weight:var(--font-weight-normal);color:var(--text-secondary);margin-bottom:2rem;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.2)}.navbar-panel{position:fixed;top:20px;left:20px;right:20px;width:calc(100% - 40px);max-width:1400px;margin:0 auto;height:60px;padding:0;border-radius:16px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 24px #0000001a;z-index:200;background:linear-gradient(135deg,var(--glass-tint) 0%,rgba(255,255,255,.05) 100%);transform:translateY(calc(-100% - 20px));opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1)}.navbar-panel.navbar-visible{transform:translateY(0);opacity:1}.navbar-panel.navbar-enter{animation:navbarSlideIn .4s cubic-bezier(.4,0,.2,1)}.navbar-panel.navbar-exit{animation:navbarSlideOut .3s cubic-bezier(.4,0,.2,1)}.navbar-panel.scrolled{background:linear-gradient(135deg,var(--glass-tint) 0%,rgba(255,255,255,.08) 100%);border-bottom-color:#ffffff40}.navbar-content{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:1200px;margin:0 auto;padding:0 2rem}.nav-brand{cursor:pointer;transition:var(--hover-transition)}.brand-text{font-family:var(--font-display);font-size:1.2rem;font-weight:400;color:var(--text-primary);letter-spacing:.05em;background:linear-gradient(135deg,#fffffff2,#fffc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-brand:hover{transform:translateY(-1px)}.nav-items{display:flex;align-items:center;gap:.5rem}.nav-item{position:relative;display:flex;align-items:center;height:36px;padding:0 1rem;border-radius:8px;text-decoration:none;font-size:.9rem;font-weight:var(--font-weight-medium);color:#fffc;transition:var(--hover-transition);cursor:pointer;overflow:hidden}.nav-item:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:8px;opacity:0;transition:var(--hover-transition)}.nav-item:hover{color:var(--text-primary);transform:translateY(-1px)}.nav-item:hover:before{opacity:1}.nav-item.active{color:var(--text-primary);background:linear-gradient(135deg,#ffffff26,#ffffff14);border:1px solid rgba(255,255,255,.2)}.nav-item.active:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:20px;height:2px;background:linear-gradient(90deg,#fffc,#fff6);border-radius:1px}.contact-item{background:linear-gradient(135deg,#007aff40,#007aff26);border:1px solid rgba(0,122,255,.3);color:#fffffff2;margin-left:.5rem}.contact-item:hover{background:linear-gradient(135deg,#007aff59,#007aff40);border-color:#007aff80}.nav-label{position:relative;z-index:1;font-family:var(--font-display);font-weight:400;letter-spacing:.05em}.button-group{display:flex;flex-direction:column;gap:.75rem;align-items:center}.glass-button{display:inline-flex;align-items:center;justify-content:center;height:var(--button-height);padding:0 1.5rem;margin:.5rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--button-radius);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--font-display);font-size:.95rem;font-weight:400;color:var(--text-primary);text-decoration:none;letter-spacing:.05em;cursor:pointer;transition:var(--hover-transition);user-select:none;-webkit-user-select:none}.glass-button:hover{background:linear-gradient(135deg,#ffffff26,#ffffff14);border-color:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 20px #0003,0 0 0 1px #ffffff1a inset}.glass-button:active{transform:translateY(0);background:linear-gradient(135deg,#ffffff14,#ffffff08)}.glass-button.primary{background:linear-gradient(135deg,#007aff4d,#007aff1a);border-color:#007aff66}.glass-button.primary:hover{background:linear-gradient(135deg,#007aff66,#007aff26);border-color:#007aff99}#info{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#fff;font-size:11px;z-index:150;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);font-family:SF Mono,Monaco,Cascadia Code,monospace;line-height:1.4}.hidden{opacity:0;visibility:hidden;pointer-events:none}.webgl-text-enabled h1,.webgl-text-enabled h2,.webgl-text-enabled h3,.webgl-text-enabled h4,.webgl-text-enabled h5,.webgl-text-enabled p,.webgl-text-enabled a,.webgl-text-enabled span,.webgl-text-enabled li,.webgl-text-enabled svg,.webgl-text-enabled svg *,.webgl-text-enabled .icon-svg,.webgl-text-enabled .icon-svg *,.webgl-text-enabled .subtitle,.webgl-text-enabled .glass-button,.webgl-text-enabled .brand-text,.webgl-text-enabled .nav-label,.webgl-text-enabled .skill-tag,.webgl-text-enabled .tech-tag,.webgl-text-enabled .resume-position,.webgl-text-enabled .resume-company,.webgl-text-enabled .resume-date,.webgl-text-enabled .resume-team,.webgl-text-enabled .resume-location,.webgl-text-enabled .resume-description,.webgl-text-enabled .resume-subsection,.webgl-text-enabled .project-title,.webgl-text-enabled .project-description,.webgl-text-enabled .project-section-title{color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;fill:transparent!important;stroke:transparent!important}.fade-in{animation:fadeIn .6s cubic-bezier(.4,0,.2,1)}.fade-out{animation:fadeOut .4s cubic-bezier(.4,0,.2,1)}.content-scroll-container{position:fixed;inset:80px 0 0;overflow-y:auto;overflow-x:hidden;z-index:50;-webkit-overflow-scrolling:touch;will-change:scroll-position;scroll-behavior:smooth}.content-scroll-container::-webkit-scrollbar{width:8px}.content-scroll-container::-webkit-scrollbar-track{background:#0000004d;border-left:1px solid rgba(255,255,255,.1)}.content-scroll-container::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff6,#fff3);border-radius:4px;border:1px solid rgba(255,255,255,.1)}.content-scroll-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fff9,#ffffff4d)}.content-scroll-container{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) rgba(0,0,0,.3)}.scroll-content{min-height:100vh;padding:3rem 2rem}.content-scroll-container .glass-panel{position:relative!important;inset:auto!important;transform:none!important;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));background:linear-gradient(135deg,var(--glass-tint) 0%,rgba(255,255,255,.05) 100%);border:2px solid rgba(255,255,255,.25);border-radius:var(--panel-radius);box-shadow:var(--glass-shadow),inset 0 1px #fff6,inset 1px 0 #fff3,inset 0 -1px #0003,inset -1px 0 #0000001a,inset 0 2px 4px #ffffff1a;padding:var(--panel-padding);z-index:100;will-change:transform,filter;transform-style:preserve-3d;transition:var(--glass-transition);animation:simpleFadeIn .6s cubic-bezier(.4,0,.2,1) both}.content-scroll-container .glass-panel:before{content:"";position:absolute;inset:0;border-radius:var(--panel-radius);background:linear-gradient(135deg,#ffffff26,#ffffff08,#ffffff1f);box-shadow:inset 0 1px 2px #ffffff4d,inset 1px 0 1px #fff3;pointer-events:none;z-index:-1}.content-scroll-container .glass-panel:after{content:"";position:absolute;inset:2px;border-radius:calc(var(--panel-radius) - 2px);background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 50%);border:2px solid rgba(255,255,255,.3);box-shadow:0 0 8px #fff3,0 0 0 3px #ffffff1a;pointer-events:none;z-index:1}.scrollable-panel{position:relative;overflow:hidden;will-change:transform}.scrollable-content{max-height:100%;overflow-y:auto;overflow-x:hidden;padding-right:8px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;will-change:scroll-position}.scrollable-content::-webkit-scrollbar{width:6px}.scrollable-content::-webkit-scrollbar-track{background:#0003;border-radius:3px;margin:4px 0}.scrollable-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff6,#fff3);border-radius:3px;border:1px solid rgba(255,255,255,.1)}.scrollable-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fff9,#ffffff4d)}.scrollable-content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) rgba(0,0,0,.2)}.project-panel{width:420px;max-width:100%;max-height:550px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.project-title{font-family:var(--font-display);font-size:1.4rem;font-weight:400;margin:0;letter-spacing:.05em;color:var(--text-primary)}.tech-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tech-tag{padding:.25rem .75rem;background:#007aff33;border:1px solid rgba(0,122,255,.3);border-radius:12px;font-size:.75rem;font-weight:var(--font-weight-medium);color:#ffffffe6;letter-spacing:.02em}.project-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem}.project-description{font-size:.9rem;line-height:1.6;color:var(--text-secondary);margin:0}.project-section-title{font-family:var(--font-display);font-size:1rem;font-weight:400;margin:.5rem 0 .25rem;letter-spacing:.05em;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.25rem}.project-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.project-features li{font-size:.85rem;line-height:1.5;color:var(--text-secondary);padding-left:1rem;position:relative}.project-features li:before{content:"→";position:absolute;left:0;color:#007aff99}.download-button-panel{width:200px!important;max-width:200px;height:auto;max-height:80px;margin:0 auto 2rem;padding:.5rem!important;display:flex;align-items:center;justify-content:center}.download-resume-btn{margin:0;width:100%}.resume-card-panel{width:420px;max-width:100%;max-height:450px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}.resume-header{display:flex;flex-direction:column;gap:.25rem;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:.75rem}.resume-position{font-family:var(--font-display);font-size:1.2rem;font-weight:400;margin:0;letter-spacing:.05em;color:var(--text-primary)}.resume-company{font-family:var(--font-display);font-size:1rem;font-weight:400;margin:0;letter-spacing:.05em;color:#fffc}.resume-meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.resume-date,.resume-team,.resume-location{font-size:.8rem;color:#fff9;font-weight:var(--font-weight-medium);letter-spacing:.05em}.resume-team:before,.resume-location:before{content:"•";margin-right:.5rem;color:#fff6}.resume-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:.75rem}.resume-description{font-size:.9rem;line-height:1.6;color:var(--text-secondary);margin:0;font-style:italic}.resume-subsection{font-family:var(--font-display);font-size:.9rem;font-weight:400;margin:.5rem 0 .25rem;letter-spacing:.05em;color:#ffffffd9}.resume-responsibilities{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.resume-responsibilities li{font-size:.85rem;line-height:1.5;color:var(--text-secondary);padding-left:1rem;position:relative}.resume-responsibilities li:before{content:"▸";position:absolute;left:0;color:#007aff80}#portfolio-container .scroll-content,#resume-container .scroll-content{display:flex;flex-direction:column;align-items:center;gap:3rem;padding:3rem 2rem;max-width:600px;margin:0 auto;height:auto}@keyframes simpleFadeIn{0%{opacity:0}to{opacity:1}}#portfolio-lakehouse-panel{animation-delay:0s}#portfolio-encryption-panel{animation-delay:.1s}#portfolio-dotereditor-panel{animation-delay:.2s}#portfolio-dreamrequiem-panel{animation-delay:.3s}#portfolio-greenlightgo-panel{animation-delay:.4s}#resume-playember-panel{animation-delay:0s}#resume-meta-panel{animation-delay:.1s}#resume-outlier-panel{animation-delay:.2s}#resume-uwtutor-panel{animation-delay:.3s}#resume-uwedu-panel{animation-delay:.4s}.portfolio-preview,.portfolio-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}.project-card,.project-detail{padding:1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:var(--hover-transition)}.project-card:hover,.project-detail:hover{background:#ffffff14;border-color:#ffffff26;transform:translateY(-2px)}.project-card h3,.project-detail h3{font-family:var(--font-display);font-size:1.1rem;font-weight:400;margin-bottom:.5rem;color:var(--text-primary);letter-spacing:.05em}.project-card p,.project-detail p{font-size:.9rem;color:var(--text-secondary);line-height:1.4}.resume-section{margin-bottom:2rem}.resume-section h3{font-family:var(--font-display);font-size:1.2rem;font-weight:400;margin-bottom:1rem;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.5rem;letter-spacing:.05em}.experience-item{padding:1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;margin-bottom:1rem}.experience-item h4{font-family:var(--font-display);font-size:1rem;font-weight:400;margin-bottom:.5rem;color:var(--text-primary);letter-spacing:.05em}.skills-grid{display:flex;flex-wrap:wrap;gap:.5rem}.skill-tag{padding:.25rem .75rem;background:#007aff33;border:1px solid rgba(0,122,255,.3);border-radius:16px;font-size:.8rem;font-weight:var(--font-weight-medium);color:#ffffffe6}@keyframes navbarSlideIn{0%{transform:translateY(calc(-100% - 20px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes navbarSlideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(calc(-100% - 20px));opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.slide-exit-left{animation:slideExitLeft .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideExitLeft{0%{transform:translate(0);opacity:1}80%{opacity:.15}to{transform:translate(-100%);opacity:0}}.slide-enter-right{animation:slideEnterRight .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideEnterRight{0%{transform:translate(100%);opacity:0}20%{opacity:.2}to{transform:translate(0);opacity:1}}.slide-enter-left{animation:slideEnterLeft .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideEnterLeft{0%{transform:translate(-100%);opacity:0}20%{opacity:.2}to{transform:translate(0);opacity:1}}.slide-exit-right{animation:slideExitRight .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideExitRight{0%{transform:translate(0);opacity:1}80%{opacity:.15}to{transform:translate(100%);opacity:0}}.slide-enter-right-centered{animation:slideEnterRightCentered .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideEnterRightCentered{0%{transform:translate(50%) translateY(0);opacity:0}20%{opacity:.2}to{transform:translate(-50%) translateY(0);opacity:1}}.slide-exit-left-centered{animation:slideExitLeftCentered .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideExitLeftCentered{0%{transform:translate(-50%) translateY(0);opacity:1}80%{opacity:.15}to{transform:translate(-150%) translateY(0);opacity:0}}.slide-enter-right-landing{animation:slideEnterRightLanding .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideEnterRightLanding{0%{transform:translate(50%,-50%);opacity:0}20%{opacity:.2}to{transform:translate(-50%,-50%);opacity:1}}.slide-exit-left-landing{animation:slideExitLeftLanding .45s cubic-bezier(.32,.08,.24,1) forwards}@keyframes slideExitLeftLanding{0%{transform:translate(-50%,-50%);opacity:1}80%{opacity:.15}to{transform:translate(-150%,-50%);opacity:0}}@media(max-width:768px){.navbar-panel{top:10px;left:10px;right:10px;width:calc(100% - 20px);max-width:none;border-radius:12px;transform:translateY(calc(-100% - 10px))}.navbar-content{padding:0 1rem}@keyframes navbarSlideIn{0%{transform:translateY(calc(-100% - 10px));opacity:0}to{transform:translateY(0);opacity:1}}@keyframes navbarSlideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(calc(-100% - 10px));opacity:0}}.nav-items{gap:.25rem}.nav-item{padding:0 .75rem;font-size:.85rem}.brand-text{font-size:1.1rem}.landing-panel{width:90vw;max-width:350px;padding:1.5rem}.landing-panel h1{font-size:2rem;letter-spacing:.05em}.glass-button{width:100%;margin:.25rem 0}.portfolio-preview,.portfolio-grid{gap:.75rem}.project-card,.project-detail{padding:1rem}.skills-grid{gap:.375rem}.skill-tag{font-size:.75rem;padding:.2rem .6rem}.content-scroll-container{top:70px}#portfolio-container .scroll-content,#resume-container .scroll-content{padding:2rem 1rem;gap:2rem;max-width:100%}.project-panel,.resume-card-panel{width:100%;max-width:400px;padding:1.5rem}.project-title{font-size:1.2rem}.resume-position{font-size:1.1rem}.resume-company{font-size:.95rem}}@media(max-height:600px){.landing-panel{top:45%}.landing-panel h1{font-size:2rem;margin-bottom:.25rem;letter-spacing:.05em}.landing-panel .subtitle{margin-bottom:1.5rem}}.glass-panel.webgl-enhanced{z-index:150;background:linear-gradient(135deg,#ffffff0d,#ffffff05);box-shadow:var(--glass-shadow),inset 0 1px 1px #ffffff1a}.glass-panel.webgl-ready{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-color:transparent;box-shadow:none}.glass-panel.webgl-ready:before,.glass-panel.webgl-ready:after{content:none;display:none}.glass-panel.webgl-ready .glass-button{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(135deg,#ffffff14,#ffffff08)}.webgl-text-enabled .glass-panel h1,.webgl-text-enabled .glass-panel h2,.webgl-text-enabled .glass-panel h3,.webgl-text-enabled .glass-panel h4,.webgl-text-enabled .glass-panel p,.webgl-text-enabled .glass-panel .subtitle,.webgl-text-enabled .nav-label,.webgl-text-enabled .brand-text{color:transparent!important;text-shadow:none!important;-webkit-text-fill-color:transparent!important}@supports not (backdrop-filter: blur(1px)){.glass-panel{background:#0006}}.fps-overlay{position:fixed;top:16px;right:16px;padding:6px 12px;background:#080c1294;color:#f4f7fb;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;letter-spacing:.08em;border-radius:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px #04081040;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity .14s ease,transform .14s ease;z-index:320}.fps-overlay.is-visible{opacity:1;transform:translateY(0)}.debug-overlay{position:fixed;bottom:24px;right:24px;width:260px;padding:18px 20px;z-index:300;font-family:SF Pro Text,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:.8rem;letter-spacing:.01em;line-height:1.55;background:#0a121ce0;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 18px 36px #00000059;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}.debug-overlay.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.debug-overlay-title{font-weight:600;margin-bottom:10px;color:var(--text-primary);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.debug-overlay-row{display:flex;justify-content:space-between;margin-bottom:6px;gap:8px}.debug-overlay-row:last-of-type{margin-bottom:0}.debug-label{color:#ffffff8c;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}.debug-value{color:#ffffffe6;font-weight:500;letter-spacing:.04em}.debug-overlay-divider{height:1px;background:#ffffff1f;margin:14px 0}.debug-overlay-footnote{color:#ffffff8c;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.profile-picture-container{position:absolute;top:100px;left:50%;transform:translate(-50%);width:150px;height:150px;z-index:200;opacity:0;transition:var(--glass-transition)}.profile-picture-container.active{opacity:1}.profile-picture{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.4);box-shadow:0 8px 32px #00000080,inset 0 1px #fff3;filter:drop-shadow(0 0 20px rgba(255,255,255,.1))}.bio-panel{top:280px;left:50%;transform:translate(-50%) translateY(0);width:600px;max-width:85vw;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);padding:2rem}.bio-panel.active{opacity:1}.bio-text{font-size:.95rem;line-height:1.7;color:var(--text-secondary);margin-bottom:1.25rem;text-align:left}.bio-text:last-child{margin-bottom:0}@media(max-width:768px){.profile-picture-container{top:80px;width:120px;height:120px}.bio-panel{top:230px;width:90vw;padding:1.5rem}.bio-text{font-size:.9rem}}.social-icons-container{position:relative;display:flex;align-items:center;gap:16px;margin-left:1rem;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.social-icons-container.active{opacity:1;pointer-events:auto}.social-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:transform .2s cubic-bezier(.4,0,.2,1);will-change:transform}.social-icon:hover{transform:scale(1.1)}.social-icon:active{transform:scale(.95)}.social-icon .icon-svg{width:34px;height:34px;fill:#fff;display:block}.is-transitioning .glass-panel,.is-transitioning .profile-picture-container,.is-transitioning .social-icons-container,.is-transitioning .navbar-panel{transition:none!important}.is-transitioning #social-icons-container{opacity:0!important;pointer-events:none}@media(max-width:768px){.social-icons-container{gap:12px;margin-left:.5rem}.social-icon{width:38px;height:38px}.social-icon .icon-svg{width:30px;height:30px}}