@font-face{font-family:"Tujiang Sans";src:url("../tujiang-ui-full-v36-ecommerce-professional-workbench/fonts/NotoSansSC-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Tujiang Round";src:url("../tujiang-ui-full-v36-ecommerce-professional-workbench/fonts/TujiangChillRoundBanner-Medium-GB2312.woff2") format("woff2");font-weight:500;font-display:swap}
:root{color-scheme:dark;--sea:#030d17;--ink:#edf7fb;--muted:#9bafbb;--faint:#647d8d;--ice:#a2e6ee;--line:rgba(180,222,237,.16);--pad:clamp(30px,5.2vw,112px);--ease:cubic-bezier(.22,.68,.12,1)}
*{box-sizing:border-box}html{min-height:100%;background:var(--sea)}body{margin:0;color:var(--ink);font-family:"Tujiang Sans","Microsoft YaHei",sans-serif;font-weight:380;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button, a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,.gallery-demo:focus-visible{outline:2px solid var(--ice);outline-offset:6px}button:disabled{opacity:.35;cursor:wait}svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}::selection{background:#26566b;color:white}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;left:20px;top:-100px;z-index:10;padding:12px 20px;background:var(--ink);color:var(--sea)}.skip-link:focus{top:16px}
.ocean{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 62% -20%,#153b50 0%,#081d2c 35%,#04111f 65%,#020911 100%)}#ocean-canvas{display:block;width:100%;height:100%}.water-light{position:absolute;inset:-30% -15% 0;opacity:.65;background:conic-gradient(from 165deg at 66% 0%,transparent 0deg,rgba(113,190,214,.035) 7deg,transparent 11deg,transparent 17deg,rgba(92,170,199,.06) 22deg,transparent 26deg,transparent 32deg,rgba(146,207,220,.025) 38deg,transparent 43deg);filter:blur(8px);animation:water-light 22s ease-in-out infinite alternate}.ocean-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,9,16,.36),transparent 62%),linear-gradient(0deg,rgba(1,7,13,.6),transparent 20%,transparent 85%,rgba(2,8,14,.35))}.water-grain{position:absolute;inset:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.26' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.landing-shell{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-rows:100px 1fr 84px}.site-header{padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;width:112px;align-items:center;transition:opacity .2s}.brand:hover{opacity:.75}.brand img{display:block;filter:grayscale(1) invert(1);mix-blend-mode:screen;width:112px;height:58px;object-fit:contain}.header-note{font-size:12px;letter-spacing:.12em;color:#acc2cd;display:flex;align-items:center;gap:10px}.live-dot{width:4px;height:4px;border-radius:50%;background:#a5dae7;box-shadow:0 0 8px rgba(126,203,225,.4)}
.hero{position:relative;min-height:610px;display:grid;grid-template-columns:1.15fr 1fr;align-items:start;column-gap:60px;padding:clamp(38px,7vh,85px) var(--pad) 100px}.hero-copy{position:relative;z-index:2;padding-top:22px;max-width:680px}.eyebrow{font-size:10px;letter-spacing:.26em;color:#9eb8c7;margin:0 0 28px;display:flex;align-items:center;gap:12px}.eyebrow>span{width:28px;height:1px;background:#6d9aab}h1{font-size:clamp(60px,5.5vw,106px);font-weight:380;line-height:1.35;letter-spacing:.035em;margin:0 0 27px;text-shadow:0 2px 24px rgba(1,8,15,.16)}h1 em{font-style:normal;color:#e1f0f4;font-weight:350}.hero-description{font-size:15px;line-height:2;letter-spacing:.035em;color:#9cb2c0;margin:0 0 32px;text-wrap:pretty}.hero-action{display:flex;align-items:center;gap:20px}.enter-button{height:54px;min-width:168px;padding:0 23px;display:inline-flex;align-items:center;justify-content:space-between;gap:27px;color:#092533;background:#e7f6f8;border:1px solid #e7f6f8;font-size:14px;font-weight:520;letter-spacing:.06em;border-radius:4px;box-shadow:0 0 34px rgba(126,212,238,.06);transition:background .25s,box-shadow .25s,transform .25s}.enter-button svg{height:20px;width:20px;transition:transform .3s}.enter-button:hover{background:#fff;box-shadow:0 0 35px rgba(126,212,238,.2);transform:translateY(-2px)}.enter-button:hover svg{transform:translateX(3px)}.enter-button:active{transform:translateY(0)}.guest-note{font-size:11px;letter-spacing:.07em;color:#7995a7}
.gallery-demo{--art-w:clamp(214px,18.7vw,310px);position:relative;z-index:2;width:min(100%,490px);justify-self:end;margin-top:-4px;outline:none;touch-action:pan-y}.gallery-heading{display:flex;align-items:center;gap:13px;width:85%;margin:0 auto 10px}.gallery-heading p{margin:0 0 7px;font-size:9px;letter-spacing:.24em;color:#7e9eb0}.gallery-heading h2{font-size:14px;letter-spacing:.13em;font-weight:420;margin:0;color:#c6dde6}.gallery-line{width:1px;height:29px;background:linear-gradient(#9ed7e2,rgba(127,181,203,.15))}.gallery-mark{font-size:23px;font-weight:250;margin-left:auto;color:#7c9da9}.gallery-stage{height:390px;position:relative;perspective:1000px;perspective-origin:50% 42%;transform-style:preserve-3d;isolation:isolate}.gallery-orbit{position:absolute;width:80%;height:12%;left:10%;bottom:5%;border-radius:50%;background:radial-gradient(ellipse,rgba(86,152,177,.16),transparent 70%);filter:blur(16px)}.art-plane{--x:0px;--y:0px;--z:0px;--ry:0deg;position:absolute;width:var(--art-w);aspect-ratio:3/4;left:50%;top:50%;margin:0;overflow:hidden;border-radius:3px;background:#071423;box-shadow:0 24px 45px -18px rgba(0,0,0,.7);transform:translate(-50%,-50%) translate3d(var(--x),var(--y),var(--z)) rotateY(var(--ry));transition:transform 950ms var(--ease),opacity 950ms var(--ease),filter 950ms var(--ease);backface-visibility:hidden;will-change:transform,opacity;pointer-events:none}.art-plane::after{content:"";position:absolute;inset:0;border:1px solid rgba(209,233,241,.16);border-radius:inherit;pointer-events:none}.art-plane img{width:100%;height:100%;object-fit:cover;display:block}.art-plane figcaption{display:none;position:absolute;left:0;right:0;bottom:0;padding:30px 17px 13px;background:linear-gradient(transparent,rgba(1,7,12,.7));font-size:11px;letter-spacing:.07em}.art-plane figcaption span{font-size:9px;margin-right:8px;color:#afc3ce}.art-plane[data-slot="0"]{--x:0px;--y:0px;--z:50px;--ry:-8deg;opacity:1;filter:brightness(1);z-index:4}.art-plane[data-slot="1"]{--x:140px;--y:42px;--z:-250px;--ry:-21deg;opacity:.64;filter:brightness(.76);z-index:3}.art-plane[data-slot="2"]{--x:-5px;--y:-85px;--z:-570px;--ry:12deg;opacity:.24;filter:brightness(.75);z-index:1}.art-plane[data-slot="-1"]{--x:-148px;--y:-27px;--z:-310px;--ry:20deg;opacity:.48;filter:brightness(.6);z-index:2}.gallery-demo.is-switching .art-plane[data-slot="0"]{filter:brightness(1.04)}
.gallery-foot{width:86%;margin:5px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.gallery-caption p{font-size:15px;letter-spacing:.15em;margin:0 0 5px;font-weight:440}.gallery-caption>span{font-size:10px;color:#7491a1;letter-spacing:.07em}.gallery-controls{display:flex;align-items:center;gap:4px}.gallery-controls button{width:36px;height:44px;border:0;background:transparent;color:#90adbd;display:grid;place-items:center;border-radius:4px;transition:background .2s,color .2s}.gallery-controls button:hover{color:#e9faff;background:rgba(166,217,235,.08)}.gallery-controls button:active{background:rgba(166,217,235,.16)}.gallery-controls svg{height:17px;width:17px}.art-count{display:flex;align-items:center;gap:10px;font-size:10px;font-variant-numeric:tabular-nums;color:#648396}.art-count b{font-weight:500;color:#cee1e9}.art-count i{font-style:normal;font-size:9px;color:#3f5c6b}.gallery-progress{width:86%;margin:16px auto 0;height:1px;display:flex;gap:6px}.gallery-progress span{height:1px;flex:1;background:#224354;position:relative;overflow:hidden}.gallery-progress span::after{position:absolute;content:"";inset:0;transform:scaleX(0);transform-origin:left;background:#a1cedc;transition:transform .8s}.gallery-progress span.is-active::after{transform:scaleX(1)}.wheel-hint{margin:18px 0 0;display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;letter-spacing:.08em;color:#7d9bab}.wheel-hint svg{height:17px;width:14px;color:#8eb6c7}.wheel-hint svg path{animation:wheel-drift 2.6s ease-in-out infinite}.touch-hint{display:none}
.site-footer{display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad);gap:24px;color:#6e899a;font-size:11px;letter-spacing:.05em}.footer-path{display:flex;gap:18px;align-items:center;margin:0}.footer-path i{font-style:normal;color:#375468}.footer-right{display:flex;gap:19px;align-items:center}.sound-note{font-size:10px;color:#658293}.motion-toggle{display:grid;place-items:center;width:38px;height:38px;border:1px solid #294653;border-radius:50%;background:rgba(5,18,28,.25);color:#abc5d0;transition:background .2s,border-color .2s}.motion-toggle:hover{background:#122e3c;border-color:#719baa}.motion-toggle svg{height:17px;width:17px;grid-area:1/1}.motion-toggle .play-icon{display:none}.is-paused .motion-toggle .play-icon{display:block}.is-paused .motion-toggle .pause-icon{display:none}.is-paused .water-light,.is-paused .wheel-hint svg path{animation-play-state:paused}.noscript-note{position:fixed;bottom:0;background:#071523;padding:10px;width:100%;font-size:12px}
@keyframes water-light{from{transform:rotate(-4deg);opacity:.4}to{transform:rotate(4deg);opacity:.8}}@keyframes wheel-drift{0%,100%{transform:translateY(-1px);opacity:.5}45%{transform:translateY(2px);opacity:1}}
@media(min-width:1700px){.hero{padding-top:8vh;column-gap:130px}.gallery-demo{margin-right:3vw}.gallery-stage{height:448px}.gallery-heading{margin-bottom:20px}.hero-description{font-size:17px}.hero-action{margin-top:38px}.landing-shell{grid-template-rows:112px 1fr 92px}}
@media(max-height:800px) and (min-width:901px){.landing-shell{grid-template-rows:82px 1fr 60px}.hero{padding-top:20px;padding-bottom:54px;min-height:540px}.hero-copy{padding-top:14px}h1{font-size:clamp(54px,5.25vw,80px);margin-bottom:20px}.hero-description{margin-bottom:24px}.gallery-demo{--art-w:222px}.gallery-stage{height:324px}.gallery-heading{margin-bottom:0}.wheel-hint{margin-top:13px}}
@media(max-width:1100px){.hero{column-gap:24px;grid-template-columns:1.08fr 1fr}.hero-copy{padding-top:18px}h1{font-size:58px}.hero-description{font-size:13px}.guest-note{font-size:10px}.hero-action{gap:12px}.enter-button{min-width:145px;padding:0 18px}.eyebrow{font-size:8px;letter-spacing:.2em}.gallery-demo{--art-w:220px}.gallery-stage{height:348px}.gallery-heading,.gallery-foot,.gallery-progress{width:94%}.gallery-stage{perspective:850px}}
@media(max-width:900px){:root{--pad:32px}.landing-shell{grid-template-rows:86px 1fr 80px}.hero{padding-top:32px;column-gap:10px;min-height:610px;align-items:start;grid-template-columns:1fr 1fr}h1{font-size:50px;letter-spacing:.02em}.hero-copy{padding-top:20px}.hero-description{font-size:12px}.hero-action{flex-direction:column;align-items:flex-start;gap:13px}.gallery-demo{--art-w:192px;margin-top:22px}.gallery-stage{height:310px}.gallery-heading h2{font-size:12px}.gallery-heading p{font-size:8px}.art-plane[data-slot="1"]{--x:115px}.art-plane[data-slot="-1"]{--x:-115px}.gallery-foot{gap:3px}.gallery-caption p{font-size:13px}.gallery-controls{gap:0}.gallery-controls button{width:30px}.art-count{gap:7px}}
@media(max-width:650px){:root{--pad:26px}.landing-shell{grid-template-rows:78px 1fr 75px}.site-header{gap:12px}.brand,.brand img{width:100px}.header-note{font-size:9px;letter-spacing:.03em;gap:7px}.hero{display:flex;flex-direction:column;padding-top:34px;padding-bottom:38px;gap:60px;min-height:0}.hero-copy{padding:0;max-width:100%}.eyebrow{font-size:8px;margin-bottom:20px;letter-spacing:.2em}h1{font-size:clamp(43px,11.8vw,66px);font-weight:400;margin-bottom:20px}.hero-description{font-size:13px;margin-bottom:26px}.hero-action{flex-direction:row;align-items:center;gap:17px}.enter-button{height:50px;min-width:148px;font-size:13px}.gallery-demo{--art-w:220px;align-self:center;width:min(360px,100%);margin-top:5px}.gallery-heading{width:90%}.gallery-stage{height:339px}.gallery-heading h2{font-size:13px}.gallery-heading p{font-size:9px}.gallery-foot,.gallery-progress{width:90%}.gallery-caption p{font-size:14px}.gallery-controls button{width:36px;height:44px}.art-plane[data-slot="1"]{--x:135px}.art-plane[data-slot="-1"]{--x:-135px}.gallery-stage{perspective:950px}.desktop-hint{display:none}.touch-hint{display:inline}.site-footer{gap:10px;font-size:9px}.footer-path{gap:10px}.footer-right{gap:0}.sound-note{display:none}.motion-toggle{width:44px;height:44px}.ocean-vignette{background:linear-gradient(180deg,rgba(1,7,13,.12),transparent 45%,rgba(1,7,13,.5) 80%)}.wheel-hint{font-size:9px}.water-light{inset:0 -100% 0}}
@media(prefers-reduced-motion:reduce){.water-light,.wheel-hint svg path{animation:none}.art-plane{transition-duration:1ms}.enter-button,.enter-button svg{transition:none}}

/* Decorative 3D planes may extend beyond their layout box, never beyond the page. */
html,body{overflow-x:clip}.hero{overflow:clip}.asset-filters{position:absolute;pointer-events:none}.brand img{filter:url(#brand-white);mix-blend-mode:normal}.water-grain{opacity:.035}
/* A deliberate press on Play can opt back into gallery animation, even under OS reduction. */
body.motion-enabled .art-plane{transition-duration:950ms}
@media(max-width:650px){.is-paused .sound-note{display:block;font-size:8px;margin-right:10px}.is-paused .footer-path{gap:7px;font-size:8px}}