@import url("/assets/tokens.css");
/* 色值统一由 assets/tokens.css 提供 */
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--page); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
.shell { max-width:680px; margin:auto; padding:72px 24px 64px; }
.topbar { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:12px; }
.brand { font:500 12px/1.4 Inter,-apple-system,BlinkMacSystemFont,sans-serif; }
.hero-head { padding:28px 0 32px; }
h1 { font-size:40px; font-weight:500; line-height:1.2; margin:0 0 12px; }
.hero-head p { font-size:15px; color:var(--body); margin:0; }
.feature { position:relative; display:block; overflow:hidden; border-radius:24px; padding:32px;
  background:linear-gradient(135deg,#936B25,#6E4A16); color:#fff;
  box-shadow:0 12px 28px rgba(140,98,32,.18); transition:transform .18s,box-shadow .18s; }
.feature:hover { transform:translateY(-3px); box-shadow:0 18px 36px rgba(140,98,32,.22); }
.feature-mark { position:absolute; z-index:0; right:18px; top:14px; font-size:160px; font-weight:700;
  line-height:1; color:rgba(255,255,255,.1); pointer-events:none; user-select:none; }
.feature > :not(.feature-mark) { position:relative; z-index:1; }
.badge { display:inline-block; padding:5px 12px; border-radius:4px;
  background:var(--seal); color:#fff; font-size:11px; font-weight:500; }
.feature h2 { font-size:30px; font-weight:500; margin:14px 0 0; }
.feature p { font-size:14px; color:#FFF9EC; margin:14px 0 0; }
.cta { display:inline-block; margin-top:14px; padding:12px 22px; border-radius:24px;
  background:#FFFFFF; color:var(--primary); font-size:14px; font-weight:500; }
.feature-meta { display:block; margin-top:14px; font-size:12px; color:#FFF9EC; }
.section-head { display:flex; justify-content:space-between; align-items:center;
  padding:40px 0 16px; font-size:13px; font-weight:500; color:var(--body); }
.section-head span:last-child { font-size:12px; font-weight:400; color:var(--muted); }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card { display:flex; flex-direction:column; gap:8px; min-height:148px; padding:22px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface); transition:border-color .15s,transform .15s; }
a.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card-icon { position:relative; width:36px; height:36px; border-radius:12px; background:var(--soft); }
.card-icon::after { content:""; position:absolute; left:15px; top:15px; width:6px; height:6px;
  border-radius:50%; background:var(--accent); }
.card strong { font-size:17px; font-weight:500; color:var(--ink); }
.card small { font-size:13px; color:var(--body); }
.dots { display:flex; gap:11px; margin-top:2px; }
.dots i { width:10px; height:10px; border-radius:50%; }
.dots i:nth-child(1) { background:#C08A3E; }
.dots i:nth-child(2) { background:#6E8B7A; }
.dots i:nth-child(3) { background:#A85A4A; }
.preview { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.preview-text { display:flex; flex-direction:column; gap:6px; }
.preview-text strong { font-size:15px; font-weight:500; color:var(--ink); }
.preview-text small { font-size:13px; color:var(--body); }
.thumb { flex:0 0 150px; height:86px; display:grid; place-items:center; border-radius:10px;
  background:var(--soft); color:var(--primary); font-size:13px; font-weight:500; }
footer { max-width:680px; margin:0 auto; padding:24px 24px 64px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; color:var(--faint); font-size:11px; }
.back-link { margin-top:22px; }
.back-link a { color:var(--primary); font-weight:500; }
article { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px; }
article h1 { font-size:30px; font-weight:500; margin:0 0 20px; }
article h2 { font-size:18px; font-weight:500; margin:28px 0 8px; }
article p { color:var(--body); font-size:14px; line-height:1.8; }
code { background:var(--soft); padding:2px 5px; border-radius:3px; font-size:13px; color:var(--primary); }
.crumb { font-size:13px; color:var(--muted); margin-bottom:24px; }
.crumb a:hover { color:var(--primary); }
@media(max-width:600px){
  .shell { padding:48px 24px; }
  h1 { font-size:32px; }
  .hero-head { padding:20px 0 24px; }
  .hero-head p { font-size:14px; }
  .feature { padding:24px; border-radius:20px; }
  .feature-mark { font-size:84px; right:8px; top:4px; color:rgba(255,255,255,.08); }
  .feature h2 { font-size:24px; }
  .feature p { font-size:13px; }
  .feature-meta { font-size:11px; }
  .cta { font-size:13px; padding:11px 18px; }
  .section-head { padding:28px 0 14px; }
  .cards { grid-template-columns:1fr; gap:12px; }
  .card { min-height:0; padding:18px; gap:6px; }
  .card strong { font-size:16px; }
  .card small { font-size:12px; }
  .card-icon { width:32px; height:32px; border-radius:11px; }
  .card-icon::after { left:13px; top:13px; }
  .preview { margin-top:12px; padding:16px; gap:12px; }
  .preview-text strong { font-size:13px; }
  .preview-text small { font-size:12px; }
  .thumb { flex-basis:76px; height:56px; font-size:10px; }
  footer { flex-direction:column; gap:6px; padding-bottom:48px; }
  article { padding:24px; }
}