.stage {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(62dvh, 1fr) auto;
  overflow: clip;
}

.stage-canvas {
  position: relative;
  min-height: 62dvh;
  background: #121212;
}

.stage-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(214, 252, 48, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 252, 48, 0.22) 1px, transparent 1px);
  background-size: 16px 16px;
  transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.stage.is-gridded .stage-grid,
.stage.is-aligned .stage-grid { opacity: 1; }

.ruler {
  position: absolute;
  z-index: 4;
  background: rgba(18, 18, 18, 0.92);
  color: var(--lime);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.stage.is-ruled .ruler,
.stage.is-aligned .ruler { opacity: 1; }

.ruler-h {
  top: 0;
  left: 28px;
  right: 0;
  height: 28px;
  border-bottom: 1px solid rgba(214, 252, 48, 0.35);
}

.ruler-v {
  top: 28px;
  left: 0;
  bottom: 0;
  width: 28px;
  border-right: 1px solid rgba(214, 252, 48, 0.35);
}

.ruler-corner {
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-right: 1px solid rgba(214, 252, 48, 0.35);
  border-bottom: 1px solid rgba(214, 252, 48, 0.35);
}

.guide {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: var(--lime);
  transition:
    opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.9s cubic-bezier(0.32, 0.72, 0, 1);
}

.guide-h {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(var(--off, -160px));
}

.guide-v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(var(--off, -180px));
}

.guide-label {
  position: absolute;
  color: var(--lime);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}

.guide-h .guide-label { left: 40px; top: 8px; }
.guide-v .guide-label { top: 40px; left: 10px; }

.stage.is-guiding .guide,
.stage.is-aligned .guide { opacity: 1; }
.stage.is-aligned .guide { --off: 0px; }

.field {
  position: absolute;
  inset: 0;
}

.piece {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  will-change: transform;
  transition: transform 0.95s cubic-bezier(0.32, 0.72, 0, 1);
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r));
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 2;
  transform: translate(calc(-50% + var(--x)), calc(-1 * min(84px, 19vw) + var(--y))) rotate(var(--r));
}

.mark {
  display: block;
  width: min(168px, 38vw);
  height: auto;
  border-radius: 28px;
}

.word {
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(18px, 3vw, 28px);
  white-space: nowrap;
}

.chip,
.cardlet,
.float-cta,
.float-download {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  border: 1px solid var(--line);
  background: #1a1a1a;
}

.chip { padding: 8px 10px; border-radius: 999px; color: var(--muted); }
.cardlet { width: 120px; padding: 12px; border-radius: 14px; color: var(--muted); }

.float-cta {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.float-cta svg { width: 20px; height: 20px; }

.float-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 12px;
  background: var(--lime);
  border-color: transparent;
  color: #111;
  font-family: Urbanist, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.float-download svg { width: 16px; height: 16px; }

.stage.is-messy .lockup { --x: 86px; --y: -54px; --r: -9deg; }
.stage.is-messy .chip-a { --x: 150px; --y: 70px; --r: 8deg; }
.stage.is-messy .chip-b { --x: -150px; --y: -70px; --r: -12deg; }
.stage.is-messy .float-download { --x: 168px; --y: -20px; --r: 8deg; }
.stage.is-messy .float-cta { --x: -40px; --y: 110px; --r: -7deg; }
.stage.is-messy .cardlet { --x: -170px; --y: 10px; --r: 5deg; }

.stage.is-aligned .lockup { --x: 0px; --y: 0px; --r: 0deg; }
.stage.is-aligned .chip-a { --x: 196px; --y: 0px; --r: 0deg; }
.stage.is-aligned .chip-b { --x: -196px; --y: 0px; --r: 0deg; }
.stage.is-aligned .float-download { --x: 236px; --y: -108px; --r: 0deg; }
.stage.is-aligned .float-cta { --x: -236px; --y: -108px; --r: 0deg; }
.stage.is-aligned .cardlet { --x: 0px; --y: 196px; --r: 0deg; }

.stage.is-handoff .stage-grid { opacity: 1; }

.stage-copy {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 40px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: end;
}

.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.btn:active { transform: scale(0.98); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue i { background: rgba(255, 255, 255, 0.16); }

.skip {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .stage-copy { grid-template-columns: 1fr; padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .piece, .guide, .stage-grid, .ruler { transition: none; }
}