:root{--ink:#15312c;--muted:#6d827e;--green:#4ba88c;--blue:#66b8eb;--mint:#daf6e9;--sky:#dcefff;--line:#dcece7;--shadow:0 22px 55px rgba(58,112,101,.11);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#fff}body{margin:0;min-width:320px;background:#fff;color:var(--ink);overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.page{min-height:100vh;animation:pageIn .75s cubic-bezier(.2,.75,.2,1) both}.shell{width:min(1180px,88vw);margin:auto}.top{position:fixed;z-index:50;top:18px;left:50%;transform:translateX(-50%)}.nav{display:flex;gap:3px;padding:5px;border:1px solid #fff;border-radius:99px;background:#ffffff9e;box-shadow:0 12px 34px #658f8517,inset 0 1px #fff;backdrop-filter:blur(16px) saturate(145%)}.nav a{padding:9px 15px;border-radius:99px;font-size:12px;font-weight:800;transition:transform .25s,background .25s,color .25s}.nav a:hover{transform:translateY(-2px);background:#f5fffb;color:#268871}.nav a.active{background:#fff;color:#177d68;box-shadow:0 5px 15px #629c8c1b}.transition-layer{position:fixed;z-index:100;inset:0;pointer-events:none;background:linear-gradient(120deg,#e8fbf2,#fff 48%,#e5f4ff);transform:translateY(101%);transition:transform .52s cubic-bezier(.7,0,.2,1)}body.is-leaving .transition-layer{transform:translateY(0)}
.hero{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 46% 45% at 5% 94%,#e2f9ee,transparent 72%),radial-gradient(ellipse 44% 42% at 92% 5%,#ddf1ff,transparent 74%),linear-gradient(115deg,#fff,#fbfffd 52%,#fafdff)}.hero:after,.soft-page:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}.identity{position:absolute;z-index:2;top:50%;left:clamp(44px,14.7vw,280px);width:min(430px,40vw);transform:translateY(-43%)}.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #dbeef1;border-radius:99px;background:#ffffff91;box-shadow:0 7px 20px #75a59a0c;font-size:11px;font-weight:800;letter-spacing:.06em;color:#598c88}.identity h1{margin:20px 0 0;font-size:clamp(62px,6.8vw,108px);line-height:.83;letter-spacing:-.1em;color:#101d1b}.roman{margin:12px 0 0;color:#60ade8;font-size:15px;font-weight:800;letter-spacing:.28em}.role{margin:28px 0 0;color:#637975;font-size:18px;line-height:1.55}.identity p{margin:17px 0 0;color:#748784;font-size:15px;line-height:1.8}.actions{display:flex;gap:12px;margin-top:28px}.button{display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:99px;background:#14252f;color:white;font-size:13px;font-weight:800;box-shadow:0 10px 22px #183e4927;transition:.27s}.button.alt{border:1px solid #e2ece9;background:#ffffffb5;color:#33534d;box-shadow:none}.button:hover{transform:translateY(-3px);box-shadow:0 16px 28px #245a6030}.button.alt:hover{color:#25846f;background:#fff}.clock-zone{position:absolute;z-index:2;top:50%;left:72.5%;width:min(31vw,460px);aspect-ratio:1;transform:translate(-50%,-50%)}.orbit{position:absolute;inset:8%;border:1px solid #bfe7f67c;border-radius:50%;box-shadow:0 0 0 20px #e5f5ff61,0 0 0 48px #e5f9f461,0 0 70px #def3ff}.orbit:before,.orbit:after{content:"";position:absolute;inset:0;border:1px solid #c5e9f778;border-radius:50%;transform:rotate(31deg) scaleY(.46)}.orbit:after{transform:rotate(-18deg) scaleY(.64)}.clock{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,#ffffffd1 0 57%,#edfdfab0 58% 71%,transparent 72%);box-shadow:0 0 0 1px #c8ebf878,0 0 30px #e4f8ff;transition:.35s}.clock:hover{transform:scale(1.04);box-shadow:0 0 42px #c8edf6,0 0 0 6px #e2faf47a}.tick{position:absolute;top:8%;left:50%;width:1.5px;height:7px;border-radius:5px;background:#5ca7a0;transform-origin:50% 102px}.hand{position:absolute;left:50%;bottom:50%;width:4px;border-radius:99px;background:linear-gradient(#55b6e7,#278e79);transform-origin:50% 100%;z-index:2}.hour{height:22%;margin-left:-2px}.minute{height:33%;margin-left:-2px}.second{height:35%;width:1.5px;margin-left:-.75px;background:#70bfee}.pin{position:absolute;z-index:3;top:50%;left:50%;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#44a48f;transform:translate(-50%,-50%)}.time{position:absolute;z-index:4;top:70%;left:0;right:0;text-align:center;font-size:12px;font-weight:800;color:#438b84}.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#61b9ee;box-shadow:0 0 14px #70c7f6}.d1{top:4%;left:49%}.d2{top:24%;right:1%}.d3{bottom:14%;left:15%}.d4{bottom:2%;right:27%}.zone-note{position:absolute;right:7%;bottom:12%;color:#738a87;text-align:center;font-size:13px;font-weight:800;line-height:1.55}.zone-note small{display:block;color:#adb9b8;font-weight:600}.micro{position:absolute;color:#a9ceca;font-size:10px;letter-spacing:.13em}.m1{right:15%;top:22%}.m2{left:48%;bottom:17%}.m3{right:39%;bottom:28%}.scroll{position:absolute;z-index:2;bottom:34px;left:50%;transform:translateX(-50%);color:#a6b5b4;font-size:10px;letter-spacing:.14em}.scroll:before{content:"";display:inline-block;width:29px;height:1px;margin:0 8px 3px 0;background:#a6b5b4}
.section{position:relative;padding:118px 0;background:#fff}.section.tint{background:radial-gradient(circle at 90% 12%,#e5f4ff 0,transparent 28%),linear-gradient(135deg,#f7fffb,#fff 58%)}.split{display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start}.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#378d7a}.title{margin:12px 0 0;font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-.08em}.title span{color:#7f9e99}.lead{margin:0;color:#5f7772;font-size:18px;line-height:1.75}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:48px}.metric,.skill,.project-card,.contact-card{position:relative;overflow:hidden;border:1px solid #e7f0ed;border-radius:23px;background:linear-gradient(145deg,#fff,#eefaf5 65%,#edf7ff);box-shadow:var(--shadow);transition:transform .35s,box-shadow .35s}.metric:before,.skill:before,.project-card:before,.contact-card:before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-70px;top:-70px;background:linear-gradient(135deg,#d7f7e6,#d9efff);opacity:.75}.metric{min-height:155px;padding:22px}.metric:hover,.skill:hover,.project-card:hover,.contact-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(52,113,101,.17)}.metric b{display:block;margin-top:25px;color:#298d78;font-size:33px;letter-spacing:-.07em}.metric span{font-size:13px;font-weight:750}.work-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.work-head .lead{max-width:450px;font-size:15px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:47px}.project-card{min-height:410px}.project-card:nth-child(2n){background:linear-gradient(145deg,#fff,#f1fbff 61%,#e7f8ef)}.project-img{height:265px;overflow:hidden}.project-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.project-card:hover img{transform:scale(1.07)}.project-copy{position:relative;padding:21px}.project-copy small{color:#3f9a87;font-size:10px;font-weight:800;letter-spacing:.1em}.project-copy h3{margin:8px 0 0;font-size:22px;letter-spacing:-.05em}.project-copy p{margin:9px 0 0;color:#71827f;font-size:13px;line-height:1.55}.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:45px}.skill{min-height:185px;padding:23px}.skill i{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#ddf8e9,#dcefff);color:#2f8d79;font-style:normal;font-size:19px}.skill h3{margin:23px 0 7px;font-size:18px}.skill p{margin:0;color:#748582;font-size:12px;line-height:1.6}.cta{padding:115px 0;text-align:center;background:radial-gradient(circle at 12% 85%,#c6f2dd,transparent 30%),radial-gradient(circle at 88% 10%,#caeaff,transparent 32%),linear-gradient(125deg,#f9fffc,#f9fdff)}.cta .title{max-width:780px;margin:15px auto 0}.page-hero{position:relative;padding:175px 0 90px;overflow:hidden;background:radial-gradient(circle at 7% 70%,#e1f8ec,transparent 35%),radial-gradient(circle at 90% 5%,#e0f1ff,transparent 36%),#fff}.page-hero .title{max-width:830px}.page-hero .lead{max-width:650px;margin-top:28px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:265px;gap:17px}.gallery-item{overflow:hidden;border-radius:22px;background:linear-gradient(145deg,#e4f8ef,#e5f2ff);box-shadow:var(--shadow);transition:.35s}.gallery-item:nth-child(4n+1){grid-row:span 2}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .75s}.gallery-item:hover{transform:translateY(-7px)}.gallery-item:hover img{transform:scale(1.07)}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}.contact-card{min-height:180px;padding:26px}.contact-card small{color:#5e9188}.contact-card h3{margin:28px 0 0;font-size:19px}.contact-card p{margin:7px 0 0;color:#758783;font-size:13px}footer{padding:25px 5%;display:flex;justify-content:space-between;background:#14322d;color:#cbeae0;font-size:11px}.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}.js .reveal.show{opacity:1;transform:none}@keyframes pageIn{from{opacity:0;filter:blur(8px);transform:translateY(12px)}to{opacity:1;filter:none;transform:none}}
@media(max-width:820px){.shell{width:90vw}.nav a{padding:8px 10px}.hero{min-height:820px}.identity{top:55%;left:8%;width:76vw}.identity h1{font-size:76px}.clock-zone{top:28%;left:74%;width:55vw;opacity:.72}.zone-note,.micro{display:none}.split{grid-template-columns:1fr;gap:34px}.metrics,.skills{grid-template-columns:repeat(2,1fr)}.project-grid,.contact-grid{grid-template-columns:1fr}.work-head{align-items:start;flex-direction:column}.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}.section{padding:82px 0}.page-hero{padding:145px 0 72px}footer{gap:8px;flex-direction:column}}

/* Faster navigation and richer interaction layer */
.page{animation-duration:.42s}.transition-layer{transition-duration:.24s}.project-card[data-category]{cursor:zoom-in}.project-card[data-category] .project-copy:after{content:"点击查看完整画面  ↗";display:block;margin-top:14px;color:#4d9788;font-size:10px;font-weight:800;letter-spacing:.04em}.filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin:40px 0 0}.filter-bar button{padding:10px 16px;border:1px solid #dcece7;border-radius:99px;background:linear-gradient(135deg,#fff,#eefaf5);color:#55736d;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.25s}.filter-bar button:hover,.filter-bar button.active{color:#147963;border-color:#bfe4d7;background:linear-gradient(135deg,#e9faf2,#edf8ff);transform:translateY(-2px);box-shadow:0 8px 20px #5e9a8b1d}.project-card.filtered{display:none}.viewer{position:fixed;z-index:200;inset:0;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}.viewer.open{visibility:visible;opacity:1}.viewer-backdrop{position:absolute;inset:0;background:rgba(12,30,27,.56);backdrop-filter:blur(15px)}.viewer-dialog{position:relative;width:min(94vw,1380px);min-height:min(82vh,760px);display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.65fr);overflow:hidden;border:1px solid #ffffffb8;border-radius:28px;background:linear-gradient(135deg,#fafffd,#f7fcff);box-shadow:0 40px 100px #0f302a55;transform:translateY(22px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.viewer.open .viewer-dialog{transform:none}.viewer-media{min-width:0;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 18% 82%,#dff8eb,transparent 34%),radial-gradient(circle at 82% 13%,#dcefff,transparent 35%),#f8fcfa}.viewer-media img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 36px #315f5530)}.viewer-info{position:relative;padding:54px 35px 35px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid #e1eeea;background:linear-gradient(145deg,#ffffffec,#effaf5dd 62%,#eef7ff)}.viewer-info small{color:#37917d;font-size:10px;font-weight:800;letter-spacing:.12em}.viewer-info h2{margin:14px 0 0;font-size:clamp(28px,3vw,45px);line-height:1;letter-spacing:-.07em}.viewer-info p{margin:24px 0 0;color:#627873;font-size:14px;line-height:1.8}.viewer-hint{margin-top:35px;padding-top:16px;border-top:1px solid #dce9e5;color:#94a6a2;font-size:10px;letter-spacing:.08em}.viewer-close{position:absolute;z-index:3;top:18px;right:18px;width:38px;height:38px;border:1px solid #d6e8e2;border-radius:50%;background:#ffffffc9;color:#325b53;font-size:24px;line-height:1;cursor:pointer;transition:.25s}.viewer-close:hover{transform:rotate(90deg);background:#e8f8f2}.viewer-open{overflow:hidden}

/* Works page: preserve every image's native aspect ratio */
.gallery{display:block;column-count:3;column-gap:18px}.gallery-item,.gallery-item:nth-child(4n+1){display:inline-block;width:100%;height:auto;grid-row:auto;margin:0 0 18px;break-inside:avoid;cursor:zoom-in}.gallery-item img{width:100%;height:auto;object-fit:contain}.gallery-item:after{content:"放大  ↗";position:absolute;right:14px;bottom:14px;padding:7px 10px;border:1px solid #ffffffa6;border-radius:99px;background:#ffffffa8;color:#285f55;font-size:10px;font-weight:800;opacity:0;transform:translateY(5px);backdrop-filter:blur(8px);transition:.25s}.gallery-item{position:relative}.gallery-item:hover:after{opacity:1;transform:none}

@media(max-width:820px){.gallery{display:block;column-count:2}.viewer-dialog{width:92vw;max-height:90vh;display:flex;flex-direction:column}.viewer-media{min-height:54vh;padding:18px}.viewer-media img{max-height:52vh}.viewer-info{padding:25px;border-left:0;border-top:1px solid #e1eeea}.viewer-info p{margin-top:14px}.viewer-hint{display:none}}
@media(max-width:520px){.gallery{column-count:1}.viewer-dialog{border-radius:20px}.filter-bar{margin-top:28px}}

/* 2026 performance + interaction pass */
@view-transition{navigation:auto}
::view-transition-old(root){animation:routeOut .14s ease both}
::view-transition-new(root){animation:routeIn .22s ease-out both}
@keyframes routeOut{to{opacity:.25;transform:translateY(-3px)}}
@keyframes routeIn{from{opacity:.2;transform:translateY(7px)}}

.page{animation:pageInFast .22s ease-out both}
@keyframes pageInFast{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.transition-layer{display:none!important}
.section{content-visibility:auto;contain-intrinsic-size:720px}
.shell{width:min(1540px,94vw)}

/* Wider, more complete compositions without filling the canvas with heavy media. */
.section:before{content:"ENGINE ART  /  2026";position:absolute;z-index:0;left:13px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);color:#9cc8bf;font-size:8px;font-weight:800;letter-spacing:.24em}
.section:after{content:"●  MATERIAL  ·  LIGHT  ·  MOTION";position:absolute;z-index:0;right:13px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);color:#a9ced5;font-size:8px;letter-spacing:.17em}
.section>.shell{position:relative;z-index:1}
.page-hero{min-height:490px}
.page-hero:before{content:"";position:absolute;right:5vw;top:35px;width:340px;height:340px;border:1px solid #c9ede45e;border-radius:50%;box-shadow:0 0 0 34px #e9f9f363,0 0 0 72px #eaf5ff4a}
.page-hero:after{content:"";position:absolute;right:12vw;top:118px;width:160px;height:160px;border:1px solid #c4e6f166;border-radius:50%;background:radial-gradient(circle,#fff 0 44%,#e7faf367 45% 70%,transparent 71%)}
.page-hero .shell{position:relative;z-index:1}
.page-hero .title{max-width:980px}
.page-hero .lead{max-width:790px}
.hero-specs{position:absolute;right:0;top:3px;display:grid;grid-template-columns:auto auto;gap:10px 16px;min-width:245px;padding:23px 25px;border:1px solid #dcece7;border-radius:22px;background:linear-gradient(145deg,#ffffffb8,#eefaf58c 62%,#eef7ff8c);box-shadow:0 18px 55px #47796f0d;backdrop-filter:blur(8px)}
.hero-specs b{color:#2f8e7a;font-size:17px;line-height:1}.hero-specs span{align-self:center;color:#78908b;font-size:8px;font-weight:800;letter-spacing:.13em}
.split{grid-template-columns:.9fr 1.35fr;gap:6vw}
.work-head .lead{max-width:560px}

/* Navigation: direction-aware reveal with a fine gold wire during the transition. */
.top{will-change:transform,opacity;transition:opacity .32s ease,transform .4s cubic-bezier(.2,.78,.2,1),filter .32s}
.top.nav-hidden{opacity:0;transform:translate(-50%,-18px);pointer-events:none;filter:blur(3px)}
.nav{position:relative;transition:border-color .45s,box-shadow .45s}
.nav:after{content:"";position:absolute;pointer-events:none;inset:-1px;border-radius:inherit;border:1px solid transparent;background:linear-gradient(105deg,transparent 15%,#c9a65b 47%,#f0d58d 53%,transparent 85%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scaleX(.6);transition:.5s}
.top.nav-gold .nav{border-color:#d7bc7c7a;box-shadow:0 13px 40px #96753a18,inset 0 1px #fff}
.top.nav-gold .nav:after{opacity:.72;transform:scaleX(1)}

/* Each visible clock layer reacts as one system. */
.clock-zone{cursor:default}
.orbit,.orbit:before,.orbit:after,.clock,.dot{transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s,opacity .65s}
.clock-zone:hover .orbit{transform:rotate(9deg) scale(1.035);box-shadow:0 0 0 24px #e5f5ff76,0 0 0 54px #e5f9f475,0 0 85px #caecff}
.clock-zone:hover .orbit:before{transform:rotate(43deg) scaleY(.53)}
.clock-zone:hover .orbit:after{transform:rotate(-31deg) scaleY(.7)}
.clock-zone:hover .clock{transform:rotate(-2deg) scale(1.055);box-shadow:0 0 48px #c8edf6,0 0 0 7px #e2faf48f}
.clock-zone:hover .d1{transform:translateY(-12px) scale(1.45)}
.clock-zone:hover .d2{transform:translateX(12px) scale(1.45)}
.clock-zone:hover .d3{transform:translate(-9px,8px) scale(1.45)}
.clock-zone:hover .d4{transform:translate(7px,11px) scale(1.45)}

/* All cards preserve artwork proportions; thumbnails use contain rather than crop. */
.project-img{height:auto;aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,#f1faf6,#edf7ff)}
.project-img img{width:100%;height:100%;object-fit:contain}
.project-card{min-height:0}
.gallery-item:after{content:"↗";display:grid;place-items:center;width:30px;height:30px;padding:0}
.archive-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.archive-head h2{margin:8px 0 0;font-size:clamp(28px,3vw,46px);letter-spacing:-.06em}
.archive-head p{margin:0;color:#78908b;font-size:12px}

/* On-demand panorama / future realtime-media surface. */
.interactive-lab{background:radial-gradient(circle at 3% 90%,#dff8eb,transparent 30%),radial-gradient(circle at 96% 8%,#e1f1ff,transparent 30%),#fff}
.experience-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:48px}
.experience-card{position:relative;min-height:360px;overflow:hidden;padding:30px;border:1px solid #deebe7;border-radius:28px;background:linear-gradient(135deg,#effbf6,#fff 48%,#eaf5ff);box-shadow:var(--shadow);color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.experience-card:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(9,31,27,.76));opacity:.92}
.experience-card:hover{transform:translateY(-9px);box-shadow:0 32px 70px #326f641f}
.experience-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.experience-card:hover img{transform:scale(1.035)}
.experience-index,.experience-card strong,.experience-card>small{position:absolute;z-index:2;left:30px;color:#fff}
.experience-index{top:28px;padding:7px 10px;border:1px solid #ffffff7d;border-radius:99px;background:#ffffff1d;font-size:9px;font-weight:800;letter-spacing:.14em;backdrop-filter:blur(9px)}
.experience-card strong{bottom:62px;font-size:clamp(27px,3vw,45px);letter-spacing:-.05em}
.experience-card>small{bottom:33px;font-size:11px;opacity:.75}
.ue-card{background:radial-gradient(circle at 70% 27%,#9bd7ff 0,transparent 27%),radial-gradient(circle at 22% 83%,#a9efd0 0,transparent 32%),linear-gradient(135deg,#17463e,#173743);color:#fff}
.ue-card:before{background:linear-gradient(145deg,transparent,#0f2b2a77)}
.ue-orb{position:absolute;z-index:0;right:12%;top:13%;display:grid;place-items:center;width:190px;height:190px;border:1px solid #ffffff6b;border-radius:50%;box-shadow:0 0 0 22px #ffffff0e,0 0 0 48px #ffffff0a;color:#fff;font-size:52px;font-weight:800;letter-spacing:-.08em;transition:.7s}
.ue-card:hover .ue-orb{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 0 28px #ffffff16,0 0 0 58px #ffffff0d}

/* Flexible viewer: glass, gradient and scale all arrive in the same motion. */
.viewer{transition:opacity .62s ease,visibility 0s linear .72s}
.viewer.open{transition:opacity .62s ease,visibility 0s}
.viewer-backdrop{background:rgba(12,30,27,0);backdrop-filter:blur(0);transition:background .62s ease,backdrop-filter .62s ease}
.viewer.open .viewer-backdrop{background:rgba(12,30,27,.56);backdrop-filter:blur(13px)}
.viewer-dialog{opacity:.12;transform:translateY(44px) scale(.76);transform-origin:50% 50%;transition:opacity .68s ease,transform .68s cubic-bezier(.16,.82,.2,1);will-change:transform,opacity}
.viewer-dialog:before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 14% 90%,#dff8ebad,transparent 38%),radial-gradient(circle at 76% 4%,#dcefff9c,transparent 38%);opacity:0;transform:scale(.8);transition:opacity .68s,transform .68s cubic-bezier(.16,.82,.2,1);pointer-events:none}
.viewer.open .viewer-dialog{opacity:1;transform:none}
.viewer.open .viewer-dialog:before{opacity:1;transform:scale(1)}
.viewer-media,.viewer-info{z-index:1}
.viewer-media{position:relative;overflow:hidden}
.viewer-image[hidden],.viewer-frame[hidden],.viewer-video[hidden],.viewer-placeholder[hidden]{display:none}
.viewer-frame,.viewer-video{width:100%;height:100%;min-height:70vh;border:0;border-radius:17px;background:#eef7f4}
.viewer[data-mode="embed"] .viewer-dialog{width:min(96vw,1660px);grid-template-columns:minmax(0,1fr) 310px}
.viewer[data-mode="embed"] .viewer-media{padding:18px}
.viewer[data-mode="embed"] .viewer-frame{min-height:78vh}
.viewer-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(560px,100%);aspect-ratio:16/10;border:1px solid #c8e8df;border-radius:28px;background:radial-gradient(circle at 30% 72%,#bcefd7,transparent 35%),radial-gradient(circle at 74% 28%,#bde5ff,transparent 36%),#f8fffc;box-shadow:inset 0 0 70px #fff}
.viewer-placeholder span{font-size:clamp(80px,11vw,160px);font-weight:850;letter-spacing:-.12em;color:#2b8876}.viewer-placeholder small{color:#63978c;font-size:10px;font-weight:800;letter-spacing:.22em}
.viewer.auto-preview .viewer-dialog{box-shadow:0 40px 100px #0f302a55,0 0 0 2px #d4b96d99}

.contact-intro{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:end;margin-bottom:36px}
.contact-intro h2{margin:10px 0 0;font-size:clamp(35px,4.5vw,66px);line-height:1;letter-spacing:-.07em}.contact-intro p{margin:0;color:#647c77;font-size:16px;line-height:1.8}

@media(max-width:980px){.hero-specs{display:none}.experience-grid{grid-template-columns:1fr}.page-hero:before,.page-hero:after{opacity:.55}.section:before,.section:after{display:none}.shell{width:90vw}.contact-intro{grid-template-columns:1fr;gap:24px}}
@media(max-width:820px){.section{content-visibility:visible}.experience-card{min-height:290px}.archive-head{align-items:start;flex-direction:column}.viewer[data-mode="embed"] .viewer-dialog{width:94vw}.viewer-frame,.viewer-video,.viewer[data-mode="embed"] .viewer-frame{min-height:55vh}.clock-zone:hover .orbit,.clock-zone:hover .clock{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Interaction refinement: responsive routes, whole-card hover and progressive focus. */
@view-transition{navigation:none}
.page,.page.route-ready{animation:none}
.hero:after,.soft-page:after{display:none}
.section{content-visibility:visible;contain:none}
.page-hero .reveal{opacity:1!important;transform:none!important;transition:none!important}
.js .reveal{transition-duration:.42s}

.gallery-item{z-index:1;transform-origin:50% 50%;will-change:transform;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s}
.gallery-item:hover{z-index:6;transform:translateY(-8px) scale(1.028);box-shadow:0 30px 72px rgba(40,93,83,.2)}
.gallery-item img,.gallery-item:hover img{transform:none}
.project-card[data-category]{transform-origin:50% 50%;will-change:transform}
.project-card[data-category]:hover{z-index:4;transform:translateY(-8px) scale(1.018)}
.project-card[data-category] img,.project-card[data-category]:hover img{transform:none}

/* The final dialog bounds exist from frame one, so clicks register while the
   visible surface is still growing. Blur and dimming interpolate together. */
.viewer{opacity:1;visibility:hidden;pointer-events:none;transition:visibility 0s linear .4s}
.viewer.open{opacity:1;visibility:visible;pointer-events:auto;transition:visibility 0s}
.viewer-backdrop{opacity:0;background:rgba(12,30,27,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);will-change:opacity,backdrop-filter;transition:opacity .38s ease,background .38s ease,backdrop-filter .38s cubic-bezier(.2,.72,.2,1),-webkit-backdrop-filter .38s cubic-bezier(.2,.72,.2,1)}
.viewer.open .viewer-backdrop{opacity:1;background:rgba(12,30,27,.52);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.viewer-dialog{position:relative;width:min(94vw,1380px);min-height:min(82vh,760px);display:block;overflow:visible;border:0;border-radius:28px;background:transparent;box-shadow:none;opacity:1;transform:none;transition:none;pointer-events:auto}
.viewer-dialog:before{display:none}
.viewer-surface{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.65fr);overflow:hidden;border:1px solid #ffffffd1;border-radius:28px;background:linear-gradient(135deg,#fafffd,#f7fcff);box-shadow:0 40px 100px #0f302a55;transform:translateY(24px) scale(.84);transform-origin:50% 50%;will-change:transform;transition:transform .36s cubic-bezier(.16,.82,.2,1)}
.viewer-surface:before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 14% 90%,#dff8ebad,transparent 38%),radial-gradient(circle at 76% 4%,#dcefff9c,transparent 38%);pointer-events:none}
.viewer.open .viewer-surface{transform:none}
.viewer-media,.viewer-info{position:relative;z-index:1}
.viewer-close{z-index:5}
.viewer[data-mode="embed"] .viewer-dialog{width:min(96vw,1660px);grid-template-columns:none}
.viewer[data-mode="embed"] .viewer-surface{grid-template-columns:minmax(0,1fr) 310px}
.viewer.auto-preview .viewer-surface{box-shadow:0 40px 100px #0f302a55,0 0 0 2px #d4b96d99}

@media(max-width:820px){.viewer-dialog,.viewer[data-mode="embed"] .viewer-dialog{width:94vw;min-height:90vh;display:block;max-height:none}.viewer-surface,.viewer[data-mode="embed"] .viewer-surface{display:flex;flex-direction:column}.viewer-media{min-height:55vh}.viewer-info{flex:1}.gallery-item:hover{transform:translateY(-5px) scale(1.015)}}

/* Stable close motion and uncropped, ratio-preserving artwork previews. */
html{scrollbar-gutter:stable}
.viewer-dialog{height:min(82vh,760px);min-height:0}
.viewer-surface{height:100%}
.viewer-media{height:100%;min-height:0;overflow:hidden}
.viewer-media img{max-width:100%;max-height:calc(100% - 56px);width:auto;height:auto;object-fit:contain}
.viewer-info{min-height:0;overflow:auto}
.viewer[data-mode="embed"] .viewer-dialog{height:min(88vh,860px)}
.viewer[data-mode="embed"] .viewer-frame{height:100%;min-height:0}

/* A brighter warm-yellow filament keeps the navigation readable on white. */
.nav:after{background:linear-gradient(105deg,transparent 12%,#ffd34e 42%,#fff3a0 52%,#ffd34e 62%,transparent 88%) border-box}
.top.nav-gold .nav{border-color:rgba(255,211,78,.95);box-shadow:0 13px 40px rgba(255,202,56,.20),inset 0 1px #fff}
.top.nav-gold .nav:after{opacity:1}

@media(max-width:820px){.viewer-dialog,.viewer[data-mode="embed"] .viewer-dialog{height:90vh;min-height:0}.viewer-media{height:55vh;min-height:55vh;flex:0 0 55vh}.viewer-media img{max-height:calc(55vh - 36px)}}

/* Final stability pass: one lightweight, symmetric viewer animation. */
.nav{border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(55,91,82,.06);backdrop-filter:blur(10px) saturate(125%);transition:border-color .16s ease,box-shadow .16s ease}
.nav:after,.top.nav-gold .nav:after{display:none}
.top,.top.nav-hidden{opacity:1;transform:translateX(-50%);filter:none;pointer-events:auto}
.top.nav-gold .nav{border-color:rgba(219,174,53,.82);box-shadow:0 8px 24px rgba(110,88,33,.08)}

.viewer{visibility:hidden;opacity:1;pointer-events:none;transition:visibility 0s linear .28s}
.viewer.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.viewer-backdrop,.viewer.open .viewer-backdrop{background:rgba(12,30,27,.48);backdrop-filter:blur(10px) saturate(112%)!important;-webkit-backdrop-filter:blur(10px) saturate(112%)!important;transition:opacity .26s ease}
.viewer-backdrop{opacity:0}
.viewer.open .viewer-backdrop{opacity:1}
.viewer-surface{opacity:0;transform:translateY(18px) scale(.92);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.72,.2,1)}
.viewer.open .viewer-surface{opacity:1;transform:translateY(0) scale(1)}
.viewer-media{overflow:hidden;padding:28px}
.viewer[data-mode="image"] .viewer-media{position:relative}
.viewer[data-mode="image"] .viewer-image{position:absolute;inset:28px;width:calc(100% - 56px)!important;height:calc(100% - 56px)!important;min-width:0;min-height:0;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center center}
.viewer-media.is-loading:after{content:"";width:28px;height:28px;border:2px solid #b8dcd2;border-top-color:#2d8b76;border-radius:50%;animation:viewerSpin .7s linear infinite}
@keyframes viewerSpin{to{transform:rotate(360deg)}}

@media(max-width:820px){.viewer-media{padding:18px}.viewer[data-mode="image"] .viewer-image{inset:18px;width:calc(100% - 36px)!important;height:calc(100% - 36px)!important}}