/* Crop only transparent canvas margins with SVG viewBoxes; keep source dishes intact. */
.sound-stage[data-scene] .sound-platter{
  top:50%;
  bottom:auto;
  left:50%;
  transform:translate(-50%,-50%);
  background-image:none;
}
.kitchen-photo{display:none;width:100%;height:100%;overflow:hidden}
.sound-stage[data-scene="smoke"] .kitchen-photo--smoke,
.sound-stage[data-scene="sizzle"] .kitchen-photo--sizzle,
.sound-stage[data-scene="sparkle"] .kitchen-photo--sparkle{display:block}
/* Foreground particles stay in the visual area and cannot cover text or controls. */
.sound-stage .sound-visual .fx{z-index:8;pointer-events:none}
.sound-stage .sound-visual::before{z-index:6}
.sound-stage .kitchen-step{text-align:center}
.sound-stage .kitchen-step::before{left:calc(50% - 5px)}
.sound-stage .kitchen-step:not(:last-child)::after{left:calc(50% + 7px);width:calc(100% - 14px)}
@media(prefers-reduced-motion:reduce){
  .sound-stage .fx i{animation:none;transform:none;opacity:.25}
  .sound-stage .sound-visual::before{animation:none}
}

/* Give each kitchen element its own space on phones. */
@media(max-width:700px){
  .sound-stage{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "status control"
      "copy copy"
      "visual visual"
      "tabs tabs"
      "rail rail";
    align-items:center;
    gap:22px 14px;
    min-height:0;
    padding:24px 20px;
  }
  .sound-stage::before{inset:12px}
  .sound-stage > *{min-width:0}
  .sound-stage .kitchen-status{
    grid-area:status;
    position:relative;
    top:auto;
    right:auto;
    gap:10px;
    padding-left:5px;
  }
  .sound-stage .kitchen-led{flex:0 0 9px}
  .sound-stage .kitchen-status strong{font-size:10px}
  .sound-stage .kitchen-status small{
    max-width:none;
    font-size:12px;
    line-height:1.4;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .sound-stage .sound-control{
    grid-area:control;
    position:relative;
    top:auto;
    right:auto;
    justify-self:end;
    min-height:44px;
    padding:10px 12px;
    font-size:10px;
    line-height:1.35;
    letter-spacing:0;
  }
  .sound-stage .sound-copy{
    grid-area:copy;
    width:100%;
    padding:0;
  }
  .sound-stage .sound-kicker{font-size:10px;line-height:1.5;letter-spacing:.09em}
  .sound-stage h2{
    margin:14px 0 16px;
    font-size:clamp(22px,6.5vw,34px);
    line-height:1.1;
    letter-spacing:-.065em;
    word-spacing:.1em;
    overflow-wrap:normal;
  }
  .sound-stage .sound-word{white-space:nowrap}
  .sound-stage .sound-description{
    max-width:none;
    min-height:6em;
    font-size:14px;
    line-height:1.5;
    color:rgba(248,242,231,.85);
  }
  .sound-stage .sound-visual{
    grid-area:visual;
    position:relative;
    inset:auto;
    width:100%;
    height:clamp(260px,78vw,360px);
    overflow:clip;
  }
  .sound-stage .sound-platter{
    width:calc(100% - 16px);
    height:calc(100% - 20px);
    background-position:center;
    background-size:contain;
  }
  .sound-stage .sound-visual::after{width:80%;bottom:2px}
  .sound-stage .sound-visual::before{bottom:60px}
  .sound-stage .sound-tabs{
    grid-area:tabs;
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .sound-stage .sound-tab{
    min-width:0;
    min-height:44px;
    padding:8px 4px;
    font-size:12px;
    line-height:1.3;
    white-space:nowrap;
  }
  .sound-stage .kitchen-rail{
    grid-area:rail;
    position:relative;
    inset:auto;
    width:100%;
    min-height:34px;
    margin:0;
  }
  .sound-stage .kitchen-step{font-size:9px;line-height:1.4}
}

@media(max-width:374px){
  .sound-stage{
    grid-template-areas:
      "status status"
      "control control"
      "copy copy"
      "visual visual"
      "tabs tabs"
      "rail rail";
    gap:18px 10px;
    padding:24px 18px;
  }
  .sound-stage .sound-control{justify-self:start}
  .sound-stage .sound-tab{font-size:10px}
  .sound-stage .sound-description{min-height:7.5em}
}