:root{--navy:#0b2844;--blue:#4b9ed3;--pale-blue:#dff3ff;--mint:#dff4e6;--white:#fff;--line:rgba(255,255,255,.5);--serif-cn:"Noto Serif SC","Songti SC",serif;--serif-en:"Cormorant Garamond",Georgia,serif;--mx:0px;--my:0px;--radius:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);background:#f8fcff;font-family:var(--serif-cn);overflow-x:hidden}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{color:inherit}
.site-header{position:fixed;z-index:30;inset:0 0 auto;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4.5vw,74px);color:#fff;border-bottom:1px solid rgba(255,255,255,.38);transition:color .35s,background .35s,border-color .35s}.site-header.scrolled{color:var(--navy);background:rgba(244,251,255,.88);border-color:rgba(11,40,68,.12);backdrop-filter:blur(18px)}.brand,.top-actions{display:flex;align-items:center}.brand{gap:12px;font:600 12px/1 var(--serif-en);letter-spacing:.2em}.brand-orbit{position:relative;display:block;width:34px;height:34px;border:1px solid currentColor;border-radius:50%}.brand-orbit:after{content:"";position:absolute;inset:14px -5px;border-top:1px solid currentColor;transform:rotate(-22deg)}.brand-orbit i{position:absolute;width:5px;height:5px;right:1px;top:5px;border-radius:50%;background:currentColor}.top-actions{gap:10px}.nav-button{padding:10px 15px;color:inherit;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);cursor:pointer;transition:transform .25s,background .25s}.scrolled .nav-button{border-color:rgba(11,40,68,.16);background:rgba(255,255,255,.74)}.nav-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.26)}.nav-button span{margin-left:4px;opacity:.72;font:500 13px var(--serif-en)}.nav-button--filled{color:var(--navy);background:rgba(255,255,255,.92)}
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;background:#76bce7}.hero-scene{position:absolute;z-index:-5;inset:-10px;overflow:hidden;transform:translate3d(var(--mx),var(--my),0);transition:transform .8s cubic-bezier(.16,1,.3,1)}.scene-fill{position:absolute;inset:-5%;background:url("assets/hero-sky-v2-1920.webp") center/cover no-repeat;filter:blur(18px) saturate(1.04);transform:scale(1.08);opacity:.96}.scene-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;animation:scene-drift 15s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}.scene-horizon{position:absolute;inset:-2.5%;background:url("assets/hero-sky-v2-1920.webp") center/contain no-repeat;opacity:.19;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(to bottom,transparent 48%,#000 68%);mask-image:linear-gradient(to bottom,transparent 48%,#000 68%);animation:horizon-drift 11s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}.cloud-veil{position:absolute;left:-38%;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.3);filter:blur(38px);will-change:transform,opacity}.cloud-veil--far{top:26%;width:52%;height:13%;opacity:.48;animation:cloud-cross 28s linear infinite}.cloud-veil--near{top:51%;width:68%;height:19%;opacity:.28;animation:cloud-cross 39s linear -19s infinite}.hero-shade{position:absolute;z-index:-3;inset:0;background:linear-gradient(180deg,rgba(13,67,114,.2),transparent 25%,rgba(228,247,255,.04) 56%,rgba(8,50,88,.32))}
.hero-copy{position:absolute;z-index:2;top:23%;left:50%;width:min(700px,50vw);text-align:center;transform:translateX(-50%);color:#fff;text-shadow:0 2px 30px rgba(3,42,75,.34)}.eyebrow{margin:0 0 12px;font:600 11px/1.4 var(--serif-en);letter-spacing:.23em}h1,h2,p{margin-top:0}h1{margin:0;font-weight:400;animation:reveal-up .9s .18s both}.name-cn{display:block;font-size:clamp(56px,6.8vw,104px);line-height:1;letter-spacing:.08em}.name-en{display:block;margin-top:8px;font:500 clamp(18px,2vw,30px)/1 var(--serif-en);letter-spacing:.38em}.welcome{margin:18px 0 0;font-size:clamp(15px,1.35vw,20px);letter-spacing:.1em;animation:reveal-up .9s .34s both}.welcome span{display:block;margin-top:7px;font:500 clamp(15px,1.3vw,19px)/1.2 var(--serif-en);letter-spacing:.06em}
.hero-cards{position:absolute;z-index:4;left:50%;bottom:clamp(24px,4.8vh,52px);width:min(1050px,82vw);display:grid;grid-template-columns:1.04fr 1.1fr .96fr;gap:clamp(12px,1.5vw,22px);transform:translateX(-50%)}.hero-card{--spot-x:50%;--spot-y:50%;position:relative;min-height:clamp(112px,16vh,160px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(17px,2vw,27px);isolation:isolate;color:#fff;border:0;border-radius:var(--radius);background:linear-gradient(145deg,rgba(235,249,255,.2),rgba(209,241,244,.08));box-shadow:0 18px 48px rgba(8,54,88,.2),inset 0 1px 0 rgba(255,255,255,.34);backdrop-filter:blur(11px) saturate(1.12);-webkit-backdrop-filter:blur(11px) saturate(1.12);animation:card-in .8s var(--delay,.58s) both;transition:transform .38s cubic-bezier(.16,1,.3,1),background .25s,color .25s,box-shadow .35s}.hero-card:nth-child(2){--delay:.68s}.hero-card:nth-child(3){--delay:.78s}.hero-card:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(230px circle at var(--spot-x) var(--spot-y),rgba(232,255,244,.68),rgba(231,249,255,.26) 34%,transparent 72%);opacity:0;transition:opacity .18s}.hero-card:after{content:"";position:absolute;z-index:2;inset:-3px;padding:3px;border-radius:calc(var(--radius) + 3px);background:radial-gradient(105px circle at var(--spot-x) var(--spot-y),#f4fff9 0,rgba(170,239,219,.98) 24%,rgba(215,248,255,.5) 52%,transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none;transition:opacity .16s,filter .2s}.hero-card:hover,.hero-card:focus-visible{transform:translateY(-6px) scale(1.022);color:var(--navy);background:rgba(239,252,255,.72);box-shadow:0 25px 58px rgba(7,60,98,.27),inset 0 1px 0 rgba(255,255,255,.8);outline:2px solid transparent;outline-offset:4px}.hero-card:hover:before,.hero-card:focus-visible:before{opacity:1}.hero-card:hover:after,.hero-card:focus-visible:after{opacity:1;filter:drop-shadow(0 5px 8px rgba(207,255,236,.46))}.hero-card p{position:relative;margin:0 0 5px;font:500 15px var(--serif-en);letter-spacing:.05em;opacity:.86}.hero-card h2{position:relative;margin:0;font-size:clamp(20px,2vw,29px);font-weight:500}.hero-card:active{transform:translateY(-2px) scale(.988)}
.detail-section{min-height:82vh;display:grid;grid-template-columns:.18fr 1fr 1fr;gap:6vw;align-items:center;padding:120px clamp(26px,7vw,110px);background:#f8fcff;border-top:1px solid rgba(11,40,68,.1)}.detail-section--blue{background:#e5f5ff}.detail-section--green{background:#e7f5ec}.detail-index{align-self:start;color:var(--blue);font:500 14px var(--serif-en);letter-spacing:.2em}.detail-copy h2,.modal-panel h2{margin-bottom:17px;font-size:clamp(40px,5vw,68px);font-weight:400}.detail-copy>p:last-child,.modal-intro{color:#587086;font:500 clamp(17px,1.8vw,22px)/1.7 var(--serif-en)}.placeholder-list{border-top:1px solid rgba(11,40,68,.26)}.placeholder-list span{display:block;padding:24px 4px;border-bottom:1px solid rgba(11,40,68,.26);font-size:clamp(25px,3vw,40px)}footer{display:flex;justify-content:space-between;padding:34px clamp(26px,7vw,110px);color:#fff;background:var(--navy);font:500 13px var(--serif-en);letter-spacing:.1em}
.modal{visibility:hidden;position:fixed;z-index:50;inset:0;opacity:0;transition:opacity .25s,visibility .25s}.modal.is-open{visibility:visible;opacity:1}.modal-backdrop{position:absolute;inset:0;background:rgba(8,43,69,.42);backdrop-filter:blur(7px)}.modal-panel{position:absolute;top:0;right:0;width:min(560px,100%);height:100%;overflow-y:auto;padding:100px clamp(28px,6vw,70px) 50px;background:linear-gradient(145deg,#f8fdff,#e8f7ef);transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}.modal.is-open .modal-panel{transform:none}.modal-close{position:absolute;top:24px;right:28px;width:42px;height:42px;border:1px solid rgba(11,40,68,.18);border-radius:50%;background:rgba(255,255,255,.55);font-size:26px;cursor:pointer}.contact-list{margin-top:45px;border-top:1px solid rgba(11,40,68,.16)}.contact-list p{display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid rgba(11,40,68,.16)}.contact-list span,.form-note{color:#627b8d}.contact-list strong{font-weight:500}form{display:grid;gap:22px;margin-top:38px}label{display:grid;gap:9px;font-size:14px}input,textarea{width:100%;padding:13px 2px;border:0;border-bottom:1px solid rgba(11,40,68,.2);outline:0;background:transparent;resize:vertical}input:focus,textarea:focus{border-color:var(--blue)}.submit-button{padding:15px 22px;color:#fff;border:0;border-radius:999px;background:var(--navy);cursor:pointer}.form-note{margin:-10px 0 0;font-size:12px}.form-note.success{color:#44785b}
.form-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-privacy{margin:-7px 0 0;color:#627b8d;font-size:12px;line-height:1.65}.submit-button:disabled{cursor:wait;opacity:.64}.form-note.error{color:#9a4141}
@keyframes scene-drift{0%{transform:translate3d(-11px,-2px,0) scale(1.012)}100%{transform:translate3d(11px,2px,0) scale(1.012)}}@keyframes horizon-drift{0%{transform:translate3d(13px,2px,0) scale(1.018)}100%{transform:translate3d(-15px,-3px,0) scale(1.026)}}@keyframes cloud-cross{0%{transform:translate3d(0,0,0) scale(1);opacity:.18}45%{opacity:.5}100%{transform:translate3d(240vw,8px,0) scale(1.25);opacity:.16}}@keyframes reveal-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes card-in{from{opacity:0;transform:translateY(35px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px),(max-height:650px){.hero-copy{top:18%;width:76vw}.hero-cards{width:90vw;bottom:20px}.hero-card{min-height:108px}}
@media (max-width:680px){.site-header{height:66px;padding:0 16px}.brand>span:last-child,.nav-button span{display:none}.hero{min-height:980px}.scene-base{object-fit:contain}.scene-horizon{background-size:contain;background-position:center;opacity:.1}.hero-copy{top:15%;width:90vw}.hero-cards{bottom:25px;grid-template-columns:1fr;gap:10px}.hero-card{min-height:125px}.detail-section{min-height:auto;grid-template-columns:1fr;gap:36px;padding-top:90px;padding-bottom:90px}.detail-index{display:none}footer{flex-direction:column;gap:18px}}
@media (prefers-reduced-transparency:reduce){.hero-card{background:rgba(224,244,250,.94);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--navy)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-base,.scene-horizon,.cloud-veil,h1,.welcome,.hero-card{animation:none!important}.hero-scene{transform:none!important;transition:none}.hero-card{transition:color .15s,background .15s}.hero-card:hover{transform:none}}

/* The cards remain visually light so the hero artwork stays present. */
.hero-card{background:linear-gradient(145deg,rgba(235,249,255,.16),rgba(209,241,244,.055));box-shadow:0 18px 48px rgba(8,54,88,.2),inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.5);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.hero-card:focus-visible{outline:2px solid rgba(226,255,242,.92);outline-offset:5px}
@media (prefers-reduced-transparency:reduce){.hero-card{background:rgba(224,244,250,.64);color:var(--navy);box-shadow:0 18px 48px rgba(8,54,88,.18),inset 0 0 0 1px rgba(255,255,255,.58)}}
@media (max-width:680px){.hero{min-height:max(100svh,760px)}.hero-cards{bottom:16px;gap:8px}.hero-card{min-height:88px;padding:15px 17px}.hero-card p{margin-bottom:2px;font-size:13px}.hero-card h2{font-size:20px}}

/* V4 uses a 17:9 source with motion-safe bleed. The foreground always covers the viewport. */
.scene-fill{background-image:url("assets/hero-sky-wide-safe-v4-1920.webp");filter:none;transform:scale(1.04)}
.scene-base{inset:-6%;width:112%;height:112%;object-fit:cover}
.scene-horizon{background-image:url("assets/hero-sky-wide-safe-v4-1920.webp");background-size:cover}
@media (max-width:680px){.scene-base{inset:-8%;width:116%;height:116%;object-fit:cover}.scene-horizon{background-size:cover}}

@media (max-width:680px){
  .scene-base{inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,transparent 33%,#000 40%,#000 60%,transparent 67%);mask-image:linear-gradient(to bottom,transparent 33%,#000 40%,#000 60%,transparent 67%)}
}

/* V5: Basic Information, a cold-light personal archive with a kinetic index core. */
:root{--profile-ink:#17333e;--profile-muted:#637d82;--profile-ground:#edf5f3;--profile-gold:#c8ad74;--profile-gold-bright:#ead8aa;--profile-blue:#b9dce4;--profile-radius:16px;--cube-rx:-18deg;--cube-ry:28deg}
#basic-information{scroll-margin-top:0}
.profile-page{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;overflow:hidden;padding:clamp(88px,11vh,122px) clamp(24px,7vw,112px) 82px;color:var(--profile-ink);background:linear-gradient(135deg,#f6faf8 0%,var(--profile-ground) 52%,#e5f0f2 100%);font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}
.profile-page:before{content:"";position:absolute;z-index:-3;inset:0;background:radial-gradient(ellipse at 17% 20%,rgba(255,255,255,.96),transparent 32%),radial-gradient(ellipse at 82% 70%,rgba(181,220,226,.43),transparent 37%),linear-gradient(115deg,transparent 26%,rgba(255,255,255,.65) 48%,transparent 70%)}
.profile-page:after{content:"";position:absolute;z-index:-2;inset:0;opacity:.32;background-image:radial-gradient(circle at center,rgba(23,51,62,.16) 0 1px,transparent 1.5px);background-size:32px 32px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000);mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000)}
.profile-atmosphere{position:absolute;z-index:-1;inset:0;pointer-events:none;filter:blur(1px)}
.profile-atmosphere i{position:absolute;width:42vw;height:42vw;border-radius:50%;filter:blur(76px);opacity:.24;animation:archive-breathe 11s cubic-bezier(.37,0,.63,1) infinite alternate}
.profile-atmosphere i:nth-child(1){left:-23vw;top:28%;background:#c9ede5}
.profile-atmosphere i:nth-child(2){right:-24vw;top:-12%;background:#b9dfea;animation-delay:-4s}
.profile-atmosphere i:nth-child(3){left:39%;bottom:-32vw;background:#f2e4c3;animation-delay:-8s}
.profile-heading{text-align:center;opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.profile-page.is-visible .profile-heading{opacity:1;transform:none}
.profile-heading h2{margin:0;font:400 clamp(38px,4.6vw,66px)/1.05 var(--serif-cn);letter-spacing:.09em}
.profile-heading p{margin:9px 0 0;color:var(--profile-muted);font:500 clamp(12px,1vw,15px)/1 "Manrope",sans-serif;letter-spacing:.22em}
.profile-layout{width:min(1320px,100%);height:calc(100dvh - clamp(355px,41vh,390px));min-height:390px;margin:clamp(30px,4vh,44px) auto 0;display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,15vw,220px) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:stretch}
.profile-column{align-self:center;opacity:0;transition:opacity .85s .18s cubic-bezier(.16,1,.3,1),transform .85s .18s cubic-bezier(.16,1,.3,1)}
.profile-column--history{transform:translateX(-30px)}.profile-column--skills{transform:translateX(30px)}
.profile-page.is-visible .profile-column{opacity:1;transform:none}
.profile-column h3{margin:0;font:400 clamp(29px,3vw,44px)/1.15 var(--serif-cn);letter-spacing:.04em}
.column-en{margin:8px 0 clamp(26px,4vh,44px);color:var(--profile-muted);font:500 12px/1 "Manrope",sans-serif;letter-spacing:.14em}
.experience-list{position:relative;display:grid;gap:clamp(18px,2.6vh,28px);padding-left:27px}
.experience-list:before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--profile-gold),rgba(200,173,116,.12))}
.experience-item{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:baseline}
.experience-item:before{content:"";position:absolute;left:-27px;top:9px;width:9px;height:9px;border:1px solid var(--profile-gold);border-radius:50%;background:var(--profile-ground);box-shadow:0 0 0 5px rgba(200,173,116,.09)}
.experience-item time{color:#8a764d;font-size:13px;letter-spacing:.1em}.experience-item p{margin:0;color:#3c5a62;font-size:clamp(15px,1.15vw,18px);font-weight:300;line-height:1.65}
.skill-constellation{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.skill-item{position:relative;min-height:108px;padding:18px 18px 16px;border-radius:var(--profile-radius);background:rgba(255,255,255,.44);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 16px 38px rgba(47,91,98,.08);backdrop-filter:blur(14px);transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s}
.skill-item:first-child{grid-column:1/-1;min-height:120px}.skill-item:hover{transform:translateY(-4px);background:rgba(255,255,255,.7)}
.skill-item>span{position:absolute;right:16px;top:14px;color:rgba(104,128,130,.55);font:500 11px "Manrope",sans-serif;letter-spacing:.12em}.skill-item p{margin:31px 0 5px;font-size:clamp(17px,1.35vw,21px)}.skill-item small{color:var(--profile-muted);font-size:12px;font-weight:300}
.profile-axis{position:relative;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;min-height:100%}
.axis-line{width:1px;height:100%;background:linear-gradient(transparent,var(--profile-gold) 34%,var(--profile-gold-bright));box-shadow:0 0 18px rgba(200,173,116,.28)}.axis-line--bottom{background:linear-gradient(var(--profile-gold-bright),var(--profile-gold) 66%,transparent)}
.cube-system{position:relative;width:clamp(150px,15vw,210px);height:clamp(180px,20vw,250px);display:grid;place-items:center;perspective:900px}
.cube-trigger{position:relative;z-index:5;width:104px;height:104px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;perspective:800px;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s;touch-action:none}
.cube-trigger:hover,.cube-trigger:focus-visible,.cube-system.is-pressed .cube-trigger{transform:scale(1.2);filter:drop-shadow(0 18px 24px rgba(84,120,123,.2));outline:none}
.cube-trigger:focus-visible:after{content:"";position:absolute;inset:-12px;border:1px solid var(--profile-gold);border-radius:50%}
.cube{position:absolute;left:50%;top:50%;width:62px;height:62px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--cube-rx)) rotateY(var(--cube-ry));transition:transform .16s ease-out;will-change:transform}
.cube-face{position:absolute;inset:0;border:1px solid rgba(158,134,80,.58);background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(160,207,211,.28));box-shadow:inset 0 0 22px rgba(255,255,255,.48),0 0 18px rgba(103,151,155,.08);backdrop-filter:blur(3px)}
.cube-face:after{content:"";position:absolute;inset:8px;border:1px solid rgba(200,173,116,.44)}
.cube-face--front{transform:translateZ(31px)}.cube-face--back{transform:rotateY(180deg) translateZ(31px)}.cube-face--right{transform:rotateY(90deg) translateZ(31px)}.cube-face--left{transform:rotateY(-90deg) translateZ(31px)}.cube-face--top{transform:rotateX(90deg) translateZ(31px)}.cube-face--bottom{transform:rotateX(-90deg) translateZ(31px)}
.cube-core{position:absolute;left:50%;top:50%;width:17px;height:17px;border-radius:5px;background:#d2ad57;box-shadow:0 0 22px rgba(210,173,87,.9);transform:translate3d(-50%,-50%,0)}
.orbit-shell{position:absolute;z-index:1;inset:28px;border:1px solid rgba(200,173,116,.27);border-radius:50%;animation:orbit-turn 16s linear infinite}.orbit-shell:before,.orbit-shell:after{content:"";position:absolute;inset:13px;border:1px solid rgba(87,130,134,.18);border-radius:50%;transform:rotateX(64deg)}.orbit-shell:after{transform:rotateY(68deg)}
.orbit-shell i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--profile-gold-bright);box-shadow:0 0 12px rgba(200,173,116,.7)}.orbit-shell i:nth-child(1){left:12%;top:18%}.orbit-shell i:nth-child(2){right:4%;top:52%}.orbit-shell i:nth-child(3){left:46%;bottom:-3px}
.cube-hint{position:absolute;bottom:0;margin:0;color:#71888a;font-size:11px;font-weight:300;letter-spacing:.08em;transition:opacity .25s}.cube-system.is-open .cube-hint{opacity:0}
.cube-node{position:absolute;z-index:3;left:50%;top:50%;min-width:82px;height:42px;padding:5px 14px;color:var(--profile-ink);border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(243,250,248,.64);box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(49,91,96,.12);backdrop-filter:blur(18px) saturate(1.25);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.35);transition:transform .56s cubic-bezier(.16,1,.3,1),opacity .28s,background .25s;cursor:pointer}
.cube-node span,.cube-node small{display:block;white-space:nowrap}.cube-node span{font-size:12px}.cube-node small{color:#73888a;font:500 8px "Manrope",sans-serif;letter-spacing:.08em}
.cube-system.is-open .cube-node{opacity:1;pointer-events:auto}.cube-system.is-open .cube-node--one{transform:translate(-148px,-112px) scale(1)}.cube-system.is-open .cube-node--two{transform:translate(66px,-112px) scale(1)}.cube-system.is-open .cube-node--three{transform:translate(-156px,70px) scale(1)}.cube-system.is-open .cube-node--four{transform:translate(72px,70px) scale(1)}
.cube-node:hover,.cube-node:focus-visible{background:rgba(255,255,255,.94);outline:1px solid var(--profile-gold);outline-offset:3px;transform-origin:center}
.cube-node.is-selected{color:#fff;background:#315f68;border-color:#315f68}
.next-page-peek{position:absolute;z-index:8;left:50%;bottom:0;width:min(720px,78vw);height:58px;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;align-items:end;padding:8px 72px 8px 26px;color:#294b58;border:0;border-radius:var(--profile-radius) var(--profile-radius) 0 0;background:rgba(202,226,232,.84);box-shadow:0 -12px 40px rgba(75,118,125,.12),inset 0 1px 0 rgba(255,255,255,.74);backdrop-filter:blur(18px);transform:translateX(-50%);cursor:pointer;transition:height .35s cubic-bezier(.16,1,.3,1),background .3s}
.next-page-peek:hover,.next-page-peek:focus-visible{height:68px;background:rgba(218,237,240,.95);outline:2px solid rgba(200,173,116,.7);outline-offset:-4px}.next-page-peek span{grid-row:1/3;align-self:center;text-align:left;font-size:14px}.next-page-peek small{align-self:end;font:500 10px "Manrope",sans-serif;letter-spacing:.08em}.next-page-peek i{position:absolute;right:28px;top:50%;width:18px;height:18px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-72%) rotate(45deg);animation:arrow-invite 1.9s cubic-bezier(.37,0,.63,1) infinite}
#projects{position:relative;scroll-margin-top:0;border-top:0;box-shadow:inset 0 32px 44px rgba(72,118,128,.08)}
@keyframes archive-breathe{to{transform:translate3d(4vw,-2vh,0) scale(1.13);opacity:.34}}@keyframes orbit-turn{to{transform:rotate(360deg)}}@keyframes arrow-invite{0%,100%{translate:0 -2px;opacity:.55}50%{translate:0 5px;opacity:1}}
@media (max-width:900px){.profile-page{padding-inline:32px}.profile-layout{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:24px}.experience-item{grid-template-columns:1fr;gap:4px}.skill-constellation{grid-template-columns:1fr}.skill-item:first-child{grid-column:auto}.skill-item{min-height:88px}.cube-system.is-open .cube-node--one{transform:translate(-118px,-110px)}.cube-system.is-open .cube-node--two{transform:translate(38px,-110px)}.cube-system.is-open .cube-node--three{transform:translate(-125px,70px)}.cube-system.is-open .cube-node--four{transform:translate(45px,70px)}}
@media (max-width:680px){.profile-page{min-height:auto;padding:92px 18px 86px}.profile-layout{height:auto;min-height:0;margin-top:42px;grid-template-columns:1fr;gap:34px}.profile-column{width:min(480px,100%);margin:auto}.profile-axis{order:2;min-height:310px;grid-template-rows:38px auto 38px}.profile-column--skills{order:3}.cube-system{width:210px;height:230px}.experience-item{grid-template-columns:58px 1fr;gap:12px}.skill-constellation{grid-template-columns:1fr 1fr}.skill-item:first-child{grid-column:1/-1}.next-page-peek{width:calc(100% - 28px);padding-left:18px;padding-right:54px}.next-page-peek span{font-size:13px}.next-page-peek i{right:20px}.profile-page:after{opacity:.2;background-size:26px 26px}}
@media (hover:none){.cube-hint{display:none}.cube-trigger{transform:scale(1.05)}.skill-item:hover{transform:none}}
@media (prefers-reduced-transparency:reduce){.skill-item,.cube-node,.next-page-peek{background:#f4f8f6;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.profile-atmosphere i,.orbit-shell,.next-page-peek i{animation:none}.profile-heading,.profile-column{opacity:1;transform:none;transition:none}.cube,.cube-trigger,.cube-node{transition:none}}

/* V6: the Basic Information page becomes a cloud-level technology observatory. */
:root{--cube-rx:-26deg;--cube-ry:42deg}
body.profile-active .site-header.scrolled{height:52px;color:#eefbff;background:rgba(8,31,50,.74);border-color:rgba(178,230,235,.2);box-shadow:0 12px 34px rgba(4,21,36,.18);backdrop-filter:blur(22px) saturate(1.3)}
.site-header{transition:height .42s cubic-bezier(.16,1,.3,1),color .35s,background .35s,border-color .35s}
.profile-page{color:#edf9fb;background:#0d2f4c}
.profile-backdrop{position:absolute;z-index:-5;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.04);animation:tech-deck-drift 18s cubic-bezier(.37,0,.63,1) infinite alternate;will-change:transform}
.profile-page:before{z-index:-4;background:linear-gradient(90deg,rgba(5,25,43,.82),rgba(8,38,61,.57) 28%,rgba(7,31,52,.65) 50%,rgba(7,35,57,.56) 72%,rgba(5,24,42,.83)),linear-gradient(180deg,rgba(13,55,87,.48),rgba(3,20,34,.42) 58%,rgba(3,18,31,.78))}
.profile-page:after{z-index:-2;opacity:.32;background-image:radial-gradient(circle at center,rgba(157,225,231,.42) 0 1px,transparent 1.4px),linear-gradient(105deg,transparent 42%,rgba(172,235,238,.12) 49.5%,rgba(230,249,245,.25) 50%,rgba(172,235,238,.1) 50.5%,transparent 58%);background-size:32px 32px,220% 100%;background-position:center,-120% 0;-webkit-mask-image:linear-gradient(90deg,#000,transparent 36%,transparent 64%,#000);mask-image:linear-gradient(90deg,#000,transparent 36%,transparent 64%,#000);animation:tech-scan 10s ease-in-out infinite}
.profile-atmosphere{z-index:-1;mix-blend-mode:screen}.profile-atmosphere i{opacity:.18}.profile-atmosphere i:nth-child(1){background:#4fc1cc}.profile-atmosphere i:nth-child(2){background:#5cb2e3}.profile-atmosphere i:nth-child(3){background:#d6bd78;opacity:.12}
.profile-heading h2,.profile-column h3{color:#f0fbfc;text-shadow:0 8px 30px rgba(2,18,31,.26)}
.profile-heading p,.column-en{color:#a9d4da}.experience-item p{color:#d0e4e6}.experience-item time{color:#e0c98f}.experience-list:before{background:linear-gradient(var(--profile-gold-bright),rgba(200,173,116,.18))}.experience-item:before{background:#143d5a;box-shadow:0 0 0 5px rgba(211,188,130,.1),0 0 16px rgba(211,188,130,.38)}
.skill-item{border:1px solid rgba(177,225,229,.14);background:linear-gradient(135deg,rgba(12,49,73,.68),rgba(25,76,91,.38));box-shadow:inset 0 1px 0 rgba(217,250,248,.16),0 18px 44px rgba(2,20,34,.2);backdrop-filter:blur(15px) saturate(1.25)}
.skill-item:hover{background:linear-gradient(135deg,rgba(19,68,91,.82),rgba(31,96,105,.58));box-shadow:inset 0 1px 0 rgba(217,250,248,.26),0 22px 48px rgba(2,20,34,.26)}
.skill-item>span{color:#9ccbd0}.skill-item p{color:#eef9fa}.skill-item small{color:#a8c7ca}
.axis-line{background:linear-gradient(transparent,#cfb675 34%,#f4dfa8);box-shadow:0 0 24px rgba(223,198,132,.58)}.axis-line--bottom{background:linear-gradient(#f4dfa8,#cfb675 66%,transparent)}
.cube-system{width:clamp(170px,16vw,230px);height:clamp(194px,21vw,270px)}
.cube-trigger{width:122px;height:122px}.cube-trigger:hover,.cube-trigger:focus-visible,.cube-system.is-pressed .cube-trigger{transform:scale(1.16);filter:drop-shadow(0 22px 34px rgba(67,205,215,.32))}
.cube{width:76px;height:76px;transform:translate(-50%,-50%) rotateX(var(--cube-rx)) rotateY(var(--cube-ry));transition:transform .22s cubic-bezier(.16,1,.3,1)}
.cube-face{border:1px solid rgba(144,235,238,.72);background:linear-gradient(135deg,rgba(166,242,240,.27),rgba(10,55,81,.58));box-shadow:inset 0 0 28px rgba(84,211,218,.22),0 0 20px rgba(60,185,197,.16);backdrop-filter:blur(4px)}
.cube-face:before{content:"";position:absolute;inset:4px;background:linear-gradient(135deg,rgba(231,255,252,.3),transparent 42%,rgba(59,185,199,.18));clip-path:polygon(0 0,100% 0,100% 2px,2px 2px,2px 100%,0 100%)}
.cube-face:after{inset:12px;border-color:rgba(226,199,128,.54);box-shadow:inset 0 0 12px rgba(226,199,128,.13)}
.cube-face--front{transform:translateZ(38px)}.cube-face--back{transform:rotateY(180deg) translateZ(38px)}.cube-face--right{transform:rotateY(90deg) translateZ(38px)}.cube-face--left{transform:rotateY(-90deg) translateZ(38px)}.cube-face--top{transform:rotateX(90deg) translateZ(38px)}.cube-face--bottom{transform:rotateX(-90deg) translateZ(38px)}
.cube-core{width:22px;height:22px;border:1px solid rgba(255,238,190,.72);background:#47c9d0;box-shadow:0 0 13px rgba(71,201,208,.95),0 0 34px rgba(225,195,119,.72);animation:core-pulse 2.8s ease-in-out infinite}
.orbit-shell{inset:18px;border-color:rgba(141,224,229,.32);box-shadow:inset 0 0 28px rgba(78,184,194,.06)}.orbit-shell:before,.orbit-shell:after{border-color:rgba(137,221,226,.28)}.orbit-shell i{background:#efd68f;box-shadow:0 0 14px rgba(239,214,143,.9)}
.cube-hint{color:#a9cdd0}.cube-node{color:#eaf7f8;border-color:rgba(175,231,233,.28);background:rgba(10,43,65,.76);box-shadow:inset 0 1px 0 rgba(226,254,250,.14),0 16px 34px rgba(2,18,31,.3)}.cube-node small{color:#9fc6c9}.cube-node:hover,.cube-node:focus-visible{color:#123746;background:rgba(222,244,242,.94)}
.next-page-peek{width:min(620px,66vw);height:40px;display:flex;align-items:center;gap:18px;padding:5px 54px 5px 20px;color:#dff5f6;border:1px solid rgba(178,228,231,.16);border-bottom:0;background:rgba(7,34,54,.84);box-shadow:0 -10px 32px rgba(2,18,31,.22),inset 0 1px 0 rgba(221,252,248,.12);backdrop-filter:blur(18px) saturate(1.25)}
.next-page-peek:hover,.next-page-peek:focus-visible{height:46px;background:rgba(13,57,78,.94);outline:1px solid rgba(225,200,132,.7);outline-offset:-3px}.next-page-peek span{font-size:12px}.next-page-peek small{margin-left:auto;color:#9fc9cd;font-size:9px}.next-page-peek i{right:20px;width:13px;height:13px}
@keyframes tech-deck-drift{0%{transform:translate3d(-10px,-3px,0) scale(1.01)}100%{transform:translate3d(10px,4px,0) scale(1.025)}}@keyframes tech-scan{0%,22%{background-position:center,-120% 0}72%,100%{background-position:center,120% 0}}@keyframes core-pulse{0%,100%{transform:translate3d(-50%,-50%,0) scale(.86);opacity:.72}50%{transform:translate3d(-50%,-50%,0) scale(1.12);opacity:1}}
@media (max-width:680px){body.profile-active .site-header.scrolled{height:48px}.profile-backdrop{inset:0;width:100%;height:100%;object-position:center;animation:none}.profile-page:before{background:linear-gradient(180deg,rgba(5,27,46,.76),rgba(5,28,47,.7) 45%,rgba(4,22,38,.83))}.profile-page:after{-webkit-mask-image:none;mask-image:none;opacity:.17}.next-page-peek{width:calc(100% - 42px);height:40px;gap:8px}.next-page-peek small{display:none}}
@media (prefers-reduced-motion:reduce){.profile-backdrop,.profile-page:after,.cube-core{animation:none}}

/* V8: lighter atmospheric balance for a closer transition from the sky hero. */
.profile-page{background:#2d7297}
.profile-backdrop{filter:brightness(1.1) saturate(.96) contrast(1.015)}
.profile-page:before{background:linear-gradient(90deg,rgba(5,27,45,.6),rgba(9,46,70,.29) 28%,rgba(7,38,61,.36) 50%,rgba(8,47,69,.28) 72%,rgba(5,26,44,.61)),linear-gradient(180deg,rgba(13,62,94,.2),rgba(5,40,64,.09) 56%,rgba(3,27,45,.46))}
.profile-page:after{opacity:.2}
.profile-atmosphere i{opacity:.12}.profile-atmosphere i:nth-child(3){opacity:.08}
.profile-heading h2,.profile-column h3{text-shadow:0 3px 18px rgba(2,20,34,.44)}
.experience-item p,.experience-item time,.column-en,.profile-heading p,.cube-hint{text-shadow:0 2px 12px rgba(2,20,34,.5)}
.profile-column{position:relative;isolation:isolate}
.profile-column:before{content:"";position:absolute;z-index:-1;inset:-42px -56px;background:radial-gradient(ellipse at center,rgba(4,35,56,.27),rgba(4,35,56,.1) 48%,transparent 74%);filter:blur(10px);pointer-events:none}
.experience-item p{color:#edf8f8;text-shadow:0 2px 8px rgba(1,17,29,.72),0 0 20px rgba(1,17,29,.3)}
.experience-item time{color:#f0d596;text-shadow:0 2px 8px rgba(1,17,29,.72)}
.column-en,.profile-heading p,.cube-hint{color:#cae5e7}
.skill-item{background:linear-gradient(135deg,rgba(11,57,82,.56),rgba(31,92,105,.32));box-shadow:inset 0 1px 0 rgba(225,253,249,.18),0 18px 44px rgba(2,20,34,.14)}
.skill-item:hover{background:linear-gradient(135deg,rgba(15,71,96,.68),rgba(39,111,119,.43))}
.next-page-peek{background:rgba(8,43,65,.7)}
@media (max-width:680px){.profile-page:before{background:linear-gradient(180deg,rgba(7,39,62,.53),rgba(6,40,63,.38) 45%,rgba(4,28,47,.62))}.profile-backdrop{filter:brightness(1.04) saturate(.92)}.profile-column:before{inset:-30px -18px;background:radial-gradient(ellipse at center,rgba(4,35,56,.24),transparent 76%)}}

/* V10: bright cloud archive, kinetic personal-photo rail, and elevated cube menu. */
.profile-page{--profile-deep:#0c3652;--profile-copy:#123f59;--profile-soft:#2f6477;padding-top:clamp(106px,13vh,132px);color:var(--profile-deep);background:#8fc9da}
.profile-backdrop{filter:brightness(1.23) saturate(.88) contrast(.94)}
.profile-page:before{background:linear-gradient(90deg,rgba(225,245,244,.42),rgba(209,239,240,.12) 28%,rgba(204,235,237,.2) 50%,rgba(211,240,239,.12) 72%,rgba(226,246,243,.4)),linear-gradient(180deg,rgba(229,248,247,.24),rgba(144,204,215,.08) 54%,rgba(55,119,143,.22))}
.profile-page:after{opacity:.11;mix-blend-mode:multiply}
.profile-atmosphere i{opacity:.1}.profile-atmosphere i:nth-child(3){opacity:.06}
.profile-heading{position:relative;z-index:9}
.profile-heading h2,.profile-column h3{color:var(--profile-deep);text-shadow:0 1px 0 rgba(255,255,255,.72),0 6px 24px rgba(219,247,246,.82)}
.profile-heading p,.column-en{color:#285f73;text-shadow:0 1px 10px rgba(235,252,250,.95)}
.photo-stream{position:absolute;z-index:4;left:0;right:0;top:clamp(190px,23vh,224px);height:clamp(92px,12vh,116px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.photo-stream:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(224,245,244,.12),transparent 28%,transparent 72%,rgba(213,240,240,.12));pointer-events:none}
.photo-stream__track{display:flex;width:max-content;gap:clamp(15px,1.7vw,26px);padding:5px 13px;animation:photo-stream-travel 34s linear infinite;will-change:transform}
.photo-frame{position:relative;flex:0 0 clamp(170px,16vw,238px);height:clamp(82px,10.5vh,106px);margin:0;overflow:hidden;border:1px solid rgba(236,255,252,.76);border-radius:18px;background:rgba(215,242,241,.3);box-shadow:0 12px 30px rgba(21,75,99,.15),inset 0 1px 0 rgba(255,255,255,.65);transform:translateY(var(--photo-y,0)) rotate(var(--photo-r,0));backdrop-filter:blur(8px);opacity:.9}
.photo-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 36%,rgba(53,129,151,.12));pointer-events:none}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(.72) contrast(.92)}
.photo-frame figcaption{position:absolute;z-index:2;right:12px;bottom:9px;padding:4px 8px;color:#eafafa;border-radius:999px;background:rgba(8,49,73,.44);font:600 8px/1 "Manrope",sans-serif;letter-spacing:.12em;backdrop-filter:blur(10px)}
.photo-frame--one{--photo-y:4px;--photo-r:-1deg}.photo-frame--two{--photo-y:-2px;--photo-r:.7deg}.photo-frame--three{--photo-y:5px;--photo-r:-.5deg}.photo-frame--four{--photo-y:0;--photo-r:.9deg}.photo-frame--five{--photo-y:3px;--photo-r:-.8deg}
.photo-frame--one img{object-position:8% 54%}.photo-frame--two img{object-position:30% 40%}.photo-frame--three img{object-position:54% 44%}.photo-frame--four img{object-position:78% 48%}.photo-frame--five img{object-position:94% 56%}
.profile-layout{position:relative;z-index:6;height:calc(100dvh - clamp(442px,50vh,472px));min-height:330px;margin-top:clamp(154px,18vh,176px);grid-template-columns:minmax(0,1fr) clamp(170px,16vw,230px) minmax(0,1fr);gap:clamp(32px,5vw,78px)}
.profile-column{align-self:start;padding-top:clamp(6px,1.3vh,16px)}
.profile-column:before{inset:-26px -42px;background:radial-gradient(ellipse at center,rgba(230,248,245,.48),rgba(218,243,241,.18) 54%,transparent 76%);filter:blur(13px)}
.profile-column h3{font-size:clamp(27px,2.55vw,39px)}
.column-en{margin:6px 0 clamp(18px,2.7vh,27px)}
.experience-list{gap:clamp(14px,1.9vh,20px)}
.experience-item p{color:var(--profile-copy);font-size:clamp(14px,1.05vw,17px);line-height:1.48;text-shadow:0 1px 10px rgba(241,255,253,.94)}
.experience-item time{color:#725c2f;text-shadow:0 1px 10px rgba(255,248,218,.86)}
.experience-item:before{background:#dceff0;box-shadow:0 0 0 5px rgba(214,184,111,.13),0 0 18px rgba(140,108,37,.24)}
.experience-list:before{background:linear-gradient(#9a793c,rgba(145,112,47,.15))}
.skill-list{position:relative;display:grid;gap:clamp(12px,1.7vh,18px);padding-left:2px}
.skill-list:before{content:"";position:absolute;left:38px;top:5px;bottom:5px;width:1px;background:linear-gradient(transparent,rgba(24,87,108,.48) 18%,rgba(24,87,108,.48) 82%,transparent)}
.skill-row{position:relative;display:grid;grid-template-columns:58px 1fr;align-items:center;min-height:48px;color:var(--profile-copy)}
.skill-row>span{position:relative;z-index:1;width:29px;height:29px;display:grid;place-items:center;color:#785f2d;border:1px solid rgba(129,101,43,.42);border-radius:50%;background:rgba(231,246,243,.74);box-shadow:0 0 0 5px rgba(225,244,241,.28);font:600 9px "Manrope",sans-serif;letter-spacing:.06em}
.skill-row p{margin:0;font-size:clamp(15px,1.15vw,18px);font-weight:400;text-shadow:0 1px 10px rgba(241,255,253,.94)}
.skill-row small{display:block;margin-top:3px;color:var(--profile-soft);font-size:11px;font-weight:400;letter-spacing:.04em}
.profile-axis{z-index:30;overflow:visible}
.axis-line{background:linear-gradient(transparent,#9d7934 34%,#d4ad58);box-shadow:0 0 22px rgba(187,144,56,.36)}
.axis-line--bottom{background:linear-gradient(#d4ad58,#9d7934 66%,transparent)}
.cube-system{z-index:40;overflow:visible}.cube-system.is-open{z-index:140}
.cube-menu{position:absolute;z-index:150;inset:0;pointer-events:none;overflow:visible}.cube-system.is-open .cube-menu{pointer-events:auto}
.cube-trigger{z-index:160}.cube-trigger:after{content:"";position:absolute;inset:4px;border:1px solid rgba(212,175,88,.34);border-radius:50%;box-shadow:0 0 0 0 rgba(70,190,199,.2);animation:cube-invite 2.3s ease-out infinite;pointer-events:none}
.cube-trigger:hover,.cube-trigger:focus-visible,.cube-system.is-pressed .cube-trigger{transform:scale(1.22);filter:drop-shadow(0 20px 34px rgba(28,128,151,.38))}
.cube-hint{bottom:-2px;color:#174f67;font-size:11px;font-weight:500;text-shadow:0 1px 12px rgba(238,255,252,.95)}.cube-hint strong{color:#765b24;font-weight:700}
.cube-node{z-index:170;min-width:clamp(128px,10vw,154px);height:66px;padding:9px 20px;color:#113e53;border-color:rgba(239,255,252,.82);border-radius:18px;background:rgba(225,245,243,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 18px 48px rgba(10,50,72,.23);backdrop-filter:blur(20px) saturate(1.2)}
.cube-node span{font-size:15px;font-weight:500}.cube-node small{margin-top:3px;color:#3e7280;font-size:9px}
.cube-system.is-open .cube-node--one{transform:translate(-205px,-128px) scale(1)}.cube-system.is-open .cube-node--two{transform:translate(78px,-128px) scale(1)}.cube-system.is-open .cube-node--three{transform:translate(-205px,72px) scale(1)}.cube-system.is-open .cube-node--four{transform:translate(78px,72px) scale(1)}
.cube-node:hover,.cube-node:focus-visible{color:#0d3449;background:rgba(245,253,250,.98);box-shadow:inset 0 1px 0 #fff,0 22px 55px rgba(8,49,71,.28)}
.cube-node.is-selected{color:#f3ffff;background:#1e7188;border-color:#b9eff0}.cube-node.is-selected small{color:#d1f1f1}
.next-page-peek{color:#eafafa;background:rgba(14,72,94,.72)}
@keyframes photo-stream-travel{to{transform:translateX(calc(-50% - clamp(7.5px,.85vw,13px)))}}
@keyframes cube-invite{0%{opacity:.8;box-shadow:0 0 0 0 rgba(46,165,180,.28)}70%,100%{opacity:0;box-shadow:0 0 0 18px rgba(46,165,180,0)}}
@media (max-width:900px){.photo-stream{top:185px}.profile-layout{grid-template-columns:minmax(0,1fr) 158px minmax(0,1fr);gap:22px}.cube-system.is-open .cube-node--one{transform:translate(-154px,-128px)}.cube-system.is-open .cube-node--two{transform:translate(28px,-128px)}.cube-system.is-open .cube-node--three{transform:translate(-154px,72px)}.cube-system.is-open .cube-node--four{transform:translate(28px,72px)}}
@media (max-width:680px){.profile-page{padding-top:104px;background:#8fc9da}.profile-backdrop{filter:brightness(1.18) saturate(.82) contrast(.94)}.profile-page:before{background:linear-gradient(180deg,rgba(224,245,244,.38),rgba(183,224,227,.14) 45%,rgba(81,144,164,.24))}.photo-stream{position:relative;top:auto;left:auto;right:auto;width:calc(100% + 36px);height:102px;margin:32px -18px 0}.photo-frame{flex-basis:158px;height:91px;border-radius:15px}.profile-layout{height:auto;margin-top:34px;grid-template-columns:1fr;gap:28px}.profile-axis{min-height:320px}.profile-column{padding-top:0}.cube-node{min-width:112px;height:60px;padding:8px 14px}.cube-system.is-open .cube-node--one{transform:translate(-124px,-126px)}.cube-system.is-open .cube-node--two{transform:translate(14px,-126px)}.cube-system.is-open .cube-node--three{transform:translate(-124px,70px)}.cube-system.is-open .cube-node--four{transform:translate(14px,70px)}.profile-column:before{background:radial-gradient(ellipse at center,rgba(231,248,245,.44),transparent 78%)}}
@media (hover:none){.skill-row:hover{transform:none}}
@media (prefers-reduced-transparency:reduce){.photo-frame,.cube-node{background:#e5f4f1;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.photo-stream{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.photo-stream__track{animation:none}.photo-frame:nth-child(n+6){display:none}.cube-trigger:after{animation:none}}

/* V11: restore one-viewport page proportions and raise text clarity. */
.profile-backdrop{filter:brightness(1.14) saturate(.9) contrast(.98)}
.profile-page:before{background:linear-gradient(90deg,rgba(222,242,241,.3),rgba(83,151,174,.06) 28%,rgba(91,158,178,.1) 50%,rgba(85,153,174,.06) 72%,rgba(222,242,241,.3)),linear-gradient(180deg,rgba(20,83,116,.08),rgba(211,239,239,.04) 52%,rgba(22,76,103,.18))}
.profile-heading h2,.profile-column h3{color:#072f49;font-weight:500;text-shadow:0 2px 15px rgba(239,253,251,.78)}
.profile-heading p,.column-en{color:#164f68;font-weight:600;text-shadow:0 1px 9px rgba(241,255,253,.92)}
.profile-column:before{inset:-24px -38px;background:radial-gradient(ellipse at center,rgba(235,249,247,.73),rgba(224,244,242,.44) 54%,transparent 78%);filter:blur(12px)}
.experience-item p{color:#082f47;font-size:clamp(15px,1.15vw,17px);font-weight:500;line-height:1.48;text-shadow:0 1px 8px rgba(244,255,253,.96)}
.experience-item time{color:#604816;font-weight:600;text-shadow:0 1px 8px rgba(255,250,225,.94)}
.skill-row p{color:#082f47;font-size:clamp(15px,1.15vw,17px);font-weight:500;text-shadow:0 1px 8px rgba(244,255,253,.96)}
.skill-row small{color:#245b70;font-size:12px;font-weight:500}
.photo-frame figcaption{display:none}
.cube-hint{color:#0a405a;font-weight:600;text-shadow:0 1px 8px rgba(244,255,253,.96)}
.next-page-peek{z-index:210;color:#f2ffff;background:rgba(12,67,91,.9);box-shadow:0 -8px 28px rgba(10,58,78,.2),inset 0 1px 0 rgba(236,255,252,.2)}
.next-page-peek span{font-weight:500}.next-page-peek small{color:#d0edef}

@media (min-width:681px){
  .profile-page{height:calc(100dvh - 48px);min-height:560px;padding-top:clamp(58px,8.5vh,76px);padding-bottom:42px}
  .profile-heading h2{font-size:clamp(40px,4.15vw,58px)}
  .profile-heading p{margin-top:6px}
  .photo-stream{top:clamp(126px,18.5vh,154px);height:clamp(72px,10vh,92px)}
  .photo-stream__track{padding-block:4px}
  .photo-frame{height:clamp(64px,9vh,82px);border-radius:15px}
  .profile-layout{position:absolute;left:50%;top:clamp(225px,32vh,276px);bottom:42px;width:min(1320px,calc(100% - clamp(48px,14vw,224px)));height:auto;min-height:0;margin:0;transform:translateX(-50%);align-items:stretch}
  .profile-column{align-self:start;padding-top:0}
  .profile-column h3{font-size:clamp(27px,2.45vw,37px)}
  .column-en{margin:5px 0 clamp(14px,2vh,20px)}
  .experience-list{gap:clamp(11px,1.55vh,17px)}
  .skill-list{gap:clamp(9px,1.35vh,15px)}
  .skill-row{min-height:44px}
  .cube-system{height:min(252px,calc(100dvh - 365px))}
}

@media (min-width:681px) and (max-height:620px){
  .profile-page{min-height:520px;padding-top:52px}
  .profile-heading h2{font-size:40px}
  .photo-stream{top:112px;height:66px}
  .photo-frame{height:58px}
  .profile-layout{top:190px;bottom:40px}
  .profile-column h3{font-size:27px}
  .experience-item p,.skill-row p{font-size:14px}
  .cube-system{height:210px}
}

@media (max-width:680px){
  .profile-backdrop{filter:brightness(1.1) saturate(.86) contrast(.99)}
  .profile-heading h2{font-weight:500}
  .profile-column:before{background:radial-gradient(ellipse at center,rgba(235,249,247,.7),rgba(224,244,242,.4) 58%,transparent 80%)}
}

/* V12: full-bleed sections and a seven-image seamless gallery. */
main{display:block;background:#76bce7}
@media (min-width:681px){
  .hero{height:100dvh;min-height:100dvh;margin:0}
  .profile-page{height:100dvh;min-height:560px;padding-bottom:40px;margin:0}
  .photo-stream{left:50%;right:auto;top:clamp(126px,18.5vh,154px);width:min(1500px,100%);height:clamp(132px,21vh,168px);transform:translateX(-50%)}
  .profile-layout{top:clamp(285px,40vh,335px);bottom:40px}
}
.photo-stream{--photo-gap:clamp(18px,1.7vw,26px);z-index:12;overflow:hidden;pointer-events:auto}
.photo-stream:before{display:none}
.photo-stream__track{display:flex;width:max-content;gap:var(--photo-gap);padding:10px 0;animation:photo-stream-travel 42s linear infinite;will-change:transform}
.photo-sequence{display:flex;flex:none;gap:var(--photo-gap)}
.photo-frame{--photo-y:0px;--photo-r:0deg;position:relative;z-index:1;flex:0 0 clamp(210px,19vw,285px);width:clamp(210px,19vw,285px);height:clamp(112px,18vh,148px);margin:0;overflow:hidden;border:1px solid rgba(238,255,253,.82);border-radius:16px;background:rgba(213,239,238,.45);box-shadow:0 15px 34px rgba(13,64,86,.18),inset 0 1px 0 rgba(255,255,255,.78);transform:translateY(var(--photo-y)) rotate(var(--photo-r)) scale(1);transform-origin:center;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s,filter .42s;outline:none;backdrop-filter:blur(10px)}
.photo-frame:hover,.photo-frame:focus-visible{z-index:8;transform:translateY(var(--photo-y)) rotate(0deg) scale(1.075);box-shadow:0 22px 48px rgba(10,55,79,.28),0 0 0 2px rgba(235,255,252,.72);filter:saturate(1.06)}
.photo-frame:focus-visible{outline:2px solid #0c5973;outline-offset:3px}
.photo-frame img{width:100%;height:100%;object-fit:cover;filter:brightness(1.03) saturate(.78) contrast(.97);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.photo-frame:hover img,.photo-frame:focus-visible img{transform:scale(1.025)}
.photo-frame--one{--photo-y:3px;--photo-r:-.45deg}.photo-frame--two{--photo-y:-2px;--photo-r:.3deg}.photo-frame--three{--photo-y:2px;--photo-r:-.25deg}.photo-frame--four{--photo-y:-1px;--photo-r:.38deg}.photo-frame--five{--photo-y:3px;--photo-r:-.32deg}.photo-frame--six{--photo-y:-2px;--photo-r:.24deg}.photo-frame--seven{--photo-y:1px;--photo-r:-.38deg}
.photo-frame--one img{object-position:4% 52%}.photo-frame--two img{object-position:20% 42%}.photo-frame--three img{object-position:37% 48%}.photo-frame--four img{object-position:54% 44%}.photo-frame--five img{object-position:70% 50%}.photo-frame--six img{object-position:84% 46%}.photo-frame--seven img{object-position:97% 54%}
.photo-stream:hover .photo-stream__track,.photo-stream:focus-within .photo-stream__track,.photo-stream.is-motion-paused .photo-stream__track{animation-play-state:paused}
.profile-column{min-height:clamp(160px,24vh,220px)}
.profile-column:before{inset:-22px -34px;background:radial-gradient(ellipse at center,rgba(235,249,247,.68),rgba(224,244,242,.32) 56%,transparent 80%)}
.profile-column h3{margin-bottom:0}
.column-en{margin-bottom:clamp(16px,2.3vh,24px)}
.profile-reserve{position:relative;min-height:clamp(112px,17vh,154px);padding:18px 4px 14px;border-top:1px solid rgba(17,75,98,.34);background:linear-gradient(180deg,rgba(226,246,244,.3),transparent 72%)}
.profile-reserve:after{content:"";position:absolute;left:0;right:38%;bottom:0;height:1px;background:linear-gradient(90deg,rgba(17,75,98,.22),transparent)}
.profile-reserve span{display:block;color:#305f71;font:600 10px/1.2 "Manrope",sans-serif;letter-spacing:.12em}
.profile-reserve p{margin:18px 0 0;color:#0b3850;font-size:clamp(15px,1.2vw,18px);font-weight:500}
.next-page-peek{bottom:0}
#projects{margin-top:0}
@keyframes photo-stream-travel{to{transform:translate3d(calc(-50% - (var(--photo-gap) / 2)),0,0)}}
@media (max-width:900px) and (min-width:681px){
  .photo-frame{flex-basis:clamp(190px,22vw,220px);width:clamp(190px,22vw,220px)}
  .profile-layout{top:clamp(276px,40vh,310px)}
}
@media (max-width:680px){
  main{background:#8fc9da}
  .photo-stream{width:calc(100% + 36px);height:156px;margin-top:28px}
  .photo-stream__track{padding-block:10px}
  .photo-frame{flex-basis:238px;width:238px;height:134px}
  .profile-layout{margin-top:30px}
  .profile-column{min-height:0}
  .profile-reserve{min-height:126px}
}
@media (prefers-reduced-motion:reduce){
  .photo-stream__track{animation:none;transform:none}
  .photo-sequence[aria-hidden="true"]{display:none}
  .photo-stream{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* V13: draggable photo conveyor, focused viewer and clearer cube invitation. */
.photo-stream{-webkit-mask-image:none;mask-image:none;background:transparent;touch-action:pan-y;cursor:grab}
.photo-stream__track{animation:none!important;transform:translate3d(0,0,0);user-select:none}
.photo-stream.is-dragging{cursor:grabbing}
.photo-stream.is-dragging .photo-frame{transition:none}
.photo-frame{isolation:isolate;cursor:pointer;transform:translateY(var(--photo-y)) rotate(var(--photo-r)) perspective(700px) rotateX(0) rotateY(0) scale(1)}
.photo-frame:before{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;background:radial-gradient(180px circle at var(--photo-spot-x,50%) var(--photo-spot-y,50%),rgba(231,255,252,.58),rgba(80,211,207,.17) 34%,transparent 70%);opacity:0;transition:opacity .24s ease;pointer-events:none}
.photo-frame:hover:before,.photo-frame:focus-visible:before{opacity:1}
.photo-frame:hover,.photo-frame:focus-visible{transform:translateY(var(--photo-y)) rotate(0) perspective(700px) rotateX(var(--photo-tilt-x,0deg)) rotateY(var(--photo-tilt-y,0deg)) scale(1.075)}
.photo-stream.is-dragging .photo-frame:hover{transform:translateY(var(--photo-y)) rotate(0) scale(1.025)}
.photo-viewer{visibility:hidden;position:fixed;z-index:400;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .26s ease,visibility .26s;pointer-events:none}
.photo-viewer.is-open{visibility:visible;opacity:1;pointer-events:auto}
.photo-viewer__backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(4,28,45,.46);backdrop-filter:blur(12px) saturate(.82);cursor:zoom-out}
.photo-viewer__panel{position:relative;width:min(48vw,760px);min-width:500px;max-height:78vh;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#b9dce8;box-shadow:0 30px 90px rgba(3,25,42,.36),0 0 0 1px rgba(232,255,252,.64);transform:translateY(18px) scale(.94);opacity:0;transition:transform .46s cubic-bezier(.16,1,.3,1),opacity .25s ease}
.photo-viewer.is-open .photo-viewer__panel{transform:none;opacity:1}
.photo-viewer__image{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(1.02) saturate(.86) contrast(.98);user-select:none}
.photo-viewer__panel:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 36%,rgba(9,62,84,.12));pointer-events:none}
.photo-viewer__close{position:absolute;z-index:3;top:14px;right:14px;width:42px;height:42px;display:grid;place-items:center;padding:0;color:#eaffff;border:1px solid rgba(235,255,253,.58);border-radius:50%;background:rgba(5,43,62,.58);box-shadow:0 8px 24px rgba(2,24,40,.2);backdrop-filter:blur(14px);cursor:pointer;transition:transform .2s ease,background .2s ease}
.photo-viewer__close:hover,.photo-viewer__close:focus-visible{background:rgba(5,50,70,.84);transform:scale(1.06);outline:2px solid rgba(226,255,250,.86);outline-offset:3px}
.photo-viewer__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.photo-viewer__index{position:absolute;z-index:3;left:18px;bottom:16px;padding:6px 10px;color:#ecffff;border-radius:999px;background:rgba(5,43,62,.54);backdrop-filter:blur(12px);font:600 10px/1 "Manrope",sans-serif;letter-spacing:.12em}
body.photo-viewer-open{overflow:hidden}
.cube-trigger:after{border-color:rgba(36,170,182,.64);box-shadow:0 0 0 0 rgba(28,157,174,.38)}
.cube-hint{bottom:-13px;display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;color:#0a405a;font-size:11px;font-weight:650;letter-spacing:.07em}
.cube-hint__arrow{width:18px;height:22px;color:#14687a;animation:cube-arrow-invite 1.8s cubic-bezier(.16,1,.3,1) infinite}
.cube-hint__arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
@keyframes cube-arrow-invite{0%,100%{transform:translateY(3px);opacity:.56}50%{transform:translateY(-2px);opacity:1}}
@keyframes cube-invite{0%{opacity:.9;box-shadow:0 0 0 0 rgba(28,157,174,.42)}70%,100%{opacity:0;box-shadow:0 0 0 20px rgba(28,157,174,0)}}
@media (max-width:680px){
  .photo-viewer__panel{width:90vw;min-width:0;max-height:68vh;aspect-ratio:4/3}
  .photo-viewer__close{top:10px;right:10px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .photo-stream__track{transform:none!important}
  .photo-viewer__panel{transition:opacity .18s ease;transform:none}
  .cube-hint__arrow{animation:none}
}

/* V14: local edge light, larger cyclic viewer and a sky-to-sky page bridge. */
.hero-profile-bridge{position:relative;z-index:18;height:120px;margin:-60px 0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,rgba(66,139,188,0),rgba(135,199,224,.34) 36%,rgba(187,228,235,.46) 58%,rgba(190,229,234,0));-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero-profile-bridge:before{content:"";position:absolute;inset:18px -8% 10px;background:radial-gradient(ellipse at 20% 55%,rgba(244,252,255,.46),transparent 31%),radial-gradient(ellipse at 66% 48%,rgba(230,248,251,.38),transparent 35%),radial-gradient(ellipse at 92% 58%,rgba(239,251,252,.32),transparent 27%);filter:blur(16px)}
.hero-profile-bridge span{position:absolute;border-radius:50%;background:rgba(237,250,253,.32);filter:blur(20px)}
.hero-profile-bridge span:first-child{left:-8%;top:40px;width:48%;height:42px}.hero-profile-bridge span:last-child{right:-10%;top:28px;width:54%;height:48px}
.photo-stream,.photo-stream__track,.photo-sequence{background:none!important;background-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.photo-stream{mix-blend-mode:normal}
.photo-frame{border-color:rgba(220,247,247,.32);box-shadow:0 14px 32px rgba(12,62,83,.15);transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,filter .3s ease}
.photo-frame:before{z-index:2;inset:1px;background:radial-gradient(120px circle at var(--photo-spot-x,50%) var(--photo-spot-y,50%),rgba(232,255,252,.2),rgba(74,196,197,.07) 38%,transparent 72%);opacity:0}
.photo-frame:hover:before,.photo-frame:focus-visible:before{opacity:.42}
.photo-frame:after{content:"";position:absolute;z-index:3;inset:0;padding:1.5px;border-radius:inherit;background:radial-gradient(130px circle at var(--photo-spot-x,50%) var(--photo-spot-y,50%),rgba(235,255,249,.95),rgba(77,211,207,.74) 30%,rgba(91,160,244,.44) 52%,transparent 76%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .24s ease;pointer-events:none}
.photo-frame:hover:after,.photo-frame:focus-visible:after{opacity:.82}
.photo-frame:hover,.photo-frame:focus-visible{box-shadow:0 18px 40px rgba(10,57,79,.22)}
.photo-viewer__panel{width:60vw;min-width:min(620px,92vw);max-height:80vh;aspect-ratio:17/9}
.photo-viewer__nav{position:absolute;z-index:4;top:50%;width:56px;height:86px;display:grid;place-items:center;padding:0;color:rgba(235,255,252,.86);border:0;background:transparent;transform:translateY(-50%);cursor:pointer;transition:color .2s ease,transform .22s cubic-bezier(.16,1,.3,1),filter .22s ease}
.photo-viewer__nav--prev{left:calc(20vw - 70px)}.photo-viewer__nav--next{right:calc(20vw - 70px)}
.photo-viewer__nav svg{width:28px;height:52px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.photo-viewer__nav:hover,.photo-viewer__nav:focus-visible{color:#fff;transform:translateY(-50%) scale(1.09);filter:drop-shadow(0 7px 14px rgba(71,222,217,.48));outline:2px solid rgba(225,255,250,.64);outline-offset:4px;border-radius:14px}
.cube-hint{bottom:-16px;gap:3px;padding:4px 9px 5px;color:#073b53;border-radius:10px;background:rgba(222,245,244,.5);box-shadow:0 7px 20px rgba(10,66,86,.11);font-size:12px;font-weight:700;letter-spacing:.055em;text-shadow:0 1px 8px rgba(244,255,253,.95);backdrop-filter:blur(8px)}
.cube-hint__arrow{color:#0d6276;filter:drop-shadow(0 3px 6px rgba(29,137,153,.24))}
@media (min-width:681px){
  .photo-stream{height:clamp(132px,20vh,158px)}
  .photo-stream__track{padding-block:6px}
}
@media (max-width:680px){
  .hero-profile-bridge{height:82px;margin:-41px 0}
  .photo-stream{height:146px}
  .photo-stream__track{padding-block:6px}
  .photo-viewer__panel{width:92vw;min-width:0;max-height:72vh;aspect-ratio:4/3}
  .photo-viewer__nav{top:50%;width:42px;height:62px;color:#fff;background:rgba(5,43,62,.36);backdrop-filter:blur(9px)}
  .photo-viewer__nav--prev{left:2px}.photo-viewer__nav--next{right:2px}
  .photo-viewer__nav svg{width:18px;height:36px}
  .cube-hint{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .hero-profile-bridge span{display:none}
  .photo-viewer__nav{transition:none}
}

/* V14 visual QA correction: cloud wisps cross the seam without forming a full-width band. */
.hero-profile-bridge{height:0;margin:0;overflow:visible;background:none;-webkit-mask-image:none;mask-image:none}
.hero-profile-bridge:before{inset:auto -5%;top:-76px;height:152px;background:radial-gradient(ellipse at 8% 52%,rgba(242,252,255,.38),transparent 20%),radial-gradient(ellipse at 35% 45%,rgba(225,245,250,.28),transparent 24%),radial-gradient(ellipse at 70% 56%,rgba(236,250,252,.3),transparent 23%),radial-gradient(ellipse at 96% 44%,rgba(225,247,251,.34),transparent 19%);filter:blur(22px);opacity:.78}
.hero-profile-bridge span:first-child{left:0;top:-34px;width:38%;height:58px;opacity:.46}.hero-profile-bridge span:last-child{right:0;top:-28px;width:42%;height:54px;opacity:.4}
@media (min-width:681px){
  .photo-stream{--v14-photo-height:clamp(112px,18vh,148px);height:var(--v14-photo-height);overflow:clip;overflow-clip-margin:12px}
  .photo-stream__track{padding-block:0}
  .photo-frame{height:var(--v14-photo-height)}
}
@media (max-width:680px){
  .hero-profile-bridge{height:0;margin:0}
  .hero-profile-bridge:before{top:-54px;height:108px}
  .photo-stream{height:134px;overflow:clip;overflow-clip-margin:10px}
  .photo-stream__track{padding-block:0}
}

/* V14 final seam correction: both backgrounds meet at the same atmospheric blue. */
.hero-profile-bridge:before{content:"";position:absolute;left:0;right:0;top:-138px;height:138px;background:linear-gradient(180deg,rgba(103,174,211,0),rgba(103,174,211,.18) 48%,rgba(103,174,211,.88));filter:none;opacity:1}
.hero-profile-bridge:after{content:"";position:absolute;left:0;right:0;top:0;height:138px;background:linear-gradient(180deg,rgba(103,174,211,.88),rgba(103,174,211,.2) 54%,rgba(103,174,211,0));pointer-events:none}
.hero-profile-bridge span{z-index:1}
@media (min-width:681px){.photo-stream{top:clamp(136px,19.5vh,158px)}}
@media (max-width:680px){
  .hero-profile-bridge:before{top:-92px;height:92px}
  .hero-profile-bridge:after{height:92px}
}

/* V15: coastal observatory project gallery. Native CSS, soft-glass approximation. */
.projects-page{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100dvh;
  min-height:620px;
  overflow:hidden;
  scroll-margin-top:0;
  color:#082f48;
  background:#8ec9e7;
  border:0;
  box-shadow:none;
}
.projects-backdrop{
  position:absolute;
  z-index:-3;
  inset:-2.5%;
  width:105%;
  height:105%;
  object-fit:cover;
  object-position:center 52%;
  filter:brightness(1.04) saturate(.83) contrast(.94);
  transform:translate3d(0,0,0) scale(1.015);
}
.projects-atmosphere{
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(62,145,199,.18),rgba(211,241,247,.09) 24%,rgba(7,55,82,.16) 100%),
    radial-gradient(ellipse at 50% 42%,rgba(232,251,252,.12),rgba(45,125,169,.12) 78%);
}
.projects-shell{
  width:min(1420px,calc(100% - clamp(40px,7vw,112px)));
  height:100%;
  margin:0 auto;
  padding:clamp(72px,10vh,94px) 0 clamp(24px,4vh,38px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(16px,2.6vh,25px);
}
.projects-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  padding-inline:2px;
}
.projects-heading h2{
  margin:0;
  max-width:12ch;
  color:#07334d;
  font-size:clamp(36px,4vw,58px);
  font-weight:560;
  line-height:1.05;
  letter-spacing:-.03em;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(232,251,253,.62);
}
.projects-heading p{
  margin:0 2px 5px;
  color:#164e68;
  font:650 clamp(12px,1vw,15px)/1.2 "Manrope",sans-serif;
  letter-spacing:.08em;
}
.projects-grid{
  display:grid;
  min-height:0;
  grid-template-columns:minmax(250px,.72fr) minmax(470px,1.42fr);
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.45vw,21px);
}
.project-tile{
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:16px;
  padding:clamp(18px,2vw,28px);
  color:#092f45;
  text-align:left;
  border:0;
  border-radius:16px;
  background:rgba(231,246,246,.87);
  box-shadow:0 18px 42px rgba(13,72,102,.18),inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  cursor:pointer;
  transform:translate3d(0,0,0);
  transition:transform .34s cubic-bezier(.16,1,.3,1),background-color .25s ease,box-shadow .3s ease;
}
.project-tile:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 42%,rgba(53,183,182,.1));
  opacity:.72;
  transition:opacity .25s ease;
}
.project-tile__visual{
  position:absolute;
  z-index:-2;
  inset:0;
  opacity:.2;
  background:
    linear-gradient(145deg,transparent 36%,rgba(19,108,139,.19)),
    radial-gradient(circle at 82% 18%,rgba(96,205,192,.28),transparent 34%);
  transition:opacity .3s ease,transform .46s cubic-bezier(.16,1,.3,1);
}
.project-tile__copy{display:grid;gap:4px;align-self:end}
.project-tile__copy strong{font-size:clamp(24px,2.35vw,38px);font-weight:570;line-height:1;letter-spacing:-.025em}
.project-tile__copy small{color:#2f6377;font:650 11px/1.3 "Manrope",sans-serif;letter-spacing:.065em}
.project-tile__action{
  position:relative;
  align-self:end;
  padding-right:24px;
  color:#245c70;
  font:650 12px/1.2 "Manrope",sans-serif;
  white-space:nowrap;
}
.project-tile__action:before,.project-tile__action:after{content:"";position:absolute;right:1px;top:50%;background:currentColor;transform-origin:right center}
.project-tile__action:before{width:14px;height:1px}
.project-tile__action:after{width:7px;height:1px;transform:translateY(-.5px) rotate(42deg)}
.project-tile--one{grid-column:1;grid-row:1/4}
.project-tile--two{grid-column:1;grid-row:4/7}
.project-tile--three{grid-column:2;grid-row:1/3}
.project-tile--four{grid-column:2;grid-row:3/5}
.project-tile--five{grid-column:2;grid-row:5/7}
.project-tile:hover,.project-tile:focus-visible{
  z-index:2;
  background:rgba(239,250,249,.93);
  box-shadow:0 24px 54px rgba(8,64,95,.24),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-3px) scale(1.008);
  outline:none;
}
.project-tile:hover:before,.project-tile:focus-visible:before{opacity:1}
.project-tile:hover .project-tile__visual,.project-tile:focus-visible .project-tile__visual{opacity:.4;transform:scale(1.025)}
.project-tile:focus-visible{box-shadow:0 24px 54px rgba(8,64,95,.24),0 0 0 3px rgba(5,84,113,.68),inset 0 1px 0 rgba(255,255,255,.9)}
.project-tile:active{transform:translateY(-1px) scale(.992)}
.project-tile.is-source{opacity:.18;pointer-events:none}

.project-viewer{
  visibility:hidden;
  position:fixed;
  z-index:430;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,56px);
  opacity:0;
  pointer-events:none;
  perspective:1500px;
  transition:opacity .2s ease,visibility .2s;
}
.project-viewer.is-open{visibility:visible;opacity:1;pointer-events:auto}
.project-viewer__backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(6,38,57,.34);backdrop-filter:blur(12px) saturate(.78);cursor:pointer}
.project-viewer__panel{
  position:relative;
  width:min(1120px,86vw);
  height:min(690px,78vh);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:0;
  color:#082f48;
  border-radius:16px;
  background:rgba(231,247,246,.93);
  box-shadow:0 34px 100px rgba(3,34,54,.36),inset 0 1px 0 rgba(255,255,255,.86);
  transform-style:preserve-3d;
}
.project-viewer__back{
  position:absolute;
  z-index:3;
  top:18px;
  left:18px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 15px;
  color:#0c455e;
  border:0;
  border-radius:12px;
  background:rgba(237,250,249,.88);
  box-shadow:0 8px 24px rgba(7,62,84,.14);
  font:700 12px/1 "Manrope",sans-serif;
  cursor:pointer;
}
.project-viewer__back i{position:relative;width:16px;height:12px}
.project-viewer__back i:before{content:"";position:absolute;left:1px;top:5px;width:14px;height:1.5px;background:currentColor}
.project-viewer__back i:after{content:"";position:absolute;left:1px;top:2px;width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.project-viewer__back:hover,.project-viewer__back:focus-visible{color:#062f44;background:#f4fcfb;outline:2px solid rgba(9,85,111,.62);outline-offset:3px}
.project-viewer__back:active{transform:translateY(1px)}
.project-viewer__media{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  overflow:hidden;
  color:#397387;
  background:
    linear-gradient(145deg,rgba(158,214,224,.54),rgba(221,243,241,.52)),
    url("assets/projects-glacial-sea-v17-2560.webp") center/cover;
}
.project-viewer__media:after{content:"";position:absolute;inset:18px;border:1px solid rgba(232,253,250,.52);border-radius:12px;pointer-events:none}
.project-viewer__media span{padding:10px 14px;border-radius:12px;background:rgba(232,249,247,.72);font:650 12px/1.2 "Manrope",sans-serif;letter-spacing:.06em;backdrop-filter:blur(10px)}
.project-viewer__copy{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(32px,4vw,58px)}
.project-viewer__en{margin:0 0 10px;color:#2b657a;font:650 12px/1.2 "Manrope",sans-serif;letter-spacing:.08em}
.project-viewer__copy h2{margin:0;color:#07334d;font-size:clamp(38px,4.6vw,68px);font-weight:560;line-height:1;letter-spacing:-.03em}
.project-viewer__summary{max-width:28ch;margin:24px 0 0;color:#315f70;font-size:clamp(16px,1.25vw,19px);font-weight:520;line-height:1.7}
.project-viewer__status{margin-top:28px;padding-top:16px;color:#477487;border-top:1px solid rgba(15,82,108,.24);font:650 11px/1.4 "Manrope",sans-serif;letter-spacing:.045em}
body.project-viewer-open{overflow:hidden}

@media (max-width:900px){
  .projects-page{height:auto;min-height:100dvh;overflow:visible}
  .projects-shell{width:min(100% - 32px,720px);height:auto;min-height:100dvh;padding:82px 0 34px}
  .projects-heading{align-items:start;flex-direction:column;gap:8px}
  .projects-heading h2{font-size:clamp(34px,8vw,48px)}
  .projects-heading p{margin:0}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:none;gap:14px}
  .project-tile,.project-tile--one,.project-tile--two,.project-tile--three,.project-tile--four,.project-tile--five{grid-column:1;grid-row:auto;min-height:154px}
  .project-tile--one,.project-tile--two{min-height:210px}
  .project-viewer__panel{width:min(92vw,680px);height:min(82dvh,720px);grid-template-columns:1fr;grid-template-rows:minmax(220px,1.05fr) minmax(240px,.95fr)}
  .project-viewer__copy{padding:30px}
}
@media (max-width:520px){
  .projects-shell{width:calc(100% - 24px);padding-top:74px}
  .project-tile{padding:20px}
  .project-tile__copy strong{font-size:28px}
  .project-tile__action{font-size:11px}
  .project-viewer{padding:12px}
  .project-viewer__panel{width:100%;height:min(86dvh,700px)}
  .project-viewer__copy{padding:26px 22px}
  .project-viewer__back{top:12px;left:12px}
}
@media (hover:none){.project-tile:hover{transform:none}}
@media (prefers-reduced-transparency:reduce){
  .project-tile{background:#e7f6f5;backdrop-filter:none}
  .project-viewer__panel{background:#e7f7f6}
  .project-viewer__backdrop{background:rgba(6,38,57,.72);backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .projects-backdrop,.project-tile,.project-tile__visual,.project-viewer{transition:none!important;animation:none!important}
  .project-tile:hover,.project-tile:focus-visible{transform:none}
}

/* V16: a distinct coastal-mountain world and a compact project-page frame. */
body.project-active .site-header.scrolled{
  height:52px;
  color:#123d53;
  background:rgba(241,250,251,.83);
  border-color:rgba(15,73,96,.12);
  box-shadow:0 10px 30px rgba(18,77,102,.1);
  backdrop-filter:blur(18px) saturate(1.12);
}
.projects-backdrop{
  object-position:center 52%;
  filter:brightness(1.01) saturate(.82) contrast(.94);
}
.projects-atmosphere{
  background:
    linear-gradient(180deg,rgba(151,210,237,.06),rgba(224,245,244,.04) 31%,rgba(25,101,132,.11) 100%),
    radial-gradient(ellipse at 48% 42%,rgba(239,252,251,.06),rgba(50,136,164,.06) 82%);
}
.projects-shell{
  padding-top:clamp(66px,8.8vh,82px);
  padding-bottom:clamp(62px,8.5vh,76px);
}
.project-tile{
  background:rgba(231,247,245,.72);
  box-shadow:0 16px 38px rgba(10,75,102,.16),inset 0 1px 0 rgba(255,255,255,.66);
  backdrop-filter:blur(13px) saturate(110%);
  -webkit-backdrop-filter:blur(13px) saturate(110%);
}
.project-tile:before{opacity:.48}
.project-tile__visual{opacity:.15}
.project-tile:hover,.project-tile:focus-visible{
  background:rgba(243,252,250,.86);
  box-shadow:0 22px 48px rgba(8,68,96,.2),inset 0 1px 0 rgba(255,255,255,.82);
}
.projects-next-page{
  width:min(600px,64vw);
  color:#f3ffff;
  background:rgba(13,82,103,.76);
  border-color:rgba(213,247,242,.22);
  box-shadow:0 -8px 26px rgba(6,58,82,.17),inset 0 1px 0 rgba(239,255,252,.22);
}
.projects-next-page:hover,.projects-next-page:focus-visible{
  background:rgba(19,104,119,.9);
  outline-color:rgba(220,248,237,.76);
}
.projects-next-page small{color:#d4f0ee}
@media (max-width:900px){
  .projects-page{overflow:hidden}
  .projects-shell{padding-top:72px;padding-bottom:72px}
  .projects-next-page{position:absolute;width:min(560px,calc(100% - 32px))}
}
@media (max-width:680px){
  body.project-active .site-header.scrolled{height:48px}
  .projects-shell{padding-top:66px;padding-bottom:70px}
  .projects-next-page{width:calc(100% - 42px)}
}
@media (prefers-reduced-transparency:reduce){
  .project-tile{background:#e7f6f4}
  .projects-next-page{background:#0f6077}
}

/* V17: pure blue-white glacial background and hard project-page anchors. */
.projects-backdrop{
  inset:-2%;
  width:104%;
  height:104%;
  object-position:center 48%;
  filter:brightness(1.03) saturate(.8) contrast(.94);
}
.projects-atmosphere{
  background:
    linear-gradient(180deg,rgba(185,225,245,.03),rgba(235,250,252,.04) 38%,rgba(18,91,132,.1) 100%),
    radial-gradient(ellipse at 50% 40%,rgba(246,254,255,.07),rgba(49,132,177,.035) 84%);
}
.projects-shell{
  padding-top:clamp(82px,13vh,94px);
  padding-bottom:clamp(62px,8.5vh,76px);
  gap:clamp(12px,2vh,18px);
}
.projects-heading{
  position:relative;
  z-index:3;
}
.projects-heading h2{line-height:1.08}
.projects-next-page{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:-1px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  border-bottom:0;
  border-radius:16px 16px 0 0;
}
@media (max-width:900px){
  .projects-shell{padding-top:82px;padding-bottom:72px}
  .projects-next-page{bottom:-1px!important}
}
@media (max-width:680px){
  .projects-shell{padding-top:72px;padding-bottom:70px}
}

/* V18: quieter bottom invitation and circular project-to-project navigation. */
.projects-next-page{
  bottom:0!important;
  width:min(620px,66vw);
  color:#123f55;
  border:1px solid rgba(255,255,255,.58);
  border-bottom:0;
  background:rgba(220,240,244,.86);
  box-shadow:0 -8px 28px rgba(18,78,104,.14),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.projects-next-page small{color:#3f7182}
.projects-next-page:hover,.projects-next-page:focus-visible{
  color:#092f45;
  background:rgba(235,248,249,.96);
  outline:2px solid rgba(35,101,123,.48);
  outline-offset:-4px;
}
.project-viewer__panel{
  width:min(1240px,88vw);
  height:min(760px,84dvh);
}
.project-viewer__copy{padding-bottom:clamp(108px,14vh,132px)}
.project-viewer__navigation{
  position:absolute;
  z-index:4;
  left:clamp(24px,3vw,42px);
  right:clamp(24px,3vw,42px);
  bottom:clamp(22px,3.4vh,34px);
  display:flex;
  align-items:end;
  justify-content:space-between;
  pointer-events:none;
}
.project-viewer__nav{
  min-width:150px;
  min-height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  color:#164c62;
  text-align:left;
  border:0;
  border-radius:12px;
  background:rgba(233,248,247,.74);
  box-shadow:0 10px 30px rgba(7,56,79,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  pointer-events:auto;
  transition:color .24s ease,background-color .24s ease,transform .32s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;
}
.project-viewer__nav--next{text-align:right}
.project-viewer__nav svg{width:34px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.project-viewer__nav span{display:grid;gap:5px}
.project-viewer__nav strong{font:650 12px/1.1 "Noto Sans SC",sans-serif;letter-spacing:.03em}
.project-viewer__nav small{color:#5a7f8d;font:600 10px/1.1 "Noto Sans SC",sans-serif;white-space:nowrap}
.project-viewer__nav:hover,.project-viewer__nav:focus-visible{
  color:#062f44;
  background:rgba(247,253,251,.96);
  box-shadow:0 15px 36px rgba(7,56,79,.18);
  outline:2px solid rgba(13,84,111,.56);
  outline-offset:3px;
  transform:translateY(-3px);
}
.project-viewer__nav:active{transform:translateY(-1px) scale(.98)}
@media (max-width:900px){
  .projects-next-page{bottom:0!important}
  .project-viewer__panel{width:min(92vw,720px);height:min(86dvh,760px)}
  .project-viewer__copy{padding-bottom:112px}
  .project-viewer__navigation{left:22px;right:22px;bottom:20px}
}
@media (max-width:520px){
  .projects-next-page{width:calc(100% - 42px)}
  .project-viewer__panel{width:100%;height:88dvh;grid-template-rows:minmax(180px,.9fr) minmax(280px,1.1fr)}
  .project-viewer__copy{padding:24px 20px 112px}
  .project-viewer__navigation{left:10px;right:10px;bottom:10px}
  .project-viewer__nav{min-width:0;min-height:70px;gap:8px;padding:8px}
  .project-viewer__nav svg{width:27px}
  .project-viewer__nav strong{font-size:11px}
  .project-viewer__nav small{font-size:9px}
}
@media (hover:none){.project-viewer__nav:hover{transform:none}}
@media (prefers-reduced-transparency:reduce){
  .projects-next-page{background:#dceff2}
  .project-viewer__nav{background:#e9f8f7}
}
@media (prefers-reduced-motion:reduce){
  .project-viewer__nav{transition:none}
}

/* V19: remove the project/future seam and separate the CTA from project cards. */
.projects-page{
  margin-bottom:0;
  border-bottom:0;
}
.projects-next-page{
  bottom:-1px!important;
  height:52px;
  color:#203f4b;
  border-color:rgba(255,255,255,.66);
  border-bottom:0;
  background:rgba(235,234,224,.94);
  box-shadow:0 -9px 28px rgba(8,56,80,.16),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(.82);
  -webkit-backdrop-filter:blur(18px) saturate(.82);
}
.projects-next-page small{color:#4b6c73}
.projects-next-page:hover,.projects-next-page:focus-visible{
  height:58px;
  color:#102f3d;
  background:rgba(246,244,235,.98);
  outline-color:rgba(36,87,103,.52);
}
#future{
  position:relative;
  border-top:0;
  background:linear-gradient(180deg,#4f91aa 0,#a9cbd0 42px,#d8e9df 108px,#e7f5ec 174px);
}
@media (max-width:900px){
  .projects-next-page{
    position:relative!important;
    left:50%!important;
    bottom:auto!important;
    margin:-52px 0 0!important;
  }
}

@media (max-width:680px){
  .projects-next-page{height:48px;margin-top:-48px!important}
  .projects-next-page:hover,.projects-next-page:focus-visible{height:52px}
  #future{background:linear-gradient(180deg,#4f91aa 0,#b4d1d1 34px,#deede3 92px,#e7f5ec 144px)}
}
@media (prefers-reduced-transparency:reduce){
  .projects-next-page{background:#ebeae0}
}

/* V20: corner-mounted project controls and stable, flash-free viewer motion. */
html{scrollbar-gutter:stable}
.project-viewer__copy{padding-bottom:clamp(32px,4vw,58px)}
.project-viewer__navigation{
  position:fixed;
  z-index:6;
  left:clamp(14px,3vw,42px);
  right:clamp(14px,3vw,42px);
  bottom:clamp(10px,2.7vh,22px);
}
.project-viewer__nav{
  background:rgba(235,248,247,.94);
  box-shadow:0 16px 42px rgba(3,34,54,.24);
}
@media (max-width:900px){
  .project-viewer__copy{padding:30px}
  .project-viewer__navigation{left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  .project-viewer__copy{padding:24px 20px}
  .project-viewer__navigation{left:6px;right:6px}
  .project-viewer__nav{min-height:64px}
}

/* V22: atmospheric bridge into the project page and continuous glacial motion. */
.profile-projects-bridge{
  position:relative;
  z-index:18;
  height:0;
  overflow:visible;
  pointer-events:none;
}
.profile-projects-bridge>.next-page-peek{pointer-events:auto}
.profile-projects-bridge:before{
  content:"";
  position:absolute;
  inset:-132px 0 auto;
  height:264px;
  background:
    radial-gradient(ellipse at 12% 52%,rgba(228,246,249,.46),transparent 31%),
    radial-gradient(ellipse at 55% 48%,rgba(205,235,242,.34),transparent 38%),
    radial-gradient(ellipse at 92% 54%,rgba(224,244,248,.42),transparent 29%),
    linear-gradient(180deg,rgba(113,172,194,0),rgba(134,193,211,.13) 24%,rgba(147,207,226,.58) 49%,rgba(134,199,226,.31) 72%,rgba(116,190,226,0));
}
.profile-projects-bridge:after{
  content:"";
  position:absolute;
  left:1.5%;
  right:1.5%;
  top:-88px;
  height:176px;
  background:
    radial-gradient(ellipse at 18% 50%,rgba(242,252,253,.4),transparent 25%),
    radial-gradient(ellipse at 58% 44%,rgba(224,244,248,.32),transparent 31%),
    radial-gradient(ellipse at 88% 56%,rgba(239,250,252,.36),transparent 23%);
  filter:blur(18px);
  opacity:.62;
  animation:v22-bridge-mist 18s cubic-bezier(.37,0,.63,1) infinite alternate;
  will-change:transform,opacity;
}
.projects-backdrop{
  animation:v22-project-drift 26s cubic-bezier(.37,0,.63,1) infinite alternate;
  will-change:transform;
}
.projects-atmosphere:before{
  content:"";
  position:absolute;
  inset:46% -7% -8%;
  background:
    radial-gradient(ellipse at 18% 46%,rgba(230,250,251,.4),transparent 32%),
    radial-gradient(ellipse at 56% 57%,rgba(168,222,232,.3),transparent 39%),
    radial-gradient(ellipse at 86% 43%,rgba(236,250,251,.32),transparent 29%);
  filter:blur(11px);
  mix-blend-mode:soft-light;
  opacity:.46;
  animation:v22-water-glide 16s cubic-bezier(.37,0,.63,1) infinite alternate;
  will-change:transform,opacity;
}
@keyframes v22-project-drift{
  0%{transform:translate3d(-.6%,-.18%,0) scale(1.022)}
  100%{transform:translate3d(.6%,.18%,0) scale(1.035)}
}
@keyframes v22-water-glide{
  0%{transform:translate3d(-1.1%,1px,0) scaleX(1.02);opacity:.34}
  100%{transform:translate3d(1.1%,-1px,0) scaleX(1.035);opacity:.5}
}
@keyframes v22-bridge-mist{
  0%{transform:translate3d(-1.2%,2px,0);opacity:.5}
  100%{transform:translate3d(1.2%,-2px,0);opacity:.66}
}
@media (max-width:680px){
  .profile-projects-bridge:before{inset:-96px 0 auto;height:192px}
  .profile-projects-bridge:after{top:-66px;height:132px;filter:blur(14px)}
  .projects-atmosphere:before{inset:42% -12% -6%}
}
@media (prefers-reduced-motion:reduce){
  .profile-projects-bridge:after,.projects-backdrop,.projects-atmosphere:before{animation:none!important}
  .projects-backdrop{transform:translate3d(0,0,0) scale(1.025)}
}

/* V23: clearer whole-scene motion while preserving the native 4K source. */
.projects-backdrop{
  animation:v23-project-float 14s cubic-bezier(.37,0,.63,1) -3.5s infinite alternate;
  animation-play-state:paused;
  backface-visibility:hidden;
  will-change:auto;
}
.projects-atmosphere:before{
  animation:v23-water-light 9s cubic-bezier(.37,0,.63,1) -2.25s infinite alternate;
  animation-play-state:paused;
  will-change:auto;
}
.profile-projects-bridge:after{animation-play-state:paused;will-change:auto}
body.project-active .projects-backdrop,
body.project-active .projects-atmosphere:before,
body.project-active .profile-projects-bridge:after{
  animation-play-state:running;
  will-change:transform;
}
@keyframes v23-project-float{
  0%{transform:translate3d(-1.15%,-.28%,0) scale(1.04)}
  50%{transform:translate3d(0,.22%,0) scale(1.045)}
  100%{transform:translate3d(1.15%,-.08%,0) scale(1.04)}
}
@keyframes v23-water-light{
  0%{transform:translate3d(-1.5%,1px,0) scaleX(1.025);opacity:.38}
  100%{transform:translate3d(1.5%,-1px,0) scaleX(1.04);opacity:.54}
}
@media (prefers-reduced-motion:reduce){
  .projects-backdrop,.projects-atmosphere:before,.profile-projects-bridge:after{animation:none!important;will-change:auto!important}
  .projects-backdrop{transform:translate3d(0,0,0) scale(1.025)}
}

/* V24: exchange the complete background systems of pages two and three. */
.profile-page{
  background:#8ec9e7;
}
.profile-backdrop{
  inset:-2%;
  width:104%;
  height:104%;
  object-position:center 48%;
  filter:brightness(1.03) saturate(.8) contrast(.94);
  animation:v23-project-float 14s cubic-bezier(.37,0,.63,1) -3.5s infinite alternate;
  animation-play-state:paused;
  backface-visibility:hidden;
  will-change:auto;
}
.profile-page:before{
  background:
    linear-gradient(180deg,rgba(185,225,245,.03),rgba(235,250,252,.04) 38%,rgba(18,91,132,.1) 100%),
    radial-gradient(ellipse at 50% 40%,rgba(246,254,255,.07),rgba(49,132,177,.035) 84%);
}
.profile-page:after{
  background:none;
  opacity:0;
  animation:none;
}
.profile-atmosphere{
  z-index:-1;
  filter:none;
  mix-blend-mode:normal;
}
.profile-atmosphere i{display:none}
.profile-atmosphere:before{
  content:"";
  position:absolute;
  inset:46% -7% -8%;
  background:
    radial-gradient(ellipse at 18% 46%,rgba(230,250,251,.4),transparent 32%),
    radial-gradient(ellipse at 56% 57%,rgba(168,222,232,.3),transparent 39%),
    radial-gradient(ellipse at 86% 43%,rgba(236,250,251,.32),transparent 29%);
  filter:blur(11px);
  mix-blend-mode:soft-light;
  opacity:.46;
  animation:v23-water-light 9s cubic-bezier(.37,0,.63,1) -2.25s infinite alternate;
  animation-play-state:paused;
  will-change:auto;
}
body.profile-active .profile-backdrop,
body.profile-active .profile-atmosphere:before{
  animation-play-state:running;
  will-change:transform;
}
.projects-page{
  background:#8fc9da;
}
.projects-backdrop{
  inset:-4%;
  width:108%;
  height:108%;
  object-position:center;
  filter:brightness(1.14) saturate(.9) contrast(.98);
  animation:tech-deck-drift 18s cubic-bezier(.37,0,.63,1) infinite alternate;
  animation-play-state:paused;
  backface-visibility:hidden;
  will-change:auto;
}
.projects-atmosphere{
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(222,242,241,.3),rgba(83,151,174,.06) 28%,rgba(91,158,178,.1) 50%,rgba(85,153,174,.06) 72%,rgba(222,242,241,.3)),
    linear-gradient(180deg,rgba(20,83,116,.08),rgba(211,239,239,.04) 52%,rgba(22,76,103,.18));
}
.projects-atmosphere:before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(circle at 6% 54%,rgba(79,193,204,.18),transparent 31%),
    radial-gradient(circle at 91% 18%,rgba(92,178,227,.16),transparent 30%),
    radial-gradient(circle at 54% 92%,rgba(214,189,120,.1),transparent 28%);
  filter:blur(48px);
  mix-blend-mode:screen;
  opacity:.72;
  animation:v24-tech-breathe 11s cubic-bezier(.37,0,.63,1) infinite alternate;
  animation-play-state:paused;
  will-change:auto;
}
.projects-atmosphere:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at center,rgba(23,51,62,.16) 0 1px,transparent 1.5px),
    linear-gradient(105deg,transparent 42%,rgba(172,235,238,.12) 49.5%,rgba(230,249,245,.25) 50%,rgba(172,235,238,.1) 50.5%,transparent 58%);
  background-size:32px 32px,220% 100%;
  background-position:center,-120% 0;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000);
  mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000);
  mix-blend-mode:multiply;
  opacity:.11;
  animation:tech-scan 10s ease-in-out infinite;
  animation-play-state:paused;
  will-change:auto;
}
body.project-active .projects-backdrop,
body.project-active .projects-atmosphere:before,
body.project-active .projects-atmosphere:after{
  animation-play-state:running;
  will-change:transform;
}
@keyframes v24-tech-breathe{
  to{transform:translate3d(4vw,-2vh,0) scale(1.13);opacity:.82}
}
@media (max-width:680px){
  .profile-backdrop{inset:-2%;width:104%;height:104%;object-position:center 48%}
  .profile-atmosphere:before{inset:42% -12% -6%}
  .projects-backdrop{inset:0;width:100%;height:100%;object-position:center;animation:none;transform:none}
  .projects-atmosphere:after{-webkit-mask-image:none;mask-image:none;opacity:.17}
}
@media (prefers-reduced-motion:reduce){
  .profile-backdrop,.profile-atmosphere:before,.projects-backdrop,.projects-atmosphere:before,.projects-atmosphere:after{animation:none!important;will-change:auto!important}
  .profile-backdrop{transform:translate3d(0,0,0) scale(1.025)}
}

/* V25: light future-CBD boulevard background; all earlier pages remain unchanged. */
#future{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-top:0;
  background:#dceff7;
}
#future:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(79,145,170,.58) 0,rgba(190,220,229,.24) 64px,rgba(239,249,252,.08) 150px,transparent 230px),
    linear-gradient(90deg,rgba(246,252,255,.56),rgba(246,252,255,.28) 28%,rgba(246,252,255,.18) 50%,rgba(246,252,255,.28) 72%,rgba(246,252,255,.56));
}
.future-backdrop{
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:brightness(1.035) saturate(.82) contrast(.92);
}
#future>.detail-index,
#future>.detail-copy,
#future>.placeholder-list{
  position:relative;
  z-index:1;
}
@media (max-width:680px){
  #future:before{
    background:
      linear-gradient(180deg,rgba(79,145,170,.58) 0,rgba(204,229,235,.22) 58px,transparent 160px),
      rgba(246,252,255,.38);
  }
  .future-backdrop{object-position:center}
}

/* V26: vertical title and a single translucent planning rail. */
#future{
  display:block;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(104px,11vh,138px) clamp(24px,6vw,96px) clamp(72px,8vh,104px);
  color:#123a52;
}
#future:before{
  background:
    linear-gradient(180deg,rgba(79,145,170,.58) 0,rgba(202,228,235,.25) 62px,rgba(241,249,252,.08) 154px,transparent 230px),
    radial-gradient(ellipse at 67% 53%,rgba(243,250,252,.42),rgba(238,248,251,.14) 56%,transparent 79%),
    linear-gradient(90deg,rgba(238,249,252,.34),rgba(244,251,253,.1) 38%,rgba(244,251,253,.14) 68%,rgba(235,247,251,.32));
}
.future-backdrop{
  filter:brightness(1.06) saturate(.68) contrast(.86);
}
.future-layout{
  width:min(1220px,90vw);
  min-height:calc(100svh - clamp(176px,19vh,242px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(190px,.34fr) minmax(520px,1fr);
  gap:clamp(36px,6vw,92px);
  align-items:stretch;
}
.future-title-panel,
.future-plan-panel{
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(248,253,255,.34),rgba(232,246,250,.2));
  box-shadow:0 24px 64px rgba(27,82,109,.15),inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(.82);
  -webkit-backdrop-filter:blur(22px) saturate(.82);
}
.future-title-panel{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.future-title-panel:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:clamp(24px,5vh,54px);
  width:1px;
  height:clamp(34px,6vh,64px);
  background:linear-gradient(180deg,rgba(39,105,137,.58),transparent);
}
.future-title{
  margin:0 0 clamp(52px,8vh,84px);
  color:#123a52;
  font-size:clamp(54px,5vw,78px);
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-shadow:0 2px 24px rgba(245,252,255,.9);
}
.future-plan-panel{
  align-self:center;
  padding:clamp(18px,2.4vw,32px) clamp(24px,3.5vw,48px);
}
.future-plan-list{
  margin:0;
  padding:0;
  list-style:none;
}
.future-plan-item{
  display:grid;
  grid-template-columns:clamp(44px,4vw,62px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);
  align-items:center;
  min-height:clamp(138px,16vh,178px);
  padding:clamp(24px,3vh,38px) 0;
}
.future-plan-item+ .future-plan-item{
  border-top:1px solid rgba(29,85,112,.2);
}
.future-plan-number{
  align-self:start;
  padding-top:7px;
  color:#2b7192;
  font:600 12px/1 var(--serif-en);
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}
.future-plan-item h3{
  margin:0 0 10px;
  color:#11364c;
  font-size:clamp(28px,3vw,43px);
  font-weight:500;
  line-height:1.16;
  letter-spacing:.03em;
}
.future-plan-item p{
  max-width:66ch;
  margin:0;
  color:#355d72;
  font-size:clamp(15px,1.45vw,19px);
  line-height:1.7;
}
@media (max-width:900px){
  #future{padding-right:4vw;padding-left:4vw}
  .future-layout{width:92vw;grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);gap:24px}
  .future-title{font-size:clamp(48px,7vw,64px)}
}
@media (max-width:680px){
  #future{padding:88px 16px 64px}
  #future:before{
    background:
      linear-gradient(180deg,rgba(79,145,170,.58) 0,rgba(205,230,237,.23) 58px,transparent 152px),
      rgba(241,250,252,.28);
  }
  .future-backdrop{filter:brightness(1.08) saturate(.62) contrast(.84)}
  .future-layout{
    width:100%;
    min-height:620px;
    grid-template-columns:96px minmax(0,1fr);
    gap:12px;
  }
  .future-title-panel,.future-plan-panel{border-radius:14px;backdrop-filter:blur(18px) saturate(.8);-webkit-backdrop-filter:blur(18px) saturate(.8)}
  .future-title{margin-bottom:46px;font-size:38px;letter-spacing:.12em}
  .future-title-panel:after{bottom:22px;height:34px}
  .future-plan-panel{padding:8px 14px}
  .future-plan-item{grid-template-columns:1fr;gap:8px;min-height:0;padding:24px 0}
  .future-plan-number{padding-top:0;font-size:10px}
  .future-plan-item h3{margin-bottom:7px;font-size:25px}
  .future-plan-item p{font-size:14px;line-height:1.6}
}
@media (prefers-reduced-transparency:reduce){
  .future-title-panel,.future-plan-panel{background:#e8f4f7;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* V27: homepage-light glass, three interactive plan rows, and a dedicated viewer. */
.future-title-panel,
.future-plan-panel{
  border:0;
  background:linear-gradient(145deg,rgba(235,249,255,.16),rgba(209,241,244,.055));
  box-shadow:0 18px 48px rgba(8,54,88,.16),inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
}
.future-title-panel{pointer-events:none}
.future-plan-panel{
  padding:10px 12px;
  overflow:visible;
}
.future-plan-item{
  position:relative;
  display:block;
  min-height:0;
  padding:0;
}
.future-plan-item+ .future-plan-item{border-top:0}
.future-plan-item+ .future-plan-item:before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:20%;
  right:20%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,73,99,.32) 18%,rgba(20,73,99,.32) 82%,transparent);
  pointer-events:none;
}
.future-plan-trigger{
  position:relative;
  width:100%;
  min-height:clamp(138px,16vh,178px);
  display:grid;
  grid-template-columns:clamp(44px,4vw,62px) minmax(0,1fr) auto;
  gap:clamp(16px,2.2vw,30px);
  align-items:center;
  padding:clamp(22px,3vh,36px) clamp(16px,2vw,28px);
  color:#123a52;
  text-align:left;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  transform:translate3d(0,0,0);
  transition:transform .32s cubic-bezier(.16,1,.3,1),background-color .22s ease,box-shadow .28s ease,color .22s ease;
}
.future-plan-trigger:hover,
.future-plan-trigger:focus-visible{
  z-index:3;
  color:#092f45;
  background:rgba(239,252,255,.44);
  box-shadow:0 16px 34px rgba(8,54,88,.13),inset 0 1px 0 rgba(255,255,255,.72);
  transform:translateY(-2px) scale(1.014);
  outline:none;
}
.future-plan-trigger:focus-visible{box-shadow:0 16px 34px rgba(8,54,88,.13),0 0 0 2px rgba(11,75,104,.62)}
.future-plan-trigger:active{transform:translateY(0) scale(.994)}
.future-plan-trigger.is-source{opacity:.24;pointer-events:none}
.future-plan-number{
  align-self:start;
  padding-top:7px;
  color:#2b7192;
  font:600 12px/1 var(--serif-en);
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}
.future-plan-copy{display:grid;gap:9px;min-width:0}
.future-plan-copy strong{
  color:inherit;
  font:500 clamp(28px,3vw,43px)/1.16 var(--serif-cn);
  letter-spacing:.03em;
}
.future-plan-copy small{
  max-width:66ch;
  color:#315c72;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.65;
}
.future-plan-action{
  position:relative;
  padding-right:23px;
  color:#245f7a;
  font:650 11px/1.2 "Manrope","Noto Sans SC",sans-serif;
  letter-spacing:.04em;
  white-space:nowrap;
}
.future-plan-action i:before,
.future-plan-action i:after{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  height:1px;
  background:currentColor;
  transform-origin:right center;
}
.future-plan-action i:before{width:14px}
.future-plan-action i:after{width:7px;transform:translateY(-.5px) rotate(42deg)}

.future-viewer{
  visibility:hidden;
  position:fixed;
  z-index:440;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,56px);
  opacity:0;
  pointer-events:none;
  perspective:1500px;
  transition:opacity .2s ease,visibility .2s;
}
.future-viewer.is-open{visibility:visible;opacity:1;pointer-events:auto}
.future-viewer__backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(6,38,57,.3);
  backdrop-filter:blur(12px) saturate(.8);
  -webkit-backdrop-filter:blur(12px) saturate(.8);
  cursor:pointer;
}
.future-viewer__panel{
  position:relative;
  width:min(1220px,88vw);
  height:min(740px,84dvh);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(360px,1.18fr);
  color:#082f48;
  border-radius:16px;
  background:rgba(235,248,250,.95);
  box-shadow:0 34px 100px rgba(3,34,54,.34),inset 0 1px 0 rgba(255,255,255,.88);
  transform-style:preserve-3d;
}
.future-viewer__back{
  position:absolute;
  z-index:3;
  top:18px;
  left:18px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 15px;
  color:#0c455e;
  border:0;
  border-radius:12px;
  background:rgba(237,250,249,.88);
  box-shadow:0 8px 24px rgba(7,62,84,.14);
  font:700 12px/1 "Manrope","Noto Sans SC",sans-serif;
  cursor:pointer;
}
.future-viewer__back i{position:relative;width:16px;height:12px}
.future-viewer__back i:before{content:"";position:absolute;left:1px;top:5px;width:14px;height:1.5px;background:currentColor}
.future-viewer__back i:after{content:"";position:absolute;left:1px;top:2px;width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.future-viewer__back:hover,.future-viewer__back:focus-visible{color:#062f44;background:#f4fcfb;outline:2px solid rgba(9,85,111,.62);outline-offset:3px}
.future-viewer__back:active{transform:translateY(1px)}
.future-viewer__media{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(213,239,244,.44),rgba(232,248,247,.18)),
    url("assets/future-city-boulevard-v25-2560.webp") center/cover;
}
.future-viewer__media:after{content:"";position:absolute;inset:18px;border:1px solid rgba(239,253,253,.48);border-radius:12px;pointer-events:none}
.future-viewer__index{
  padding:12px 15px;
  color:#174f69;
  border-radius:12px;
  background:rgba(235,250,250,.64);
  font:650 12px/1.2 "Manrope",sans-serif;
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.future-viewer__copy{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(36px,5vw,72px)}
.future-viewer__en{margin:0 0 11px;color:#2b657a;font:650 12px/1.2 "Manrope",sans-serif;letter-spacing:.08em}
.future-viewer__copy h2{margin:0;color:#07334d;font:500 clamp(42px,5vw,72px)/1 var(--serif-cn);letter-spacing:.02em}
.future-viewer__summary{max-width:34ch;margin:26px 0 0;color:#315f70;font-size:clamp(16px,1.35vw,20px);font-weight:500;line-height:1.75}
.future-viewer__status{margin-top:30px;padding-top:17px;color:#477487;border-top:1px solid rgba(15,82,108,.22);font:650 11px/1.4 "Manrope","Noto Sans SC",sans-serif;letter-spacing:.04em}
body.future-viewer-open{overflow:hidden}
.future-viewer__navigation{
  position:fixed;
  z-index:6;
  top:50%;
  right:clamp(10px,2vw,28px);
  display:grid;
  gap:12px;
  transform:translateY(-50%);
  pointer-events:none;
}
.future-viewer__nav{
  min-width:164px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 13px;
  color:#164c62;
  text-align:left;
  border:0;
  border-radius:14px;
  background:rgba(235,248,247,.94);
  box-shadow:0 16px 42px rgba(3,34,54,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  pointer-events:auto;
  transition:color .22s ease,background-color .22s ease,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;
}
.future-viewer__nav svg{width:24px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.future-viewer__nav span{display:grid;gap:5px}
.future-viewer__nav strong{font:650 12px/1.1 "Noto Sans SC",sans-serif}
.future-viewer__nav small{color:#5a7f8d;font:600 10px/1.1 "Noto Sans SC",sans-serif;white-space:nowrap}
.future-viewer__nav:hover,.future-viewer__nav:focus-visible{color:#062f44;background:rgba(247,253,251,.98);box-shadow:0 19px 46px rgba(7,56,79,.25);outline:2px solid rgba(13,84,111,.56);outline-offset:3px;transform:translateX(-3px)}
.future-viewer__nav:active{transform:translateX(-1px) scale(.98)}
@media (max-width:900px){
  .future-viewer__panel{width:min(92vw,720px);height:min(86dvh,760px);grid-template-columns:1fr;grid-template-rows:minmax(210px,.86fr) minmax(280px,1.14fr)}
  .future-viewer__copy{padding:32px 34px 118px}
  .future-viewer__navigation{top:auto;right:10px;bottom:max(8px,env(safe-area-inset-bottom));left:10px;display:flex;justify-content:space-between;transform:none}
  .future-viewer__nav{min-width:148px;min-height:66px}
}
@media (max-width:680px){
  .future-plan-panel{padding:7px}
  .future-plan-trigger{min-height:0;grid-template-columns:1fr auto;gap:8px;padding:22px 12px}
  .future-plan-number{grid-column:1;padding-top:0;font-size:10px}
  .future-plan-copy{grid-column:1/-1;gap:7px}
  .future-plan-copy strong{font-size:25px}
  .future-plan-copy small{font-size:14px;line-height:1.6}
  .future-plan-action{position:absolute;top:21px;right:12px;font-size:10px}
  .future-plan-item+ .future-plan-item:before{left:16%;right:16%}
}
@media (max-width:520px){
  .future-viewer{padding:12px}
  .future-viewer__panel{width:100%;height:88dvh;grid-template-rows:minmax(180px,.78fr) minmax(300px,1.22fr)}
  .future-viewer__copy{padding:26px 22px 108px}
  .future-viewer__back{top:12px;left:12px}
  .future-viewer__navigation{right:6px;left:6px}
  .future-viewer__nav{min-width:0;min-height:64px;gap:7px;padding:8px}
  .future-viewer__nav svg{width:20px;height:28px}
  .future-viewer__nav strong{font-size:11px}
  .future-viewer__nav small{font-size:9px}
}
@media (hover:none){
  .future-plan-trigger:hover{transform:none}
  .future-viewer__nav:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .future-title-panel,.future-plan-panel{background:rgba(224,244,250,.76);backdrop-filter:none;-webkit-backdrop-filter:none}
  .future-viewer__panel{background:#e7f7f6}
  .future-viewer__backdrop{background:rgba(6,38,57,.72);backdrop-filter:none;-webkit-backdrop-filter:none}
  .future-viewer__nav{background:#e9f8f7;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .future-plan-trigger,.future-viewer,.future-viewer__nav{transition:none!important}
  .future-plan-trigger:hover,.future-plan-trigger:focus-visible,.future-viewer__nav:hover,.future-viewer__nav:focus-visible{transform:none}
}

/* V28: softer page seams and a taller reserved footer. */
.profile-projects-bridge:before{
  inset:-150px 0 auto;
  height:150px;
  background:
    radial-gradient(ellipse at 10% 92%,rgba(239,250,253,.42),transparent 30%),
    radial-gradient(ellipse at 42% 96%,rgba(224,243,249,.32),transparent 36%),
    radial-gradient(ellipse at 78% 90%,rgba(236,249,252,.38),transparent 31%),
    linear-gradient(180deg,rgba(126,187,213,0),rgba(132,190,213,.18) 42%,rgb(139,195,214) 100%);
  filter:none;
  opacity:1;
}
.profile-projects-bridge:after{
  left:0;
  right:0;
  top:0;
  height:164px;
  background:
    radial-gradient(ellipse at 21% 4%,rgba(240,251,253,.42),transparent 31%),
    radial-gradient(ellipse at 58% 8%,rgba(220,241,247,.3),transparent 38%),
    radial-gradient(ellipse at 91% 5%,rgba(238,250,252,.36),transparent 29%),
    linear-gradient(180deg,rgb(139,195,214),rgba(146,201,218,.24) 52%,rgba(144,199,216,0));
  filter:none;
  opacity:1;
  animation:v28-seam-breathe 20s cubic-bezier(.37,0,.63,1) infinite alternate;
}
.projects-future-bridge{
  position:absolute;
  z-index:5;
  right:0;
  bottom:0;
  left:0;
  height:176px;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 100%,rgba(235,248,251,.34),transparent 31%),
    radial-gradient(ellipse at 52% 102%,rgba(216,239,246,.28),transparent 39%),
    radial-gradient(ellipse at 91% 98%,rgba(238,249,252,.32),transparent 29%),
    linear-gradient(180deg,rgba(165,207,220,0),rgba(173,213,224,.2) 44%,rgb(184,220,229) 100%);
}
.projects-future-bridge span{
  position:absolute;
  bottom:-20px;
  height:74px;
  border-radius:50%;
  background:rgba(232,247,250,.3);
  filter:blur(22px);
}
.projects-future-bridge span:first-child{left:-7%;width:48%}
.projects-future-bridge span:last-child{right:-9%;width:55%;height:82px;opacity:.8}
#projects{margin-top:-1px;box-shadow:inset 0 1px 0 rgb(139,195,214),inset 0 32px 44px rgba(72,118,128,.08)}
#future{margin-top:-1px}
#future:before{
  background:
    radial-gradient(ellipse at 15% 0,rgba(238,250,252,.38),transparent 27%),
    radial-gradient(ellipse at 56% 0,rgba(221,242,248,.28),transparent 34%),
    radial-gradient(ellipse at 91% 0,rgba(241,251,253,.34),transparent 25%),
    linear-gradient(180deg,rgb(184,220,229) 0,rgba(199,228,235,.34) 72px,rgba(241,249,252,.08) 170px,transparent 246px),
    radial-gradient(ellipse at 67% 53%,rgba(243,250,252,.42),rgba(238,248,251,.14) 56%,transparent 79%),
    linear-gradient(90deg,rgba(238,249,252,.34),rgba(244,251,253,.1) 38%,rgba(244,251,253,.14) 68%,rgba(235,247,251,.32));
}
footer{
  min-height:190px;
  align-items:center;
  padding-top:54px;
  padding-bottom:54px;
}
@keyframes v28-seam-breathe{
  from{transform:translate3d(-.7%,0,0)}
  to{transform:translate3d(.7%,0,0)}
}
@media (max-width:680px){
  .profile-projects-bridge:before{inset:-104px 0 auto;height:104px}
  .profile-projects-bridge:after{height:116px}
  .projects-future-bridge{height:126px}
  #future:before{
    background:
      radial-gradient(ellipse at 18% 0,rgba(238,250,252,.38),transparent 29%),
      radial-gradient(ellipse at 76% 0,rgba(226,244,249,.3),transparent 34%),
      linear-gradient(180deg,rgb(184,220,229) 0,rgba(204,230,237,.3) 62px,transparent 170px),
      rgba(241,250,252,.28);
  }
  footer{min-height:170px;padding-top:46px;padding-bottom:46px}
}
@media (prefers-reduced-motion:reduce){
  .profile-projects-bridge:after{animation:none!important;transform:none}
}

/* V29: guarantee full project-background coverage throughout its motion cycle. */
.projects-page{
  background-color:#8fc9da;
  background-image:url("assets/basic-info-tech-deck-v14-2560.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.projects-backdrop{
  inset:-7%;
  width:114%;
  height:114%;
  max-width:none;
  animation:v29-project-safe-float 18s cubic-bezier(.37,0,.63,1) -4.5s infinite alternate;
  animation-play-state:paused;
  transform-origin:center;
}
@keyframes v29-project-safe-float{
  0%{transform:translate3d(-1.15%,-.3%,0) scale(1.02)}
  50%{transform:translate3d(0,.18%,0) scale(1.024)}
  100%{transform:translate3d(1.15%,-.12%,0) scale(1.02)}
}
@media (max-width:680px){
  .projects-backdrop{
    inset:-4%;
    width:108%;
    height:108%;
    animation:none;
    transform:translate3d(0,0,0) scale(1.015);
  }
}
@media (prefers-reduced-motion:reduce){
  .projects-backdrop{animation:none!important;transform:translate3d(0,0,0) scale(1.015)}
}

/* V31: keep the profile-to-project transition layer centered and static. */
.profile-projects-bridge:after{
  left:0;
  right:0;
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}

/* V32: keep the scrolled header compact through the future page. */
.site-header.scrolled{height:52px}
@media (max-width:680px){.site-header.scrolled{height:48px}}

/* V33: anchor future-plan navigation to the panel's right corners. */
.future-viewer__navigation{
  top:calc(50% - min(370px,42dvh) - 36px);
  right:max(8px,calc(50% - min(610px,44vw) - 82px));
  bottom:calc(50% - min(370px,42dvh) - 36px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:0;
  transform:none;
}
@media (max-width:900px){
  .future-viewer__navigation{
    top:max(8px,calc(50% - min(380px,43dvh) - 33px));
    right:max(8px,calc(50% - min(360px,46vw) - 74px));
    bottom:max(8px,calc(50% - min(380px,43dvh) - 33px));
    left:auto;
    flex-direction:column;
  }
}
@media (max-width:520px){
  .future-viewer__navigation{right:8px;left:auto}
}

/* V34: restore a cooler blue-cyan atmosphere to the future-page background. */
#future{
  background:#b9dce8;
}
#future:before{
  background:
    radial-gradient(ellipse at 15% 0,rgba(214,239,246,.26),transparent 27%),
    radial-gradient(ellipse at 56% 0,rgba(195,226,236,.2),transparent 34%),
    radial-gradient(ellipse at 91% 0,rgba(220,241,247,.23),transparent 25%),
    linear-gradient(180deg,rgb(184,220,229) 0,rgba(170,212,224,.28) 72px,rgba(199,230,238,.06) 170px,transparent 246px),
    radial-gradient(ellipse at 67% 53%,rgba(202,232,240,.2),rgba(175,217,230,.08) 56%,transparent 79%),
    linear-gradient(90deg,rgba(174,216,230,.2),rgba(207,234,241,.05) 38%,rgba(207,234,241,.07) 68%,rgba(170,213,228,.18));
}
.future-backdrop{
  filter:brightness(.94) saturate(.88) contrast(.96);
}
@media (max-width:680px){
  #future:before{
    background:
      radial-gradient(ellipse at 18% 0,rgba(214,239,246,.26),transparent 29%),
      radial-gradient(ellipse at 76% 0,rgba(199,229,238,.22),transparent 34%),
      linear-gradient(180deg,rgb(184,220,229) 0,rgba(174,214,225,.25) 62px,transparent 170px),
      rgba(178,220,233,.12);
  }
  .future-backdrop{filter:brightness(.95) saturate(.84) contrast(.94)}
}

/* V35: balance transition bands and add a navigable footer with a like response. */
.profile-projects-bridge>.next-page-peek{
  color:#153f53;
  border-color:rgba(255,255,255,.68);
  background:rgba(226,243,247,.92);
  box-shadow:0 -8px 28px rgba(10,58,78,.14),inset 0 1px 0 rgba(255,255,255,.88);
}
.profile-projects-bridge>.next-page-peek small{color:#477384}
.profile-projects-bridge>.next-page-peek:hover,
.profile-projects-bridge>.next-page-peek:focus-visible{
  color:#0b3247;
  background:rgba(241,250,252,.98);
  outline-color:rgba(35,101,123,.48);
}
.projects-next-page{height:40px}
.projects-next-page:hover,
.projects-next-page:focus-visible{height:46px}

.site-footer{
  position:relative;
  min-height:190px;
  display:block;
  padding:0 clamp(26px,7vw,110px);
  overflow:hidden;
  color:#fff;
  background:var(--navy);
  font:500 13px var(--serif-en);
  letter-spacing:.1em;
}
.site-footer__topline{
  position:absolute;
  z-index:2;
  top:26px;
  right:clamp(26px,7vw,110px);
  left:clamp(26px,7vw,110px);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-footer__topline a{
  transition:color .22s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.site-footer__topline a:hover,
.site-footer__topline a:focus-visible{
  color:#c7ecf7;
  outline:none;
  transform:translateY(-2px);
}
.site-footer__nav{
  position:absolute;
  z-index:4;
  top:72px;
  left:50%;
  width:min(620px,68vw);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  row-gap:18px;
  transform:translateX(-50%);
}
.site-footer__nav a,
.site-footer__nav button{
  position:relative;
  justify-self:center;
  padding:2px 4px 7px;
  color:#eaf8fc;
  border:0;
  background:transparent;
  font:500 14px/1.2 var(--serif-cn);
  letter-spacing:.08em;
  cursor:pointer;
  transform:scale(1);
  transition:color .2s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.site-footer__nav a:after,
.site-footer__nav button:after{
  content:"";
  position:absolute;
  right:4px;
  bottom:1px;
  left:4px;
  height:1px;
  background:currentColor;
  opacity:0;
  transform:scaleX(.2);
  transition:opacity .2s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.site-footer__nav button:hover,
.site-footer__nav button:focus-visible{
  color:#fff;
  outline:none;
  transform:scale(1.07);
}
.site-footer__nav a:hover:after,
.site-footer__nav a:focus-visible:after,
.site-footer__nav button:hover:after,
.site-footer__nav button:focus-visible:after{
  opacity:1;
  transform:scaleX(1);
}
.site-footer__filing-space{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:28px;
  pointer-events:none;
}
.footer-like-burst{
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
}
.footer-like-burst svg{
  width:clamp(118px,13vw,168px);
  overflow:visible;
  fill:none;
  stroke:#fff;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
.footer-like-burst path{
  stroke-dasharray:430;
  stroke-dashoffset:430;
}
.footer-like-burst.is-active{animation:v35-like-burst .92s cubic-bezier(.16,1,.3,1) both}
.footer-like-burst.is-active path{animation:v35-like-draw .72s .05s cubic-bezier(.16,1,.3,1) both}
.footer-like-status{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
@keyframes v35-like-burst{
  0%{opacity:0;transform:translateY(14px) scale(.72)}
  24%,68%{opacity:1;transform:translateY(-4px) scale(1)}
  100%{opacity:0;transform:translateY(-18px) scale(1.08)}
}
@keyframes v35-like-draw{
  to{stroke-dashoffset:0}
}
@media (max-width:900px){
  .projects-next-page{margin:-40px 0 0!important}
}
@media (max-width:680px){
  .projects-next-page{height:40px;margin-top:-40px!important}
  .projects-next-page:hover,.projects-next-page:focus-visible{height:46px}
  .site-footer{min-height:210px;padding:0 18px}
  .site-footer__topline{top:22px;right:18px;left:18px;font-size:11px;letter-spacing:.07em}
  .site-footer__nav{top:72px;width:calc(100% - 28px);row-gap:22px}
  .site-footer__nav a,.site-footer__nav button{font-size:13px;letter-spacing:.04em}
  .site-footer__filing-space{height:30px}
}
@media (hover:none){
  .site-footer__nav a:hover,.site-footer__nav button:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .profile-projects-bridge>.next-page-peek{background:#e2f3f7}
}
@media (prefers-reduced-motion:reduce){
  .site-footer__nav a,.site-footer__nav button,.site-footer__nav a:after,.site-footer__nav button:after,.footer-like-burst,.footer-like-burst path{transition:none!important;animation:none!important}
  .footer-like-burst.is-active{opacity:1;transform:none}
  .footer-like-burst.is-active path{stroke-dashoffset:0}
}

/* V36: personal identity, contact details, and restrained hero type scaling. */
.brand>span:last-child{
  font-family:"Allura","Segoe Script","Brush Script MT",cursive;
  font-size:27px;
  font-weight:400;
  line-height:1;
  letter-spacing:.025em;
  text-transform:none;
}
.name-cn{
  font-size:clamp(38px,5.5vw,78px);
  letter-spacing:.05em;
  white-space:nowrap;
}
.name-en{
  margin-top:11px;
  font-size:clamp(22px,2.25vw,34px);
  letter-spacing:.24em;
}
.welcome{
  margin-top:21px;
  font-size:clamp(18px,1.55vw,23px);
}
.welcome span{font-size:clamp(16px,1.4vw,20px)}
.contact-value-group{
  display:grid;
  gap:7px;
  color:#173f55;
  text-align:right;
}
.contact-value-group span{
  color:inherit;
  white-space:nowrap;
}
.contact-value-group b{
  display:inline-block;
  min-width:74px;
  margin-right:10px;
  color:#627b8d;
  font:600 11px/1.2 "Manrope",sans-serif;
  letter-spacing:.04em;
}
@media (max-width:680px){
  .brand>span:last-child{display:inline;font-size:22px}
  .name-cn{font-size:clamp(34px,9.4vw,40px);letter-spacing:.035em}
  .name-en{font-size:clamp(21px,6vw,25px);letter-spacing:.18em}
  .welcome{font-size:clamp(17px,4.8vw,20px)}
  .contact-list p{align-items:flex-start}
  .contact-value-group b{display:block;min-width:0;margin:0 0 2px}
}

/* V37: expressive but legible home lettering and a compact social contact row. */
.name-cn{
  font-family:"ZCOOL XiaoWei","Noto Serif SC","Songti SC",serif;
  font-weight:400;
  line-height:1.08;
}
.name-en{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(26px,2.8vw,42px);
  font-style:italic;
  font-weight:600;
  letter-spacing:.18em;
}
.contact-social-line{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:#173f55;
  font:500 14px/1.25 "Manrope","Noto Sans SC",sans-serif;
  letter-spacing:0;
  white-space:nowrap;
}
.contact-social-line i{color:#78909e;font-style:normal}
.contact-app{display:inline-flex;align-items:center;gap:4px;color:#173f55!important}
.contact-app svg{
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-number{margin-left:4px;color:#173f55!important;font-variant-numeric:tabular-nums}
@media (max-width:680px){
  .name-en{font-size:clamp(24px,7vw,29px);letter-spacing:.14em}
}
@media (max-width:520px){
  .contact-list p{flex-direction:column;gap:9px}
  .contact-social-line{justify-content:flex-start;font-size:13px}
}

/* V38: revised home lettering, larger entry labels, and page-aware header colors. */
.name-cn{
  font-family:"Ma Shan Zheng","Noto Serif SC","Songti SC",serif;
  font-weight:400;
  letter-spacing:.065em;
}
.hero-card p{font-size:clamp(16px,1.25vw,18px)}
.hero-card h2{font-size:clamp(22px,2.2vw,32px)}

.site-header .nav-button{
  transition:color .22s ease,background-color .25s ease,border-color .25s ease,box-shadow .28s ease,transform .25s ease;
}
.site-header:not(.scrolled) .nav-button,
.site-header:not(.scrolled) .nav-button--filled{
  color:#f5fcff;
  border-color:rgba(211,240,253,.7);
  background:rgba(30,105,151,.48);
  box-shadow:0 8px 22px rgba(7,50,86,.16),inset 0 1px 0 rgba(255,255,255,.18);
}
.site-header:not(.scrolled) .nav-button:hover,
.site-header:not(.scrolled) .nav-button:focus-visible{
  color:#fff;
  background:rgba(24,94,139,.68);
  border-color:rgba(231,248,255,.9);
  outline:2px solid rgba(231,248,255,.58);
  outline-offset:3px;
}

body.profile-active .site-header.scrolled{
  color:#123d55;
  background:rgba(196,229,242,.92);
  border-color:rgba(42,119,153,.18);
  box-shadow:0 10px 28px rgba(18,83,115,.12);
  backdrop-filter:blur(20px) saturate(1.08);
}
body.profile-active .site-header.scrolled .nav-button,
body.profile-active .site-header.scrolled .nav-button--filled{
  color:#123f57;
  border-color:rgba(63,135,164,.34);
  background:rgba(230,246,251,.86);
  box-shadow:0 7px 18px rgba(32,99,129,.1),inset 0 1px 0 rgba(255,255,255,.72);
}
body.profile-active .site-header.scrolled .nav-button:hover,
body.profile-active .site-header.scrolled .nav-button:focus-visible{
  color:#082f47;
  background:rgba(214,239,248,.98);
  border-color:rgba(41,115,147,.54);
  outline:2px solid rgba(41,115,147,.3);
  outline-offset:3px;
}

body.project-active .site-header.scrolled{
  color:#123d53;
  background:rgba(241,250,251,.9);
  border-color:rgba(15,73,96,.14);
  box-shadow:0 10px 30px rgba(18,77,102,.11);
  backdrop-filter:blur(20px) saturate(1.08);
}
body.project-active .site-header.scrolled .nav-button{
  color:#123d53;
  border-color:rgba(63,126,145,.28);
  background:rgba(250,254,254,.9);
  box-shadow:0 7px 18px rgba(26,83,105,.09),inset 0 1px 0 rgba(255,255,255,.78);
}
body.project-active .site-header.scrolled .nav-button--filled{
  color:#16483f;
  border-color:rgba(70,137,116,.31);
  background:rgba(218,240,232,.94);
}
body.project-active .site-header.scrolled .nav-button:hover,
body.project-active .site-header.scrolled .nav-button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(24,82,101,.14);
  outline:2px solid rgba(54,122,139,.26);
  outline-offset:3px;
}

body.future-active .site-header.scrolled{
  color:#123f55;
  background:rgba(218,238,246,.92);
  border-color:rgba(43,116,145,.18);
  box-shadow:0 10px 28px rgba(23,82,108,.11);
  backdrop-filter:blur(20px) saturate(1.1);
}
body.future-active .site-header.scrolled .nav-button{
  color:#123e56;
  border-color:rgba(51,125,154,.38);
  background:rgba(240,249,252,.94);
  box-shadow:0 8px 20px rgba(26,89,116,.12),inset 0 1px 0 rgba(255,255,255,.82);
}
body.future-active .site-header.scrolled .nav-button--filled{
  color:#15483f;
  border-color:rgba(58,132,112,.38);
  background:rgba(207,235,230,.96);
}
body.future-active .site-header.scrolled .nav-button:hover,
body.future-active .site-header.scrolled .nav-button:focus-visible{
  color:#082f45;
  border-color:rgba(35,105,133,.58);
  box-shadow:0 11px 26px rgba(19,76,102,.16);
  outline:2px solid rgba(38,111,138,.28);
  outline-offset:3px;
}
@media (max-width:680px){
  .hero-card p{font-size:14px}
  .hero-card h2{font-size:22px}
}
@media (prefers-reduced-transparency:reduce){
  .site-header:not(.scrolled) .nav-button{background:#246b94}
  body.profile-active .site-header.scrolled{background:#c4e5f2}
  body.profile-active .site-header.scrolled .nav-button{background:#e6f6fb}
  body.project-active .site-header.scrolled .nav-button{background:#f8fdfd}
  body.project-active .site-header.scrolled .nav-button--filled{background:#daf0e8}
  body.future-active .site-header.scrolled{background:#daeef6}
  body.future-active .site-header.scrolled .nav-button{background:#f0f9fc}
  body.future-active .site-header.scrolled .nav-button--filled{background:#cfebe6}
}

/* V39: unify paired header actions and sharpen the cube instruction only. */
body.profile-active .site-header.scrolled .nav-button,
body.profile-active .site-header.scrolled .nav-button--filled{
  color:#123f57;
  border-color:rgba(63,135,164,.34);
  background:rgba(230,246,251,.9);
}
body.project-active .site-header.scrolled .nav-button,
body.project-active .site-header.scrolled .nav-button--filled{
  color:#16483f;
  border-color:rgba(70,137,116,.31);
  background:rgba(218,240,232,.94);
}
body.future-active .site-header.scrolled .nav-button,
body.future-active .site-header.scrolled .nav-button--filled{
  color:#15483f;
  border-color:rgba(58,132,112,.38);
  background:rgba(207,235,230,.96);
}
.cube-hint{
  color:#063b52;
  font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.04em;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
@media (max-width:680px){.cube-hint{font-size:12px}}
@media (prefers-reduced-transparency:reduce){
  body.profile-active .site-header.scrolled .nav-button{background:#e6f6fb}
  body.project-active .site-header.scrolled .nav-button{background:#daf0e8}
  body.future-active .site-header.scrolled .nav-button{background:#cfebe6}
}

/* V40: large editorial panels unfold in an upper arc around the cube. */
.cube-system{
  --cube-panel-width:clamp(340px,26vw,380px);
  --cube-panel-height:clamp(205px,15.8vw,228px);
  --cube-arc-side-x:clamp(390px,32vw,520px);
  --cube-arc-crown-x:clamp(190px,16vw,260px);
  --cube-arc-crown-y:clamp(-260px,-20vh,-190px);
}
.cube-node{
  width:var(--cube-panel-width);
  min-width:var(--cube-panel-width);
  height:var(--cube-panel-height);
  padding:clamp(24px,2vw,32px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  color:#113e53;
  border-color:rgba(239,255,252,.82);
  border-radius:16px;
  background:rgba(225,245,243,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 24px 64px rgba(10,50,72,.24);
  transform:translate(-50%,-50%) scale(.18);
  transform-origin:center;
  transition:transform .58s cubic-bezier(.16,1,.3,1),opacity .24s ease;
  cursor:default;
}
.cube-node span{font-size:clamp(24px,2vw,30px);font-weight:500}
.cube-node small{margin-top:8px;color:#3e7280;font-size:11px}
.cube-node:hover,
.cube-node:focus-visible,
.cube-node.is-selected{
  color:#113e53;
  border-color:rgba(239,255,252,.82);
  background:rgba(225,245,243,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 24px 64px rgba(10,50,72,.24);
  outline:none;
}
.cube-node.is-selected small{color:#3e7280}
.cube-system.is-open .cube-node--one{
  transform:translate(calc(-50% - var(--cube-arc-side-x)),calc(-50% - 10px)) scale(1);
  transition-delay:0ms;
}
.cube-system.is-open .cube-node--two{
  transform:translate(calc(-50% - var(--cube-arc-crown-x)),calc(-50% + var(--cube-arc-crown-y))) scale(1);
  transition-delay:35ms;
}
.cube-system.is-open .cube-node--three{
  transform:translate(calc(-50% + var(--cube-arc-crown-x)),calc(-50% + var(--cube-arc-crown-y))) scale(1);
  transition-delay:70ms;
}
.cube-system.is-open .cube-node--four{
  transform:translate(calc(-50% + var(--cube-arc-side-x)),calc(-50% - 10px)) scale(1);
  transition-delay:105ms;
}
.photo-viewer__panel{
  width:min(78vw,1500px);
  min-width:0;
  max-height:80vh;
  aspect-ratio:17/9;
}
.photo-viewer__nav--prev{left:max(8px,calc(11vw - 68px))}
.photo-viewer__nav--next{right:max(8px,calc(11vw - 68px))}
@media (max-width:1100px){
  .cube-system{
    --cube-panel-width:clamp(280px,30vw,330px);
    --cube-panel-height:clamp(170px,18vw,198px);
    --cube-arc-side-x:clamp(300px,33vw,365px);
    --cube-arc-crown-x:clamp(145px,17vw,190px);
    --cube-arc-crown-y:clamp(-205px,-19vh,-165px);
  }
}
@media (min-width:681px) and (max-width:900px){
  .cube-system{
    --cube-panel-width:clamp(230px,30vw,280px);
    --cube-panel-height:clamp(150px,19vw,178px);
    --cube-arc-side-x:clamp(220px,30vw,280px);
    --cube-arc-crown-x:clamp(112px,16vw,150px);
    --cube-arc-crown-y:clamp(-180px,-18vh,-150px);
  }
}
@media (max-width:680px){
  .cube-system{
    --cube-panel-width:min(43vw,178px);
    --cube-panel-height:136px;
    --cube-arc-side-x:calc(22vw + 8px);
    --cube-arc-crown-x:calc(22vw + 8px);
    --cube-arc-crown-y:-150px;
  }
  .cube-node{padding:16px 14px}
  .cube-node span{font-size:20px}
  .cube-node small{margin-top:5px;font-size:9px}
  .cube-system.is-open .cube-node--one{transform:translate(calc(-50% - var(--cube-arc-side-x)),calc(-50% + 4px)) scale(1)}
  .cube-system.is-open .cube-node--four{transform:translate(calc(-50% + var(--cube-arc-side-x)),calc(-50% + 4px)) scale(1)}
  .photo-viewer__panel{width:80vw;max-height:78vh;aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .cube-node{transition:opacity .16s ease}
  .cube-system.is-open .cube-node{transition-delay:0ms}
}

/* V41: tighten the lower arc, widen the crown, and lift the open system above the photo stream. */
body.cube-menu-open .profile-layout{z-index:60}
body.cube-menu-open .cube-system.is-open{z-index:220}
body.cube-menu-open .cube-menu{z-index:230}
body.cube-menu-open .cube-node{z-index:240}
.cube-system{
  --cube-arc-side-x:clamp(350px,28vw,460px);
  --cube-arc-crown-x:clamp(210px,19vw,300px);
  --cube-arc-side-y:clamp(72px,10vh,96px);
}
.cube-system.is-open .cube-node--one{
  transform:translate(calc(-50% - var(--cube-arc-side-x)),calc(-50% + var(--cube-arc-side-y))) scale(1);
}
.cube-system.is-open .cube-node--four{
  transform:translate(calc(-50% + var(--cube-arc-side-x)),calc(-50% + var(--cube-arc-side-y))) scale(1);
}
.photo-viewer__panel{width:min(81vw,1558px)}
.photo-viewer__nav--prev{left:max(8px,calc(9vw - 68px))}
.photo-viewer__nav--next{right:max(8px,calc(9vw - 68px))}
@media (max-width:1100px){
  .cube-system{
    --cube-arc-side-x:clamp(270px,29vw,330px);
    --cube-arc-crown-x:clamp(155px,18vw,200px);
    --cube-arc-side-y:70px;
  }
}
@media (min-width:681px) and (max-width:900px){
  .cube-system{
    --cube-arc-side-x:clamp(200px,26vw,235px);
    --cube-arc-crown-x:clamp(130px,18vw,165px);
    --cube-arc-side-y:58px;
  }
}
@media (max-width:680px){
  .cube-system{
    --cube-arc-side-x:calc(19vw + 6px);
    --cube-arc-crown-x:calc(25vw + 6px);
    --cube-arc-side-y:42px;
  }
  .cube-system.is-open .cube-node--one{
    transform:translate(calc(-50% - var(--cube-arc-side-x)),calc(-50% + var(--cube-arc-side-y))) scale(1);
  }
  .cube-system.is-open .cube-node--four{
    transform:translate(calc(-50% + var(--cube-arc-side-x)),calc(-50% + var(--cube-arc-side-y))) scale(1);
  }
  .photo-viewer__panel{width:83vw}
}

/* V42: clearer cube panels and a two-hand high-five response. */
.cube-node,
.cube-node:hover,
.cube-node:focus-visible,
.cube-node.is-selected{
  background:rgba(234,248,246,.96);
  backdrop-filter:blur(8px) saturate(1.06);
}
.cube-node span,
.cube-node small{
  position:relative;
  z-index:1;
  filter:none;
  text-shadow:none;
}
.footer-high-five{
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
}
.footer-high-five svg{
  width:clamp(240px,27vw,320px);
  overflow:visible;
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
.high-five-hand{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.high-five-hand__outline{fill:rgba(255,255,255,.035)}
.high-five-hand__detail{stroke-width:2.4;opacity:.64}
.high-five-rays{opacity:0;transform-box:fill-box;transform-origin:center}
.high-five-rays path{stroke-dasharray:34;stroke-dashoffset:34}
.high-five-glow{
  fill:rgba(239,255,250,.82);
  stroke:rgba(255,255,255,.92);
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.footer-high-five.is-active{opacity:1}
.footer-high-five.is-active .high-five-hand--left{animation:v42-high-five-left 1.55s cubic-bezier(.16,1,.3,1) both}
.footer-high-five.is-active .high-five-hand--right{animation:v42-high-five-right 1.55s cubic-bezier(.16,1,.3,1) both}
.footer-high-five.is-active .high-five-rays{animation:v42-high-five-rays .62s .87s ease-out both}
.footer-high-five.is-active .high-five-rays path{animation:v42-high-five-ray-draw .54s .87s ease-out both}
.footer-high-five.is-active .high-five-glow{animation:v42-high-five-glow .58s .84s ease-out both}
@keyframes v42-high-five-left{
  0%{opacity:0;transform:translate(-54px,18px) rotate(-9deg)}
  28%{opacity:1;transform:translate(-38px,11px) rotate(-7deg)}
  58%{opacity:1;transform:translate(-13px,3px) rotate(-2deg)}
  66%{opacity:1;transform:translate(3px,0) rotate(0)}
  74%{opacity:1;transform:translate(-5px,2px) rotate(-1deg)}
  88%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(0,-9px) rotate(0)}
}
@keyframes v42-high-five-right{
  0%{opacity:0;transform:translate(54px,18px) rotate(9deg)}
  28%{opacity:1;transform:translate(38px,11px) rotate(7deg)}
  58%{opacity:1;transform:translate(13px,3px) rotate(2deg)}
  66%{opacity:1;transform:translate(-3px,0) rotate(0)}
  74%{opacity:1;transform:translate(5px,2px) rotate(1deg)}
  88%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(0,-9px) rotate(0)}
}
@keyframes v42-high-five-rays{
  0%{opacity:0;transform:scale(.42)}
  24%{opacity:1;transform:scale(.76)}
  100%{opacity:0;transform:scale(1.18)}
}
@keyframes v42-high-five-ray-draw{to{stroke-dashoffset:0}}
@keyframes v42-high-five-glow{
  0%{opacity:0;transform:scale(.18)}
  22%{opacity:.92;transform:scale(.72)}
  100%{opacity:0;transform:scale(3.3)}
}
@media (max-width:680px){.footer-high-five svg{width:min(76vw,286px)}}
@media (prefers-reduced-motion:reduce){
  .footer-high-five.is-active{opacity:1}
  .footer-high-five.is-active .high-five-hand{opacity:1;transform:none;animation:none}
  .footer-high-five.is-active .high-five-rays{opacity:.72;transform:none;animation:none}
  .footer-high-five.is-active .high-five-rays path{stroke-dashoffset:0;animation:none}
  .footer-high-five.is-active .high-five-glow{opacity:.22;transform:scale(1.5);animation:none}
}

/* V43: viewport-fixed encouragement lettering with a left-to-right light reveal. */
.encouragement-overlay{
  visibility:hidden;
  position:fixed;
  z-index:700;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.encouragement-overlay.is-active{visibility:visible}
.encouragement-copy{
  position:relative;
  width:min(68vw,1200px);
  height:min(56vh,620px);
  isolation:isolate;
}
.encouragement-line{
  position:absolute;
  display:block;
  margin:0;
  color:rgba(246,255,253,.98);
  white-space:nowrap;
  font-family:"Allura","Segoe Script","Brush Script MT",cursive;
  font-size:clamp(88px,13vw,220px);
  font-weight:400;
  line-height:.78;
  letter-spacing:.01em;
  text-shadow:0 8px 30px rgba(2,25,47,.5),0 0 50px rgba(176,242,248,.42);
  -webkit-text-stroke:.35px rgba(255,255,255,.74);
  opacity:0;
  clip-path:inset(0 100% 0 0);
}
.encouragement-line--top{top:4%;left:0}
.encouragement-line--bottom{bottom:3%;left:13%}
.encouragement-copy:after{
  content:"";
  position:absolute;
  z-index:2;
  top:-8%;
  bottom:-8%;
  left:-22%;
  width:22%;
  background:linear-gradient(90deg,transparent,rgba(239,255,252,.2) 20%,rgba(255,255,255,.96) 50%,rgba(198,242,251,.22) 80%,transparent);
  filter:blur(9px);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-120%) skewX(-10deg);
}
.encouragement-overlay.is-active .encouragement-line--top{animation:v43-encouragement-reveal 1.82s cubic-bezier(.16,1,.3,1) both}
.encouragement-overlay.is-active .encouragement-line--bottom{animation:v43-encouragement-reveal 1.82s .14s cubic-bezier(.16,1,.3,1) both}
.encouragement-overlay.is-active .encouragement-copy:after{animation:v43-encouragement-sweep 1.36s .12s cubic-bezier(.16,1,.3,1) both}
@keyframes v43-encouragement-reveal{
  0%{opacity:0;color:rgba(8,43,65,.18);clip-path:inset(0 100% 0 0);filter:blur(9px);transform:translateX(-3vw)}
  18%{opacity:.38;color:rgba(38,91,112,.46)}
  62%{opacity:1;color:rgba(246,255,253,.98);clip-path:inset(0 0 0 0);filter:blur(0);transform:translateX(0)}
  80%{opacity:1;color:rgba(255,255,255,1);clip-path:inset(0 0 0 0);filter:blur(0);transform:translateX(0)}
  100%{opacity:0;color:rgba(229,250,251,.75);clip-path:inset(0 0 0 0);filter:blur(1px);transform:translateX(1vw)}
}
@keyframes v43-encouragement-sweep{
  0%{opacity:0;transform:translateX(-120%) skewX(-10deg)}
  18%{opacity:.9}
  72%{opacity:.64}
  100%{opacity:0;transform:translateX(560%) skewX(-10deg)}
}
@media (max-width:680px){
  .encouragement-copy{width:88vw;height:min(48vh,430px)}
  .encouragement-line{font-size:clamp(74px,23vw,126px)}
  .encouragement-line--bottom{left:8%}
}
@media (prefers-reduced-motion:reduce){
  .encouragement-overlay.is-active .encouragement-line{clip-path:none;filter:none;transform:none;animation:v43-encouragement-fade 1s ease both}
  .encouragement-overlay.is-active .encouragement-line--bottom{animation-delay:.08s}
  .encouragement-overlay.is-active .encouragement-copy:after{display:none;animation:none}
}
@keyframes v43-encouragement-fade{
  0%,100%{opacity:0}
  20%,78%{opacity:1}
}

/* V44: heavier complete letterforms, centered diagonal composition, no sweep bar. */
.encouragement-copy{
  width:min(68vw,1200px);
  height:min(56vh,620px);
  overflow:visible;
}
.encouragement-line{
  padding:.28em .38em .36em;
  margin:-.28em -.38em -.36em;
  color:#fff;
  font-size:clamp(84px,11.5vw,190px);
  font-weight:700;
  line-height:.86;
  text-shadow:0 8px 28px rgba(2,25,47,.52),0 0 38px rgba(177,235,246,.3);
  -webkit-text-stroke:1px rgba(255,255,255,.92);
  paint-order:stroke fill;
  overflow:visible;
}
.encouragement-line--top{top:2%;left:6%}
.encouragement-line--bottom{right:auto;bottom:2%;left:40%}
.encouragement-copy:after{display:none}
.encouragement-overlay.is-active .encouragement-line--top{animation:v44-encouragement-reveal 1.82s cubic-bezier(.16,1,.3,1) both}
.encouragement-overlay.is-active .encouragement-line--bottom{animation:v44-encouragement-reveal 1.82s .14s cubic-bezier(.16,1,.3,1) both}
.encouragement-overlay.is-active .encouragement-copy:after{display:none;animation:none}
@keyframes v44-encouragement-reveal{
  0%{opacity:0;color:rgba(9,42,62,.2);clip-path:inset(0 100% 0 0);filter:blur(7px);transform:translateX(-1.5vw)}
  18%{opacity:.42;color:rgba(117,163,180,.62)}
  62%{opacity:1;color:#fff;clip-path:inset(0 0 0 0);filter:blur(0);transform:translateX(0)}
  80%{opacity:1;color:#fff;clip-path:inset(0 0 0 0);filter:blur(0);transform:translateX(0)}
  100%{opacity:0;color:rgba(241,253,253,.82);clip-path:inset(0 0 0 0);filter:blur(.6px);transform:translateX(.6vw)}
}
@media (max-width:680px){
  .encouragement-copy{width:88vw;height:min(48vh,430px)}
  .encouragement-line{font-size:clamp(64px,17vw,98px);-webkit-text-stroke:.72px rgba(255,255,255,.92)}
  .encouragement-line--top{top:3%;left:3%}
  .encouragement-line--bottom{bottom:3%;left:26%}
}
@media (prefers-reduced-motion:reduce){
  .encouragement-overlay.is-active .encouragement-line{clip-path:none;filter:none;transform:none;animation:v43-encouragement-fade 1s ease both}
  .encouragement-overlay.is-active .encouragement-line--bottom{animation-delay:.08s}
}

/* V45: native-ratio real-photo stream and ratio-aware photo viewer. */
.photo-stream{
  --photo-gap:clamp(30px,2.5vw,44px);
  height:clamp(150px,22vh,180px);
  overflow:clip;
  overflow-clip-margin:14px;
}
.photo-stream__track{align-items:center;padding-block:12px}
.photo-sequence{align-items:center}
.photo-frame{
  flex:0 0 auto;
  width:auto;
  height:clamp(126px,18vh,152px);
  aspect-ratio:var(--photo-aspect);
  border-radius:15px;
}
.photo-frame img{object-fit:cover;object-position:center;filter:none}
.photo-frame--one{--photo-y:5px;--photo-r:-1.1deg}
.photo-frame--two{--photo-y:-4px;--photo-r:.8deg}
.photo-frame--three{--photo-y:3px;--photo-r:-.55deg}
.photo-frame--four{--photo-y:-5px;--photo-r:.7deg}
.photo-frame--five{--photo-y:5px;--photo-r:-.9deg}
.photo-frame--six{--photo-y:-2px;--photo-r:.45deg}
.photo-frame--seven{--photo-y:4px;--photo-r:-.65deg}
.photo-frame--one img,
.photo-frame--two img,
.photo-frame--three img,
.photo-frame--four img,
.photo-frame--five img,
.photo-frame--six img,
.photo-frame--seven img{object-position:center}
.photo-viewer__panel{
  min-width:0;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  overflow:visible;
  border-radius:16px;
  outline:none;
  background:#08263a;
}
.photo-viewer__image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
  filter:none;
}
.photo-viewer__panel:after{border-radius:16px}
.photo-viewer__nav{
  top:50%;
  width:56px;
  height:86px;
  color:#fff;
  background:rgba(5,43,62,.34);
  border-radius:14px;
  backdrop-filter:blur(9px);
}
.photo-viewer__nav--prev{left:0;right:auto;transform:translate(-50%,-50%)}
.photo-viewer__nav--next{left:auto;right:0;transform:translate(50%,-50%)}
.photo-viewer__nav--prev:hover,
.photo-viewer__nav--prev:focus-visible{transform:translate(-50%,-50%) scale(1.09)}
.photo-viewer__nav--next:hover,
.photo-viewer__nav--next:focus-visible{transform:translate(50%,-50%) scale(1.09)}
.photo-viewer__index{left:16px;bottom:14px}
@media (max-width:680px){
  .photo-stream{--photo-gap:26px;height:142px}
  .photo-stream__track{padding-block:9px}
  .photo-frame{height:122px}
  .photo-viewer__panel{min-width:0;max-height:none;aspect-ratio:auto}
  .photo-viewer__nav{width:44px;height:64px}
  .photo-viewer__nav--prev{left:4px}
  .photo-viewer__nav--next{right:4px}
  .photo-viewer__index{left:12px;bottom:11px}
}
@media (prefers-reduced-motion:reduce){
  .photo-frame:nth-child(n+6){display:block}
}

/* V46: fixed, larger photo navigation controls and restored close control. */
.photo-viewer__close{
  position:absolute;
  z-index:6;
  top:clamp(20px,4vh,42px);
  right:clamp(20px,4vw,58px);
  width:52px;
  height:52px;
  color:#f4ffff;
  border-color:rgba(235,255,253,.72);
  background:rgba(5,43,62,.62);
  box-shadow:0 12px 32px rgba(2,24,40,.28);
  backdrop-filter:blur(14px) saturate(1.08);
}
.photo-viewer__close svg{width:22px;height:22px;stroke-width:1.9}
.photo-viewer__nav{
  position:absolute;
  z-index:5;
  top:50%;
  width:72px;
  height:112px;
  color:#f7ffff;
  border:1px solid rgba(230,255,252,.58);
  border-radius:16px;
  background:rgba(5,43,62,.58);
  box-shadow:0 14px 38px rgba(2,25,42,.26);
  backdrop-filter:blur(14px) saturate(1.08);
  transform:translateY(-50%);
}
.photo-viewer__nav--prev{left:clamp(28px,6vw,96px);right:auto;transform:translateY(-50%)}
.photo-viewer__nav--next{left:auto;right:clamp(28px,6vw,96px);transform:translateY(-50%)}
.photo-viewer__nav svg{width:34px;height:64px;stroke-width:1.75}
.photo-viewer__nav:hover,
.photo-viewer__nav:focus-visible{
  color:#fff;
  border-color:rgba(239,255,253,.88);
  background:rgba(8,58,78,.8);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 18px 46px rgba(2,25,42,.34);
}
@media (max-width:680px){
  .photo-viewer__close{
    top:max(14px,env(safe-area-inset-top));
    right:14px;
    width:48px;
    height:48px;
  }
  .photo-viewer__nav{width:54px;height:84px;border-radius:14px}
  .photo-viewer__nav--prev{left:28px;right:auto}
  .photo-viewer__nav--next{left:auto;right:28px}
  .photo-viewer__nav svg{width:24px;height:46px}
}

/* V47: real profile content in the two existing information columns. */
.profile-reserve--filled{
  min-height:0;
  padding:12px 4px 10px;
}
.profile-detail-list{
  display:grid;
  gap:clamp(5px,.75vh,9px);
  margin:0;
  padding:0;
  list-style:none;
}
.profile-detail-list li{
  position:relative;
  margin:0;
  padding:0 0 clamp(5px,.7vh,8px) 18px;
  color:#0b3850;
  border-bottom:1px solid rgba(17,75,98,.14);
  font-size:clamp(13px,1vw,16px);
  font-weight:500;
  line-height:1.42;
  letter-spacing:.005em;
}
.profile-detail-list li:last-child{padding-bottom:0;border-bottom:0}
.profile-detail-list li:before{
  content:"";
  position:absolute;
  left:1px;
  top:.58em;
  width:6px;
  height:6px;
  border:1px solid rgba(20,89,111,.68);
  border-radius:50%;
  background:rgba(226,246,244,.74);
  box-shadow:0 2px 8px rgba(17,75,98,.14);
}
@media (min-width:681px) and (max-height:680px){
  .profile-reserve--filled{padding-top:9px}
  .profile-detail-list{gap:3px}
  .profile-detail-list li{padding-bottom:4px;font-size:13px;line-height:1.32}
}
@media (max-width:680px){
  .profile-reserve--filled{padding:14px 4px 12px}
  .profile-detail-list{gap:8px}
  .profile-detail-list li{padding-bottom:8px;font-size:15px;line-height:1.5}
}

/* V49: short-to-long content inside the four unfolded cube panels. */
.cube-node{
  padding:clamp(18px,1.5vw,24px);
  align-items:stretch;
  justify-content:flex-start;
  text-align:left;
}
.cube-node .cube-node__heading{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(17,75,98,.18);
}
.cube-node .cube-node__heading strong{
  flex:none;
  color:#113e53;
  font-family:var(--serif-cn);
  font-size:clamp(19px,1.55vw,23px);
  font-weight:500;
  line-height:1;
  letter-spacing:.035em;
  white-space:nowrap;
}
.cube-node .cube-node__heading small{
  margin:0;
  color:#3e7280;
  font:600 10px/1 "Manrope",sans-serif;
  letter-spacing:.045em;
  text-align:right;
  white-space:nowrap;
}
.cube-node .cube-node__details{
  width:100%;
  display:grid;
  gap:clamp(4px,.6vh,7px);
  margin-top:clamp(10px,1vh,14px);
}
.cube-node .cube-node__details>span{
  position:relative;
  display:block;
  padding-left:14px;
  color:#1e5265;
  font-size:clamp(12px,.95vw,14px);
  font-weight:500;
  line-height:1.3;
  letter-spacing:.01em;
  white-space:nowrap;
}
.cube-node .cube-node__details>span:before{
  content:"";
  position:absolute;
  left:1px;
  top:.56em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#4a8996;
  box-shadow:0 2px 7px rgba(24,91,108,.2);
}
@media (min-width:681px) and (max-width:1100px){
  .cube-node{padding:16px}
  .cube-node .cube-node__heading{gap:8px;padding-bottom:8px}
  .cube-node .cube-node__heading strong{font-size:18px}
  .cube-node .cube-node__heading small{font-size:8px;letter-spacing:.02em}
  .cube-node .cube-node__details{gap:3px;margin-top:8px}
  .cube-node .cube-node__details>span{padding-left:11px;font-size:11.5px;line-height:1.24}
}
@media (max-width:680px){
  .cube-node{padding:12px}
  .cube-node .cube-node__heading{gap:5px;padding-bottom:6px}
  .cube-node .cube-node__heading strong{font-size:15px;letter-spacing:.02em}
  .cube-node .cube-node__heading small{font-size:7.5px;letter-spacing:0}
  .cube-node .cube-node__details{gap:2px;margin-top:7px}
  .cube-node .cube-node__details>span{padding-left:10px;font-size:10.5px;line-height:1.2;letter-spacing:0}
  .cube-node .cube-node__details>span:before{left:0;top:.52em;width:3px;height:3px}
}

/* V50: larger, consistent typography across all four cube panels. */
.cube-node .cube-node__heading strong{
  font-size:clamp(25px,2vw,30px);
}
.cube-node .cube-node__heading small{
  font-size:clamp(14px,1.05vw,16px);
  letter-spacing:.02em;
}
.cube-node .cube-node__details>span{
  font-size:clamp(15px,1.12vw,17px);
  line-height:1.28;
}
@media (min-width:681px) and (max-width:1100px){
  .cube-node .cube-node__heading strong{font-size:20px}
  .cube-node .cube-node__heading small{font-size:11px}
  .cube-node .cube-node__details>span{font-size:13.5px;line-height:1.24}
}
@media (max-width:680px){
  .cube-node .cube-node__heading strong{font-size:17px}
  .cube-node .cube-node__heading small{font-size:8px}
  .cube-node .cube-node__details>span{font-size:11.5px;line-height:1.2}
}

/* V51: proportional type scale, with the third AI line landing near two-thirds height. */
.cube-node .cube-node__heading strong{
  font-size:clamp(30px,2.4vw,35px);
}
.cube-node .cube-node__heading small{
  font-size:clamp(16px,1.25vw,18px);
}
.cube-node .cube-node__details>span{
  font-size:clamp(18.5px,1.42vw,20px);
  line-height:1.28;
}
@media (min-width:681px) and (max-width:1100px){
  .cube-node .cube-node__heading strong{font-size:22px}
  .cube-node .cube-node__heading small{font-size:11px}
  .cube-node .cube-node__details>span{font-size:15px;line-height:1.16}
}
@media (max-width:680px){
  .cube-node .cube-node__heading strong{font-size:18px}
  .cube-node .cube-node__heading small{font-size:8px}
  .cube-node .cube-node__details>span{font-size:12.5px;line-height:1.12}
}

/* V52: supplied artwork becomes the sealed background surface of each closed project tile. */
.project-tile{
  background-color:#edf6f3;
  background-image:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.project-tile:before{
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(247,252,249,.13) 54%,rgba(238,247,244,.42) 100%),
    linear-gradient(110deg,rgba(255,255,255,.1),transparent 48%,rgba(224,243,239,.06));
  opacity:1;
}
.project-tile__visual{
  opacity:.94;
  background-repeat:no-repeat;
  background-size:cover;
  filter:brightness(1.01) saturate(.9) contrast(.98);
  transform:scale(1.015);
}
.project-tile--one .project-tile__visual{
  background-image:url("assets/project-01-full-color-3d-printer-1200.webp");
  background-position:51% 54%;
}
.project-tile--two .project-tile__visual{
  background-image:url("assets/project-02-education-robot-1200.webp");
  background-position:49% 55%;
}
.project-tile--three .project-tile__visual{
  background-image:url("assets/project-03-habitat-ai-1200.webp");
  background-position:53% 54%;
}
.project-tile--four .project-tile__visual{
  background-image:url("assets/project-04-cross-border-trade-1200.webp");
  background-position:52% 55%;
}
.project-tile--five .project-tile__visual{
  background-image:url("assets/project-05-ai-applications-1200.webp");
  background-position:50% 54%;
}
.project-tile__copy,
.project-tile__action{
  position:relative;
  z-index:1;
}
.project-tile__copy{min-width:0}
.project-tile__copy strong{
  max-width:18ch;
  color:#092f45;
  font-size:clamp(21px,1.82vw,30px);
  line-height:1.16;
  letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.78);
}
.project-tile--one .project-tile__copy strong,
.project-tile--two .project-tile__copy strong{max-width:12ch}
.project-title--habitat>span{display:block}
.project-title--habitat>span:first-child{white-space:nowrap}
.project-tile:hover,
.project-tile:focus-visible{background-color:#eef8f6}
.project-tile:hover .project-tile__visual,
.project-tile:focus-visible .project-tile__visual{
  opacity:.98;
  transform:scale(1.04);
}
@media (max-width:900px){
  .project-tile__copy strong{max-width:20ch;font-size:clamp(22px,4.2vw,30px)}
  .project-tile--one .project-tile__copy strong,
  .project-tile--two .project-tile__copy strong{max-width:16ch}
  .project-tile--three .project-tile__visual,
  .project-tile--four .project-tile__visual,
  .project-tile--five .project-tile__visual{
    background-position:left center;
    background-size:150% auto;
  }
}
@media (max-width:520px){
  .project-tile{gap:10px}
  .project-tile__copy strong{font-size:clamp(20px,6vw,25px);line-height:1.18}
  .project-tile__action{padding-right:19px;font-size:10px}
}

/* V55: real project-one and project-two content inside the existing viewer. */
.project-viewer__image[hidden],
.project-viewer__media-placeholder[hidden],
.project-viewer__details[hidden]{display:none}
.project-viewer__panel.is-detailed-project{
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);
}
.project-viewer__image{
  position:absolute;
  z-index:2;
  top:clamp(76px,10vh,96px);
  left:clamp(22px,2.4vw,36px);
  right:clamp(22px,2.4vw,36px);
  height:44%;
  overflow:hidden;
  border-radius:14px;
  background-color:#edf7f5;
  background-position:center 54%;
  background-repeat:no-repeat;
  background-size:var(--project-image-size,270%) auto;
  box-shadow:0 18px 42px rgba(7,63,87,.15),inset 0 1px 0 rgba(255,255,255,.82);
}
.project-viewer__copy.is-detailed{
  min-height:0;
  justify-content:flex-start;
  padding:clamp(34px,3.5vw,52px) clamp(30px,3.4vw,50px) clamp(88px,10vh,108px);
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(35,105,126,.32) transparent;
}
.project-viewer__copy.is-detailed h2{
  order:1;
  max-width:12ch;
  font-size:clamp(30px,3vw,46px);
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.project-viewer__copy.is-detailed .project-viewer__en{
  order:2;
  max-width:32ch;
  margin:12px 0 0;
  color:#245f76;
  font-size:clamp(12px,1vw,15px);
  line-height:1.4;
  letter-spacing:.045em;
}
.project-viewer__copy.is-detailed .project-viewer__summary,
.project-viewer__copy.is-detailed .project-viewer__status{display:none}
.project-viewer__details{
  order:3;
  min-height:0;
  display:flex;
  flex:1;
  flex-direction:column;
  margin-top:clamp(24px,3vh,34px);
}
.project-viewer__facts{
  display:grid;
  gap:0;
  margin:0;
}
.project-viewer__facts>div{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:14px;
  padding:clamp(10px,1.5vh,14px) 0;
  border-top:1px solid rgba(20,86,108,.16);
}
.project-viewer__facts dt{
  color:#164e66;
  font-size:13px;
  font-weight:700;
  line-height:1.55;
}
.project-viewer__facts dd{
  margin:0;
  color:#2f6072;
  font-size:clamp(13px,1vw,15px);
  font-weight:520;
  line-height:1.55;
}
.project-viewer__disclaimer{
  margin:auto 0 0;
  padding-top:clamp(16px,2.2vh,22px);
  color:#477487;
  border-top:1px solid rgba(15,82,108,.24);
  font-size:12px;
  font-weight:600;
  line-height:1.65;
}
@media (max-width:900px){
  .project-viewer__panel.is-detailed-project{
    height:min(92dvh,820px);
    grid-template-columns:1fr;
    grid-template-rows:220px minmax(0,1fr);
  }
  .project-viewer__image{
    top:62px;
    left:24px;
    right:24px;
    height:calc(100% - 78px);
    background-size:var(--project-image-size-narrow,180%) auto;
  }
  .project-viewer__copy.is-detailed{
    padding:28px 30px 96px;
  }
  .project-viewer__copy.is-detailed h2{font-size:clamp(28px,5vw,38px)}
  .project-viewer__details{margin-top:20px}
  .project-viewer__facts>div{padding:9px 0}
}
@media (max-width:520px){
  .project-viewer__panel.is-detailed-project{
    height:calc(100dvh - 24px);
    grid-template-rows:180px minmax(0,1fr);
  }
  .project-viewer__image{
    top:60px;
    left:16px;
    right:16px;
    height:calc(100% - 72px);
    border-radius:12px;
  }
  .project-viewer__copy.is-detailed{padding:22px 20px 92px}
  .project-viewer__copy.is-detailed h2{font-size:clamp(25px,7vw,31px)}
  .project-viewer__copy.is-detailed .project-viewer__en{margin-top:8px;font-size:11px}
  .project-viewer__details{margin-top:16px}
  .project-viewer__facts>div{grid-template-columns:66px minmax(0,1fr);gap:10px;padding:8px 0}
  .project-viewer__facts dt{font-size:12px}
  .project-viewer__facts dd{font-size:12px;line-height:1.5}
  .project-viewer__disclaimer{padding-top:14px;font-size:11px;line-height:1.55}
}

/* V56: corrected project-one and project-two detail composition. */
.project-viewer__panel.is-detailed-project{
  grid-template-columns:minmax(0,1.62fr) minmax(320px,1fr);
  grid-template-rows:44% minmax(0,1fr);
  overflow:hidden;
  background:#e7f7f6;
}
.project-viewer__panel.is-detailed-project .project-viewer__media{
  grid-column:1;
  grid-row:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#e7f7f6;
}
.project-viewer__panel.is-detailed-project .project-viewer__media::after{display:none}
.project-viewer__panel.is-detailed-project .project-viewer__image{
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  background-color:#e7f7f6;
  background-position:center 54%;
  background-size:var(--project-image-size,270%) auto;
  box-shadow:none;
}
.project-viewer__copy.is-detailed{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  justify-content:center;
  padding:clamp(44px,4.6vw,70px) clamp(34px,4vw,58px) clamp(30px,3.2vw,48px);
  overflow:hidden;
  background:#e7f7f6;
}
.project-viewer__copy.is-detailed h2{
  max-width:13ch;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.1;
}
.project-viewer__copy.is-detailed .project-viewer__en{
  max-width:30ch;
  margin-top:14px;
  font-size:clamp(12px,1vw,15px);
}
.project-viewer__details{
  grid-column:1/-1;
  grid-row:2;
  min-width:0;
  min-height:0;
  margin:0;
  padding:clamp(20px,2.6vh,32px) clamp(36px,4.4vw,68px) clamp(86px,10vh,104px);
  overflow:auto;
  background:#e7f7f6;
  scrollbar-width:thin;
  scrollbar-color:rgba(35,105,126,.32) transparent;
}
.project-viewer__facts{
  width:100%;
}
.project-viewer__facts>div{
  grid-template-columns:clamp(82px,8vw,116px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);
  padding:clamp(9px,1.35vh,14px) 0;
}
.project-viewer__facts dt{
  font-size:clamp(12px,.95vw,14px);
}
.project-viewer__facts dd{
  font-size:clamp(13px,1.05vw,16px);
}
.project-viewer__disclaimer{
  width:100%;
  margin:auto 0 0;
  padding-top:clamp(14px,2vh,22px);
}
@media (max-width:900px){
  .project-viewer__panel.is-detailed-project{
    height:min(92dvh,820px);
    grid-template-columns:minmax(0,1.35fr) minmax(250px,.95fr);
    grid-template-rows:clamp(210px,31vh,260px) minmax(0,1fr);
  }
  .project-viewer__panel.is-detailed-project .project-viewer__image{
    background-size:var(--project-image-size,270%) auto;
  }
  .project-viewer__copy.is-detailed{
    padding:54px 26px 24px;
  }
  .project-viewer__copy.is-detailed h2{
    font-size:clamp(27px,4.8vw,38px);
  }
  .project-viewer__details{
    margin:0;
    padding:18px 30px 94px;
  }
}
@media (max-width:620px){
  .project-viewer__panel.is-detailed-project{
    height:calc(100dvh - 24px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(168px,28vh) auto minmax(0,1fr);
  }
  .project-viewer__panel.is-detailed-project .project-viewer__media{
    grid-column:1;
    grid-row:1;
  }
  .project-viewer__copy.is-detailed{
    grid-column:1;
    grid-row:2;
    justify-content:flex-start;
    padding:20px 20px 16px;
  }
  .project-viewer__copy.is-detailed h2{
    max-width:none;
    font-size:clamp(25px,7vw,31px);
  }
  .project-viewer__copy.is-detailed .project-viewer__en{
    margin-top:7px;
    font-size:11px;
  }
  .project-viewer__details{
    grid-column:1;
    grid-row:3;
    margin:0;
    padding:6px 20px 86px;
  }
  .project-viewer__facts>div{
    grid-template-columns:66px minmax(0,1fr);
    gap:10px;
    padding:8px 0;
  }
  .project-viewer__facts dt,
  .project-viewer__facts dd{font-size:12px}
  .project-viewer__disclaimer{
    padding-top:12px;
    font-size:11px;
    line-height:1.55;
  }
}
@media (min-width:621px) and (max-height:700px){
  .project-viewer__panel.is-detailed-project{
    grid-template-rows:42% minmax(0,1fr);
  }
  .project-viewer__copy.is-detailed{
    padding-top:48px;
    padding-bottom:20px;
  }
  .project-viewer__copy.is-detailed h2{font-size:clamp(27px,3vw,39px)}
  .project-viewer__details{padding:12px 42px 76px}
  .project-viewer__facts>div{padding:7px 0}
  .project-viewer__facts dd{font-size:13px;line-height:1.45}
  .project-viewer__disclaimer{padding-top:10px;font-size:11px}
}

/* V57: complete all five project details and strengthen reading sizes. */
.project-viewer__facts[hidden],
.project-viewer__points[hidden]{display:none}
.project-viewer__facts dt{
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.55;
}
.project-viewer__facts dd{
  max-width:72ch;
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.58;
}
.project-viewer__disclaimer{
  font-size:clamp(15px,1.08vw,17px);
  font-weight:650;
  line-height:1.65;
}
.project-viewer__points{
  display:grid;
  width:100%;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.project-viewer__points li{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  gap:clamp(14px,1.8vw,24px);
  align-items:center;
  max-width:72ch;
  padding:clamp(13px,1.8vh,19px) 0;
  color:#2f6072;
  border-top:1px solid rgba(20,86,108,.16);
  font-size:clamp(17px,1.3vw,20px);
  font-weight:560;
  line-height:1.55;
}
.project-viewer__points li::before{
  width:7px;
  height:7px;
  content:"";
  background:#2b7187;
  border-radius:2px;
}
.project-viewer__panel[data-active-project="3"] .project-viewer__copy.is-detailed h2,
.project-viewer__panel[data-active-project="5"] .project-viewer__copy.is-detailed h2{
  font-size:clamp(29px,2.65vw,42px);
}
.project-viewer__panel[data-active-project="3"] .project-viewer__copy.is-detailed h2{
  white-space:pre-line;
}
@media (max-width:900px){
  .project-viewer__facts dt{font-size:15px}
  .project-viewer__facts dd{font-size:16px}
  .project-viewer__disclaimer{font-size:14px}
  .project-viewer__points li{padding:12px 0;font-size:17px}
  .project-viewer__panel[data-active-project="3"] .project-viewer__copy.is-detailed h2,
  .project-viewer__panel[data-active-project="5"] .project-viewer__copy.is-detailed h2{
    font-size:clamp(25px,4.25vw,34px);
  }
}
@media (max-width:620px){
  .project-viewer__facts dt{font-size:14px}
  .project-viewer__facts dd{font-size:15px;line-height:1.55}
  .project-viewer__disclaimer{font-size:14px;line-height:1.6}
  .project-viewer__points li{
    grid-template-columns:8px minmax(0,1fr);
    gap:11px;
    padding:10px 0;
    font-size:15px;
  }
  .project-viewer__points li::before{width:6px;height:6px}
  .project-viewer__panel[data-active-project="3"] .project-viewer__copy.is-detailed h2,
  .project-viewer__panel[data-active-project="5"] .project-viewer__copy.is-detailed h2{
    font-size:clamp(23px,6.4vw,28px);
  }
}
@media (min-width:621px) and (max-height:700px){
  .project-viewer__facts dt{font-size:14px}
  .project-viewer__facts dd{font-size:15px;line-height:1.5}
  .project-viewer__disclaimer{font-size:13px}
  .project-viewer__points li{padding:9px 0;font-size:16px}
}
@media (min-width:621px){
  .project-viewer__panel[data-active-project="3"] .project-viewer__copy.is-detailed h2{
    max-width:none;
    font-size:clamp(27px,2vw,32px);
  }
}

/* V58: repair only extreme-width profile layouts; normal desktop geometry is untouched. */
@media (max-width:680px){
  body.profile-active .site-header.scrolled .top-actions{
    flex:none;
    gap:6px;
  }
  body.profile-active .site-header.scrolled .nav-button,
  body.profile-active .site-header.scrolled .nav-button--filled{
    width:auto;
    min-width:48px;
    height:36px;
    padding:0 7px;
    white-space:nowrap;
    line-height:1;
    border-radius:10px;
  }
  .profile-column--skills{order:2}
  .profile-axis{
    order:3;
    min-height:0;
    grid-template-rows:24px auto 24px;
  }
  .cube-system{
    width:100%;
    height:clamp(240px,76vw,286px);
  }
  .cube-system.is-open{
    height:clamp(500px,140vw,560px);
  }
  .cube-system .cube-trigger{
    position:absolute;
    left:50%;
    bottom:48px;
    margin-left:-61px;
  }
  .cube-hint{
    left:50%;
    bottom:0;
    gap:1px;
    padding:3px 7px 4px;
    font-size:clamp(10.5px,3vw,11.5px);
    transform:translateX(-50%);
  }
  .cube-hint__arrow{
    width:15px;
    height:18px;
  }
  .cube-menu{
    inset:0 auto auto 50%;
    width:min(calc(100vw - 24px),520px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    transform:translateX(-50%);
  }
  .cube-node{
    position:relative;
    inset:auto;
    width:100%;
    min-width:0;
    height:clamp(140px,40vw,158px);
    padding:11px;
    transform:scale(.88);
  }
  .cube-system.is-open .cube-node--one,
  .cube-system.is-open .cube-node--two,
  .cube-system.is-open .cube-node--three,
  .cube-system.is-open .cube-node--four{
    transform:none;
  }
  .cube-node .cube-node__heading{
    display:grid;
    justify-content:stretch;
    gap:4px;
  }
  .cube-node .cube-node__heading strong{
    font-size:clamp(15px,4.7vw,18px);
  }
  .cube-node .cube-node__heading small{
    font-size:clamp(7.5px,2.3vw,9px);
    text-align:left;
  }
  .cube-node .cube-node__details{
    gap:2px;
    margin-top:7px;
  }
  .cube-node .cube-node__details>span{
    padding-left:9px;
    font-size:clamp(10.5px,3.25vw,12.5px);
    line-height:1.18;
    white-space:normal;
  }
}
@media (max-width:270px){
  body.profile-active .site-header.scrolled{
    padding-inline:8px;
  }
  body.profile-active .site-header.scrolled .brand{
    min-width:0;
    gap:6px;
  }
  body.profile-active .site-header.scrolled .brand-orbit{
    flex:none;
    width:30px;
    height:30px;
  }
  body.profile-active .site-header.scrolled .brand>span:last-child{
    max-width:76px;
    font-size:19px;
    line-height:.84;
  }
  body.profile-active .site-header.scrolled .top-actions{
    gap:4px;
  }
  body.profile-active .site-header.scrolled .nav-button,
  body.profile-active .site-header.scrolled .nav-button--filled{
    min-width:42px;
    height:34px;
    padding-inline:4px;
    font-size:14px;
  }
}
@media (min-width:1800px){
  .cube-hint{
    gap:4px;
    padding:6px 11px 7px;
    font-size:clamp(14px,.7vw,17px);
  }
  .cube-hint__arrow{
    width:21px;
    height:26px;
  }
}

/* V59: stack the future-plan heading above its plan list on portrait mobile only. */
@media (max-width:680px) and (orientation:portrait){
  #future .future-layout{
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
  }
  #future .future-title-panel{
    flex:none;
    min-height:clamp(142px,42vw,174px);
  }
  #future .future-title{
    margin:0 0 24px;
    font-size:clamp(40px,13vw,52px);
    line-height:1;
    letter-spacing:.12em;
    writing-mode:horizontal-tb;
    text-orientation:mixed;
  }
  #future .future-title-panel:after{
    left:50%;
    bottom:22px;
    width:44px;
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(39,105,137,.58),transparent);
  }
  #future .future-plan-panel{
    align-self:stretch;
  }
}

/* V60: portrait mobile uses one continuous hero image, without a masked duplicate. */
@media (max-width:680px) and (orientation:portrait){
  #home .scene-base,
  #home .scene-horizon{
    display:none;
  }
}

/* V61: supplied imagery for all future-plan cards and top-led detail viewers. */
.future-plan-trigger{
  isolation:isolate;
  overflow:hidden;
  background-color:#edf6f5;
}
.future-plan-trigger::before,
.future-plan-trigger::after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
}
.future-plan-trigger::before{
  z-index:-2;
  background-position:center 52%;
  background-repeat:no-repeat;
  background-size:82% auto;
  filter:brightness(1.01) saturate(1.04) contrast(1.035);
}
.future-plan-trigger::after{
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(241,250,249,.42),rgba(236,248,247,.18) 48%,rgba(238,249,248,.32)),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 48%,rgba(229,243,241,.12));
}
.future-plan-item:nth-child(1) .future-plan-trigger::before{background-image:url("assets/future-plan-01-city-1200.webp")}
.future-plan-item:nth-child(2) .future-plan-trigger::before{background-image:url("assets/future-plan-02-hiking-1200.webp")}
.future-plan-item:nth-child(3) .future-plan-trigger::before{background-image:url("assets/future-plan-03-maritime-1200.webp")}
.future-plan-number,
.future-plan-copy,
.future-plan-action{
  position:relative;
  z-index:1;
}
.future-viewer__panel{
  grid-template-columns:1fr;
  grid-template-rows:38% minmax(0,1fr);
}
.future-viewer__media{
  grid-column:1;
  grid-row:1;
  min-width:0;
  min-height:0;
  background-color:#eaf4f4;
  background-position:center 52%;
  background-repeat:no-repeat;
  background-size:cover;
}
.future-viewer__index{
  position:absolute;
  right:clamp(16px,2vw,28px);
  bottom:clamp(14px,2vh,22px);
}
.future-viewer__copy{
  grid-column:1;
  grid-row:2;
  justify-content:flex-start;
  min-width:0;
  min-height:0;
  padding:clamp(30px,3.8vw,54px) clamp(34px,5vw,72px) clamp(84px,10vh,104px);
  overflow:auto;
  background:#eaf6f5;
}
@media (max-width:900px){
  .future-viewer__panel{
    grid-template-rows:38% minmax(0,1fr);
  }
  .future-viewer__copy{
    padding:clamp(26px,4vw,38px) clamp(26px,4.5vw,38px) 112px;
  }
}
@media (max-width:680px){
  .future-plan-trigger::before{
    background-size:cover;
  }
}
@media (max-width:520px){
  .future-viewer__panel{
    grid-template-rows:38% minmax(0,1fr);
  }
  .future-viewer__copy{
    padding:26px 22px 108px;
  }
  .future-viewer__index{
    right:14px;
    bottom:12px;
  }
}

/* V63: longer future imagery, taller plan cards, and a unified blue-white surface palette. */
.future-plan-trigger{
  min-height:clamp(176px,21vh,214px);
}
.future-plan-trigger::before{
  background-size:cover;
}
.future-viewer__panel{
  background:linear-gradient(150deg,#f7fbff 0%,#deeff9 54%,#edf7fc 100%);
}
.future-viewer__media{
  background-color:#e5f2fa;
}
.future-viewer__copy{
  background:linear-gradient(145deg,#f8fcff 0%,#e1f1fa 52%,#f1f8fc 100%);
}
#contact-modal .modal-panel{
  background:linear-gradient(145deg,#f9fcff 0%,#deeff9 50%,#edf7fc 100%);
}
#message-modal .modal-panel{
  background:linear-gradient(215deg,#f8fcff 0%,#e3f2fa 52%,#f0f8fc 100%);
}
@media (max-width:680px){
  .future-plan-trigger{
    min-height:158px;
  }
}

/* V64: unified compact mobile header and completed future-plan copy. */
#future{
  padding-top:clamp(88px,8.5vh,110px);
}
#future .future-layout{
  min-height:0;
  align-items:stretch;
}
#future .future-title-panel{
  min-height:0;
}
#future .future-plan-panel{
  align-self:stretch;
}
.future-plan-number{
  padding-top:2px;
  font-size:clamp(15px,1vw,17px);
}
.future-plan-copy{
  transform:translate(-10px,-10px);
}
.future-viewer__summary{
  max-width:72ch;
  white-space:pre-line;
}
.future-viewer__status{
  margin-top:auto;
  padding-top:clamp(14px,2vh,22px);
  font-size:clamp(14px,1.05vw,16px);
  font-weight:650;
  line-height:1.65;
}
.future-closing-note{
  width:min(1220px,90vw);
  margin:clamp(20px,3vh,30px) auto 0;
  padding-top:clamp(15px,2vh,20px);
  color:#123f58;
  border-top:1px solid rgba(26,92,123,.28);
  text-align:center;
  text-shadow:0 1px 16px rgba(248,253,255,.82);
}
.future-closing-note p{
  margin:0;
  font-size:clamp(14px,1.08vw,17px);
  font-weight:600;
  line-height:1.75;
}
.future-closing-note p+p{
  margin-top:4px;
}
@media (max-width:680px){
  .site-header .top-actions{
    flex:none;
    gap:6px;
  }
  .site-header .nav-button,
  .site-header .nav-button--filled{
    width:48px;
    min-width:48px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    white-space:nowrap;
    line-height:1;
    border-radius:10px;
  }
  #future{
    padding-top:76px;
  }
  #future .future-title-panel{
    min-height:clamp(136px,39vw,160px);
  }
  .future-plan-copy{
    transform:translate(-4px,-8px);
  }
  .future-closing-note{
    width:100%;
    margin-top:20px;
    padding:16px 8px 0;
  }
  .future-closing-note p{
    font-size:14px;
    line-height:1.7;
  }
}
@media (max-width:320px){
  .site-header{
    padding-inline:8px;
  }
  .site-header .top-actions{
    gap:4px;
  }
  .site-header .nav-button,
  .site-header .nav-button--filled{
    width:44px;
    min-width:44px;
    height:34px;
    font-size:14px;
  }
}

/* V65: keep the future section to one viewport and retain the closing note in-frame. */
#future{
  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;
  max-height:100svh;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:clamp(32px,5vh,72px);
}
#future .future-layout{
  flex:0 1 clamp(548px,calc(63svh + 20px),662px);
  height:clamp(548px,calc(63svh + 20px),662px);
  min-height:0;
}
#future .future-plan-panel,
#future .future-plan-list,
#future .future-plan-item{
  min-height:0;
}
#future .future-plan-list{
  height:100%;
  display:grid;
  grid-template-rows:repeat(3,minmax(0,1fr));
}
#future .future-plan-trigger{
  height:100%;
  min-height:0;
  padding-block:clamp(12px,2.2svh,30px);
}
.future-closing-note{
  position:relative;
  flex:none;
  margin-top:clamp(12px,2.2vh,24px);
  padding-top:clamp(10px,1.6vh,16px);
  color:#0d354b;
  background:radial-gradient(ellipse at center,rgba(250,254,255,.66) 0%,rgba(248,253,255,.4) 46%,rgba(248,253,255,0) 80%);
  text-shadow:0 1px 2px rgba(255,255,255,.98),0 0 12px rgba(255,255,255,.88),0 0 28px rgba(255,255,255,.58);
}
.future-closing-note p{
  font-weight:650;
}
@media (max-width:680px){
  #future{
    padding-bottom:clamp(18px,3vh,28px);
  }
  #future .future-layout{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    gap:10px;
  }
  #future .future-title-panel{
    flex:0 1 clamp(104px,18svh,136px);
    min-height:88px;
  }
  #future .future-plan-panel{
    flex:1 1 auto;
    min-height:0;
  }
  #future .future-plan-trigger{
    padding-block:clamp(8px,1.7svh,14px);
  }
  .future-closing-note{
    margin-top:12px;
    padding:10px 6px 0;
  }
}

/* V66: launch-ready message states, local assets, and plan-two text measure. */
.scene-fill,
.scene-horizon{
  background-image:url("assets/hero-sky-wide-safe-v4-1280.webp");
  background-image:image-set(url("assets/hero-sky-wide-safe-v4-1280.webp") 1x,url("assets/hero-sky-wide-safe-v4-1920.webp") 2x);
}
.future-viewer[data-active-future="2"] .future-viewer__summary{
  max-width:100%;
}
input::placeholder,
textarea::placeholder{
  color:rgba(76,104,121,.62);
  opacity:1;
}
.form-note:empty{
  display:none;
}
.form-note.error{
  color:#8b3f46;
}
.submit-button:disabled{
  cursor:wait;
  opacity:.68;
}
.site-header .nav-button{
  position:relative;
}
.site-header .nav-button::before{
  content:"";
  position:absolute;
  inset:-5px 0;
}