.pc { display: grid; gap: 14px; }
.pc-controls { padding: 16px; display: grid; gap: 12px; }
.pc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.pc-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-dim); align-self: center; margin-right: 2px;
}
.pc-field { display: grid; gap: 4px; font-size: 12px; color: var(--fg-muted); }
.pc-field span b { color: var(--fg); }
.pc-field input[type="text"], .pc-field input[type="file"] {
  font: inherit; font-size: 14px; color: var(--fg);
  background: var(--surface-2); border: 0; border-radius: 0;
  padding: 8px 10px; box-shadow: var(--bevel-in); outline: none; min-width: 170px;
}
.pc-field input[type="text"]:focus { box-shadow: var(--bevel-in), 0 0 0 2px var(--grass-deep); }
.pc-range input { width: 190px; accent-color: var(--grass); }
.pc-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--fg-muted); cursor: pointer;
  padding: 7px 10px; background: var(--surface-2); box-shadow: var(--bevel);
}
.pc-check input { accent-color: var(--grass); }
.pc-status { font-size: 13px; color: var(--fg-dim); align-self: center; }
.pc-status.pc-err { color: var(--redstone); }

.pc-out { padding: 14px; overflow: auto; background: var(--surface-2); }
#pc-canvas {
  display: block; margin: 0 auto; max-width: 100%; height: auto;
  background: #fff; box-shadow: var(--bevel);
  image-rendering: pixelated;
}
.pc-note { margin: 0; font-size: 13px; color: var(--fg-muted); line-height: 1.6; }

@media print {
  .pc-controls, .pc-note, .side, .site-foot, .promo, .hero { display: none !important; }
  .pc-out { box-shadow: none; background: #fff; padding: 0; }
}