:root{--c-bg:#030312;--c-text:#e6eef6;--c-muted:#9ca3af;--c-accent:#6ee7ff;--c-glass:#ffffff0a;--c-border:#ffffff14;--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r-sm:4px;--r-md:8px;--r-full:9999px;--t-fast:.2s ease;--t-slow:.4s cubic-bezier(.4,0,.2,1);--h-header:min(120px,10vh);--h-btn:36px;--s-xs:8px;--s-sm:12px;--s-md:16px;--s-lg:24px;--size-icon:20px;--size-check:18px;--size-portrait:220px;--size-sidebar:320px;--size-card:360px;--size-tech:92px;--size-tech-logo:56px;--lift:-6px;--hover-buffer:12px;--shadow:0 8px 24px #00000080}
*,:before,:after{box-sizing:border-box}html,body,#__next{height:100%;margin:0;overflow-x:hidden}body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2,h3,h4,h5,h6{color:var(--c-text);margin:0;font-weight:700}p{margin:0 0 1rem}p:last-child{margin-bottom:0}a{color:var(--c-text);transition:color var(--t-fast);text-decoration:none}a:hover,a:focus{color:var(--c-accent)}
.fixed-header{z-index:100;pointer-events:none;position:fixed;inset:0 0 auto}.fixed-header>*{pointer-events:auto}.main-content{padding-top:var(--h-header);min-height:100vh}.main-content.no-scroll{height:100vh;overflow:hidden}.page-content{z-index:1;position:relative}.page-container{min-height:calc(100vh - var(--h-header));padding:var(--s-lg)}.content-wrap{padding:0 var(--s-md);margin:0 auto}.tech-layout{height:calc(100vh - var(--h-header));flex-direction:column;display:flex}.tech-content{flex:1;min-height:0;position:relative;overflow:hidden}.tech-scroll{height:100%;padding:var(--s-md)var(--s-lg)var(--s-lg);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--s-md),black calc(100% - var(--s-md)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--s-md),black calc(100% - var(--s-md)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0px,black var(--s-md),black calc(100% - var(--s-md)),transparent 100%);scrollbar-width:none;overflow:hidden scroll}.tech-scroll::-webkit-scrollbar{display:none}.top-banner{height:var(--h-header);z-index:10;cursor:pointer;width:100%;position:relative}.nav-labels{z-index:3;pointer-events:none;padding:0 var(--s-lg);display:flex;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.nav-label{text-align:center;pointer-events:auto;flex:1}.nav-label h2{color:var(--c-text);transition:transform var(--t-fast),color var(--t-fast);transform-origin:50%;padding-bottom:var(--hover-buffer);margin-bottom:calc(var(--hover-buffer)*-1);font-size:1.6rem;font-weight:700}.nav-label h2:hover{transform:translateY(var(--lift))}.nav-label.active h2{color:var(--c-accent)}
.card{background:var(--c-glass);border-radius:var(--r-md);padding:var(--s-sm);border:1px solid var(--c-border);transition:transform var(--t-fast);position:relative;overflow:visible}.card:before{content:"";inset:calc(var(--hover-buffer)*-1);z-index:-1;position:absolute}.card:hover{transform:translateY(var(--lift))}.card--spaced{margin-top:var(--s-md)}.section-title{align-items:center;gap:var(--s-sm);margin-top:var(--s-md);display:flex}.section-title svg{color:var(--c-text);font-size:1.2em}.section-divider{height:var(--s-md);width:100%;display:block}.tag-chip{padding:var(--s-xs)var(--s-xs);border-radius:var(--r-full);background:var(--c-glass);color:var(--c-muted);border:1px solid var(--c-border);font-size:.85rem;display:inline-block}.filter-chip{padding:var(--s-sm)var(--s-md)var(--s-sm)calc(var(--s-sm) + var(--s-md) + var(--size-check));border-radius:var(--r-md);color:var(--c-muted);border:1px solid var(--c-border);cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);text-transform:capitalize;background:0 0;font-size:1.05rem;font-weight:500;position:relative}.filter-chip:before{content:"";left:var(--s-sm);width:var(--size-check);height:var(--size-check);border:2px solid var(--c-border);border-radius:var(--r-sm);transition:border-color var(--t-fast),background var(--t-fast);position:absolute;top:50%;transform:translateY(-50%)}.filter-chip:after{content:"";left:calc(var(--s-sm) + var(--s-xs)/2);width:calc(var(--size-check) - var(--s-xs));height:calc(var(--size-check) - var(--s-xs));background:var(--c-accent);border-radius:var(--r-sm);transition:transform var(--t-fast);position:absolute;top:50%;transform:translateY(-50%)scale(0)}.filter-chip:hover{color:var(--c-text);border-color:var(--c-text);background:var(--c-glass);transform:scale(.95)}.filter-chip:active{transform:scale(.9)}.filter-chip:hover:before{border-color:var(--c-text)}.filter-chip.active{color:var(--c-accent);border-color:var(--c-accent);background:rgb(from var(--c-accent)r g b/.08)}.filter-chip.active:before{border-color:var(--c-accent);background:rgb(from var(--c-accent)r g b/.15)}.filter-chip.active:after{transform:translateY(-50%)scale(1)}
.page-bg{height:calc(100vh - var(--h-header));justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.intro{text-align:center;letter-spacing:.2px;color:var(--c-accent);padding:var(--s-xs)5vw;max-height:calc(100% - var(--s-md));cursor:default;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:calc(2rem + 2.5vw);font-weight:700;display:flex;position:relative}@supports ((-webkit-background-clip:text)){.intro{background-image:linear-gradient(rgb(from var(--c-accent)r g b/.36),rgb(from var(--c-accent)r g b/.36)),radial-gradient(circle at var(--mx,50%)var(--my,12%),var(--c-accent)0%,rgb(from var(--c-accent)r g b/.98)6%,rgb(from var(--c-accent)r g b/.7)14%,rgb(from var(--c-accent)r g b/.28)30%,transparent 60%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}}.profile-page{padding:var(--s-lg);overflow:hidden}.profile-layout{gap:var(--s-md);height:calc(100vh - var(--h-header) - var(--s-lg)*2);display:flex;overflow:hidden}.profile-sidebar{flex:0 0 var(--size-sidebar);max-width:var(--size-sidebar);align-items:flex-start;gap:var(--s-md);padding:var(--s-md);flex-direction:column;display:flex}.profile-main{padding:var(--s-md);flex:auto;overflow:hidden}.portrait{width:var(--size-portrait);height:var(--size-portrait);object-fit:cover;box-shadow:var(--shadow);border:1px solid var(--c-border);border-radius:50%;margin:0 auto;display:block}.social-list{gap:var(--s-sm);width:100%;margin-top:var(--s-xs);padding-left:var(--s-xs);flex-direction:column;align-items:flex-start;display:flex}.social-item{align-items:center;gap:var(--s-sm);color:var(--c-text);font-size:.98rem;font-weight:600;text-decoration:none;display:flex}.social-item .icon,.social-item svg{width:var(--size-icon);height:var(--size-icon);transition:color var(--t-fast);flex-shrink:0}.social-item svg{color:var(--c-text)}.social-item:hover svg{color:var(--c-accent)}.social-item:hover .icon{filter:brightness(0)saturate()invert(83%)sepia(31%)saturate(1037%)hue-rotate(158deg)brightness(101%)contrast(101%)}.projects-layout{height:calc(100vh - var(--h-header));flex-direction:column;display:flex}.projects-header{flex-shrink:0}.projects-content{flex:1;min-height:0;position:relative;overflow:hidden}.projects-scroll{height:100%;padding:var(--s-md)var(--s-lg)var(--s-lg);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--s-md),black calc(100% - var(--s-md)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--s-md),black calc(100% - var(--s-md)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0px,black var(--s-md),black calc(100% - var(--s-md)),transparent 100%);scrollbar-width:none;overflow:hidden scroll}.projects-scroll::-webkit-scrollbar{display:none}.projects-message{padding:var(--s-md)0;color:var(--c-muted)}.projects-message.error{color:var(--c-accent)}.masonry-grid{width:100%;transition:opacity var(--t-fast),height var(--t-slow);position:relative}.masonry-item{transition:transform var(--t-slow),opacity var(--t-fast);transform-origin:50%;position:absolute;top:0;left:0}.masonry-item.exiting,.masonry-item.entering-initial,.masonry-item.entering-animate{pointer-events:none}.masonry-item.entering-initial{visibility:hidden;transition:none}.masonry-item.entering-animate{visibility:visible}.project-card{cursor:pointer;width:100%;max-width:var(--size-card);display:block;position:relative}.project-card h4{margin:var(--s-xs)0;color:var(--c-text)}.project-card-body{position:relative}.project-card-body p{color:var(--c-muted);margin:0}.preview-box{aspect-ratio:16/9;border-radius:var(--r-sm);width:100%;margin-bottom:var(--s-sm);background:var(--c-bg);overflow:hidden}.preview-box img{object-fit:cover;width:100%;height:100%;display:block}.preview-box.preview-fallback{justify-content:center;align-items:center;display:flex}.preview-fallback{color:var(--c-muted);justify-content:center;align-items:center;font-size:.95rem;font-weight:600;display:flex}.topic-wrap{margin-top:var(--s-xs);gap:var(--s-xs);flex-wrap:wrap;display:flex}.try-live{z-index:5;border:2px solid var(--c-text);color:var(--c-text);padding:var(--s-xs)var(--s-sm);font:inherit;height:var(--h-btn);transition:border-color var(--t-fast),color var(--t-fast);background:0 0;justify-content:center;align-items:center;font-weight:600;display:inline-flex;position:absolute;bottom:0;right:0}.project-card-body:has(.try-live) .topic-wrap{padding-right:100px}.try-live:hover,.try-live:focus{border-color:var(--c-accent);color:var(--c-accent)}.filter-panel{z-index:9;padding:var(--s-md)var(--s-lg);position:relative}.filter-toggle{cursor:pointer;padding:var(--s-xs)0 var(--s-xs)var(--s-sm);right:calc(var(--s-lg) + var(--r-md));top:var(--s-md);z-index:1;height:var(--h-btn);justify-content:flex-end;align-items:center;display:flex;position:absolute;transform:translateY(-50%)}.filter-toggle:after{content:"";top:50%;right:calc(var(--s-sm)*-1);width:calc(100% + var(--s-sm));background:var(--c-bg);z-index:-1;height:3px;transition:width var(--t-slow);position:absolute;transform:translateY(-50%)}.filter-panel.expanded .filter-toggle:after{width:calc(100% + var(--s-sm) + var(--s-md))}.filter-box{border:1px solid var(--c-muted);border-radius:var(--r-md);width:100%;min-height:var(--h-btn)}.filter-label-text{color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em;justify-content:flex-end;align-items:center;gap:var(--s-xs);white-space:nowrap;transition:opacity var(--t-fast),transform var(--t-fast);font-size:.85rem;font-weight:600;display:flex}.filter-label--expand{opacity:1;transform:translateY(0)}.filter-label--collapse{opacity:0;position:absolute;right:0;transform:translateY(-4px)}.filter-panel.expanded .filter-label--expand{opacity:0;transform:translateY(4px)}.filter-panel.expanded .filter-label--collapse{opacity:1;transform:translateY(0)}.filter-arrow{font-size:.7rem}.filter-body{transition:grid-template-rows var(--t-slow);grid-template-rows:0fr;display:grid}.filter-body-inner{justify-content:center;align-items:center;gap:var(--s-md);opacity:0;transition:opacity var(--t-fast),padding var(--t-slow);flex-direction:row;padding:0;display:flex;overflow:hidden}.filter-panel.expanded .filter-body{grid-template-rows:1fr}.filter-panel.expanded .filter-body-inner{opacity:1;padding:var(--s-md)0}.filter-title{color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;font-size:.85rem;font-weight:600}.filter-chips{gap:var(--s-sm);flex-wrap:wrap;display:flex}.tech-grid{grid-template-columns:repeat(auto-fill,var(--size-tech));gap:var(--s-sm);justify-content:start;place-items:start center;display:grid}.tech-item{align-items:center;gap:var(--s-xs);color:var(--c-text);z-index:1;transition:transform var(--t-fast);width:var(--size-tech);height:var(--size-tech);flex-direction:column;text-decoration:none;display:flex;position:relative}.tech-item:before{content:"";inset:calc(var(--hover-buffer)*-1);z-index:-1;position:absolute}.tech-item:hover{transform:translateY(var(--lift));z-index:20}.tech-item:focus-within{z-index:20}.tech-item:hover .tech-tooltip,.tech-item:focus-within .tech-tooltip{opacity:1;pointer-events:auto;transform:translate(-50%)}.tech-logo{width:var(--size-tech);height:var(--size-tech);justify-content:center;align-items:center;display:flex;position:relative}.tech-logo img{width:var(--size-tech-logo);height:var(--size-tech-logo);filter:drop-shadow(var(--shadow));z-index:1;transition:transform var(--t-fast);margin:auto;display:block;position:relative}.tech-logo-fallback{z-index:1;color:var(--c-bg);text-align:center;padding:var(--s-xs)var(--s-xs);justify-content:center;align-items:center;font-size:1.28rem;font-weight:700;line-height:1;display:flex;position:relative}.tech-logo-fallback--light{color:var(--c-text)}.tech-tooltip{top:calc(100% + var(--s-sm));transform:translate(-50%,calc(var(--s-xs)*-.5));opacity:0;transition:opacity var(--t-fast),transform var(--t-fast);pointer-events:none;background:rgb(from var(--c-bg)r g b/.85);border-radius:var(--r-md);padding:var(--s-xs)var(--s-sm);box-shadow:var(--shadow);text-align:center;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:200px;max-width:320px;position:absolute;left:50%}.tech-tooltip:after{content:"";border:var(--s-xs)solid transparent;border-bottom-color:rgb(from var(--c-bg)r g b/.85);position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.tech-tooltip-name{color:var(--c-text);font-size:1.05rem;font-weight:700}.tech-tooltip-desc{color:var(--c-muted);margin-top:var(--s-xs);font-size:.85rem;font-weight:600}.tech-tooltip.above{bottom:calc(100% + var(--s-sm));transform:translate(-50%,calc(var(--s-xs)*.5));top:auto}.tech-tooltip.above:after{border-bottom-color:#0000;border-top-color:rgb(from var(--c-bg)r g b/.85);top:100%;bottom:auto}
@media (max-width:900px){.profile-layout{flex-direction:column;align-items:center;height:auto}.profile-sidebar{text-align:center;flex:none;width:100%;max-width:100%}.portrait{margin:0 auto}.social-list{flex-flow:wrap;justify-content:center;padding-left:0}.filter-body-inner{gap:var(--s-sm);flex-direction:column;align-items:stretch}.filter-title{text-align:center}.filter-chips{justify-content:center}.masonry-item{width:100%!important}.projects-scroll{padding:var(--s-md)}.tech-grid{gap:var(--s-xs);grid-template-columns:repeat(auto-fill,80px)}.tech-item,.tech-logo{width:80px;height:80px}.tech-logo img{width:48px;height:48px}}@media (max-width:600px){.filter-panel,.page-container{padding:var(--s-sm)}.tech-grid{grid-template-columns:repeat(auto-fill,72px)}.tech-item,.tech-logo{width:72px;height:72px}.tech-logo img{width:40px;height:40px}}