.academy-coordinate-converter {
  margin: var(--spacing-32) 0;
  padding: var(--spacing-24);
  border: var(--stroke-weight-1) solid var(--border-default);
  background-color: var(--background-surface-1);
}

.academy-coordinate-converter__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-12); margin-top: var(--spacing-16); }
.academy-coordinate-converter__controls label { display: flex; flex-direction: column; gap: var(--spacing-4); color: var(--text-secondary); }
.academy-coordinate-converter__controls input { min-width: 0; color: var(--text-primary); }

.academy-coordinate-converter__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); margin-top: var(--spacing-16); }
.academy-coordinate-converter__results div, .academy-coordinate-converter__builds { padding: var(--spacing-16); background-color: var(--background-surface-2); }
.academy-coordinate-converter__results dt { color: var(--text-secondary); }
.academy-coordinate-converter__results dd { margin: var(--spacing-4) 0 0; overflow-x: auto; color: var(--text-primary); font-family: var(--font-family-mono); white-space: nowrap; }
.academy-coordinate-converter__builds { margin-top: var(--spacing-16); border-left: var(--stroke-weight-2) solid var(--border-strong); color: var(--text-secondary); }
.academy-coordinate-converter__builds h4 { color: var(--text-primary); }
.academy-coordinate-converter__builds p + p { margin-top: var(--spacing-8); }

@media (max-width: 40rem) {
  .academy-coordinate-converter__controls, .academy-coordinate-converter__results { grid-template-columns: 1fr; }
}