.cdp-tutorial-launch { min-width: 30px !important; min-height: 30px !important; padding: 4px 9px !important; border-radius: 999px !important; font-weight: 800 !important; line-height: 1 !important; background: color-mix(in srgb, var(--primary) 14%, transparent) !important; border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--card-border)) !important; color: var(--text-primary) !important; box-shadow: none !important; } .cdp-tutorial-launch:hover, .cdp-tutorial-launch:focus-visible { background: color-mix(in srgb, var(--primary) 24%, transparent) !important; color: var(--primary) !important; } .cdp-tutorial-layer { position: fixed; inset: 0; z-index: 12000; pointer-events: none; } .cdp-tutorial-scrim { position: absolute; inset: 0; } .cdp-tutorial-shade { position: fixed; background: rgba(5, 10, 20, .22); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; } .cdp-tutorial-highlight { position: fixed; border: 2px solid var(--primary, #00bfff); border-radius: 10px; background: color-mix(in srgb, var(--primary, #00bfff) 7%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary, #00bfff) 22%, transparent), 0 14px 38px rgba(0, 0, 0, .28); transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; } .cdp-tutorial-card { position: fixed; width: min(320px, calc(100vw - 24px)); max-height: min(290px, calc(100vh - 24px)); overflow: auto; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--card-border)); border-radius: 10px; background: color-mix(in srgb, var(--card-bg) 94%, var(--bg-end) 6%); color: var(--text-primary); box-shadow: 0 18px 48px rgba(0, 0, 0, .34); pointer-events: auto; } .cdp-tutorial-card h3 { margin: 0 0 6px; font-size: .96rem; line-height: 1.25; color: var(--text-primary); } .cdp-tutorial-card p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-muted); } .cdp-tutorial-progress { margin-top: 10px; font-size: .78rem; color: color-mix(in srgb, var(--text-muted) 82%, var(--primary)); } .cdp-tutorial-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 12px; } .cdp-tutorial-actions button, .cdp-exclusions-hint button { border: 1px solid var(--card-border); border-radius: 8px; padding: 7px 10px; font-size: .82rem; font-weight: 750; cursor: pointer; background: var(--surface-muted, rgba(255,255,255,.06)); color: var(--text-primary); } .cdp-tutorial-actions button:hover, .cdp-tutorial-actions button:focus-visible, .cdp-exclusions-hint button:hover, .cdp-exclusions-hint button:focus-visible { background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: color-mix(in srgb, var(--primary) 42%, var(--card-border)); } .cdp-tutorial-actions .cdp-tutorial-primary, .cdp-exclusions-hint button { background: color-mix(in srgb, var(--primary) 24%, transparent); border-color: color-mix(in srgb, var(--primary) 52%, var(--card-border)); } .cdp-exclusions-hint { position: fixed; right: 18px; bottom: 18px; z-index: 11900; width: min(420px, calc(100vw - 36px)); padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--card-border)); border-radius: 8px; background: color-mix(in srgb, var(--card-bg) 94%, var(--bg-end) 6%); color: var(--text-primary); box-shadow: 0 16px 42px rgba(0, 0, 0, .28); } .cdp-exclusions-hint p { margin: 0 0 12px; font-size: .9rem; line-height: 1.45; color: var(--text-muted); } @media (max-width: 720px) { .cdp-tutorial-card { left: 14px !important; right: 14px !important; top: auto !important; bottom: 14px !important; width: auto; } .cdp-tutorial-actions { justify-content: stretch; } .cdp-tutorial-actions button { flex: 1 1 auto; } }