:root{--bg-color:#fcfcfc;--text-color:#1a1a1a;--text-muted:#888888;--hover-bg:#f0f0f0;--left-panel-width:550px}html{background-color:#fcfcfc}html.dark-theme{background-color:#0a0a0a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);line-height:1.5;display:flex;justify-content:flex-start;min-height:100vh;transition:background-color .25s,color .25s}#spa-view{width:100%;flex:1 1 auto;min-height:100vh}body.no-scroll{overflow:hidden}html.page-fade-in body{opacity:0;animation:.5s cubic-bezier(.22,1,.36,1) forwards pageFadeIn}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}.main-wrapper{display:flex;width:100%;height:100vh;position:relative;z-index:1}.left-panel{width:var(--left-panel-width);padding:4rem 2rem 8rem 4rem;overflow-y:auto;z-index:10;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0}.project-list{list-style:none;display:flex;flex-direction:column;gap:.25rem}.project-item{display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;padding:.8rem 1rem;border-radius:8px;font-size:.95rem;user-select:none;cursor:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;outline:0;box-shadow:none;isolation:isolate;contain:layout style}.project-item.active,.project-item:hover{background-color:var(--hover-bg)}.project-item-loader{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:rgba(252,252,252,.98);pointer-events:none;opacity:0;transition:opacity .25s}.project-item.is-preview-loading .project-item-loader{opacity:1}.project-item.is-preview-loading>:not(.project-item-loader){opacity:0}.project-item-loader img{width:28px;height:28px;object-fit:contain;border-radius:6px}body.dark-theme .project-item-loader{background:rgba(10,10,10,.98)}.project-name{flex:1}.client-info{color:var(--text-muted);font-size:.85rem;display:flex;align-items:center;gap:4px;margin-right:1.5rem}.verified-badge{height:14px;width:auto;pointer-events:none}.project-year{color:var(--text-muted);min-width:40px;text-align:right}.attribution{margin-top:.5rem;font-size:.7rem;color:var(--text-muted);opacity:.6;line-height:1.6;display:block;padding:.9rem .75rem}.attribution a{color:inherit;text-decoration:underline;text-underline-offset:2px}.attribution-main{display:inline}.attribution-stack{display:flex;align-items:center;flex-wrap:wrap;gap:.28rem;margin-top:.2rem;letter-spacing:0;opacity:.72}.tech-mark{display:inline-flex;align-items:center;gap:.16rem;color:inherit;white-space:nowrap}.tech-mark svg{width:.78rem;height:.78rem;fill:currentColor;flex:0 0 auto}.apple-logo{height:11px;width:auto;fill:currentColor;margin-left:2px;vertical-align:middle;position:relative;top:-1px}.right-panel{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}.right-panel-video{position:absolute;top:-10%;left:-7%;width:115%;height:115%;object-fit:contain;object-position:62% center;transform:none;transform-origin:center center;opacity:.07;pointer-events:none;z-index:0;transition:filter .5s,opacity .5s;will-change:clip-path}.profile-info{position:fixed;top:50%;left:calc(var(--left-panel-width) + 4rem);transform:translateY(-50%);z-index:1;pointer-events:auto}.name-wrapper{display:flex;align-items:center;gap:.8rem;margin-bottom:.2rem}.avatar-img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;background-color:#eee;border:1px solid rgba(0,0,0,.05);pointer-events:none}.profile-info h1{font-size:1.75rem;font-weight:600}.profile-link{color:inherit;text-decoration:none;position:relative;transition:color .2s;cursor:pointer;display:inline-block}.profile-link::after{content:'';position:absolute;width:100%;transform:scaleX(.3);height:1.75px;bottom:3px;left:0;background-color:var(--text-color);transform-origin:left center;transition:transform .4s cubic-bezier(.19, 1, .22, 1),opacity .4s;opacity:.55;pointer-events:none;will-change:transform,opacity}.profile-link:hover::after{transform:scaleX(1);opacity:1}.particle{position:absolute;pointer-events:none;background:var(--text-color);border-radius:50%;opacity:0;z-index:100}.profile-info h2{font-size:1.75rem;font-weight:400;color:var(--text-muted);display:flex;align-items:center;white-space:nowrap}.profile-info h2 strong{color:var(--text-color);margin-left:.5rem;min-width:1ch;display:inline-block}#typing-text::after{content:"|";animation:1s infinite blink;margin-left:2px;font-weight:300}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}body.is-hovering .profile-info{opacity:.1;transform:translateY(-70%)}body.is-hovering .right-panel-video{filter:blur(5px);opacity:.03}.preview-container{position:fixed;pointer-events:none;opacity:0;visibility:hidden;z-index:100;transition:opacity .3s,visibility .3s;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(.5rem,1.5vw,2rem);align-items:center;justify-content:flex-start;max-width:calc(100vw - var(--left-panel-width) - 3rem);max-height:90vh;overflow:visible;contain:layout style size;isolation:isolate}@keyframes itemPopEffect{0%{opacity:0}100%{opacity:1}}.preview-container.visible{opacity:1;visibility:visible}.preview-image{height:clamp(100px,20vh,250px)!important;width:auto!important;max-height:clamp(100px,20vh,250px);max-width:calc(100vw - var(--left-panel-width) - 4rem);object-fit:cover;border-radius:12px;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);box-shadow:0 20px 50px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:scale(.9) translateY(10px) translateZ(0);transition:opacity .4s,transform .15s ease-out;flex-shrink:0;will-change:transform}.preview-image.visible{animation:.45s cubic-bezier(.2,1,.3,1) forwards itemPopEffect;visibility:visible}.ratio-16-9{aspect-ratio:16/9;max-width:min(calc(100vw - var(--left-panel-width) - 4rem),600px)!important;width:auto!important}.ratio-1-1{aspect-ratio:1/1}.nav-group{position:fixed;top:24px;right:24px;display:flex;align-items:center;gap:10px;z-index:1000;cursor:grab;user-select:none;transform:translateZ(0);will-change:transform}.nav-group.dragging{cursor:grabbing}.nav-group #theme-toggle{cursor:pointer}.site-nav{position:relative;background:rgba(252,252,252,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:.5px solid rgba(0,0,0,.1);border-radius:999px;padding:.35rem .5rem;display:flex;align-items:center;gap:.4rem;width:fit-content;white-space:nowrap}.site-nav:hover{border-color:rgba(0,0,0,.2);box-shadow:0 4px 16px rgba(0,0,0,.08)}.nav-group.dragging .site-nav{transition:none!important;box-shadow:0 8px 32px rgba(0,0,0,.14);border-color:rgba(0,0,0,.18)}.nav-list{list-style:none;display:flex;gap:.15rem;align-items:center;position:relative}.nav-indicator{position:absolute;top:0;left:0;height:100%;background-color:var(--hover-bg);border-radius:999px;pointer-events:none;z-index:0;opacity:1}.nav-indicator.is-hidden{opacity:0;transition:opacity .2s}.nav-link{display:block;padding:.35rem 1rem;border-radius:999px;font-size:.85rem;color:var(--text-muted);text-decoration:none;white-space:nowrap;position:relative;z-index:1}.nav-link::before{content:attr(data-label);font-weight:500;visibility:hidden;display:block;height:0;overflow:hidden;pointer-events:none}.nav-link:not(.active):hover{color:var(--text-color);background-color:rgba(0,0,0,.05)}body.dark-theme .nav-link:not(.active):hover{background-color:rgba(255,255,255,.06)}.nav-link:hover{color:var(--text-color)}.nav-link.active{color:var(--text-color);font-weight:500}.site-nav.is-transitioning .nav-link:hover,.site-nav.is-transitioning .nav-link:not(.active):hover{color:var(--text-muted);background-color:transparent}.site-nav.is-transitioning .nav-link.active{font-weight:400}.nav-reset-btn{opacity:0;visibility:hidden;display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:.5px solid rgba(0,0,0,.15);background:var(--hover-bg);color:var(--text-muted);font-size:11px;line-height:1;flex-shrink:0;transition:opacity .3s,visibility .3s,background .2s,color .2s}.nav-reset-btn:hover{background:#e0e0e0;color:var(--text-color)}.nav-reset-btn.visible{opacity:1;visibility:visible;display:flex}.nav-drag-handle{display:flex;flex-direction:column;gap:2.5px;padding:0 2px 0 4px;opacity:.25;transition:opacity .2s;pointer-events:none;flex-shrink:0}.nav-drag-handle span{display:flex;gap:2.5px}.nav-drag-handle span::after,.nav-drag-handle span::before{content:'';width:2.5px;height:2.5px;border-radius:50%;background:var(--text-color);display:block}.site-nav:hover .nav-drag-handle{opacity:.45}.nav-group.dragging .nav-drag-handle{opacity:.6}.nav-snap-ghost{position:fixed;display:flex;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:997;transform:translateZ(0)}.nav-snap-ghost.visible{opacity:1}.snap-ghost-btn,.snap-ghost-nav{border-radius:999px;border:2px solid rgba(200,200,200,.5);background:rgba(0,0,0,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex-shrink:0}body.dark-theme .snap-ghost-btn,body.dark-theme .snap-ghost-nav{border-color:rgba(255,255,255,.1);background:rgba(20,20,20,.6)}#theme-flood{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0a0a0a;z-index:0;clip-path:circle(0% at 50% 50%);will-change:clip-path;transform:translateZ(0);pointer-events:none}.no-transition,.no-transition *{transition:none!important;animation:none!important}.project-item{transition:background-color .25s,color .25s,opacity .5s cubic-bezier(.22, 1, .36, 1),transform .5s cubic-bezier(.22, 1, .36, 1)}.nav-link{transition:color .25s,background-color .25s,font-weight .2s}.nav-indicator{transition:transform .35s cubic-bezier(.22, 1, .36, 1),width .35s cubic-bezier(.22, 1, .36, 1),opacity .3s,background-color .25s}.site-nav{transition:box-shadow .2s,border-color .25s,background-color .25s}.status-text{transition:color .25s}.profile-info{transition:opacity .4s,transform .4s cubic-bezier(.4, 0, .2, 1),color .25s}.attribution{transition:color .25s}body.dark-theme{color:#fcfcfc;--text-color:#fcfcfc;--text-muted:#999999;--hover-bg:rgba(255, 255, 255, 0.1)}body.dark-theme #theme-flood{clip-path:circle(150% at 50% 50%)}body.dark-theme .site-nav{background:rgba(20,20,20,.75);border-color:rgba(255,255,255,.1)}body.dark-theme .nav-indicator{background-color:#333}body.dark-theme .nav-reset-btn{background:#333;border-color:rgba(255,255,255,.15)}body.dark-theme .nav-reset-btn:hover{background:#444;color:#fff}body.dark-theme .nav-drag-handle span::after,body.dark-theme .nav-drag-handle span::before{background:#fcfcfc}.theme-toggle-btn{background:rgba(252,252,252,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:.5px solid rgba(0,0,0,.1);border-radius:999px;color:var(--text-muted);padding:.45rem;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,box-shadow .2s;flex-shrink:0}.theme-toggle-btn:hover{color:var(--text-color);border-color:rgba(0,0,0,.2);box-shadow:0 4px 16px rgba(0,0,0,.08)}.nav-group.dragging .theme-toggle-btn{transition:none!important}body.dark-theme .theme-toggle-btn{background:rgba(20,20,20,.75);border-color:rgba(255,255,255,.1);color:var(--text-muted)}body.dark-theme .theme-toggle-btn:hover{color:#fcfcfc;border-color:rgba(255,255,255,.2);box-shadow:0 4px 16px rgba(0,0,0,.3)}.watermark{position:fixed;bottom:1.5rem;right:1.5rem;width:140px;opacity:1;pointer-events:none;z-index:999;transition:opacity .3s}body:not(.dark-theme) .watermark{filter:invert(1)}.watermark2{position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);width:160px;opacity:.9;pointer-events:none;z-index:999;transition:filter .3s,opacity .3s;mix-blend-mode:difference}body:not(.dark-theme) .watermark2{filter:invert(1)}body.dark-theme .watermark2{opacity:.85}.hidden{visibility:hidden;display:none}img{pointer-events:none!important}.fs-overlay{position:fixed;inset:0;z-index:9999;background:rgba(8,8,16,.8);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;contain:strict}.fs-overlay.visible{opacity:1;visibility:visible}.fs-topbar{flex-shrink:0;height:56px;margin-top:env(safe-area-inset-top,0);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;background:linear-gradient(to bottom,rgba(0,0,0,.25),transparent)}.fs-title{color:rgba(255,255,255,.9);font-size:.95rem;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:1rem}.fs-close-btn{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s;-webkit-tap-highlight-color:transparent}.fs-close-btn:active{background:rgba(255,255,255,.28);transform:scale(.88)}.fs-grid{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:.5rem;padding:.75rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0px)) 0;align-content:start;align-self:stretch;scrollbar-width:none;width:auto;max-width:none;margin-inline:1rem;box-sizing:border-box}.fs-grid::-webkit-scrollbar{display:none}.fs-img{display:block;min-width:0;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.45);opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.2, 1, .3, 1);transform:translateY(6px)}.fs-img.ratio-16-9{grid-column:1/-1;aspect-ratio:16/9;width:100%;max-width:100%}.fs-icon-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;min-width:0;width:100%;max-width:100%;margin-inline:auto}.fs-icon-grid .fs-img{width:100%;max-width:100%}.fs-icon-grid.fs-single-icon .fs-img{width:100%}.fs-overlay.visible .fs-img{opacity:1;transform:translateY(0)}.fs-overlay.visible .fs-img:first-child{transition-delay:40ms}.fs-overlay.visible .fs-img:nth-child(2){transition-delay:70ms}.fs-overlay.visible .fs-img:nth-child(3){transition-delay:0.10s}.fs-overlay.visible .fs-img:nth-child(4){transition-delay:0.13s}.fs-overlay.visible .fs-img:nth-child(5){transition-delay:0.16s}.fs-overlay.visible .fs-img:nth-child(6){transition-delay:0.19s}.fs-overlay.visible .fs-img:nth-child(7){transition-delay:0.22s}.fs-overlay.visible .fs-img:nth-child(8){transition-delay:0.25s}.fs-overlay.visible .fs-img:nth-child(n+9){transition-delay:0.28s}@media (min-width:1101px){.preview-container{overflow:visible!important;background:0 0!important;box-shadow:none!important;border:none!important;border-radius:0!important}.preview-container .preview-image{overflow:visible}@media (min-width:1301px) and (max-width:1728px) and (min-height:850px){.right-panel-video{object-position:78% center}}@media (max-width:1300px) and (max-height:850px){.right-panel-video{object-position:center 5%}}}@media (max-width:1100px){body,html{overflow-x:hidden;overflow-y:auto!important;height:auto!important;min-height:100%!important;-webkit-overflow-scrolling:touch}.main-wrapper{flex-direction:column;display:block;height:auto!important;min-height:100vh;position:relative;overflow:visible!important}.right-panel-video{object-fit:cover;object-position:center center;opacity:.07;transform:none}.profile-info{position:fixed;top:60px;left:2.25rem;padding:0;bottom:auto;transform:none;z-index:10;pointer-events:none}.profile-info h1,.profile-info h2{font-size:1.15rem}body.is-hovering .profile-info{opacity:.1;transform:translateY(-14px);transition:opacity .35s,transform .45s cubic-bezier(.22, 1, .36, 1)}.left-panel{display:block;width:100%!important;height:auto!important;padding:12rem 1.5rem 2rem!important;overflow:visible!important;overflow-y:visible!important;position:relative;z-index:2}.preview-container{display:none!important}.nav-link{padding:.3rem .75rem;font-size:.8rem}.attribution{margin-top:2rem}.watermark{width:100px;bottom:1rem;right:1rem}.project-item{transform:none!important;padding:.9rem .75rem}.project-item::after{content:'\203A';font-size:1.2rem;line-height:1;color:var(--text-muted);opacity:.4;margin-left:.6rem;flex-shrink:0;transition:opacity .2s,transform .2s,color .2s}.project-item.active::after{opacity:1;transform:translateX(3px);color:var(--text-color)}.project-item:active{transform:scale(.985)!important;background-color:var(--hover-bg)}@media (min-width:800px) and (max-height:650px){.right-panel-video{object-position:center 10%;opacity:.1}.watermark{top:1rem;bottom:auto;left:1rem;right:auto;width:90px;opacity:.5}.nav-drag-handle,.nav-reset-btn{display:none!important}}}@media (min-width:1101px) and (orientation:portrait){body,html{overflow-x:hidden;overflow-y:auto!important;height:auto!important;min-height:100%!important;-webkit-overflow-scrolling:touch}.main-wrapper{display:block;height:auto!important;min-height:100vh;position:relative;overflow:visible!important}.right-panel-video{object-fit:cover;object-position:center center;opacity:.07;transform:none}.profile-info{position:fixed;top:88px;left:2.5rem;padding:0;bottom:auto;transform:none;z-index:10;pointer-events:none}.profile-info h1,.profile-info h2{font-size:1.35rem}body.is-hovering .profile-info{opacity:.1;transform:translateY(-14px);transition:opacity .35s,transform .45s cubic-bezier(.22, 1, .36, 1)}.left-panel{display:block;width:min(760px,100%)!important;height:auto!important;padding:14rem 2.5rem 3rem!important;overflow:visible!important;overflow-y:visible!important;position:relative;z-index:2}.preview-container{display:none!important}.project-item{transform:none!important;padding:.95rem .8rem}.project-item::after{content:'\203A';font-size:1.2rem;line-height:1;color:var(--text-muted);opacity:.4;margin-left:.6rem;flex-shrink:0;transition:opacity .2s,transform .2s,color .2s}.project-item.active::after{opacity:1;transform:translateX(3px);color:var(--text-color)}.fs-grid{width:min(900px,calc(100% - 3rem));max-width:900px;align-self:center;margin-inline:auto;padding-top:2rem}.fs-img.ratio-16-9{max-width:100%}}@media (width:1280px) and (height:800px){.nav-drag-handle,.nav-reset-btn{display:none!important}}@media (min-width:600px){.fs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fs-icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1101px) and (orientation:portrait){.fs-icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:600px){.profile-info{top:65px;left:1rem;padding:.5rem .85rem}.profile-info h1,.profile-info h2{font-size:1rem}.avatar-img{width:1.8rem;height:1.8rem}.left-panel{padding:11rem 1rem 2rem!important}.project-item{padding:.65rem .6rem;font-size:.85rem;gap:.25rem}.client-info{display:none}.project-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}.project-year{font-size:.75rem;min-width:32px}.nav-group{position:fixed!important;top:16px!important;left:50%!important;right:auto!important;transform:translateX(-50%) translateZ(0)!important;cursor:default!important;width:max-content!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important}.site-nav{padding:.25rem .35rem}.nav-link{padding:.28rem .55rem;font-size:.75rem}.nav-drag-handle{display:none}.watermark{width:80px}}@media (max-height:500px) and (orientation:landscape){.profile-info h1,.profile-info h2{font-size:1rem}.fs-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));grid-auto-rows:100px}}