.simple-tutorial-open { overflow: hidden; }
.simple-tutorial { position: fixed; z-index: 1000; inset: 0; color: var(--ink); pointer-events: none; }
.simple-tutorial-spotlight { position: fixed; border: 4px solid #f2a65a; border-radius: 18px; box-shadow: 0 0 0 9999px rgb(12 31 24 / 58%); }
.simple-tutorial-target { border-radius: 18px; }
.simple-tutorial-card { position: fixed; z-index: 1002; top: 0; left: 0; width: min(330px,calc(100vw - 28px)); box-sizing: border-box; padding: 22px; border: 1px solid #cfdaca; border-radius: 20px; background: var(--cream,#fffdf7); box-shadow: 0 18px 55px rgb(8 30 20 / 28%); pointer-events: auto; }
.simple-tutorial-card > small { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.simple-tutorial-card h2 { margin: 7px 38px 8px 0; font-size: 24px; line-height: 1.15; }
.simple-tutorial-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.simple-tutorial-skip { position: absolute; top: 14px; right: 14px; padding: 7px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.simple-tutorial-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 9px; }
.simple-tutorial-actions .button { min-width: 80px; min-height: 42px; }
@media (max-width:600px) { .simple-tutorial-card { padding: 20px; } .simple-tutorial-card h2 { font-size: 22px; } }