*{box-sizing:border-box}body{margin:0;background:#f6f6f3;color:#171717;font-family:Arial,"Microsoft YaHei",sans-serif}header{height:72px;border-bottom:1px solid #e5e5df;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1180px)/2));position:sticky;top:0;background:#f6f6f3dd;backdrop-filter:blur(15px);z-index:2}header b{font-size:21px}header b span{opacity:.4}nav{display:flex;gap:30px}nav a{text-decoration:none;color:#777}button{border:1px solid #ddd;background:white;border-radius:50%;width:38px;height:38px}.hero{text-align:center;min-height:500px;padding:120px 20px 80px;background:radial-gradient(circle at center,#e9e9e4,transparent 55%)}small{letter-spacing:3px;color:#999}.hero h1{font-size:clamp(48px,7vw,84px);line-height:1.05;letter-spacing:-5px}.hero h1 i{font-style:normal;color:#999}.hero p{color:#777;margin-bottom:35px}.hero input{width:min(650px,100%);padding:22px;border:1px solid #ddd;border-radius:18px;font-size:16px;box-shadow:0 20px 60px #0000000d}main{max-width:1180px;margin:auto;padding:60px 24px 100px}.title{display:flex;justify-content:space-between;align-items:end}.title h2{font-size:30px}.title span{color:#999}.categories{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0 35px}.categories button{width:auto;height:auto;border-radius:99px;padding:9px 17px;cursor:pointer}.categories button.active{background:#171717;color:white}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:white;border:1px solid #e5e5df;border-radius:20px;padding:25px;text-decoration:none;color:inherit;min-height:210px;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:0 20px 50px #0000000d}.icon{font-size:42px}.cat{font-size:11px;color:#999;letter-spacing:1px}.card h3{font-size:21px;margin:7px 0}.card p{color:#777;font-size:13px}.card .go{display:block;margin-top:25px}#empty{text-align:center;color:#999;padding:80px}footer{border-top:1px solid #e5e5df;padding:40px 24px;text-align:center;color:#999}@media(max-width:700px){nav{display:none}.grid{grid-template-columns:1fr}.hero h1{letter-spacing:-3px}.hero{padding-top:90px}}body.dark{background:#111;color:#eee}body.dark header,body.dark .card,body.dark .categories button,body.dark .hero input{background:#191919;color:#eee}body.dark header{border-color:#2d2d2d}body.dark .card{border-color:#2d2d2d}body.dark .hero{background:radial-gradient(circle at center,#292929,transparent 55%)}