:root{
  --bg:#FAF9F5; --surface:#FFFFFF; --ink:#232B26; --muted:#5C685F;
  --line:#E3E1D8; --pa:#3D7A4F; --pb:#A14E75; --warn:#8A6215;
  --pa-soft:#E7F0E9; --pb-soft:#F4E7EE;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141815; --surface:#1C221E; --ink:#E6E9E2; --muted:#9AA79D;
    --line:#2C342E; --pa:#7DBB8D; --pb:#D08BAD; --warn:#D3A04C;
    --pa-soft:#243228; --pb-soft:#33252C;
  }
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;}
main{max-width:38rem;margin:0 auto;padding:1rem 1rem 4rem;}
a{color:var(--pa);text-decoration:none;}
.top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:5;}
.top nav{display:flex;gap:.8rem;align-items:center;font-size:.9rem;flex-wrap:wrap;}
.brand{font-weight:700;color:var(--ink);font-size:1.05rem;}
.quiet{color:var(--muted);}
h1{font-size:1.45rem;line-height:1.2;margin:.8rem 0 .4rem;}
h2{font-size:1.05rem;margin:1.2rem 0 .4rem;}
.muted{color:var(--muted);}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.82em;}
.who{font-weight:600;border-radius:99px;padding:.15rem .6rem;font-size:.85rem;}
.pa,.who.pa{background:var(--pa-soft);color:var(--pa);}
.pb,.who.pb{background:var(--pb-soft);color:var(--pb);}
.badge{display:inline-block;border-radius:6px;padding:.1rem .4rem;
  font-family:ui-monospace,monospace;font-size:.78rem;}
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem 0 .6rem;}
.tabs a{flex:0 0 auto;border:1px solid var(--line);border-radius:99px;
  padding:.3rem .8rem;font-size:.85rem;color:var(--muted);background:var(--surface);}
.tabs a.on{background:var(--pa);border-color:var(--pa);color:#fff;}
.card{display:block;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);padding:.8rem .9rem;margin:.6rem 0;color:var(--ink);}
.card .row{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;}
.card h3{margin:0;font-size:1rem;}
.slot{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);}
.totals{display:grid;gap:.35rem;margin-top:.4rem;}
.bar{height:.4rem;border-radius:99px;background:var(--line);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--pa);}
.bar.b i{background:var(--pb);}
table{border-collapse:collapse;width:100%;font-size:.92rem;}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);margin:.6rem 0;}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);}
td{padding:.45rem .7rem;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
td.g{font-family:ui-monospace,monospace;font-size:.85rem;white-space:nowrap;}
tr.mine td{background:color-mix(in srgb, var(--pa) 7%, transparent);}
ol.method{padding-left:1.2rem;}
ol.method li{margin:.45rem 0;}
.check{display:flex;gap:.6rem;align-items:baseline;padding:.45rem 0;
  border-bottom:1px solid var(--line);}
.check:last-child{border-bottom:none;}
.check input{width:1.15rem;height:1.15rem;accent-color:var(--pa);flex:0 0 auto;}
.check label{flex:1;}
.check.done label{color:var(--muted);text-decoration:line-through;}
.section-h{display:flex;justify-content:space-between;align-items:baseline;
  margin:1.1rem 0 .2rem;}
.btn{display:inline-block;background:var(--pa);color:#fff;border:none;
  border-radius:10px;padding:.6rem 1.1rem;font-size:1rem;font-weight:600;cursor:pointer;}
.center{max-width:22rem;margin:14vh auto 0;text-align:center;}
:focus-visible{outline:2px solid var(--pa);outline-offset:2px;}
/* forms (library) */
form label{display:block;margin:.7rem 0 .3rem;font-weight:600;font-size:.9rem;}
form label.inline{display:flex;align-items:center;gap:.4rem;font-weight:400;}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;
  width:100%;max-width:100%;}
input[type=checkbox]{width:auto;}
textarea{width:100%;}
.fieldrow{display:flex;gap:.8rem;flex-wrap:wrap;}
.fieldrow label{flex:1;min-width:8rem;}
.num{max-width:6.5rem;font-family:ui-monospace,monospace;}
#ingtable input,#ingtable select{padding:.3rem .4rem;font-size:.85rem;min-width:3.5rem;}
#ingtable [name=ing_name]{min-width:11rem;}
.del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;}
.btn2{background:var(--surface);color:var(--pa);border:1.5px solid var(--pa);
  border-radius:10px;padding:.5rem 1rem;font-size:.95rem;font-weight:600;cursor:pointer;}
.actions{display:flex;gap:.7rem;margin-top:1.2rem;}
.errors{border-left:3px solid #B03A2E;background:color-mix(in srgb,#B03A2E 10%,var(--surface));
  border-radius:0 10px 10px 0;padding:.6rem 1rem;margin:1rem 0;}
.errors p{margin:.25rem 0;}
.searchbar{display:flex;gap:.8rem;align-items:center;margin:.6rem 0 1rem;}
.searchbar input[type=search]{flex:1;}
.searchbar label{display:flex;align-items:center;gap:.35rem;font-weight:400;margin:0;}
.aliasrow{display:flex;gap:.6rem;align-items:center;margin:.35rem 0;}
.aliasrow input{max-width:14rem;}
.grouph{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--line);padding-bottom:.25rem;margin-top:1.6rem;}
/* builder */
.warnline{color:var(--warn);font-size:.9rem;margin:.2rem 0;}
.linkish{background:none;border:none;color:var(--pa);cursor:pointer;
  font:inherit;padding:0;}
.pickcard h3{margin:0;}
.pickbtn{width:100%;text-align:left;cursor:pointer;font:inherit;}
button.card{border:1px solid var(--line);}
button.card:hover,a.card:hover{border-color:var(--pa);}