/* Semantic KB articles. Scoped so authored legacy EZ pages keep their own palette. */
.kb-prose {
  --kb-bg: var(--surface, #fff);
  --kb-ink: var(--ink, #101828);
  --kb-text: var(--ink-2, #344054);
  --kb-muted: var(--ink-3, #667085);
  --kb-line: var(--line, #e4e8ef);
  --kb-soft: var(--bg-soft, #f5f7fa);
  --kb-accent: var(--accent, #2563eb);
  --kb-tint: var(--accent-tint, #eef4ff);
  --kb-pin: #fff;
  --kb-pin-bg: #2563eb;
  --kb-image-control-bg: #141414;
  --kb-image-control-ink: #fff;
  --kb-image-backdrop: #000d;
  box-sizing: border-box;
  color: var(--kb-text);
  /* the page's own background: a surface here was a padless grey slab on the black dark page */
  background: transparent;
  font-family: var(--font-body, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
[data-theme='dark'] .kb-prose {
  --kb-bg: var(--surface, #141414);
  --kb-ink: var(--ink, #ebebeb);
  --kb-text: var(--ink-2, #d9d9d9);
  --kb-muted: var(--ink-3, #a6a6a6);
  --kb-line: var(--line, #303030);
  --kb-soft: var(--bg-soft, #1f1f1f);
  --kb-accent: var(--accent, #69a8ff);
  --kb-tint: var(--accent-tint, #111d2c);
}
.kb-prose *, .kb-prose *::before, .kb-prose *::after { box-sizing: border-box; }
.kb-prose h1 { font-size: 34px; letter-spacing: -1px; line-height: 1.2; color: var(--kb-ink); margin: 0 0 18px; font-weight: 700; }
.kb-prose h2 { font-size: 24px; line-height: 1.4; letter-spacing: -.5px; margin: 42px 0 16px; color: var(--kb-ink); scroll-margin-top: 24px; }
.kb-prose h3 { font-size: 19px; line-height: 1.5; margin: 30px 0 12px; color: var(--kb-ink); scroll-margin-top: 24px; }
.kb-prose p { margin: 16px 0; }
.kb-prose .lead { font-size: 18px; color: var(--kb-muted); margin-bottom: 34px; }
.kb-prose img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--kb-line); margin: 20px auto; }
.kb-prose figure { margin: 26px 0; }
.kb-prose figcaption { font-size: 13px; text-align: left; color: var(--kb-muted); padding: 12px 2px 0; line-height: 1.6; }
.kb-prose figcaption strong { color: var(--kb-ink); }
.kb-prose a { color: var(--kb-accent); text-decoration: underline; text-decoration-color: var(--kb-line); text-underline-offset: 3px; }
.kb-prose a:hover { text-decoration-color: currentColor; }
.kb-prose ul, .kb-prose ol { padding-left: 26px; margin: 18px 0; }
.kb-prose li { padding-left: 6px; margin: 8px 0; }
.kb-prose blockquote { border-left: 3px solid var(--kb-accent); background: var(--kb-tint); margin: 24px 0; padding: 12px 20px; border-radius: 0 8px 8px 0; }
.kb-prose pre { background: var(--kb-soft); border: 1px solid var(--kb-line); padding: 18px; overflow: auto; border-radius: 8px; white-space: pre-wrap; }
.kb-prose code { font-size: .9em; font-family: Consolas, monospace; }
.kb-prose details { border: 1px solid var(--kb-line); border-radius: 8px; margin: 10px 0; background: var(--kb-bg); }
.kb-prose details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--kb-ink); list-style-position: inside; }
.kb-prose details > summary:hover { color: var(--kb-accent); }
.kb-prose details > summary:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: -2px; border-radius: 8px; }
.kb-prose details[open] > summary { border-bottom: 1px solid var(--kb-line); }
.kb-prose details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.kb-prose details > :last-child { margin-bottom: 16px; }
.kb-prose details > .kb-code { margin: 16px; }
.kb-prose .kb-code { position: relative; margin: 16px 0; }
.kb-prose .kb-code pre { margin: 0; padding-top: 44px; }
.kb-prose .kb-code-copy { position: absolute; top: 8px; right: 8px; appearance: none; margin: 0; padding: 0 12px; height: 28px; border: 1px solid var(--kb-line); border-radius: 6px; color: var(--kb-ink); background: var(--kb-bg); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.kb-prose .kb-code-copy:hover { background: var(--kb-tint); color: var(--kb-accent); }
.kb-prose .kb-code-copy:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }
.kb-prose .kb-code-copy.is-copied { color: var(--kb-accent); border-color: var(--kb-accent); }
.kb-prose table { border-collapse: collapse; width: 100%; margin: 24px 0; }
.kb-prose td, .kb-prose th { border: 1px solid var(--kb-line); padding: 10px 14px; text-align: left; }
.kb-prose th { background: var(--kb-soft); }
.kb-prose hr { border: 0; border-top: 1px solid var(--kb-line); margin: 32px 0; }
.kb-prose video { max-width: 100%; }
/* Highlights sit above the original image. No screenshot pixels or labels are changed. */
.kb-screenshot { display: block; position: relative; isolation: isolate; margin: 20px auto 0; max-width: 100%; width: fit-content; }
.kb-prose .kb-screenshot img { margin: 0; }
.kb-screenshot > img { display: block; max-width: 100%; height: auto; }
.kb-screenshot > .kb-image-open { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; padding: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }
.kb-image-open > span { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; background: var(--kb-image-control-bg, #141414); color: var(--kb-image-control-ink, #fff); border: 1px solid var(--kb-image-control-ink, #fff); border-radius: 7px; font: 23px/1 sans-serif; opacity: .82; }
.kb-image-open:hover > span { opacity: 1; }
.kb-image-open:focus-visible { outline: 3px solid var(--kb-accent, #2563eb); outline-offset: 4px; }
.kb-prose.kb-image-viewer { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; overflow: hidden; background: transparent; }
.kb-image-viewer[open] { display: flex; flex-direction: column; }
.kb-image-viewer::backdrop { background: var(--kb-image-backdrop); }
.kb-image-stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px; background: transparent; overscroll-behavior: contain; touch-action: none; cursor: default; scrollbar-width: none; }
.kb-image-stage::-webkit-scrollbar { display: none; }
.kb-image-stage:focus-visible { outline: none; }
.kb-image-canvas { flex: none; position: relative; margin: auto; cursor: zoom-in; box-shadow: 0 10px 40px #0008; }
.kb-image-stage.zoomed .kb-image-canvas { cursor: grab; }
.kb-image-stage.dragging .kb-image-canvas { cursor: grabbing; }
.kb-image-viewer .kb-image-canvas img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; user-select: none; }
/* The badge sits outside the box corner so it never covers the highlighted control. */
.kb-focus { position: absolute; border: 2px solid var(--kb-pin-bg); border-radius: 8px; box-shadow: 0 0 0 1px var(--kb-pin), 0 0 0 5px color-mix(in srgb, var(--kb-pin-bg) 18%, transparent); pointer-events: none; }
.kb-focus[data-step]::before { content: attr(data-step); position: absolute; top: -17px; left: -17px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--kb-pin); border-radius: 50%; background: var(--kb-pin-bg); color: var(--kb-pin); font: 700 11px/1 "Segoe UI", sans-serif; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
@media (max-width: 600px) { .kb-prose { font-size: 15px; } .kb-prose h1 { font-size: 28px; } .kb-prose h2 { font-size: 22px; } }