.tutorial-overlay{position:fixed;inset:0;z-index:12000;pointer-events:none}
.tutorial-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.3);pointer-events:auto}
.tutorial-card{position:fixed;max-width:25%;background:linear-gradient(180deg,#fff,#f7fbff);border-radius:10px;padding:12px;box-shadow:0 8px 28px rgba(2,6,23,0.25);z-index:12001}

/* Fixed-size variant: use a CSS variable to set the fixed width so scripts can update it
	and the browser can respect a single layout rule. Provides internal scrolling for long text. */
.tutorial-card.fixed{ box-sizing: border-box; width: var(--tutorial-fixed-width, 360px); max-width: 90vw; max-height: 72vh; overflow: auto; }
.tutorial-controls{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.tutorial-highlight{position:absolute;border-radius:8px;border:3px solid rgba(220,38,38,0.95);box-shadow:0 0 0 6px rgba(220,38,38,0.12);pointer-events:none;z-index:12002;transition:all 220ms ease}
.tutorial-card h3{margin:0 0 6px 0;font-size:16px}
.tutorial-card p{margin:0;font-size:14px;color:#334155}
.tutorial-card p{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}
.tutorial-visible{pointer-events:auto}
.tutorial-step-indicator{font-size:12px;color:#94a3b8;margin-right:auto}
.tutorial-button{background: var(--primary-button-bg, #2563eb); color: var(--primary-button-color, #fff); border:none;padding:6px 10px;border-radius:8px;cursor:pointer}
.tutorial-ghost{background:transparent;border:1px solid rgba(255, 255, 255, 0.1);color:white;padding:6px 8px;border-radius:8px}
@media (max-width:640px){.tutorial-card{max-width:92%;left:6%;right:6%}}

/* visual affordance for draggable header */
.tutorial-header{display:flex;align-items:center;gap:8px;cursor:grab}
.tutorial-card.dragging{cursor:grabbing}