*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:ui-rounded,SF Pro Rounded,Segoe UI Variable Display,Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:light dark;--indigo: #26346b;--indigo-soft: #4a5c9e;--madder: #a63d2f;--madder-soft: #c9614d;--oat: #ddceb2;--oat-deep: #c3b191;--cream: #f7efe1;--paper: #fffbf3;--ink: #1b2140;--muted: #776d5c;--line: color-mix(in srgb, var(--oat) 88%, var(--ink) 12%);--shadow: 0 10px 26px -20px color-mix(in srgb, var(--indigo) 70%, transparent);--radius: 18px;--radius-sm: 11px;--ease: cubic-bezier(.22, 1, .36, 1);--fill-speed: .52s}@media(prefers-color-scheme:dark){:root{--indigo: #93a6ee;--indigo-soft: #6a7cc4;--madder: #e28472;--madder-soft: #c9614d;--oat: #3d4468;--oat-deep: #4d5580;--cream: #141931;--paper: #1c2240;--ink: #f3ead9;--muted: #a9a394;--shadow: 0 12px 28px -20px #000}}body{min-height:100dvh;color:var(--ink);background-color:var(--cream);background-image:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--oat) 55%,transparent),transparent 42%),radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--indigo) 12%,transparent),transparent 38%);background-attachment:fixed}.page{max-width:60ch;margin-inline:auto;padding:3rem 1.25rem}.page h1{font-size:1.6rem;letter-spacing:-.02em}.page p{margin-top:.75rem;color:var(--muted)}a{color:var(--indigo);text-decoration-color:color-mix(in srgb,var(--indigo) 40%,transparent);text-underline-offset:3px}.shell{max-width:74rem;margin-inline:auto;padding:1.25rem 1rem 3rem}.masthead{padding:.5rem 0 1.25rem}.masthead__mark{display:inline-flex;flex-direction:column;text-decoration:none;color:inherit}.masthead__name{font-size:1.45rem;font-weight:750;letter-spacing:-.03em;color:var(--indigo)}.masthead__tagline{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--madder)}.calculator,.detail{display:grid;gap:1rem;align-content:start}.card{align-self:start;padding:1rem 1.1rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card__head{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:baseline;justify-content:space-between;margin-bottom:.9rem}.card__head h2{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--madder)}.card__hint{font-size:.82rem;color:var(--muted)}.card__hint--block{max-width:46ch;line-height:1.55}@media(min-width:62rem){.calculator{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"batch amounts" "split amounts" "notes recipes" "save recipes" "save history"}.card--batch{grid-area:batch}.card--amounts{grid-area:amounts}.card--split{grid-area:split}.card--notes{grid-area:notes}.card--save{grid-area:save}.card--recipes{grid-area:recipes}.card--history{grid-area:history}}.fields{display:grid;gap:.7rem .9rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}.fields--notes{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.field{display:flex;flex-direction:column;gap:.3rem}.field--wide{grid-column:1 / -1}.field__label{display:flex;flex-wrap:wrap;gap:0 .4rem;align-items:baseline;font-size:.9rem;font-weight:650;letter-spacing:-.01em}.field__unit{font-size:.72rem;font-weight:500;color:var(--muted)}.field__input{padding:.5rem .6rem;color:inherit;font-variant-numeric:tabular-nums;font-size:1rem;background:color-mix(in srgb,var(--cream) 70%,var(--paper));border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--oat-deep) 45%,transparent);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}.field__input--area{resize:vertical;font-size:.92rem;line-height:1.5}.field__input:focus-visible{outline:none;border-color:var(--madder);box-shadow:0 0 0 3px color-mix(in srgb,var(--madder) 22%,transparent)}.field__hint{font-size:.72rem;color:var(--muted)}.readouts{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.readout{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem .7rem;background:color-mix(in srgb,var(--cream) 55%,var(--paper));border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius-sm)}.readout--large{grid-column:span 1}.readout__label{font-size:.7rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.readout__value{font-size:1.5rem;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--indigo)}.readout--small .readout__value{font-size:1.15rem}.readout__hint{font-size:.72rem;color:var(--muted)}.readout__track{display:block;height:6px;margin-top:.45rem;overflow:hidden;background:color-mix(in srgb,var(--oat) 70%,transparent);border-radius:999px}.readout__fill{display:block;height:100%;border-radius:inherit;transition:width var(--fill-speed) var(--ease)}.readout[data-tone=indigo] .readout__fill{background:linear-gradient(90deg,var(--indigo),var(--indigo-soft))}.readout[data-tone=madder] .readout__fill{background:linear-gradient(90deg,var(--madder),var(--madder-soft))}.readout[data-tone=oat] .readout__fill{background:linear-gradient(90deg,var(--oat-deep),var(--oat))}.readout[data-tone=madder] .readout__value{color:var(--madder)}.readout--changed{animation:readout-lift .7s var(--ease)}.readout--changed .readout__value{animation:readout-flash .7s var(--ease)}@keyframes readout-lift{0%{border-color:color-mix(in srgb,var(--madder) 45%,transparent);background:color-mix(in srgb,var(--madder) 8%,var(--paper))}to{border-color:color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--cream) 55%,var(--paper))}}@keyframes readout-flash{0%{transform:translateY(2px);opacity:.55}to{transform:none;opacity:1}}.notice{margin-top:.9rem;padding:.6rem .75rem;font-size:.85rem;color:color-mix(in srgb,var(--madder) 80%,var(--ink));background:color-mix(in srgb,var(--madder) 10%,var(--paper));border:1px dashed color-mix(in srgb,var(--madder) 45%,transparent);border-radius:var(--radius-sm)}.switch{display:inline-flex;gap:.45rem;align-items:center;font-size:.85rem;color:var(--muted)}.switch input{width:1.05rem;height:1.05rem;accent-color:var(--indigo)}.split{display:grid;gap:.85rem}.split__count{display:flex;gap:.6rem;align-items:center}.split__count-label{font-size:.78rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.segmented{display:inline-flex;padding:3px;background:color-mix(in srgb,var(--cream) 70%,var(--paper));border:1px solid var(--line);border-radius:999px}.segmented__option{min-width:2rem;padding:.2rem .5rem;font-size:.85rem;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted);background:transparent;border:0;border-radius:999px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}.segmented__option[aria-pressed=true]{color:var(--paper);background:var(--indigo)}.split__list{display:grid;gap:.7rem;padding:0;list-style:none}.tone{display:grid;gap:.45rem;padding:.65rem .75rem .75rem;background:color-mix(in srgb,var(--cream) 50%,var(--paper));border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:var(--radius-sm)}.tone__head{display:flex;gap:.55rem;align-items:center}.tone__swatch{flex:none;width:1.6rem;height:1.6rem;background:color-mix(in srgb,var(--indigo) calc(18% + var(--swatch-strength, 0) * 82%),var(--cream));border:1px solid var(--oat-deep);border-radius:50%;transition:background var(--fill-speed) var(--ease)}.tone__name{flex:1 1 auto;min-width:0;padding:.25rem .4rem;font-size:.95rem;font-weight:650;color:inherit;background:transparent;border:1px dashed transparent;border-radius:8px}.tone__name:hover,.tone__name:focus-visible{border-color:var(--oat-deep);outline:none;background:var(--paper)}.tone__share{font-size:.95rem;font-weight:750;font-variant-numeric:tabular-nums;color:var(--madder)}.tone__slider{width:100%;height:1.4rem;margin:0;background:transparent;appearance:none;cursor:ew-resize}.tone__slider::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,var(--oat-deep),color-mix(in srgb,var(--oat) 80%,transparent));border-radius:999px}.tone__slider::-moz-range-track{height:8px;background:linear-gradient(90deg,var(--oat-deep),color-mix(in srgb,var(--oat) 80%,transparent));border-radius:999px}.tone__slider::-webkit-slider-thumb{width:1.15rem;height:1.15rem;margin-top:-.25rem;appearance:none;background:var(--indigo);border:3px solid var(--paper);border-radius:50%;box-shadow:0 1px 4px color-mix(in srgb,var(--indigo) 45%,transparent)}.tone__slider::-moz-range-thumb{width:1.15rem;height:1.15rem;background:var(--indigo);border:3px solid var(--paper);border-radius:50%}.tone__slider:focus-visible{outline:2px solid var(--madder);outline-offset:4px;border-radius:999px}.tone__amounts{display:grid;gap:.3rem .75rem;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr))}.tone__amounts dt{font-size:.66rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.tone__amounts dd{font-size:.92rem;font-weight:650;font-variant-numeric:tabular-nums}.split__note{font-size:.78rem;line-height:1.5;color:var(--muted)}.save{display:grid;gap:.8rem}.save__actions,.detail__actions{display:flex;flex-wrap:wrap;gap:.5rem}.button{padding:.5rem .9rem;font-size:.9rem;font-weight:650;color:var(--indigo);background:var(--paper);border:1px solid color-mix(in srgb,var(--indigo) 35%,var(--line));border-radius:999px;cursor:pointer;transition:transform .14s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}.button:hover{background:color-mix(in srgb,var(--indigo) 8%,var(--paper))}.button:active{transform:translateY(1px)}.button--primary{color:var(--paper);background:var(--indigo);border-color:var(--indigo)}.button--primary:hover{background:color-mix(in srgb,var(--indigo) 88%,var(--ink))}.button--quiet{color:var(--muted);border-color:var(--line)}.button--quiet:hover{color:var(--madder);background:color-mix(in srgb,var(--madder) 8%,var(--paper))}.button--small{padding:.3rem .65rem;font-size:.78rem}.button:focus-visible{outline:2px solid var(--madder);outline-offset:2px}.records{display:grid;gap:.5rem;padding:0;list-style:none}.record{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;padding:.55rem .7rem;background:color-mix(in srgb,var(--cream) 50%,var(--paper));border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:var(--radius-sm)}.record__body{display:flex;flex-direction:column;min-width:0}.record__name{font-size:.98rem;font-weight:700;letter-spacing:-.01em;color:var(--indigo)}.record__meta{font-size:.76rem;font-variant-numeric:tabular-nums;color:var(--muted)}.record__actions{display:flex;gap:.35rem}.worktable{display:grid;gap:.35rem;justify-items:center;padding:1.1rem .5rem .4rem;text-align:center}.worktable__shelf{display:flex;gap:.9rem;align-items:flex-end;justify-content:center;margin-bottom:.7rem;padding-bottom:.55rem;border-bottom:3px solid var(--oat);border-radius:2px}.worktable__shelf--tags{align-items:flex-start;padding-top:.9rem;border-bottom:0;border-top:2px dashed var(--oat-deep)}.worktable__title{font-size:.95rem;font-weight:700}.worktable__description{max-width:34ch;font-size:.8rem;line-height:1.55;color:var(--muted)}.jar{display:grid;justify-items:center;gap:.2rem}.jar__lid{width:1.5rem;height:.4rem;background:var(--oat-deep);border-radius:3px 3px 1px 1px}.jar__body{position:relative;display:block;width:2.5rem;height:2.9rem;overflow:hidden;background:color-mix(in srgb,var(--cream) 70%,var(--paper));border:2px solid var(--oat-deep);border-radius:5px 5px 12px 12px}.jar__contents{position:absolute;inset:auto 0 0;height:calc(38% + var(--jar-index, 0) * 14%);background:var(--indigo);border-radius:2px 2px 9px 9px;opacity:.85}.jar:nth-child(2) .jar__contents{background:var(--madder)}.jar:nth-child(3) .jar__contents{background:var(--oat-deep)}.jar__label{padding:.05rem .3rem;font-size:.62rem;font-weight:650;letter-spacing:.02em;color:var(--muted);background:var(--paper);border:1px dashed var(--oat-deep);border-radius:3px;rotate:-2deg}.tag{display:flex;gap:.3rem;align-items:center;padding:.3rem .6rem .3rem .4rem;background:var(--paper);border:1px dashed var(--oat-deep);border-radius:4px 10px 10px 4px;rotate:calc(-3deg + var(--tag-index, 0) * 5deg)}.tag__hole{width:.4rem;height:.4rem;background:var(--cream);border:1px solid var(--oat-deep);border-radius:50%}.tag__label{font-size:.68rem;font-weight:650;color:var(--muted)}.detail__back{font-size:.85rem}.detail__head{display:grid;gap:.55rem;padding:1rem 1.1rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.detail__head h1{font-size:1.55rem;font-weight:750;letter-spacing:-.03em;color:var(--indigo)}.detail__meta{font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--muted)}.breakdown{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.breakdown th,.breakdown td{padding:.45rem .4rem;text-align:right;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.breakdown thead th{font-size:.68rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.breakdown th[scope=row]{font-weight:650;text-align:left}.breakdown thead th:first-child{text-align:left}.breakdown tbody tr:last-child th,.breakdown tbody tr:last-child td{border-bottom:0}.notes{display:grid;gap:.6rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.notes dt{font-size:.68rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.notes dd{font-size:.95rem;line-height:1.5}.copy{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.8rem}.copy__status{font-size:.8rem;color:var(--madder)}.shopping{margin:0;padding:.8rem .9rem;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.6;white-space:pre-wrap;background:color-mix(in srgb,var(--cream) 70%,var(--paper));border:1px dashed var(--oat-deep);border-radius:var(--radius-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}