:root{--background:#1d1f21;--ground:#282a2e;--surface:#373b41;--raised:#969896;--float:#b4b7b4;--foreground:#c5c8c6;--crest:#e0e0e0;--peak:#fff;--red:#c66;--orange:#de935f;--yellow:#f0c674;--green:#b5bd68;--aqua:#8abeb7;--blue:#81a2be;--purple:#b294bb;--brown:#a3685a;--monospace-fonts:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--system-fonts:system-ui, sans-serif;--transitional-fonts:Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;--content-width:45rem;--control-small:2rem;--control:3rem;--huge:4rem;--large:2rem;--medium:1rem;--small:.5rem;--pad:.75rem;--tiny:.25rem;--fast:75ms ease-out;--slow:.15s ease-out;--very-slow:.3s ease-out;font-size:18px;line-height:1.5}*{box-sizing:border-box}[draggable=true]{cursor:grab}a{color:var(--blue);text-underline-offset:2px;&.pill{background-color:var(--surface);border-radius:var(--small);align-items:center;column-gap:var(--small);min-height:var(--control);padding:var(--pad);display:inline-flex;& svg{fill:var(--blue);width:24px;max-height:24px}}}body{background-color:var(--background);color:var(--foreground);font-family:var(--transitional-fonts);margin:0 auto var(--large)}button{background-color:var(--surface);border-radius:var(--tiny);color:inherit;font:inherit;min-height:44px;padding-inline:var(--pad);white-space:nowrap;border:none;justify-content:center;align-items:center;width:100%;font-size:.9em;font-weight:bolder;display:flex;&.red,&.cancel{color:var(--red)}&.aqua,&.continue{color:var(--aqua)}&.green,&.add,&.save{color:var(--green)}&.orange{color:var(--orange)}&.yellow{color:var(--yellow)}}dialog{background-color:var(--ground);border-radius:var(--tiny);border:1px solid var(--float);color:inherit;&::backdrop{background-color:var(--background);opacity:0;transition-behavior:allow-discrete}&[open]::backdrop{opacity:.9}& form{row-gap:var(--small);flex-direction:column;display:flex;& .actions{column-gap:var(--small);margin-top:var(--small);justify-content:space-between;display:flex}}}em{color:var(--crest)}h1{margin:var(--large) 0 var(--medium)}h2{margin:var(--large) 0 0;justify-content:space-between;display:flex}h3{margin:var(--large) 0 0}h6{color:var(--raised);margin:0;font-size:.9em;font-style:italic;font-weight:400}header{background-color:var(--ground);border-bottom:1px solid var(--surface);border-top:1px solid var(--surface);height:var(--control);justify-content:center;align-items:center;margin-top:0;display:flex}hr{background-color:var(--raised);height:1px;margin-block:var(--large);border:none}input{color:inherit;font:inherit;outline:none;min-height:44px;&[type=datetime-local],&[type=number],&[type=text]{background-color:var(--ground);border-radius:var(--tiny);border:1px solid var(--raised);padding-inline:calc(var(--small) + var(--tiny));& input:invalid{border-color:var(--red)}}&[type=range]{appearance:none;background-color:#0000;&::-webkit-slider-container{height:var(--large)}&::-webkit-slider-runnable-track{background-color:var(--ground);border-radius:var(--tiny);height:var(--small)}&::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--raised);box-shadow:0 0 var(--tiny) var(--background);cursor:pointer;height:var(--control-small);margin-top:calc(0px - var(--small) - var(--tiny));width:var(--control-small);border-radius:50%}&::-moz-range-thumb{background-color:var(--raised);box-shadow:0 0 var(--tiny) var(--background);cursor:pointer;height:var(--control-small);margin-top:calc(0px - var(--small) - var(--tiny));width:var(--control-small);border-radius:50%}&::-moz-range-track{background-color:var(--ground);border-radius:var(--tiny);height:var(--small)}}&:focus{background-color:var(--surface)}&::placeholder{color:var(--raised);font-style:italic}}label{justify-content:space-between;font-size:.9em;font-weight:bolder;display:flex}li:has(ol)+li,li:has(ul)+li{margin-top:var(--tiny)}main{max-width:100dvw;padding:var(--medium);width:600px;margin-inline:auto}ol{& ul{margin-top:0}}p{margin:var(--medium) 0 0;&:not(:first-child){margin-top:var(--medium)}}pre{border-radius:var(--tiny);border:1px solid var(--surface);font-family:var(--monospace-fonts);padding:var(--tiny) var(--pad);font-size:.8em}select{appearance:none;background-color:var(--ground);border-radius:var(--tiny);border:1px solid var(--raised);color:inherit;font:inherit;min-height:calc(var(--control) - var(--small) - 1px);padding:var(--tiny) var(--pad);outline:none}strong{color:var(--peak)}table{background-color:var(--background);border-bottom:1px solid var(--raised);border-collapse:collapse;border-right:1px solid var(--raised);width:100%;& td,& th{border-left:1px solid var(--raised);border-top:1px solid var(--raised);padding:var(--tiny) var(--small)}& th{background-color:var(--ground);text-align:left}}ul{margin-top:var(--medium);padding-left:1.5rem;p+&{margin-top:var(--tiny)}& ul{margin-top:0}}.bucket{border:2px dashed var(--surface);border-radius:var(--small);margin-block:var(--small);min-height:calc(var(--control) + 2 * var(--small));padding:var(--small);row-gap:var(--small);flex-direction:column;display:flex}.control{margin-top:var(--medium)}#ServingsInfo{margin-bottom:var(--medium)}@media (hover:hover){a{text-decoration:none;&:hover{text-decoration:underline}}button{cursor:pointer;&:hover{background-color:color-mix(in srgb, var(--surface), 25% var(--raised))}}}@media (prefers-color-scheme:light){:root{--background:#fff;--ground:#e0e0e0;--surface:#c5c8c6;--raised:#b4b7b4;--float:#969896;--foreground:#373b41;--crest:#282a2e;--peak:#1d1f21;--red:#c82829;--orange:#f5871f;--yellow:#eab700;--green:#718c00;--aqua:#3e999f;--blue:#4271ae;--purple:#8959a8;--brown:#a3685a}}