/* Current Version A only. One selection perimeter, with labels inside its safe inset. */
.cr-app[data-style="studio"][data-tray-ui] .cr-play:focus { outline: none; }
.cr-app[data-style="studio"][data-tray-ui] .cr-play:focus-visible {
  outline: 1px dashed #81908d;
  outline-offset: 3px;
}
.cr-app[data-style="studio"][data-tray-ui] .cr-cube-button.is-selected,
.cr-app[data-style="studio"][data-tray-ui] .cr-cube-button.is-selected:not(:disabled):active {
  outline: 2px solid var(--selection-ring);
  outline-offset: 0;
  border-color: var(--selection-ring);
  box-shadow: 0 3px 0 var(--state-edge, var(--selection-ring));
}
.cr-app[data-style="studio"][data-tray-ui] .cr-board-cube {
  grid-template-rows: 9px minmax(0, 1fr);
  padding: 2px 0;
}
.cr-app[data-style="studio"][data-tray-ui] .cr-board-cube > .cr-cube-code {
  top: 3px;
  left: 4px;
  font-size: 7px;
  line-height: 1;
}
.cr-app[data-style="studio"][data-tray-ui] .cr-board-cube > .cr-cube-face {
  grid-row: 2;
  align-self: center;
  font-size: min(25px, calc(var(--board-cell) - 12px));
  line-height: 1;
}
.cr-app[data-style="studio"][data-tray-ui] .cr-board-selection {
  top: 4px;
  right: 4px;
  width: 6px;
  height: 5px;
}
.cr-app[data-style="studio"][data-tray-ui] .cr-board-cube.is-selected {
  outline: 1px solid var(--selection-ring);
  outline-offset: 0;
  box-shadow: 0 2px 0 var(--state-edge, var(--state-blue-edge));
}