body{margin:0;background:#05060f}
a{color:inherit;text-decoration:none}
.pg{background:#05060f;color:#e8eaff;font-family:'Manrope',sans-serif;font-size:15px;line-height:1.6;overflow:hidden}
.w{max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}
h1,h2,h3{font-family:'Sora',sans-serif;margin:0;font-weight:400}
.eb{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8f84ff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0;gap:16px;flex-wrap:wrap}
.logo{font-family:'Sora',sans-serif;letter-spacing:.14em;font-size:15px;display:flex;align-items:center;gap:12px}
.logo i{width:26px;height:2px;background:#7c5cff;display:block}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:13px}
.btn{display:inline-block;padding:13px 26px;border-radius:30px;border:1px solid #5b4bd6;font-size:13px;color:#e8eaff}
.btn.p{background:linear-gradient(90deg,#7c5cff,#5a7bff);border-color:transparent}
.hero{position:relative;min-height:640px;background:radial-gradient(800px 500px at 75% 40%,#14125a 0,#05060f 70%)}
.hero .w{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;min-height:560px}
.hero h1{font-size:68px;line-height:1.05;margin:16px 0 22px}
.g{background:linear-gradient(90deg,#7c5cff,#4aa3ff,#b79cff,#7c5cff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 8s linear infinite}
@keyframes sh{to{background-position:300% 0}}
.stage{position:relative;height:480px;perspective:900px}
.orb{position:absolute;left:50%;top:50%;border-radius:50%;border:16px solid;transform-style:preserve-3d;box-shadow:0 0 50px #5b4bff88,inset 0 0 40px #5b4bff55}
.o1{width:340px;height:340px;margin:-170px;border-color:#4f46e5 #a78bfa #38bdf8 #6d28d9;animation:r1 7s linear infinite}
.o2{width:300px;height:300px;margin:-150px;border-color:#38bdf8 #4f46e5 #c4b5fd #3b2fb8;animation:r2 5s linear infinite}
.o3{width:250px;height:250px;margin:-125px;border-width:10px;border-color:#a78bfa #38bdf8 #4f46e5 #8b5cf6;animation:r3 9s linear infinite}
.core{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle,#7c5cffcc,transparent 70%);animation:pl 4s ease-in-out infinite}
@keyframes r1{from{transform:rotateX(65deg) rotateZ(0)}to{transform:rotateX(65deg) rotateZ(360deg)}}
@keyframes r2{from{transform:rotateY(60deg) rotateZ(360deg)}to{transform:rotateY(60deg) rotateZ(0)}}
@keyframes r3{from{transform:rotateX(30deg) rotateY(30deg) rotateZ(0)}to{transform:rotateX(30deg) rotateY(30deg) rotateZ(360deg)}}
@keyframes pl{50%{transform:scale(1.35);opacity:.6}}
.dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#a78bfa;box-shadow:0 0 12px #7c5cff;animation:fl 6s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-26px)}}
.sec{padding:84px 0;border-top:1px solid #151838}
.sec h2{font-size:34px;margin:8px 0 34px}
.grid{display:grid;gap:18px}
.card{border:1px solid #232a6b;border-radius:12px;padding:24px;background:linear-gradient(160deg,#0d1030,#070918)}
.card h3{font-size:16px;margin:14px 0 8px}
.card p{margin:0;color:#9aa0cc;font-size:13px}
.ic{width:38px;height:38px;border-radius:9px;background:#1b1e5c;border:1px solid #3a3f9a}
.res{color:#8f84ff;font-size:12px;margin-top:10px}
.tl{border-left:2px solid #3a3f9a;padding-left:16px}
.book{position:relative;width:360px;height:500px;perspective:2200px;margin:0 auto;left:190px}
.book input{display:none}
.sh{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.6,.1,.2,1)}
.fc{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #3a3f9a;border-radius:4px 14px 14px 4px;padding:30px 26px;box-sizing:border-box;background:rgba(18,20,70,.45);backdrop-filter:blur(8px);cursor:pointer;display:flex;flex-direction:column;gap:10px;font-size:13px;color:#cfd3ff}
.bk{transform:rotateY(180deg);border-radius:14px 4px 4px 14px}
.fc h3{font-size:22px;color:#fff}
.s1{z-index:4}.s2{z-index:3}.s3{z-index:2}.s4{z-index:1}
#f1:checked~.s1,#f2:checked~.s2,#f3:checked~.s3,#f4:checked~.s4{transform:rotateY(-180deg)}
.disc{position:absolute;left:50%;top:50%;width:430px;height:430px;margin:-215px;border-radius:50%;background:conic-gradient(from 0deg,#7c5cff,#38bdf8,#0b0d33 40%,#a78bfa 70%,#7c5cff);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);animation:sp 9s linear infinite;opacity:.9}@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.orb,.core,.dot,.g,.disc{animation:none}}
@media (max-width:900px){.hero .w,.g2,.g5,.g3,.g4{grid-template-columns:1fr!important}.hero h1{font-size:44px}.nav ul{gap:14px;flex-wrap:wrap}.book{left:0}.stage{height:340px}}
html{scroll-behavior:smooth}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.js .rv.in{opacity:1;transform:none}
.mag-wrap{perspective:2400px;display:flex;justify-content:center;height:560px}
#mag{position:relative;width:760px;height:538px;transition:transform 1s cubic-bezier(.6,.1,.2,1)}
#mag .sh{left:380px;right:auto;width:380px}.sh.f{transform:rotateY(-180deg)}
#mag .fc{padding:0;width:100%;height:100%;object-fit:cover;display:block;background:#0b0d33;box-shadow:0 20px 50px #0008;cursor:pointer;border-radius:2px 10px 10px 2px}
#mag .bk{border-radius:10px 2px 2px 10px}
.mag-ctl{display:flex;gap:20px;justify-content:center;align-items:center;margin-top:24px;font-size:13px;color:#8f84ff}
.mag-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid #5b4bd6;background:none;color:#e8eaff;cursor:pointer;font-size:18px}
.pp{padding:50px 0 90px}.pp h1{font-size:44px;margin:10px 0 24px}.pp h3{color:#8f84ff;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin:30px 0 8px}.pp p{max-width:680px;color:#b9bdea}
.pimgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:30px}.pimgs img{width:100%;border-radius:10px;border:1px solid #232a6b}
@media (max-width:900px){.mag-wrap{zoom:.5}}

.vid{aspect-ratio:16/9;max-width:900px;border:1px dashed #3a3f9a;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#8f84ff;font-size:13px;background:#0a0c26}
.pp video{width:100%;max-width:900px;border-radius:12px;border:1px solid #232a6b}
#ruler{position:fixed;left:14px;top:50%;transform:translateY(-50%);height:62vh;min-height:320px;width:70px;z-index:50;pointer-events:none;font-family:'Manrope',sans-serif}
.rl-track{position:absolute;left:0;top:0;bottom:0;width:2px;background:#1b1f55;border-radius:2px}
.rl-fill{position:absolute;left:0;top:0;width:2px;height:0;background:linear-gradient(#7c5cff,#38bdf8);box-shadow:0 0 10px #7c5cff;border-radius:2px}
.rl-tick{position:absolute;left:5px;height:1px;width:6px;background:#2f3585;transform-origin:left center;transition:transform .25s ease,background .25s}
.rl-tick.m{width:10px}.rl-tick.M{width:16px}.rl-tick.on{background:#8f84ff}
.rl-dot{position:absolute;left:-1px;width:4px;height:4px;border-radius:50%;background:#3a3f9a;transform:translateY(-50%);transition:background .25s,box-shadow .25s}
.rl-dot.act{background:#c4b5fd;box-shadow:0 0 8px #7c5cff}
.rl-mark{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:#e8eaff;box-shadow:0 0 14px #7c5cff,0 0 4px #fff;transform:translateY(-50%);transition:top .12s linear}
.rl-pct{position:absolute;left:28px;transform:translateY(-50%);white-space:nowrap;line-height:1.25;transition:top .12s linear}
.rl-pct b{display:block;font-size:12px;font-weight:500;color:#e8eaff;font-variant-numeric:tabular-nums}
.rl-pct small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8f84ff}
@media (max-width:1500px){.rl-pct small{display:none}}
@media (max-width:1360px){#ruler{display:none}}

.fr{position:relative;border:1px solid #232a6b;border-radius:12px;background:#0a0c26}
.fr .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #1b1f55;border-radius:11px 11px 0 0;background:#0d1030;font-size:11px;color:#8e94c4}
.fr .bar i{width:8px;height:8px;border-radius:50%;background:#2f3585;display:block}.fr .bar span{margin-left:8px}
.fr .vp{height:340px;overflow-y:auto;overflow-x:hidden;border-radius:0 0 11px 11px;scrollbar-width:thin;scrollbar-color:#5b4bd6 #0a0c26}
.fr .vp img{width:100%;display:block}
.fr .hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:5px 12px;border-radius:20px;background:#0b0d33dd;border:1px solid #3a3f9a;color:#c4b5fd;font-size:11px;pointer-events:none;transition:opacity .3s}
.fr.sc .hint{opacity:0}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:22px;margin-top:20px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}}

.btn{transition:background-position .5s,background .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s;cursor:pointer}
.btn:hover{background:#7c5cff;border-color:#7c5cff;color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px #5b4bff66}
.btn.p{background:linear-gradient(90deg,#7c5cff 0%,#5a7bff 50%,#22d3ee 100%);background-size:200% 100%;background-position:0 0}
.btn.p:hover{background-position:100% 0;border-color:transparent;color:#05060f;box-shadow:0 10px 26px #22d3ee55}
.pc{display:flex;flex-direction:column}.pc .pb{margin-top:auto;padding-top:14px}
.cl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cl.open{display:block}
.more{background:none;border:0;color:#8f84ff;font-size:12px;cursor:pointer;padding:0;margin:8px 0 0;text-align:left;font-family:inherit}
.tsl{overflow:hidden;--pv:3;--gap:18px}
.ttrack{display:flex;gap:var(--gap);transition:transform .8s cubic-bezier(.6,.1,.2,1)}
.tcard{flex:0 0 calc((100% - (var(--pv) - 1)*var(--gap))/var(--pv));margin:0;padding:26px;border:1px solid #232a6b;border-radius:12px;background:linear-gradient(160deg,#0d1030,#070918);box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.tcard .stars{color:#c4b5fd;letter-spacing:3px;font-size:14px}
.tcard blockquote{margin:0;color:#c9ccef;font-size:14px;line-height:1.7;flex:1}
.tcard figcaption b{display:block;font-family:'Sora',sans-serif;font-weight:400;color:#fff;font-size:15px}.tcard figcaption span{font-size:12px;color:#8e94c4}
.pkl{list-style:none;margin:0;padding:0;columns:2;column-gap:28px;font-size:13px;color:#b9bdea}
.pkl li{break-inside:avoid;padding:4px 0 4px 20px;position:relative}.pkl li:before{content:"✓";position:absolute;left:0;color:#8f84ff}
@media (max-width:900px){.tsl{--pv:1}.pkl{columns:1}}

.lang{display:flex;border:1px solid #3a3f9a;border-radius:20px;overflow:hidden;font-size:12px;letter-spacing:.06em}
.lang a{padding:8px 13px;color:#9aa0cc;transition:background .25s,color .25s}.lang a:hover{color:#fff}.lang a.on{background:#7c5cff;color:#fff}
.nav .rt{display:flex;align-items:center;gap:14px}
.pkl li b{display:block;color:#e8eaff;font-weight:500}.pkl li span{color:#8e94c4;font-size:12px;line-height:1.5;display:block}