:root{
  --ground:#F2F4F1; --panel:#FFFFFF; --panel-2:#F7F8F6; --ink:#1C2320; --muted:#5B6560; --line:#D9DED9;
  --accent:#B06F12; --accent-soft:#F6E7CC; --side:#1F2A26; --side-ink:#E4EAE6; --side-muted:#93A39B; --side-on:#2E3C36;
  --r-title:#3E4FA3; --r-title-bg:#E3E7F7; --r-servings:#0F7A73; --r-servings-bg:#D8F0EC;
  --r-headnote:#5B6560; --r-headnote-bg:#E7EAE7; --r-ingredient:#4F6B1E; --r-ingredient-bg:#E4EDD3;
  --r-method:#A3560B; --r-method-bg:#F8E3CC; --r-other:#6B5A7A; --r-other-bg:#ECE6F1;
  --ok:#2F7A3E; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; --sans:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#131816; --panel:#1B211E; --panel-2:#171C1A; --ink:#E5EAE7; --muted:#9AA59F; --line:#2D3531;
    --accent:#E2A54C; --accent-soft:#3A2D18; --side:#0E1311; --side-ink:#E4EAE6; --side-muted:#7F8F87; --side-on:#22302A;
    --r-title:#A9B6F2; --r-title-bg:#262C4A; --r-servings:#7FD6CB; --r-servings-bg:#163A36;
    --r-headnote:#B5BEB9; --r-headnote-bg:#2A302D; --r-ingredient:#B5D27E; --r-ingredient-bg:#28351A;
    --r-method:#F0B26B; --r-method-bg:#3D2A14; --r-other:#CDB8E0; --r-other-bg:#33293C; --ok:#8FD19E;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#131816; --panel:#1B211E; --panel-2:#171C1A; --ink:#E5EAE7; --muted:#9AA59F; --line:#2D3531;
  --accent:#E2A54C; --accent-soft:#3A2D18; --side:#0E1311; --side-ink:#E4EAE6; --side-muted:#7F8F87; --side-on:#22302A;
  --r-title:#A9B6F2; --r-title-bg:#262C4A; --r-servings:#7FD6CB; --r-servings-bg:#163A36;
  --r-headnote:#B5BEB9; --r-headnote-bg:#2A302D; --r-ingredient:#B5D27E; --r-ingredient-bg:#28351A;
  --r-method:#F0B26B; --r-method-bg:#3D2A14; --r-other:#CDB8E0; --r-other-bg:#33293C; --ok:#8FD19E;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}
.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding-block:20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 20px 18px;border-bottom:1px solid var(--side-on)}
.brand .id{font-family:var(--mono);font-size:12px;color:var(--side-muted)}
.brand b{font-size:18px;font-weight:600}
.brand .tag{font-size:12px;color:var(--accent)}
.side ul{list-style:none;margin:0;padding:8px 10px}
.side .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted);padding:16px 10px 6px}
.side a{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:6px;color:var(--side-ink);text-decoration:none}
.side a:hover{background:var(--side-on)}
.side a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.side a.on{background:var(--side-on);box-shadow:inset 3px 0 0 var(--accent)}
.side .nl{font-weight:600;font-size:14px}
.side .ns{font-size:12px;color:var(--side-muted);line-height:1.35}
.main{padding-block:28px 48px;padding-inline:32px;min-width:0}
.vh{margin-bottom:20px;max-width:70ch}
.vh h2{margin:0;font-size:24px;font-weight:600;text-wrap:balance}
.vh p{margin:4px 0 0;color:var(--muted)}
h3{font-size:16px;font-weight:600;margin:24px 0 8px}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.photos figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px}
.photos img{display:block;width:100%;height:auto;border-radius:4px}
.photos figcaption{font-size:12px;color:var(--muted);padding-top:6px}
.lines{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.lines li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:7px 12px;border-top:1px solid var(--line)}
.lines li:first-child{border-top:0}
.lines .no{color:var(--muted);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.lines .tx{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.lines li.long .tx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.lines li.long.open .tx{display:block}
.lines li.long .tx::after{content:""}
.chip{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.03em;padding:1px 8px;border-radius:999px;white-space:nowrap}
.r-title{color:var(--r-title);background:var(--r-title-bg)}
.r-servings{color:var(--r-servings);background:var(--r-servings-bg)}
.r-headnote{color:var(--r-headnote);background:var(--r-headnote-bg)}
.r-ingredient{color:var(--r-ingredient);background:var(--r-ingredient-bg)}
.r-method{color:var(--r-method);background:var(--r-method-bg)}
.r-other,.r-note,.r-label,.r-heading,.r-time,.r-records{color:var(--r-other);background:var(--r-other-bg)}
.start{flex-basis:100%;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent);padding-left:calc(2ch + 10px)}
.start::before{content:"\25B2  "}
.split{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:20px;align-items:start}
.split .pane.input{grid-column:1/-1}
.split.collapsed .input-body{display:none}
.split.collapsed .pane.input{padding:8px 12px}
.input-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.input-col{min-width:0}
.collapse{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:4px 12px;font:600 12px var(--sans);color:var(--accent);background:var(--panel);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.collapse:hover{border-color:var(--accent)}
.collapse:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.collapse .when-closed{display:none}
.split.collapsed .collapse{margin:0}
.split.collapsed .collapse .when-open{display:none}
.split.collapsed .collapse .when-closed{display:inline}
table.nested td{border-top:1px solid var(--line)}
table.nested tr.prow td{font-weight:400}
table.nested b,.tw td b{font-weight:700;color:var(--ink)}
.tw tr.gone td{font-style:italic;color:var(--muted)}
table.nested tr.srow td{color:var(--muted);border-top:1px dashed var(--line);font-size:12.5px}
table.nested tr.srow td:first-child{padding-left:26px}
table.nested tr.srow.none td,table.nested tr.srow.gone td{font-style:italic}
.opt{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:4px}
.pane{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
.pane-h{margin-bottom:10px}
.pane-h h3{margin:2px 0 0;font-size:18px}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.sub{font-size:13px;font-weight:600;margin:18px 0 8px;color:var(--muted)}
.method .lede{margin:0 0 10px;max-width:65ch}
.how{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.how li{max-width:65ch}
.facts{margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.facts div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.facts dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0;font-size:13px;font-variant-numeric:tabular-nums}
.summary{margin:0 0 10px;color:var(--muted)}
.tw{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;vertical-align:top;padding:7px 10px;border-top:1px solid var(--line)}
thead th{border-top:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--panel-2)}
td:first-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.note{color:var(--muted);font-size:13px;margin-top:16px}
.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.clamp.open{display:block}
.back{display:block;padding:0 20px 14px;font-size:13px;color:var(--accent);text-decoration:none}
.back:hover{text-decoration:underline}
.callout{background:var(--accent-soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 12px;max-width:70ch}
.pdf{width:100%;height:80vh;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.raw{font-family:var(--mono);font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;overflow-x:auto;white-space:pre-wrap}
.index{max-width:1040px;margin:0 auto;padding-block:40px 64px;padding-inline:24px}
.ih h1{margin:4px 0 6px;font-size:30px;font-weight:600;text-wrap:balance}
.ih p{margin:0;color:var(--muted);max-width:65ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:28px}
.card{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.card:hover{border-color:var(--accent)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .id{font-family:var(--mono);font-size:12px;color:var(--muted)}
.card b{font-size:19px;font-weight:600}
.card .why{color:var(--ink);font-size:13.5px}
.card .stats{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tchip{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px}
.ok-bg{color:var(--ok);background:var(--r-ingredient-bg)}
.dif-bg{color:var(--accent);background:var(--accent-soft)}
.inputs{background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:12px;margin:0 0 14px}
.inputs-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:8px}
.inputs .tw{border:0}
.inputs td:first-child{color:var(--ink);font-variant-numeric:normal}
.dep{margin:8px 0 0;font-size:13px}
.kchip{display:inline-block;font:600 12px var(--mono);padding:1px 8px;margin:1px 2px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);text-decoration:none;white-space:nowrap}
a.kchip:hover{border-color:var(--accent);color:var(--accent)}
.kchip.src{font-family:var(--sans)}
.ok{color:var(--ok);font-weight:600}
.dif{color:var(--accent);font-weight:600}
@media (max-width:1100px){
  .input-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;padding-block:12px}
  .brand{padding:0 16px 10px}
  .side ul{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px}
  .side .grp{flex-basis:100%;padding:6px 4px 0}
  .side .ns{display:none}
  .main{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}