:root{--bg:#f5f6f4;--card:#fff;--ink:#16181a;--mut:#6b7280;--line:#e6e8e4;--accent:#e2574c;--radius:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 "Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:24px 20px 64px}
header.top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:26px;margin:0;letter-spacing:-.02em}
.count{color:var(--mut);font-size:14px}
.controls{position:sticky;top:0;background:var(--bg);padding:12px 0;z-index:5}
input[type=search]{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:15px;outline:none}
input[type=search]:focus{border-color:var(--accent)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{padding:6px 13px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:13px;cursor:pointer;user-select:none}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;margin-top:18px}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#e9ebe7}
.card .body{padding:11px 13px 13px}
.card h3{font-size:14.5px;margin:0 0 6px;line-height:1.35}
.card .meta{color:var(--mut);font-size:12.5px}
.empty{color:var(--mut);padding:40px 0}
.hero{width:100%;max-height:430px;object-fit:cover;border-radius:var(--radius);background:#e9ebe7}
.back{display:inline-block;color:var(--mut);font-size:14px;margin-bottom:14px}
h2.title{font-size:30px;margin:18px 0 8px;letter-spacing:-.02em}
.desc{color:#3f4448;font-size:15.5px;max-width:70ch}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13.5px}
.fact b{font-size:15px}
.tags{margin:14px 0 6px;display:flex;gap:7px;flex-wrap:wrap}
.tag{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--card)}
.cols{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:34px;margin-top:26px}
@media(max-width:760px){.cols{grid-template-columns:1fr;gap:24px}}
h4{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);margin:0 0 10px}
.sect{font-weight:600;margin:14px 0 6px;font-size:14px}
ul.ing{list-style:none;padding:0;margin:0}
ul.ing li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;font-size:14.5px}
ul.ing .q{font-variant-numeric:tabular-nums;font-weight:600;min-width:62px}
ol.steps{padding-left:0;list-style:none;counter-reset:s;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 16px 40px;font-size:15.5px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.scaler{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px;color:var(--mut)}
.scaler button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:15px;line-height:1}
.scaler span{font-weight:600;color:var(--ink);min-width:18px;text-align:center}
footer{margin-top:46px;color:var(--mut);font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}