/* ===== HOW-TO POPUP SYSTEM ===== */

.howto-modal-bg {
  position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;
  justify-content:center;z-index:200;
}
.howto-box {
  background:#1e1e1e;border:1px solid #3a3a3a;border-radius:16px;
  width:680px;max-width:94vw;max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
/* Was an inline style="overflow:hidden" on this wrapper. Moved here so the rules are
   in one file, and so the header and footer stay put while a long step scrolls.
   overflow-x MUST stay hidden — it is what clips the sliding step track. */
.howto-steps-wrap { flex:1;min-height:0;overflow-x:hidden;overflow-y:auto; }
.howto-header {
  flex-shrink:0;display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid #2a2a2a;
}
.howto-header h3 { margin:0;font-size:15px;font-weight:600;color:#fff;flex:1; }
.howto-close {
  background:transparent;border:none;color:#888;font-size:20px;
  cursor:pointer;padding:0;line-height:1;
}
.howto-close:hover { color:#fff; }

/* Step container */
.howto-steps { display:flex;transition:transform 0.35s cubic-bezier(.4,0,.2,1); }
.howto-step {
  min-width:100%;display:flex;flex-direction:column;align-items:center;
  padding:28px 32px 20px;
}
.howto-step-label {
  font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:#aa38d8;margin-bottom:6px;
}
.howto-step h4 { font-size:18px;font-weight:700;color:#fff;margin:0 0 6px;text-align:center; }
.howto-step p { font-size:13px;color:#aaa;text-align:center;margin:0 0 22px;max-width:400px;line-height:1.6; }

/* Footer */
.howto-footer {
  flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px 22px;border-top:1px solid #2a2a2a;
}
.howto-dots { display:flex;gap:6px;justify-content:center; }
.howto-dot {
  width:7px;height:7px;border-radius:50%;background:#444;cursor:pointer;
  transition:background 0.2s;
}
.howto-dot.active { background:#aa38d8; }
.howto-btn {
  padding:7px 18px;border-radius:8px;font-size:13px;font-weight:500;
  cursor:pointer;border:none;transition:opacity 0.15s;
}
.howto-btn-skip { background:transparent;color:#888;border:1px solid #333;justify-self:start; }
.howto-btn-skip:hover { color:#fff;border-color:#555; }
.howto-btn-next { background:#aa38d8;color:#fff;justify-self:end; }
.howto-btn-next:hover { opacity:0.85; }

/* ===== VIDEO STAGE =====
   The old stage was a fixed 200px-tall box built around hand-made CSS animations
   (614 x 200, roughly 3:1 — not a ratio anything is recorded in). It follows the
   clip's own shape instead. The number is measured from the files rather than taken
   from what the recorder reports: they store 1920 x 1080 with a sample aspect ratio of
   7:8 — pixels taller than they are wide — and display as 14:9. Scaling from the
   storage numbers is what stretched the WebP frame sequences, since an image carries
   no sample aspect for a browser to honour. Change --howto-ratio in one place if the
   clips are ever re-shot at another aspect.

   The short-screen cap is applied as a max-WIDTH, not a max-height. Capping the
   height of a box that is width:100% + aspect-ratio does not shrink it: the width
   stays, the box turns wider than the clip, and object-fit:contain fills the
   difference with black down both sides. Capping the width keeps the ratio intact at
   every size, and .howto-step already centres it. --howto-cap is the tallest the
   stage may be; the calc turns that height into the width that produces it. */
.howto-stage {
  --howto-ratio: 14 / 9;      /* the clips' DISPLAY shape, measured from the files */
  --howto-cap: 52vh;          /* chrome around the stage is ~270px, box is capped at 92vh */
  width:100%; aspect-ratio:var(--howto-ratio); height:auto;
  max-width:calc(var(--howto-cap) * 14 / 9);
  /* The hairline is an inset shadow rather than a border on purpose. aspect-ratio sizes
     the border box, so a 1px border leaves the CONTENT box at a slightly different ratio
     than the clip, and contain answers that with a half-pixel bar down each side. An
     inset shadow paints the same line without taking part in layout. */
  background:#0e0e0e; border-radius:12px;
  box-shadow:inset 0 0 0 1px #2a2a2a;
  overflow:hidden; position:relative; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
}
.howto-video {
  width:100%; height:100%; object-fit:contain;
  display:block; background:#0e0e0e; pointer-events:none;
}
/* Shown in place of the clip when the file is missing or will not decode. */
.howto-stage-missing { background:#141414; }
.howto-missing {
  font-size:12px; color:#666; letter-spacing:.02em;
}