.tutorial-page {
  background:
    radial-gradient(circle at 10% 8%, rgba(94, 179, 228, 0.14), transparent 28rem),
    var(--color-background);
}

.tutorial-shell {
  display: grid;
  gap: var(--space-xl);
  width: min(100% - (var(--space-lg) * 2), var(--container-width));
  margin: var(--space-xl) auto var(--space-2xl);
}

.tutorial-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.tutorial-header > div:first-child {
  display: grid;
  gap: var(--space-xs);
  max-width: 48rem;
}

.tutorial-header h1 {
  font-size: clamp(2rem, 4vw, var(--font-size-h1));
}

.tutorial-header p:not(.tutorial-eyebrow) {
  color: var(--color-text-muted);
}

.tutorial-eyebrow,
.tutorial-progress {
  color: var(--color-primary-blue);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.tutorial-track-picker,
.tutorial-step-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tutorial-track-picker .is-active {
  pointer-events: none;
}

.tutorial-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(360px, 1.25fr) minmax(220px, 0.65fr);
  gap: var(--space-lg);
  align-items: start;
}

.tutorial-guide,
.tutorial-gates {
  display: grid;
  gap: var(--space-md);
}

.tutorial-guide h2 {
  font-size: var(--font-size-h2);
}

.tutorial-guide > p:not(.tutorial-progress, .tutorial-track-status) {
  color: var(--color-text-muted);
  line-height: 1.65;
}

.tutorial-goal {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-left: 4px solid var(--color-yellow);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.tutorial-goal span {
  color: var(--color-text-muted);
}

.tutorial-track-status {
  min-height: 1.5rem;
  color: var(--color-primary-blue);
  font-weight: var(--font-weight-semibold);
}

.tutorial-sphere {
  min-height: 520px;
}

.tutorial-device-actions {
  justify-content: center;
}

.tutorial-gates {
  align-self: start;
  align-content: start;
  width: 100%;
}

.tutorial-gates .gate-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.tutorial-gates .gate-controls .btn {
  min-height: 52px;
  padding: var(--space-sm);
  font-size: 1rem;
}

@media (max-width: 1100px) {
  .tutorial-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
  }

  .tutorial-guide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .tutorial-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .tutorial-layout {
    grid-template-columns: 1fr;
  }

  .tutorial-guide,
  .tutorial-gates {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .tutorial-shell {
    width: min(100% - (var(--space-md) * 2), var(--container-width));
    margin-top: var(--space-md);
  }

  .tutorial-track-picker,
  .tutorial-track-picker .button,
  .tutorial-step-actions,
  .tutorial-step-actions .button {
    width: 100%;
  }

  .tutorial-gates .gate-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:root[data-theme="dark"] .tutorial-eyebrow,
:root[data-theme="dark"] .tutorial-progress,
:root[data-theme="dark"] .tutorial-track-status,
:root[data-theme$="-dark"] .tutorial-eyebrow,
:root[data-theme$="-dark"] .tutorial-progress,
:root[data-theme$="-dark"] .tutorial-track-status {
  color: var(--color-readable-blue, #9de4ff);
}