*,*: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:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark;--color-bg: #f0f0f7;--color-surface: #ffffff;--color-text: #33313d;--color-border: #dcdce6;--color-accent: #c17817;--color-accent-dark: #8a4b1f;--color-choc: #6b4226}@media(prefers-color-scheme:dark){:root{--color-bg: #1c1c24;--color-surface: #2b2b35;--color-text: #f0f0f7;--color-border: #40404c;--color-accent: #e0a458;--color-accent-dark: #f0b876;--color-choc: #c9986a}}body{min-height:100dvh}.page{max-width:80ch;margin-inline:auto;padding:2rem}.bake{min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 1.25rem 3rem;background-color:var(--color-bg);color:var(--color-text);text-align:center}.bake__title{font-size:clamp(1.75rem,5vw,2.5rem);margin:0}.bake__status{min-height:1.5em;margin:0;font-size:1.05rem}.bake__bowl{width:min(320px,90vw);min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem 1.25rem;background:var(--color-surface);border:3px solid var(--color-border);border-top:none;border-radius:0 0 45% 45%/0 0 60% 60%}.bake__bowl--mixing{animation:bake-wiggle .5s ease-in-out infinite}@keyframes bake-wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.bake__bowl-contents{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;font-size:1.75rem;min-height:2.5rem}.bake__bowl-empty{font-size:2.5rem;opacity:.6}.bake__bowl-count{margin:0;font-size:.9rem;opacity:.75}.bake__ingredients{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;width:min(480px,92vw)}.bake__ingredient{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.85rem .5rem;border-radius:16px;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font:inherit;font-weight:600;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}.bake__ingredient:hover:not(:disabled){transform:translateY(-2px);border-color:var(--color-accent)}.bake__ingredient:disabled{cursor:default}.bake__ingredient[aria-pressed=true]{background:var(--color-accent);color:var(--color-surface);border-color:var(--color-accent-dark);opacity:.9}.bake__ingredient-emoji{font-size:1.75rem}.bake__ingredient-check{font-size:.85rem}.bake__mix{padding:.85rem 2rem;font-size:1.1rem;font-weight:700;color:#fff8ef;background:var(--color-choc);border:none;border-radius:999px;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.bake__mix:hover:not(:disabled){transform:translateY(-2px)}.bake__mix:disabled{opacity:.5;cursor:default}.bake__result{display:flex;flex-direction:column;align-items:center;gap:.75rem}.bake__result-emoji{font-size:3rem;margin:0}.bake__result button{padding:.85rem 2rem;font-size:1.05rem;font-weight:700;color:#fff8ef;background:var(--color-accent);border:none;border-radius:999px;cursor:pointer;transition:transform .15s ease}.bake__result button:hover{transform:translateY(-2px)}
