.k17-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 1rem;
}
.k17-gallery figure { margin: 0; }
.k17-gallery img { width: 100%; object-fit: contain; }
.k17-gallery button { white-space: normal; }
.k17-activity .learning-footer { justify-content: space-between; }
.k17-activity .learning-footer [data-focus="next"] { font-weight: 700; }
.k17-activity .k16-explanation { min-width: 0; margin: 0; padding: 10px; }
.k17-activity .k16-explanation button { white-space: normal; }
@media (min-width: 700px) {
  .k17-activity .k17-illustrated {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: start;
    gap: 16px;
  }
  .k17-activity .k17-illustrated .learning-conversation { margin: 0; }
}
.k17-helmet-view {
  margin: 12px auto 0;
  max-width: 680px;
}
.k17-helmet-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid #594b35;
  border-radius: 12px;
  background: #26231c;
  cursor: grab;
  touch-action: pan-y;
}
.k17-helmet-viewport:active { cursor: grabbing; }
.k17-helmet-viewport canvas { display: block; width: 100%; height: 100%; }
.k17-helmet-viewport.k17-helmet-on {
  background: radial-gradient(ellipse at 50% 46%, #473d2e, #211d18 57%, #100e0c 87%);
}
.k17-helmet-on canvas {
  clip-path: polygon(13% 44%, 47% 45%, 50% 48%, 53% 45%, 87% 44%, 86% 55%, 53% 56%, 50% 52%, 47% 56%, 14% 55%);
}
.k17-helmet-view figcaption { margin: 8px 0; }
.k17-helmet-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.k17-helmet-controls button { min-height: 44px; }
.k17-helmet-status { margin: 6px 0 0; font-size: .9rem; }
.k17-gallery figure[data-visual="klingen"] { grid-column: 1 / -1; }