/* /how-it-works/: a row of numbered steps and one step shown at a time (all of them, one under the other, without JavaScript). */
.how__step[hidden] { display: none; }

[dir] .md-typeset .how__stepper > ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 1.4rem 0 1.6rem; padding: 0; list-style: none; }
[dir] .md-typeset .how__stepper > ol > li { margin: 0; }
[dir] .md-typeset a.how__tab { display: flex; flex-direction: column; align-items: center; gap: .5rem; height: 100%; padding: .8rem .5rem; text-align: center; color: var(--lc-fg); text-decoration: none; border: 1px solid var(--lc-line); border-radius: var(--radius-box); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.how__tab .lc-num { background: #fff; color: var(--lc-accent-strong); box-shadow: inset 0 0 0 2px var(--lc-accent-strong); }
.how__name { font-size: var(--fs-ui); line-height: 1.3; }
[dir] .md-typeset a.how__tab:hover { border-color: var(--lc-accent-strong); box-shadow: 0 .6rem 1.4rem rgba(28, 95, 28, .14); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { [dir] .md-typeset a.how__tab:hover { transform: none; } }
[dir] .md-typeset a.how__tab.is-current { border-color: var(--lc-accent-strong); background: var(--lc-band); }
[dir] .md-typeset a.how__tab.is-current .how__name { font-weight: 700; color: var(--lc-strong); }
.how__tab.is-current .lc-num { background: var(--lc-accent-strong); color: #fff; }
@media (max-width: 48rem) {
  [dir] .md-typeset .how__stepper > ol { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
  .how__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the numbers stay; the step's own heading names it */
}

[dir] .md-typeset .how__step { margin: 0 0 2rem; scroll-margin-top: 4.5rem; }
.how__step > h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 .8rem; outline: none; }
.md-typeset .how__text { max-width: 52rem; }
[dir] .md-typeset .how__box { margin: 1.2rem 0 0; }
[dir] .md-typeset .how__box:not(.how__box--custom) { border: 1px solid var(--lc-line); background: #fff; }
[dir] .md-typeset .how__box h3 { margin: 0 0 .6rem; }
.md-typeset .how__box h3 span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--lc-muted); }
[dir] .md-typeset .how__box ul { margin: 0; }
[dir] .md-typeset ul.how__guides { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
[dir] .md-typeset ul.how__guides > li { margin: 0; }
/* "What to do": numbered actions, each with its guide on the line below */
[dir] .md-typeset ol.how__do { margin: 0; padding-left: 1.3rem; }
[dir] .md-typeset ol.how__do > li { margin: 0 0 .8rem; padding-left: .2rem; }
[dir] .md-typeset ol.how__do > li:last-child { margin-bottom: 0; }
[dir] .md-typeset ol.how__do > li::marker { font-weight: 700; color: var(--lc-accent-strong); }
[dir] .md-typeset ol.how__do .lc-go { display: table; margin-top: .25rem; }
[dir] .md-typeset ol.how__do--plain { list-style: disc; }
.md-typeset .how__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--lc-line); }
[dir] .md-typeset .how__step a.lc-go { font-size: var(--fs-ui); }
[dir] .md-typeset a.how__back { font-weight: 600; font-size: var(--fs-ui); color: var(--lc-muted); text-decoration: none; }
[dir] .md-typeset a.how__back:hover { color: var(--lc-accent-strong); }
.how__handoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.md-typeset .how__handoff p { margin: 0; max-width: 34rem; font-weight: 600; }
[dir] .md-typeset ul.how__guides--wide { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: .5rem 2rem; }
@media (max-width: 40rem) {
    .md-typeset .how__nav { flex-direction: column-reverse; align-items: flex-start; gap: .9rem; }
}

/* the picture at the side: the developer workflow of the preprint, with the demo's hand-drawn red loop round the block of the step being read and the rest faded (desktop only, and only with JavaScript) */
.how__map { display: none; }
@media (min-width: 64rem) {
  .how-live .how__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.2rem; align-items: start; }
  .how-live .how__map { display: block; position: sticky; top: 5rem; padding: var(--pad-box); border: 1px solid var(--lc-line); border-radius: var(--radius-box); background: var(--lc-soft); }
}
.how__stage { position: relative; }
.how__crop { position: relative; overflow: hidden; border-radius: .5rem; background: #fff; }
[dir] .md-typeset .how__map img { display: block; width: 100%; height: auto; margin: 0; border-radius: .5rem; background: #fff; }
.how__hl { display: none; position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .72); pointer-events: none; }   /* fades everything but the block */
.how__loop { display: none; position: absolute; left: calc(var(--l) - 8px); top: calc(var(--t) - 8px); width: calc(var(--w) + 16px); height: calc(var(--h) + 16px); pointer-events: none; transform: rotate(-.8deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M12 54C6 22 44 5 104 7C162 5 197 24 192 52C188 80 150 95 96 92C42 95 8 80 12 46C16 22 52 9 96 9C130 8 150 12 160 18' fill='none' stroke='%23e11d48' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }   /* the demo's hand-drawn red loop */
.how__map[data-current="1"] [data-for="1"], .how__map[data-current="2"] [data-for="2"], .how__map[data-current="3"] [data-for="3"],
.how__map[data-current="4"] [data-for="4"], .how__map[data-current="5"] [data-for="5"] { display: block; }
[dir] .md-typeset .how__map .how__caption { margin: .8rem 0 0; }
[dir] .md-typeset .how__map .how__credit { margin: .3rem 0 0; }