:root { --bg:#faf8f3; --ink:#1b1a17; --mute:#6b675e; --line:#e4dfd3; --acc:#1f6f43; --err:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#17150f; --ink:#f2eee3; --mute:#a39e90; --line:#2e2b23; --acc:#5ed584; --err:#ff8a80; } }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Georgia, "Times New Roman", serif; }
main { max-width:640px; margin:0 auto; padding:64px 20px; }
h1 { font-size:2.4rem; line-height:1.1; margin:0 0 8px; }
.role { color:var(--mute); font:15px/1.5 system-ui, sans-serif; margin:0 0 32px; }
h2 { font:600 13px/1 system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:40px 0 12px; }
ul { padding-left:1.1em; } li { margin:6px 0; }
a { color:var(--acc); }
footer { border-top:1px solid var(--line); margin-top:48px; padding-top:16px; color:var(--mute); font:14px system-ui, sans-serif; }
header.site { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font:15px/1.4 system-ui, sans-serif; margin:0 0 40px; }
header.site a { color:var(--ink); text-decoration:none; font-weight:600; }
header.site nav a { color:var(--acc); font-weight:400; }
.dek { font-style:italic; color:var(--mute); font-size:1.1rem; margin:0 0 20px; }
.byline, .meta { color:var(--mute); font:14px/1.5 system-ui, sans-serif; margin:0 0 4px; }
article h1 { font-size:2.1rem; line-height:1.15; }
article .body { margin-top:32px; }
article .body h2 { font:700 1.35rem/1.3 Georgia, "Times New Roman", serif; letter-spacing:0; text-transform:none; color:var(--ink); margin:40px 0 12px; }
article .sources { border-top:1px solid var(--line); margin-top:40px; font-size:14px; color:var(--mute); }
article .sources h2 { font:600 13px/1 system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
article .sources li { overflow-wrap:anywhere; }
.posts { list-style:none; padding:0; }
.posts li { margin:0 0 20px; }
.posts a { font-size:1.15rem; }
.posts .meta { display:block; margin-top:2px; }
.intro { display:flex; align-items:center; gap:20px; margin:0 0 32px; }
.intro h1 { margin:0 0 6px; }
.intro .role { margin:0; }
.headshot { box-sizing:border-box; width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line); }
@media (max-width:420px) { .intro { gap:14px; } .intro h1 { font-size:2rem; } .headshot { width:80px; height:80px; } }
.guide .answer { font-size:1.05rem; }
.get { border:1px solid var(--line); border-radius:6px; padding:12px 16px; margin:20px 0; }
.get h2 { margin-top:4px; }
.get-row { margin:10px 0; }
.get-line { display:flex; gap:8px; flex-wrap:wrap; }
.get-line input { flex:1 1 200px; min-width:0; }
.get-status { font:14px/1.5 system-ui,sans-serif; min-height:1.5em; }
.get-status.bad { color:#a3341f; }
.guide h3, .tool h3 { font:700 1.05rem/1.3 Georgia, "Times New Roman", serif; margin:28px 0 8px; }
.guide .toc { border:1px solid var(--line); padding:12px 16px; margin:24px 0; font:15px/1.5 system-ui, sans-serif; }
.guide .toc-h { margin:0 0 4px; font-weight:600; }
.guide .toc ol { margin:0; padding-left:1.3em; }
a.cite { font:12px system-ui, sans-serif; text-decoration:none; vertical-align:super; margin-left:1px; }
.table-wrap { overflow-x:auto; margin:12px 0; }
table.aliases { border-collapse:collapse; width:100%; font:15px/1.45 system-ui, sans-serif; }
table.aliases caption { text-align:left; color:var(--mute); font-size:14px; padding-bottom:6px; }
table.aliases th, table.aliases td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
table.aliases thead th { color:var(--mute); font-weight:600; }
table.aliases tbody th { font-weight:600; min-width:9em; }
.guide .sources ol li { overflow-wrap:anywhere; margin:6px 0; }
.tool form, .tool .note, .tool .hint, .tool .summary, .tool ul, .tool #sugar-count { font-family:system-ui, sans-serif; }
.tool .note { border-left:3px solid var(--acc); padding:6px 12px; font-size:15px; }
.tool label { display:block; font:600 15px/1.4 system-ui, sans-serif; margin:14px 0 4px; }
.tool .unit label { display:inline-block; font-weight:400; margin:6px 16px 0 0; }
.tool .hint { color:var(--mute); font-size:14px; margin:0 0 6px; }
.tool textarea, .tool input:not([type=radio]) { box-sizing:border-box; width:100%; font:16px/1.4 system-ui, sans-serif; padding:8px 10px; border:1px solid var(--mute); border-radius:4px; background:var(--bg); color:var(--ink); }
.tool fieldset { border:1px solid var(--line); margin:18px 0 0; padding:4px 14px 14px; }
.tool legend { font:600 15px system-ui, sans-serif; padding:0 4px; }
.tool .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 16px; }
.tool button { font:600 15px system-ui, sans-serif; padding:10px 18px; border-radius:4px; border:1px solid var(--acc); background:var(--acc); color:var(--bg); cursor:pointer; }
.tool button.secondary, .tool button.sample { background:transparent; color:var(--acc); }
.tool button.sample { font-weight:400; padding:6px 10px; margin:4px 6px 4px 0; }
.tool button:focus-visible, .tool textarea:focus-visible, .tool input:focus-visible { outline:3px solid var(--acc); outline-offset:2px; }
.tool .samples { margin:8px 0 4px; font:14px system-ui, sans-serif; }
.tool .muted { color:var(--mute); margin-right:6px; }
.tool .errors { color:var(--err); font:15px system-ui, sans-serif; }
.tool .summary { font-size:1.1rem; font-weight:600; }
.tool .highlight { white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); padding:10px 12px; font:15px/1.6 system-ui, sans-serif; }
.tool mark { background:#ffe08a; color:#1b1a17; padding:0 2px; border-radius:2px; }
.tool mark.starch, .tool mark.polyol { background:#d9e7ff; }
.tool h2:focus { outline:none; }