/* Help uses the existing app tokens and controls. The tour reference is
   DiNHfZXOnUhOGyhUVoSJjA / 378:14217. Opaque neutral surfaces intentionally
   replace the prototype's acrylic so contrast does not depend on the page. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Help Center: existing page treatment, independent of the tour. */
.help-hero {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.help-hero h1 { margin: 0 0 6px 0; }
.help-hero .lead {
  margin: 0 0 14px 0;
  color: var(--muted);
  font-size: 15px;
}
.help-hero-actions,
.help-contact-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.help-contact-actions { margin-top: 10px; }
.help-hero-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.help-hero-hint kbd,
.help-shortcuts kbd,
.help-modal-hint kbd,
.help-step-shortcuts kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--colorNeutralBackground2, #fafafa);
  font-family: inherit;
  font-size: 12px;
  text-align: center;
}
.help-shortcuts {
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.help-shortcuts h2 { margin: 0 0 4px; font-size: 16px; }
.help-shortcuts-intro { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.help-shortcuts-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-shortcut-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.help-shortcut-keys {
  flex: 0 0 auto;
  min-width: 64px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.help-shortcut-info {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.help-shortcut-label { font-size: 13px; }
.help-shortcut-scope { color: var(--muted); font-size: 12px; }
.help-topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-topic-card {
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.help-topic-card[open] { box-shadow: var(--shadow); }
.help-topic-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
}
.help-topic-summary::-webkit-details-marker { display: none; }
.help-topic-summary:hover { background: var(--colorNeutralBackground3); }
.help-topic-summary:active { background: var(--colorNeutralBackground4); }
.help-topic-summary:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: -2px;
}
.help-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--colorCompoundBrandForeground1);
}
.help-topic-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-topic-step {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.help-topic-title { font-size: 15.5px; }
.help-topic-body { padding: 0 16px 18px 62px; color: var(--text); line-height: 1.5; }
.help-topic-body p { margin: 0 0 10px 0; }
.help-topic-bullets { margin: 0 0 10px 0; padding-left: 18px; }
.help-topic-bullets li { margin-bottom: 4px; }
.help-topic-tour-link { margin-top: 4px; padding: 7px 14px; font-size: 13px; }

/* Tour shell: title, example with guidance, stable footer. There is one
   scrolling reading region; navigation remains visible at short heights. */
.help-modal {
  box-sizing: border-box;
  width: min(780px, calc(100vw - 48px));
  height: min(520px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  min-width: 0;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadius2XLarge);
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
  box-shadow: var(--shadow-lg);
  font-family: var(--fontFamilyBase);
  font-synthesis: none;
}
.help-modal::backdrop { background: rgba(0, 0, 0, 0.4); }
.help-modal-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}
.help-modal-visual { position: relative; min-width: 0; overflow: hidden; }
.help-modal-photo { position: absolute; inset: 0; }
.help-modal-photo > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.help-modal-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.help-modal-body {
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.help-step { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.help-step[hidden],
#help-modal-next[hidden],
#help-modal-back[hidden],
#help-modal-done[hidden] { display: none; }
.help-step-title {
  margin: 0;
  color: var(--colorNeutralForeground1);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  overflow-wrap: anywhere;
}
/* Headings receive reading focus, but are not interactive controls. */
.help-step-title:focus { outline: none; }
.help-step-summary {
  max-width: 66ch;
  margin: 10px 0 0;
  color: var(--colorNeutralForeground2);
  font-size: 14px;
  line-height: 20px;
}
.help-step-more-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--colorCompoundBrandForeground1);
}
.help-step-more-link:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Noninteractive examples. White containment is for the specimen itself,
   not for the instructional text alongside it. No synthetic form controls. */
.help-example {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.help-example-specimen,
.help-example-guidance { min-width: 0; }
.help-example-badge {
  display: block;
  margin: 0 0 8px;
  color: var(--colorCompoundBrandForeground1);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.help-example-guidance p {
  margin: 0;
  color: var(--colorNeutralForeground2);
  font-size: 13px;
  line-height: 18px;
}
.help-example-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.help-example-caption {
  display: block;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--colorNeutralForeground2);
}
.help-example-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.help-example-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--borderRadiusMedium);
  border: 1px solid var(--colorNeutralStroke1);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.help-example-chip-accent {
  border-color: var(--colorBrandBackground);
  color: var(--colorCompoundBrandForeground1);
}
.help-example-review,
.help-example-card,
.help-example-note,
.help-example-export,
.help-example-context {
  padding: 14px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadius2XLarge);
  background: var(--colorNeutralBackground1);
}
.help-example-review p { margin: 4px 0 12px; font-size: 14px; line-height: 20px; }
.help-example-review-divider { display: inline-flex; margin-bottom: 12px; color: var(--colorNeutralForeground3); transform: rotate(90deg); }
.help-example-card { padding: 0; overflow: hidden; }
.help-example-card > img { display: block; width: 100%; height: 128px; object-fit: cover; }
.help-example-card-body { padding: 14px; }
.help-example-card-title { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.help-example-card-icon { display: inline-flex; color: var(--colorCompoundBrandForeground1); }
.help-example-detection { display: grid; gap: 10px; }
.help-example-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadius2XLarge);
  background: var(--colorNeutralBackground1);
}
.help-example-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 80px;
  border: 2px solid var(--colorBrandBackground);
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground3);
}
.help-example-chain,
.help-example-sequence { margin: 0; padding: 0; list-style: none; }
.help-example-chain li,
.help-example-sequence li { position: relative; }
.help-example-chain li + li,
.help-example-sequence li + li { margin-top: 20px; }
.help-example-chain li + li::before,
.help-example-sequence li + li::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 20px;
  top: -21px;
  left: 24px;
  background: var(--colorNeutralStroke1);
}
.help-example-chain li {
  padding: 10px 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground1);
}
.help-example-chain li:last-child { border-color: var(--colorBrandBackground); }
.help-example-chain strong { display: block; font-size: 13px; line-height: 18px; }
.help-example-chain p { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--colorNeutralForeground2); }
.help-example-sequence li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusXLarge);
  background: var(--colorNeutralBackground1);
}
.help-example-seq-num {
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadiusCircular);
  background: var(--colorNeutralBackground3);
  color: var(--colorCompoundBrandForeground1);
  font-size: 12px;
  font-weight: 600;
}
.help-example-seq-text { display: grid; gap: 2px; min-width: 0; }
.help-example-seq-label { font-size: 13px; font-weight: 600; line-height: 18px; }
.help-example-seq-desc { font-size: 12px; line-height: 16px; color: var(--colorNeutralForeground2); }
.help-example-sequence li:first-child {
  border-color: var(--colorBrandBackground);
  background: var(--colorBrandBackground);
  color: var(--colorNeutralBackground1);
}
.help-example-sequence li:first-child .help-example-seq-desc { color: inherit; }
.help-example-note { margin: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.help-example-note p { margin: 8px 0 12px; }
.help-example-export { display: grid; gap: 12px; }
.help-example-export-heading { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.help-example-context { margin-top: 12px; }
.help-example-results-icon { display: block; margin-bottom: 10px; color: var(--colorNeutralForeground3); }

/* Real keyboard documentation is preserved, but can be expanded on demand so
   it does not displace the example. These shortcuts belong to review, not
   tour navigation. Native disclosure keeps the keyboard and AT semantics. */
.help-step-shortcuts {
  width: 100%;
  margin: 20px 0 0;
  border-top: 1px solid var(--colorNeutralStroke2);
}
.help-step-shortcuts-heading {
  min-height: 36px;
  padding-block: 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}
.help-step-shortcuts-heading:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 2px;
}
.help-step-shortcuts-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.help-step-shortcuts-list li { display: flex; align-items: baseline; gap: 12px; font-size: 13px; line-height: 18px; }
.help-step-shortcut-keys { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }

.help-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px 24px 24px;
}
.help-modal-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.help-modal-progress-text { margin: 0; color: var(--colorNeutralForeground2); font-size: 12px; line-height: 16px; }
.help-modal-dots { display: flex; align-items: center; gap: 4px; }
.help-modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--colorNeutralStroke1); }
.help-modal-dot.is-complete { background: var(--colorNeutralForeground3); }
.help-modal-dot.is-active { background: var(--colorBrandBackground); }
.help-modal-hint { flex-basis: 100%; margin: 0; color: var(--colorNeutralForeground3); font-size: 11px; line-height: 16px; }
.help-modal-hint kbd { font-size: 11px; }
.help-modal-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.help-modal-actions .btn {
  min-width: 76px;
  min-height: var(--control-min-height);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border-radius: var(--control-radius);
  font: 600 14px/20px var(--control-font-family);
}
.help-modal-skip {
  min-height: var(--control-min-height);
  padding: 8px 10px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--colorNeutralForeground2);
  font: 600 14px/20px var(--control-font-family);
  white-space: nowrap;
  cursor: pointer;
}
.help-modal-skip:hover { background: var(--colorNeutralBackground4); }
.help-modal-skip:active { background: var(--colorNeutralBackground4Hover); }
.help-modal-skip:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 2px;
}

/* Topic-specific composition. Never position a callout against an unrelated
   page or imply a real record exists when the tour is opened without one. */
.help-modal[data-layout-mode="contextual"] {
  width: min(640px, calc(100vw - 48px));
  height: min(500px, calc(100dvh - 48px));
}
.help-modal[data-layout-mode="contextual"] .help-modal-shell,
.help-modal[data-layout-mode="mental_model"] .help-modal-shell { grid-template-columns: minmax(0, 1fr); }
.help-modal:not([data-layout-mode="split"]) .help-modal-visual { display: none; }
.help-modal[data-topic-id="your-projects"] { height: min(520px, calc(100dvh - 48px)); }
.help-modal[data-topic-id="confirm-labels"] { height: min(560px, calc(100dvh - 48px)); }
.help-modal[data-topic-id="discuss-study"],
.help-modal[data-topic-id="find-summarize"] { height: min(480px, calc(100dvh - 48px)); }
.help-modal[data-topic-id="camera-hierarchy"] { height: min(620px, calc(100dvh - 48px)); }
.help-modal[data-topic-id="project-model"] { height: min(660px, calc(100dvh - 48px)); }
.help-modal[data-tour-step="1"] .help-modal-body { padding: 32px 24px 24px; }
.help-modal[data-tour-step="1"] .help-modal-main { background: var(--colorNeutralBackground1); }
.help-modal[data-tour-step="1"] .help-modal-footer { border-top: 0; }
.help-modal-welcome-logo { display: block; width: 152px; max-width: 100%; height: auto; margin-bottom: 40px; }
.help-step-mental-model {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}
.help-step-mental-model > :not(.help-example) { grid-column: 2; }
.help-step-mental-model .help-example { grid-column: 1; grid-row: 1 / span 5; display: block; margin: 0; }
.help-step-mental-model .help-step-more-link { justify-self: start; }
.help-step-detail { margin: 24px 0 0; color: var(--colorNeutralForeground2); font-size: 14px; line-height: 20px; }
.help-modal[data-layout-mode="mental_model"] .help-modal-actions { gap: 4px; }
.help-modal[data-layout-mode="mental_model"] .help-modal-actions .btn { min-width: 64px; }
.help-step-split .help-example { display: block; margin-top: 24px; }
.help-step-split .help-example-guidance { margin-top: 16px; }
.help-modal[data-layout-mode="split"] .help-modal-footer { flex-wrap: wrap; }
.help-modal[data-layout-mode="split"] .help-modal-progress { flex-basis: 100%; }
.help-modal[data-layout-mode="split"] .help-modal-actions { margin-left: auto; }

/* The ring lives in the native dialog's top layer, not in the target page.
   Visible overflow is essential: hidden overflow clips fixed descendants.
   The shell supplies the opaque panel above the noninteractive mask. */
.help-modal-spotlight[hidden],
.help-context-note[hidden] { display: none; }
.help-modal[data-context-mode="spotlight"] {
  position: fixed;
  margin: 0;
  right: auto;
  bottom: auto;
}
/* Both spotlight and dim steps draw their own mask from the spotlight's
   box-shadow, so: overflow must stay visible or hidden overflow clips the fixed
   mask to the dialog, the native backdrop must not dim a second time, and the
   shell must sit above the negative-z mask or the mask paints over the panel.
   Only the positioning above is specific to a step that has a target. */
.help-modal[data-context-mode] { overflow: visible; }
.help-modal[data-context-mode]::backdrop { background: transparent; }
.help-modal[data-context-mode] .help-modal-shell {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  background: var(--colorNeutralBackground3);
}
/* The mask and the ring must live on different boxes. A spread shadow inherits
   the element's corner radius and grows it by the spread distance, so a 12px
   radius becomes ~1493px at 100vmax and the arc stops covering the far corner
   of the viewport, leaving an undimmed wedge. Keeping the shadow on a
   zero-radius box holds the mask rectangular at any hole size or position; the
   rounded highlight ring is drawn on top by ::after. */
.help-modal-spotlight {
  position: fixed;
  z-index: -1;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition:
    left var(--motion-enter-duration, 160ms) var(--motion-feedback-easing, ease-out),
    top var(--motion-enter-duration, 160ms) var(--motion-feedback-easing, ease-out),
    width var(--motion-enter-duration, 160ms) var(--motion-feedback-easing, ease-out),
    height var(--motion-enter-duration, 160ms) var(--motion-feedback-easing, ease-out);
}
.help-modal-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--strokeWidthThick) solid var(--colorBrandBackground);
  border-radius: var(--borderRadius2XLarge);
}

/* Steps with no highlightable target still dim the page, so every step reads
   as part of one guided tour instead of dropping to a plain modal. The hole
   collapses to nothing at the centre and the ring is removed, leaving only
   the dim. */
.help-modal-spotlight[data-spotlight="none"] {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.64);
  transition: none;
}
.help-modal-spotlight[data-spotlight="none"]::after { display: none; }
.help-context-note {
  margin: 10px 0 0;
  color: var(--colorNeutralForeground2);
  font-size: 12px;
  line-height: 16px;
}

@media (max-width: 760px) {
  .help-modal,
  .help-modal[data-layout-mode],
  .help-modal[data-topic-id] {
    width: calc(100vw - 24px);
    height: min(680px, calc(100dvh - 24px));
    margin: auto;
  }
  .help-modal[data-topic-id="project-model"] { height: calc(100dvh - 24px); }
  .help-modal[data-tour-step="1"] { height: min(540px, calc(100dvh - 24px)); }
  .help-modal-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 116px minmax(0, 1fr); }
  .help-modal:not([data-layout-mode="split"]) .help-modal-shell { grid-template-rows: minmax(0, 1fr); }
  .help-modal-body { padding: 24px; scrollbar-gutter: auto; }
  .help-step-mental-model { display: flex; }
  .help-step-mental-model .help-example { order: 0; width: 100%; margin-top: 24px; }
  .help-step-mental-model .help-step-detail,
  .help-step-mental-model .help-step-more-link { order: 1; }
  .help-modal-footer,
  .help-modal[data-layout-mode="mental_model"] .help-modal-footer { padding: 16px 24px; }
  .help-modal-welcome-logo { margin-bottom: 24px; }
}
@media (max-width: 480px) {
  .help-modal,
  .help-modal[data-layout-mode],
  .help-modal[data-topic-id] {
    width: calc(100vw - 12px);
    height: min(680px, calc(100dvh - 12px));
    border-radius: var(--borderRadiusXLarge);
  }
  .help-modal[data-topic-id="project-model"] { height: calc(100dvh - 12px); }
  .help-modal[data-tour-step="1"] { height: min(540px, calc(100dvh - 12px)); }
  .help-modal-shell { grid-template-rows: 92px minmax(0, 1fr); }
  .help-modal-body,
  .help-modal[data-tour-step="1"] .help-modal-body { padding: 20px 16px; }
  .help-step-title { font-size: 22px; line-height: 28px; }
  .help-example { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .help-example-guidance { order: -1; }
  .help-modal-footer,
  .help-modal[data-layout-mode="mental_model"] .help-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }
  .help-modal-progress { justify-content: space-between; }
  .help-modal-hint { font-size: 11px; }
  .help-modal-actions { display: flex; gap: 8px; }
  .help-modal[data-layout-mode="split"] .help-modal-progress { flex-basis: auto; }
  .help-modal[data-layout-mode="split"] .help-modal-actions { margin-left: 0; }
  .help-modal-actions .btn { flex: 1; min-width: 0; }
  .help-modal-actions .btn,
  .help-modal-skip,
  .help-step-more-link,
  .help-step-shortcuts-heading { min-height: var(--control-min-height-mobile); }
}
@media (max-height: 620px) {
  .help-modal,
  .help-modal[data-layout-mode],
  .help-modal[data-topic-id] { height: calc(100dvh - 16px); }
}
@media (max-width: 760px) and (max-height: 620px) {
  .help-modal[data-layout-mode="split"] .help-modal-shell { grid-template-rows: 64px minmax(0, 1fr); }
  .help-modal-welcome-logo { width: 136px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .help-modal *, .help-modal *::before { animation: none; transition: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .help-modal { border: 1px solid CanvasText; }
  .help-modal-dot { border: 1px solid CanvasText; }
  .help-modal-dot.is-active { background: Highlight; forced-color-adjust: none; }
  .help-example-box { border-color: CanvasText; }
}