.walkthrough-start { border:1px solid #a8c4ab; border-radius:9px; background:#f0f6e8; color:#2b5840; padding:7px 11px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.walkthrough-start:disabled { opacity:.5; cursor:wait; }
.walkthrough-layer { position:fixed; inset:0; z-index:12000; pointer-events:none; }
.walkthrough-shade { position:fixed; background:rgb(19 33 29 / 68%); pointer-events:auto; }
.walkthrough-ring { position:fixed; border:3px solid #ffd66b; box-shadow:0 0 0 2px #fff8; border-radius:10px; pointer-events:none; }
.walkthrough-bubble { position:fixed; box-sizing:border-box; padding:18px; overflow:auto; border-radius:18px; border:1px solid #e2e8d5; background:#fffef7; color:#294438; box-shadow:0 12px 48px #102a3d38; pointer-events:auto; overscroll-behavior:contain; }
.walkthrough-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:700; color:#5b755f; }
.walkthrough-top button { background:none; border:0; padding:5px 0 5px 7px; color:#606e64; font:inherit; cursor:pointer; }
.walkthrough-bubble h2 { font-size:18px; line-height:1.4; margin:10px 0 8px; color:#214c37; }
.walkthrough-bubble p { margin:0; font-size:14px; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; }
.walkthrough-bubble #walkthroughTask { margin-top:10px; padding:8px 10px; border-radius:9px; background:#fff2cf; color:#6b541c; font-size:12px; }
.walkthrough-bubble #walkthroughTask.is-done { background:#e4f1dd; color:#385b35; }
.walkthrough-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; }
.walkthrough-controls button { border:1px solid #bfd0bc; border-radius:9px; padding:9px 14px; background:#fff; color:#365b44; font:inherit; font-size:13px; font-weight:700; cursor:pointer; min-height:38px; }
.walkthrough-controls #walkthroughNext { background:#2c6046; color:#fff; border-color:#2c6046; }
.walkthrough-controls button:disabled { opacity:.4; cursor:not-allowed; }
.walkthrough-bubble :focus-visible,.walkthrough-start:focus-visible { outline:3px solid #deaa2e; outline-offset:3px; }
.walkthrough-example-link { color:#315f47; text-underline-offset:3px; font-size:13px; }
@media(max-width:600px) { .walkthrough-bubble { padding:14px; border-radius:15px; } .walkthrough-bubble h2 { font-size:16px; } .walkthrough-bubble p { font-size:13px; } .walkthrough-start { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .walkthrough-layer * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }