/* Guided tutorials. Classes are prefixed tg-; no inline styles are required (CSP style-src 'self'). */
.tg-launch{min-height:36px;white-space:nowrap}
.tg-fab{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:20;min-height:44px;padding:0 18px;border-radius:999px;background:#111;color:#fff;border:2px solid #fff;box-shadow:0 6px 24px #0004;font:inherit;font-weight:700}
.tg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Overlay: four shield rectangles frame the hole; the highlighted control stays clickable. */
.tg-root{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.tg-shield{position:fixed;background:rgba(10,10,10,.62);pointer-events:auto}
.tg-spot{position:fixed;border-radius:10px;outline:3px solid #fff;box-shadow:0 0 0 6px #111,0 0 0 9px rgba(255,255,255,.75);pointer-events:none;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
.tg-root.tg-none .tg-spot{display:none}
.tg-root.tg-dockmode .tg-shield{display:none}

.tg-bubble{position:fixed;pointer-events:auto;box-sizing:border-box;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:18px 18px 14px;border-radius:14px;background:#fff;color:#171717;border:2px solid #111;box-shadow:0 18px 60px #0006;font-size:16px;line-height:1.65;text-align:start}
.tg-bubble:focus{outline:none}
.tg-bubble:focus-visible{outline:3px solid #111;outline-offset:3px}
.tg-bubble.tg-dock{inset-inline:auto;width:min(520px,calc(100vw - 24px));box-shadow:0 10px 40px #0005}
.tg-meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px;color:#555;margin-block-end:6px}
.tg-meta b{color:#111}
.tg-title{margin:0 0 6px;font-size:19px;line-height:1.4;color:#111}
.tg-body{margin:0 0 12px;white-space:pre-line}
.tg-flag{display:inline-block;margin-block-end:6px;padding:2px 10px;border-radius:999px;background:#111;color:#fff;font-size:12px;font-weight:700}
.tg-progress{display:block;width:100%;height:6px;margin:0 0 12px;border:0;border-radius:3px;background:#e4e4e0;accent-color:#111;overflow:hidden}
.tg-progress::-webkit-progress-bar{background:#e4e4e0}
.tg-progress::-webkit-progress-value{background:#111}
.tg-progress::-moz-progress-bar{background:#111}
.tg-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tg-actions .tg-spacer{flex:1}
.tg-btn{min-height:44px;min-width:44px;padding:0 16px;border-radius:10px;border:2px solid #111;background:#fff;color:#111;font:inherit;font-weight:700;cursor:pointer}
.tg-btn.tg-primary{background:#111;color:#fff}
.tg-btn.tg-quiet{border-color:transparent;text-decoration:underline;font-weight:400;color:#333}
.tg-btn:focus-visible,.tg-link:focus-visible,.tg-centre input:focus-visible{outline:3px solid #0b57d0;outline-offset:2px}
.tg-btn[disabled]{opacity:.45;cursor:not-allowed}

/* Tutorial centre */
dialog.tg-centre{width:min(760px,96vw);max-height:92vh;padding:0;border:2px solid #111;border-radius:14px;color:#171717;background:#fff}
dialog.tg-centre::backdrop{background:rgba(10,10,10,.6)}
.tg-centre-inner{padding:22px}
.tg-centre-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tg-centre h2,.tg-centre h3{margin:0 0 6px}
.tg-centre h3{margin-block-start:20px;font-size:17px;padding-block-end:4px;border-bottom:1px solid #ddd}
.tg-centre p{margin:0 0 10px;line-height:1.65}
.tg-muted{color:#555;font-size:14px}
.tg-prefs{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:12px 0;padding:12px;border:1px solid #ddd;border-radius:10px;background:#f6f6f3}
.tg-prefs label{display:flex;gap:8px;align-items:center;min-height:44px}
.tg-prefs input{width:20px;height:20px}
.tg-list{list-style:none;margin:0;padding:0}
.tg-item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #eee}
.tg-item-main{flex:1 1 320px;min-width:0}
.tg-item strong{display:block;font-size:16px}
.tg-item small{display:block;color:#555;font-size:13px}
.tg-badge{display:inline-block;margin-inline-end:6px;padding:1px 10px;border-radius:999px;border:1px solid #111;font-size:12px;font-weight:700;background:#fff;color:#111}
.tg-badge.tg-done{background:#111;color:#fff}
.tg-others{margin-block-start:18px}
.tg-others summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.tg-inline{padding:4px 0}

@media (max-width:600px){
 .tg-bubble{padding:14px 14px 10px;font-size:15px;max-height:min(58vh,calc(100dvh - 24px))}
 .tg-title{font-size:17px}
 .tg-actions .tg-btn{flex:1 1 auto}
 .tg-centre-inner{padding:16px}
}
@media (prefers-reduced-motion:reduce){
 .tg-spot{transition:none}
 .tg-root *,.tg-centre *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
 .tg-spot{outline:3px solid Highlight;box-shadow:none}
 .tg-bubble,.tg-btn{border:2px solid CanvasText}
 .tg-shield{background:Canvas;opacity:.7}
}
@media print{.tg-root,.tg-launch,.tg-fab,.tg-centre,.tg-hint{display:none!important}}