.transform-tools, .transform-model-tools, .transform-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin: 24px 0; color: var(--demo-muted); font: 12px Consolas, monospace;
}
.transform-matrix { display: flex; align-items: center; gap: 12px; }
.transform-m { font: italic 24px var(--font-math); }
.transform-inputs { display: grid; grid-template-columns: repeat(2, 64px); gap: 6px; border-inline: 1px solid var(--cyan); padding: 8px; }
.transform-inputs input { width: 64px; text-align: center; }
.transform-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.renderer-demo [data-transform].selected { color: var(--cyan); border-color: var(--cyan); background: #66edff0c; }
.transform-det { margin-left: auto; font: 18px var(--font-math); color: var(--pink); }
.transform-surface { position: relative; height: 480px; margin: 24px 0; border: 1px solid var(--demo-line); background: #0b0715; }
.transform-surface canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.transform-model-tools label { display: flex; gap: 10px; align-items: center; }
.transform-legend { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.transform-legend span::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-right: 8px; background: var(--cyan); vertical-align: middle; }
.transform-legend span:last-child::before { background: var(--pink); }
.transform-draw-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px; border: 1px solid var(--demo-line); background: #21112f66; }
.transform-draw-panel[hidden] { display: none; }
#transform-drawing { width: 100%; height: 280px; display: block; cursor: crosshair; touch-action: none; border: 1px solid var(--demo-line); background: #0b0715; }
.transform-draw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.transform-draw-panel h3 { margin-top: 0; }
.transform-vertex-readout { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 20px; border-left: 2px solid var(--cyan); background: #66edff08; }
.transform-vertex-readout label { font: 12px Consolas, monospace; }
.transform-vertex-readout output { font: 18px var(--font-math); color: var(--cyan); overflow-wrap: anywhere; }
.transform-calculation { margin-block: 16px; font: 16px/1.8 var(--font-math); color: var(--muted); overflow-wrap: anywhere; }
.transform-footer { justify-content: space-between; }
#transform-vectors { font: 17px var(--font-math); color: var(--cyan); }
.transform-explanation { max-width: 850px; }
@media(max-width:720px) {
  .transform-surface { height: 360px; }
  .transform-tools { gap: 14px; }
  .transform-presets { width: 100%; }
  .transform-det, .transform-legend { margin-left: 0; }
  .transform-draw-panel { grid-template-columns: 1fr; padding: 18px; }
  .transform-model-tools label { flex-wrap: wrap; }
  .transform-vertex-readout { padding: 16px; }
}