.gp-playground {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 1rem;
  align-items: start;
}
.gp-stage { min-width: 0; }
#penrose-canvas {
  display: block;
  width: 100%;
  height: max(320px, calc(100dvh - 285px));
  background: #05070d;
  border: 1px solid var(--tui-border);
  border-radius: 6px;
  cursor: crosshair;
}
.gp-controls {
  min-width: 0;
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--tui-border);
  border-radius: 6px;
}
.gp-controls legend { width: auto; padding: 0 .4rem; font-size: .85em; }
.gp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .8rem; }
.gp-buttons button {
  width: 100%; margin: 0; padding: .42rem .35rem; font-size: .72em;
  color: var(--tui-text); background: var(--tui-control); border: 1px solid var(--tui-border); border-radius: 4px;
}
#gp-new-tiling { grid-column: 1 / -1; }
.gp-parameter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: .45rem;
  margin: .65rem 0;
}
.gp-parameter label { grid-column: 1 / -1; margin: 0; font-size: .75em; font-weight: normal; }
.gp-parameter input { width: 100%; min-width: 0; margin: 0; }
.gp-parameter output { text-align: right; font-size: .75em; font-variant-numeric: tabular-nums; }
.gp-caption { margin: .5rem 0; font-size: .75em; color: var(--tui-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
  .gp-playground { grid-template-columns: minmax(0, 1fr); }
  #penrose-canvas { height: auto; aspect-ratio: 3 / 2; }
}
#main:has(.gp-playground) .page {
  width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;
}