:root{--green:#214c3d;--muted:#71766d;--line:#e2e5db;--cream:#f8f9f3}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:#24362d;font:16px/1.6 system-ui,sans-serif}header,footer{max-width:1250px;margin:auto;padding:28px 36px;display:flex;justify-content:space-between;align-items:center}a{color:var(--green);text-decoration:none}.brand{font-size:25px;font-weight:700;letter-spacing:-1px}.brand span{font-size:9px;letter-spacing:1.5px;display:block;margin-left:29px;color:var(--muted)}header>a:last-child{font-size:13px}main{max-width:1160px;margin:auto;padding:0 28px}.intro{text-align:center;margin:45px 0 38px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--green)}h1{font:58px/1.08 Georgia,serif;letter-spacing:-2px;margin:16px 0}h1 em{font-weight:400;color:#64816b}.intro>p:last-child{color:var(--muted);font-size:15px}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}.search-panel,aside{background:white;border:1px solid var(--line);border-radius:19px;padding:30px}.search-panel>label{font-size:18px;font-weight:600}.searchbox{display:flex;align-items:center;border:1.5px solid #8caa91;border-radius:10px;margin-top:15px;padding:9px 15px;gap:10px;box-shadow:0 4px 15px #214c3d08}.searchbox span{font-size:28px}input[type=search]{font:inherit;border:0;outline:none;width:100%;min-width:0;background:transparent}kbd{border:1px solid var(--line);padding:0 7px;color:#91988b;border-radius:4px}.examples{font-size:12px;margin:13px 0;color:var(--muted)}button{cursor:pointer;font:inherit}.examples button{background:#f2f5ec;border:0;border-radius:20px;margin-left:7px;padding:4px 12px;color:var(--green)}.notice{font-size:11px;color:#7b7051;background:#faf7ed;padding:11px 13px;border-radius:7px;line-height:1.6}#empty{text-align:center;padding:30px 0 12px}.seed{font-size:46px;color:#91a783}h2{font-size:20px;letter-spacing:-.5px;margin:8px 0}#empty p,.fine{font-size:12px;color:var(--muted)}.steps{display:flex;justify-content:center;gap:30px;font-size:10px;color:#7c8777;margin-top:30px}.meal-head{display:flex;justify-content:space-between;align-items:center}.meal-head .eyebrow{margin:0}#count{font:12px system-ui;background:#edf2e8;border-radius:20px;padding:4px 8px;vertical-align:middle}.text-button{border:0;background:none;color:var(--muted);font-size:12px}.meal-empty{padding:35px 10px;text-align:center;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}#totals{background:#f2f5ed;border-radius:10px;padding:15px;margin-top:20px}#totals h3{font-size:13px;margin:0 0 10px}.macro{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.macro span{font-size:9px;color:var(--muted);display:block}.macro strong{font:23px Georgia,serif}.save{font-size:11px;display:flex;gap:7px;align-items:center}.ad-space{text-align:center;font-size:9px;letter-spacing:1.5px;color:#929989;border:1px dashed #dce1d3;border-radius:8px;padding:28px;margin:34px 0}#about{max-width:720px;margin:45px auto;font-size:13px;color:var(--muted)}#about h2{font:28px Georgia;color:var(--green)}details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;color:var(--green)}footer{border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.result{display:block;text-align:left;width:100%;border:1px solid var(--line);background:white;border-radius:8px;padding:12px 15px;margin:8px 0;color:var(--green)}.result:hover{background:#f2f5ed}.result small{display:block;color:var(--muted)}.primary{background:var(--green);color:white;border:0;border-radius:8px;padding:11px 18px;margin-top:12px}.ingredient{border-bottom:1px solid var(--line);padding:15px 0;font-size:13px}.ingredient small{display:block;color:var(--muted)}.quantity{display:flex;align-items:center;gap:8px;margin-top:8px}.quantity input{width:90px;padding:7px;border:1px solid var(--line);border-radius:5px;font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ac8039;outline-offset:4px}#detail{font-size:13px}#detail p{color:var(--muted)}@media(max-width:740px){header,footer{padding:20px}.intro{margin:25px 0}h1{font-size:45px}.workspace{grid-template-columns:1fr}main{padding:0 16px}.search-panel,aside{padding:23px}.steps{gap:22px}footer{gap:20px}.ad-space{margin:25px 0}}
.macro{grid-template-columns:repeat(5,minmax(0,1fr))}.macro strong{font-size:19px}.macro small{font-size:10px;display:block;color:#875c28}.error{font-size:12px;color:#9c382c}.result,.primary,.text-button,.examples button,summary{min-height:44px}.searchbox{min-height:54px}#results{max-height:440px;overflow:auto}#detail{padding:10px 0}#detail .macro{margin:18px 0}.row-nutrition{line-height:1.8;overflow-wrap:anywhere}a{text-underline-offset:3px}#detail a,#about a{text-decoration:underline}@media(max-width:380px){.search-panel,aside{padding:16px}.macro{gap:3px}.macro strong{font-size:16px}.macro span{font-size:9px}header{gap:12px}.brand{font-size:22px}kbd{display:none}}
.legal-note{max-width:900px;margin:35px auto;padding:24px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.legal-note h2{font-size:17px;color:var(--green)}footer nav{display:flex;flex-wrap:wrap;gap:20px}dialog{max-width:440px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:18px;padding:26px;color:var(--green)}dialog::backdrop{background:#162e2466}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.quantity select{font:inherit;border:1px solid var(--line);border-radius:5px;padding:7px;min-height:44px;background:white;color:var(--green)}.volume-info{background:#f2f5ed;padding:14px;border-radius:10px;margin:18px 0}.volume-info p{font-size:12px}
.brand{letter-spacing:-.8px;font-size:24px}@media(max-width:480px){header{flex-wrap:wrap;gap:10px}.brand{font-size:22px}}
.empty-logo{position:relative;width:150px;height:168px;overflow:hidden;margin:0 auto 14px}.empty-logo img{position:absolute;width:236px;max-width:none;height:auto;left:-60px;top:-9px}

.brand,footer>span{display:inline-flex;align-items:center;gap:8px}.brand-icon{width:36px;height:36px;object-fit:contain;flex:none}

/* Stationary food pattern beneath scrolling content. */
body{isolation:isolate;min-height:100vh}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('/assets/food-pattern.svg') repeat;background-size:720px 600px;opacity:.25}
.legal-note{background:var(--cream);padding:24px;border-radius:16px}.ad-space{background:#f8f9f3e8}footer{background:#f8f9f3e8}
@media(max-width:740px){body::before{background-size:540px 450px;opacity:.22}}
@media(prefers-reduced-motion:reduce){body::before{position:absolute;min-height:100%}}

/* Energetic plum, lilac and rose foreground. */
:root{--green:#633b80;--muted:#75677c;--line:#e8daed;--cream:#fff9fc}
body{color:#392a45}h1{color:#442857}h1 em{color:#ba447f}.eyebrow{color:#88509c}
.search-panel,aside{border-color:#eadbed;box-shadow:0 8px 30px #6b35720a}.search-panel{border-top:3px solid #c69cde}aside{border-top:3px solid #e9a5c6}
.searchbox{border-color:#b38acb;box-shadow:0 4px 16px #7e40900a}.searchbox:focus-within{border-color:#8950aa;box-shadow:0 0 0 3px #f0e1f8}
.examples button{background:#f4e8f8;color:#633b80}.examples button:hover{background:#ead6f2}
#totals{background:linear-gradient(135deg,#f3e9fa,#fce9f2)}#totals strong{color:#663680}#count{background:#f7deec;color:#8b3d68}
.primary{background:#79459a;color:white}.primary:hover{background:#61347e}.result:hover{background:#fbf0f8}.result{border-color:#eadbed}.volume-info{background:#f5eafa}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#b94380}
.steps{color:#946985}.ad-space{background:#fff9fce8;border-color:#e5d5e6;color:#8b758a}footer{background:#fff9fce8}.legal-note{background:var(--cream)}

/* Continuous coloured borders around both main panels. */
.search-panel{border:2px solid #c69cde}aside{border:2px solid #e9a5c6}

/* Supporting pages use the same border thickness as the main panels. */
.legal-note{border:2px solid #c69cde}

input[type=search],.quantity input{min-height:44px}.text-button{min-width:44px}.quantity{flex-wrap:wrap}.searchbox{cursor:text}