:root{
  --bg:#f1f6ec;
  --card:#ffffff;
  --ink:#16311f;
  --soft:#54685a;
  --green:#3f8f46;
  --green-d:#2a6b33;
  --clay:#c0603a;
  --slate:#46617a;
  --edge:#d6e2d1;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --num:"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);
  background-size:46px 46px;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.8;
  -webkit-text-size-adjust:100%;
  overflow-wrap:anywhere;
}
.shell{max-width:1000px;margin:0 auto;padding:0 18px}

.hd{background:#ffffffee;border-bottom:2px solid var(--green);backdrop-filter:saturate(1.2)}
.hd-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:58px;padding:8px 18px}
.mark{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.04em}
.mark svg{width:28px;height:28px}
.hd nav{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.hd nav a{font-size:.88rem;text-decoration:none;color:var(--green-d);background:#eaf3e6;border-radius:6px;padding:4px 11px}
.hd nav a:hover,.hd nav a:focus-visible{background:var(--green);color:#fff}

.intro{padding:40px 0 26px}
h1{margin:0 0 14px;display:flex;flex-direction:column;gap:5px;line-height:1.22}
h1 .kw{font-size:clamp(1.7rem,8vw,3.2rem);font-weight:800;color:var(--green-d)}
h1 .sub{font-size:clamp(.88rem,3vw,1.08rem);font-weight:500;color:var(--soft)}
.lede{margin:0 0 18px;max-width:60ch;color:var(--soft)}
.honesty{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:13px 16px;box-shadow:0 1px 0 #dde8d8}
.honesty p{margin:0 0 6px;font-size:.89rem;color:var(--soft)}
.honesty p:last-child{margin-bottom:0}
.honesty strong{color:var(--ink)}

.block{padding:30px 0}
.block.tint{background:#e8f1e3cc;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
h2{margin:0 0 8px;font-size:clamp(1.18rem,4.3vw,1.6rem);color:var(--green-d)}
.hint{margin:0 0 18px;font-size:.9rem;color:var(--soft);max-width:66ch}

.panel{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:16px}
.inputs{display:grid;gap:12px}
@media(min-width:640px){.inputs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.inputs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.cell label{font-size:.8rem;color:var(--soft);letter-spacing:.04em}
select,input[type=number]{
  width:100%;font:inherit;font-size:.93rem;padding:9px 10px;
  border:1px solid var(--edge);border-radius:8px;background:#fbfdfa;color:var(--ink);
}
select:focus,input:focus,button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.go{
  margin-top:14px;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
  background:var(--green);color:#fff;border:0;border-radius:999px;padding:9px 24px;
}
.go:hover{background:var(--green-d)}

.resline{margin:16px 0 10px;font-size:.88rem;color:var(--soft)}
.results{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:rk}
.rcard{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px 16px;position:relative}
.rcard.top{border-color:var(--green);box-shadow:0 2px 0 var(--green)}
.rcard::before{counter-increment:rk;content:counter(rk);position:absolute;top:14px;right:16px;font:700 1.5rem/1 var(--num);color:#d8e6d4}
.rhead{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding-right:36px}
.rname{font-size:1.1rem;font-weight:700}
.rlat{font-size:.8rem;color:var(--soft)}
.rseason{font-size:.74rem;background:#eaf3e6;color:var(--green-d);border-radius:4px;padding:1px 7px}
.rscore{font-family:var(--num);font-size:.78rem;color:var(--clay)}
.why{list-style:none;margin:9px 0;padding:0;display:grid;gap:3px}
.why li{font-size:.84rem;color:var(--soft);padding-left:13px;position:relative}
.why li::before{content:"✓";position:absolute;left:0;color:var(--green);font-size:.78rem}

.spec{margin:10px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:.85rem}
.spec dt{color:var(--slate);white-space:nowrap}
.spec dd{margin:0;color:var(--ink)}
.cau{margin:10px 0 0;font-size:.82rem;color:var(--clay);border-left:3px solid #eccdbe;padding-left:10px}

.mowbox{display:grid;gap:14px;background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:16px}
@media(min-width:680px){.mowbox{grid-template-columns:220px minmax(0,1fr);align-items:start}}
.mowout{display:grid;gap:8px}
.mrow{display:grid;grid-template-columns:auto auto;gap:2px 12px;align-items:baseline;border-bottom:1px dashed var(--edge);padding-bottom:7px}
.mk{font-size:.82rem;color:var(--soft)}
.mv{font-family:var(--num);font-size:1.15rem;font-weight:700;color:var(--green-d)}
.mn{grid-column:1/-1;font-size:.8rem;color:var(--soft)}

.tips{margin:16px 0 0;padding-left:20px;display:grid;gap:6px}
.tips li{font-size:.86rem;color:var(--soft)}

.lib{display:grid;gap:12px}
@media(min-width:700px){.lib{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lcard{background:var(--card);border:1px solid var(--edge);border-left:5px solid var(--green);border-radius:12px;padding:14px 16px}
.lcard.warm{border-left-color:var(--clay)}
.lcard h3{margin:0;font-size:1.04rem}
.lmeta{margin:2px 0 10px;font-size:.78rem;color:var(--soft)}
.lnotes{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.lnotes li{font-size:.84rem;color:var(--soft)}

.basis{display:grid;gap:14px}
@media(min-width:720px){.basis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.basis h3{margin:0 0 5px;font-size:.98rem;color:var(--slate)}
.basis p{margin:0;font-size:.87rem;color:var(--soft)}

.ft{padding:24px 0 34px;border-top:1px solid var(--edge);background:#ffffffcc}
.ft p{margin:0 0 5px;font-size:.85rem;color:var(--soft)}
.ft .mini{font-size:.8rem;color:#7d8d80}