@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:block))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--color-white:#fff;--font-weight-bold:700}}@layer base{html,body{background:#fff;min-height:100%;margin:0}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-x-0{inset-inline:0}.top-0{top:0}.isolate{isolation:isolate}.z-30{z-index:30}.z-\[1\]{z-index:1}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.aspect-\[800\/480\.687\]{aspect-ratio:800/480.687}.w-full{width:100%}.min-w-0{min-width:0}.resize{resize:both}.place-items-center{place-items:center}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-white{color:var(--color-white)}.filter{filter:var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
@layer components{html:has(.portfolio-site){color:#090909;font-synthesis:none;--unit:min(1vw,17.28px);scroll-behavior:smooth;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;font-size:clamp(16px,1.389vw,24px)}.portfolio-site *{box-sizing:border-box}body:has(.portfolio-site){margin:0}.portfolio-site a{color:inherit;text-underline-offset:3px}.portfolio-site button,.portfolio-site a{-webkit-tap-highlight-color:transparent}.portfolio-site button{font:inherit;cursor:pointer}.portfolio-site button:focus-visible,.portfolio-site a:focus-visible,.portfolio-site [tabindex]:focus-visible{outline-offset:6px;outline:3px solid #ee6b29}.portfolio-site button:disabled{cursor:default}.portfolio-site .skip-link{z-index:20;background:#fff;padding:12px;position:absolute;top:-80px;left:15px}.portfolio-site .skip-link:focus{top:10px}.portfolio-site .header{padding:0 calc(var(--unit)*2.8935);justify-content:space-between;align-items:center;display:flex}.portfolio-site .wordmark{letter-spacing:-.075em;font-size:1.5rem;font-weight:950;text-decoration:none}.portfolio-site .nav-brand{align-items:baseline;gap:clamp(14px,1.4vw,24px);min-width:0;display:flex}.portfolio-site .nav-brand .wordmark{line-height:1}.portfolio-site .nav-role{white-space:nowrap;font-size:.75rem;font-weight:450;line-height:1.3}@media (min-width:761px){.portfolio-site .nav-role{position:relative;top:-3px}}.portfolio-site .header nav{gap:calc(var(--unit)*2.8935);align-items:center;font-weight:700;display:flex}.portfolio-site .header nav>a{text-decoration:none;transition:opacity .2s}.portfolio-site .header nav>a:hover{opacity:.7}.portfolio-site .chat-button{color:#fff;background:#272727;border-radius:6px;justify-content:center;align-items:center;min-height:46px;padding:.57em .84em;display:inline-flex;box-shadow:inset 0 3px 4px #ededed40,inset 0 -4px #000}.portfolio-site main{background-image:radial-gradient(circle,#f5f5f5 2px,#0000 2.7px);background-size:calc(var(--unit)*1.736) calc(var(--unit)*1.736);padding-top:calc(var(--unit)*1.16);position:relative}.portfolio-site .projects{z-index:1;width:86.4%;max-width:1493px;margin:0 auto 0 8.5%;position:relative}.portfolio-site .project{scroll-margin-top:30px;position:relative}.portfolio-site .laptop-project{margin-bottom:calc(var(--unit)*7.176);grid-template-columns:46.42% 53.58%;align-items:center;display:grid}.portfolio-site .laptop-project.reverse{grid-template-columns:53.58% 46.42%}.portfolio-site .project.reverse .copy{grid-area:1/2}.portfolio-site .project.reverse .laptop,.portfolio-site .project.reverse .phone-gallery{grid-area:1/1}.portfolio-site .copy{min-width:0}.portfolio-site .copy h1,.portfolio-site .copy h2{letter-spacing:-.035em;max-width:100%;margin:0;font-size:1.3333rem;font-weight:700;line-height:1.17}.portfolio-site .copy p{color:#444;margin:1.5rem 0 0;font-size:1rem;font-weight:450;line-height:1.4}.portfolio-site .project-link{overflow-wrap:anywhere;max-width:98%;margin-top:.45rem;font-size:1rem;font-weight:500;line-height:1.2;display:inline-block}.portfolio-site .laptop{aspect-ratio:800/480.687;isolation:isolate;width:100%;position:relative}.portfolio-site .laptop-shell{width:100%;height:auto;display:block;position:absolute;top:2.727%;left:0}.portfolio-site .laptop-screen{z-index:2;position:absolute;overflow:hidden}.portfolio-site .laptop-screen>video{object-fit:cover;width:100%;height:100%;display:block}.portfolio-site .laptop-screen.wardrobe-screen{background:#f2def7}.portfolio-site .laptop-screen>.wardrobe-video{aspect-ratio:1280/802;object-fit:contain;clip-path:inset(1.5px 0);width:108%;height:auto;position:absolute;top:-1.5px;left:50%;transform:translate(-50%)}.portfolio-site .nox-screen{background:#f1f1f1}.portfolio-site .nox-video{object-fit:cover;object-position:left center}.portfolio-site .scrollable-screen{overscroll-behavior:contain;touch-action:pan-y;background:#fff;overflow:auto}.portfolio-site .scrollable-screen>img{width:100%;height:auto;display:block}.portfolio-site .app-projects{margin-top:calc(var(--unit)*-4.86);margin-bottom:calc(var(--unit)*7.176);scroll-margin-top:25px}.portfolio-site .phone-project{width:74%;margin-left:12.4%;margin-bottom:calc(var(--unit)*.23);grid-template-columns:61.7% 32.4%;align-items:center;column-gap:5.9%;display:grid}.portfolio-site .phone-project.reverse{grid-template-columns:30.64% 63.62%;column-gap:5.74%;width:79.4%;margin-left:9.85%}.portfolio-site .phone-project .copy h2{white-space:normal}.portfolio-site .phone-gallery{width:100%;padding:0 0 26px;position:relative}.portfolio-site .phone{aspect-ratio:363.1/749.89;background:linear-gradient(#595959,#acacac 49%,#525252 71%,#505050 81%,#868686);border-radius:14.4%/7%;width:100%;padding:3.4% 3.5%;position:relative;box-shadow:inset 0 0 0 1px #777}.portfolio-site .phone:before{content:"";background:#000;border-radius:14%/7%;position:absolute;inset:.68% 2%}.portfolio-site .phone-screen{background:#fff;border-radius:13%/6.2%;width:100%;height:100%;position:relative;overflow:hidden}.portfolio-site .phone-screen>img{object-fit:cover;width:100%;height:100%;display:block}.portfolio-site .slides{isolation:isolate}.portfolio-site .slide{opacity:0;pointer-events:none;background:#fff;transition:opacity .55s ease-in-out;position:absolute;inset:0}.portfolio-site .slide.active{opacity:1;z-index:1}.portfolio-site .slide img{object-fit:cover;width:100%;height:100%;display:block}.portfolio-site .gallery-arrow{z-index:3;opacity:0;place-items:center;width:40px;height:40px;line-height:1;transition:opacity .2s,transform .2s;display:grid;position:absolute;top:calc(50% - 27px);transform:translateY(3px)}.portfolio-site .gallery-arrow.previous{left:-34px}.portfolio-site .gallery-arrow.next{right:-34px}.portfolio-site .carousel:hover .gallery-arrow,.portfolio-site .carousel:focus-within .gallery-arrow{opacity:1;transform:translateY(0)}.portfolio-site .gallery-controls{opacity:0;align-items:center;gap:6px;transition:opacity .2s;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.portfolio-site .carousel:hover .gallery-controls,.portfolio-site .carousel:focus-within .gallery-controls{opacity:1}.portfolio-site .gallery-dot{background:#fff;border:0;border-radius:50%;width:7px;height:7px;padding:0;position:relative}.portfolio-site .gallery-dot:before{content:"";position:absolute;inset:-5px}.portfolio-site .gallery-dot.active{background:#ff8c50}.portfolio-site .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.portfolio-site .bank-logo{width:44%;max-width:331px;height:auto;margin-top:1rem;display:block}.portfolio-site .illustration-screen{background:#000}.portfolio-site .project:last-child{margin-bottom:0}.portfolio-site #scroll-tube{pointer-events:none;z-index:0;width:8%;height:100%;position:absolute;top:0;left:0;overflow:visible}@media (hover:none){.portfolio-site .gallery-arrow,.portfolio-site .gallery-controls,.portfolio-site .gallery-arrow{transform:none}}@media (min-width:1729px){.portfolio-site .projects{margin-left:calc(50vw - 717px)}.portfolio-site main{background-size:30px 30px}.portfolio-site .header{padding:0 max(50px,50vw - 814px)}}@media (max-width:760px){html:has(.portfolio-site){--unit:1vw;font-size:16px}.portfolio-site .header{min-height:76px;padding:18px 20px}.portfolio-site .wordmark{white-space:nowrap}.portfolio-site .chat-button{border-radius:5px;min-height:38px}.portfolio-site main{background-image:radial-gradient(circle,#f5f5f5 1.5px,#0000 2px);background-size:22px 22px;padding-top:22px}.portfolio-site .projects{width:auto;max-width:none;margin:0 18px 0 51px}.portfolio-site .laptop-project,.portfolio-site .laptop-project.reverse,.portfolio-site .phone-project,.portfolio-site .phone-project.reverse{flex-direction:column;align-items:stretch;gap:28px;width:100%;margin:0 0 70px;display:flex}.portfolio-site .copy h1,.portfolio-site .copy h2{letter-spacing:-.04em;font-size:23px;line-height:1.2}.portfolio-site .copy p{margin-top:20px;font-size:16px;line-height:1.5}.portfolio-site .project-link{margin-top:9px;font-size:15px}.portfolio-site .laptop{align-self:center;width:100%;margin:0}.portfolio-site .app-projects{margin-top:0;margin-bottom:0}.portfolio-site .phone-gallery{align-self:center;width:210px}.portfolio-site .phone-project{gap:30px}.portfolio-site .phone-project .phone-gallery{margin-top:3px}.portfolio-site .phone-project .copy h2{white-space:normal}.portfolio-site .phone-gallery.carousel{padding-bottom:30px}.portfolio-site .gallery-arrow{opacity:1;width:34px;height:34px;transform:none}.portfolio-site .gallery-arrow.previous{left:-42px}.portfolio-site .gallery-arrow.next{right:-42px}.portfolio-site .gallery-controls{opacity:1}.portfolio-site .bank-logo{max-width:185px;margin-top:23px}.portfolio-site #scroll-tube{width:43px}.portfolio-site .project:last-child{margin-bottom:0}}@media (max-width:370px){.portfolio-site .header{padding:16px 14px}.portfolio-site .phone-gallery{width:185px}.portfolio-site .projects{margin-left:44px;margin-right:12px}.portfolio-site .copy h1,.portfolio-site .copy h2{font-size:21px}}@media (prefers-reduced-motion:reduce){html:has(.portfolio-site){scroll-behavior:auto}.portfolio-site *,.portfolio-site :before,.portfolio-site :after{transition:none!important;animation:none!important}}.portfolio-site .device-button{pointer-events:none;width:.682%;height:7.744%;position:absolute;left:0}.portfolio-site .device-button.silent{height:4.756%;top:20.46%}.portfolio-site .device-button.volume-up{top:28.54%}.portfolio-site .device-button.volume-down{top:38.05%}.portfolio-site .device-button.power{width:.91%;height:11.836%;top:31.08%;left:auto;right:-.4%;transform:rotate(180deg)scaleY(-1)}html:has(.portfolio-site){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--header-height:max(78px,calc(var(--unit)*6.25))}body:has(.portfolio-site){overflow-x:clip}.portfolio-site .header{z-index:30;min-height:calc(var(--header-height) + env(safe-area-inset-top));height:calc(var(--header-height) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:#ffe1d2;position:sticky;top:0}.portfolio-site .project,.portfolio-site .app-projects{scroll-margin-top:calc(var(--header-height) + env(safe-area-inset-top) + 22px)}.portfolio-site .laptop-shell{clip-path:inset(89% 0 0);z-index:1}.portfolio-site .laptop-screen{background:#000;border:0;border-radius:3.165% 3.165% 0 0/4.412% 4.412% 0 0;width:78.97%;height:94.29%;top:0;left:10.3%}.portfolio-site .laptop-bottom-bezel{z-index:5;pointer-events:none;background:#080808;width:78.97%;height:3.2%;position:absolute;top:91.1%;left:10.3%}.portfolio-site .laptop-outline{z-index:4;pointer-events:none;width:79.97%;height:95.117%;position:absolute;top:-.832%;left:9.8%}.portfolio-site .laptop-screen>video{object-fit:cover;width:100%;height:100%}.portfolio-site .gallery-arrow{box-shadow:none;color:#222;background:0 0;border:0;border-radius:0;font-size:34px;font-weight:400}.portfolio-site footer{isolation:isolate;z-index:0;min-height:0;margin-top:calc(var(--unit)*-11.574);color:#fff;background:0 0;padding:0;position:relative}.portfolio-site .footer-lines{pointer-events:none;z-index:0;width:100%;position:absolute;inset:0;overflow:hidden}.portfolio-site .footer-links{z-index:1;white-space:nowrap;font-size:24px;display:grid;position:absolute}.portfolio-site .footer-links>div{flex-direction:column;gap:30px;display:flex}.portfolio-site .footer-links a,.portfolio-site .footer-name{font-size:inherit;line-height:29px;text-decoration:none}.portfolio-site .footer-links a:hover{text-decoration:underline}@media (min-width:761px) and (max-width:1728px){.portfolio-site .footer-links{grid-template-columns:repeat(3,calc(var(--unit)*7.93));column-gap:calc(var(--unit)*3.01);font-size:1rem}.portfolio-site .footer-links>div{gap:calc(var(--unit)*1.736)}.portfolio-site .footer-links a,.portfolio-site .footer-name{line-height:1.2}}@media (max-width:760px){html:has(.portfolio-site){--header-height:82px}.portfolio-site .nav-brand{flex-direction:column;align-items:flex-start;gap:3px}.portfolio-site .nav-role{font-size:10px;line-height:12px}.portfolio-site .nav-role>span{display:block}.portfolio-site .header{padding-top:calc(16px + env(safe-area-inset-top,0px));height:auto;padding-bottom:16px}.portfolio-site .laptop-screen{border:0;border-radius:3.165% 3.165% 0 0/4.412% 4.412% 0 0}.portfolio-site .gallery-arrow{font-size:29px}.portfolio-site .footer-links>div{gap:20px}.portfolio-site .footer-links a,.portfolio-site .footer-name{line-height:1.3}.portfolio-site footer{margin-top:-48px}.portfolio-site .footer-links>div:last-child{flex-direction:column;grid-column:auto;justify-content:start}}.portfolio-site .laptop-screen>.reel-video{object-fit:contain;background:#000}.portfolio-site .experiment-slides{background:#f3f3f3}.portfolio-site .experiment-slide{opacity:0;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;gap:0;transition:opacity .25s ease-in-out,visibility 0s linear .25s;display:flex;position:absolute;inset:0}.portfolio-site .experiment-slide.active{opacity:1;visibility:visible;pointer-events:auto;z-index:1;transition-delay:0s}.portfolio-site .experiment-slide>img,.portfolio-site .experiment-slide>video{object-fit:contain;width:100%;min-width:0;height:100%;display:block}.portfolio-site .experiment-slide.scroll-study{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ff965c #333;display:block;overflow:auto}.portfolio-site .experiment-slide.scroll-study>img{object-fit:initial;width:100%;height:auto}.portfolio-site .media-carousel .gallery-arrow{z-index:6;top:43%}.portfolio-site .media-carousel .gallery-arrow.previous{left:2%}.portfolio-site .media-carousel .gallery-arrow.next{right:2%}.portfolio-site .media-carousel .gallery-controls{z-index:6;gap:5px;bottom:-17px}.portfolio-site .media-carousel .gallery-dot{width:6px;height:6px}.portfolio-site .media-carousel:hover .gallery-arrow,.portfolio-site .media-carousel:focus-within .gallery-arrow,.portfolio-site .media-carousel:hover .gallery-controls,.portfolio-site .media-carousel:focus-within .gallery-controls{opacity:1;transform:translateY(0)}.portfolio-site .media-carousel .gallery-controls{transform:translate(-50%)!important}@media (hover:none){.portfolio-site .media-carousel .gallery-arrow,.portfolio-site .media-carousel .gallery-controls{opacity:1}}@media (max-width:760px){.portfolio-site .media-carousel .gallery-arrow{width:25px}.portfolio-site .media-carousel .gallery-arrow.previous{left:0}.portfolio-site .media-carousel .gallery-arrow.next{right:0}.portfolio-site .media-carousel .gallery-controls{gap:5px}.portfolio-site .media-carousel .gallery-dot{width:5px;height:5px}}.portfolio-site .cloudflare-viewport{background:#fff;overflow:hidden}.portfolio-site .cloudflare-viewport .scrollable-screen{scrollbar-width:none;border:0;border-radius:0;position:absolute;inset:0;overflow:auto}.portfolio-site .cloudflare-viewport .scrollable-screen::-webkit-scrollbar{width:0;height:0;display:none}.portfolio-site .screen-scroll-track{z-index:3;pointer-events:none;width:3px;position:absolute;top:14px;bottom:14px;right:7px}.portfolio-site .screen-scroll-thumb{background:#ff893c;border-radius:3px;width:100%;height:30%;position:absolute;top:0;left:0}.portfolio-site .screen-scroll-track{opacity:0;transition:opacity .2s}.portfolio-site .cloudflare-viewport:hover .screen-scroll-track{opacity:1}.portfolio-site .experiment-slide{background:#fff}.portfolio-site .experiment-slide.artwork>img{object-fit:cover}.portfolio-site .experiment-slide.button-guide>img{object-fit:fill}.portfolio-site .experiment-slide.icon-study{background:#e5e5e5}.portfolio-site .experiment-slide.paired{background:#fff;gap:0;padding:0}.portfolio-site .experiment-slide.paired>img,.portfolio-site .experiment-slide.paired>video{object-fit:contain;width:50%;height:100%}.portfolio-site .experiment-slide.login-study{background:#487339}.portfolio-site .study-crop{clip-path:inset(2px 0);aspect-ratio:1270/760;width:100%;position:relative;overflow:hidden}.portfolio-site .study-crop>img{width:228.504%;max-width:none;height:auto;position:absolute;top:-122.632%;left:-4.252%}.portfolio-site .header nav>a.chat-button{backface-visibility:hidden;contain:paint;opacity:1;background-image:none;background-position:100% 0;background-repeat:no-repeat;background-size:300% 100%;transition:background-color .2s,box-shadow .2s;transform:translateZ(0)}@keyframes chat-shine{0%{background-image:linear-gradient(110deg,#fff0 36%,#ffffff2b 50%,#fff0 64%);background-position:100% 0}99.9%{background-image:linear-gradient(110deg,#fff0 36%,#ffffff2b 50%,#fff0 64%);background-position:0 0}to{background-image:none;background-position:0 0}}.portfolio-site .header nav>a.chat-button:hover,.portfolio-site .header nav>a.chat-button:focus-visible{opacity:1;background-color:#303030;background-position:0 0;animation:.55s chat-shine;box-shadow:inset 0 3px 5px #ffffff60,inset 0 -4px #000,0 0 12px #ffffff40}.portfolio-site .phone-gallery .gallery-controls{left:50%;transform:translate(-50%)}@media (max-width:760px){.portfolio-site .bank-logo{margin-left:auto;margin-right:auto}.portfolio-site .phone-gallery .gallery-controls{left:50%;transform:translate(-50%)}.portfolio-site .header{gap:12px;padding-left:16px;padding-right:16px}.portfolio-site .wordmark{font-size:23px}.portfolio-site .header nav{gap:12px;font-size:12px}.portfolio-site .header nav>a:first-child{font-size:12px}.portfolio-site .header nav>a:first-child:after{content:none}.portfolio-site .chat-button{padding:10px 11px}}@media (max-width:370px){.portfolio-site .header{gap:8px;padding-left:12px;padding-right:12px}.portfolio-site .wordmark{font-size:20px}.portfolio-site .header nav{gap:9px;font-size:11px}.portfolio-site .header nav>a:first-child{font-size:11px}}.portfolio-site .experiment-slide.merch-photo{background:#f1efeb}.portfolio-site .experiment-slide.motion-study{background:#303030}.portfolio-site .experiment-slide.motion-study>video{object-fit:contain}.portfolio-site .experiment-slide.owl-study{background:#383838}.portfolio-site .experiment-slide.owl-study>video{mix-blend-mode:lighten}.portfolio-site .experiment-slide.interface-pair>img{object-fit:contain;object-position:center}.portfolio-site .experiment-slide.merch-photo>img{object-fit:cover}.portfolio-site .experiment-slide.shirt-photo>img{object-position:50% 54%}.portfolio-site .experiment-slide.display-photo>img{object-position:50% 72%}.portfolio-site .experiment-slide.world-photo>img{object-position:50% 40%}html:has(.portfolio-site){background:linear-gradient(#ffe1d2 0 50%,#d8322f 50% 100%) fixed}:is(html:has(.portfolio-site),body:has(.portfolio-site)){overscroll-behavior-y:none}body:has(.portfolio-site){background:#d8322f;min-height:100svh}.portfolio-site main{background-color:#fff}.portfolio-site .reel-screen{background:#000}.portfolio-site footer{height:calc(var(--unit)*34.7222 + env(safe-area-inset-bottom,0px));margin-bottom:0}.portfolio-site .footer-links{text-align:left;grid-template-columns:repeat(3,max-content);column-gap:clamp(24px,3vw,52px);width:max-content;max-width:calc(100% - 32px);left:50%;transform:translate(-50%,-50%)}.portfolio-site .footer-links>div:nth-child(2){text-align:left}@media (max-width:760px){.portfolio-site footer{height:calc(310px + env(safe-area-inset-bottom,0px))}.portfolio-site .footer-links{grid-template-columns:repeat(3,max-content);column-gap:14px;width:max-content;max-width:calc(100% - 32px);font-size:13px;top:50%}.portfolio-site .phone-gallery[data-gallery=songmix] .gallery-controls{bottom:12px}}@media (max-width:370px){.portfolio-site .footer-links{column-gap:12px;font-size:12px}}.portfolio-site .phone-screen>.project-video{object-fit:cover;background:#fff;width:100%;height:100%;display:block}.portfolio-site footer{padding-bottom:0}.portfolio-site .footer-lines{height:100%;min-height:100%;top:0;bottom:0}.portfolio-site .footer-links{top:58%}}
@property --screen-glow-1{syntax:"<color>";inherits:true;initial-value:#d2d7dd}@property --screen-glow-2{syntax:"<color>";inherits:true;initial-value:#d2d7dd}@property --screen-glow-3{syntax:"<color>";inherits:true;initial-value:#d2d7dd}@property --screen-glow-4{syntax:"<color>";inherits:true;initial-value:#d2d7dd}@layer components{:is(html:has(.portfolio-experiment),body:has(.portfolio-experiment)){--header-height:0px;background:#fff}.portfolio-experiment{background-color:#fff;background-image:url(/portfolio/assets/paper-dot-pattern.svg);background-size:calc(var(--unit) * 1.73611) calc(var(--unit) * 1.73611);background-position:calc(var(--unit) * 1.38889) calc(var(--unit) * 1.27315);min-height:100svh}.portfolio-experiment main{padding-top:clamp(60px,7.8vw,135px);padding-bottom:calc(max(64px, var(--unit) * 6.25) + env(safe-area-inset-bottom,0px));background:0 0}:is(.portfolio-experiment,.portfolio-glass) .phone-gallery{isolation:isolate}:is(.portfolio-experiment,.portfolio-glass) .laptop,:is(.portfolio-experiment,.portfolio-glass) .phone-gallery{transition:--screen-glow-1 .65s,--screen-glow-2 .65s,--screen-glow-3 .65s,--screen-glow-4 .65s}:is(.portfolio-experiment,.portfolio-glass) .laptop:before,:is(.portfolio-experiment,.portfolio-glass) .phone-gallery:before{content:"";z-index:-1;pointer-events:none;background:conic-gradient(from -35deg, var(--screen-glow-1), var(--screen-glow-2) 28%, var(--screen-glow-3) 56%, var(--screen-glow-4) 80%, var(--screen-glow-1));filter:blur(34px);opacity:0;border-radius:35%;transition:opacity .4s,transform .5s;position:absolute;inset:-5% 5%;transform:scale(.92)}:is(.portfolio-experiment,.portfolio-glass) .phone-gallery:before{filter:blur(26px);border-radius:40px;inset:-14px -22px 12px;transform:scale(.98)}@media (hover:hover){:is(.portfolio-experiment,.portfolio-glass) .laptop:hover:before,:is(.portfolio-experiment,.portfolio-glass) .phone-gallery:hover:before{opacity:.65;transform:scale(1.04)}:is(.portfolio-experiment,.portfolio-glass) .phone-gallery:hover:before{opacity:.42;transform:scale(1)}}@media (max-width:760px){:is(.portfolio-experiment,.portfolio-glass) .laptop:before,:is(.portfolio-experiment,.portfolio-glass) .phone-gallery:before{filter:blur(22px)}}@media (prefers-reduced-motion:reduce){:is(.portfolio-experiment,.portfolio-glass) .laptop:before,:is(.portfolio-experiment,.portfolio-glass) .phone-gallery:before{transition:none}}@media (max-width:760px){.portfolio-experiment{background-position:12px 12px;background-size:22px 22px}.portfolio-experiment main{padding-top:48px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}:is(.portfolio-experiment,.portfolio-glass) .phone-gallery.carousel:before{bottom:16px}}}
@layer components{:is(html:has(.portfolio-glass),body:has(.portfolio-glass)){background:#faf9f6}.portfolio-glass{--footer-gradient-height:calc(var(--unit) * 34.7222 + env(safe-area-inset-bottom,0px));--grid-left:calc(max(0px, (100vw - 1728px) / 2) + var(--unit) * 2.8935 - 24px);background-color:#faf9f6;background-image:radial-gradient(76.4% 77.3% at 53% 100%,#d8322f 0%,#eb5e4a 21.6%,#fc8e69 43.1%,#fdba8b 64.6%,#fbeac5b3 86.2%,#fbeac500 110%),radial-gradient(70% 720px at 95% 150px,#f5d3b84d,#0000 80%),radial-gradient(65% 900px at 0 2200px,#efe3d54d,#0000 80%),linear-gradient(#b6a18a12 1px,#0000 1px),linear-gradient(90deg,#b6a18a12 1px,#0000 1px),linear-gradient(#b6a18a0a 1px,#0000 1px),linear-gradient(90deg,#b6a18a0a 1px,#0000 1px);background-size:100% var(--footer-gradient-height), auto, auto, 240px 240px, 240px 240px, 48px 48px, 48px 48px;background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat;background-position:center bottom, center top, center top, var(--grid-left) top, var(--grid-left) top, var(--grid-left) top, var(--grid-left) top}.portfolio-glass .header{background:0 0}.portfolio-glass .navbar-glass{height:calc(var(--header-height) + env(safe-area-inset-top,0px));box-sizing:border-box;z-index:29;backface-visibility:hidden;-webkit-backdrop-filter:blur(22px)saturate(135%);backdrop-filter:blur(22px)saturate(135%);background:linear-gradient(115deg,#ffe4cd9c,#ffcfac80);border-bottom:1px solid #b4794414;top:0;transform:translateZ(0);box-shadow:0 5px 24px #7d4d2b05,inset 0 1px #fff6}.portfolio-glass main{padding-top:calc(var(--header-height) + env(safe-area-inset-top,0px) + clamp(60px, 7.8vw, 135px));background:0 0}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.portfolio-glass .navbar-glass{background:#f6d4baee}}@media (max-width:760px){:is(html:has(.portfolio-glass),body:has(.portfolio-glass)){background:#f6d4ba}.portfolio-glass .navbar-glass{height:calc(var(--header-height) + env(safe-area-inset-top,0px) + 80px);top:-80px}.portfolio-glass{--footer-gradient-height:calc(310px + env(safe-area-inset-bottom,0px));--grid-left:4px;background-size:100% var(--footer-gradient-height), auto, auto, 160px 160px, 160px 160px, 32px 32px, 32px 32px}.portfolio-glass main{padding-top:calc(var(--header-height) + env(safe-area-inset-top,0px) + 48px)}}}