.howtox { margin-top: 12px; text-align: left; border: 1px solid var(--border); border-radius: 11px; background: var(--elevated); }
  .howtox summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 12px;
    font-weight: 800; font-size: 13px; -webkit-tap-highlight-color: transparent; }
  .howtox summary::-webkit-details-marker { display: none; }
  .howtox summary .chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s; flex: none; }
  .howtox[open] summary .chev { transform: rotate(225deg) translate(-2px,-2px); }
  .howtox ol { margin: 0; padding: 4px 12px 12px; list-style: none; counter-reset: n; border-top: 1px solid var(--border); }
  .howtox li { counter-increment: n; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .howtox li:last-child { border-bottom: 0; padding-bottom: 2px; }
  .howtox .st { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; }
  .howtox .st::before { content: counter(n); width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff;
    font-size: 12px; font-weight: 800; display: grid; place-items: center; }
  .howtox .st b { font-size: 13.5px; line-height: 22px; }
  .howtox .st p { grid-column: 2; margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
  .howtox li img { display: block; width: calc(100% - 32px); margin: 8px 0 0 32px; border-radius: 8px; border: 1px solid var(--border); }
  .howtox li img + img { margin-top: 6px; }

.howtox img { height: auto; }
.howtox summary:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
.howtox[data-guide-kind="profile"] { margin: 0 0 14px; background: var(--surface); }
.howtox[data-guide-kind="profile"] summary .i { color: var(--info); }
.howtox[data-guide-kind="profile"] .st b { color: var(--text); }