.gs-controls {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--tui-border);
  border-radius: 6px;
}

.gs-controls legend {
  width: auto;
  padding: 0 .4rem;
  font-size: .85em;
}

.gs-preset-row,
.gs-playback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}

.gs-controls label {
  margin: 0;
  font-size: .8em;
  font-weight: normal;
}

.gs-controls select {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: .35rem .5rem;
  font-size: .8em;
}

.gs-controls button {
  width: auto;
  margin: 0;
  padding: .4rem .65rem;
  font-size: .8em;
  color: var(--tui-text);
  background: var(--tui-control);
  border: 1px solid var(--tui-border);
  border-radius: 4px;
  cursor: pointer;
}

.gs-controls button:disabled {
  opacity: .5;
  cursor: default;
}

.gs-parameter-row {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) 3.5em;
  align-items: center;
  gap: .6rem;
  margin: .4rem 0;
}

.gs-parameter-row input {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.gs-parameter-row output {
  font-size: .8em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#gs-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
  background: black;
  border: 1px solid var(--tui-border);
  border-radius: 6px;
}

#gs-canvas:focus,
#gs-canvas:focus-visible,
#gs-canvas:active {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--tui-border) !important;
  box-shadow: none !important;
}

.gs-status,
.gs-caption {
  font-size: .75em;
  color: var(--tui-muted);
}

.gs-caption {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .gs-controls {
    padding: .5rem;
  }

  .gs-parameter-row {
    grid-template-columns: 6.5em minmax(0, 1fr) 3em;
    gap: .35rem;
  }
}

.gs-playground {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1rem;
  align-items: start;
}

.gs-simulation {
  min-width: 0;
}

.gs-playground .gs-controls {
  min-width: 0;
  margin: 0;
}

.gs-playground .gs-preset-row>label,
.gs-playground .gs-preset-row select {
  width: 100%;
}

.gs-playground .gs-parameter-row {
  grid-template-columns: minmax(0, 1fr) 3.5em;
  margin: .8rem 0;
}

.gs-playground .gs-parameter-row label {
  grid-column: 1 / -1;
}

.gs-playground #gs-canvas {
  max-width: 100%;
  height: max(240px, calc(100dvh - 280px));
  aspect-ratio: auto;
}

.gs-simulation .gs-status,
.gs-simulation .gs-caption {
  margin: .5rem 0;
}

@media (max-width: 800px) {
  .gs-playground {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-playground #gs-canvas {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* This playground uses the margins normally reserved for article sidebars. */
#main:has(.gs-playground) .page {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.gs-view-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.gs-view-row input { width: auto; margin: 0 .3rem 0 0; }
.gs-view-row label { display: flex; align-items: center; }
#gs-canvas[data-view="torus"] { cursor: grab; }
#gs-camera-reset[hidden] { display: none; }

.gs-parameter-row[hidden] { display: none; }