.portfolio-header{z-index:100;box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding-inline:var(--portfolio-shell-inline,64px);background:var(--background);border-bottom:1px solid var(--icon-light);will-change:transform;transition:transform .22s;display:block;position:fixed;top:0;left:0;right:0;box-shadow:0 8px 16px #00002005}.portfolio-header--retracted{pointer-events:none;transform:translateY(-100%)}.portfolio-header-inner{grid-template-columns:1fr 1fr 1fr;align-items:center;height:80px;display:grid}.portfolio-header-brand{justify-self:start;align-items:center;display:flex}.portfolio-header-theme{justify-self:center;align-items:center;display:flex}.portfolio-header-logo-link{color:var(--text-primary);transition:color .3s;display:block}.portfolio-header-logo-link:hover{color:var(--accent)}.portfolio-header-logo{width:48px;height:48px;display:block}.portfolio-header-nav{justify-self:end}.portfolio-header-nav-list{font:var(--portfolio-text-b1);gap:48px;list-style:none;display:flex}.portfolio-header-nav-item{display:block}.portfolio-header-nav-item a{position:relative}.portfolio-header-nav-item a:after{content:"";background:currentColor;width:0;height:1px;transition:width .45s;position:absolute;bottom:0;left:0}.portfolio-header-nav-item a:hover:after{width:100%}.portfolio-header-work{margin-bottom:-14px;padding-bottom:14px;position:relative}.portfolio-header-work-trigger{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0;position:relative}.portfolio-header-work-trigger:after{content:"";background:var(--icon-light);width:0;height:1px;transition:width .45s;position:absolute;bottom:0;left:0}.portfolio-header-work:hover .portfolio-header-work-trigger:after,.portfolio-header-work--dropdown-open .portfolio-header-work-trigger:after,.portfolio-header-work-trigger:hover:after,.portfolio-header-work:focus-within .portfolio-header-work-trigger:after{width:100%}.portfolio-header-work-dropdown{background:var(--surface);min-width:216px;color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-8);z-index:110;opacity:0;visibility:hidden;pointer-events:none;padding:0;position:absolute;top:calc(100% - 6px);left:0;right:auto;box-shadow:0 12px 28px #0000001f,0 4px 10px #0000000f}.portfolio-header-work--dropdown-open .portfolio-header-work-dropdown{opacity:1;visibility:visible;pointer-events:auto}.portfolio-header-work-dropdown>div{display:block}.portfolio-header-work-dropdown-link{font:var(--portfolio-text-b2);color:inherit;padding:10px 18px;text-decoration:none;display:block}.portfolio-header-work-dropdown-link:hover{background:var(--surface-subtle)}.portfolio-header-work-dropdown-link--current{color:var(--accent);font-weight:600}.portfolio-header-work-dropdown-link--current:hover{background:var(--accent-soft);color:var(--accent)}.portfolio-header-nav-item--work .portfolio-header-work-dropdown-link:after{background:var(--text-secondary)}.portfolio-header-nav-item--work .portfolio-header-work-dropdown-link--current:after{background:var(--accent)}.portfolio-header-menu-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:none}.portfolio-header-menu-overlay,.portfolio-header-menu-panel{display:none}@media (max-width:1024px){.portfolio-header-inner{height:64px}.portfolio-header-nav-list{font:var(--portfolio-text-b2);gap:24px}}@media (max-width:768px){.portfolio-header-inner{height:56px}.portfolio-header-brand{order:2;justify-self:center}.portfolio-header-theme{order:1;justify-self:start}.portfolio-header-nav{order:3;justify-self:end}.portfolio-header-logo{width:40px;height:40px}.portfolio-header-nav-list{display:none}.portfolio-header-menu-btn{display:flex}.portfolio-header-menu-overlay{z-index:10000;background:color-mix(in srgb,var(--background-dark)40%,transparent);opacity:0;pointer-events:none;transition:opacity .2s;display:block;position:fixed;inset:0}.portfolio-header-menu-overlay[aria-hidden=false]{opacity:1;pointer-events:auto}.portfolio-header-menu-panel{z-index:10001;background:var(--background);width:280px;max-width:85%;height:100vh;color:var(--text-primary);border-left:1px solid var(--icon-light);transition:transform .25s;display:block;position:fixed;top:0;right:0;overflow:auto;transform:translate(100%);box-shadow:0 8px 16px #00002005}.portfolio-header-menu-panel[data-open=true]{transform:translate(0)}.portfolio-header-menu-panel-inner{flex-direction:column;gap:24px;padding:24px;display:flex}.portfolio-header-menu-close{color:var(--text-primary);cursor:pointer;background:0 0;border:none;justify-content:center;align-self:flex-start;align-items:center;padding:8px;display:flex}.portfolio-header-menu-list{font:var(--portfolio-text-b1);flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;display:flex}.portfolio-header-menu-list .portfolio-header-nav-item{display:block}.portfolio-header-menu-group--work{flex-direction:column;align-items:stretch;gap:10px;display:flex}.portfolio-header-menu-work-trigger{font:var(--portfolio-text-b1);color:inherit;text-align:start;cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0}.portfolio-header-menu-work-list{flex-direction:column;gap:12px;margin:0;padding:0 0 0 14px;list-style:none;display:flex}.portfolio-header-menu-work-item{font:var(--portfolio-text-b2);display:block}.portfolio-header-menu-work-item a{position:relative}.portfolio-header-menu-work-item a:after{content:"";background:currentColor;width:0;height:1px;transition:width .45s;position:absolute;bottom:0;left:0}.portfolio-header-menu-work-item a:hover:after{width:100%}.portfolio-header-menu-work-item a.portfolio-header-work-dropdown-link--current:after{background:var(--accent)}}
.theme-toggle-track{border-radius:var(--radius-8);background:var(--surface-subtle);border:1px solid var(--border-subtle);cursor:pointer;justify-content:flex-start;align-items:center;width:80px;height:44px;margin:0;padding:0 3px;transition:border-color .2s;display:flex}.theme-toggle-track:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}.theme-toggle-track[data-state=light] .theme-toggle{transform:translate(0)}.theme-toggle-track[data-state=dark] .theme-toggle{transform:translate(36px)}.theme-toggle{border-radius:var(--radius-8);width:36px;height:36px;cursor:inherit;pointer-events:none;background:var(--theme-toggle-sun-bg);border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;transition:background .2s,transform .25s;display:flex}.theme-toggle-icon{background-color:var(--accent-contrast);width:16px;height:16px;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.theme-toggle-sun{-webkit-mask-image:url(/assets/brightness-high-fill.svg);mask-image:url(/assets/brightness-high-fill.svg)}.theme-toggle-moon{-webkit-mask-image:url(/assets/moon-stars-fill.svg);mask-image:url(/assets/moon-stars-fill.svg)}html[data-theme=dark] .theme-toggle{background:var(--theme-toggle-moon-bg)}
.project-page-loader{position:relative}.project-page-loader--loading .project-page-loader__content-layer{visibility:hidden;pointer-events:none}.project-page-loader__overlay{top:var(--portfolio-header-bar,80px);z-index:50;background:var(--background);justify-content:center;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.project-page-loader__panel{flex-direction:column;align-items:center;gap:14px;padding:20px 24px;display:flex}.project-page-loader__spinner{border:4px solid color-mix(in srgb,var(--border)80%,transparent);border-top-color:var(--cursor-accent);border-radius:50%;width:56px;height:56px;animation:.8s linear infinite project-loader-spin}.project-page-loader__title{font:var(--portfolio-text-h2);color:var(--text-primary);letter-spacing:-.02em;text-align:center;margin:0;font-weight:600}.project-page-loader__text{font:var(--portfolio-text-b1);color:var(--text-secondary);text-align:center;margin:0}@media (max-width:768px){.project-page-loader__spinner{width:48px;height:48px}.project-page-loader__title{font-size:1.375rem}.project-page-loader__text{font-size:1rem}}@keyframes project-loader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}