/* 新手教程（guide.html） */
.gh{padding:64px 0 36px;text-align:center}
.gh h1{font-size:clamp(38px,4.6vw,60px);margin:16px 0 16px}
.gh h1 em{font-style:normal;color:var(--gold)}
.gh .lead{max-width:540px;margin:0 auto}
.gh .tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.prog{display:grid;grid-template-columns:repeat(3,1fr);margin:40px auto 0;max-width:820px;position:relative}
.prog:before{content:"";position:absolute;left:16%;right:16%;top:22px;height:2px;background:linear-gradient(90deg,var(--gold),var(--line2))}
.prog a{position:relative;display:grid;justify-items:center;gap:6px;font-size:14.5px;color:var(--ink2)}
.prog a i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 16px var(--mono);font-style:normal;background:var(--surface);border:2px solid var(--gold-deep);color:var(--gold)}
.prog a:first-child i{border-color:var(--gold);color:var(--gold-ink);background:var(--gold)}
.prog a:hover i{border-color:var(--gold)}
.prog small{font-size:12px;color:var(--muted)}
.step{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding:52px;margin-top:22px;border-radius:20px;border:1px solid var(--line);background:var(--surface);scroll-margin-top:90px}
.step.wide{display:block}
.step .n{font:600 13px var(--mono);color:var(--gold);letter-spacing:.14em}
.step h2{font-size:32px;margin:10px 0 18px}
.step-intro{margin-bottom:22px}
.acts{display:grid;gap:14px;counter-reset:x}
.acts li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:15px;color:var(--ink2);counter-increment:x;line-height:1.8}
.acts li:before{content:counter(x);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--mono);background:var(--gold-soft);color:var(--gold);margin-top:3px}
.acts strong{color:var(--gold)}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-size:13px;color:var(--muted)}
.route span,.route strong{padding:4px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--bg2)}
.route strong{color:var(--gold);border-color:#6f5d3c}
.note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--gold-soft);border:1px solid #6f5d3c;font-size:14px;color:var(--ink2);line-height:1.8}
.done{margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(76,195,138,.08);border:1px solid rgba(76,195,138,.35);color:#a7e8c6;font-size:14px}
.qrcard{padding:24px;text-align:center}
.qrcard img{width:200px;height:200px;border-radius:12px;background:#fff;padding:8px;margin:0 auto 12px}
.qrcard p{font-size:13px;margin:4px 0 6px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dlc{padding:26px;display:flex;flex-direction:column;gap:12px;background:var(--bg2)}
.dlc.main{border-color:#6f5d3c;background:radial-gradient(100% 80% at 50% 0%,rgba(224,189,130,.12),transparent 70%),var(--bg2)}
.dlc p{font-size:14px;line-height:1.8}
.dlc .spec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid var(--line2);font-size:13px;color:var(--muted)}
.dlc .spec b{font:600 18px var(--mono);color:var(--ink)}
.dlc .btn{margin-top:auto}
.act{width:100%;max-width:380px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid rgba(43,74,107,.6);background:#0e1a2b;box-shadow:var(--shadow)}
.act-h{padding:12px 16px;border-bottom:1px solid rgba(43,74,107,.45);font-size:13px;color:#dce8f5;display:flex;gap:8px;align-items:center}
.act-h img{width:22px;height:22px;border-radius:6px}
.act-b{padding:22px 18px;display:grid;gap:14px;text-align:center}
.act-b h3{font-size:18px;color:#dce8f5}
.act-b p{font-size:13px;color:rgba(143,179,209,.85)}
.act-code{font:600 22px var(--mono);letter-spacing:.2em;color:var(--gold);padding:12px;border-radius:10px;border:1px solid rgba(43,74,107,.8);background:rgba(15,34,54,.8)}
.act-go{padding:12px;border-radius:10px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--gold-ink);font-weight:700}
.act-b small{font-size:11px;color:rgba(143,179,209,.7)}
.perm{margin-top:24px;padding:18px 20px;border-radius:14px;border:1px solid #2c5866;background:var(--data-soft)}
.perm strong{color:var(--data)}.perm p{font-size:14px;margin-top:6px}
.ready{margin-top:22px;padding:52px;border-radius:20px;border:1px solid #5d4e33;background:radial-gradient(60% 100% at 50% 0%,rgba(224,189,130,.12),transparent 70%),var(--surface);scroll-margin-top:90px}
.ready h2{font-size:32px;margin:12px 0 10px}
.ready .grid{margin:26px 0 18px;align-items:start}
.ready .card{padding:24px;background:var(--bg2)}
.ready .card h3{margin:10px 0 8px}
.ready .card p{font-size:14px;line-height:1.8}
.idle{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:6px 14px;border-radius:99px;background:#0e1a2b;border:1px solid rgba(43,74,107,.6);color:#dce8f5;font-size:13px}
.help{margin-top:56px}
.help h2{font-size:32px;margin:12px 0 16px}
.help .faq strong{color:var(--gold)}
.help-foot{margin-top:22px;font-size:14px}
.help-foot a{color:var(--gold)}
@media(max-width:900px){.step{grid-template-columns:minmax(0,1fr);padding:28px 20px;gap:28px}.step h2,.ready h2,.help h2{font-size:26px}.pair{grid-template-columns:minmax(0,1fr)}.ready{padding:28px 20px}.prog small{display:none}}
