:root { --glow: #ff6fa8; --accent: #ff9fcf; --accent-deep: #b4286a; }
.steps { display: flex; gap: 6px; list-style: none; margin: 2px 0; padding: 0; }
.steps li { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: rgba(255,255,255,.15); opacity: .55; transition: transform .3s var(--spring); }
.steps li.done { opacity: .9; background: rgba(159,234,82,.45); }
.steps li.now { opacity: 1; background: var(--pill); transform: scale(1.18); box-shadow: var(--shine); }
.bench { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; position: relative; padding: 6px; }
.bench .box { height: 100%; max-height: 100%; aspect-ratio: 1; max-width: 94vw; position: relative; touch-action: none; }
.bench .box svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bench .box.glow { filter: drop-shadow(0 0 22px #fff9); }
.bowl.stirring .swirl { animation: spin 1.2s linear infinite; transform-origin: 100px 72px; }
@keyframes spin { to { transform: rotate(360deg); } }
.meter { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); width: 60%; height: 16px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd166, #9fea52); border-radius: inherit; transition: width .15s; }
.lump { position: fixed; z-index: 30; font-size: 3rem; pointer-events: none; transform: translate(-50%,-50%); transition: transform .45s ease-in, opacity .45s; }
.oven-light { transition: fill .4s; }
.baking .oven-light { fill: #ffb347; animation: ovenglow .8s ease-in-out infinite alternate; }
@keyframes ovenglow { to { fill: #ff7a2a; } }
.timer { position: absolute; top: 4%; right: 6%; font-size: 3rem; text-shadow: 0 3px 8px rgba(0,0,0,.4); }
.tray .thing.go { background: radial-gradient(circle at 30% 20%, #fff8 0 12%, transparent 13%), linear-gradient(#c6f58a, #7fd13a); width: auto; padding: 6px 18px; }
.tray .thing.go .icon { font-size: 2.2rem; }
.crumb { position: fixed; pointer-events: none; z-index: 30; width: 9px; height: 9px; border-radius: 50%; animation: crumb .7s ease-in forwards; }
@keyframes crumb { to { transform: translate(var(--dx), 120px); opacity: 0; } }
@media (max-height: 640px) { .steps li { width: 36px; height: 36px; font-size: 1.1rem; } }