*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b0d12;color:#e6e8ee;line-height:1.55}a{color:#8ab4ff;text-decoration:none}a:hover{text-decoration:underline}
.w{max-width:1100px;margin:0 auto;padding:0 20px}header{border-bottom:1px solid #1e2330;position:sticky;top:0;background:#0b0d12ee;backdrop-filter:blur(8px);z-index:9}header .w{display:flex;justify-content:space-between;align-items:center;height:60px;flex-wrap:wrap}
.logo{font-weight:800;font-size:20px;color:#fff}.logo span{color:#7c5cff}nav a{margin-left:18px;color:#b9c0d0;font-size:15px}
.hero{padding:64px 0 36px}.hero h1{font-size:clamp(30px,5vw,52px);margin:0 0 12px;line-height:1.1;background:linear-gradient(90deg,#fff,#a8a0ff);-webkit-background-clip:text;color:transparent}.hero p{color:#a3abbd;font-size:18px;max-width:640px}
.btn{display:inline-block;background:#7c5cff;color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;border:0;cursor:pointer;font-size:15px}.btn.g{background:#1a1f2b;border:1px solid #2a3142}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.card{background:#121621;border:1px solid #1e2330;border-radius:14px;padding:18px;display:block;color:inherit}.card:hover{border-color:#7c5cff;text-decoration:none}
.card h3{margin:0 0 6px;font-size:17px;color:#fff}.card p{margin:0;color:#a3abbd;font-size:14px}.tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:#1d2232;color:#b9c0d0;margin-top:10px;margin-right:6px}.tag.f{background:#2b2160;color:#cbbfff}
h2{margin:40px 0 16px}section{margin-bottom:24px}.rank{color:#7c5cff;font-weight:800;margin-right:6px}
.nl{background:linear-gradient(135deg,#1a1640,#121621);border:1px solid #2b2160;border-radius:16px;padding:28px;margin:48px 0}.nl input{padding:10px 14px;border-radius:10px;border:1px solid #2a3142;background:#0b0d12;color:#fff;font-size:15px;width:min(320px,100%);margin:8px 8px 8px 0}
footer{border-top:1px solid #1e2330;margin-top:60px;padding:28px 0;color:#6f7890;font-size:14px}.crumb{color:#6f7890;font-size:14px;margin-top:28px}dl{display:grid;grid-template-columns:140px 1fr;gap:8px}dt{color:#6f7890}
[id]{scroll-margin-top:72px}
@media(max-width:600px){nav a{margin-left:12px;font-size:14px}dl{grid-template-columns:1fr}}