/* AEVRA Academy · 跟着小蓝学 AEVRA */
@font-face{font-family:"Satoshi";src:url(../guide/assets/fonts/Satoshi-Regular.otf) format("opentype");font-weight:400}
@font-face{font-family:"Satoshi";src:url(../guide/assets/fonts/Satoshi-Medium.otf) format("opentype");font-weight:500}
@font-face{font-family:"Satoshi";src:url(../guide/assets/fonts/Satoshi-Bold.otf) format("opentype");font-weight:700}
@font-face{font-family:"Satoshi";src:url(../guide/assets/fonts/Satoshi-Black.otf) format("opentype");font-weight:900}

:root{
  --bg:#08060F; --bg2:#0E0A1C; --card:rgba(255,255,255,.035); --card2:rgba(255,255,255,.06);
  --line:rgba(190,175,255,.16); --line2:rgba(190,175,255,.30);
  --tx1:#F4F2FB; --tx2:#BDB8D2; --tx3:#837F9C;
  --brand:#6B45FF; --brandTx:#A48FFF; --lilac:#D6C8FF; --acc:#6FD8EA;
  --ok:#7FE0B4; --bad:#FF9AA8;
  --font:"Satoshi","Noto Sans SC","Microsoft YaHei",sans-serif;
  --nav:300px; --top:64px;
}
html[lang="zh-TW"]{--font:"Satoshi","Noto Sans TC","Microsoft JhengHei",sans-serif}
html[lang="ja"]{--font:"Satoshi","Noto Sans JP","Yu Gothic",sans-serif}
html[lang="ko"]{--font:"Satoshi","Noto Sans KR","Malgun Gothic",sans-serif}
html[lang="th"]{--font:"Satoshi","Noto Sans Thai",sans-serif}
html[lang="vi"],html[lang="ru"]{--font:"Noto Sans","Segoe UI",sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 16px)}
body{background:var(--bg);color:var(--tx1);font-family:var(--font);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;min-height:100vh}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1100px 700px at 75% 10%,rgba(91,43,255,.22),transparent 60%),radial-gradient(900px 700px at 0% 100%,rgba(42,20,112,.35),transparent 60%),var(--bg)}
a{color:var(--brandTx);text-decoration:none}
b,strong{font-weight:800;color:var(--tx1)}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

/* ---------- top bar ---------- */
.top{position:fixed;left:0;right:0;top:0;height:var(--top);z-index:30;display:flex;align-items:center;gap:14px;padding:0 20px;background:rgba(8,6,15,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .logo{display:flex;align-items:center;gap:12px;color:#fff;white-space:nowrap}
.top .logo svg{height:18px;width:auto}
.top .logo span{font-size:14px;font-weight:800;letter-spacing:.18em;color:var(--brandTx)}
.top .sp{flex:1}
.top .menu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);color:var(--tx1);font-size:18px;flex:none}
.top .menu:hover{background:rgba(255,255,255,.06)}
.search{position:relative;width:min(340px,40vw)}
.search input{width:100%;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--tx1);padding:0 14px 0 38px;font:inherit;font-size:15px;outline:none}
.search input:focus{border-color:var(--line2);background:rgba(255,255,255,.07)}
.search:before{content:"";position:absolute;left:13px;top:12px;width:12px;height:12px;border:2px solid var(--tx3);border-radius:50%}
.search:after{content:"";position:absolute;left:25px;top:25px;width:6px;height:2px;background:var(--tx3);transform:rotate(45deg)}
.sres{position:absolute;top:46px;left:0;right:0;max-height:60vh;overflow:auto;background:#140F26;border:1px solid var(--line2);border-radius:14px;padding:6px;display:none;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sres.open{display:block}
.sres a{display:block;padding:10px 12px;border-radius:10px;color:var(--tx1)}
.sres a:hover,.sres a.sel{background:rgba(123,92,255,.18)}
.sres small{display:block;color:var(--tx3);font-size:13px;line-height:1.5}
.lang select{height:40px;border-radius:12px;border:1px solid var(--line);background:#120D22;color:var(--tx1);padding:0 10px;font:inherit;font-size:14px}

/* ---------- side nav ---------- */
.side{position:fixed;top:var(--top);bottom:0;left:0;width:var(--nav);overflow:auto;padding:22px 16px 60px;border-right:1px solid var(--line);background:rgba(8,6,15,.5);z-index:20}
.side .home{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--tx1);font-weight:800}
.side .layer{margin-top:14px}
.side .lh{width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;border-radius:10px;display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--brandTx);text-transform:uppercase}
.side .lh i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);font-size:12px;letter-spacing:0;color:var(--lilac)}
.side a.it{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 46px;border-radius:10px;color:var(--tx2);font-size:15px;line-height:1.45}
.side a.it:hover{background:rgba(255,255,255,.04);color:var(--tx1)}
.side a.it.cur{background:rgba(123,92,255,.16);color:var(--tx1)}
.side a.it .dn{margin-left:auto;width:8px;height:8px;border-radius:50%;flex:none;border:1.5px solid var(--line2)}
.side a.it.done .dn{background:var(--ok);border-color:var(--ok);box-shadow:0 0 8px var(--ok)}
.side .extra{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- main ---------- */
main{margin-left:var(--nav);padding:calc(var(--top) + 36px) 40px 120px}
.wrap{max-width:820px;margin:0 auto}
.crumb{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--brandTx);text-transform:uppercase}
h1{font-size:44px;line-height:1.2;font-weight:900;margin:10px 0 12px;letter-spacing:-.01em}
.lead{font-size:20px;color:var(--tx2);line-height:1.7}
.meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--tx3)}
.meta span{display:inline-flex;align-items:center;gap:6px}
article>*+*{margin-top:28px}
article h2{font-size:28px;line-height:1.3;font-weight:900;margin-top:52px}
article h3{font-size:21px;font-weight:800;margin-top:34px}
article p{color:var(--tx2)}
article p b{color:var(--tx1)}
.hl{color:var(--lilac);font-weight:800;font-style:normal}

/* blocks */
.say{display:flex;gap:16px;align-items:flex-start}
.say .av{flex:none;width:76px;height:76px;margin-top:-4px}
.say .av svg{width:100%;height:100%;overflow:visible}
.say .bub{flex:1;position:relative;border:1.5px solid rgba(164,143,255,.5);background:rgba(30,20,62,.55);border-radius:20px;padding:16px 20px}
.say .bub:before{content:"";position:absolute;left:-9px;top:26px;width:16px;height:16px;background:#160F30;border-left:1.5px solid rgba(164,143,255,.5);border-bottom:1.5px solid rgba(164,143,255,.5);transform:rotate(45deg)}
.say .who{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--brandTx)}
.say .txt{font-size:19px;font-weight:700;color:var(--tx1);line-height:1.6;margin-top:2px}

.card{background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:22px 24px}
.keys{display:grid;gap:12px}
.keys .k{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 18px}
.keys .k i{flex:none;font-style:normal;width:28px;height:28px;border-radius:50%;background:rgba(123,92,255,.22);border:1.5px solid rgba(164,143,255,.6);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:var(--lilac);margin-top:2px}
.keys .k div{color:var(--tx2)}
.keys .k b{display:inline}

.steps{counter-reset:s;display:grid;gap:14px}
.steps .s{position:relative;padding:16px 20px 16px 66px;background:var(--card);border:1.5px solid var(--line);border-radius:16px}
.steps .s:before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 0 16px rgba(107,69,255,.6)}
.steps .s>b{display:block;font-size:17px}
.steps .s span{color:var(--tx2);font-size:15.5px}

.slidebox{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--line);background:#0B0817 center/cover no-repeat;aspect-ratio:16/9}
.slidebox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.slidebox .open{position:absolute;right:10px;bottom:10px;z-index:2;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(8,6,15,.75);border:1px solid var(--line2);color:var(--lilac)}
figcaption,.cap{font-size:13.5px;color:var(--tx3);margin-top:10px;text-align:center}

.vid{border-radius:18px;overflow:hidden;border:1.5px solid var(--line);background:#000;position:relative}
.vid video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.vid.v916 video{aspect-ratio:9/16;max-height:78vh}
.vbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 16px;background:rgba(255,255,255,.04);border-top:1px solid var(--line);font-size:14px;color:var(--tx2)}
.vbar b{color:var(--tx1)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--lilac);white-space:nowrap}
.tag.warn{border-color:rgba(255,190,120,.5);color:#FFCF96}
.tag.acc{border-color:rgba(111,216,234,.5);color:var(--acc)}

.ui{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}
.phone{position:relative;border-radius:40px;padding:8px;background:linear-gradient(145deg,#2E2A3E,#100D1A 40%,#25213A);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1.5px rgba(255,255,255,.08) inset}
.phone .scr{position:relative;border-radius:33px;overflow:hidden;background:#000;aspect-ratio:390/844}
.phone .scr img{position:absolute;left:0;top:0;width:100%}
.phone .hl{position:absolute;border:2.5px solid #fff;border-radius:12px;box-shadow:0 0 0 2000px rgba(4,3,10,.6)}
.phone .hl.soft{box-shadow:none}
.ui ol{counter-reset:u;list-style:none;display:grid;gap:12px}
.ui ol li{position:relative;padding-left:40px;color:var(--tx2)}
.ui ol li:before{counter-increment:u;content:counter(u);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line2);color:var(--lilac);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center}
.ui ol li b{display:inline}

.myth{display:grid;gap:12px}
.myth .m{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.myth .m>div{padding:14px 18px 14px 50px;position:relative;font-size:15.5px;line-height:1.6}
.myth .m>div:before{position:absolute;left:16px;top:13px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.myth .w{background:rgba(255,154,168,.05);color:var(--tx2)}
.myth .w:before{content:"✕";background:rgba(255,154,168,.18);color:var(--bad)}
.myth .r{background:rgba(127,224,180,.05);color:var(--tx1);border-left:1px solid var(--line)}
.myth .r:before{content:"✓";background:rgba(127,224,180,.18);color:var(--ok)}

.note{display:flex;gap:12px;background:rgba(164,143,255,.07);border:1.5px solid rgba(164,143,255,.2);border-radius:16px;padding:14px 18px;color:var(--tx2);font-size:15.5px}
.note b:first-child{color:var(--brandTx);white-space:nowrap}
.note.warn{background:rgba(255,190,120,.06);border-color:rgba(255,190,120,.28)}
.note.warn b:first-child{color:#FFCF96}

.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--tx3);text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--line2)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);color:var(--tx1)}
.tbl tr.hi td{background:rgba(123,92,255,.12);color:var(--lilac)}
.tbl .r{text-align:right}
.tblw{overflow-x:auto;border:1.5px solid var(--line);border-radius:16px;padding:6px 10px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cards a,.cards .c{display:block;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;color:var(--tx1);transition:border-color .2s,transform .2s}
.cards a:hover{border-color:var(--line2);transform:translateY(-2px)}
.cards b{display:block;font-size:17px}
.cards span{display:block;color:var(--tx2);font-size:14.5px;line-height:1.6;margin-top:4px}

.term{border-bottom:1.5px dotted var(--brandTx);cursor:help;position:relative}
.tip{position:fixed;z-index:50;max-width:300px;background:#18122E;border:1px solid var(--line2);border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.6;color:var(--tx2);box-shadow:0 14px 40px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip b{display:block;color:var(--lilac);margin-bottom:2px}

.source{border-top:1px solid var(--line);padding-top:18px;margin-top:48px}
.source h4{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--brandTx)}
.source ul{list-style:none;margin-top:8px;display:grid;gap:6px}
.source li{font-size:14px;color:var(--tx3);padding-left:16px;position:relative}
.source li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;background:var(--brandTx)}

/* quiz */
.quiz{background:linear-gradient(180deg,rgba(123,92,255,.12),rgba(123,92,255,.04));border:1.5px solid rgba(164,143,255,.35);border-radius:22px;padding:24px}
.quiz h3{margin:0;font-size:20px}
.quiz .q{margin-top:18px}
.quiz .q>b{display:block;font-size:17px}
.quiz .opts{display:grid;gap:8px;margin-top:10px}
.quiz .opts button{text-align:left;padding:11px 16px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.03);color:var(--tx1);font-size:15.5px}
.quiz .opts button:hover{border-color:var(--line2)}
.quiz .opts button.ok{border-color:var(--ok);background:rgba(127,224,180,.1)}
.quiz .opts button.no{border-color:var(--bad);background:rgba(255,154,168,.08)}
.quiz .why{margin-top:8px;font-size:14.5px;color:var(--tx2);display:none}
.quiz .q.answered .why{display:block}
.quiz .res{margin-top:18px;font-weight:800;color:var(--ok);display:none}

/* nav buttons */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px}
.pager a{display:block;padding:16px 20px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);color:var(--tx1)}
.pager a small{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--brandTx)}
.pager a.nx{text-align:right}
.pager a:hover{border-color:var(--line2)}
.done-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--brand);color:#fff;font-weight:800;box-shadow:0 0 30px rgba(107,69,255,.45)}
.done-btn.is{background:rgba(127,224,180,.15);color:var(--ok);box-shadow:none;border:1.5px solid rgba(127,224,180,.5)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;max-width:1180px;margin:0 auto}
.hero .kick{font-size:13px;font-weight:800;letter-spacing:.28em;color:var(--brandTx)}
.hero h1{font-size:64px;line-height:1.08;margin:14px 0 18px}
.hero .lead{font-size:21px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:800;border:1.5px solid var(--line2);color:var(--tx1);background:rgba(255,255,255,.04)}
.btn.pri{background:var(--brand);border-color:#8F70FF;color:#fff;box-shadow:0 0 34px rgba(107,69,255,.5)}
.hero .aevi{width:100%;max-width:400px;margin:0 auto;aspect-ratio:1}
.hero .aevi svg{width:100%;height:100%;overflow:visible}
.sec{max-width:1180px;margin:72px auto 0}
.sec>h2{font-size:30px;font-weight:900}
.sec>p{color:var(--tx2);margin-top:6px}
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.path a{position:relative;display:block;padding:22px 22px 20px;border-radius:22px;border:1.5px solid var(--line);background:var(--card);color:var(--tx1);overflow:hidden;transition:border-color .2s,transform .2s}
.path a:hover{border-color:var(--line2);transform:translateY(-3px)}
.path .no{font-size:54px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(190,175,255,.55)}
.path b{display:block;font-size:21px;margin-top:10px}
.path span{display:block;color:var(--tx2);font-size:15px;margin-top:4px;line-height:1.6}
.path .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);margin-top:16px;overflow:hidden}
.path .bar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.path .cnt{font-size:12.5px;color:var(--tx3);margin-top:6px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:24px}
.tools a{padding:18px 20px;border-radius:18px;border:1.5px solid var(--line);background:var(--card);color:var(--tx1)}
.tools a b{display:block;font-size:17px}
.tools a span{display:block;color:var(--tx2);font-size:14px;margin-top:2px}
.homevid{max-width:1180px;margin:56px auto 0}

/* ---------- responsive ---------- */
@media (max-width:1100px){.tools{grid-template-columns:repeat(2,1fr)}.path{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  :root{--nav:0px}
  .side{width:300px;transform:translateX(-100%);transition:transform .25s;background:#0B0817}
  body.navopen .side{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.6)}
  .top .menu{display:inline-flex;align-items:center;justify-content:center}
  .top .logo span{display:none}
  main{padding:calc(var(--top) + 24px) 16px 100px}
  h1{font-size:32px}
  .hero{grid-template-columns:1fr}.hero h1{font-size:42px}.hero .aevi{max-width:240px;grid-row:1}
  .ui{grid-template-columns:1fr}.ui .phone{max-width:260px;margin:0 auto}
  .myth .m{grid-template-columns:1fr}.myth .r{border-left:0;border-top:1px solid var(--line)}
  .path{grid-template-columns:1fr}
  .search{width:auto;flex:1}
}

.langsoon{margin:0 0 20px}

/* ---------- 侧栏折叠（2026-10-06） ---------- */
.side,main{transition:transform .25s,margin-left .25s}
.side .lh:hover{background:rgba(255,255,255,.04)}
.side .lh .lt{flex:1;min-width:0}
.side .lh .ln{font-style:normal;font-size:11px;letter-spacing:0;color:var(--tx3);font-weight:700}
.side .lh .chev{font-size:18px;line-height:1;color:var(--tx3);transition:transform .2s;transform:rotate(0deg)}
.side .layer.open .lh .chev{transform:rotate(90deg)}
.side .layer .items{display:none;padding-bottom:4px}
.side .layer.open .items{display:block}
@media (min-width:901px){
  body.navclosed .side{transform:translateX(-100%)}
  body.navclosed main{margin-left:0}
}
@media (max-width:900px){.lang select{max-width:118px;padding:0 6px}}