/* Julie — the first-run tour.
 *
 * A ring around the real element rather than a modal in the middle of the
 * screen, because the point is to show you WHERE a thing is. The scrim is
 * deliberately light: darkening the page to near-black makes the highlighted
 * control the only thing visible and loses the context that made it findable.
 */
.jt-tour{ position:fixed; inset:0; z-index:1000; }

/* Transparent on purpose. The DIMMING is painted by the ring's outward
   shadow below, which is what keeps the highlighted control fully lit without
   clip-paths. This layer exists only to catch a click outside the target. */
.jt-scrim{ position:absolute; inset:0; background:transparent; }

/* The cutout. A huge spread shadow paints everything OUTSIDE this box, which
   is how the target stays fully lit and un-dimmed without clipping paths. */
.jt-ring{
  position:absolute; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(2,6,16,.62),
             0 0 0 2px rgba(10, 132, 255,.85),
             0 0 22px 4px rgba(10, 132, 255,.30);
  transition:left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
             width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
}
.jt-bubble{
  position:absolute; width:min(320px, calc(100vw - 20px));
  background:#0F1524; color:#F1F5F9;
  border:1px solid rgba(255,255,255,.12); border-radius:15px;
  padding:15px 17px 12px;
  box-shadow:0 22px 60px rgba(0,0,0,.6);
  font-family:'Space Grotesk',system-ui,sans-serif;
  transition:left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1);
}
.jt-bubble h2{
  font-family:'Sora',system-ui,sans-serif; font-weight:500;
  font-size:1rem; margin:0 0 6px; letter-spacing:-.01em;
}
.jt-bubble p{ margin:0; font-size:.86rem; line-height:1.6; color:#B6BCC6; }

.jt-foot{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.jt-count{ flex:1; color:#5C626B; font-size:.74rem;
  font-variant-numeric:tabular-nums; }
.jt-foot button{
  border-radius:9px; font:inherit; font-size:.81rem; cursor:pointer;
  padding:8px 14px; min-height:38px; border:1px solid rgba(255,255,255,.12);
}
.jt-skip{ background:transparent; color:#8E939B; }
.jt-skip:hover{ color:#F1F5F9; background:rgba(255,255,255,.06); }
.jt-next{ background:#0A84FF; border-color:#0A84FF; color:#FFFFFF; --theme-independent:1;
  font-weight:600; }
.jt-next:hover{ background:#0074E8; }

@media (prefers-reduced-motion:reduce){
  .jt-ring, .jt-bubble{ transition:none; }
}