@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:400;font-display:swap;src:url(/assets/fonts/nsc-400.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:700;font-display:swap;src:url(/assets/fonts/nsc-700.woff2) format("woff2")}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;touch-action:pan-x pan-y pinch-zoom}
html[data-l=zh] .L[data-l=en],html[data-l=en] .L[data-l=zh]{display:none!important}
body{font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;background:#17131F;color:#F6F4EF;-webkit-font-smoothing:antialiased;min-height:100vh;font-style:normal}
em,i{font-style:normal}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.fx{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vw 50vw at 88% -8%,rgba(117,70,255,.38),transparent 60%),radial-gradient(55vw 45vw at -10% 40%,rgba(57,32,114,.62),transparent 62%),radial-gradient(50vw 40vw at 70% 110%,rgba(117,70,255,.22),transparent 60%),#17131F}
.fx:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(217,204,250,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(217,204,250,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 0,transparent 75%);mask-image:radial-gradient(ellipse at 50% 0,#000 0,transparent 75%)}
.top{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1240px)/2));background:rgba(23,19,31,.62);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(217,204,250,.1)}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer;min-width:0}
.brand .sym{width:36px;height:36px;border-radius:11px;background:linear-gradient(150deg,#9B78FF,#7546FF 45%,#392072);display:flex;align-items:center;justify-content:center;box-shadow:0 0 22px rgba(117,70,255,.55),inset 0 1px 0 rgba(255,255,255,.35);flex:none}
.brand .sym img{width:22px}
.brand b{font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.brand small{display:block;font-size:11.5px;color:rgba(217,204,250,.62);font-weight:500;letter-spacing:.04em;white-space:nowrap;margin-top:1px}
.lang{display:flex;padding:3px;border-radius:999px;background:rgba(246,244,239,.06);border:1px solid rgba(217,204,250,.16);flex:none}
.lang button{font:600 13px Inter,"Noto Sans SC",sans-serif;color:rgba(246,244,239,.66);background:none;border:0;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.2s}
html[data-l=zh] .lang [data-set=zh],html[data-l=en] .lang [data-set=en]{background:linear-gradient(150deg,#8A63FF,#7546FF);color:#fff;box-shadow:0 0 16px rgba(117,70,255,.55)}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
/* hero */
.hero{position:relative;padding:76px 0 56px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:40px}
.hero .k{font:700 12.5px Inter;letter-spacing:.32em;color:#B9A2FF;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.hero .k:before{content:"";width:28px;height:1.5px;background:linear-gradient(90deg,#7546FF,#D9CCFA)}
.hero h1{margin-top:22px;font-size:clamp(40px,6.2vw,76px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.hero h1 span.g{background:linear-gradient(92deg,#B49BFF,#EDE6FF 60%,#B49BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .zs{margin-top:18px;font-size:clamp(17px,2vw,22px);font-weight:700;color:#D9CCFA;letter-spacing:.02em}
.hero p.intro{margin-top:16px;font-size:16px;line-height:1.7;color:rgba(246,244,239,.66);max-width:560px}
.hero .art{position:relative;aspect-ratio:1;max-width:400px;justify-self:end;width:100%}
.hero .art:before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(117,70,255,.7),transparent);filter:blur(30px)}
.hero .art img{position:relative;width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hero .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(217,204,250,.16)}
.hero .ring.r2{inset:12%;border-style:dashed;border-color:rgba(217,204,250,.12)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.jump a{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;background:rgba(246,244,239,.05);border:1px solid rgba(217,204,250,.14);color:rgba(246,244,239,.8);transition:.2s;white-space:nowrap}
.jump a:hover{border-color:#7546FF;color:#fff;background:rgba(117,70,255,.18)}
/* sections */
.sec{padding:44px 0 18px;scroll-margin-top:70px}
.sh{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px}
.sh .n{font:800 15px Inter;color:#7546FF;padding:7px 10px;border-radius:10px;background:rgba(117,70,255,.14);border:1px solid rgba(117,70,255,.35);line-height:1}
.sh h2{font-size:clamp(23px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sh .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(217,204,250,.25),transparent);margin-bottom:9px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid.n2{grid-template-columns:repeat(2,1fr)}
.grid.n1{grid-template-columns:1fr}
.grid.n1 .card{flex-direction:row;align-items:stretch}
.grid.n1 .card .th{flex:0 0 62%;aspect-ratio:16/10}
.grid.n1 .card .bd{padding:40px 40px 32px;justify-content:center;background:radial-gradient(ellipse at 100% 0,rgba(117,70,255,.18),transparent 70%)}
.grid.n1 .card h3{font-size:clamp(22px,2.3vw,30px);font-weight:800;letter-spacing:-.02em}
.grid.n1 .card p{font-size:16px;margin-top:12px}
.grid.n1 .card .go{margin-top:auto;padding:11px 20px;font-size:14.5px}
.grid.n1 .card .bd:before{content:"";flex:1}
.card{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:linear-gradient(170deg,rgba(246,244,239,.07),rgba(246,244,239,.025));border:1px solid rgba(217,204,250,.13);box-shadow:0 20px 50px rgba(0,0,0,.25);transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(117,70,255,.6);box-shadow:0 26px 60px rgba(0,0,0,.35),0 0 40px rgba(117,70,255,.25)}
.card .th{aspect-ratio:16/10;overflow:hidden;background:#221b30}
.card .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .th img{transform:scale(1.035)}
.card .bd{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:18.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.card p{margin-top:6px;font-size:14.5px;line-height:1.6;color:rgba(246,244,239,.62)}
.card .go{align-self:flex-end;margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:999px;background:linear-gradient(150deg,#8A63FF,#7546FF);color:#fff;box-shadow:0 6px 20px rgba(117,70,255,.4)}
.card .go:after{content:"→";transition:transform .2s}
.card:hover .go:after{transform:translateX(3px)}
.foot{margin-top:60px;padding:44px 20px 50px;border-top:1px solid rgba(217,204,250,.1);text-align:center}
.foot img{height:34px;margin:0 auto 14px;opacity:.95}
.foot p{font-size:14px;color:rgba(217,204,250,.7);line-height:1.8}
/* subpages */
.ph{padding:40px 0 22px}
.ph .k{font:700 12px Inter;letter-spacing:.3em;color:#B9A2FF;text-transform:uppercase}
.ph h1{margin-top:12px;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.ph p{margin-top:10px;font-size:15.5px;color:rgba(246,244,239,.66);line-height:1.7;max-width:760px}
.player{position:relative;border-radius:22px;overflow:hidden;background:#000;border:1px solid rgba(217,204,250,.16);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px rgba(117,70,255,.18)}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.player.vert{max-width:min(420px,100%);margin:0 auto}
.player.vert video{aspect-ratio:9/16;max-height:78vh}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:16px;font-size:13.5px;color:rgba(217,204,250,.72)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:11px 18px;border-radius:999px;background:linear-gradient(150deg,#8A63FF,#7546FF);color:#fff;box-shadow:0 6px 20px rgba(117,70,255,.4);border:0;cursor:pointer}
.btn.gh{background:rgba(246,244,239,.06);border:1px solid rgba(217,204,250,.2);box-shadow:none}
.more{margin-top:54px}
.more h2{font-size:20px;font-weight:800;margin-bottom:18px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.mini{border-radius:16px;overflow:hidden;border:1px solid rgba(217,204,250,.13);background:rgba(246,244,239,.04);transition:.25s}
.mini:hover{border-color:rgba(117,70,255,.6);transform:translateY(-3px)}
.mini img{aspect-ratio:16/10;width:100%;object-fit:cover}
.mini b{display:block;padding:11px 14px 13px;font-size:14px;font-weight:700}
/* one-pager */
.sheet{max-width:880px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px rgba(117,70,255,.18);border:1px solid rgba(217,204,250,.16)}
.sheet img{width:100%}
/* gallery */
.gal{columns:4 230px;column-gap:18px}
.gi{break-inside:avoid;margin-bottom:18px;border-radius:16px;overflow:hidden;border:1px solid rgba(217,204,250,.13);background:#221b30;cursor:zoom-in;transition:.25s;display:block;width:100%;padding:0}
.gi:hover{border-color:rgba(117,70,255,.65);box-shadow:0 0 30px rgba(117,70,255,.25)}
.gi img{width:100%;height:auto}
.gal.land{columns:3 300px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,11,20,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;touch-action:pan-x pan-y pinch-zoom}
.lb.on{display:block}
.lb .sc{position:absolute;inset:56px 0 64px;overflow:auto;display:flex;touch-action:pan-x pan-y pinch-zoom}
.lb .sc img{margin:auto;max-width:calc(100% - 24px);max-height:100%;object-fit:contain;border-radius:8px}
.lb.tall .sc img{max-height:none;width:min(760px,calc(100% - 24px));margin:0 auto}
.lb .bar{position:absolute;left:0;right:0;top:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:14px;color:rgba(217,204,250,.8)}
.lb .bot{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:center;gap:12px}
.ib{width:44px;height:44px;border-radius:50%;border:1px solid rgba(217,204,250,.22);background:rgba(246,244,239,.07);color:#fff;font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ib:hover{background:#7546FF;border-color:#7546FF}
.lb .nv{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
.lb .pv{left:12px}.lb .nx{right:12px}
@media(max-width:1100px) and (min-width:821px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding:40px 0 30px;gap:8px}.hero .art{order:-1;max-width:190px;justify-self:start}.grid,.grid.n2,.grid.n1{grid-template-columns:1fr;gap:18px}.grid.n1 .card{flex-direction:column}.grid.n1 .card .th{flex:none}.grid.n1 .card .bd{padding:18px 20px 18px}.grid.n1 .card .bd:before{display:none}.grid.n1 .card h3{font-size:18.5px}.grid.n1 .card p{font-size:14.5px;margin-top:6px}.grid.n1 .card .go{margin-top:16px}.sec{padding:30px 0 10px}.brand small{display:none}.lang button{padding:7px 12px}.lb .nv{display:none}.gal{columns:2 150px;column-gap:12px}.gi{margin-bottom:12px}}
html[data-l=en] .grid.zo{grid-template-columns:1fr}
html[data-l=en] .grid.zo .card{flex-direction:row;align-items:stretch}
html[data-l=en] .grid.zo .card .th{flex:0 0 62%;aspect-ratio:16/10}
html[data-l=en] .grid.zo .card .bd{padding:40px 40px 32px;justify-content:center;background:radial-gradient(ellipse at 100% 0,rgba(117,70,255,.18),transparent 70%)}
html[data-l=en] .grid.zo .card h3{font-size:clamp(22px,2.3vw,30px);font-weight:800;letter-spacing:-.02em}
html[data-l=en] .grid.zo .card p{font-size:16px;margin-top:12px}
html[data-l=en] .grid.zo .card .go{margin-top:auto;padding:11px 20px;font-size:14.5px}
html[data-l=en] .grid.zo .card .bd:before{content:"";flex:1}
@media(max-width:820px){html[data-l=en] .grid.zo .card{flex-direction:column}html[data-l=en] .grid.zo .card .th{flex:none}html[data-l=en] .grid.zo .card .bd{padding:18px 20px 18px}html[data-l=en] .grid.zo .card .bd:before{display:none}html[data-l=en] .grid.zo .card h3{font-size:18.5px}html[data-l=en] .grid.zo .card p{font-size:14.5px;margin-top:6px}html[data-l=en] .grid.zo .card .go{margin-top:16px}}
