*{margin:0;padding:0;font-family:"PingFang SC","Microsoft YaHei","微软雅黑",-apple-system,BlinkMacSystemFont,sans-serif;box-sizing:border-box}
body{min-height:100vh;padding:140px 0;background:linear-gradient(to right,#bb313e25,#bb313e25,#d7222925,#dd4a1625,#e4761525,#f5c50025,#f0e92725,#b1ce2425,#48a93525,#03944525,#157c4f25,#176a5825,#1b556325,#1d386f25,#1d386f25,#20277825,#52266325,#8a244b25)}
.main{max-width:1300px;width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center}

/* 原来这几条是写在 HTML 的 style="" 属性里的。
   内联 style 属性会被 CSP 挡掉（哈希只覆盖 <style> 块，不覆盖属性），
   所以全部搬到这里。 */
.item{flex:1;width:0;min-height:550px;border-radius:15px;position:relative;padding:50px 40px;background:linear-gradient(130deg,#facf41,#f89e6d)}
.item img{height:160px;width:160px;padding:20px;border:2px solid rgba(255,255,255,.5);border-radius:15px;display:block;margin:0 auto;background:rgba(255,255,255,.15);object-fit:contain}
.item h1{color:#fff;text-align:center;font-size:26px;line-height:50px;margin-top:20px;font-weight:700}
.item p{color:#fff;line-height:25px;font-size:15px;margin-top:10px;text-align:center}

.item .btns{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:100px;flex-wrap:wrap;gap:30px}
.item a{text-decoration:none;display:block;width:180px;line-height:52px;text-align:center;border-radius:100px;background:#fff;font-size:17px;font-weight:700;cursor:pointer;color:#f8a26a}
.item a:hover{opacity:.8}
.item a:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media screen and (max-width:730px){
  body{padding:20px}
  .main{display:block}
  .item{width:100%;margin:0!important;margin-bottom:20px!important;transform:scale(1)!important;padding:40px 24px}
  .item .btns{margin-top:50px;gap:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------- 404 页面 ---------------- */
.item h1.big{font-size:64px;line-height:1.1;letter-spacing:2px}
.item .sub{font-size:19px;margin-top:16px;font-weight:600}