:root { color-scheme: dark; --bg:#000; --panel:#0c0e09; --line:#3a3a26; --fg:#ccc; --muted:#8a8a7a; --accent:#809536; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.55 Verdana,Geneva,system-ui,sans-serif; }
main { max-width:1500px; margin:auto; padding:26px 24px; }
h1 { margin:0 0 6px; font:28px/1.3 "Tempus Sans ITC","Trajan Pro","Palatino Linotype",Georgia,serif; color:var(--accent); }
h2 { margin:4px 0 10px; font-size:26px; }
h3 { font-size:16px; margin:22px 0 8px; color:var(--accent); }
p { margin:8px 0; }
a { color:var(--accent); }
.muted,.eyebrow { color:var(--muted); }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.controls,.settings { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.controls { margin-top:24px; }
.controls label:first-child { flex:1 1 280px; }
label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted); }
input,select,button { font:inherit; background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:5px; padding:9px 11px; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.settings { margin:14px 0 20px; padding:15px; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
.settings input[type=number] { width:95px; }
.check { flex-direction:row; align-items:center; padding-bottom:8px; }
#count { margin-left:auto; color:var(--muted); font-size:13px; }
.catalog { display:grid; grid-template-columns:minmax(260px,350px) minmax(0,1fr); gap:20px; align-items:start; }
#results { max-height:80vh; overflow:auto; border:1px solid var(--line); border-radius:6px; }
.recipe-row { width:100%; display:flex; flex-direction:column; text-align:left; gap:4px; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 14px; }
.recipe-row span { color:var(--muted); font-size:12px; }
.recipe-row[aria-pressed=true] { background:#242619; box-shadow:inset 3px 0 var(--accent); }
#detail { min-width:0; padding:20px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.choice select { width:100%; font-size:13px; }
.ingredients { padding-left:20px; }
.ingredients li { margin:5px 0; }
.notice { padding:10px; border-left:3px solid #d7b460; background:#2c2516; color:#e9d29b; }
.result-name { color:var(--accent); font-size:18px; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin:14px 0; }
th,td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
th { font-size:12px; color:var(--muted); }
.command { display:block; overflow-wrap:anywhere; padding:12px; background:var(--bg); border:1px solid var(--line); }
.empty { padding:16px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:1150px) { .catalog { grid-template-columns:minmax(240px,320px) minmax(0,1fr); } }
@media(max-width:700px) { main { padding:20px 12px; } .catalog { grid-template-columns:1fr; } #results { max-height:330px; } #detail { padding:16px; } .controls label { flex:1 1 140px; } .settings { gap:10px; } #count { flex-basis:100%; } }

.material-sources { margin:4px 0 10px; color:var(--muted); font-size:12px; }
.material-sources summary { cursor:pointer; color:var(--accent); }
.material-sources ul { padding-left:20px; }
.stat-ranges td:last-child { font-variant-numeric:tabular-nums; }