.workshop {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 24px;
  align-items: start;
}

.controls {
  background: transparent;
  border-right: 1px solid var(--line);
  padding-right: 16px;
}

.preview-port {
  background: var(--preview);
  min-height: 520px;
  overflow: auto;
  padding: 28px 16px 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.paper-wrap {
  position: relative;
}

.paper-stage {
  background: #fff;
  box-shadow: 0 10px 28px rgba(40, 56, 60, 0.12);
  transform-origin: top center;
}

.paper-stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.guides {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: top center;
}
.guides svg { display: block; width: 100%; height: 100%; }

.dims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-family: var(--mono);
  font-size: 13px;
  margin: 12px 0;
}

select, input[type="text"], input[type="number"] {
  width: 100%;
  min-height: 42px;
  font: 16px/1.3 var(--mono);
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.style-row, .preset-row, .use-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}

.preset-group { margin: 0 0 22px; }
.preset-catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}

.steps { counter-reset: step; }
.steps li { margin: 0 0 10px; }

.ref-table { overflow-x: auto; }
.ref-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ref-table th, .ref-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ref-table th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.print-root { position: absolute; left: -9999px; top: 0; }

body.is-print-preview .site-header,
body.is-print-preview .site-footer,
body.is-print-preview .controls,
body.is-print-preview .section:not(.workshop-section) {
  display: none;
}
body.is-print-preview .workshop { grid-template-columns: 1fr; }
body.is-print-preview .preview-port { background: #fff; min-height: 100vh; }

@media (max-width: 760px) {
  .workshop { grid-template-columns: 1fr; }
  .controls { border-right: 0; padding-right: 0; order: -1; }
  .preset-catalog { grid-template-columns: 1fr; }
  .preview-port { min-height: 360px; }
}