/* Generated from packages/tokens/tokens.json — do not edit. Run `pnpm tokens`. */
:root {
  --bg: #f3f5fe;
  --surf: #fbfcff;
  --surf2: #f8f9fe;
  --txt: #292b31;
  --mut: #595d6c;
  --dim: #75798c;
  --lt: #3f424d;
  --line: #cfd3e5;
  --row: #e4e7f5;
  --a9: #e7e5fe;
  --a8: #d2cefd;
  --a7: #b5abfc;
  --a3: #5d5294;
  --a4: #796cbf;
  --acc: #6b5fb3;
  --accFill: #6b5fb3;
  --onAcc: #fbfcff;
  --accHover: #9184d91f;
  --gold: #8f6f22;
  --sh: #b2b6ca;
  --img: #eef0f8;
  --glass: #fbfcffe6;
  --scrim: #292b3159;
  --shd: #292b312e;
  --warn: #a32d2d;
  --woolKuaibao: #e7e5fe;
  --woolGonglue: #d2cefd;
  --woolQingdan: #eeedfe;
  --woolBaicai: #faeeda;
  --woolKaquan: #e6f1fb;
  --woolBikeng: #fcebeb;
  --woolShenghuo: #faece7;
  --avatarDefault: #fdf1d8;
  --space-s2: 2px;
  --space-s4: 4px;
  --space-s6: 6px;
  --space-s8: 8px;
  --space-s10: 10px;
  --space-s12: 12px;
  --space-s14: 14px;
  --space-s16: 16px;
  --space-s18: 18px;
  --space-s20: 20px;
  --space-s22: 22px;
  --space-page: 20px;
  --radius-r4: 4px;
  --radius-r6: 6px;
  --radius-r8: 8px;
  --radius-r10: 10px;
  --radius-r12: 12px;
  --radius-r14: 14px;
  --radius-r20: 20px;
  --radius-bubbleTip: 2px;
  --size-s11: 11px;
  --size-s11_5: 11.5px;
  --size-s12: 12px;
  --size-s12_5: 12.5px;
  --size-s13: 13px;
  --size-s13_5: 13.5px;
  --size-s14: 14px;
  --size-s15: 15px;
  --size-s16: 16px;
  --size-s18: 18px;
  --size-s20: 20px;
  --size-s22: 22px;
  --size-s26: 26px;
  --size-s28: 28px;
  --size-s34: 34px;
  --size-s36: 36px;
  --size-s40: 40px;
  --size-s44: 44px;
  --weight-regular: 400;
  --weight-medium: 500;
  --tracking-numberLoose: -0.02em;
  --tracking-numberTight: -0.03em;
  --tracking-labelTight: 0.08em;
  --tracking-label: 0.1em;
  --tracking-labelLoose: 0.12em;
  --tracking-code: 0.14em;
  --lineHeight-tight: 1.25;
  --lineHeight-card: 1.4;
  --lineHeight-title: 1.45;
  --lineHeight-body: 1.55;
  --web-content: 720px;
  --web-wide: 1120px;
  --web-gutter: 32px;
  --web-header: 56px;
  --web-cardMin: 220px;
  --web-heroTitle: 34px;
  --web-heroTitleWide: 52px;
  --web-pageTitle: 28px;
  --web-breakpoint: 768px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161826;
    --surf: #232532;
    --surf2: #1c1e2c;
    --txt: #e9e9ed;
    --mut: #9397ab;
    --dim: #75798c;
    --lt: #b2b6ca;
    --line: #3f424d;
    --row: #292b31;
    --a9: #2b2741;
    --a8: #423a6a;
    --a7: #5d5294;
    --a3: #d2cefd;
    --a4: #b5abfc;
    --acc: #9184d9;
    --accFill: #9184d9;
    --onAcc: #161826;
    --accHover: #9184d91f;
    --gold: #d8b56f;
    --sh: #595d6c;
    --img: #e9e9ed;
    --glass: #161826d9;
    --scrim: #0a0b1499;
    --shd: #00000099;
    --warn: #f09595;
    --woolKuaibao: #423a6a;
    --woolGonglue: #5d5294;
    --woolQingdan: #2b2741;
    --woolBaicai: #403722;
    --woolKaquan: #1d3140;
    --woolBikeng: #45222a;
    --woolShenghuo: #3a2c22;
    --avatarDefault: #3b3222;
  }
}
@media (prefers-contrast: more) {
  :root {
    --dim: #595d6c;
    --gold: #80621c;
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --dim: #9397ab;
    --gold: #d8b56f;
  }
}

/* 羊毛封面：.claude/skills/wool/cover/cover.css 的副本（那边改了这边一起改；App 按同一套色值原生绘制）。官网 photo 版式的商品图叠在占位纹理上，叠放规则在 site.css */
.xc{position:relative;aspect-ratio:3/4;container-type:inline-size;overflow:hidden;background:var(--xbg);color:var(--xink);
  font-family:"PingFang SC","Hiragino Sans GB",system-ui,sans-serif;text-align:left;isolation:isolate}
.xc *{box-sizing:border-box}
.xc .in{position:absolute;inset:0;padding:8cqw 7cqw;display:flex;flex-direction:column}
.xc .tag{align-self:flex-start;font-size:5.4cqw;font-weight:600;line-height:1;padding:1.8cqw 3.2cqw;border-radius:1.6cqw;
  background:var(--xtag);color:var(--xtagink);transform:rotate(-3deg);transform-origin:left center;letter-spacing:.02em}
.xc .ttl{margin-top:auto;font-weight:800;font-size:13.5cqw;line-height:1.16;letter-spacing:-.03em;word-break:keep-all}
.xc .ttl.s{font-size:11.5cqw}.xc .ttl.xs{font-size:10cqw}
.xc .ttl div{white-space:nowrap}
.xc mark{background:linear-gradient(transparent 52%,var(--xmark) 52%,var(--xmark) 92%,transparent 92%);color:inherit;padding:0 .6cqw}
.xc .stamp{position:absolute;right:6cqw;top:6cqw;width:27cqw;height:27cqw;border-radius:50%;background:var(--xstamp);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:6.8cqw;line-height:1.05;
  transform:rotate(10deg);box-shadow:inset 0 0 0 1.4cqw var(--xstamp),inset 0 0 0 2cqw rgba(255,255,255,.9);padding:4cqw;letter-spacing:-.02em}
.xc .by{font-size:4.6cqw;font-weight:600;opacity:.62;margin-top:4cqw;display:flex;align-items:center;gap:1.6cqw}
.xc .by i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--xtag)}
.xc .grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--xline) 1px,transparent 1px),linear-gradient(90deg,var(--xline) 1px,transparent 1px);background-size:9cqw 9cqw}
/* 白菜：上半商品图 + 价签 */
.xc.photo .pic{position:absolute;left:0;right:0;top:0;height:62%;background:#f1efe9;display:flex;align-items:center;justify-content:center;color:#b9b3a6;font-size:5cqw;overflow:hidden}
.xc.photo .pic img{width:100%;height:100%;object-fit:cover}
.xc.photo .pic .ph{width:46cqw;height:46cqw;border-radius:6cqw;background:repeating-linear-gradient(45deg,#e6e1d6 0 3cqw,#efebe3 3cqw 6cqw);display:flex;align-items:center;justify-content:center}
.xc.photo .price{position:absolute;right:5cqw;top:calc(62% - 19cqw);background:var(--xstamp);color:#fff;border-radius:3cqw;padding:2cqw 3.6cqw 2.4cqw;transform:rotate(-4deg);
  font-weight:800;line-height:1;box-shadow:0 1.4cqw 0 rgba(0,0,0,.12)}
.xc.photo .price small{display:block;font-size:4.4cqw;font-weight:600;opacity:.9;margin-bottom:1cqw}
.xc.photo .price b{font-size:12cqw;letter-spacing:-.03em;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.xc.photo .in{top:62%;padding:4.5cqw 6cqw 5cqw}
.xc.photo .ttl,.xc.photo .ttl.s,.xc.photo .ttl.xs{font-size:9.6cqw;line-height:1.2}
.xc.photo .by{margin-top:auto}
.xc.photo .ttl{margin-top:0}
.xc.photo .tag{position:absolute;left:5cqw;top:6cqw}
/* 清单：大标题 + 三行预览 */
.xc.list .ttl{margin-top:5cqw}
.xc.list .items{margin-top:auto;display:flex;flex-direction:column;gap:2.6cqw}
.xc.list .it{display:flex;align-items:center;gap:2.6cqw;font-size:6.4cqw;font-weight:600;white-space:nowrap;overflow:hidden}
.xc.list .it b{width:7.4cqw;height:7.4cqw;border-radius:50%;background:var(--xtag);color:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-size:4.6cqw}
.xc.list .more{font-size:4.8cqw;opacity:.6;margin-top:1cqw}
.xc.list .stamp{width:22cqw;height:22cqw;font-size:8cqw}
/* 攻略 / 新手：深色海报 */
.xc.poster mark{background:var(--xmark);color:#1d1a16;padding:0 1.4cqw;border-radius:1cqw}
.xc.poster .ttl{font-size:14.5cqw;line-height:1.22}
.xc.poster .stamp{font-size:6cqw;width:26cqw;height:26cqw}
/* 避坑：警示条 */
.xc.warn .band{position:absolute;left:-2cqw;right:-2cqw;top:0;height:11cqw;background:repeating-linear-gradient(-45deg,#ffd400 0 4.5cqw,#1d1a16 4.5cqw 9cqw)}
.xc.warn .in{padding-top:19cqw}
.xc.warn .stamp{top:17cqw}
.xc.warn .ttl div:first-child{color:var(--xstamp);font-size:1.22em}
/* 卡券：日历 */
.xc.calendar .band{position:absolute;left:0;right:0;top:0;height:30%;background:var(--xstamp);color:#fff;display:flex;align-items:flex-end;padding:0 7cqw 4cqw;font-weight:800;font-size:17cqw;letter-spacing:-.03em;line-height:1}
.xc.calendar .band small{font-size:5cqw;font-weight:600;margin:0 0 2cqw 2cqw;opacity:.9}
.xc.calendar .days{position:absolute;left:7cqw;right:7cqw;top:34%;display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqw}
.xc.calendar .days i{aspect-ratio:1;border-radius:1.4cqw;background:rgba(15,43,82,.08);font-style:normal;font-size:3.8cqw;display:flex;align-items:center;justify-content:center;font-weight:600;color:rgba(15,43,82,.55)}
.xc.calendar .days i.h{background:var(--xstamp);color:#fff}
.xc.calendar .ttl{font-size:10cqw}

/* 官网 yangmaodui.com 的样式：颜色、字号、间距、圆角全部取 tokens.css（与 App 同一套 design token，深浅色跟随系统）；
   桌面宽度、断点、首屏大字是 tokens 里 web 组的 --web-*。@media 里用不了变量，768px 与 tokens.json 的 web.breakpoint 一致（测试核对）。
   随页面内联下发（首屏不多一次请求），改这里要重新部署。 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--web-header) + var(--space-s12))}
body{margin:0;background:var(--bg);color:var(--txt);
  font:var(--size-s16)/var(--lineHeight-body) -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--radius-r4)}
.wrap{width:100%;max-width:var(--web-wide);margin:0 auto;padding:0 var(--space-page)}
.narrow{max-width:calc(var(--web-content) + 2 * var(--space-page))}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-s12);top:var(--space-s12);z-index:10;background:var(--surf);padding:var(--space-s8) var(--space-s12)}

/* 顶栏 */
.top{position:sticky;top:0;z-index:5;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--row)}
.top .wrap{height:var(--web-header);display:flex;align-items:center;gap:var(--space-s16)}
.brand{display:flex;align-items:center;gap:var(--space-s8);color:var(--txt);font-weight:var(--weight-medium);font-size:var(--size-s18);flex:none}
.brand:hover{text-decoration:none}
.mark{width:30px;height:28px;background:var(--gold);-webkit-mask:url(/logo-mark.svg) center/contain no-repeat;mask:url(/logo-mark.svg) center/contain no-repeat}
.nav{display:flex;gap:var(--space-s4);margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--mut);font-size:var(--size-s15);padding:var(--space-s6) var(--space-s10);border-radius:var(--radius-r8);white-space:nowrap}
.nav a:hover{text-decoration:none;color:var(--txt);background:var(--accHover)}
.nav a[aria-current]{color:var(--txt);font-weight:var(--weight-medium)}
.nav .cta{display:none}
.nav a.cta,.nav a.cta:hover{color:var(--onAcc);background:var(--accFill);margin-left:var(--space-s6)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-s8);min-height:48px;padding:0 var(--space-s22);border-radius:var(--radius-r12);
  background:var(--accFill);color:var(--onAcc);font-size:var(--size-s16);font-weight:var(--weight-medium);border:0;cursor:pointer;font-family:inherit}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn.small{min-height:36px;padding:0 var(--space-s14);font-size:var(--size-s14);border-radius:var(--radius-r10)}

/* 首屏 */
.hero{padding:var(--space-s22) 0 var(--space-s16)}
.hero .wrap{display:grid;gap:var(--space-s22);align-items:center}
.eyebrow{color:var(--gold);font-size:var(--size-s13);letter-spacing:var(--tracking-label);font-weight:var(--weight-medium)}
.hero h1{font-size:var(--web-heroTitle);line-height:var(--lineHeight-tight);letter-spacing:-.02em;margin-top:var(--space-s10);font-weight:700}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lead{color:var(--lt);font-size:var(--size-s18);margin-top:var(--space-s14);max-width:34em}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--space-s12);margin-top:var(--space-s22);align-items:center}
.hero .note{color:var(--dim);font-size:var(--size-s13)}
.qr{display:none;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-r14);padding:var(--space-s14);text-align:center;width:max-content}
.qr img{width:150px;height:150px;border-radius:var(--radius-r8);background:#fff}
.qr span{display:block;color:var(--mut);font-size:var(--size-s13);margin-top:var(--space-s8)}

/* 段落区块 */
.sec{padding:var(--space-s22) 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-s12);margin-bottom:var(--space-s16)}
.sec-h h2{font-size:var(--size-s22);font-weight:700;letter-spacing:-.01em}
.sec-h a{font-size:var(--size-s14);white-space:nowrap}

/* 三步 / 平台 */
.steps3{display:grid;gap:var(--space-s12);counter-reset:s;padding:0}
.steps3 li{list-style:none;background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r14);padding:var(--space-s16) var(--space-s18);counter-increment:s;display:flex;gap:var(--space-s14);align-items:flex-start}
.steps3 li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--a9);color:var(--a3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--size-s14)}
.steps3 b{display:block;font-size:var(--size-s16)}
.steps3 span{color:var(--mut);font-size:var(--size-s14)}
.plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-s10);padding:0}
.plats li{list-style:none;background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r12);padding:var(--space-s12) var(--space-s14)}
.plats b{display:block;font-size:var(--size-s15)}
.plats span{color:var(--mut);font-size:var(--size-s13)}
.fine{color:var(--dim);font-size:var(--size-s13);margin-top:var(--space-s10)}

/* 卡片网格：羊毛帖、攻略 */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s12)}
.card{display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r14);overflow:hidden;color:var(--txt)}
.card:hover{text-decoration:none;border-color:var(--a7)}
.card .xc{border-bottom:1px solid var(--row)}
.card .meta{padding:var(--space-s10) var(--space-s12) var(--space-s12);display:flex;flex-direction:column;gap:var(--space-s4);flex:1}
.card .t{font-size:var(--size-s14);line-height:var(--lineHeight-card);font-weight:var(--weight-medium);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .s{color:var(--dim);font-size:var(--size-s12);display:flex;gap:var(--space-s6);align-items:center;margin-top:auto;white-space:nowrap;overflow:hidden}
.card .ended{color:var(--warn)}
.guides{display:grid;gap:var(--space-s12);grid-template-columns:1fr}
.guide{display:block;background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r14);padding:var(--space-s16) var(--space-s18);color:var(--txt)}
.guide:hover{text-decoration:none;border-color:var(--a7)}
.guide b{display:block;font-size:var(--size-s16);line-height:var(--lineHeight-title)}
.guide span{color:var(--mut);font-size:var(--size-s14);margin-top:var(--space-s6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.guide small{display:block;color:var(--dim);font-size:var(--size-s12);margin-top:var(--space-s8)}

/* 标签条 */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-s8);margin-bottom:var(--space-s16)}
.chip{display:inline-flex;align-items:center;gap:var(--space-s4);padding:var(--space-s4) var(--space-s12);border-radius:999px;background:var(--surf);border:1px solid var(--row);color:var(--lt);font-size:var(--size-s13)}
.chip:hover{text-decoration:none;border-color:var(--a7)}
.chip[aria-current]{background:var(--a9);border-color:var(--a8);color:var(--a3)}

/* 面包屑与页头 */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-s6);color:var(--dim);font-size:var(--size-s13);padding:var(--space-s16) 0 var(--space-s8);margin:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:var(--space-s6);color:var(--line)}
.crumbs a{color:var(--mut)}
.phead h1{font-size:var(--web-pageTitle);line-height:var(--lineHeight-title);letter-spacing:-.01em;font-weight:700}
.phead .sub{color:var(--mut);font-size:var(--size-s14);margin-top:var(--space-s8);display:flex;flex-wrap:wrap;gap:var(--space-s4) var(--space-s12)}

/* 正文 */
.prose{padding:var(--space-s16) 0 var(--space-s22)}
.prose>*+*{margin-top:var(--space-s14)}
.prose p{color:var(--lt)}
.prose strong{color:var(--txt);font-weight:var(--weight-medium)}
.prose h2{font-size:var(--size-s22);line-height:var(--lineHeight-title);margin-top:var(--space-s22) !important;padding-top:var(--space-s6)}
.prose h3{font-size:var(--size-s18);line-height:var(--lineHeight-title);margin-top:var(--space-s18) !important}
.prose ul,.prose ol{padding-left:1.4em;color:var(--lt)}
.prose li+li{margin-top:var(--space-s6)}
.prose ol.steps{list-style:none;padding:0;counter-reset:st}
.prose ol.steps li{counter-increment:st;position:relative;padding:var(--space-s10) var(--space-s14) var(--space-s10) 52px;background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r12);color:var(--txt)}
.prose ol.steps li::before{content:counter(st);position:absolute;left:var(--space-s14);top:var(--space-s10);width:26px;height:26px;border-radius:50%;background:var(--accFill);color:var(--onAcc);
  font-size:var(--size-s13);font-weight:700;display:flex;align-items:center;justify-content:center}
.prose ol.steps li+li{margin-top:var(--space-s8)}
.box{border-radius:var(--radius-r12);padding:var(--space-s12) var(--space-s16);font-size:var(--size-s15)}
.box.tip{background:var(--a9);color:var(--txt)}
.box.warn{background:color-mix(in srgb,var(--warn) 10%,var(--surf));color:var(--txt);border-left:3px solid var(--warn)}
.box b{font-weight:var(--weight-medium)}
.tbl{overflow-x:auto;border:1px solid var(--row);border-radius:var(--radius-r12);background:var(--surf)}
.tbl table{border-collapse:collapse;width:100%;font-size:var(--size-s14)}
.tbl th,.tbl td{padding:var(--space-s10) var(--space-s12);text-align:left;vertical-align:top;border-bottom:1px solid var(--row)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{color:var(--mut);font-weight:var(--weight-medium);font-size:var(--size-s13);background:var(--surf2);white-space:nowrap}
.faq details{background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r12);padding:0 var(--space-s16)}
.faq details+details{margin-top:var(--space-s8)}
.faq summary{cursor:pointer;padding:var(--space-s14) 0;font-weight:var(--weight-medium);list-style:none;display:flex;justify-content:space-between;gap:var(--space-s12)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:var(--space-s14)}
.prose figure img{border-radius:var(--radius-r12)}
.prose figcaption{color:var(--dim);font-size:var(--size-s13);margin-top:var(--space-s6)}
.updated{color:var(--dim);font-size:var(--size-s13)}

/* 下载卡 */
.dl{display:flex;align-items:center;gap:var(--space-s16);background:var(--surf);border:1px solid var(--a8);border-radius:var(--radius-r14);padding:var(--space-s16) var(--space-s18)}
.dl .icon{width:56px;height:56px;border-radius:13px;flex:none}
.dl .txt{flex:1;min-width:0}
.dl .txt b{display:block;font-size:var(--size-s16)}
.dl .txt span{display:block;color:var(--mut);font-size:var(--size-s14)}
.dl .qr{padding:var(--space-s8);border-radius:var(--radius-r10)}
.dl .qr img{width:96px;height:96px}
.dl .qr span{font-size:var(--size-s12);margin-top:var(--space-s4)}

/* 羊毛帖详情 */
.post{display:grid;gap:var(--space-s18);padding-bottom:var(--space-s22)}
.post .cover{max-width:360px;width:100%;border-radius:var(--radius-r14);overflow:hidden;border:1px solid var(--row)}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-s8)}
.fact{background:var(--surf);border:1px solid var(--row);border-radius:var(--radius-r10);padding:var(--space-s6) var(--space-s12);font-size:var(--size-s13);color:var(--lt)}
.fact b{color:var(--gold);font-weight:var(--weight-medium)}
.banner{background:color-mix(in srgb,var(--warn) 10%,var(--surf));border-radius:var(--radius-r12);padding:var(--space-s12) var(--space-s16);color:var(--txt);font-size:var(--size-s15)}
.code{background:var(--surf);border:1px dashed var(--a7);border-radius:var(--radius-r14);padding:var(--space-s16) var(--space-s18);display:grid;gap:var(--space-s12)}
.code .row{display:flex;align-items:center;gap:var(--space-s12);flex-wrap:wrap}
.code .k{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:var(--size-s22);letter-spacing:var(--tracking-code);color:var(--txt);font-weight:700}
.code p{color:var(--mut);font-size:var(--size-s14)}
.code .rebate{color:var(--gold);font-weight:var(--weight-medium)}
.author{display:flex;align-items:center;gap:var(--space-s12)}
.author img{width:44px;height:44px;border-radius:50%;background:var(--surf2)}
.author span{color:var(--mut);font-size:var(--size-s14)}
.pager{display:flex;justify-content:center;gap:var(--space-s12);padding:var(--space-s22) 0;font-size:var(--size-s15)}
.pager span{color:var(--dim)}
.empty{color:var(--mut);padding:var(--space-s22) 0;text-align:center}
.toast{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--txt);color:var(--bg);padding:var(--space-s10) var(--space-s16);border-radius:var(--radius-r10);font-size:var(--size-s14);z-index:20;max-width:calc(100% - 32px);text-align:center}
.wxhint{display:none;background:var(--a9);color:var(--a3);font-size:var(--size-s14);padding:var(--space-s10) var(--space-page);text-align:center}
.is-wechat .wxhint{display:block}

/* 白菜帖封面：商品图叠在 .ph 上 */
.xc.photo .pic img{position:absolute;inset:0}

/* 页脚 */
.foot{border-top:1px solid var(--row);margin-top:var(--space-s22);padding:var(--space-s22) 0 calc(var(--space-s22) + env(safe-area-inset-bottom));color:var(--dim);font-size:var(--size-s13)}
.foot .links{display:flex;flex-wrap:wrap;gap:var(--space-s6) var(--space-s16);margin-bottom:var(--space-s12)}
.foot .links a{color:var(--mut)}
.foot p+p{margin-top:var(--space-s4)}
.foot .beian{display:inline-flex;align-items:center;gap:var(--space-s4);color:var(--dim)}
.foot .beian img{width:14px;height:14px;display:inline-block}
.foot a.beian:hover{color:var(--mut)}

/* 宽屏（= tokens web.breakpoint） */
@media (min-width:768px){
  .wrap{padding:0 var(--web-gutter)}
  .narrow{max-width:calc(var(--web-content) + 2 * var(--web-gutter))}
  .hero{padding:56px 0 var(--space-s22)}
  .hero .wrap{grid-template-columns:1fr auto}
  .hero h1{font-size:var(--web-heroTitleWide)}
  .qr{display:block}
  .steps3{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(var(--web-cardMin),1fr))}
  .grid.small{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .guides{grid-template-columns:repeat(2,1fr)}
  .post{grid-template-columns:320px 1fr;align-items:start}
  .post .cover{position:sticky;top:calc(var(--web-header) + var(--space-s16))}
  .nav .cta{display:inline-flex}
}
@media (max-width:767px){
  .nav a:not(.cta){padding:var(--space-s6) var(--space-s8);font-size:var(--size-s14)}
  .top .wrap{gap:var(--space-s8)}
  .dl .qr{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .card,.guide,.chip{transition:border-color .15s}
}