.student-tutorial {
  box-sizing: border-box;
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.2rem, 4vw, 2.25rem);
  overflow: auto;
  color: var(--text);
  background: #171c2e;
  border: 1px solid var(--gold-border);
  border-radius: 1rem;
  box-shadow: 0 1rem 4rem #030714a6;
}

.student-tutorial::backdrop { background: #030714cc; }
.tutorial-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: clamp(1rem, 4vw, 2.25rem); }
.tutorial-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #3e3069 0%, #221f40 57%, transparent 73%); }
.tutorial-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .45rem .55rem #0507117a); }
.tutorial-copy h2 { margin: .4rem 0 .8rem; color: #ffedcf; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.1; }
.tutorial-copy .eyebrow { margin: 0; color: var(--gold-soft); }
.tutorial-actions { margin-top: 1.25rem; }
.tutorial-link { margin-top: .65rem; padding: .45rem 0; color: var(--muted); background: transparent; border: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.tutorial-link:hover, .tutorial-replay { color: var(--gold-soft); }
.tutorial-replay { margin-top: .35rem; border-top: 1px solid var(--line); }

@media (max-width: 600px) {
  .tutorial-layout { grid-template-columns: 1fr; }
  .tutorial-art { width: min(8.5rem, 40vw); margin-inline: auto; }
}