:root{--bg:#faf7f2;--fg:#24211d;--muted:#6f675c;--line:#e4ddd2;--accent:#a4471f;--card:#fff;
--pill:#efe8dc;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#1c1a17;--fg:#ece6dc;--muted:#a69d90;--line:#38332c;
--accent:#e58a5c;--card:#25221e;--pill:#352f28}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:1.0625rem/1.6 system-ui,-apple-system,
"Segoe UI",Roboto,sans-serif;padding:0 1.1rem calc(2rem + env(safe-area-inset-bottom))}
main,.bar{max-width:40rem;margin:0 auto}
.bar{padding:.9rem 0 .2rem}
a{color:var(--accent)}
.bar a{text-decoration:none;font-size:.95rem}
h1{font-size:1.85rem;line-height:1.2;margin:.8rem 0 1rem;overflow-wrap:anywhere}
h2{font-size:1.2rem;margin:1.8rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
h3{font-size:1.05rem;margin:1.3rem 0 .4rem}
article{overflow-wrap:anywhere}
ul,ol{padding-left:1.4rem}
li{margin:.3rem 0}
li::marker{color:var(--muted)}
ul.ingredients{list-style:none;padding:0;margin:0;background:var(--card);border:1px solid var(--line);
border-radius:12px}
ul.ingredients>li{margin:0;padding:.6rem .9rem;border-top:1px solid var(--line)}
ul.ingredients>li:first-child{border-top:0}
li.opt{color:var(--muted)}
.opt-tag{display:inline-block;font-size:.72rem;line-height:1.5;padding:0 .45rem;margin-right:.25rem;
border-radius:999px;background:var(--pill);color:var(--muted);text-transform:uppercase;
letter-spacing:.04em;vertical-align:.1em}
ol>li{margin:.6rem 0;padding-left:.2rem}
blockquote{margin:1rem 0;padding:.2rem 1rem;border-left:3px solid var(--line);color:var(--muted)}
table{border-collapse:collapse;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:.35rem .6rem;text-align:left}
code{font-size:.9em}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.2rem}
.actions[hidden],[hidden]{display:none}
button{font:inherit;font-size:.95rem;padding:.6rem 1.1rem;min-height:44px;border-radius:999px;
border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
button[data-share]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){button[data-share]{color:#1c1a17}}
input[type=search]{width:100%;font:inherit;font-size:1rem;padding:.7rem 1rem;min-height:44px;
border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);margin:0 0 1rem}
ul.list{list-style:none;padding:0;margin:0;background:var(--card);border:1px solid var(--line);
border-radius:12px}
ul.list li{margin:0;border-top:1px solid var(--line)}
ul.list li:first-child{border-top:0}
ul.list a{display:block;padding:.8rem 1rem;text-decoration:none;color:var(--fg)}
ul.list a:active{background:var(--pill)}
.count,.empty{color:var(--muted);font-size:.9rem}
.toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom));
transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:.6rem 1.1rem;
border-radius:999px;font-size:.95rem;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.offscreen{position:fixed;top:-100px;left:0;opacity:0}
@media print{.bar,.actions{display:none}body{background:#fff;color:#000}}