*{margin:0;padding:0;box-sizing:border-box}::selection{background:#0099ff26;color:#09f}::-moz-selection{background:#0099ff26;color:#09f}html,body{width:100%;height:100%;overflow:hidden;position:fixed;background:#0e0e0e;font-family:Inter,sans-serif}.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;background:#0e0e0e;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.viewport.is-dragging{cursor:grabbing}.grid{position:absolute;top:0;left:0;will-change:transform;contain:layout style}.tile{position:absolute;opacity:0;cursor:pointer}.tile.is-in{animation:tile-in .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d, 0ms)}@keyframes tile-in{0%{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}.tile img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}.tile-title{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,6px);width:max-content;max-width:120%;font-size:12px;color:#bbb;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}@media(hover:hover){.viewport:not(.is-dragging) .tile:hover img{transform:scale(1.06)}.viewport:not(.is-dragging) .tile:hover .tile-title{opacity:1;transform:translate(-50%)}}.grid-loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#777;font-size:12px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;transition:opacity .4s ease}.grid-loader.is-hidden{opacity:0}.grid-loader-ring{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#008fef;animation:spin .8s linear infinite}.grid-loader.is-hidden .grid-loader-ring{animation:none}@keyframes spin{to{transform:rotate(360deg)}}.grid-hint{position:fixed;left:50%;bottom:24px;transform:translate(-50%);padding:8px 14px;border-radius:999px;background:#141414b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#999;font-size:12px;pointer-events:none;animation:hint 4.5s ease 1.2s both}@keyframes hint{0%{opacity:0;transform:translate(-50%,8px)}12%,80%{opacity:1;transform:translate(-50%)}to{opacity:0}}.tile.is-static{animation:none;opacity:1}@media(prefers-reduced-motion:reduce){.tile.is-in{animation:none;opacity:1}}.profile-pic{border-radius:10px;overflow:hidden;width:90px;height:90px;margin-bottom:10px}.profile-pic img{width:100%;height:100%;object-fit:cover}.home-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff;text-align:center;padding:20px}.home-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:330px}p{font-size:13px;color:#888}.cta{color:#fff;text-decoration:none;font-size:15px;padding:5px 10px;background-color:#008fef;margin:20px 0;border-radius:5px;font-weight:500;transition:all .3s ease}.cta:hover{background-color:#07c}.para{line-height:18px;text-align:center}.position-1{position:absolute;bottom:50px;left:50%;transform:translate(-50%);width:300px}.name{font-size:30px!important;font-family:Comforter Brush,cursive;cursor:pointer;color:#fff;text-decoration:none;font-weight:400;-webkit-user-select:none;user-select:none;text-shadow:0 0 5px rgb(14,14,14)}.headernav{position:fixed;top:0;left:0;display:flex;justify-content:space-between;align-items:center;width:100vw;padding:10px 40px;z-index:500}.icon-pic{border-radius:50%;border:2px solid #008fef;width:40px;height:40px;overflow:hidden}.icon-pic img{width:100%;height:100%;object-fit:cover}.about-page{position:relative;overflow-y:auto;height:100vh;width:100%;box-sizing:border-box;color:#fff;padding:120px 24px 60px;display:flex;flex-direction:column;align-items:center;text-align:center}.about-avatar{width:110px;height:110px;border-radius:12px;object-fit:cover;margin-bottom:16px}.about-title{color:#008fef;font-size:14px;margin-bottom:24px}.about-stats{display:flex;gap:32px;margin-bottom:28px}.about-stats div{display:flex;flex-direction:column;gap:4px}.about-stats strong{font-size:20px;color:#fff}.about-stats span{font-size:12px;color:#888}.about-bio{max-width:520px;line-height:20px;margin-bottom:28px}.about-skills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px;margin-bottom:32px}.about-skills span{border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:6px 14px;font-size:12px;color:#ccc}.reveal{animation:reveal .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d, 0ms)}@keyframes reveal{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.case-studies{width:100%;max-width:520px;margin-bottom:32px;text-align:left}.case-studies h2{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-bottom:10px}.case-studies a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);color:#ddd;font-size:14px;text-decoration:none;transition:color .2s ease,padding .3s cubic-bezier(.16,1,.3,1)}.case-studies a:hover{color:#008fef;padding-left:6px}@media(prefers-reduced-motion:reduce){.reveal{animation:none}}.detail-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}.cta-outline{background-color:transparent;border:1px solid #008fef;color:#008fef}.cta-outline:hover{background-color:#008fef1a}.project{--strip-w: 112px;position:fixed;inset:0;display:grid;grid-template-columns:var(--strip-w) minmax(300px,.9fr) minmax(0,1.25fr);color:#fff;overflow:hidden}.project-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.strip{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:50vh 0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;border-right:1px solid rgba(255,255,255,.06);background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);cursor:grab;user-select:none;-webkit-user-select:none;animation:strip-in .7s cubic-bezier(.16,1,.3,1) both}.strip::-webkit-scrollbar{display:none}.strip.is-dragging{cursor:grabbing}.strip.is-dragging .strip-item{pointer-events:none}@keyframes strip-in{0%{opacity:0;transform:translate(-24px)}}.strip-item{--p: 0;flex:none;width:76px;height:76px;padding:6px;border:0;border-radius:16px;background:#ffffff08;cursor:pointer;opacity:calc(1 - var(--p) * .6);transform:scale(calc(1 - var(--p) * .28));transition:background .25s ease,box-shadow .35s ease;-webkit-tap-highlight-color:transparent}.strip-item img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:transform .4s cubic-bezier(.16,1,.3,1)}.strip-item:hover{background:#ffffff12}.strip-item:hover img{transform:scale(1.08)}.strip-item.is-active{background:#008fef1f;box-shadow:0 0 0 2px #008fef,0 8px 30px #008fef40}.strip-item:focus-visible{outline:2px solid #ffffff;outline-offset:3px}.project-info{grid-column:2;align-self:center;max-height:100vh;overflow-y:auto;scrollbar-width:none;padding:96px 32px 48px 56px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}.project-back{color:#888;font-size:13px;text-decoration:none;margin-bottom:36px;transition:color .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}.project-back:hover{color:#fff;transform:translate(-4px)}.project-index{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#008fef;margin-bottom:14px}.project-index span{color:#555}.project-title{font-size:clamp(28px,3.2vw,46px);line-height:1.08;font-weight:600;letter-spacing:-.02em;margin-bottom:18px}.project-desc{font-size:15px;line-height:1.6;color:#9a9a9a;max-width:440px;margin-bottom:28px}.project-meta{display:grid;gap:14px;margin-bottom:28px}.project-meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5f5f5f;margin-bottom:3px}.project-meta dd{font-size:14px;color:#ddd}.project-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px}.project-actions .cta{margin:0;padding:9px 16px;font-size:14px}.project-pager{display:flex;flex-direction:column;gap:6px;width:100%;max-width:440px;border-top:1px solid rgba(255,255,255,.07);padding-top:16px}.project-pager button{display:flex;gap:10px;align-items:baseline;padding:6px 0;border:0;background:none;color:#666;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:color .2s ease}.project-pager button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-pager button:hover{color:#fff}.project-stage{--rx: 0deg;--ry: 0deg;grid-column:3;position:relative;display:flex;align-items:center;justify-content:center;padding:80px 48px 40px 0;perspective:1200px}.project-glow{position:absolute;width:min(62vw,78vh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,143,239,.16) 0%,rgba(120,90,255,.07) 38%,transparent 68%);animation:glow 7s ease-in-out infinite;pointer-events:none}@keyframes glow{0%,to{transform:scale(.94);opacity:.8}50%{transform:scale(1.06);opacity:1}}.project-hero{position:relative;width:min(100%,78vh);aspect-ratio:1}.project-hero.is-intro{animation:hero-intro .9s cubic-bezier(.16,1,.3,1) both}@keyframes hero-intro{0%{opacity:0;transform:scale(.86) translateY(20px)}}.project-hero-motion{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.16,1,.3,1);animation:float 6s ease-in-out infinite}@keyframes float{0%,to{translate:0 -8px}50%{translate:0 8px}}.project-hero-motion img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.project-hero-full{opacity:0;transition:opacity .5s ease}.project-hero-full.is-loaded{opacity:1}@media(max-width:900px){.project{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:104px}.project-stage{order:-1}body:has(.project) .headernav{padding:10px 20px;background:linear-gradient(#0e0e0e 55%,transparent)}.strip{position:fixed;left:0;right:0;bottom:0;z-index:50;height:96px;flex-direction:row;padding:0 50vw;overflow-x:auto;overflow-y:hidden;border-right:0;border-top:1px solid rgba(255,255,255,.06);background:#0e0e0ed9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);animation-name:strip-up}@keyframes strip-up{0%{opacity:0;transform:translateY(24px)}}.strip-item{width:64px;height:64px}.project-stage{flex:none;padding:64px 20px 0}.project-glow{width:110vw}.project-hero{width:min(86vw,520px)}.project-info{max-height:none;overflow:visible;padding:28px 24px 24px}.project-back{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){.strip,.project-hero.is-intro,.project-hero-motion,.project-glow{animation:none}}::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}::view-transition-new(root){animation:vt-in .46s cubic-bezier(.16,1,.3,1) both}@keyframes vt-out{to{opacity:0;transform:scale(.985)}}@keyframes vt-in{0%{opacity:0;transform:scale(1.015)}}::view-transition-group(hero){animation-duration:.72s;animation-timing-function:cubic-bezier(.22,1,.36,1);z-index:10}::view-transition-old(hero),::view-transition-new(hero){height:100%;object-fit:contain;animation-duration:.72s;animation-timing-function:cubic-bezier(.22,1,.36,1)}html[data-vt=swap]::view-transition-group(hero){animation:none}html[data-vt=swap]::view-transition-old(hero){animation:hero-swap-out .32s cubic-bezier(.4,0,1,1) both}html[data-vt=swap]::view-transition-new(hero){animation:hero-swap-in .62s cubic-bezier(.16,1,.3,1) 80ms both}@keyframes hero-swap-out{to{opacity:0;transform:translateY(-6%) scale(.9)}}@keyframes hero-swap-in{0%{opacity:0;transform:translateY(8%) scale(.92)}}html[data-vt=swap]::view-transition-old(root){animation-duration:.2s}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}