@layer flygram-components {
  .demo-guidance {
    position: fixed; z-index: 250; box-sizing: border-box; width: 280px;
    max-width: calc(100vw - 24px); padding: 32px 16px;
    color: #161616; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    box-shadow: 0 4px 18px #16161618;
    font: var(--ui-font-14, 14px)/1.45 var(--ui-font-family, 'IBM Plex Sans', sans-serif);
  }
  .desktop-app[data-view="mailing"] #app-mail-actions .demo-guidance-help[data-ui="icon"] .app-icon { fill: none; stroke: currentColor; }
  .demo-guidance[hidden], .demo-guidance-halo[hidden], .demo-guidance-help[hidden] { display: none !important; }
  .demo-guidance::before {
    content: ''; position: absolute; width: 10px; height: 10px; background: #fff;
    border: 1px solid #e0e0e0; transform: rotate(45deg);
  }
  .demo-guidance[data-side='top']::before { left: calc(var(--tip-x) - 5px); bottom: -6px; border-top: 0; border-left: 0; }
  .demo-guidance[data-side='bottom']::before { left: calc(var(--tip-x) - 5px); top: -6px; border-bottom: 0; border-right: 0; }
  .demo-guidance[data-side='right']::before { left: -6px; top: calc(var(--tip-y) - 5px); border-top: 0; border-right: 0; }
  .demo-guidance .demo-guidance-close[data-ui] { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #525252; cursor: pointer; }
  .demo-guidance p { margin: 0; }
  .demo-guidance .demo-guidance-note { margin-top: 8px; font-size: 12px; color: #6f6f6f; }
  .demo-guidance-links { display: grid; gap: 4px; margin-top: 12px; }
  .demo-guidance a[data-ui] { color: #0f62fe; font-size: 12px; overflow-wrap: anywhere; text-decoration: none; }
  .demo-guidance .demo-guidance-next[data-ui] { margin-top: 12px; padding: 7px 12px; border: 1px solid #0f62fe; border-radius: 4px; background: #fff; color: #0f62fe; cursor: pointer; font: inherit; }
  .demo-guidance .demo-guidance-close[data-ui]:hover, .demo-guidance .demo-guidance-next[data-ui]:hover { background: #edf5ff; }
  .demo-guidance a:hover { text-decoration: underline; }
  .demo-guidance :is(button,a):focus-visible { outline: 2px solid #0f62fe; outline-offset: 3px; }
  .demo-guidance-halo { position: fixed; pointer-events: none; z-index: 249; box-sizing: border-box; border: 1px solid #78a9ff; }
  .demo-guidance[data-step^='demo-'] { width: 280px; padding: 32px 12px 12px; font-size: 12px; }
  .demo-guidance .demo-guidance-never[data-ui] { display:block; margin:16px 0 0; padding:0; min-height:28px; color:#525252; background:transparent; border:0; font:inherit; text-decoration:underline; cursor:pointer; }
  .demo-guidance[data-kind='error'] { border-color:#da1e28; }
  .demo-guidance[data-kind='error'] > p { color:#a2191f; }
}