.tutorial-help {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--bs-primary);
    box-shadow: 0 .5rem 1.25rem rgba(15, 39, 71, .28);
    font-size: 1.25rem;
}

.tutorial-help:hover,
.tutorial-help:focus-visible { background: #173d6b; }
.tutorial-help[hidden] { display: none; }

.tutorial-layer { position: fixed; inset: 0; z-index: 1080; }
.tutorial-welcome-layer { background: rgba(15, 23, 42, .45); }
.tutorial-spotlight {
    position: fixed;
    z-index: 1081;
    border: 3px solid #f59e0b;
    border-radius: .65rem;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .5), 0 0 0 .25rem rgba(255, 255, 255, .72);
    pointer-events: none;
    transition: all .2s ease;
}
.tutorial-card {
    position: fixed;
    z-index: 1082;
    width: min(23rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border-radius: .8rem;
    color: #1f2937;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, .38);
}
.tutorial-card h2 { margin: 0 0 .5rem; color: #0f2747; font-size: 1.05rem; font-weight: 700; }
.tutorial-card p { margin: 0; color: #475569; font-size: .9rem; line-height: 1.45; }
.tutorial-count { color: #64748b; font-size: .78rem; }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.tutorial-actions .btn { font-size: .85rem; }
.tutorial-welcome { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tutorial-welcome-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: .85rem; border-radius: 50%; color: #fff; background: var(--bs-primary); font-size: 1.35rem; }
body.tutorial-open { overflow: hidden; }

@media (max-width: 575px) {
    .tutorial-help { right: 1rem; bottom: 1rem; }
    .tutorial-card { left: 1rem !important; right: 1rem; width: auto; }
}