.circle-effects{border:0;margin:10px auto;padding:0;min-width:0;width:min(360px,100%);max-width:100%;box-sizing:border-box;color:#fff}
.circle-effects legend{font-size:13px;text-align:center;margin:0 0 8px;width:100%}
.circle-effects>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.circle-effects button{min-height:44px;border:1px solid rgb(255 255 255 / .2);border-radius:14px;background:rgb(255 255 255 / .07);color:#fff;font:inherit;font-size:13px}
.circle-effects button[aria-pressed=true]{background:#dbeafe;color:#163968;border-color:#93c5fd}
.circle-effects p{font-size:11px;line-height:1.4;text-align:center;opacity:.8;margin:8px 0 0}
.circle-start{width:auto!important;padding:0 20px!important;min-width:120px;border-radius:999px!important;background:#2563eb!important;color:#fff!important;font-size:15px!important}
.circle-effects [hidden],.circle-effects[hidden],.circle-start[hidden]{display:none!important}
.circle-effects button:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
/* Keep the top reachable when the viewport shrinks; an overflowing centered
   flex column otherwise clips the camera status above the scroll origin. */
#vyVc2Ov{box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;justify-content:safe center;gap:14px;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#vyVc2Ov>*{flex-shrink:0}
#vyVc2Ov .vy-vc2-ov__stage{width:min(64vw,248px,32dvh);height:auto;min-width:140px}
#vyVc2Ov .vy-vc2-ov__lbl,#vyVc2Ov .vy-vc2-ov__sub{max-width:100%;text-align:center;overflow-wrap:anywhere}
#vyVc2Ov .vy-vc2-ov__lbl:empty{display:none}
#vyVc2Ov .vy-vc2-btn--snd{width:44px;height:44px}
@media(max-height:740px){#vyVc2Ov{gap:10px}.circle-effects{margin:4px auto}.circle-effects button{padding:0 6px}}
/* Landscape uses the available width instead of shrinking six labels into
   illegible 10px buttons or pushing Record below the viewport. */
@media(max-height:520px) and (min-width:600px){
  #vyVc2Ov{display:grid;grid-template-columns:minmax(160px,248px) minmax(240px,360px);grid-template-areas:"top effects" "stage effects" "stage acts" "stage label" "stage sub";justify-content:center;align-content:safe center;align-items:center;gap:8px 24px}
  #vyVc2Ov .vy-vc2-ov__top{grid-area:top;justify-self:center}
  #vyVc2Ov .vy-vc2-ov__stage{grid-area:stage;width:min(248px,54dvh);justify-self:center}
  #vyVc2Ov .circle-effects{grid-area:effects;margin:0}
  #vyVc2Ov .vy-vc2-ov__acts{grid-area:acts;justify-content:center;flex-wrap:wrap;gap:12px}
  #vyVc2Ov .vy-vc2-ov__lbl{grid-area:label}
  #vyVc2Ov .vy-vc2-ov__sub{grid-area:sub}
}
/* Native hidden state must win over legacy injected display:grid buttons. */
#vyVc2Ov [hidden]{display:none!important}