#root > main {
  display: flex;
  flex-direction: column;
}

#root > main > .topbar {
  order: 0;
}

#root > main > .hero {
  order: 1;
}

#root > main > .quick-notes {
  order: 2;
  margin-bottom: 20px;
}

#root > main > .workspace {
  order: 3;
  padding-top: 12px;
}

#root > main > .method-section {
  order: 4;
  margin-top: 0;
  padding-top: 36px;
}

#root > main > footer {
  order: 5;
}

.method-section {
  grid-template-columns: 0.5fr 1.5fr;
  gap: 40px;
}

.method-intro h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.03em;
}

.result-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (width <= 920px) {
  .method-section {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

@media (width <= 620px) {
  #root > main > .quick-notes {
    margin-bottom: 12px;
  }

  #root > main > .workspace {
    padding-top: 8px;
  }
}