@font-face{font-family:"Google Sans";src:url("assets/fonts/google-sans-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{color-scheme:light;--ink:#20252b;--brand:#0c79fb;--brand-strong:#0868d8;--brand-hover:#075bc6;--paper:#f1f2f6;--border:#d2d4da;--curve:cubic-bezier(.2,.75,.2,1);font-family:"Google Sans","PingFang SC",Arial,sans-serif;font-synthesis:none;color:var(--ink);background:#d5d6db;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}body{margin:0;padding:5.25vh 2.84vw;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}button:focus-visible,a:focus-visible{outline:2px solid #304fff;outline-offset:6px}.skip-link{position:fixed;z-index:100;left:20px;top:12px;padding:12px 18px;background:white;transform:translateY(-180%)}.skip-link:focus{transform:none}
.home-frame{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;min-height:89.5vh;background:radial-gradient(ellipse 450px 220px at 21% 50%,#e0eaff99,transparent 100%),radial-gradient(ellipse 360px 220px at 75% 51%,#e2e8ff88,transparent 100%),var(--paper)}
.site-header{position:relative;z-index:15;height:114px;margin:0 6.2%;display:flex;align-items:center;justify-content:space-between}.wordmark{font-size:16px;letter-spacing:-1.05px;font-weight:600}.main-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:35px;white-space:nowrap}.main-nav button{min-height:44px;display:inline-flex;align-items:center;padding:10px 4px;font-size:12px;letter-spacing:-.4px;transition:opacity .2s}.main-nav button:hover{opacity:.5}.header-contact{min-height:44px;display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:-.35px}.header-contact svg{width:20px;transition:transform .3s var(--curve)}.header-contact:hover svg{transform:translateX(4px)}.mobile-menu{display:none}
.gallery{--gallery-top:80px;position:absolute;inset:var(--gallery-top) 0 auto;height:485px;perspective:1400px}.project-card{--angle:-37deg;--card-width:min(30.9187cqw,41vh);--card-height:calc(var(--card-width)*184/350);position:absolute;left:calc(var(--cx) - var(--card-width)/2);top:calc(var(--cy) - var(--card-height)/2);width:var(--card-width);height:var(--card-height);overflow:hidden;border-radius:30px;text-align:left;transform:rotate(var(--angle));transform-origin:50% 50%;background:#fff;color:#08090a;z-index:calc(2 + var(--i));padding:0;isolation:isolate;box-shadow:inset 0 0 0 .5px #ffffffa6;will-change:transform}.project-card::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 1px #ffffff50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.1' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.13;mix-blend-mode:soft-light}.card-slot-0{--design-x:144.32082496;--design-y:266.77246882;--cx:calc(var(--row-offset,0px) + var(--design-x)*var(--card-unit,1px));--cy:calc(var(--row-y,0px) + var(--design-y)*var(--card-unit,1px) - var(--gallery-top));--angle:-44.640deg}.card-slot-1{--design-x:312.13911815;--design-y:301.71332752;--cx:calc(var(--row-offset,0px) + var(--design-x)*var(--card-unit,1px));--cy:calc(var(--row-y,0px) + var(--design-y)*var(--card-unit,1px) - var(--gallery-top));--angle:-35.080deg}.card-slot-2{--design-x:532.75228441;--design-y:332.07523281;--cx:calc(var(--row-offset,0px) + var(--design-x)*var(--card-unit,1px));--cy:calc(var(--row-y,0px) + var(--design-y)*var(--card-unit,1px) - var(--gallery-top));--angle:-34.620deg}.card-slot-3{--design-x:748.83181682;--design-y:374.04390669;--cx:calc(var(--row-offset,0px) + var(--design-x)*var(--card-unit,1px));--cy:calc(var(--row-y,0px) + var(--design-y)*var(--card-unit,1px) - var(--gallery-top));--angle:-37.580deg}.card-slot-4{--design-x:965.77689518;--design-y:376.45150216;--cx:calc(var(--row-offset,0px) + var(--design-x)*var(--card-unit,1px));--cy:calc(var(--row-y,0px) + var(--design-y)*var(--card-unit,1px) - var(--gallery-top));--angle:-37.208deg}.card-slot-5{--design-x:1193.15807430;--design-y:406.73052001;--cx:calc(var(--row-offset,0px) + var(--design-x)*var(--card-unit,1px));--cy:calc(var(--row-y,0px) + var(--design-y)*var(--card-unit,1px) - var(--gallery-top));--angle:-36.674deg}.card-uc{background:#2850fb url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%22600%22%20viewBox%3D%220%200%201000%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-50%25%22%20y%3D%22-100%25%22%20width%3D%22200%25%22%20height%3D%22300%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2270%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%232850fb%22%20d%3D%22M0%200H1000V600H0Z%22%2F%3E%3Cg%20filter%3D%22url%28%23soft%29%22%3E%3Cpath%20fill%3D%22%230c79fb%22%20opacity%3D%221%22%20d%3D%22M340%20-200%20H1200%20V420%20C1030%20330%20900%2060%20730%20120%20S440%20230%20340%20-200%20Z%22%2F%3E%3Cpath%20fill%3D%22%239bbfff%22%20opacity%3D%220.95%22%20d%3D%22M-120%20780%20C-40%20550%20130%20490%20250%20500%20S400%20360%20510%20470%20S760%20600%20900%20510%20S1130%20510%201200%20760%20V850%20H-120%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:100% 100%;color:#fff;box-shadow:0 18px 45px #4b55ff09}.card-model{background:#fff;color:#08090a}.card-medical{background:radial-gradient(ellipse at 94% 8%,#ffffff24 0%,#ffffff0c 27%,transparent 56%),linear-gradient(135deg,#161717,#050505 72%);color:#fff}.card-graphic{background:#fff}.card-copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:31px 33px 28px}.card-title{font-size:clamp(20px,2.16cqw,29px);font-weight:500;letter-spacing:-.75px;line-height:1.13;white-space:nowrap}.card-title>span{display:block;color:#a2a2a1}.card-uc .card-title>span,.card-commerce .card-title>span,.card-medical .card-title>span{color:rgb(255 255 255 / 60%)}.card-link{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:400;letter-spacing:-.3px}.arrow-circle{width:25px;height:25px;background:#050505;color:#fff;border-radius:50%;display:grid;place-items:center}.arrow-circle svg{width:13px;height:13px;stroke-width:1.5}.card-uc .arrow-circle,.card-commerce .arrow-circle,.card-medical .arrow-circle{background:#fff;color:#767d84}.project-object{position:absolute;z-index:2;width:64%;aspect-ratio:1;right:-10%;bottom:-6%;background-repeat:no-repeat;background-size:contain;background-position:center;pointer-events:none;transform-origin:50% 55%;will-change:transform}.object-uc{background-image:url("assets/icons-refined/uc.webp");width:50%;right:-2.3%;bottom:1%}.object-commerce{background-image:url("assets/icons-refined/commerce-clean.webp");width:54%;right:-4%;bottom:-7%}.object-monitor{background-image:url("assets/icons-refined/monitor.webp");width:53%;right:-3%;bottom:8%}.object-model{background-image:url("assets/icons-refined/model.webp");width:54%;right:-4%;bottom:-8%}.object-medical{background-image:url("assets/icons-refined/medical.webp");width:54%;right:-4%;bottom:-4%}.object-graphic{background-image:url("assets/icons-refined/graphic.webp");width:54%;right:-4%;bottom:-6%}
.intro{position:absolute;left:6.2%;right:6.2%;bottom:148px;z-index:10;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;pointer-events:none}.intro h1{margin:0;font-size:clamp(32px,3.6cqw,53px);font-weight:400;letter-spacing:-2.1px;line-height:1.37;white-space:nowrap}.headline-mask{display:block;overflow:hidden}.headline-line{display:block}.intro strong{font-weight:700;letter-spacing:-1.8px;font-size:1.07em}.intro-actions{display:flex;gap:12px;align-items:center;padding-bottom:1px;pointer-events:auto}.pill-button{display:flex;align-items:center;justify-content:center;gap:10px;height:51px;padding:0 22px;border:1px solid #353d46;border-radius:100px;font-size:12px;white-space:nowrap;transition:background .25s,color .25s,transform .25s var(--curve)}.pill-button svg{width:17px;height:17px}.pill-button:hover{background:#20252b;color:white;transform:translateY(-2px)}.pill-button:active{transform:scale(.97)}
.credentials{position:absolute;bottom:59px;left:6.2%;right:6.2%;height:51px;display:flex;align-items:stretch;z-index:10}.credential-icon,.credential-pill,.field-marquee{border:1px solid var(--border);border-radius:100px}.credential-icon{width:51px;flex:0 0 51px;display:grid;place-items:center}.credential-icon svg{width:22px;height:22px;color:#59616d}.credential-pill{display:flex;align-items:center;justify-content:center;margin-left:-1px;min-width:178px;font-size:11px;letter-spacing:-.3px;transition:background .2s}.credential-pill:hover{background:#fff}.credential-icon:not(:first-child){margin-left:-1px}.field-marquee{min-width:0;flex:1;overflow:hidden;margin-left:-1px;display:flex;align-items:center;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}.marquee-track{display:flex;align-items:center;flex-shrink:0;width:max-content;animation:marquee 28s linear infinite}.credentials:hover .marquee-track{animation-play-state:paused}@keyframes marquee{to{transform:translateX(-50%)}}
#intro-canvas{position:absolute;inset:0;z-index:20;width:100%;height:100%;pointer-events:none;display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.page-loader{display:none;position:absolute;inset:0;z-index:19;height:min(100%,calc(100svh - 32px));place-items:center;pointer-events:none;perspective:1400px}
.has-motion .page-loader{display:grid}
.has-motion:not([data-ready="true"]) .site-header,.has-motion:not([data-ready="true"]) .gallery,.has-motion:not([data-ready="true"]) .intro,.has-motion:not([data-ready="true"]) .credentials{visibility:hidden}
.has-motion[data-phase="transition"] .gallery,.has-motion[data-phase="transition"] .site-header,.has-motion[data-phase="transition"] .intro,.has-motion[data-phase="transition"] .credentials{visibility:visible}
.has-motion[data-ready="true"] .page-loader{display:none}
.page-loader[hidden]{display:none}
.loading-card{--card-unit:1px;position:relative;width:min(520px,65cqw,calc((100svh - 32px)*.6));aspect-ratio:350/184;overflow:hidden;border-radius:42px;color:#fff;isolation:isolate;transform-origin:center;animation:loading-card-breathe 2.4s ease-in-out infinite}
.loading-card .card-copy{padding:9% 9.4% 8%}.loading-card .card-title{font-size:clamp(23px,3.1cqw,39px)}.loading-card .card-link{font-size:clamp(10px,1.1cqw,15px)}.loading-card .arrow-circle{width:clamp(25px,3cqw,35px);height:clamp(25px,3cqw,35px)}
.loading-card .project-object{animation:loading-icon-breathe 2.4s ease-in-out -.18s infinite}
.page-loader:not([data-renderer]) .loading-card{visibility:hidden}
.loading-card .arrow-circle svg{width:52%;height:52%}
.page-loader[data-renderer="webgl"] .loading-card{visibility:hidden}
.page-loader[data-renderer="webgl"] .loading-card,.page-loader[data-renderer="webgl"] .project-object{animation-play-state:paused}
.project-card[data-idle="true"]{animation:card-breathe 5.6s ease-in-out infinite}
.project-card[data-idle="true"] .project-object{animation:icon-breathe 5.6s ease-in-out .4s infinite}
.project-card:hover,.project-card:focus-visible,.project-card:hover .project-object,.project-card:focus-visible .project-object{animation-play-state:paused}
.motion-paused *{animation-play-state:paused!important}
@keyframes loading-card-breathe{0%,100%{transform:translateY(0) rotateX(7deg) rotateY(-9deg) rotate(-3deg) scale(1)}50%{transform:translateY(-10px) rotateX(3deg) rotateY(3deg) rotate(-1.5deg) scale(1.018)}}
@keyframes loading-icon-breathe{0%,100%{translate:0 3px;rotate:-.7deg}50%{translate:3px -5px;rotate:.7deg}}
@keyframes card-breathe{0%,100%{translate:0 0}50%{translate:0 calc(-6*var(--card-unit,1px))}}
@keyframes icon-breathe{0%,100%{translate:0 0;rotate:0deg}50%{translate:calc(3*var(--card-unit,1px)) calc(-7*var(--card-unit,1px));rotate:1.1deg}}


@media(max-width:760px){body{padding:16px 12px;background:#d5d6db}.home-frame{min-height:calc(100svh - 32px);padding-bottom:27px}.site-header{height:80px;margin-inline:7%}.wordmark{font-size:18px}.main-nav{display:none}.header-contact{margin-left:auto;margin-right:22px;font-size:12px}.mobile-menu{display:grid;gap:5px;padding:10px 0 10px 8px}.mobile-menu span{width:19px;height:1px;background:#24292f}.gallery{position:relative;inset:auto;margin-top:17px;height:645px;perspective:1000px}.project-card{left:calc(50% - 140px + (var(--i) - 2.5)*14px);top:calc(8px + var(--i)*95px);width:280px;height:auto;aspect-ratio:1.91;--angle:-18deg;border-radius:20px}.card-copy{padding:23px 22px 20px}.card-title{font-size:23px;letter-spacing:-.7px}.card-link{font-size:10px;gap:7px}.arrow-circle{width:23px;height:23px}.intro{position:relative;inset:auto;display:block;margin:25px 7% 0;pointer-events:auto}.intro h1{font-size:clamp(20px,5.6cqw,34px);letter-spacing:-1px;line-height:1.4}.intro strong{font-size:1.025em;letter-spacing:-.85px}.intro-actions{margin-top:24px;gap:10px}.pill-button{height:45px;padding:0 21px;font-size:12px}.credentials{position:relative;inset:auto;height:auto;margin:33px 7% 0;flex-wrap:wrap;row-gap:14px}.credential-icon{width:39px;height:39px;flex-basis:39px}.credential-icon svg{width:18px;height:18px}.credential-pill{height:44px;min-width:0;width:calc(50% - 39px);font-size:10px}.credentials>.credential-icon:last-of-type{display:none}.field-marquee{height:42px;flex-basis:100%;margin:0}}
@media(max-width:360px){.project-card{width:250px;left:calc(50% - 125px + (var(--i) - 2.5)*11px)}.card-title{font-size:21px}.gallery{height:625px}.intro h1{font-size:6.1cqw}.header-contact{margin-right:12px}.credential-pill{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#intro-canvas{display:none!important}}
@media(prefers-reduced-motion:reduce){.page-loader{display:none!important}.has-motion .site-header,.has-motion .gallery,.has-motion .intro,.has-motion .credentials{visibility:visible!important}}
/* Desktop: one design unit owns card size, spacing, type and animation geometry.
   Wider viewports reveal more of the six-card group without separating its cards. */
@media(min-width:761px){
 .home-frame{--design-frame-width:1131.84375;--design-frame-height:805.5;--design-card-width:349.938;--u:min(calc(100cqw/var(--design-frame-width)),max(.76970825574px,.11111111111vh));min-height:max(89.5vh,620px)}
 .site-header{height:calc(114*var(--u))}
 .wordmark{font-size:max(16px,calc(16*var(--u)));letter-spacing:calc(-1.05*var(--u))}
 .main-nav{gap:max(12px,calc(35*var(--u)))}
 .main-nav button{padding:calc(10*var(--u)) calc(4*var(--u));font-size:max(11px,calc(12*var(--u)));letter-spacing:calc(-.4*var(--u))}
 .header-contact{gap:calc(12*var(--u));font-size:max(11px,calc(12*var(--u)));letter-spacing:calc(-.35*var(--u))}
 .header-contact svg{width:calc(20*var(--u))}
 .gallery{--gallery-top:calc(80*var(--u));--card-unit:var(--u);--row-offset:max(0px,calc((100cqw - 1344*var(--card-unit))/2));--row-y:0px;top:var(--gallery-top);height:calc(485*var(--u))}
 .project-card{--card-width:calc(var(--design-card-width)*var(--card-unit));border-radius:calc(30*var(--card-unit))}
 .card-copy{padding:calc(31*var(--card-unit)) calc(33*var(--card-unit)) calc(28*var(--card-unit))}
 .card-title{font-size:calc(24.4478*var(--card-unit));letter-spacing:calc(-.75*var(--card-unit))}
 .card-link{gap:calc(8*var(--card-unit));font-size:calc(11*var(--card-unit));letter-spacing:calc(-.3*var(--card-unit))}
 .arrow-circle{width:calc(25*var(--card-unit));height:calc(25*var(--card-unit))}
 .arrow-circle svg{width:calc(13*var(--card-unit));height:calc(13*var(--card-unit))}
 .intro{bottom:calc(148*var(--u));gap:calc(18*var(--u))}
 .intro h1{font-size:max(28px,calc(40.7464*var(--u)));letter-spacing:calc(-2.1*var(--u))}
 .intro strong{letter-spacing:calc(-1.8*var(--u))}
 .intro-actions{gap:calc(12*var(--u));padding-bottom:var(--u)}
 .pill-button{gap:calc(10*var(--u));height:max(44px,calc(51*var(--u)));padding:0;font-size:max(11px,calc(12*var(--u)))}
 .pill-button svg{width:calc(17*var(--u));height:calc(17*var(--u))}
 .contact-button{width:max(110px,calc(123*var(--u)))}
 .credentials{bottom:calc(59*var(--u));height:max(40px,calc(51*var(--u)))}
 .credential-icon{width:max(40px,calc(51*var(--u)));flex-basis:max(40px,calc(51*var(--u)))}
 .credential-icon svg{width:calc(22*var(--u));height:calc(22*var(--u))}
 .credential-pill{min-width:calc(178*var(--u));font-size:max(10px,calc(11*var(--u)));letter-spacing:calc(-.3*var(--u))}
}
@media(min-width:761px) and (max-width:900px){
 .intro{display:block}
 .intro-actions{justify-content:flex-end;margin-top:calc(16*var(--u))}
}

/* Commerce retains the orange accent; UC owns the site-wide blue. */
.card-commerce{background:radial-gradient(ellipse at 100% 100%,#ffe9ac 0%,#ffc675 22%,transparent 65%),radial-gradient(ellipse at 0% 100%,#ffd9b755,transparent 35%),linear-gradient(125deg,#ff3924 0%,#ff5727 40%,#ff9b50 76%,#ffdf9c 100%);color:#fff;box-shadow:inset 0 0 10px 2px #ffdfba80,0 15px 45px #f66a1a08}


@media(max-width:760px){.project-card.card-uc .card-title{font-size:20px}.project-card .object-uc{width:42%;right:-8%}}

/* Explicit project shortcut on narrow screens. */
@media(max-width:760px){.mobile-menu{min-height:44px;padding:10px 0 10px 8px;font-size:12px;white-space:nowrap;display:flex;align-items:center}.header-contact{margin-right:16px}}
@media(max-width:760px){.intro-actions{flex-wrap:wrap}}

/* v50: software strip and decorative experience labels. */
.explore-arrow{rotate:90deg}
.credential-icon,.credential-pill{cursor:default;user-select:none;transition:background .2s,box-shadow .2s,scale .2s var(--curve)}
.credential-icon:hover,.credential-pill:hover{background:#fff;box-shadow:inset 0 0 0 1px rgb(32 37 43 / 5%)}
.credential-icon:active,.credential-pill:active{scale:.96;background:#e6e8ee}
.marquee-track{animation-duration:38s}
/* v51: one icon size, one typeface and one monochrome treatment. */
.software-group{display:flex;align-items:center;flex-shrink:0;gap:32px;padding-right:32px}
.software-item{display:inline-flex;align-items:center;flex-shrink:0;gap:8px;white-space:nowrap;color:#444950}
.software-icon{display:block;width:18px;height:18px;object-fit:contain;flex-shrink:0;filter:grayscale(1);opacity:.78}
.software-name{font-family:Figtree,"PingFang SC",sans-serif;font-size:13px;font-weight:500;letter-spacing:-.2px}
@media(min-width:761px){
 .software-group{gap:max(26px,calc(32*var(--u)));padding-right:max(26px,calc(32*var(--u)))}
 .software-item{gap:max(7px,calc(8*var(--u)))}
 .software-icon{width:clamp(16px,calc(18*var(--u)),21px);height:clamp(16px,calc(18*var(--u)),21px)}
 .software-name{font-size:clamp(12px,calc(13*var(--u)),15px)}
}
@media(max-width:760px){.software-group{gap:25px;padding-right:25px}.software-icon{width:17px;height:17px}.software-name{font-size:12px}}

/* v52: Jiang keeps only its small upward hover movement. */
.wordmark{position:relative;translate:0 0;transition:translate .24s var(--curve)}
.wordmark:hover,.wordmark:focus-visible{translate:0 -2px}

/* Local VF fonts, with fixed letter cells to keep proximity from moving the row. */
.intro h1{min-width:0;flex:1;pointer-events:auto}
.intro-actions{flex-shrink:0}
.headline-line[data-proximity-from]{font-optical-sizing:auto;font-variation-settings:"wght" 400}
.intro .headline-line--serif{font-family:"Anthropic Serif",Georgia,serif;font-weight:300;font-variation-settings:"wght" 300;letter-spacing:-.035em;color:var(--brand)}
.proximity-letter{display:inline-block;white-space:pre;text-align:center;vertical-align:baseline}
@media(prefers-reduced-motion:reduce){.wordmark:hover,.wordmark:focus-visible{translate:0 0}}

/* Secondary heading: a little smaller and quieter than the serif line. */
.headline-line[data-proximity-from="400"]{font-size:.94em;opacity:1}

/* Logo Loop behavior on the existing compact software rail. */
.field-marquee.has-logo-loop .marquee-track{animation:none;will-change:transform}
.software-icon{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;transform-origin:center}
@media(hover:hover) and (pointer:fine){.software-item:hover .software-icon{transform:scale(1.18);opacity:1}}

/* A blue gyroscopic arrow. The overlay never receives pointer events. */
.gyro-overlay{position:fixed;inset:0;z-index:2147483647;overflow:clip;pointer-events:none;contain:layout style size;color:var(--brand)}
.gyro-cursor{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;will-change:transform}
.gyro-gimbal{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.gyro-arrow{position:absolute;left:-16.8px;top:-3.6px;width:33.6px;height:38.4px;overflow:visible;filter:drop-shadow(0 1px 2px rgb(20 38 65 / 22%))}
.gyro-ripple{position:absolute;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
.has-gyro-cursor,.has-gyro-cursor *{cursor:none!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.gyro-overlay{display:none}}

/* Keep one complete toolset longer than the viewport, including wide screens. */
.field-marquee.has-logo-loop .software-group{gap:var(--logo-loop-gap,32px);padding-right:var(--logo-loop-gap,32px)}

/* v57: separate the composited surface and three-part floating header. */
.home-frame{border-radius:24px}
.home-surface,.floating-nav{display:none}
@media(prefers-reduced-motion:no-preference){
 .scroll-scene .home-stage{position:relative;min-height:calc(max(89.5vh,620px) + 80vh)}
 .scroll-scene .home-frame{position:sticky;top:5.25vh;overflow:visible;background:none;border-radius:0}
 .scroll-scene .home-surface{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:24px;background:var(--paper);pointer-events:none;transform-origin:center center;will-change:transform}
 .scroll-scene .home-ambient{position:absolute;inset:0;background:radial-gradient(ellipse 450px 220px at 21% 50%,#e0eaff99,transparent 100%),radial-gradient(ellipse 360px 220px at 75% 51%,#e2e8ff88,transparent 100%);pointer-events:none}
 .scroll-scene .site-header{visibility:hidden}
 .scroll-scene .gallery{overflow:visible;clip-path:inset(calc(-1 * var(--gallery-top)) 0 -300px 0)}
 .scroll-scene .floating-nav{position:fixed;top:24px;left:50%;z-index:100;display:flex;align-items:center;justify-content:space-between;width:min(calc(880px * var(--nav-scale,1)),calc(100vw - 64px));height:calc(56px * var(--nav-scale,1));padding:0 calc(24px * var(--nav-scale,1));transform:translateX(-50%);color:var(--ink)}
 .scroll-scene .glass-plate{position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(255,255,255,.16) 55%,rgba(255,255,255,.35));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(120,139,168,.12),0 10px 35px rgba(35,55,90,.14);backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);opacity:0;transform-origin:center}
 .floating-brand{font-size:16px;letter-spacing:-1.05px;font-weight:600;white-space:nowrap}
 .floating-links{display:flex;align-items:center;gap:calc(20px * var(--nav-scale,1));white-space:nowrap}
 .floating-links button{min-height:44px;padding:calc(10px * var(--nav-scale,1)) calc(4px * var(--nav-scale,1));font-size:12px;letter-spacing:-.4px;transition:opacity .2s}
 .floating-links button:hover{opacity:.5}
 .floating-contact{display:flex;align-items:center;gap:calc(12px * var(--nav-scale,1));min-height:44px;font-size:12px;white-space:nowrap}
 .floating-contact svg{width:20px;transition:transform .3s var(--curve)}
 .floating-contact:hover svg{transform:translateX(4px)}
 .floating-brand:hover{translate:0 -2px}
 .floating-mobile{display:none}
 .floating-nav a:focus-visible,.floating-nav button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
 .scroll-scene.scroll-in-motion .project-card[data-idle="true"],.scroll-scene.scroll-in-motion .project-card[data-idle="true"] .project-object{animation-play-state:paused}
 .scroll-scene body{overflow-x:clip}
 #experience,#works,#practice,#visual-work,#contact{scroll-margin-top:96px}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .scroll-scene .home-stage{min-height:0}
 .scroll-scene .home-frame{position:relative;top:auto}
 .scroll-scene .home-surface{border-radius:20px}
 .scroll-scene .gallery{overflow:visible;clip-path:inset(-80px 0 -100px 0)}
 .scroll-scene .floating-nav{width:calc(100vw - 24px);height:52px;padding:0 16px;--nav-scale:1}
 .scroll-scene .glass-plate{border-radius:999px}
 .floating-brand{font-size:18px}
 .floating-links{display:none}
 .floating-contact{margin-left:auto;margin-right:20px}
 .floating-mobile{display:block;font-size:12px;white-space:nowrap;padding:10px 0 10px 8px}
}
@media(max-width:360px) and (prefers-reduced-motion:no-preference){.floating-contact{margin-right:10px}}
@media(max-width:760px){html{overflow-x:clip}}

html.scroll-scene{overflow-x:clip}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .scroll-scene .project-card{transition:translate .45s cubic-bezier(.2,.75,.2,1),scale .45s cubic-bezier(.2,.75,.2,1)}
 .scroll-scene:not(.scroll-in-motion) .project-card:is(:hover,:focus-visible){animation-play-state:paused;scale:1.025}
}

/* v67: retain all six cards while giving the mobile headline more room. */
@media(min-width:901px){.intro h1{font-size:max(30px,calc(43.5*var(--u)))}}
.credential-pill{font-size:14px}
@media(max-width:760px){
 .gallery{height:calc(5 * clamp(70px,21cqw,82px) + 170px);margin-top:12px}
 .project-card{width:min(250px,68cqw);left:calc(50% - min(250px,68cqw)/2 + (var(--i) - 2.5)*6px);top:calc(8px + var(--i)*clamp(70px,21cqw,82px));--angle:-10deg}
 .project-card .card-copy{padding:18px 17px 14px}
 .project-card .card-title,.project-card.card-uc .card-title{font-size:clamp(17px,5.2cqw,20px)}
 .project-card .project-object,.project-card .object-uc{width:40%;right:0;top:8%;bottom:auto}
 .project-card .card-link{font-size:10px}
 .intro{margin-top:16px}
 .credential-pill{font-size:12px}
}
/* Release animation layers and pause decorative breathing outside the hero. */
.home-frame.hero-offscreen .project-card,.home-frame.hero-offscreen .project-object{animation-play-state:paused;will-change:auto}
.home-frame.hero-offscreen .marquee-track,.home-frame.hero-offscreen .home-surface{will-change:auto}

.loader-status{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:13px;color:#555b64}

@media(max-width:760px){.project-card.card-uc .card-title{font-size:clamp(15px,4.6cqw,18px)}.project-card .object-uc{width:32%;right:-9%;top:12%}}

.object-tokenboard{background-image:url("assets/icons-refined/tokenboard.webp?v=v76-1");width:64%;right:-6%;bottom:-10%}
@media(max-width:360px){.credential-pill{font-size:11px;letter-spacing:-.45px;white-space:nowrap}}
/* v78: portrait tablets (e.g. 768×1024). Cards scale to the frame width so the end cards are not cut off,
   and the row moves down into the empty space above the headline. Desktop/landscape and ≤760 untouched. */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
 .gallery{--card-unit:min(var(--u),calc(100cqw/1480));--row-y:calc((max(89.5vh,620px) - 805.5*var(--u))*.56)}
}