[data-oysterun-article-body] {
  max-width: 900px;
  color: #171922;
}

[data-oysterun-article-body] .article-lead {
  font-size: 1.15rem;
}

[data-oysterun-article-body] p,
[data-oysterun-article-body] li,
[data-oysterun-article-body] td,
[data-oysterun-article-body] th {
  line-height: 1.72;
}

[data-oysterun-article-body] section {
  margin-block: 2.6rem;
}

[data-oysterun-article-body] .tutorial-result,
[data-oysterun-article-body] .safety-note,
[data-oysterun-article-body] .boundary-note {
  display: block;
  margin-block: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #0f766e;
  border-radius: 0.75rem;
  background: #f0fdfa;
}

[data-oysterun-article-body] .safety-note {
  border-color: #b45309;
  background: #fffbeb;
}

[data-oysterun-article-body] .boundary-note {
  border-color: #6d28d9;
  background: #f5f3ff;
}

[data-oysterun-article-body] ol li + li,
[data-oysterun-article-body] ul li + li {
  margin-top: 0.45rem;
}

[data-oysterun-article-body] code {
  overflow-wrap: anywhere;
}

[data-oysterun-article-body] .state-table,
[data-oysterun-article-body] .skill-table {
  width: 100%;
  margin-block: 1.2rem;
  border-collapse: collapse;
}

[data-oysterun-article-body] .state-table th,
[data-oysterun-article-body] .state-table td,
[data-oysterun-article-body] .skill-table th,
[data-oysterun-article-body] .skill-table td {
  padding: 0.75rem;
  border: 1px solid #cbd5e1;
  vertical-align: top;
  text-align: left;
}

[data-oysterun-article-body] .state-table th,
[data-oysterun-article-body] .skill-table th {
  background: #f1f5f9;
}

@media (max-width: 640px) {
  [data-oysterun-article-body] .state-table thead,
  [data-oysterun-article-body] .skill-table thead {
    display: none;
  }

  [data-oysterun-article-body] .state-table,
  [data-oysterun-article-body] .state-table tbody,
  [data-oysterun-article-body] .state-table tr,
  [data-oysterun-article-body] .state-table td,
  [data-oysterun-article-body] .skill-table,
  [data-oysterun-article-body] .skill-table tbody,
  [data-oysterun-article-body] .skill-table tr,
  [data-oysterun-article-body] .skill-table td {
    display: block;
    width: 100%;
  }

  [data-oysterun-article-body] .state-table tr,
  [data-oysterun-article-body] .skill-table tr {
    margin-bottom: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    overflow: hidden;
  }

  [data-oysterun-article-body] .state-table td,
  [data-oysterun-article-body] .skill-table td {
    border: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  [data-oysterun-article-body] .state-table td:last-child,
  [data-oysterun-article-body] .skill-table td:last-child {
    border-bottom: 0;
  }

  [data-oysterun-article-body] .state-table td::before,
  [data-oysterun-article-body] .skill-table td::before {
    display: block;
    margin-bottom: 0.2rem;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: attr(data-label);
  }
}

[data-oysterun-article-body] .tutorial-screenshot {
  margin: 1.25rem 0 1.75rem;
}

[data-oysterun-article-body] .tutorial-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d8e1ea;
  border-radius: 0.75rem;
  background: #f7f9fc;
}

[data-oysterun-article-body] .tutorial-screenshot figcaption {
  margin-top: 0.55rem;
  color: #4b5968;
  font-size: 0.95rem;
  line-height: 1.55;
}