@font-face{font-family:"SuisseIntl-Book";src:url("/assets/wGz4mYRHlxdnVuYYDycqpIHF6Q.woff2") format("woff2");font-weight:450;font-style:normal;font-display:swap}@font-face{font-family:"SuisseIntl-Semibold";src:url("/assets/JEu0XafFN4HoN78k3jv13SBkP8k.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"SuisseIntlTrial-Book";src:url("/assets/5c2X7gDyauoJfDlcUvt91kkxv0.woff2") format("woff2");font-weight:450;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("/assets/syRNPWzAMIrcJ3wIlPIP43KjQs.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("/assets/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--token-ca7e8c16-d019-4f7d-a7ec-210d8b23d57d:rgb(235, 241, 255);--token-a3b03b3f-63d3-406d-92b7-4281e0892a8b:rgb(242, 246, 254);--token-6c2494bc-1aae-4f43-9fce-853ca2d4b0ec:rgb(28, 28, 28);--token-208d23eb-e3d0-41b2-874b-8d8446aad66c:rgba(28, 28, 28, 0.6);--token-24e7c884-d428-4f39-97dd-44236f911191:rgba(255, 255, 255, 0.5);--token-a90c3ef2-eb60-4837-ad89-9ed024558410:rgba(255, 255, 255, 0.6);--token-9e1fbcb3-6963-462b-95f4-8ec1620a3c29:rgba(0, 0, 0, 0.1);--token-dc95600e-d4f6-4826-9011-4c376964d365:rgb(252, 240, 251);--token-c5b7e658-01a8-46e9-8394-45f1957a19bf:rgb(237, 241, 255);--token-6b3eb2f5-ec14-4dbe-bc6d-c0bb93d2abed:rgb(212, 223, 245);--token-80470c2b-cbfd-4973-ae31-fe82494ec9de:rgb(237, 214, 245);--token-2b043a48-8537-46c2-b6d6-24ff1069d370:rgb(215, 213, 245);--token-a52ddd91-b761-46dd-aa35-555f21aaed24:rgb(199, 199, 199);--token-84b68fe2-88b9-4373-be89-e59c47fbbf12:rgb(227, 227, 227);--token-c18181c3-81f1-4482-b1b7-2248a547d428:rgba(0, 0, 0, 0.2);--token-916eaaf6-43f6-4ecb-81ed-3b5cb11ed9e9:rgb(240, 240, 240);--token-d0df782c-231e-45a6-9ef2-4771526c84f4:rgba(255, 255, 255, 0.5);--token-32f3da88-9151-48fc-b5ba-35f0a2370c57:rgb(255, 246, 242)}:root[data-theme="dark"]{--token-ca7e8c16-d019-4f7d-a7ec-210d8b23d57d:rgb(28, 34, 41);--token-a3b03b3f-63d3-406d-92b7-4281e0892a8b:rgb(19, 25, 36);--token-6c2494bc-1aae-4f43-9fce-853ca2d4b0ec:rgb(240, 240, 240);--token-208d23eb-e3d0-41b2-874b-8d8446aad66c:rgba(240, 240, 240, 0.5);--token-24e7c884-d428-4f39-97dd-44236f911191:rgba(161, 161, 161, 0.3);--token-a90c3ef2-eb60-4837-ad89-9ed024558410:rgba(255, 255, 255, 0.05);--token-9e1fbcb3-6963-462b-95f4-8ec1620a3c29:rgba(64, 64, 64, 0.5);--token-dc95600e-d4f6-4826-9011-4c376964d365:rgb(28, 17, 27);--token-c5b7e658-01a8-46e9-8394-45f1957a19bf:rgb(20, 20, 41);--token-6b3eb2f5-ec14-4dbe-bc6d-c0bb93d2abed:rgb(21, 47, 105);--token-80470c2b-cbfd-4973-ae31-fe82494ec9de:rgb(94, 43, 94);--token-2b043a48-8537-46c2-b6d6-24ff1069d370:rgb(36, 32, 94);--token-a52ddd91-b761-46dd-aa35-555f21aaed24:rgb(28, 28, 28);--token-84b68fe2-88b9-4373-be89-e59c47fbbf12:rgb(28, 28, 28);--token-c18181c3-81f1-4482-b1b7-2248a547d428:rgba(255, 255, 255, 0.3);--token-916eaaf6-43f6-4ecb-81ed-3b5cb11ed9e9:rgb(51, 51, 51);--token-d0df782c-231e-45a6-9ef2-4771526c84f4:rgba(255, 255, 255, 0.2);--token-32f3da88-9151-48fc-b5ba-35f0a2370c57:rgb(36, 25, 19)}:root{--text:var(--token-6c2494bc-1aae-4f43-9fce-853ca2d4b0ec);--muted:var(--token-208d23eb-e3d0-41b2-874b-8d8446aad66c);--surface:var(--token-24e7c884-d428-4f39-97dd-44236f911191);--border:var(--token-a90c3ef2-eb60-4837-ad89-9ed024558410);--spring:cubic-bezier(.2,.85,.25,1.05);color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--page-bg);color:var(--text);font-family:'SuisseIntl-Book',Arial,sans-serif;font-weight:450;font-size:14px;line-height:1.3;overflow-x:clip}body,button,a{ -webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}p,h1,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4{font-family:'SuisseIntl-Semibold',Arial,sans-serif;font-weight:600}main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}.ambient{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--ambient,var(--page-bg)),var(--page-bg));transition:background .8s;z-index:0}.navigation{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:4px;padding:4px;background:var(--token-9e1fbcb3-6963-462b-95f4-8ec1620a3c29);border-radius:16px;backdrop-filter:blur(24px)}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 1px -1px #0003,0 3px 3px -2px #0002,0 10px 10px -4px #0001;transition:transform .25s var(--spring),opacity .25s}.button:hover{transform:scale(.98);opacity:.8}.navigation .button{height:42px;min-width:68px}.navigation a[aria-current=page]{background:var(--token-d0df782c-231e-45a6-9ef2-4771526c84f4)}.hero{min-height:80vh;width:100%;padding:128px 32px 32px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px}.hero h1{max-width:768px;font-size:48px;line-height:1;letter-spacing:-.04em;text-align:center}.project-section{height:90vh;min-height:580px;width:100%;display:flex;align-items:center;justify-content:center;overflow:clip;scroll-snap-align:center}.project-strip{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;width:max-content}.project-tile{width:324px;height:324px;flex:none}.project-card{width:400px;height:324px;flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}.project-link{display:flex;flex-direction:column;align-items:center;gap:16px;border:0;padding:0;background:none;text-align:center;transition:transform .4s var(--spring),opacity .3s}.project-link:hover{transform:scale(.98);opacity:.75}.project-icon{border-radius:16px;width:63px;height:63px;object-fit:cover;transition:transform .45s var(--spring)}.project-link:hover .project-icon{transform:scale(1.05)}.project-card h2{font-size:28px;line-height:1;letter-spacing:-.02em;max-width:292px}.project-card h2 span{display:block;color:var(--muted);max-width:280px}.tags{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}.tag{display:inline-flex;padding:4px 10px;border-radius:100px;background:var(--surface);font-size:12px;line-height:1.2;color:var(--muted);white-space:nowrap}.media{display:block;max-width:100%;object-fit:cover;overflow:hidden;background:var(--surface)}.video-shell{position:relative}.video-shell video{display:block;width:100%;height:100%;position:absolute;inset:0}.video-toggle{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border:1px solid #ffffff66;background:#0006;color:#fff;border-radius:50%;opacity:0;transition:opacity .2s;z-index:1}.video-shell:hover .video-toggle,.video-toggle:focus-visible{opacity:1}.copy .text-block{display:block}.copy .text-block + .text-block{margin-top:20px}.node:has(>.media){max-width:100%}.page-info main>[data-name=About]{padding-top:140px!important}.context{max-width:min(100%,680px);width:max-content;text-align:left;position:relative;z-index:3}.context summary{list-style:none;margin:auto;width:max-content}.context summary::-webkit-details-marker{display:none}.context[open]{width:min(680px,100%)}.context[open] summary span{transform:rotate(45deg)}.context-body{display:flex;flex-direction:column;gap:24px;background:var(--surface);padding:28px;border:1px solid var(--border);border-radius:24px;margin-top:12px;animation:unfold .4s var(--spring)}.context-body>.node{width:100%!important;max-width:100%!important}.context-body .copy{height:auto!important}.gallery{width:500px;max-width:calc(100vw - 48px);position:relative;margin:0 auto}.gallery-controls{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:24px}.gallery-controls button{font-size:20px;min-width:42px}.slide-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.gallery-window{overflow:visible}.gallery-track{display:flex;gap:24px;align-items:flex-start;transition:transform .6s var(--spring)}.gallery-slide{flex:0 0 100%;min-width:0;opacity:.4;transform:scale(.8);transform-origin:top center;transition:opacity .5s,transform .6s var(--spring);min-height:540px}.gallery-slide.active{opacity:1;transform:scale(1)}.gallery-slide .node{max-width:100%!important}.gallery-slide .media{width:100%!important;height:auto!important;aspect-ratio:1!important}.gallery-slide:not(.active) .context{visibility:hidden}footer{position:relative;z-index:1;padding:64px 24px 24px;display:flex;align-items:center;flex-direction:column;gap:10px;width:100%}.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px}footer p{max-width:400px;text-align:center;color:var(--muted)}footer p:last-child{color:var(--text)}.theme-toggle{border:0;background:transparent;padding:0 12px 8px;color:var(--muted)}.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--page-bg);padding:12px}.skip-link:focus{top:12px}.reveal{animation:reveal .8s var(--spring) both;animation-delay:var(--delay,0s)}.js .reveal:not(.revealed){animation:none;opacity:0;transform:translateX(var(--enter-x,0)) scale(.9)}.js .revealed{animation:reveal .8s var(--spring) both;animation-delay:var(--delay,0s)}.spline-wrap{width:100%;height:100%;min-height:450px;position:relative}.spline-wrap spline-viewer{width:100%;height:100%;position:absolute;inset:0}.spline-placeholder{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--surface),transparent);filter:blur(15px)}dialog{position:fixed;max-width:min(680px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:1px solid var(--border);border-radius:24px;padding:40px;background:var(--page-bg);color:var(--text)}dialog::backdrop{background:#0004;backdrop-filter:blur(16px)}.dialog-close{position:absolute;right:10px;top:10px}dialog p{margin-top:16px;color:var(--muted)}@keyframes reveal{from{opacity:0;transform:translateX(var(--enter-x,0)) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes unfold{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:809px){.navigation{top:auto;bottom:24px}.hero{padding:32px;min-height:80svh}.hero h1{font-size:38px;max-width:600px}.project-section{height:760px;min-height:0}.project-strip{width:100%;max-width:600px;display:grid;grid-template-columns:repeat(3,128px);gap:10px;justify-content:center}.project-card{grid-column:1/-1;grid-row:1;width:100%;height:auto;margin-bottom:30px}.project-tile{width:128px;height:128px}.project-card h2{font-size:28px}.project-icon{width:64px;height:64px}footer{padding-bottom:112px}.node[style*="flex-direction:row"]{flex-wrap:wrap}.node[style*="width:749px"],.node[style*="width:768px"]{width:100%!important}.copy[style*="font-size:48px"]{font-size:36px!important}.node[data-name=Bio]{width:100%!important;padding:24px!important}.node[data-name=About]{gap:40px!important}.node[data-name=Containers]{padding:0 24px}.node[data-name=Containers]>.node{width:100%!important}.node[data-name=Details]{padding:80px 24px 48px!important}.node[data-name=Projects]>.node{max-width:100%!important}.page-info main>[data-name=About]{padding-top:64px!important}.spline-wrap{min-height:350px}.node[data-name="Model Container"]{height:400px!important}.gallery{max-width:calc(100vw - 48px)}.gallery-slide{min-height:400px}.context-body{padding:20px}.video-toggle{opacity:.6}.media{border-radius:16px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.js .reveal:not(.revealed){opacity:1;transform:none}}
.project-mobile{display:none}.node[style*="flex-direction:row"]>.media{min-width:0}.node[style*="flex-direction:row"]>.media[style*="flex:1"]{width:0!important}.project-mobile .media{flex-shrink:0}.project-mobile .node[style*="flex-direction:row"]{flex-wrap:nowrap!important}.project-mobile [data-name=Project]{margin-bottom:8px}.project-mobile .copy{text-align:center!important}.project-mobile .tag{padding:4px 10px}dialog>.media{margin:24px 0}html.lenis{scroll-behavior:auto}.gallery-slide.active .copy{animation:unfold .4s var(--spring)}
@media(max-width:809px){.project-strip{display:none}.project-mobile{display:flex;width:390px;max-width:100%;justify-content:center}.project-mobile>.node{flex-shrink:0;width:390px!important;max-width:none!important}.project-mobile .node[style*="flex-direction:row"]>.media{flex:none!important}.node[data-name=Bio]>.copy{line-height:1!important}.node[data-name=Bio]>.copy span[style*="font-size"]{font-size:36px!important}}
.ambient{background:var(--ambient,var(--page-bg));transition:background-color .8s ease;mask-image:linear-gradient(#000 25%,transparent 100%)}.hero h1{animation:hero-lines .8s cubic-bezier(.2,.7,.3,1) both;text-wrap:balance}.hero.revealed{animation:none}.hero.revealed .hero-action{animation:hero-lines .8s .2s both}@keyframes hero-lines{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Framer gallery controls and expanding context surface. */
.gallery-controls{justify-content:flex-start;gap:6px;margin-bottom:12px}.gallery-controls .button{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:0;border-radius:8px;box-shadow:none;transition:transform .45s var(--spring)}.gallery-controls .button:hover:not(:disabled){transform:scale(.95);opacity:1}.gallery-controls .button:disabled{opacity:.5}.gallery-controls svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.slide-count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.context{width:max-content;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 .602px .602px -1.25px #0000002e,0 2.289px 2.289px -2.5px #00000029,0 10px 10px -3.75px #0000000f;isolation:isolate}.context summary{display:flex;justify-content:center;align-items:center;width:100%;height:var(--context-height,42px);padding:var(--context-button-padding,0 16px);font-size:14px;line-height:1.3;cursor:pointer;list-style:none}.context[open]{width:var(--context-width,476px);border-radius:24px;box-shadow:none}.context[open] summary{position:absolute;inset:0;width:100%;height:100%;padding:0;color:transparent;z-index:2}.context[open] summary:focus-visible{outline-offset:-5px}.context-body{background:none;border:0;border-radius:0;margin:0;padding:var(--context-padding,24px);animation:none;pointer-events:none}.context-body a,.context-body button{pointer-events:auto;position:relative;z-index:3}.context-body>.reveal{animation:none!important;opacity:1!important;transform:none!important}.page-design-system .ds-context-stage .context{width:max-content}.page-design-system .ds-context-stage .context[open]{width:var(--context-width,476px)}
@media(prefers-reduced-motion:reduce){.gallery-controls .button{transition:none}}
/* Values checked against the published Framer site. */
:root{--button-shadow:0 .602187px .602187px -1.25px rgba(0,0,0,.18),0 2.288533px 2.288533px -2.5px rgba(0,0,0,.16),0 10px 10px -3.75px rgba(0,0,0,.06)}
.button,.gallery-controls .button,.context:not([open]){box-shadow:var(--button-shadow)}
.gallery-controls .button{border:1px solid var(--border)}
.page-info main>[data-name=About]{padding-top:128px!important}
.page-info [data-name=Bio]>.copy:first-child{font-size:46px!important;line-height:.85!important}
.ambient{top:-35px;bottom:-83px;mask-image:none;background:var(--ambient,var(--page-bg));overflow:hidden}
.ambient::after{content:'';position:absolute;left:-20%;right:-20%;top:67%;height:48%;background:linear-gradient(180deg,transparent,var(--page-bg));pointer-events:none}
.other-projects{padding:64px 24px;width:100%;position:relative;display:flex;justify-content:center}
.other-projects-panel{display:flex;flex-direction:column;align-items:center;width:500px;max-width:100%;padding:32px;background:var(--surface);border-radius:24px;gap:0}
.other-projects-label{font-size:12px;line-height:1.2;color:var(--muted);margin-bottom:12px}
.project-preview-trigger{display:flex;align-items:center;justify-content:center;min-height:32px;padding:0;border:0;background:none;font:inherit;color:var(--text);cursor:pointer}
.project-hover-preview{position:fixed;width:200px;height:200px;border-radius:24px;overflow:hidden;pointer-events:none;z-index:40;animation:unfold .2s var(--spring)}
.project-hover-preview img,.project-hover-preview video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:809px){.page-info main>[data-name=About]{padding-top:64px!important}.page-info [data-name=Bio]>.copy:first-child{font-size:36px!important;line-height:1!important}.node[data-name=Project] [data-name=Details]{padding:0!important}}
body:not(.page-home)>.ambient{display:none}
.info-heading{width:749px;max-width:100%}.info-heading-mobile{display:none}
@media(max-width:809px){.page-info main>[data-name=About]{padding-top:32px!important}.info-heading-desktop{display:none}.info-heading-mobile{display:block;font-size:38px;line-height:.85;letter-spacing:-.05em;text-align:center}.info-heading-mobile span{font-family:'Times New Roman',serif;font-weight:400;font-style:normal}}
/* Shared Framer hover treatment for footer and Read more buttons. */
footer .button,.hero .button,.context{transition:transform .2s var(--spring),opacity .2s}
@media(hover:hover) and (pointer:fine){footer .button:hover,.hero .button:hover,.context:not([open]):hover{transform:scale(.98);opacity:.95}}
.context[open]{transform:none;opacity:1}
@media(hover:none){footer .button:hover,.hero .button:hover{transform:none;opacity:1}}

/* Static, zero-mean grain breaks up 8-bit gradient steps without per-frame JS or blur. */
.page-home .ambient{isolation:isolate}
.page-home .ambient::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/gradient-dither.png") repeat;mix-blend-mode:soft-light;opacity:.025;pointer-events:none}

/* Keep entrance transform on the wrapper so the link remains free to hover. */
.hero-action{display:flex;justify-content:center}.hero .button{height:40px;min-height:40px;padding:0 12px 0 16px;font-size:14px;line-height:1.3;border-radius:12px;box-shadow:var(--button-shadow)}
/* Framer Toggle: shared stroke token adapts to light and dark themes. */
.theme-toggle,.theme-toggle.button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:24px;min-height:24px;padding:2px 0 0;border:1px solid var(--token-c18181c3-81f1-4482-b1b7-2248a547d428);border-radius:8px;background:transparent;box-shadow:none;color:var(--text);font-size:12px;line-height:1.2}
#ttc-dialog{width:534px;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);padding:16px;border:1px solid var(--border);border-radius:24px;background:var(--surface);backdrop-filter:blur(32px);box-shadow:0 10px 20px rgba(0,0,0,.05)}
#ttc-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:15px}
#ttc-dialog .media{flex:none;width:100%;margin:0;border-radius:16px!important;isolation:isolate}
/* Bleed the video slightly past the rounded clip to hide its edge seam. */
#ttc-dialog .video-shell video{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none}
#ttc-dialog>a.button{flex:none;height:38px;padding:0 16px;box-shadow:var(--button-shadow)}
#ttc-dialog::backdrop{background:transparent;backdrop-filter:none}
#ttc-dialog .dialog-close{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
#ttc-dialog .dialog-close:focus-visible{width:38px;height:38px;clip-path:none;z-index:4}
.theme-toggle,.theme-toggle.button{transition:color .2s ease}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover,.theme-toggle.button:hover{color:color-mix(in srgb,var(--text) 70%,transparent);opacity:1;transform:none}}
.ttc-website{flex:none;box-shadow:var(--button-shadow);transition:transform .2s var(--spring),opacity .2s}
@media(hover:hover) and (pointer:fine){.ttc-website:hover{transform:scale(.98);opacity:.95}}
.bio-intro{max-width:813px;width:100%;font-size:24px;line-height:1.2;letter-spacing:-.04em;text-align:center;text-wrap:balance}
.bio-inline-icon{display:inline-block;width:42px;height:16px;vertical-align:middle;position:relative}
.bio-inline-icon img{position:absolute;left:0;top:-19px;width:42px;height:42px;border-radius:8px;box-shadow:var(--button-shadow);transition:transform .4s var(--spring),box-shadow .4s}
.page-info .reference-icon{transition:transform .4s var(--spring),opacity .4s}
@media(hover:hover) and (pointer:fine){.page-info .reference-icon:hover{transform:scale(.92);opacity:.8}.bio-inline-icon:hover img{transform:translateY(10px) scale(.9);box-shadow:0 2px 2px -2.5px #0002}}
.page-info .reference-icon:active{transform:scale(.9);opacity:1}.bio-inline-icon:active img{transform:scale(.8)}
@media(prefers-reduced-motion:reduce){.bio-inline-icon img,.page-info .reference-icon{transition:none}}
.page-home .project-section .tags,.page-home .project-section [data-name="Tags"]{display:none}
.video-toggle{padding:0;line-height:0}
.video-toggle:not([hidden]){display:grid;place-items:center}
.video-toggle svg{display:block;margin:0;pointer-events:none}
.video-toggle[aria-label="Pause animation"] .play-icon,.video-toggle[aria-label="Play animation"] .pause-icon{display:none}
.video-toggle{width:32px;height:32px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--button-shadow);backdrop-filter:blur(12px);transition:opacity .2s,transform .45s var(--spring)}
@media(hover:hover) and (pointer:fine){.video-toggle:hover{transform:scale(.95)}}
@media(hover:none){.video-toggle{opacity:1}}
@media(prefers-reduced-motion:reduce){.video-toggle{transition:none}}
:root:not([data-theme="dark"]) .video-toggle{background:rgba(225,225,229,.65)}

/* Locally bundled interactive Shupi homepage header. */
.shupi-header{width:100%;height:clamp(340px,54vw,660px);overflow:hidden;border-radius:24px;background:#e9edf2;margin:0 auto 32px}.shupi-header iframe{display:block;width:100%;height:100%;border:0}.page-home .shupi-header+.hero{padding-top:32px}@media(max-width:600px){.shupi-header{height:360px;border-radius:16px;margin-bottom:16px}}@media(max-height:500px) and (orientation:landscape){.shupi-header{height:80svh;min-height:280px}}

/* Scene and introduction form one continuous header. */
.page-home{--page-bg:var(--shupi-background,#e9edf2)!important}
.shupi-header{height:clamp(320px,42vw,580px);margin-bottom:0;border-radius:0;background:var(--shupi-background,#e9edf2)}
.page-home .shupi-header+.hero{min-height:0;padding:8px 32px 80px;gap:24px}
@media(max-width:600px){.shupi-header{height:330px;margin-bottom:0}.page-home .shupi-header+.hero{padding:0 24px 56px;gap:20px}}
@media(max-height:500px) and (orientation:landscape){.shupi-header{height:80svh;min-height:280px}}

.page-home .ambient{transition:none}
.page-home .ambient::before{display:none}

/* Responsive scene framing and flush headline spacing. */
.shupi-header{height:clamp(330px,52vw,900px)}
.page-home .shupi-header+.hero{padding-block:0}

/* The transparent scene shares the page backdrop and only renders ground shadows. */
.page-home .shupi-header,.page-home .shupi-header iframe{background:transparent}

/* Match the iframe document color scheme so Chromium preserves its transparent canvas in night mode. */
.page-home .shupi-header iframe{color-scheme:light}

/* Scrolling must not override the scene-driven backdrop. */
.page-home .ambient{background:var(--page-bg)}
.page-home .ambient::after{display:none}


/* Project backgrounds resume below the scene introduction. */
.page-home .ambient{background:var(--project-background,var(--page-bg));transition:background-color .6s ease}
@media(prefers-reduced-motion:reduce){.page-home .ambient{transition:none}}

.nav-project-icon{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:2px;border-radius:12px}.nav-project-icon img{display:block;width:38px;height:38px;border-radius:10px;object-fit:contain}

.shupi-portrait{width:100%;height:100%;min-height:400px;position:relative}.shupi-portrait iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color-scheme:light}

/* Leave more space before the Info portrait and shift following content. */
.page-info [data-name="Model Container"]{margin:0}
.page-info [data-name="Bio"]{gap:0!important}

/* Additional space before the homepage headline. */
.page-home .shupi-header+.hero{margin-top:36px}

/* Shift the homepage scene and following content down together. */
.page-home .shupi-header{margin-top:100px}


.video-toggle{display:none!important}

.scene-resolution{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface);color:var(--text);font-size:12px;white-space:nowrap}.scene-resolution input{width:110px}.scene-resolution output{min-width:5ch}

.shupi-header{position:relative}

.portrait-modify{position:absolute;top:8px;right:12px;z-index:5}.portrait-modify[aria-pressed=true]{outline:2px solid currentColor}
.portrait-tilt{position:absolute;top:8px;left:12px;z-index:5}
.portrait-tilt[aria-pressed=true]{outline:2px solid currentColor}
.portrait-tilt-status{position:absolute;top:56px;left:12px;right:12px;text-align:center;font-size:12px;z-index:5;pointer-events:none}
/* Extra transparent drawing area preserves layout while pulls cross the text. */
.page-info [data-name="Model Container"],.shupi-portrait{overflow:visible!important}
.shupi-portrait{z-index:2;touch-action:auto}
.shupi-portrait iframe{top:-200px;bottom:auto;height:calc(100% + 400px);pointer-events:none}
@media(pointer:coarse){.shupi-portrait{pointer-events:none}}
/* On touch devices the portrait renders in the page, not in the oversized iframe. */
@media(pointer:coarse){
 .page-info [data-name="Model Container"]{width:min(72vw,360px)!important;height:350px!important;align-self:center}
 .shupi-portrait{min-height:0;height:350px;overflow:visible!important}
 .shupi-portrait-stage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:350px;overflow:visible;pointer-events:none}
 .shupi-portrait-stage canvas{pointer-events:auto}
}
/* The portrait must stack above Support's explicit z-index:2. */
.page-info [data-name="Model Container"]{z-index:3}
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}