.tutorial-workshop, .tutorial-preview {
  box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid #baa36b;
  border-radius: 14px; background: #18202a; color: #f4ead5; font: 16px/1.5 system-ui, sans-serif;
}
.tutorial-workshop::backdrop, .tutorial-preview::backdrop { background: #070b12d9; }
.tutorial-workshop h2, .tutorial-preview h2 { margin-top: 0; font-size: 24px; }
.tutorial-workshop h3 { font-size: 19px; margin: 18px 0 8px; }
.tutorial-workshop h4 { font-size: 16px; margin: 0 0 8px; }
.tutorial-workshop button, .tutorial-preview button, #gameover-learning button, #tutorial-coach button,
#tutorial-coach select { min-height: 44px; white-space: normal; padding: 8px 12px; margin: 4px 6px 4px 0; cursor: pointer; }
.tutorial-workshop button, .tutorial-preview button { background: #2b3947; color: #fff4d5; border: 1px solid #b9a671; border-radius: 6px; }
.tutorial-workshop button:hover, .tutorial-preview button:hover { background: #3c4d5d; }
.tutorial-workshop :focus-visible, .tutorial-preview :focus-visible, #tutorial-coach :focus-visible { outline: 3px solid #f5ce73; outline-offset: 3px; }
.tutorial-workshop button:disabled { opacity: .6; cursor: wait; }
.exercise-choices { display: grid; gap: 8px; margin: 12px 0; }
.exercise-choices button { text-align: left; margin: 0; }
.exercise-feedback { border-left: 4px solid #e1c578; background: #253640; padding: 12px; }
.exercise-error { border-left: 4px solid #ec9387; padding: 12px; }
.exercise-location { border: 1px solid #65747e; border-radius: 8px; padding: 12px; margin: 10px 0; }
.exercise-location p { margin: 6px 0; }
.exercise-card { background: #23303d; padding: 8px; margin: 6px 0; border-radius: 4px; }
.exercise-card summary, #coach-details summary { cursor: pointer; min-height: 32px; }
.exercise-resources { font-weight: 650; }
#coach-pace-label { display: block; }
#coach-title { display: block; margin-top: 8px; }
#coach-details { margin: 10px 0; }
#coach-skills { padding-left: 20px; }
#tutorial-choice-help { margin: 8px 0; padding: 10px; background: #182b36; border-left: 3px solid #d8bd7a; font: 14px/1.45 system-ui, sans-serif; color: #f4ead5; }
#tutorial-choice-help p { margin: 4px 0; }
#tutorial-choice-help summary { cursor: pointer; padding: 4px 0; }
#gameover-learning { max-width: 600px; max-height: 28dvh; overflow: auto; margin: 12px auto; text-align: left; }
@media (max-width: 480px) {
  .tutorial-workshop, .tutorial-preview { padding: 16px; }
  .tutorial-workshop h2, .tutorial-preview h2 { font-size: 21px; }
}

.exercise-summary { padding: 8px 12px; border: 1px solid #65747e; border-radius: 8px; background: #20313b; font-size: 14px; }
.exercise-summary p { margin: 4px 0; }
.exercise-changed { border-left: 3px solid #e1c578; padding-left: 8px; }
.exercise-card img { display: block; max-width: min(240px, 100%); height: auto; margin: 8px auto; }
.exercise-full-position > summary { cursor: pointer; min-height: 44px; padding: 8px 0; }