/* One shared three-column rhythm for the scene buttons and cooking stages. */
.sound-stage .kitchen-controls{grid-area:controls;position:relative;z-index:7;width:100%;max-width:440px;align-self:end;display:grid;gap:18px;padding-top:4px}
.sound-stage .kitchen-controls .sound-tabs{grid-area:auto;position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:0;isolation:isolate}
.sound-stage .kitchen-controls .sound-tab{position:relative;z-index:1;min-width:0;min-height:46px;padding:10px 4px;font-size:12px;line-height:1.3;white-space:nowrap;background:transparent;border-color:rgba(245,240,231,.25);transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
.sound-stage .kitchen-controls .sound-tab[aria-pressed="true"]{background:transparent;border-color:transparent;color:var(--ink)}
.sound-active-pill{position:absolute;z-index:0;left:0;top:0;width:calc((100% - 16px) / 3);height:100%;border-radius:999px;background:var(--cream);pointer-events:none;transition:transform 250ms var(--ease-move)}
.sound-stage[data-scene="sizzle"] .sound-active-pill{transform:translateX(calc(100% + 8px))}
.sound-stage[data-scene="sparkle"] .sound-active-pill{transform:translateX(calc(200% + 16px))}
.sound-stage .kitchen-controls .kitchen-rail{grid-area:auto;position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-height:40px;margin:0}
.sound-stage .kitchen-controls .kitchen-step{position:relative;z-index:1;padding-top:24px;text-align:center;font-size:10px;line-height:1.4;letter-spacing:.07em;color:rgba(245,240,231,.48);transition:color 180ms var(--ease-out)}
.sound-stage .kitchen-controls .kitchen-step::before{box-sizing:border-box;left:50%;top:10px;width:10px;height:10px;transform:translate(-50%,-50%);background:#426256;box-shadow:0 0 0 4px #1a342b;transition:transform 200ms var(--ease-out)}
.sound-stage .kitchen-controls .kitchen-step::after{content:"";position:absolute;box-sizing:border-box;top:10px;left:50%;width:20px;height:20px;border:1px solid var(--saffron);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.sound-stage .kitchen-controls .kitchen-step.is-complete{color:rgba(245,240,231,.76)}
.sound-stage .kitchen-controls .kitchen-step.is-complete::before,.sound-stage .kitchen-controls .kitchen-step.is-active::before{background:var(--saffron)}
.sound-stage .kitchen-controls .kitchen-step.is-active{color:var(--cream)}
.sound-stage .kitchen-controls .kitchen-step.is-active::before{transform:translate(-50%,-50%) scale(1.12)}
.sound-stage .kitchen-controls .kitchen-step.is-active::after{opacity:.6;transform:translate(-50%,-50%) scale(1)}
.kitchen-track{position:absolute;top:9px;left:calc((100% - 16px) / 6);right:calc((100% - 16px) / 6);height:2px;background:rgba(245,240,231,.18);border-radius:2px;overflow:hidden}
.kitchen-track-fill{display:block;width:100%;height:100%;background:var(--saffron);transform:scaleX(0);transform-origin:left center}
.sound-stage .kitchen-photo{position:absolute;inset:0;display:block!important;opacity:0;transform:translate3d(0,8px,0);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.sound-stage[data-scene="smoke"] .kitchen-photo--smoke,.sound-stage[data-scene="sizzle"] .kitchen-photo--sizzle,.sound-stage[data-scene="sparkle"] .kitchen-photo--sparkle{opacity:1;transform:translate3d(0,0,0)}
/* Steam fades inside its own visual area instead of meeting a hard clipping edge. */
.sound-stage .fx-smoke{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 82%,transparent 100%)}
.sound-stage .fx-smoke .smoke-puff{bottom:42%;left:43%;opacity:0;animation-name:kitchen-smoke-dissolve;animation-timing-function:linear}
.sound-stage .fx-smoke .smoke-puff:nth-child(1){left:30%}
.sound-stage .fx-smoke .smoke-puff:nth-child(3){left:58%}
.sound-stage .fx-smoke .smoke-puff:nth-child(4){left:70%}
@keyframes kitchen-smoke-dissolve{
  0%{opacity:0;transform:translate3d(-50%,0,0) scale(.95)}
  24%{opacity:.55}
  65%{opacity:.22}
  88%,100%{opacity:0;transform:translate3d(calc(-50% - 18px),-150%,0) scale(1.4)}
}
.sound-stage .sound-tab:focus-visible,.sound-stage .sound-control:focus-visible{outline:2px solid var(--saffron);outline-offset:4px}
.sound-stage .sound-control:disabled{cursor:default;background:transparent;color:rgba(245,240,231,.7);border-color:rgba(245,240,231,.25)}
.sound-stage[data-direct="true"] .sound-active-pill,.sound-stage[data-direct="true"] .kitchen-photo,.sound-stage[data-direct="true"] .kitchen-step::before,.sound-stage[data-direct="true"] .kitchen-step::after{transition:none}
@media(min-width:701px){.sound-stage{grid-template-areas:"copy status" "copy visual" "controls visual"}}
@media(max-width:700px){
  .sound-stage{grid-template-areas:"status control" "copy copy" "visual visual" "controls controls"}
  .sound-stage .kitchen-controls{max-width:none;gap:16px;padding-top:0}
  .sound-stage .kitchen-controls .sound-tab{font-size:12px;min-height:44px}
  .sound-stage .kitchen-controls .kitchen-step{font-size:9px}
}
@media(max-width:374px){
  .sound-stage{grid-template-areas:"status status" "control control" "copy copy" "visual visual" "controls controls"}
  .sound-stage .kitchen-controls .sound-tab{font-size:10px}
  .sound-stage .kitchen-controls .kitchen-step{font-size:8px;letter-spacing:.03em}
}
@media(prefers-reduced-motion:reduce){
  .sound-active-pill,.sound-stage .kitchen-photo,.sound-stage .kitchen-step::before,.sound-stage .kitchen-step::after{transition:none}
  .sound-stage .kitchen-photo{transform:none}
  .sound-stage .fx-smoke .smoke-puff{animation:none;opacity:.14;transform:translate(-50%,-30%)}
}