@keyframes grain{0%,to{transform:translate(0)}20%{transform:translate(-2%,-2%)}40%{transform:translate(2%,-1%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,1%)}}@keyframes letterEntry{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@font-face{font-family:ValveOracle;src:url(/valveoracle-medium.ttf)format("truetype");font-weight:500}@font-face{font-family:Hahmlet;src:url(/hahmlet-medium.ttf)format("truetype");font-weight:500}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#0a0a0a;overflow:hidden}body:before{content:"";opacity:.035;pointer-events:none;z-index:9997;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px;width:200%;height:200%;animation:.4s step-end infinite grain;position:fixed;inset:-50%}#root{height:100vh}.scene{width:100vw;height:100vh;position:relative;overflow:hidden}.hero{z-index:2;background:#0a0a0a;transition:transform 3s cubic-bezier(.7,0,1,1),opacity .4s 3s;position:absolute;inset:0}.hero.zooming{opacity:0;pointer-events:none;transform:scale(200)}.page-2{z-index:1;opacity:0;justify-content:center;align-items:center;transition:opacity .4s 1s;display:flex;position:absolute;inset:0}.main-nav{color:#f5f0eb;letter-spacing:.1em;align-items:center;gap:1.2rem;font-family:Hahmlet,system-ui,sans-serif;font-size:1rem;display:flex}.main-nav span{cursor:pointer;position:relative}.main-nav span:not(.nav-dot):after{content:"";background:#f5f0eb;width:0;height:1px;transition:width .3s;position:absolute;bottom:-2px;left:0}.main-nav span:not(.nav-dot):hover:after{width:100%}.nav-dot{color:#c8c0b8;font-size:.7rem;cursor:default!important}.page-2.visible{opacity:1}.page-2.returning{opacity:0;transition:opacity .5s}@keyframes sectionEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section-view{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;padding:6rem 4rem 4rem;animation:.5s forwards sectionEnter;display:flex;overflow-y:auto}.back-btn{color:#c8c0b8;letter-spacing:.1em;cursor:pointer;background:0 0;border:none;padding:0;font-family:Hahmlet,system-ui,sans-serif;font-size:.8rem;position:absolute;top:2rem;left:2.5rem}.back-btn:hover{color:#f5f0eb}.projects-list{flex-direction:column;width:100%;max-width:720px;display:flex}.project-item{opacity:0;border-bottom:1px solid #1a1a1a;transition:opacity .7s,transform .7s;transform:translateY(28px)}.project-item:first-child{border-top:1px solid #1a1a1a}.project-item.in-view{opacity:1;transform:translateY(0)}.project-tilt{cursor:pointer;will-change:transform;padding:2rem 0;transition:transform .1s}.project-expand-wrap{grid-template-rows:0fr;transition:grid-template-rows .45s;display:grid}.project-expand-wrap.open{grid-template-rows:1fr}.project-expand-inner{overflow:hidden}.project-title{color:#f5f0eb;letter-spacing:-.02em;font-family:ValveOracle,system-ui,sans-serif;font-size:1.8rem;font-weight:700}.project-short{color:#6a6460;letter-spacing:.03em;margin-top:.4rem;font-family:Hahmlet,system-ui,sans-serif;font-size:.95rem}.project-expand{flex-direction:column;gap:1rem;margin-top:1.2rem;margin-bottom:.5rem;display:flex}.project-desc{color:#c8c0b8;letter-spacing:.02em;font-family:Hahmlet,system-ui,sans-serif;font-size:1rem;line-height:1.8}.project-tech{color:#6a6460;letter-spacing:.08em;font-family:Hahmlet,system-ui,sans-serif;font-size:.8rem}.project-links{gap:1.4rem;display:flex}.project-links a{color:#f5f0eb;letter-spacing:.08em;font-family:Hahmlet,system-ui,sans-serif;font-size:.85rem;text-decoration:none}.project-links a:hover{color:#6a6460}.info-content{text-align:center;max-width:480px}.info-placeholder{color:#6a6460;letter-spacing:.05em;font-family:Hahmlet,system-ui,sans-serif;font-size:.9rem;line-height:1.8}.contact-links{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.6rem;display:flex}.contact-btn{color:#f5f0eb;letter-spacing:-.01em;opacity:0;font-family:ValveOracle,system-ui,sans-serif;font-size:1.4rem;font-weight:700;text-decoration:none;animation:.6s forwards letterEntry;position:relative;overflow:hidden}.contact-btn-text{z-index:1;mix-blend-mode:difference;position:relative}.contact-btn:before{content:"";transform-origin:0;background:#f5f0eb;transition:transform .35s cubic-bezier(.76,0,.24,1);position:absolute;inset:-4px -8px;transform:scaleX(0)}.contact-btn:hover:before{transform:scaleX(1)}.debug-overlay{z-index:999;pointer-events:none;position:fixed;inset:0}.debug-box{cursor:move;pointer-events:all;border:1px solid #ff3b3b;position:absolute}.debug-crosshair-h{opacity:.6;background:#ff3b3b;height:1px;position:absolute;top:50%;left:0;right:0}.debug-crosshair-v{opacity:.6;background:#ff3b3b;width:1px;position:absolute;top:0;bottom:0;left:50%}.debug-center-dot{background:#ff3b3b;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.debug-panel{color:#ff3b3b;pointer-events:all;background:#000c;border:1px solid #ff3b3b;flex-direction:column;gap:8px;min-width:260px;padding:12px 16px;font-family:monospace;font-size:12px;display:flex;position:absolute;bottom:24px;left:24px}.debug-label{opacity:.7;text-transform:uppercase;letter-spacing:.1em;font-size:11px}.debug-row{align-items:center;gap:12px;display:flex}.debug-row input[type=range]{accent-color:#ff3b3b;flex:1}.container{flex-direction:column;justify-content:center;align-items:center;height:100vh;display:flex}@keyframes float{0%{transform:translate(0)}20%{transform:translate(3px,-4px)}40%{transform:translate(-3px,-2px)}60%{transform:translate(-4px,3px)}80%{transform:translate(2px,4px)}to{transform:translate(0)}}.main-name{color:#f5f0eb;letter-spacing:-.02em;font-family:ValveOracle,system-ui,sans-serif;font-size:8rem;font-weight:700}.letter{white-space:pre;color:#f5f0eb;text-shadow:1px 1px #0000,-1px -1px #0000,1px -1px #0000,-1px 1px #0000;transition:color .5s,text-shadow .5s;animation:8s ease-in-out infinite float;display:inline-block}.letter.outlined{color:#0a0a0a;text-shadow:1px 1px #f5f0eb,-1px -1px #f5f0eb,1px -1px #f5f0eb,-1px 1px #f5f0eb;transition:color .2s,text-shadow .2s}.sub-name{color:#c8c0b8;letter-spacing:.08em;margin-top:1rem;font-family:Hahmlet,system-ui,sans-serif;font-size:1.1rem;font-weight:500;animation:.7s 1.4s both letterEntry}