.interaction-playground {
  position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30; width: min(430px, calc(100% - 24px)); box-sizing: border-box;
  padding: 12px 14px; border: 1px solid #c4e8df; border-radius: 18px;
  color: #173d37; background: rgba(250, 255, 252, .97); box-shadow: 0 4px 24px #143b3924;
  font-family: inherit; pointer-events: auto; touch-action: manipulation;
}
.interaction-playground-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.interaction-playground-heading strong { font-size: 17px; }
.interaction-playground-heading a { color: #285f54; font-size: 12px; padding: 8px 0; }
.interaction-playground p { margin: 7px 0 0; line-height: 1.45; }
.interaction-playground-note { font-size: 12px; }
.interaction-playground-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.interaction-playground-buttons button {
  flex: 1; min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid #b8d9ce;
  border-radius: 11px; font: inherit; font-size: 13px; font-weight: 700; color: #245344; background: #fff;
  cursor: pointer; white-space: nowrap;
}
.interaction-playground-buttons button[aria-pressed="true"] { color: #fff; border-color: #28735f; background: #28735f; }
.interaction-playground-buttons button:focus-visible, .interaction-playground-heading a:focus-visible { outline: 3px solid #e39c24; outline-offset: 2px; }
.interaction-playground-help { min-height: 36px; font-size: 13px; }
@media (max-height: 520px) {
  .interaction-playground { padding: 8px 12px; width: min(420px, calc(100% - 24px)); }
  .interaction-playground-note { display: none; }
  .interaction-playground-help { min-height: 0; }
}


.playground-object-label{position:absolute;z-index:12;pointer-events:none;transform:translate(-50%,-100%);font-size:12px;font-weight:700;background:#fffde8;color:#244839;padding:3px 7px;border-radius:10px;white-space:nowrap}
.playground-object-label[hidden]{display:none}