/* In-place guidance, using the existing blue sketch controls and paper. */
#studioHelp.studio-help {
  position: fixed; z-index: 183;
  right: max(148px, env(safe-area-inset-right)); bottom: max(23px, env(safe-area-inset-bottom));
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; padding: 1px 0 0;
  background: transparent var(--fj-shape-circle) center / 22px 22px no-repeat;
  color: var(--fj-ui-line-focus); font: 550 14px/1 var(--fj-ui-font); cursor: pointer;
}
#studioHelp.studio-help:hover { background-image: var(--fj-shape-circle-hover); }
#studioHelp.studio-help:focus-visible { outline: 0; background-image: var(--fj-shape-circle-focus); }
#studioHelp[hidden], body.home-open #studioHelp, html.flowjam-entry-pending #studioHelp { display: none; }

#studioGuide {
  position: fixed; inset: 0; box-sizing: border-box;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: var(--fj-ui-ink); font: 450 13px/1.5 var(--fj-ui-font);
}
#studioGuide:not([open]), #studioGuide [hidden] { display: none !important; }
#studioGuide:not([data-mode="tour"]) :is(.studio-guide-number, .studio-guide-progress) { display: none !important; }
#studioGuide::backdrop { background: transparent; }
#studioGuide button { box-sizing: border-box; font-family: var(--fj-ui-font); cursor: pointer; }
#studioGuide .studio-guide-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#studioGuide .studio-guide-spotlight { stroke: var(--fj-ui-line); stroke-width: 2; }
#studioGuide .studio-guide-area {
  position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 16px;
  background: transparent; overflow: visible;
}
#studioGuide .studio-guide-number {
  position: absolute; width: 28px; height: 28px; display: grid; place-items: center;
  background: transparent var(--fj-shape-circle) center / 100% 100% no-repeat;
  color: #426b92; font-size: 13px; font-weight: 600; line-height: 1;
}
#studioGuide .studio-guide-area:hover .studio-guide-number,
#studioGuide .studio-guide-area[aria-current] .studio-guide-number { background-image: var(--fj-shape-circle-hover); }
#studioGuide .studio-guide-overview {
  position: absolute; z-index: 3; left: 50%; bottom: max(66px, calc(52px + env(safe-area-inset-bottom)));
  transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 16px; width: max-content; max-width: calc(100% - 24px); box-sizing: border-box;
  padding: 14px 24px; background: transparent var(--fj-shape-pill) center / 100% 100% no-repeat;
}
#studioGuide .studio-guide-overview p { margin: 0; font-size: 12px; }
#studioGuide .studio-guide-overview button, #studioGuide .studio-guide-text, #studioGuide .studio-guide-skip {
  min-height: 32px; padding: 4px 2px; border: 0; background: transparent; color: var(--fj-ui-muted); font-size: 11px;
}
#studioGuide .studio-guide-overview button { color: #426b92; }
#studioGuide .studio-guide-overview button:hover, #studioGuide .studio-guide-text:hover, #studioGuide .studio-guide-skip:hover {
  text-decoration: underline; text-underline-offset: 3px;
}
#studioGuide .studio-guide-card {
  position: absolute; z-index: 4; display: flex; flex-direction: column; box-sizing: border-box;
  width: 316px; padding: 20px 25px; border: 0; border-radius: 28px;
  background: transparent var(--fj-shape-window) center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 12px rgb(34 49 66 / 10%));
}
#studioGuide .studio-guide-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#studioGuide .studio-guide-progress { margin: 0; color: #426b92; font-size: 11px; }
#studioGuide .studio-guide-close {
  width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; flex: none;
  background: transparent; color: #426b92; font-size: 21px; line-height: 1;
}
#studioGuide .studio-guide-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#studioGuide h2 { margin: 3px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; outline: 0; }
#studioGuide .studio-guide-copy { margin: 0; }
#studioGuide .studio-guide-note { margin: 12px 0 0; color: var(--fj-ui-muted); font-size: 11px; }
#studioGuide .studio-guide-gesture {
  margin-top: 10px; padding: 4px 0; border: 0; background: transparent; color: #426b92;
  font-size: 11px; text-decoration: underline; text-underline-offset: 3px;
}
#studioGuide .studio-guide-actions { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
#studioGuide .studio-guide-navigation { display: flex; align-items: center; gap: 12px; }
#studioGuide .studio-guide-button {
  min-width: 62px; min-height: 34px; padding: 8px 14px; border: 0;
  background: transparent var(--fj-shape-pill-hover) center / 100% 100% no-repeat; color: #426b92; font-size: 12px;
}
#studioGuide button:disabled { opacity: .4; cursor: default; }
#studioGuide button:focus-visible { outline: 2px solid var(--fj-ui-line-focus); outline-offset: 2px; border-radius: 16px; }
@media (max-width: 420px) {
  #studioGuide .studio-guide-card { padding: 16px 20px; }
  #studioGuide h2 { font-size: 17px; }
  #studioGuide .studio-guide-copy { font-size: 12px; }
  #studioGuide .studio-guide-navigation { gap: 8px; }
  #studioGuide .studio-guide-overview p { flex-basis: 100%; text-align: center; }
}