:root{color-scheme:dark;--pink:#ff15c6}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:auto}
body{margin:0;background:#000;color:#fff;font-family:Inter,Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
img,svg,video,.hotspot,#contacts-toggle{-webkit-user-drag:none}
[hidden]{display:none!important}
main{width:100%;outline:none;min-height:100vh}
.scene{position:relative;width:100%;margin:0 auto;overflow:hidden}
.scene>svg{display:block;width:100%;height:auto;isolation:isolate;transform:translateZ(0)}
.hotspot,.top-nav-link{position:absolute;display:block;border:0;padding:0;background:transparent;color:transparent;text-decoration:none;cursor:pointer;border-radius:2px;z-index:2}
.hotspot:focus-visible,.top-nav-link:focus-visible{outline:2px solid var(--pink);outline-offset:5px;background:#ff15c61a}
.scene-video{position:absolute;object-fit:contain;background:#000;z-index:1}
.scene-art{position:absolute;display:block;object-fit:contain;z-index:1}
.scene-video.preview{pointer-events:none}
.scene-video.automatic-video{pointer-events:none;border:0;outline:0;background:transparent}
.scene-video.automatic-video::-webkit-media-controls{display:none!important}
.scene-video:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-100px;z-index:100;background:#000;color:#fff;border:1px solid var(--pink);padding:10px}
.skip-link:focus{top:12px}
#project-dock{position:fixed;left:0;bottom:max(12px,env(safe-area-inset-bottom));z-index:20;width:98px;display:flex;flex-direction:column;gap:7px;font:13px/1.3 Inter,Arial,sans-serif;letter-spacing:-.65px}
#list-toggle,#next-project{height:38px;width:98px;background:#000;border:1px solid var(--pink);border-radius:3px;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;padding:0}
#list-toggle:hover,#next-project:hover{color:var(--pink)}
#next-project svg{width:56px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
#project-list{position:absolute;bottom:90px;left:0;width:245px;max-width:calc(100vw - 12px);max-height:min(70vh,470px);overflow:auto;padding:16px 10px;background:#000;border:1px solid var(--pink);border-radius:3px}
#project-list a{display:block;padding:7px 3px;color:#fff;text-decoration:none;font-size:13px;line-height:1.3}
#project-list a:hover,#project-list a[aria-current=page]{color:var(--pink)}
#project-dock :focus-visible{outline:2px solid #fff;outline-offset:3px}
#contacts-dock{position:fixed;right:0;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 54px);z-index:20;font:13px/1.3 Inter,Arial,sans-serif;letter-spacing:-.65px}
#contacts-toggle{display:flex;align-items:center;justify-content:center;width:64px;height:38px;padding:0;background:#000;border:.5px solid var(--pink);border-radius:3px;cursor:pointer}
#contacts-toggle img{width:32px;height:32px}
#contacts-menu{position:absolute;right:0;bottom:45px;width:max-content;max-width:calc(100vw - 12px);padding:12px 14px;background:#000;border:1px solid var(--pink);border-radius:3px}
#contacts-menu a{display:block;padding:8px 0;color:#fff;text-decoration:none;overflow-wrap:anywhere}
#contacts-menu a:hover{color:var(--pink)}
#contacts-dock :focus-visible{outline:2px solid #fff;outline-offset:3px}
#loading{position:fixed;inset:0;background:var(--pink);z-index:50;display:flex;align-items:center;justify-content:center}
.loading-composition{width:100%;aspect-ratio:1280/697;position:relative}
#loading-frame{position:absolute;left:25.3125%;top:15.925%;width:49.375%;height:auto}
#loading-percent{position:absolute;left:38.828%;top:76.47%;width:22.344%;text-align:center;font:clamp(8px,1.171875vw,20px)/1 monospace;letter-spacing:-.05em;color:#fff}
body.is-loading{overflow:hidden}
#card-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:64px 24px 32px;border:0;background:#000;overflow:auto}
#card-viewer::backdrop{background:#000}
#card-image{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 96px);margin:0 auto;object-fit:contain}
.close-card{position:fixed;right:20px;top:12px;color:#fff;background:#000;border:1px solid var(--pink);border-radius:3px;width:38px;height:38px;font-size:28px;line-height:1;cursor:pointer;z-index:2}
.close-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
.logo-state{transition:opacity .12s linear}
.error-message{padding:80px 24px;line-height:1.6}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.logo-state{transition:none}}
/* Phone and tablet: original artwork, rearranged for the available screen. */
.compact-source{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;pointer-events:none}
.compact-layout{padding:0 max(20px,env(safe-area-inset-left)) calc(130px + env(safe-area-inset-bottom));font-size:16px;line-height:1.55}
.compact-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:110px;padding:12px 0 20px}
.compact-home{display:block;width:92px;flex-shrink:0}.compact-home svg{display:block;width:100%;height:auto}
.compact-nav{display:grid;grid-template-columns:repeat(2,minmax(65px,1fr));gap:0 14px;font-size:14px;line-height:1.2}
.compact-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}.compact-nav a[aria-current]{color:var(--pink)}
.compact-layout :focus-visible{outline:2px solid var(--pink);outline-offset:4px}
.compact-body h1{font-size:clamp(28px,5vw,46px);font-weight:400;line-height:1.15;margin:30px 0 16px;overflow-wrap:anywhere}
.compact-pink,.compact-section-title{color:var(--pink)}.compact-intro{max-width:680px;margin:20px 0 36px}
.compact-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.compact-panel{position:relative;min-width:0;overflow:hidden}.compact-panel>svg{display:block;width:100%;height:auto}
.compact-panel .scene-art,.compact-panel .scene-video{position:absolute;object-fit:contain}
.compact-panel .hotspot{min-width:44px;min-height:44px}
.compact-logo{padding:0;align-self:center}.compact-logo>svg{max-height:180px}
.compact-art-open{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;width:100%;height:100%}
.compact-work{display:block;text-decoration:none;min-width:0}.compact-work-name{display:block;margin-top:14px;font-size:15px;min-height:44px}
.compact-hero{height:calc(100svh - 110px);display:flex;align-items:center;justify-content:center;padding-bottom:35px}
.compact-hero>svg{width:76%;height:auto;max-width:470px}.compact-section-title{font-size:18px;font-weight:400;margin:16px 0 30px}
.compact-card{display:block;background:none;border:0;color:#fff;padding:0;text-align:left;cursor:pointer}.compact-card img{display:block;width:100%;height:auto}.compact-card span{display:block;margin-top:12px;font-size:16px;min-height:44px}
.compact-contact-link{display:block;min-height:52px;padding:12px 0;font-size:clamp(17px,4.8vw,26px);text-decoration:none;overflow-wrap:anywhere}.compact-contact-languages{margin:24px 0}
.compact-contacts{padding-bottom:40px}.compact-contacts h1{margin-top:30px}.compact-contacts>.compact-pink:last-child{margin-top:40px}
.compact-about>p{max-width:680px}.compact-cv-columns{display:grid;gap:24px;margin-top:45px}.compact-about h2,.compact-about h3{font-weight:400;margin:24px 0;font-size:23px}.compact-about h4{font-size:16px;font-weight:400;margin:4px 0}.compact-cv-item{margin-bottom:28px}.compact-cv-item p{margin:4px 0}.compact-cv-item p:last-child,.compact-muted{color:#aaa}.compact-skill{display:flex;justify-content:space-between;gap:20px;padding:5px 0}.compact-education{margin:0 0 20px}.compact-download{display:inline-flex;align-items:center;min-height:48px;margin:0 0 30px;color:#fff;text-underline-offset:5px}
@media (min-width:600px) and (max-width:1024px){
 .compact-layout{padding-left:40px;padding-right:40px}.compact-header{min-height:116px}.compact-nav{display:flex;gap:28px;font-size:16px}.compact-home{width:115px}.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 30px}.compact-cv-columns{grid-template-columns:1.25fr 1fr;gap:40px}.compact-hero{height:calc(100svh - 116px)}.compact-contacts{padding-top:30px}.compact-contacts h1{font-size:44px}.compact-contact-link{font-size:27px}
}
@media (max-width:1024px){
 #project-dock{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:112px;gap:8px;font-size:14px}
 #list-toggle,#next-project{width:112px;height:44px}#project-list{bottom:104px;width:280px;max-height:65svh;padding:12px}#project-list a{min-height:44px;padding:12px 4px;font-size:14px}
 #contacts-dock{right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 52px)}#contacts-toggle{width:58px;height:44px}
 .close-card{right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:44px;height:44px}
 #card-viewer{padding:74px 16px calc(24px + env(safe-area-inset-bottom))}#card-image{max-height:calc(100dvh - 110px)}
 .loading-composition{width:150%;flex-shrink:0}#loading-percent{font-size:14px}
}
@media(max-width:599px){.compact-header{height:110px;min-height:110px;padding:11px 0}.compact-hero{padding-bottom:110px}}
@media(min-width:600px) and (max-width:1024px){.compact-hero{padding-bottom:116px}}
/* Use the same Inter family as the Figma text, including on mobile. */
@font-face{font-family:Inter;src:url('assets/fonts/Inter-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/Inter-Bold.ttf') format('truetype');font-style:normal;font-weight:700 900;font-display:swap}
.compact-layout{font-family:Inter,Arial,sans-serif;letter-spacing:-.04em;font-size:14px;line-height:1.4}
.compact-body h1{font-size:clamp(25px,4.2vw,36px);letter-spacing:-.05em}.compact-work-name{font-size:13px;letter-spacing:-.05em}.compact-nav a{width:72px}.compact-nav a>svg{display:block;width:100%;height:40px}
.compact-header.home-no-corner-logo{justify-content:flex-end}.home-no-corner-logo .compact-nav{display:flex;width:100%;justify-content:space-between;gap:4px}
@media(max-width:599px){
 .compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
 .compact-panel{width:100%;max-width:100%;align-self:center}
 .compact-panel>svg{max-height:230px;object-fit:contain}
 .compact-media{max-width:240px;max-height:230px;justify-self:center}
 .compact-panel .scene-video,.compact-panel .scene-art{object-fit:contain}
 .home-grid .compact-panel>svg{max-height:180px}.home-grid .compact-panel{max-height:180px}
 .compact-card img{max-height:230px;object-fit:contain}.compact-card span{font-family:Inter,Arial,sans-serif;font-size:13px}
 .compact-card{min-width:0;align-self:start}.compact-intro{font-size:14px;line-height:1.4;margin-bottom:28px}
 .compact-hero>svg{width:64%;max-width:280px}.compact-grid .compact-logo>svg{max-height:120px}
 .compact-contacts h1{font-size:28px}.compact-contact-link{font-size:18px;letter-spacing:-.05em}
}
@media(max-width:599px){.compact-wide{grid-column:1/-1;max-width:350px;justify-self:center}.compact-wide>svg{max-height:200px}}
/* Preserve the complete Figma composition at every screen size. */
@media(max-width:1024px){main{min-height:100svh}.scene:not(.is-compact){padding-bottom:110px}}
@media(max-width:1024px){.scene[data-page="home"]:not(.is-compact){padding-bottom:max(110px,calc(100svh - 76.64vw + 24px))}}
svg text[data-localized]{pointer-events:none}

#top-nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;width:100%;z-index:25;pointer-events:none;isolation:isolate}
#top-nav>svg{display:block;width:100%;height:auto;pointer-events:none}
#top-nav.is-scrolled{background:#000}
#top-nav .top-nav-link{pointer-events:auto}
@font-face{font-family:'Pinyon Script';src:url('assets/fonts/PinyonScript-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
#pixel-trail{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none!important;z-index:40;image-rendering:pixelated}
#card-viewer #pixel-trail{z-index:3}
.viewer-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:44px;display:flex;align-items:center;justify-content:center;padding:8px;background:#000;border:1px solid var(--pink);border-radius:3px;color:#fff;cursor:pointer}
.viewer-previous{left:max(12px,env(safe-area-inset-left))}.viewer-next{right:max(12px,env(safe-area-inset-right))}
.viewer-arrow svg{width:30px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.viewer-arrow:hover{color:var(--pink)}.viewer-arrow:focus-visible{outline:2px solid #fff;outline-offset:4px}
#card-viewer .close-card{z-index:5}
@media(prefers-reduced-motion:reduce),(pointer:coarse){#pixel-trail{display:none}}
.scene[data-page="mutti"] text[data-source-index="18"]{text-decoration:underline;text-underline-offset:3px}
