:root { --ink:#171717; --muted:#5c5c5c; --line:#ececec; --bg:#fff; --max:980px; --accent:#2f6fed; --soft:#eef3ff; --shadow:0 1px 2px rgba(23,23,23,.04), 0 10px 28px rgba(23,23,23,.05); }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.7 "PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; }
.wrap { width:min(100% - 2rem, var(--max)); margin:0 auto; }
header.bar { border-bottom:1px solid var(--line); position:relative; background:#fff; }
.bar .wrap { display:flex; align-items:center; min-height:68px; gap:1.2rem; }
.logo { font-weight:700; font-size:1.15rem; line-height:1; text-decoration:none; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.55rem; }
.mark { width:32px; height:32px; display:block; flex:none; }
.mark rect { fill:var(--accent); }
.mark path { stroke-width:2; }
svg.ico { width:20px; height:20px; flex:0 0 20px; display:block; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hd { display:flex; align-items:center; gap:.45rem; margin:0 0 .35rem; }
.hd h2 { margin:0; }
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:1.4rem; align-items:center; }
.pic { width:100%; height:auto; max-width:360px; display:block; justify-self:end; background:var(--soft); border:1px solid #e3eaf8; border-radius:16px; box-shadow:var(--shadow); }
.links { display:flex; gap:.15rem; margin-left:auto; list-style:none; padding:0; align-items:center; }
.links a { text-decoration:none; color:var(--muted); font-size:.94rem; padding:.32rem .7rem; border-radius:999px; }
.links a:hover { color:var(--ink); background:#f6f7f9; }
.links a[aria-current="page"] { color:var(--accent); background:var(--soft); font-weight:600; }
.menu { display:none; margin-left:auto; border:1px solid var(--line); background:#fff; width:40px; height:40px; border-radius:8px; }
.menu span { display:block; height:1px; margin:6px 9px; background:#171717; }
h1 { font-size:1.8rem; line-height:1.3; margin:0; }
.lead { color:var(--muted); margin:.4rem 0 0; max-width:38rem; }
.page { padding:2rem 0 3rem; }
.btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; border:0; border-radius:8px; padding:.55rem .95rem; cursor:pointer; }
.btn.ghost { background:#fff; color:var(--accent); border:1px solid #d5e2fb; }
.btn.ghost:hover { background:var(--soft); }
.row { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }
.sec { margin-top:2rem; }
.sec h2 { margin:0 0 .7rem; font-size:1.15rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card, .item, .shelf { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.card, .item { padding:1.15rem 1.2rem; }
a.card { text-decoration:none; }
a.card:hover { border-color:#c9d8f8; }
.hd .ico { color:var(--accent); }
main a:not(.card):not(.btn) { color:var(--accent); }
.card h2, .item h2 { margin:0 0 .3rem; font-size:1.05rem; }
.hd h2 { margin:0; }
.muted, .tip { color:var(--muted); margin:.2rem 0 0; }
.card ul, .plain { margin:.4rem 0 0; padding-left:1.1rem; }
.steps { margin:1.2rem 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.steps li { border-top:2px solid var(--accent); padding-top:.55rem; }
.steps .ico { margin-bottom:.35rem; }
.steps b { display:block; }
.shelf { margin-top:1.6rem; padding:1rem 1.1rem 1.05rem; display:block; background:#fff; }
.filters { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:0; max-width:26rem; }
.filters label { display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; color:var(--muted); }
.filters select, .n { border:1px solid #e4e4e4; border-radius:8px; padding:.5rem .65rem; font:inherit; background:#fff; color:var(--ink); width:100%; }
.hint { margin:.85rem 0 0; padding-top:.75rem; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem; line-height:1.65; }
#list { display:grid; gap:.8rem; margin-top:1rem; }
.item .top { display:flex; align-items:center; gap:.6rem; }
.item .top .hd { margin:0; }
.tag { margin-left:auto; font-size:.75rem; line-height:1.4; border:1px solid #e4e4e4; border-radius:999px; padding:.12rem .55rem; color:var(--muted); background:#fafafa; white-space:nowrap; }
.tag.on { color:var(--accent); background:var(--soft); border-color:#d5e2fb; }
.item .note { margin:.4rem 0 0; }
.item dl { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin:.85rem 0 0; }
.item dl > div { background:#f7f9fc; border-radius:8px; padding:.5rem .7rem; min-height:3.4rem; }
.item dt { color:var(--muted); font-size:.75rem; }
.item dd { margin:.15rem 0 0; }
.ops { display:grid; grid-template-columns:6.5rem 1fr; gap:.7rem; align-items:end; margin-top:.85rem; padding-top:.8rem; border-top:1px solid var(--line); }
.ops label { display:flex; flex-direction:column; gap:.35rem; color:var(--muted); font-size:.78rem; }
.n { width:100%; }
.acts { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; }
.tip { flex-basis:100%; margin:0; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:.92rem; padding:1rem 0 1.6rem; }
footer p { margin:.2rem 0; }
@media (max-width:760px) {
  .menu { display:block; }
  .links { display:none; position:absolute; left:0; right:0; top:68px; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; padding:.5rem 1rem 1rem; margin:0; }
  .links.open { display:flex; }
  .bar { position:sticky; top:0; background:#fff; z-index:2; }
  .grid2, .grid3, .steps, .hero { grid-template-columns:1fr; }
  .filters { max-width:none; }
  .item dl { grid-template-columns:1fr 1fr; }
  .ops { grid-template-columns:1fr; }
  .acts { justify-content:stretch; }
  .acts .btn { flex:1; text-align:center; }
  .pic { justify-self:start; max-width:100%; }
}