.tutorial-layer { position: fixed; inset: 0; z-index: 100000; isolation: isolate; }
.tutorial-layer[hidden] { display: none; }
.tutorial-shade { position: absolute; background: rgb(0 0 0 / .68); }
.tutorial-highlight { position: absolute; border: 3px solid #86efac; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 2px rgb(0 0 0 / .25); }
.tutorial-arrow { position: absolute; inset: 0; width: 100%; height: 100%; color: #86efac; pointer-events: none; }
.tutorial-arrow path[marker-end] { stroke: currentColor; stroke-width: 3; fill: none; }
.tutorial-card { position: absolute; width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 1.25rem; background: #f5f5f5; color: #252525; border: 1px solid #888; border-radius: 18px; box-shadow: 0 12px 48px rgb(0 0 0 / .35); }
[data-theme=dark] .tutorial-card { background: #252525; color: #f5f5f5; }
.tutorial-card h2 { font-size: 1.25rem; margin: .5rem 0; }
.tutorial-card p { margin: .5rem 0 1rem; font-size: .9rem; line-height: 1.55; }
.tutorial-card .eyebrow { font-size: .7rem; }
.tutorial-controls { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.tutorial-controls .button { padding: .6rem .85rem; min-height: 42px; }
.tutorial-save-status:empty { display: none; }