.practice-webots-panel {
  margin: 0 12px 12px;
  border: 1px solid var(--line, #30363d);
  background: var(--panel, #101317);
}

.practice-webots-panel[hidden] {
  display: none;
}

.practice-webots-panel__body {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  gap: 12px;
  padding: 12px;
}

.practice-webots-state,
.practice-webots-viewport {
  min-height: 160px;
  border: 1px solid var(--line, #30363d);
  padding: 12px;
}

.practice-webots-state strong,
.practice-webots-state small {
  display: block;
}

.practice-webots-state small {
  margin-top: 8px;
  color: var(--muted, #8b949e);
}

.practice-webots-viewport {
  display: grid;
  place-items: center;
  color: var(--muted, #8b949e);
  background-image:
    linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

@media (max-width: 760px) {
  .practice-webots-panel__body {
    grid-template-columns: 1fr;
  }
}