html, body { margin: 0; background: #424242; }

/* The design is a fixed 1920×7700 canvas (the Figma prototype). It is scaled
   proportionally to the viewport width so it stays pixel-accurate at any size. */
#stage-wrap { position: relative; width: 100%; overflow: hidden; }
#stage { position: relative; width: 1920px; height: 7700px; transform-origin: top left; }

/* Hand-drawn circle highlight. Wrap any text in <span class="green-circle">…</span>
   and the SVG stroke (preserveAspectRatio="none") stretches around it — sized in em
   relative to the text, so it tracks the type at any breakpoint. No fixed coordinates.
   Add .green-circle-phrase for longer runs (uses the wider stroke artwork). */
.green-circle { position: relative; display: inline-block; white-space: nowrap; }
.green-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 1.7em;
  transform: translate(-50%, -52%) rotate(-4.53deg);
  background: url("assets/circle-hl-1.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.green-circle-phrase::after {
  background-image: url("assets/circle-hl-2.svg");
  transform: translate(-50%, -52%) rotate(-0.53deg);
}