:root{ --paper:#FCF7EF; --card:#fff; --ink:#2B2118; --ink2:#6E5C4C; --ink3:#9A8878; --line:#EBDFCE; --line2:#F3EADD; --main:#E0502A; --main-dk:#B93C1C; --main-soft:#FBE7DF; --sun:#F2B23E; --sun-soft:#FDF1DA; --sky:#4E8FB8; --sky-soft:#E6F0F6; --r:20px; --r-sm:12px; --sh:0 6px 20px rgba(122,84,46,.08); --sh-lg:0 18px 44px rgba(122,84,46,.16); --max:1180px; } *{box-sizing:border-box} body{ margin:0;color:var(--ink); background: radial-gradient(700px 420px at 88% -6%,rgba(242,178,62,.18),transparent 62%), radial-gradient(620px 380px at 4% 8%,rgba(224,80,42,.10),transparent 60%), var(--paper); font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.25} .wrap{max-width:var(--max);margin:0 auto;padding:0 26px} .btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px; background:var(--main);color:#fff;font-weight:700;font-size:15px;box-shadow:0 8px 18px rgba(224,80,42,.28);border:0;cursor:pointer} .btn:hover{background:var(--main-dk)} .btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--sh);border:1px solid var(--line)} .mono{font-variant-numeric:tabular-nums} /* header */ header{position:sticky;top:0;z-index:40;padding:14px 0} .hbar{display:flex;align-items:center;gap:26px;background:rgba(255,255,255,.86); backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:9px 10px 9px 18px;box-shadow:var(--sh)} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.03em} .logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(140deg,var(--main),var(--sun)); display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800;box-shadow:0 6px 14px rgba(224,80,42,.30)} .brand small{display:block;font-size:11px;font-weight:500;color:var(--ink3);letter-spacing:0;line-height:1.2} nav{display:flex;gap:4px;margin-left:auto} nav a{padding:8px 14px;border-radius:999px;font-size:14.5px;color:var(--ink2);font-weight:600} nav a:hover{background:var(--main-soft);color:var(--main-dk)} nav a.on{background:var(--ink);color:#fff} /* hero */ .hero{padding:38px 0 10px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:6px 14px;font-size:13px;color:var(--ink2);font-weight:600;box-shadow:var(--sh)} .kicker i{width:7px;height:7px;border-radius:50%;background:var(--main);display:block} .hero h1{font-size:46px;font-weight:800;margin:20px 0 14px} .hero h1 em{font-style:normal;color:var(--main);position:relative} .hero p{margin:0 0 24px;color:var(--ink2);font-size:16.5px;max-width:520px} .search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:7px 8px 7px 20px;box-shadow:var(--sh-lg);max-width:520px} .search input{flex:1;border:0;outline:0;font-size:15px;height:44px;background:transparent;color:var(--ink)} .search input::placeholder{color:var(--ink3)} .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .tags span{font-size:13.5px;color:var(--ink2);background:#fff;border:1px solid var(--line); border-radius:999px;padding:6px 13px;box-shadow:0 2px 6px rgba(122,84,46,.05)} .tags span:hover{border-color:var(--sun);color:var(--main-dk)} /* hero stack */ .stack{position:relative;height:360px} .sheet{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg)} .sheet .cov{height:100%;display:grid;place-items:center;font-size:52px;font-weight:800;color:rgba(255,255,255,.92)} .s1{width:250px;height:180px;left:8px;top:26px;transform:rotate(-7deg);z-index:1} .s1 .cov{background:linear-gradient(150deg,#E0502A,#F2B23E)} .s2{width:250px;height:186px;left:104px;top:96px;transform:rotate(4deg);z-index:2} .s2 .cov{background:linear-gradient(150deg,#4E8FB8,#7FB6D4)} .s3{width:238px;height:178px;left:26px;top:186px;transform:rotate(-2deg);z-index:3} .s3 .cov{background:linear-gradient(150deg,#2F6B5E,#63A08F)} .badge{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.94);color:var(--ink); font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;z-index:5} /* section */ section{padding:54px 0} .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px} .shead h2{font-size:27px;font-weight:800} .shead p{margin:6px 0 0;color:var(--ink3);font-size:14px} .more{font-size:14px;font-weight:700;color:var(--main-dk)} /* scenes */ .scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .scene{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 18px; display:flex;flex-direction:column;gap:10px;min-height:132px;transition:.18s} .scene:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#E7C9A8} .scene .ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--main-soft);color:var(--main-dk)} .scene b{font-size:16px} .scene small{color:var(--ink3);font-size:12.5px} .scene:nth-child(2) .ico{background:var(--sky-soft);color:var(--sky)} .scene:nth-child(3) .ico{background:var(--sun-soft);color:#A9781A} .scene:nth-child(4) .ico{background:#EAF1EC;color:#2F6B5E} .scene:nth-child(5) .ico{background:#F3ECF7;color:#7B4E9E} .scene:nth-child(6) .ico{background:#FDECE7;color:#C4441F} .scene:nth-child(7) .ico{background:var(--sky-soft);color:var(--sky)} .scene:nth-child(8) .ico{background:var(--sun-soft);color:#A9781A} /* cards */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; transition:.18s;display:flex;flex-direction:column} .card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .cover{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden} .cover .ch{font-size:76px;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:-.05em} .cover .fmt{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);border-radius:8px; padding:4px 9px;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--ink)} .cover .pgs{position:absolute;right:12px;bottom:12px;background:rgba(43,33,24,.62);color:#fff; border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:600} .g1{background:linear-gradient(140deg,#E0502A,#F08A4B)} .g2{background:linear-gradient(140deg,#4E8FB8,#82BBD8)} .g3{background:linear-gradient(140deg,#7B4E9E,#B08BCB)} .g4{background:linear-gradient(140deg,#2F6B5E,#6BA491)} .g5{background:linear-gradient(140deg,#C4441F,#E08A4E)} .g6{background:linear-gradient(140deg,#35507A,#6E8CB4)} .cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .cbody h3{font-size:16.5px;font-weight:700;line-height:1.45} .cbody p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.6} .cmeta{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line2);display:flex; justify-content:space-between;font-size:12.5px;color:var(--ink3)} /* match bars */ .matches{display:flex;flex-direction:column;gap:12px} .mrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px; background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 22px} .mrow:hover{border-color:#E7C9A8;box-shadow:var(--sh)} .mrow b{font-size:15.5px;font-weight:700} .mrow small{display:block;color:var(--ink3);font-size:12.5px;margin-top:3px} .pill{font-size:12.5px;font-weight:700;border-radius:999px;padding:6px 13px;background:var(--main-soft);color:var(--main-dk);white-space:nowrap} .pill.warn{background:var(--sun-soft);color:#8F6412} .pill.calm{background:var(--sky-soft);color:#2E6E93} /* chips */ .stages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .stage{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px} .stage h4{margin:0 0 12px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px} .stage h4 i{width:6px;height:16px;border-radius:3px;background:var(--main);display:block} .stage h4 i.b{background:var(--sky)} .stage h4 i.c{background:var(--sun)} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips a{font-size:13px;color:var(--ink2);background:var(--paper);border:1px solid var(--line2); border-radius:9px;padding:5px 11px} .chips a:hover{background:var(--main-soft);color:var(--main-dk);border-color:#F0C9B6} /* trust */ .trust{background:#fff;border:1px solid var(--line);border-radius:26px;padding:38px 40px; display:grid;grid-template-columns:repeat(4,1fr);gap:26px;box-shadow:var(--sh)} .trust div b{display:block;font-size:30px;font-weight:800;color:var(--main);letter-spacing:-.03em} .trust div span{font-size:13.5px;color:var(--ink2)} .trust div em{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);margin-top:6px} /* footer */ footer{margin-top:40px;padding:40px 0 50px;border-top:1px solid var(--line)} .fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px} footer h5{margin:0 0 12px;font-size:13px;color:var(--ink);font-weight:800} footer a,footer p{font-size:13px;color:var(--ink3);display:block;margin:0 0 8px;line-height:1.7} .fnote{margin-top:28px;padding-top:18px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink3);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} @media(max-width:980px){ .hero{grid-template-columns:1fr;gap:26px} .stack{display:none} .scenes{grid-template-columns:repeat(2,1fr)} .grid{grid-template-columns:repeat(2,1fr)} .stages{grid-template-columns:1fr} .trust{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr 1fr} nav{display:none} } @media(max-width:620px){ .hero h1{font-size:32px} .grid{grid-template-columns:1fr} .scenes{grid-template-columns:1fr 1fr} .mrow{grid-template-columns:1fr;gap:10px} .trust{padding:26px 22px} } /* 语义变量别名 · 让 inner.css 一套样式跑三站皮肤 */ :root{ --brand: var(--main); --brand-dk: var(--main-dk); --brand-soft: var(--main-soft); --surface: var(--card); --bgp: var(--paper); --line-soft: var(--line2); --sh-sm: var(--sh); } /* ============================================================ 素材站内页样式 · 三站共用（靠 alias.css 的语义变量换肤） 依赖：--brand --brand-dk --brand-soft --surface --bgp --ink --ink2 --ink3 --line --line-soft --r --sh-sm --max ============================================================ */ .pg{max-width:var(--max);margin:0 auto;padding:0 22px} /* 面包屑 */ .crumb{font-size:13px;color:var(--ink3);padding:22px 0 0;line-height:1.9} .crumb a{color:var(--ink3);text-decoration:none;border-bottom:1px solid transparent} .crumb a:hover{color:var(--brand);border-bottom-color:var(--brand)} .crumb i{font-style:normal;margin:0 7px;opacity:.55} /* 页头 */ .phead{padding:16px 0 22px;border-bottom:1px solid var(--line)} .phead h1{font-size:30px;line-height:1.42;letter-spacing:-.2px;margin:0 0 12px;color:var(--ink);font-weight:800} .phead .lede{font-size:15.5px;line-height:1.85;color:var(--ink2);margin:0 0 14px;max-width:760px} .metas{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--ink2)} .metas span{background:var(--brand-soft);border-radius:999px;padding:4px 11px;line-height:1.6} .metas span.k{background:transparent;border:1px solid var(--line);color:var(--ink3)} /* 两栏：正文 + 侧栏 */ .cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start;padding:30px 0 60px} @media(max-width:900px){.cols{grid-template-columns:1fr;gap:26px;padding-bottom:40px}} /* 正文 */ .art{max-width:760px;font-size:16px;line-height:1.95;color:var(--ink)} .art h2{font-size:21px;line-height:1.5;margin:34px 0 12px;padding-left:12px;border-left:4px solid var(--brand);color:var(--ink);font-weight:800} .art h3{font-size:16.5px;margin:22px 0 8px;color:var(--ink);font-weight:700} .art p{margin:0 0 14px} .art ul,.art ol{margin:0 0 16px;padding-left:22px} .art li{margin:0 0 7px} .art li::marker{color:var(--brand)} .art strong{color:var(--ink);font-weight:700} .art blockquote{margin:16px 0;padding:12px 16px;background:var(--brand-soft);border-radius:var(--r);border-left:3px solid var(--brand);color:var(--ink2);font-size:15px} .art table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px} .art th,.art td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top} .art th{background:var(--bgp);font-weight:700;color:var(--ink)} .art .lead-in{background:var(--bgp);border-radius:var(--r);padding:16px 18px;margin:0 0 24px;font-size:15.5px;line-height:1.9;color:var(--ink2)} /* 下载框 */ .dlbox{margin:26px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden} .dlbox .dhd{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--bgp);border-bottom:1px solid var(--line)} .dlbox .dhd b{font-size:15px;color:var(--ink)} .dlbox .dhd em{font-style:normal;font-size:12.5px;color:var(--ink3);margin-left:auto} .dlbox .dbody{padding:16px 18px} .dlbox .dbody p{margin:0 0 12px;font-size:14px;line-height:1.85;color:var(--ink2)} .dlgrid{display:flex;flex-wrap:wrap;gap:10px} .btn-a{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 20px;border-radius:calc(var(--r) * .8);background:var(--brand);color:#fff;font-size:14.5px;font-weight:700;text-decoration:none;border:0} .btn-a:hover{background:var(--brand-dk)} .btn-b{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 20px;border-radius:calc(var(--r) * .8);background:transparent;color:var(--brand);font-size:14.5px;font-weight:700;text-decoration:none;border:1.5px solid var(--brand)} .btn-b:hover{background:var(--brand-soft)} .tiny{font-size:12.5px;color:var(--ink3);margin-top:10px;line-height:1.8} /* 侧栏 */ .side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px} @media(max-width:900px){.side{position:static}} .sbox{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm);padding:16px 18px} .sbox h4{margin:0 0 12px;font-size:14px;color:var(--ink);letter-spacing:.02em} .sbox ol,.sbox ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.95;color:var(--ink2)} .sbox li{margin-bottom:6px} .sbox li a{color:var(--ink2);text-decoration:none} .sbox li a:hover{color:var(--brand)} .sbox .wx{font-size:14px;line-height:1.9;color:var(--ink)} .sbox .wx b{color:var(--brand);letter-spacing:.02em} /* 相关列表 */ .rel{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)} .rel h3{font-size:16px;margin:0 0 14px} .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .ritem{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;background:var(--surface)} .ritem:hover{border-color:var(--brand)} .ritem b{display:block;font-size:14px;color:var(--ink);line-height:1.6;margin-bottom:5px;font-weight:600} .ritem span{font-size:12px;color:var(--ink3)} /* 列表页 */ .cover{background:linear-gradient(140deg,var(--brand),var(--brand-dk))} .lbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 0 4px} .lbar a{font-size:13px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);text-decoration:none} .lbar a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700} .lbar a:hover{border-color:var(--brand)} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;padding:20px 0 60px} .rcard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm);text-decoration:none;overflow:hidden;display:flex;flex-direction:column} .rcard:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(80,60,40,.12)} .rcover{height:118px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;letter-spacing:.06em;background:var(--brand)} .rbody{padding:14px 16px 16px} .rbody h3{margin:0 0 7px;font-size:15px;line-height:1.6;color:var(--ink);font-weight:700} .rbody p{margin:0 0 10px;font-size:13px;line-height:1.8;color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rbody .mt{font-size:12px;color:var(--ink3);display:flex;gap:10px;flex-wrap:wrap} .rbody .mt b{color:var(--brand);font-weight:600} /* 空状态 */ .empty{padding:70px 24px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--ink3);font-size:14px;line-height:2;margin:24px 0 60px} .empty b{display:block;font-size:16px;color:var(--ink2);margin-bottom:6px} /* 页尾 */ .pfoot{border-top:1px solid var(--line);padding:26px 0 40px;font-size:12.5px;color:var(--ink3);line-height:2} .pfoot a{color:var(--ink3);text-decoration:none;margin-right:14px} .pfoot a:hover{color:var(--brand)}