/* A finite, local illustration; the full sequence remains readable without JS. */
.guide-intro-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.guide-intro-copy { min-width: 0; }
.guide-intro-copy > p:not(.eyebrow):not(.guide-meta) { max-width: 800px; font-size: 1.1rem; }
.guide-run {
  --run-progress: 0;
  min-width: 0;
  padding: clamp(1.1rem, 2.2vw, 2rem);
  color: var(--white);
  background: var(--black);
  border: 1px solid #303035;
}
.guide-run-label { margin: 0 0 .8rem; color: var(--green); font: 500 .66rem/1.6 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.guide-run h2 { margin: 0; font: 700 clamp(1.6rem, 2.6vw, 2.25rem)/1.08 var(--display); letter-spacing: -.035em; }
.guide-run-intro { margin: .8rem 0 1.1rem; color: #c0c0c5; font-size: .85rem; line-height: 1.55; }
.guide-run-choices, .guide-run-controls, .guide-run-progress { display: none; }
.guide-run.is-enhanced .guide-run-choices, .guide-run.is-enhanced .guide-run-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-run.is-enhanced .guide-run-progress { display: block; }
.guide-run button {
  min-height: 44px;
  padding: .6rem .75rem;
  border: 1px solid #62626a;
  border-radius: 0;
  color: var(--white);
  background: transparent;
  font: 500 .68rem/1.4 var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.guide-run button:hover:not(:disabled) { border-color: var(--green); }
.guide-run button:focus-visible { outline-color: var(--green); }
.guide-run button[aria-pressed="true"], .guide-run .guide-run-play { background: var(--green); border-color: var(--green); color: var(--black); }
.guide-run button:disabled { color: #929299; background: transparent; border-color: #39393f; cursor: default; }
.guide-run-stages { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; padding: 0; }
.guide-run-stages li { position: relative; min-width: 0; padding: .75rem; border: 1px solid #39393f; background: #141417; }
.guide-run-stage-number { display: block; color: #a6a6ad; font: 500 .66rem/1.4 var(--mono); }
.guide-run-stages svg { position: absolute; top: .65rem; right: .65rem; width: 21px; height: 21px; fill: none; stroke: #a6a6ad; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.guide-run-stages strong { display: block; margin-top: .6rem; font: 700 .85rem/1.3 var(--display); text-transform: uppercase; }
.guide-run-stages li > span:last-child { display: block; margin-top: .25rem; color: #b4b4bc; font-size: .7rem; line-height: 1.45; }
.guide-run-stages li.is-current { border-color: var(--green); background: #0e2520; }
.guide-run-stages li.is-current .guide-run-stage-number, .guide-run-stages li.is-complete .guide-run-stage-number { color: var(--green); }
.guide-run-stages li.is-current svg, .guide-run-stages li.is-complete svg { stroke: var(--green); }
.guide-run.is-exception .guide-run-stages li.is-current { border-style: dashed; }
.guide-run-track { position: relative; height: 3px; margin: 1.25rem 5px .65rem; background: #39393f; }
.guide-run-fill { position: absolute; inset: 0; background: var(--green); transform: scaleX(var(--run-progress)); transform-origin: left; }
.guide-run-token { position: absolute; top: 50%; left: calc(var(--run-progress) * 100%); width: 10px; height: 10px; background: var(--green); transform: translate(-50%, -50%); }
.guide-run-ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 5px; color: #a6a6ad; font: 500 .62rem/1.4 var(--mono); }
.guide-run-output { min-height: 112px; margin-top: .85rem; padding: .8rem 0; border-top: 1px solid #39393f; }
.guide-run-output strong { color: var(--green); font: 600 .74rem/1.5 var(--mono); }
.guide-run-output p { margin: .4rem 0 0; color: #d1d1d6; font-size: .8rem; line-height: 1.55; }
.guide-run-note { margin: .85rem 0 0; color: #a6a6ad; font: 400 .65rem/1.6 var(--mono); }
@media (min-width: 1180px) {
  .guide-intro-grid { grid-template-columns: 1.05fr 1fr; }
  .guide-hero .guide-intro-copy h1 { font-size: clamp(2.4rem, 4.1vw, 3.8rem); overflow-wrap: break-word; }
}
@media (max-width: 1179px) and (min-width: 700px) {
  .guide-run { max-width: 800px; }
  .guide-run-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guide-run-output { min-height: 86px; }
}
@media (max-width: 600px) {
  .guide-run-output { min-height: 133px; }
  .guide-run-controls button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-run *, .guide-run *::before, .guide-run *::after { animation: none !important; transition: none !important; }
}