:root{--bg-color: oklch(14.5% 0 0);--text-color: oklch(97% 0 0);--text-muted: oklch(43.9% 0 0);--accent-color: oklch(62.3% .214 259.815);--link-hover: oklch(80.9% .105 251.813);--company-bg: #27272a;--border-color: oklch(26.9% 0 0);--nav-popover-bg: oklch(87.9% .169 91.605);--nav-popover-text: oklch(14.5% 0 0);--font-family: "Manrope", sans-serif;--font-normal: 300;--font-medium: 400;--font-semibold: 500;--base-font-size: 1.25rem;--container-padding: 12rem;--ui-duration-fast: .12s;--ui-duration: .18s;--ui-duration-slow: .3s}:root[data-theme=light]{--bg-color: oklch(97% 0 0);--text-color: oklch(20.5% 0 0);--text-muted: oklch(70.8% 0 0);--accent-color: oklch(62.3% .214 259.815);--link-hover: oklch(42.4% .199 265.638);--company-bg: #e4e4e7;--border-color: oklch(92.2% 0 0);--nav-popover-bg: oklch(14.5% 0 0);--nav-popover-text: oklch(87.9% .169 91.605)}.page-hidden{display:none!important}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family);font-size:var(--base-font-size);font-weight:var(--font-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background-color .6s ease,color .6s ease;position:relative;overflow-x:hidden}button,a,.portfolio-shot,.modal-close{-webkit-tap-highlight-color:transparent}main,.page{margin:0 auto;padding-top:2rem;padding-bottom:2rem;padding-left:var(--container-padding);padding-right:var(--container-padding);min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:6rem;text-align:left;position:relative}main{transition:opacity .4s ease}main p{margin:0 auto;color:var(--text-color);font-size:3.25rem;line-height:1.25;transition:color .6s ease}main a{color:var(--accent-color);text-decoration:none;font-weight:var(--font-medium);transition:color .6s ease;white-space:nowrap}main a:hover{color:var(--link-hover)}a.link-glitch-active{-webkit-user-select:none;user-select:none}main .company-inline{display:inline-flex;align-items:center;gap:.35em;text-decoration:none;color:var(--text-muted);transition:color .6s ease}main .company-inline:hover{color:var(--text-muted)}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.nav-link{font-size:1.25rem;line-height:1.75rem;font-weight:var(--font-semibold);text-decoration:none}.nav-link.active{color:var(--text-color)}.nav-header{position:fixed;top:0;right:0;z-index:500;padding:2rem}.nav-menu-button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background:none;border:none;color:var(--text-color);cursor:pointer;transition:transform var(--ui-duration-fast) ease}.nav-menu-button:active{transform:scale(.95)}.nav-menu-button-icon{width:1.25rem;height:1.25rem;display:block;flex-shrink:0}.nav-popover{position:fixed;top:1.5rem;right:1.5rem;min-width:32rem;padding:1.5rem;background-color:var(--nav-popover-bg);color:var(--nav-popover-text);border-radius:1.75rem;opacity:0;visibility:hidden;transform-origin:top right;transform:scale(.2);transition:opacity var(--ui-duration) ease-in-out,transform var(--ui-duration) ease-in-out,visibility 0s linear var(--ui-duration);z-index:501}.nav-popover.nav-popover-open{opacity:1;visibility:visible;transform:scale(1);transition:opacity var(--ui-duration) ease-in-out,transform var(--ui-duration) ease-in-out,visibility 0s linear 0s}.nav-popover-close{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--nav-popover-text);cursor:pointer;opacity:.9;transition:transform var(--ui-duration-fast) ease}.nav-popover-close:active{transform:scale(.95)}.nav-popover-close svg{width:1.25rem;height:1.25rem}.nav-popover-close:hover{opacity:1}.nav-popover-links{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}.nav-popover-links .nav-link{color:var(--nav-popover-text);transition:opacity var(--ui-duration) ease}.nav-popover-links .nav-link:hover{opacity:.75}.nav-popover-links .nav-link.active{font-weight:var(--font-semibold)}.nav-popover-footer{display:flex;align-items:center;flex-wrap:nowrap;gap:0;padding-top:1rem}.nav-popover-footer-item{display:flex;align-items:center;flex-shrink:0;gap:.375rem}.nav-popover-footer-item+.nav-popover-footer-item{margin-left:1rem}.nav-popover-footer-label{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;font-size:.875rem;font-weight:var(--font-semibold);color:var(--nav-popover-text);text-decoration:none;transition:max-width var(--ui-duration) ease}.theme-toggle-in-popover:hover .nav-popover-footer-label,.nav-popover-social-icon:hover .nav-popover-footer-label{max-width:5.5rem}.nav-popover-social{color:var(--nav-popover-text);font-size:.875rem;transition:opacity var(--ui-duration) ease}.nav-popover-social:hover{opacity:.75}.nav-popover-social-icon{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem;text-decoration:none;transition:transform var(--ui-duration-fast) ease}.nav-popover-social-icon:active{transform:scale(.95)}.nav-popover-social-icon svg{width:1.25rem;height:1.25rem;flex-shrink:0}.portfolio-section-container,.portfolio-section-content{width:100%}.theme-transition-overlay{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:scale(0);opacity:1;transition:transform var(--ui-duration-slow) cubic-bezier(.4,0,.2,1),opacity var(--ui-duration-slow) cubic-bezier(.4,0,.2,1);will-change:transform,opacity}.theme-transition-overlay.active{transform:scale(1);opacity:0}.theme-toggle-in-popover{display:flex;align-items:center;justify-content:center;gap:.375rem;min-width:1.5rem;min-height:1.5rem;padding:.25rem 0;border:none;background:none;color:var(--nav-popover-text);cursor:pointer;flex-shrink:0;transition:opacity var(--ui-duration) ease,transform var(--ui-duration-fast) ease}.theme-toggle-in-popover:active{transform:scale(.95)}.theme-toggle-in-popover:hover{opacity:.75}.theme-toggle-icon{display:none;align-items:center;justify-content:center}.theme-toggle-icon svg{width:1.25rem;height:1.25rem}html[data-theme=light] .theme-toggle-in-popover .theme-toggle-icon-moon,html[data-theme=dark] .theme-toggle-in-popover .theme-toggle-icon-sun{display:flex}.portfolio-section{opacity:0;animation:slideInFromLeft .35s ease-out .1s forwards}#page-home{height:100vh;min-height:100vh;overflow:hidden;padding:0;gap:0;justify-content:flex-start}#page-home .portfolio-section{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}#page-home .portfolio-scroll-container{height:100%;padding-left:var(--container-padding);padding-right:var(--container-padding)}#page-home .portfolio-scroll-viewport{height:100%;max-height:none}.home-intro{position:absolute;top:0;left:0;right:0;z-index:1;padding-top:2rem;padding-bottom:2rem;padding-left:var(--container-padding);padding-right:var(--container-padding);pointer-events:none;background:linear-gradient(to bottom,color-mix(in oklch,var(--bg-color) 100%,transparent) 0%,color-mix(in oklch,var(--bg-color) 90%,transparent) 55%,transparent 100%);min-height:40vh}.home-intro p{margin:0 auto}.home-intro p,.home-intro a{pointer-events:auto}.portfolio-scroll-container{width:100%}.portfolio-scroll-viewport{max-height:80vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.portfolio-scroll-viewport::-webkit-scrollbar{display:none}.portfolio-scroll-viewport .portfolio-grid+.portfolio-grid{margin-top:2rem}.portfolio-scroll-viewport>.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;width:100%}#portfolioGrid.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;width:100%}.portfolio-grid{display:grid;gap:2rem;width:100%}#systemsGrid.portfolio-grid,#craftGrid.portfolio-grid,#intelligenceGrid.portfolio-grid{grid-template-columns:1fr}.portfolio-grid[aria-busy=true]{min-height:260px;align-items:center}.portfolio-grid[aria-busy=true]:before{content:"";grid-column:1 / -1;height:260px}.portfolio-shot{position:relative;width:100%;min-width:0;aspect-ratio:4 / 3;border:solid 1.5px var(--border-color);border-radius:1.75rem;background-color:var(--company-bg);cursor:pointer;opacity:0;animation:slideInFromLeft .3s ease-out;transition:opacity var(--ui-duration) cubic-bezier(.4,0,.2,1),background-color .6s ease,border-color .6s ease;overflow:hidden}.portfolio-shot.animated,.portfolio-panel.animated{opacity:1}.portfolio-grid:hover .portfolio-shot{opacity:.25!important}.portfolio-grid:hover .portfolio-shot:hover{opacity:1!important}.portfolio-shot img,.portfolio-panel img{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(.75rem - 1.5px);position:relative;z-index:2}.portfolio-shot.skeleton-loading,.portfolio-panel.skeleton-loading{background-color:var(--company-bg);position:relative;overflow:hidden}.portfolio-shot.skeleton-loading:before,.portfolio-panel.skeleton-loading:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:skeleton-shimmer 1.5s ease-in-out infinite}.rat-sequence{position:relative;width:100%;min-width:0;aspect-ratio:4 / 3;opacity:1;overflow:hidden}.rat-sequence img{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(.75rem - 1.5px)}@keyframes skeleton-shimmer{0%{left:-100%}to{left:100%}}.portfolio-panel{position:relative;width:100%;max-width:800px;margin-bottom:2rem;max-height:640px;aspect-ratio:4 / 3;border:solid 1.5px var(--border-color);border-radius:.75rem;cursor:default;opacity:0;animation:slideInFromLeft .3s ease-out;transition:background-color .6s ease,border-color .6s ease;overflow:hidden;display:flex;align-items:center;justify-content:center}.portfolio-panel:last-child{margin-bottom:0}.portfolio-panel.portfolio-panel-text{border:none;max-width:100%;width:100%;cursor:default;padding:1.5rem;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.5rem;aspect-ratio:auto;max-height:none}.portfolio-panel-text .portfolio-panel-headline{font-size:2.5rem;font-weight:var(--font-medium);color:var(--text-color);line-height:1.2;transition:color .6s ease}.portfolio-panel-text .portfolio-panel-body{font-size:1.5rem;font-weight:var(--font-normal);color:var(--text-muted);line-height:1.5;transition:color .6s ease}.portfolio-panel.animated{opacity:1}.portfolio-panel--no-border{border:none}.portfolio-panel--no-border img{border-radius:.75rem}.image-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000;z-index:1000;align-items:center;justify-content:center;padding:2rem;opacity:0;transition:opacity var(--ui-duration) ease,background-color var(--ui-duration) ease}.image-modal.active{display:flex;opacity:1;background-color:#000000e6}.modal-image{max-width:100%;max-height:100%;object-fit:contain}.modal-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--text-color);font-size:2.5rem;line-height:1;cursor:pointer;padding:0;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;transition:opacity var(--ui-duration) ease;font-family:var(--font-family)}.modal-close:hover{opacity:.7}html.transition-exit-left ::view-transition-old(root){animation:view-exit-left var(--ui-duration-slow) ease-out both}html.transition-exit-right ::view-transition-old(root){animation:view-exit-right var(--ui-duration-slow) ease-out both}html.transition-enter-from-right ::view-transition-new(root){animation:view-enter-from-right var(--ui-duration-slow) ease-out both}html.transition-enter-from-left ::view-transition-new(root){animation:view-enter-from-left var(--ui-duration-slow) ease-out both}@keyframes view-exit-left{to{transform:translate(-100%)}}@keyframes view-exit-right{to{transform:translate(100%)}}@keyframes view-enter-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes view-enter-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@media (min-width: 769px) and (max-width: 1600px){main,.page{padding-top:8rem;padding-bottom:8rem;justify-content:flex-start}}@media (max-width: 768px){:root{--container-padding: 2.25rem}.nav-popover{top:16px;left:16px;right:16px;width:auto;min-width:0;max-height:calc(100vh - 32px);overflow-y:auto;transform-origin:top right}main p{font-size:1.25rem;margin-bottom:2.25rem}.home-intro{min-height:32vh;padding-top:2rem;padding-bottom:2rem}#portfolioGrid.portfolio-grid,.portfolio-scroll-viewport>.portfolio-grid{grid-template-columns:1fr}.portfolio-panel{max-height:540px;margin-bottom:1.5rem}.portfolio-panel-text{padding:2rem}.portfolio-panel-text .portfolio-panel-headline{font-size:1.75rem}.portfolio-panel-text .portfolio-panel-body{font-size:1.125rem}.image-modal{padding:1rem}.modal-close{top:1rem;right:1rem;font-size:2rem;width:2rem;height:2rem}}@media (max-width: 480px){:root{--container-padding: 1.5rem}main,.page{gap:4rem;padding-top:4rem}main p{font-size:1.6rem;margin-bottom:0;line-height:1.7}.home-intro{background:linear-gradient(to bottom,color-mix(in oklch,var(--bg-color) 100%,transparent) 0%,color-mix(in oklch,var(--bg-color) 90%,transparent) 60%,transparent 100%);min-height:64vh;padding:1.5rem var(--container-padding)}.nav-header{padding:1.5rem}#portfolioGrid.portfolio-grid,.portfolio-scroll-viewport>.portfolio-grid{gap:2rem;width:100%}.nav-popover-links .nav-link{font-size:1.125rem}.portfolio-panel{margin-bottom:1rem}.portfolio-panel-text{padding:1.5rem}.portfolio-panel-text .portfolio-panel-headline{font-size:1.5rem}.portfolio-panel-text .portfolio-panel-body{font-size:1.15rem}.image-modal{padding:.5rem}.modal-close{top:.75rem;right:.75rem;font-size:1.75rem;width:1.75rem;height:1.75rem}}
