:root{

    --bg:#080b10; --bg2:#0c1119; --card:#121a24; --card2:#182230;

    --line:#26323f; --ink:#f4f7fb; --sub:#aab6c6; --mut:#7c8b9d;

    --acc:#39c5cf;        /* CS2 青 */

    --orange:#ff7a45;     /* 战术橙（非土黄） */

    --purple:#9d8cff; --green:#5fd17a; --bad:#f85149;

    --ease:cubic-bezier(.22,1,.36,1);

    --spring:cubic-bezier(.34,1.4,.64,1);

  }

  *{box-sizing:border-box;} html,body{margin:0;padding:0;}

  body{background:var(--bg);color:var(--ink);

    font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;

    line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;overflow-x:hidden;}

  a{color:var(--acc);text-decoration:none;}

  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  ::selection{background:rgba(57,197,207,.3);}



  /* ===== 顶栏（Apple 式：细、透、小字） ===== */

  header{position:sticky;top:0;z-index:60;backdrop-filter:saturate(180%) blur(20px);

    background:rgba(8,11,16,.72);border-bottom:1px solid rgba(255,255,255,.06);}

  .nav{display:flex;align-items:center;gap:6px;height:48px;}

  .brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:17px;letter-spacing:.5px;margin-right:18px;color:#fff;}

  .mk{width:18px;height:18px;}

  .brand .mk{opacity:.95;}

  .navlinks{display:flex;gap:4px;flex:1;flex-wrap:wrap;}

  .navlinks button{background:none;border:0;color:var(--sub);font-size:14px;padding:7px 13px;border-radius:9px;

    cursor:pointer;font-family:inherit;transition:.22s var(--ease);}

  .navlinks button:hover{color:var(--ink);}

  .navlinks button.active{color:#fff;}

  .navcta{background:var(--ink);color:#0a0d12;font-weight:700;border:0;

    border-radius:980px;padding:8px 18px;font-size:14px;cursor:pointer;font-family:inherit;transition:.22s var(--spring);}

  .navcta:hover{transform:scale(1.04);background:#fff;}



  /* ===== 页面切换动画（iOS 弹簧 + 轻模糊） ===== */

  section.page{display:none;}

  section.page.active{display:block;}

  section.page.show{display:block;animation:pageIn .5s var(--ease) both;}

  @keyframes pageIn{from{opacity:0;transform:translateY(14px);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}



  /* ============ HERO（Apple 式：超大字 + 大图 + 留白） ============ */

  .hero{position:relative;overflow:hidden;text-align:center;padding:88px 0 8px;}

  /* 极淡 CS2 光晕（克制，不作主体） */

  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;

    background:

      radial-gradient(620px 360px at 78% 8%, rgba(255,122,69,.12), transparent 62%),

      radial-gradient(560px 380px at 14% 96%, rgba(57,197,207,.14), transparent 62%);}

  /* 极淡雷达同心圆 */

  .hero .rings{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:760px;height:760px;z-index:0;

    pointer-events:none;opacity:.07;}

  .hero .rings::before,.hero .rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--acc);}

  .hero .rings::after{inset:170px;border-color:var(--orange);}

  .hero .rings2{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:420px;height:420px;z-index:0;

    pointer-events:none;opacity:.07;border-radius:50%;border:1px solid var(--purple);}

  /* 柔和光斑跟随（iOS 味，非硬准星） */

  .glow{position:absolute;width:360px;height:360px;left:0;top:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;

    transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(57,197,207,.16),transparent 65%);}

  .hero:hover .glow{opacity:1;}

  .hero .inner{position:relative;z-index:2;max-width:840px;margin:0 auto;}

  .eyebrow{font-size:12.5px;letter-spacing:.06em;color:var(--acc);font-weight:600;margin-bottom:18px;}

  .hero h1{font-size:clamp(50px,8.4vw,96px);margin:0;line-height:1.08;letter-spacing:-.018em;color:#fff;font-weight:800;}

  .hero .sub{font-size:clamp(18px,2.4vw,28px);color:var(--orange);font-weight:600;margin:18px 0 40px;letter-spacing:0;}

  /* Apple 式文字链接（非大按钮） */

  .links{display:flex;gap:38px;align-items:center;justify-content:center;flex-wrap:wrap;}

  /* Hero 内的文字链接比正文大一档（Apple hero 惯例） */

  .hero .links .tlink{font-size:18px;font-weight:600;}

  .tlink{font-size:16px;color:var(--acc);font-weight:500;display:inline-flex;align-items:center;gap:7px;line-height:1.4;transition:.2s var(--ease);}

  .tlink .ar{transition:transform .25s var(--spring);}

  .tlink:hover{color:#fff;}

  .tlink:hover .ar{transform:translateX(5px);}

  .tlink.alt{color:var(--sub);}

  .tlink.alt:hover{color:var(--ink);}

  /* 主视觉：CS2 风格设计占位图（上线前替换为原创素材） */

  .hero-media{position:relative;z-index:2;margin:64px auto 0;max-width:1000px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;

    border:1px solid var(--line);background:#080b10;box-shadow:0 34px 90px rgba(0,0,0,.55);}

  .hero-media img{width:100%;height:100%;object-fit:cover;display:block;}

  .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;

    background:linear-gradient(180deg,transparent 56%,rgba(8,11,16,.6));}

  .hero-media .hud{position:absolute;left:16px;bottom:14px;z-index:3;font-size:11.5px;letter-spacing:.04em;color:var(--sub);

    background:rgba(8,11,16,.62);padding:4px 10px;border-radius:7px;}



  /* 错峰入场 */

  .d1{animation:up .8s var(--ease) .05s both;}

  .d2{animation:up .8s var(--ease) .16s both;}

  .d3{animation:up .8s var(--ease) .30s both;}

  .d4{animation:up .8s var(--ease) .44s both;}

  @keyframes up{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}



  /* ===== 区块（Apple 节奏：大标题 + 细副文 + 大图 + 大留白） ===== */

  .sec{padding:120px 0 0;}

  .sec-head{text-align:center;max-width:640px;margin:0 auto 46px;}

  .sec-head .eyebrow{margin-bottom:10px;}

  .sec-head h2{font-size:clamp(30px,4.4vw,46px);margin:0;color:#fff;font-weight:700;letter-spacing:-.02em;line-height:1.1;}

  .sec-head p{font-size:15.5px;color:var(--sub);margin:16px 0 0;font-weight:400;}

  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);}

  .reveal.in{opacity:1;transform:none;}



  /* 大图占位通用 */

  .img{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);

    background:linear-gradient(135deg,#141d28,#0a0e14);}

  .img .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13px;letter-spacing:1px;}

  .img img{width:100%;height:100%;object-fit:cover;display:block;}

  .img .cap{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--mut);background:rgba(8,11,16,.6);padding:3px 9px;border-radius:7px;}



  /* 天梯（细线节点，不再是大字母盒子） */

  .ladder{position:relative;height:100px;margin:30px auto 12px;max-width:880px;display:flex;justify-content:space-between;}

  .ladder::before{content:"";position:absolute;left:7%;right:7%;top:46px;height:3px;border-radius:3px;

    background:linear-gradient(90deg,var(--mut),var(--acc),var(--orange),var(--purple));}

  .node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg);padding:0 10px;}

  .node .dot{width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px currentColor;border:2px solid var(--bg);}

  .node b{font-size:21px;font-weight:800;line-height:1;}

  .node span{font-size:12.5px;color:var(--sub);}

  .node.c{color:#9aa7b4;} .node.b{color:var(--acc);} .node.a{color:var(--orange);} .node.s{color:var(--purple);}



  /* 天梯榜（去 emoji，纯文字 + 小头像） */

  .rankgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto;}

  .rankcol{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;}

  .rankcol h3{margin:0 0 16px;font-size:19px;color:#fff;font-weight:600;letter-spacing:.01em;}

  .rrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);}

  .rrow:last-child{border:0;}

  .pos{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--card2);color:var(--sub);flex:0 0 26px;}

  .pos.g1{background:linear-gradient(135deg,#ffd66b,#ff9f43);color:#3a2400;}

  .pos.g2{background:linear-gradient(135deg,#dfe7ee,#aab7c4);color:#1a2530;}

  .pos.g3{background:linear-gradient(135deg,#e6a86b,#c47b3e);color:#2a1600;}

  .rav{width:40px;height:40px;border-radius:50%;flex:0 0 40px;background:linear-gradient(135deg,var(--acc),var(--purple));}

  .rname{font-weight:600;font-size:15px;color:#fff;}

  .rmeta{font-size:12.5px;color:var(--mut);margin-top:3px;}

  .stars{color:var(--orange);font-size:12.5px;letter-spacing:.02em;}



  /* 卡片（教练/需求，精致） */

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

  .tcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;transition:.3s var(--spring);}

  .tcard:hover{transform:translateY(-8px);border-color:var(--acc);box-shadow:0 18px 44px rgba(0,0,0,.45);}

  .tcard .top{display:flex;align-items:center;gap:13px;margin-bottom:14px;}

  .ava{width:46px;height:46px;border-radius:50%;flex:0 0 46px;background:linear-gradient(135deg,var(--acc),var(--orange));display:grid;place-items:center;color:#06121a;font-weight:800;font-size:18px;}

  .tcard .nm{font-weight:600;font-size:16px;color:#fff;}

  .tcard .mt{font-size:12.5px;color:var(--mut);margin-top:2px;}

  .tagrow{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 14px;}

  .tg{font-size:12px;padding:5px 12px;border-radius:20px;background:var(--card2);border:1px solid var(--line);color:var(--sub);}

  .wxbtn{width:100%;background:rgba(95,209,122,.1);border:1px solid rgba(95,209,122,.34);color:var(--green);

    border-radius:12px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s var(--ease);}

  .wxbtn:hover{background:rgba(95,209,122,.2);}

  .pill{display:inline-block;font-size:11px;padding:3px 11px;border-radius:20px;font-weight:700;}

  .pill.c{background:rgba(154,167,180,.16);color:#cdd7e1;} .pill.b{background:rgba(57,197,207,.16);color:var(--acc);}

  .pill.a{background:rgba(255,122,69,.16);color:var(--orange);} .pill.s{background:rgba(157,140,255,.16);color:var(--purple);}



  .redline{background:rgba(248,81,73,.07);border:1px solid rgba(248,81,73,.3);border-radius:14px;padding:16px 20px;margin:52px auto 0;max-width:880px;font-size:13.5px;line-height:1.7;color:#ffb4ad;}

  .redline b{color:#ff8580;}

  .okline{background:rgba(95,209,122,.06);border:1px solid rgba(95,209,122,.28);border-radius:14px;padding:16px 20px;margin:52px auto 0;max-width:880px;font-size:13.5px;line-height:1.7;color:#a6e9b6;}



  /* 大区块内页标题 */

  .phead{max-width:640px;margin:0 auto 42px;text-align:center;}

  .phead .eyebrow{margin-bottom:10px;}

  .phead h1{font-size:clamp(32px,5vw,50px);margin:0;color:#fff;font-weight:700;letter-spacing:-.015em;line-height:1.1;}

  .phead p{font-size:15.5px;color:var(--sub);margin:16px 0 0;}



  /* 表单 */

  .form{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;max-width:560px;margin:0 auto;}

  .form label{display:block;font-size:13px;color:var(--sub);margin:16px 0 7px;}

  .form input,.form textarea,.form select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;

    padding:13px 15px;color:var(--ink);font-size:14px;font-family:inherit;}

  .form input:focus,.form textarea:focus{outline:none;border-color:var(--acc);}

  .submit{margin-top:20px;background:var(--ink);color:#0a0d12;border:0;border-radius:980px;

    padding:14px 26px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:.25s var(--spring);}

  .submit:hover{transform:scale(1.03);background:#fff;}

  .hint{font-size:12.5px;color:var(--mut);margin-top:8px;line-height:1.7;}



  /* 筛选 */

  .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 38px;}

  .filters button{background:var(--card);border:1px solid var(--line);color:var(--sub);padding:9px 18px;border-radius:980px;

    font-size:14px;cursor:pointer;font-family:inherit;transition:.2s var(--ease);}

  .filters button.on{background:rgba(57,197,207,.16);border-color:var(--acc);color:#fff;}



  /* 页脚 */

  footer{border-top:1px solid var(--line);background:var(--bg2);padding:72px 0 44px;margin-top:132px;}

  .footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px 64px;}

  .footgrid h4{font-size:13.5px;color:#fff;font-weight:600;margin:0 0 20px;letter-spacing:0;}

  .footgrid a,.footgrid p{display:block;font-size:13.5px;color:var(--sub);margin:0 0 12px;line-height:1.55;}

  .footgrid a:hover{color:var(--ink);}

  .copy{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut);text-align:center;line-height:2.1;}



  @media(max-width:860px){.rankgrid,.cards,.footgrid{grid-template-columns:1fr 1fr;}.navlinks{display:none;}}

  @media(max-width:560px){.rankgrid,.cards,.footgrid{grid-template-columns:1fr;}.ladder{height:auto;flex-direction:column;gap:10px;align-items:center;}.ladder::before{display:none;}.node{flex-direction:row;gap:10px;}}

  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}.reveal{opacity:1;transform:none;}}



  /* ===== 地图选择器（训练第一级：先选图） ===== */

  .mapsel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto;}

  .mapcard{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:pointer;

    aspect-ratio:16/10;background:#0a0e14;transition:.34s var(--spring);}

  .mapcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);

    filter:saturate(.95) brightness(.94);}

  .mapcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,16,.02) 34%,rgba(8,11,16,.86));transition:.3s;}

  .mapcard .mn{position:absolute;left:15px;bottom:12px;z-index:2;font-weight:700;font-size:16px;color:#fff;}

  .mapcard .ms{position:absolute;left:15px;bottom:34px;z-index:2;font-size:11.5px;color:var(--sub);}

  .mapcard .tick{position:absolute;right:11px;top:11px;z-index:2;width:22px;height:22px;border-radius:50%;

    border:1.5px solid rgba(255,255,255,.45);display:grid;place-items:center;font-size:12px;color:#06121a;opacity:0;transition:.25s;}

  .mapcard:hover{transform:translateY(-6px);border-color:rgba(57,197,207,.55);box-shadow:0 20px 44px rgba(0,0,0,.5);}

  .mapcard:hover img{transform:scale(1.06);filter:saturate(1) brightness(1);}

  .mapcard.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 20px 44px rgba(0,0,0,.5);}

  .mapcard.on img{filter:saturate(1.05) brightness(1);}

  .mapcard.on .tick{opacity:1;background:var(--acc);border-color:var(--acc);}



  @media(max-width:860px){.mapsel{grid-template-columns:repeat(3,1fr);}}

  @media(max-width:560px){.mapsel{grid-template-columns:repeat(2,1fr);}}



  /* ===== 段位滚轮（横向 picker wheel，默认 C） ===== */

  .wheelblock{max-width:640px;margin:48px auto 0;}

  .wheelcap{text-align:center;font-size:12px;color:var(--mut);margin:0 0 12px;}

  .wheelcap b{color:var(--sub);font-weight:600;}

  .wheelwrap{position:relative;display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto;}

  .wheel{position:relative;flex:1;height:136px;overflow:hidden;perspective:1000px;

    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);

    mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);}

  .wheel-frame{position:absolute;left:50%;top:50%;width:132px;height:108px;transform:translate(-50%,-50%);

    border:1px solid rgba(57,197,207,.38);border-radius:18px;background:rgba(57,197,207,.045);pointer-events:none;z-index:0;}

  .wi{position:absolute;left:50%;top:50%;width:104px;height:108px;margin:-54px 0 0 -52px;

    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;

    cursor:pointer;user-select:none;transition:transform .52s var(--spring),opacity .52s var(--ease);will-change:transform,opacity;}

  .wi b{font-size:42px;font-weight:800;line-height:1;color:#fff;transition:color .3s;}

  .wi span{font-size:11.5px;color:var(--mut);white-space:nowrap;transition:color .3s;}

  .wi.on b{color:var(--acc);}

  .wi.on span{color:var(--sub);}

  .wnav{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);

    color:var(--sub);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;font-family:inherit;

    transition:.2s var(--ease);}

  .wnav:hover{border-color:var(--acc);color:#fff;}

  .whint{text-align:center;font-size:12px;color:var(--mut);margin:14px 0 0;}



  /* ===== 职业配置库 ===== */

  .pros{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:0 auto;}

  .procard{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card);

    border:1px solid var(--line);cursor:pointer;transition:.28s var(--spring);}

  .procard:hover{transform:translateY(-4px);border-color:rgba(57,197,207,.5);}

  .procard.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);background:rgba(57,197,207,.07);}

  .proava{width:40px;height:40px;border-radius:12px;flex:0 0 40px;display:grid;place-items:center;

    font-weight:800;font-size:16px;color:#06121a;}

  .proname{font-size:14.5px;font-weight:600;color:#fff;}

  .prometa{font-size:11.5px;color:var(--mut);margin-top:2px;}



  .prodetail{margin:36px auto 0;max-width:1000px;}

  .prohead{display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:16px;

    background:var(--card);border:1px solid var(--line);}

  .prohead .proava{width:52px;height:52px;flex:0 0 52px;border-radius:14px;font-size:20px;}

  .prohead .t{font-size:19px;font-weight:700;color:#fff;}

  .prohead .s{font-size:12.5px;color:var(--sub);margin-top:3px;}

  .prohead .xhpv{margin-left:auto;display:grid;place-items:center;width:76px;height:76px;border-radius:14px;

    background:var(--bg2);border:1px solid var(--line);}

  .prohead .xhpv svg{width:46px;height:46px;}



  .cfggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px;}

  .cfgcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}

  .cfgcard h4{margin:0 0 12px;font-size:13.5px;color:#fff;font-weight:600;display:flex;align-items:center;gap:9px;}

  .cfgcard h4 i{width:5px;height:5px;border-radius:50%;background:var(--acc);flex:0 0 5px;}

  .cfgrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.045);}

  .cfgrow:last-child{border:0;}

  .cfgrow label{display:flex;align-items:center;gap:9px;flex:1;cursor:pointer;min-width:0;}

  .cfgrow input{accent-color:var(--acc);width:14px;height:14px;flex:0 0 14px;cursor:pointer;}

  .cfgk{font-size:12.5px;color:var(--sub);font-family:ui-monospace,Consolas,"Courier New",monospace;

    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .cfgv{font-size:13px;color:#fff;font-weight:600;margin-left:auto;white-space:nowrap;}

  .cfgc{flex:0 0 auto;background:var(--card2);border:1px solid var(--line);color:var(--mut);border-radius:8px;

    padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:inherit;transition:.2s var(--ease);}

  .cfgc:hover{border-color:var(--acc);color:#fff;}

  .cfgtool{position:sticky;bottom:20px;z-index:40;display:flex;align-items:center;gap:12px;justify-content:center;

    margin:26px auto 0;padding:12px 18px;border-radius:14px;max-width:600px;

    background:rgba(18,26,36,.94);backdrop-filter:saturate(180%) blur(14px);border:1px solid var(--line);}

  .cfgtool .n{margin-right:auto;font-size:12.5px;color:var(--sub);}

  .cfgtool .n b{color:var(--acc);font-weight:700;}

  .cfgtool button{background:var(--ink);color:#0a0d12;border:0;border-radius:980px;padding:9px 18px;font-size:13.5px;

    font-weight:700;cursor:pointer;font-family:inherit;transition:.22s var(--spring);}

  .cfgtool button.ghost{background:transparent;border:1px solid var(--line);color:var(--sub);font-weight:500;}

  .cfgtool button:hover{transform:scale(1.03);}

  .cfgtool button.ghost:hover{color:#fff;border-color:var(--acc);}



  @media(max-width:860px){.pros{grid-template-columns:repeat(2,1fr);}.cfggrid{grid-template-columns:1fr;}}

  @media(max-width:560px){.pros{grid-template-columns:1fr;}}