/* Case-page components shared by the 1003 showcases: Excalidraw figures. */
.ux-story-diagram{margin:32px 0;border:1px solid #222;border-radius:8px;overflow:hidden;background:#0a0a0a}
.ux-story-diagram h3{font-size:18px;line-height:1.4;padding:20px 20px 8px;margin:0}
.ux-diagram-scroll{overflow:auto;max-width:100%;background:var(--diagram-ground,#fff)}
.ux-story-diagram img{display:block;width:auto;height:auto;max-width:none;padding:20px;margin:0 auto;box-sizing:border-box}
.ux-story-diagram figcaption{padding:16px 20px;color:#b3b3b3;font-size:14px;line-height:1.6}
.ux-story-diagram details{padding:0 20px 20px;font-size:14px;line-height:1.6}
.ux-story-diagram summary{cursor:pointer;color:#f5f5f5;padding:4px 0}
.ux-story-diagram ol{padding-left:24px;margin-top:12px}
.ux-inspiration{margin-top:24px}
.ux-excalidraw-downloads{padding:0 20px 16px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}.ux-excalidraw-downloads a{color:#b8c9eb;text-decoration:underline;text-underline-offset:4px;transition:color 120ms}.ux-excalidraw-downloads a:hover{color:#fff}.ux-excalidraw-downloads a:focus-visible,.ux-diagram-scroll:focus-visible{outline:2px solid #8bb8ff;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.ux-excalidraw-downloads a{transition:none}}

/* Bodies pasted before 2026-10-03 05:40 render the method panel as div.prose.ux-method-scope > h3.
   Style that markup exactly like the shell callout (.callout + .label) so those pages need no re-paste.
   Current bodies already use <div class="callout ux-method-scope"> and are unaffected. */
.prose.ux-method-scope{max-width:none;margin-top:var(--space-32);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-24);background:var(--paper-2)}
.prose.ux-method-scope h3{display:block;margin:0 0 var(--space-8);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;line-height:inherit;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink-3)}
.prose.ux-method-scope p{padding-left:var(--space-48)}