.tutorial-help { position: fixed; right: 18px; bottom: 18px; z-index: 1050; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d4d0ed; background: #fff; color: #5142b8; font-weight: 700; font-size: 21px; box-shadow: 0 2px 10px #0002; }
.public-demo-notice { flex-shrink: 0; padding: 7px 14px; font-size: 12px; color: #453568; background: #f1ecff; border-bottom: 1px solid #d9cff4; }
.public-demo-notice a { margin-left: 12px; color: #5142b8; text-decoration: underline; }
.page-tutorial { position: fixed; inset: 0; z-index: 30000; pointer-events: none; }
.tutorial-shade { position: fixed; background: rgb(10 15 28 / 75%); pointer-events: auto; }
.tutorial-outline { position: fixed; border: 3px solid #b8adff; border-radius: 8px; box-shadow: 0 0 0 1px #fff8; }
.tutorial-card { position: fixed; width: min(370px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; padding: 22px; border-radius: 14px; background: white; color: #222638; box-shadow: 0 12px 48px #0005; pointer-events: auto; font: 15px/1.55 system-ui, sans-serif; }
.tutorial-card h2 { margin: 7px 0 10px; font-size: 21px; color: #222638; }
.tutorial-card p { margin: 0 0 20px; }
.tutorial-progress { font-size: 12px; color: #655a94; }
.tutorial-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tutorial-buttons button { border: 1px solid #d9d6e8; background: white; color: #453c64; border-radius: 7px; padding: 8px 11px; cursor: pointer; font: inherit; font-size: 13px; }
.tutorial-buttons [data-action=cancel] { margin-right: auto; padding-left: 0; border-color: transparent; }
.tutorial-buttons [data-action=next] { color: white; background: #6150c5; border-color: #6150c5; }
.tutorial-buttons button:disabled { opacity: .45; cursor: default; }
.tutorial-buttons button:focus-visible, .tutorial-help:focus-visible { outline: 3px solid #a99bed; outline-offset: 3px; }