.svg-output {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: flex-start;
}

.stage {
  display: block;
}

.stage > .view-stage {
  width: 100%;
}

.stage > .view-stage[hidden] {
  display: none;
}

.three-platen,
.svg-viewport {
  aspect-ratio: 420 / 297;
}

@media (min-width: 801px) {
  .stage > .view-stage {
    width: 100%;
  }
}

.svg-output label,
.svg-output label:first-of-type {
  display: grid;
  gap: 6px;
  margin: 0;
}

.svg-output label:first-of-type {
  flex: 0 0 140px;
}

.svg-output button {
  width: auto;
  margin: 0;
  white-space: nowrap;
}

.svg-output label:nth-of-type(2) {
  flex: 0 1 360px;
  min-width: 180px;
  width: auto;
}

.svg-output input {
  box-sizing: border-box;
}

.svg-output select {
  padding-right: 30px;
}

.technical-info {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 12px ui-monospace, monospace;
}

.technical-info > p {
  margin: 0 0 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.technical-info dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  margin: 0;
}

.technical-info dt,
.technical-info dd {
  margin: 0;
}

.technical-info dd {
  text-align: right;
}

.mechanics-output {
  margin: 10px 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  font: 12px ui-monospace, monospace;
}

.mechanics-output legend {
  padding: 0 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mechanics-output .viewbar {
  margin: 0;
  justify-content: flex-start;
}

.mechanics-output .viewbar + .viewbar {
  margin-top: 7px;
}


@media (max-width: 600px) {
  .svg-output { display: grid; grid-template-columns: 1fr; }
  .svg-output label:first-of-type,
  .svg-output label:nth-of-type(2) { width: 100%; }
}

/* Fit the visible platen to the browser, independently of export paper aspect. */
.three-platen,.svg-viewport{width:100%;height:var(--platen-height,calc(100dvh - 240px));min-height:180px;aspect-ratio:auto}
.three-viewport{height:100%;min-height:0}