:root {
  --tutorial-hero-min: 560px;
  --tutorial-hero-top: clamp(74px, 10vw, 128px);
  --tutorial-hero-bottom: clamp(82px, 11vw, 138px);
  --tutorial-hero-gap: 22px;
  --tutorial-copy-width: 780px;
  --tutorial-fact-gap: 10px;
  --tutorial-fact-pad-block: 6px;
  --tutorial-fact-pad-inline: 14px;
  --tutorial-flow-top: clamp(34px, 5vw, 64px);
  --tutorial-flow-bottom: var(--section-space);
  --tutorial-intro-width: 900px;
  --tutorial-intro-gap: 24px;
  --tutorial-step-columns: 92px minmax(0, 1fr);
  --tutorial-step-gap: clamp(24px, 5vw, 64px);
  --tutorial-step-pad: clamp(72px, 10vw, 122px);
  --tutorial-step-index-size: clamp(42px, 5vw, 66px);
  --tutorial-step-body-width: 860px;
  --tutorial-step-body-gap: 18px;
  --tutorial-step-button-top: 10px;
  --tutorial-platform-gap: 18px;
  --tutorial-platform-pad: clamp(22px, 4vw, 34px);
  --tutorial-platform-copy-gap: 14px;
  --tutorial-complete-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  --tutorial-complete-gap: clamp(28px, 6vw, 70px);
  --tutorial-complete-pad: clamp(28px, 5vw, 48px);
  --tutorial-list-gap: 12px;
  --tutorial-list-indent: 22px;
  --tutorial-line: 1px;
  --tutorial-orb-size: 520px;
  --tutorial-orb-offset: -220px;
  --tutorial-mobile-step-pad: 68px;
}

.tutorial-hero {
  position: relative;
  min-height: var(--tutorial-hero-min);
  padding-top: var(--tutorial-hero-top);
  padding-bottom: var(--tutorial-hero-bottom);
  overflow-x: clip;
  border-bottom: var(--tutorial-line) solid var(--color-border);
}

.tutorial-hero::before {
  position: absolute;
  top: var(--tutorial-orb-offset);
  right: var(--tutorial-orb-offset);
  width: var(--tutorial-orb-size);
  height: var(--tutorial-orb-size);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--color-glow-soft), transparent);
  content: "";
  pointer-events: none;
}

.tutorial-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: var(--tutorial-copy-width);
  gap: var(--tutorial-hero-gap);
}

.tutorial-hero .button-row {
  margin-top: var(--tutorial-step-button-top);
}

.tutorial-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tutorial-fact-gap);
  list-style: none;
}

.tutorial-facts li {
  max-width: 100%;
  padding: var(--tutorial-fact-pad-block) var(--tutorial-fact-pad-inline);
  overflow-wrap: anywhere;
  border: var(--tutorial-line) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.tutorial-flow {
  padding-top: var(--tutorial-flow-top);
  padding-bottom: var(--tutorial-flow-bottom);
}

.tutorial-intro {
  display: grid;
  max-width: var(--tutorial-intro-width);
  gap: var(--tutorial-intro-gap);
  margin-top: var(--section-space);
  color: var(--color-text-muted);
}

.tutorial-step {
  display: grid;
  grid-template-columns: var(--tutorial-step-columns);
  gap: var(--tutorial-step-gap);
  padding-top: var(--tutorial-step-pad);
  padding-bottom: var(--tutorial-step-pad);
  border-bottom: var(--tutorial-line) solid var(--color-border);
}

.tutorial-step-index {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--tutorial-step-index-size);
  line-height: 1;
}

.tutorial-step-body {
  display: grid;
  max-width: var(--tutorial-step-body-width);
  gap: var(--tutorial-step-body-gap);
  color: var(--color-text-muted);
}

.tutorial-step-body h2 {
  margin-bottom: var(--tutorial-step-button-top);
}

.tutorial-step-body a:not(.btn) {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dark);
  text-underline-offset: 0.2em;
}

.tutorial-step-body > .btn {
  width: max-content;
  max-width: 100%;
  margin-top: var(--tutorial-step-button-top);
}

.platform-instructions {
  display: grid;
  gap: var(--tutorial-platform-gap);
  margin-top: var(--tutorial-step-button-top);
}

.platform-instruction {
  display: grid;
  gap: var(--tutorial-platform-copy-gap);
  padding: var(--tutorial-platform-pad);
  border: var(--tutorial-line) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-panel);
  box-shadow: var(--shadow-panel);
}

.platform-instruction h3 {
  color: var(--color-text);
}

.tutorial-complete {
  display: grid;
  grid-template-columns: var(--tutorial-complete-columns);
  gap: var(--tutorial-complete-gap);
  margin-top: var(--section-space);
  padding: var(--tutorial-complete-pad);
  border: var(--tutorial-line) solid var(--color-accent-dark);
  border-radius: var(--radius-large);
  background: linear-gradient(135deg, var(--color-panel-raised), var(--color-panel));
  box-shadow: var(--shadow-card);
}

.tutorial-complete > div {
  display: grid;
  align-content: start;
  gap: var(--tutorial-step-body-gap);
}

.tutorial-complete ul {
  display: grid;
  gap: var(--tutorial-list-gap);
  align-content: start;
  list-style: none;
}

.tutorial-complete li {
  position: relative;
  padding-left: var(--tutorial-list-indent);
  color: var(--color-text-muted);
}

.tutorial-complete li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-glow-ring);
  content: "";
}

@media (max-width: 768px) {
  .tutorial-hero {
    min-height: auto;
  }

  .tutorial-step {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--tutorial-mobile-step-pad);
    padding-bottom: var(--tutorial-mobile-step-pad);
  }

  .tutorial-complete {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .tutorial-step-body > .btn {
    width: 100%;
  }

  .tutorial-facts {
    align-items: flex-start;
    flex-direction: column;
  }
}