:is(.intro-stage,.catalogue-stage,.details-stage){ --ink: #050505; --blue: #3467f5; }:is(.intro-stage,.catalogue-stage,.details-stage) *{ box-sizing: border-box; }:is(.intro-stage,.catalogue-stage,.details-stage),:is(.intro-stage,.catalogue-stage,.details-stage){ margin: 0; height: 100%; overflow: hidden; background: #eef3ff; font-family: Arial, "Microsoft YaHei", sans-serif; }:is(.intro-stage,.catalogue-stage,.details-stage) .site{ width: 100%; height: 100%; position: relative; isolation: isolate; transition:background 850ms cubic-bezier(.2,.8,.2,1); }:is(.intro-stage,.catalogue-stage,.details-stage) .site.theme-0{ background:linear-gradient(155deg, #3268f4 0%, #769dfb 43%, #bbc9ff 76%, #f7f8ff 100%); }:is(.intro-stage,.catalogue-stage,.details-stage) .site.theme-1{ background:linear-gradient(155deg, #fafdff 0%, #ffffff 52%, #edf2ff 100%); }:is(.intro-stage,.catalogue-stage,.details-stage) .site.theme-2{ background:linear-gradient(155deg, #ffffff 0%, #e7eeff 47%, #8aa8ff 100%); }:is(.intro-stage,.catalogue-stage,.details-stage) .site.theme-3{ background:linear-gradient(180deg, #3268f4 0%, #5a86fb 21%, #fff 21.2%, #fff 78%, #9ab4ff 100%); }:is(.intro-stage,.catalogue-stage,.details-stage) .page{ position: absolute; inset: 0; background:transparent; transition: opacity .25s linear; }:is(.intro-stage,.catalogue-stage,.details-stage) .page[hidden]{ display: none; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:not(:first-child) .orb{ opacity:.34; filter:saturate(.78) blur(.4px); }:is(.intro-stage,.catalogue-stage,.details-stage) .content-layer{ position:absolute; inset:0; }:is(.intro-stage,.catalogue-stage,.details-stage) .page.entering .content-layer{ animation: content-rise var(--entry-duration, .7s) cubic-bezier(.22,.77,.21,1) both; }@keyframes content-rise{ from { transform:translateY(18vh); opacity:0; } to { transform:translateY(0); opacity:1; } }:is(.intro-stage,.catalogue-stage,.details-stage) .profile-layout{ height:100%; display:grid; grid-template-columns:minmax(230px, .82fr) 1.38fr; gap:clamp(35px,6vw,115px); align-items:center; padding:9vh 10vw; color:var(--ink); }:is(.intro-stage,.catalogue-stage,.details-stage) .portrait{ width:min(29vw,510px); aspect-ratio:510/617; object-fit:cover; border-radius:3px; box-shadow:0 20px 45px #3150a940; }:is(.intro-stage,.catalogue-stage,.details-stage) .profile-copy{ align-self:center; }:is(.intro-stage,.catalogue-stage,.details-stage) .eyebrow{ display:inline-block; margin:0 0 22px; color:#123cbb; font-size:clamp(18px,2vw,38px); font-weight:900; }:is(.intro-stage,.catalogue-stage,.details-stage) .profile-facts{ display:grid; grid-template-columns:1fr 1fr; gap:17px 45px; font-size:clamp(14px,1.35vw,25px); line-height:1.45; }:is(.intro-stage,.catalogue-stage,.details-stage) .profile-facts strong{ display:block; font-size:1.03em; }:is(.intro-stage,.catalogue-stage,.details-stage) .experience{ margin-top:clamp(22px,4vh,58px); display:grid; gap:clamp(14px,2vh,26px); font-size:clamp(12px,1.13vw,21px); line-height:1.45; }:is(.intro-stage,.catalogue-stage,.details-stage) .experience p{ margin:3px 0 0; color:#263447; }:is(.intro-stage,.catalogue-stage,.details-stage) .experience b{ font-size:1.06em; }:is(.intro-stage,.catalogue-stage,.details-stage) .skills-layout{ height:100%; display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:8vw; padding:9vh 9vw; color:var(--ink); }:is(.intro-stage,.catalogue-stage,.details-stage) .skill-notes{ align-self:end; padding-bottom:5vh; font-size:clamp(15px,1.45vw,27px); line-height:1.72; }:is(.intro-stage,.catalogue-stage,.details-stage) .skill-notes p{ margin:.1em 0; }:is(.intro-stage,.catalogue-stage,.details-stage) .skill-panel h2{ margin:0 0 20px; color:#123cbb; text-align:center; font-size:clamp(19px,2.1vw,40px); }:is(.intro-stage,.catalogue-stage,.details-stage) .icon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(15px,2.1vw,39px); }:is(.intro-stage,.catalogue-stage,.details-stage) .tool{ aspect-ratio:1; display:grid; place-items:center; }:is(.intro-stage,.catalogue-stage,.details-stage) .tool img{ width:52%; height:52%; object-fit:contain; }:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue{ padding:7vh 0 8vh; color:#050505; overflow:hidden; }:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue-title{ display:inline-flex; align-items:center; justify-content:center; margin:0 0 6.5vh 4vw; width:clamp(105px,13vw,205px); height:clamp(45px,6vw,94px); border-radius:99px; background:#fff; font-size:clamp(24px,3vw,52px); font-weight:900; }:is(.intro-stage,.catalogue-stage,.details-stage) .carousel{ width:100%; overflow-x:auto; scrollbar-width:none; cursor:ew-resize; padding:25px max(2vw,24px) 46px; overscroll-behavior-x:contain; }:is(.intro-stage,.catalogue-stage,.details-stage) .carousel::-webkit-scrollbar{ display:none; }:is(.intro-stage,.catalogue-stage,.details-stage) .carousel-track{ display:flex; align-items:center; gap:clamp(17px,2.8vw,50px); width:max-content; padding:0 34vw; }:is(.intro-stage,.catalogue-stage,.details-stage) .work-card{ flex:0 0 clamp(170px,20vw,335px); overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 9px 17px #213a8b3b; transform:scale(.86); opacity:.65; transition:transform .36s cubic-bezier(.2,.8,.2,1), opacity .36s ease, box-shadow .36s ease; }:is(.intro-stage,.catalogue-stage,.details-stage) .work-card.is-current{ transform:scale(1.08); opacity:1; box-shadow:0 21px 38px #213a8b55; }:is(.intro-stage,.catalogue-stage,.details-stage) .work-card:hover{ transform:scale(1.16); opacity:1; box-shadow:0 24px 44px #213a8b66; }:is(.intro-stage,.catalogue-stage,.details-stage) .work-card img{ display:block; width:100%; aspect-ratio: .78; object-fit:cover; transition:transform .36s cubic-bezier(.2,.8,.2,1); }:is(.intro-stage,.catalogue-stage,.details-stage) .work-card:hover img{ transform:scale(1.045); }:is(.intro-stage,.catalogue-stage,.details-stage) .work-meta{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 16px 14px; font-size:clamp(16px,1.75vw,29px); font-weight:900; }:is(.intro-stage,.catalogue-stage,.details-stage) .work-meta small{ font-size:.75em; color:#555; }:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue-tip{ margin:0; text-align:center; font-size:11px; letter-spacing:.15em; font-weight:700; opacity:.6; }:is(.intro-stage,.catalogue-stage,.details-stage) .grain{ position:absolute; inset:0; opacity:.03; pointer-events:none; background-image: radial-gradient(#000 0.45px, transparent .65px); background-size:4px 4px; mix-blend-mode:multiply; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb{ position:absolute; z-index:2; border-radius:50%; pointer-events:none; filter: saturate(1.1); animation: drift var(--speed, 9s) ease-in-out infinite alternate; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.one{ width:clamp(36px,5.5vw,105px); aspect-ratio:1; left:48.8%; top:48.8%; background:radial-gradient(circle at 34% 22%,#dfb0ff 0, #a863ff 24%,#6134e9 65%,#3429d5); box-shadow:0 10px 20px #5e42d955; --speed:7s; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.two{ width:clamp(75px,15vw,285px); aspect-ratio:1; right:-6%; bottom:-11%; background:radial-gradient(circle at 30% 20%,#ca9aff,#a174ee 42%,#865be8 80%); opacity:.88; --speed:13s; animation-delay:-4s; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.three{ width:clamp(25px,4vw,78px); aspect-ratio:1; left:6%; bottom:24%; background:radial-gradient(circle at 38% 26%,#ffd6e9,#ef93df 48%,#b75aee); filter: blur(1.5px); --speed:8s; animation-delay:-2s; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.four{ width:clamp(70px,13vw,250px); aspect-ratio:1; left:-7%; top:23%; background:radial-gradient(circle at 30% 22%,#d2c5ff,#8b76fa 56%,#5c55d9); --speed:12s; animation-delay:-7s; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.five{ width:clamp(45px,7vw,135px); aspect-ratio:1; left:28%; top:-5%; background:radial-gradient(circle at 32% 20%,#d0efff,#5dcfff 45%,#487be6); filter:blur(1px); --speed:10s; animation-delay:-6s; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.six{ width:clamp(55px,9vw,170px); aspect-ratio:1; right:3%; top:4%; background:radial-gradient(circle at 34% 20%,#b5a6ff,#7864eb 53%,#5043dc); --speed:7s; animation-delay:-4s; }:is(.intro-stage,.catalogue-stage,.details-stage) .orb.seven{ width:clamp(50px,10vw,185px); aspect-ratio:1; right:8%; top:43%; left:auto; bottom:auto; background:radial-gradient(circle at 35% 22%,#f1d8ff,#c6a5ef 55%,#a482e4); --speed:15s; animation-delay:-9s; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2) .orb.one{ left:-3%; top:13%; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2) .orb.two{ right:-4%; top:-7%; bottom:auto; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2) .orb.three{ display:block; width:clamp(32px,5vw,95px); right:8%; left:auto; top:auto; bottom:-3%; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3) .orb.one{ left:-4%; top:19%; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3) .orb.two{ left:auto; right:-4%; top:-8%; bottom:auto; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3) .orb.three{ left:auto; right:14%; top:auto; bottom:-6%; filter:none; background:radial-gradient(circle at 34% 22%,#6f82ff,#4e36e9 60%,#2530cc); }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2)::before,:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2)::after,:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3)::before,:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3)::after{ content:""; position:absolute; z-index:1; border-radius:50%; opacity:.28; pointer-events:none; animation:drift 11s ease-in-out infinite alternate; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2)::before{ width:clamp(52px,9vw,160px); aspect-ratio:1; left:-4%; top:12%; background:radial-gradient(circle at 32% 22%,#d9c7ff,#9476e9 58%,#7256d6); }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(2)::after{ width:clamp(32px,5vw,92px); aspect-ratio:1; right:6%; bottom:-2%; background:radial-gradient(circle at 32% 22%,#ffd5ec,#df98e7 58%,#aa72dc); animation-delay:-5s; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3)::before{ width:clamp(45px,8vw,145px); aspect-ratio:1; left:-3%; bottom:14%; background:radial-gradient(circle at 32% 22%,#c9b9ff,#886ee8 58%,#5f50d0); animation-delay:-3s; }:is(.intro-stage,.catalogue-stage,.details-stage) .page:nth-child(3)::after{ width:clamp(30px,4.5vw,82px); aspect-ratio:1; right:5%; top:10%; background:radial-gradient(circle at 32% 22%,#d5f3ff,#80cff4 58%,#5a9ee1); animation-delay:-8s; }@keyframes drift{ from { transform:translate3d(-10px,-28px,0) rotate(-5deg); } to { transform:translate3d(16px,34px,0) rotate(6deg); } }:is(.intro-stage,.catalogue-stage,.details-stage) .cover-copy{ position:absolute; z-index:4; color:#000; cursor:default; transform-origin:left center; transition:transform .35s cubic-bezier(.2,.8,.2,1), letter-spacing .35s ease; }:is(.intro-stage,.catalogue-stage,.details-stage) .cover-copy:hover{ transform:scale(1.055); letter-spacing:.012em; }:is(.intro-stage,.catalogue-stage,.details-stage) .cover-title{ left:12.8%; top:29%; max-width:78vw; font-size:clamp(3.3rem,11.8vw,14.2rem); line-height:.95; font-weight:900; letter-spacing:-.07em; white-space:nowrap; }:is(.intro-stage,.catalogue-stage,.details-stage) .cover-subtitle{ left:12.6%; top:54%; font-size:clamp(1.75rem,4.15vw,5rem); font-weight:900; letter-spacing:.04em; }:is(.intro-stage,.catalogue-stage,.details-stage) .hud{ position:absolute; z-index:20; inset:auto 28px 23px; display:flex; align-items:center; justify-content:space-between; color:#111; mix-blend-mode:multiply; font-size:12px; font-weight:700; letter-spacing:.08em; }:is(.intro-stage,.catalogue-stage,.details-stage) .counter{ background:#ffffff99; backdrop-filter:blur(8px); border:1px solid #00000018; padding:8px 11px; border-radius:99px; }:is(.intro-stage,.catalogue-stage,.details-stage) .controls{ display:flex; gap:7px; }:is(.intro-stage,.catalogue-stage,.details-stage) button{ border:1px solid #00000020; background:#ffffffb8; color:#111; font:inherit; width:36px; height:36px; border-radius:50%; cursor:pointer; transition:transform .2s, background .2s; }:is(.intro-stage,.catalogue-stage,.details-stage) button:hover{ transform:scale(1.08); background:#fff; }:is(.intro-stage,.catalogue-stage,.details-stage) .hint{ position:absolute; z-index:20; top:22px; right:28px; color:#111; font-size:11px; font-weight:700; letter-spacing:.1em; mix-blend-mode:multiply; }@media (max-width:700px){:is(.intro-stage,.catalogue-stage,.details-stage) .hud{ inset:auto 16px 14px; }:is(.intro-stage,.catalogue-stage,.details-stage) .hint{ display:none; }:is(.intro-stage,.catalogue-stage,.details-stage) .cover-title{ font-size:11.8vw; }:is(.intro-stage,.catalogue-stage,.details-stage) .cover-subtitle{ font-size:4.15vw; }:is(.intro-stage,.catalogue-stage,.details-stage) .profile-layout{ display:flex; flex-direction:column; justify-content:center; overflow:auto; padding:9vh 9vw 13vh; gap:25px; }:is(.intro-stage,.catalogue-stage,.details-stage) .portrait{ width:min(65vw,360px); }:is(.intro-stage,.catalogue-stage,.details-stage) .profile-facts{ gap:15px; }:is(.intro-stage,.catalogue-stage,.details-stage) .experience{ margin-top:25px; }:is(.intro-stage,.catalogue-stage,.details-stage) .skills-layout{ grid-template-columns:1fr; overflow:auto; padding:11vh 9vw 13vh; gap:28px; }:is(.intro-stage,.catalogue-stage,.details-stage) .skill-notes{ order:2; padding:0; }:is(.intro-stage,.catalogue-stage,.details-stage) .skill-panel{ order:1; }:is(.intro-stage,.catalogue-stage,.details-stage) .tool{ border-radius:18%; }}@media (prefers-reduced-motion: reduce){:is(.intro-stage,.catalogue-stage,.details-stage) .orb{ animation:none; }:is(.intro-stage,.catalogue-stage,.details-stage) .page.entering .content-layer{ animation-duration:.2s; }}
:is(.intro-stage,.catalogue-stage,.details-stage){height:clamp(640px,74vw,850px);position:relative;overflow:hidden;background:#edf2ff;isolation:isolate}:is(.intro-stage,.catalogue-stage,.details-stage) .site{height:100%;width:100%}:is(.intro-stage,.catalogue-stage,.details-stage) .hud{mix-blend-mode:normal;align-items:center;gap:12px}:is(.intro-stage,.catalogue-stage,.details-stage) .scene-tabs{display:flex;gap:6px;flex-wrap:wrap}:is(.intro-stage,.catalogue-stage,.details-stage) .scene-tabs button{width:auto;height:auto;padding:10px 16px;border-radius:30px;font-size:14px}:is(.intro-stage,.catalogue-stage,.details-stage) .scene-tabs button[aria-pressed=true]{background:#15151b;color:white}:is(.intro-stage,.catalogue-stage,.details-stage) .hint{font-size:12px}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card{cursor:pointer;text-align:left;border:0;height:auto;display:block;color:#111;padding:0;font:inherit;border-radius:18px}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card:focus-visible{outline:3px solid #315dff;outline-offset:5px}:is(.intro-stage,.catalogue-stage,.details-stage) .cover-title{font-size:clamp(55px,11.8vw,170px);letter-spacing:-.065em}:is(.intro-stage,.catalogue-stage,.details-stage) .cover-subtitle{font-size:clamp(24px,4vw,56px)}:is(.intro-stage,.catalogue-stage,.details-stage) .tool{position:relative}:is(.intro-stage,.catalogue-stage,.details-stage) .tool img{transition:transform .25s}:is(.intro-stage,.catalogue-stage,.details-stage) .tool:hover img{transform:translateY(-7px) scale(1.1)}:is(.intro-stage,.catalogue-stage,.details-stage) .tool::after{content:attr(data-label);position:absolute;bottom:0;font-size:12px;color:#263447}:is(.intro-stage,.catalogue-stage,.details-stage) .profile-layout{padding:8% 8% 100px;gap:5%}:is(.intro-stage,.catalogue-stage,.details-stage) .profile-facts{font-size:16px}:is(.intro-stage,.catalogue-stage,.details-stage) .eyebrow{font-size:24px;letter-spacing:0}:is(.intro-stage,.catalogue-stage,.details-stage) .experience{font-size:14px;gap:15px;margin-top:25px}:is(.intro-stage,.catalogue-stage,.details-stage) .experience .eyebrow{margin:0}:is(.intro-stage,.catalogue-stage,.details-stage) .portrait{width:100%;max-width:340px;border-radius:4px;filter:none}:is(.intro-stage,.catalogue-stage,.details-stage) .skill-notes{font-size:16px}:is(.intro-stage,.catalogue-stage,.details-stage) .skill-panel h2{font-size:26px}:is(.intro-stage,.catalogue-stage,.details-stage) .work-meta{font-size:20px}:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue-title{font-size:30px}:is(.intro-stage,.catalogue-stage,.details-stage) .content-layer{padding-bottom:100px}:is(.intro-stage,.catalogue-stage,.details-stage) .counter{white-space:nowrap}:is(.intro-stage,.catalogue-stage,.details-stage) .controls button{width:42px;height:42px}:is(.intro-stage,.catalogue-stage,.details-stage) .grain,:is(.intro-stage,.catalogue-stage,.details-stage) .orb{pointer-events:none}.intro-follow{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 5%;border-bottom:1px solid #ddd}.intro-follow p{font-size:16px;line-height:1.7;margin:0;color:#666}.intro-follow a{font-size:15px;white-space:nowrap}:is(.intro-stage,.catalogue-stage,.details-stage) .content-layer{z-index:3}:is(.intro-stage,.catalogue-stage,.details-stage) .skill-notes{align-self:center}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card.is-current:hover{transform:scale(1.1)}
@media(max-width:700px){:is(.intro-stage,.catalogue-stage,.details-stage){height:780px;max-height:none}:is(.intro-stage,.catalogue-stage,.details-stage) .cover-title{top:34%;left:7%;font-size:12vw}:is(.intro-stage,.catalogue-stage,.details-stage) .cover-subtitle{left:8%;top:47%;font-size:7vw}:is(.intro-stage,.catalogue-stage,.details-stage) .hud{inset:auto 12px 16px;flex-wrap:wrap}:is(.intro-stage,.catalogue-stage,.details-stage) .scene-tabs{order:-1;width:100%;justify-content:center}:is(.intro-stage,.catalogue-stage,.details-stage) .scene-tabs button{font-size:13px;padding:10px 12px}:is(.intro-stage,.catalogue-stage,.details-stage) .profile-layout{padding:24px 6% 135px;justify-content:flex-start;gap:18px}:is(.intro-stage,.catalogue-stage,.details-stage) .portrait{width:120px;height:145px;object-fit:cover;align-self:start}:is(.intro-stage,.catalogue-stage,.details-stage) .profile-facts{font-size:14px;gap:15px}:is(.intro-stage,.catalogue-stage,.details-stage) .profile-facts .eyebrow{font-size:18px;margin-bottom:10px}:is(.intro-stage,.catalogue-stage,.details-stage) .experience{font-size:14px;gap:12px;margin-top:20px}:is(.intro-stage,.catalogue-stage,.details-stage) .experience .eyebrow{font-size:18px}:is(.intro-stage,.catalogue-stage,.details-stage) .skills-layout{padding:35px 7% 140px;gap:18px}:is(.intro-stage,.catalogue-stage,.details-stage) .skill-notes{font-size:14px;align-self:start}:is(.intro-stage,.catalogue-stage,.details-stage) .icon-grid{gap:14px}:is(.intro-stage,.catalogue-stage,.details-stage) .tool{max-height:95px}:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue{padding-top:45px}:is(.intro-stage,.catalogue-stage,.details-stage) .carousel-track{padding:0 calc(50vw - 110px)}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card{flex-basis:220px}:is(.intro-stage,.catalogue-stage,.details-stage) .carousel{padding-left:0;padding-right:0}:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue-tip{font-size:12px}.intro-follow{align-items:start}.intro-follow p{font-size:14px}.intro-follow a{font-size:14px}}
@media(prefers-reduced-motion:reduce){:is(.intro-stage,.catalogue-stage,.details-stage) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

:is(.intro-stage,.catalogue-stage,.details-stage) h1.cover-title{margin:0;position:absolute}:is(.intro-stage,.catalogue-stage,.details-stage) .page[hidden]{display:none}

/* Centered perspective deck */
:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue{padding-top:32px;overflow:hidden}
:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue-title{display:block;margin:0 auto 8px;background:transparent;width:auto;height:auto;font-size:32px;line-height:1.5;color:#16285d}
:is(.intro-stage,.catalogue-stage,.details-stage) .site.theme-3{background:radial-gradient(ellipse at 50% 44%,#d3c5ff88,transparent 62%),linear-gradient(160deg,#edf2ff,#fff 50%,#d9e4ff)}
:is(.intro-stage,.catalogue-stage,.details-stage) .carousel{height:clamp(365px,36vw,440px);width:100%;padding:0;overflow:hidden;position:relative;perspective:1400px;touch-action:pan-y;cursor:grab;user-select:none;isolation:isolate}
:is(.intro-stage,.catalogue-stage,.details-stage) .carousel-track{display:block;position:relative;width:100%;height:100%;padding:0;transform-style:preserve-3d}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card{position:absolute;top:45px;left:50%;width:clamp(215px,25vw,300px);height:auto;margin:0;opacity:1;border:1px solid #fff9;border-radius:22px;transform-origin:center;transition:transform 650ms cubic-bezier(.22,.8,.2,1),opacity 500ms ease,filter 500ms ease,box-shadow 500ms ease;backface-visibility:hidden;will-change:transform;box-shadow:0 20px 48px #203d7820;background:#fff;outline-offset:5px}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card img{aspect-ratio:1;object-fit:cover;pointer-events:none;transform:none!important;border-radius:21px 21px 0 0}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-meta{padding:17px 20px 20px;font-size:21px;pointer-events:none}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="0"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="0"]:hover{transform:translateX(calc(-50% + var(--drag-x,0px))) translateZ(75px) rotateZ(var(--drag-r,0deg));z-index:5;opacity:1;filter:none;box-shadow:0 30px 65px #324da438,0 0 0 1px #ffffffbb}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="-1"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="-1"]:hover{transform:translateX(-123%) translateY(32px) translateZ(-85px) rotateY(-15deg) rotateZ(-6deg) scale(.88);z-index:3;opacity:.68;filter:saturate(.65) brightness(.93)}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="1"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="1"]:hover{transform:translateX(23%) translateY(32px) translateZ(-85px) rotateY(15deg) rotateZ(6deg) scale(.88);z-index:3;opacity:.68;filter:saturate(.65) brightness(.93)}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="-2"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="-2"]:hover{transform:translateX(-163%) translateY(50px) translateZ(-220px) rotateY(-22deg) rotateZ(-10deg) scale(.75);z-index:1;opacity:0;pointer-events:none}
:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="2"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="2"]:hover{transform:translateX(63%) translateY(50px) translateZ(-220px) rotateY(22deg) rotateZ(10deg) scale(.75);z-index:1;opacity:0;pointer-events:none}
:is(.intro-stage,.catalogue-stage,.details-stage) .carousel.dragging{cursor:grabbing}:is(.intro-stage,.catalogue-stage,.details-stage) .carousel.dragging .work-card[data-position="0"]{transition:none}
:is(.intro-stage,.catalogue-stage,.details-stage) .deck-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin:-5px 0 18px}
:is(.intro-stage,.catalogue-stage,.details-stage) .deck-controls button{width:46px;height:46px;background:#ffffffbd;border:1px solid #315dff38;font-size:20px;color:#2446a6;box-shadow:0 4px 12px #315dff12}
:is(.intro-stage,.catalogue-stage,.details-stage) .deck-controls button:hover{background:#315dff;color:#fff}
:is(.intro-stage,.catalogue-stage,.details-stage) .deck-status{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:2px;min-width:70px;text-align:center;color:#49618e}
:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue-tip{opacity:1;color:#52617d;font-size:13px;letter-spacing:.05em}
@media(max-width:700px){:is(.intro-stage,.catalogue-stage,.details-stage) .catalogue{padding-top:40px}:is(.intro-stage,.catalogue-stage,.details-stage) .carousel{height:430px}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card{width:220px;top:65px}:is(.intro-stage,.catalogue-stage,.details-stage) .work-meta{font-size:18px;padding:15px}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="-1"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="-1"]:hover{transform:translateX(-103%) translateY(28px) translateZ(-95px) rotateY(-15deg) rotateZ(-8deg) scale(.83)}:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="1"],:is(.intro-stage,.catalogue-stage,.details-stage) .work-card[data-position="1"]:hover{transform:translateX(3%) translateY(28px) translateZ(-95px) rotateY(15deg) rotateZ(8deg) scale(.83)}}

.catalogue-stage{height:auto;min-height:0;position:relative;overflow:hidden;isolation:isolate;padding:25px 0 35px;background:radial-gradient(ellipse at 50% 44%,#d3c5ff66,transparent 65%),linear-gradient(160deg,#edf2ff,#fff 50%,#e7edff);scroll-margin-top:24px}
.catalogue-stage .catalogue{position:relative;inset:auto;padding:25px 0 0;height:auto}
.catalogue-stage .catalogue-title{font-size:30px}.project{scroll-margin-top:32px}.project:focus{outline:2px solid #315dff;outline-offset:12px}
@media(max-width:700px){.catalogue-stage{height:auto;padding:15px 0 28px}.catalogue-stage .catalogue{padding:20px 0 0}.catalogue-stage .carousel{height:395px}.catalogue-stage .catalogue-tip{padding:0 18px;line-height:1.7}.project{scroll-margin-top:24px}}

/* Software skills: supplied icons and translucent three-column tiles. */
:is(.intro-stage,.details-stage) .skills-layout{grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:5vw;padding:60px 7% 110px;align-items:center}
:is(.intro-stage,.details-stage) .skill-panel{width:100%;max-width:560px;justify-self:center}
:is(.intro-stage,.details-stage) .skill-panel h2{display:flex;align-items:center;justify-content:center;width:100%;margin:0 0 22px;padding:13px 18px;border-radius:999px;background:#3467f5;color:white;font-size:clamp(19px,2vw,28px);font-weight:700;line-height:1.35;letter-spacing:.025em;text-align:center;box-shadow:none}
:is(.intro-stage,.details-stage) .icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
:is(.intro-stage,.details-stage) .tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;aspect-ratio:1;width:100%;max-height:none;padding:18px 7px 12px;border-radius:25px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.72);box-shadow:0 6px 22px rgba(49,75,140,.035);backdrop-filter:blur(8px)}
:is(.intro-stage,.details-stage) .tool img{width:48%;height:auto;aspect-ratio:1;max-width:80px;object-fit:contain;flex-shrink:0;filter:none}
:is(.intro-stage,.details-stage) .tool::after{content:attr(data-label);position:static;font-size:12px;line-height:1.25;color:#344056;text-align:center;white-space:normal}
:is(.intro-stage,.details-stage) .tool:hover img{transform:translateY(-3px) scale(1.04)}
:is(.intro-stage,.details-stage) .skill-notes{align-self:center;padding:0;font-size:16px;line-height:1.95}
@media(min-width:1400px){:is(.intro-stage,.details-stage) .icon-grid{gap:24px}:is(.intro-stage,.details-stage) .tool{border-radius:30px}:is(.intro-stage,.details-stage) .tool::after{font-size:14px}}
@media(max-width:700px){:is(.intro-stage,.details-stage) .skills-layout{grid-template-columns:1fr;align-content:start;gap:22px;padding:45px 7% 135px;overflow-y:auto}:is(.intro-stage,.details-stage) .skill-panel{max-width:420px}:is(.intro-stage,.details-stage) .skill-panel h2{font-size:20px;margin-bottom:16px;padding:12px 10px;letter-spacing:0}:is(.intro-stage,.details-stage) .icon-grid{gap:12px}:is(.intro-stage,.details-stage) .tool{border-radius:20px;padding:14px 4px 10px;gap:8px;max-height:none}:is(.intro-stage,.details-stage) .tool img{width:47%;max-width:64px}:is(.intro-stage,.details-stage) .tool::after{font-size:12px}:is(.intro-stage,.details-stage) .skill-notes{font-size:14px;line-height:1.8;justify-self:center;max-width:420px;width:100%}}

/* Cover composition and catalogue band from supplied references. */
.intro-stage .grain{display:none;background-image:none}
.intro-stage .site.theme-0{background:linear-gradient(180deg,#3268ff 0%,#6995ff 34%,#aec5ff 65%,#f9fbff 100%)}
.intro-stage h1.cover-title{left:12.5%;top:26%;max-width:80%;font-size:clamp(64px,12vw,184px);line-height:1;letter-spacing:-.025em;margin:0;font-weight:900}
.intro-stage .cover-subtitle{left:12.5%;top:50%;font-size:clamp(28px,4.6vw,68px);line-height:1.2;letter-spacing:.015em;font-weight:800}
.intro-stage .cover-copy:hover{transform:none}.intro-stage h1.cover-title:hover{letter-spacing:-.025em}.intro-stage .cover-subtitle:hover{letter-spacing:.015em}
.intro-stage .cover-categories{position:absolute;z-index:4;top:73%;left:12.5%;width:75%;margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;background:#3467ff;border-radius:999px;padding:14px 20px;color:#fff;font-size:clamp(16px,2.2vw,32px);font-weight:700;line-height:1.45;text-align:center}
.intro-stage .cover-categories span+span::before{content:'/';display:inline-block;margin:0 .65em;color:#fff}
.intro-stage .page[data-page="0"] .orb.one{left:49%;top:51%;width:5vw}
.intro-stage .page[data-page="0"] .orb.five{left:29%;top:-9%;width:18vw}
.intro-stage .page[data-page="0"] .orb.six{right:1%;top:10%;width:15vw}
.intro-stage .page[data-page="0"] .orb.seven{right:10%;top:47%;width:14vw}
.intro-stage .page[data-page="0"] .orb.three{left:6%;bottom:25%;width:7vw}
.catalogue-stage{background:linear-gradient(180deg,#3467ff 0%,#527fff 36%,#a7bdff 100%);padding:38px 0 30px}
.catalogue-stage .catalogue{padding:0;position:relative;isolation:isolate}
.catalogue-stage .catalogue-title{display:flex;align-items:center;justify-content:center;width:160px;height:52px;margin:0 0 28px 5%;background:#fff;border-radius:999px;color:#090909;font-size:30px;line-height:1;font-weight:800}
.catalogue-stage .carousel{background:#fff;height:clamp(400px,37vw,500px);box-shadow:0 0 16px #243f8b15}
.catalogue-stage .carousel-track{z-index:1}
.catalogue-stage .deck-controls{margin:24px 0 15px}
.catalogue-stage .deck-status{color:#fff}
.catalogue-stage .deck-controls button{background:#ffffffb8;border-color:#ffffffa0;color:#3157ce}
.catalogue-stage .catalogue-tip{color:#fff;font-weight:500}
@media(max-width:700px){
.intro-stage h1.cover-title{left:7%;top:30%;font-size:12.5vw;max-width:89%;letter-spacing:-.035em}
.intro-stage .cover-subtitle{left:8%;top:42%;font-size:7vw;letter-spacing:0}
.intro-stage .cover-categories{left:7%;top:60%;width:86%;padding:13px 14px;font-size:14px;line-height:1.9;column-gap:0;border-radius:28px}
.intro-stage .cover-categories span+span::before{margin:0 .45em}
.intro-stage .page[data-page="0"] .orb.one{width:9vw;left:67%;top:43%}
.intro-stage .page[data-page="0"] .orb.five{width:30vw;top:0}
.intro-stage .page[data-page="0"] .orb.six{width:21vw;top:17%;right:1%}
.catalogue-stage{padding-top:26px}.catalogue-stage .catalogue{padding:0}.catalogue-stage .catalogue-title{width:120px;height:44px;font-size:26px;margin:0 0 22px 6%}.catalogue-stage .carousel{height:410px}.catalogue-stage .deck-controls{margin-top:20px}
}

.details-stage{height:auto;min-height:0;position:relative;overflow:visible;isolation:isolate;scroll-margin-top:24px}
.profile-stage{background:linear-gradient(150deg,#fafcff,#edf2ff)}.skills-stage{background:linear-gradient(160deg,#edf2ff,#d9e3ff 60%,#b6caff)}
.details-stage .content-layer{position:relative;inset:auto;height:auto;overflow:visible}
.details-stage .profile-layout{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr);padding:75px 9%;gap:7%;align-items:center}
.details-stage .profile-layout .portrait{width:100%;max-width:340px;justify-self:center;height:auto;filter:none;border-radius:12px}
.details-stage .skills-layout{padding:65px 8%;height:auto;min-height:0;overflow:visible}
@media(max-width:700px){.details-stage .profile-layout{display:flex;flex-direction:column;padding:45px 7%;gap:28px}.details-stage .profile-layout .portrait{width:180px;align-self:center}.details-stage .profile-copy{width:100%}.details-stage .skills-layout{display:grid;grid-template-columns:1fr;padding:42px 7%;height:auto;overflow:visible;gap:28px}.details-stage .skill-panel{order:0}.details-stage .skill-notes{order:1}}
/* Continuous cover-to-profile-to-skills background. */
.intro-stage .site.theme-0{background:linear-gradient(180deg,#3268ff 0%,#719aff 35%,#bed0ff 68%,#fff 100%)}
.intro-stage{background:#fff}
.intro-follow{background:#fff;border:0;position:relative;z-index:5}
.profile-stage{background:#fff}
.skills-stage{background:linear-gradient(180deg,#fff 0%,#f0f4ff 18%,#d4e0ff 52%,#a4bcff 100%)}
.intro-stage .page[data-page="0"] .orb.two{mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 87%)}

/* Catalogue: separate artwork viewport and crisp live-text footer. */
.catalogue-stage .work-card{padding:0;top:30px;border:0;border-radius:22px;background:#fff}
.catalogue-stage .card-art{position:relative;aspect-ratio:711/783;width:100%;overflow:hidden;background:#fff;border-radius:22px 22px 0 0}
.catalogue-stage .card-art img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.catalogue-stage .card-art-reference img{position:absolute;max-width:none;width:var(--source-width);height:var(--source-height);left:var(--source-left);top:var(--source-top);object-fit:fill}
.catalogue-stage .work-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 20px;background:#fff;color:#606060;font-size:clamp(20px,2.1vw,28px);font-weight:800;line-height:1.2;white-space:nowrap}
.catalogue-stage .work-meta small{font-size:1em;color:inherit;font-variant-numeric:tabular-nums}
.catalogue-stage .work-card.is-current .work-meta{color:#080808}
@media(max-width:700px){.catalogue-stage .work-card{top:42px}.catalogue-stage .work-meta{min-height:54px;padding:12px 16px;font-size:22px}}

/* The footer is editable HTML, wholly outside the clipped reference image. */
#catalogue .work-meta{position:relative;z-index:2;background:#fff;isolation:isolate;flex-shrink:0}
#catalogue .work-meta span,#catalogue .work-meta small{display:block;font-family:Arial,"Microsoft YaHei",sans-serif;user-select:text}
#catalogue .card-art-reference{contain:paint}

/* Five clean artwork assets, with independent live typography. */
#catalogue .card-art{aspect-ratio:849/936;background:#fff}
#catalogue .card-art img{position:static;width:100%;height:100%;object-fit:cover;object-position:center;max-width:100%;border-radius:0}
#catalogue .work-meta{min-height:62px;padding:14px 20px;color:#111;font-size:clamp(22px,2.5vw,30px);font-weight:700;line-height:1.15;letter-spacing:0}
#catalogue .work-meta small{font-size:1em;font-weight:700;color:#111;line-height:1.15}
#catalogue .work-card[data-position="0"]{transform:translateX(calc(-50% + var(--drag-x,0px))) rotateZ(var(--drag-r,0deg));filter:none;will-change:auto}
#catalogue .work-card[data-position="0"]:hover{transform:translateX(calc(-50% + var(--drag-x,0px))) rotateZ(var(--drag-r,0deg))}
@media(max-width:700px){#catalogue .work-meta{min-height:58px;padding:14px 17px;font-size:24px}}