@media (max-width: 800px) {
  .site-header { padding: 10px 14px; }
  .intro { padding: 0 14px; margin-bottom: 8px; }
  .intro h1 { margin-bottom: 6px; font-size: 36px; }
  .intro > p:last-child { font-size: 12px; line-height: 1.45; }
  .stage canvas { width: 100%; height: 37vh; object-fit: contain; }
  .controls { grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 41px); padding: 8px; }
  .hud { padding: 6px; }
  .hud p { padding: 4px 6px; }
  .tool-row { padding: 7px 10px; }
}

@media (max-height: 760px) and (max-width: 800px) {
  .intro > p:last-child { display: none; }
  .stage canvas { height: 34vh; }
  .controls { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 38px); padding: 6px; }
}

html[data-capture="1"] .stage canvas { height: 70dvh; }