.mc-recipe {
  --mc-slot: 62px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: fit-content; max-width: 100%; padding: 20px; margin: 22px auto;
  background: #c6c6c6; border: 3px solid #353535; border-radius: 5px;
  box-shadow: inset 3px 3px #fff9, inset -3px -3px #5556;
}
.mc-grid { display: grid; grid-template-columns: repeat(3, var(--mc-slot)); gap: 3px; }
.mc-slot {
  position: relative; display: grid; place-items: center;
  width: var(--mc-slot); height: var(--mc-slot); background: #8b8b8b;
  border-top: 3px solid #373737; border-left: 3px solid #373737;
  border-right: 3px solid #eee; border-bottom: 3px solid #eee;
}
.mc-slot img { display: block; width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated; margin: 0; border: 0; border-radius: 0; }
.mc-slot:not(.mc-slot-empty):hover { background: #adadad; }
.mc-arrow { color: #454545; font-size: 2rem; font-weight: 800; line-height: 1; }
.mc-mystery { color: #fff; font: 800 2.8rem/1 monospace; text-shadow: 2px 2px #333; }
.mc-count { position: absolute; bottom: 1px; right: 3px; color: white; font: 800 1.2rem/1 monospace; text-shadow: 2px 2px #222; }
.mc-notice { color: var(--muted); font-size: .75rem; line-height: 1.5; max-width: 55ch; }
.mc-controls { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 24px 0 12px; }
.mc-control { display: grid; gap: 8px; }
.mc-controls label { font-size: .9rem; font-weight: 650; }
.mc-controls input, .mc-controls select { width: 100%; min-width: 0; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.mc-catalogue-actions { display: flex; flex-wrap: wrap; gap: 12px; grid-column: 1/-1; }
.mc-catalogue [hidden] { display: none !important; }
.mc-catalogue .recipe-card { padding: clamp(18px, 4vw, 30px); }
.mc-catalogue .recipe-card h3 { margin: 8px 0 16px; }
.mc-catalogue .recipe-card .eyebrow { margin: 0; }
.mc-catalogue .mc-ingredients { font-size: .9rem; }
.mc-controls :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (max-width: 620px) {
  .mc-recipe { --mc-slot: 48px; padding: 10px; gap: 9px; }
  .mc-arrow { font-size: 1.5rem; }
  .mc-mystery { font-size: 2rem; }
  .mc-controls { grid-template-columns: 1fr; }
  .mc-catalogue-actions .button { flex: 1 1 auto; }
}
@media (max-width: 370px) {
  .mc-recipe { --mc-slot: 40px; padding: 7px; gap: 6px; }
}