.teach .t-tutorial-help { margin:0; flex:none; padding:10px 16px; min-height:44px; border:1px solid var(--lesson-line, var(--line)); border-radius:22px; background:var(--lesson-panel, var(--ground)); color:var(--lesson-ink, var(--fg)); font:500 14px var(--sans); cursor:pointer; }
.teach .t-tutorial-menu { position:fixed; z-index:10003; width:220px; box-sizing:border-box; padding:8px; border-radius:16px; background:var(--lesson-panel, var(--panel)); box-shadow:0 8px 24px rgb(0 0 0 / .18); }
.teach .t-tutorial-menu button { display:block; width:100%; min-height:44px; text-align:left; padding:10px 12px; border:0; background:transparent; color:var(--lesson-ink, var(--fg)); font:14px var(--sans); border-radius:12px; cursor:pointer; }
.teach .t-tutorial-menu button:hover:not(:disabled) { background:var(--lesson-soft, var(--panel)); }
.teach .t-tutorial-menu button:disabled { opacity:.45; cursor:default; }
.teach .t-tutorial-card { position:fixed; z-index:10002; box-sizing:border-box; width:min(330px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:22px; border-radius:24px; background:var(--lesson-panel, var(--panel)); color:var(--lesson-ink, var(--fg)); box-shadow:0 12px 40px rgb(0 0 0 / .2); font-family:var(--sans); }
.teach .t-tutorial-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:16px; }
.teach .t-tutorial-top span { font-size:13px; color:var(--lesson-dim, var(--fg-dim)); font-variant-numeric:tabular-nums; }
.teach .t-tutorial-card h2 { margin:0 0 10px; font:700 23px/1.18 var(--display, var(--sans)); letter-spacing:-.025em; color:inherit; }
.teach .t-tutorial-card p { margin:0; font:16px/1.5 var(--sans); color:var(--lesson-dim, var(--fg-dim)); }
.teach .t-tutorial-footer { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.teach .t-tutorial-card button { border:0; border-radius:22px; min-height:44px; padding:10px 16px; font:500 14px var(--sans); cursor:pointer; box-shadow:none; transition:transform 180ms ease-out, background-color 180ms ease-out; }
.teach .t-tutorial-skip { background:transparent; color:var(--lesson-dim, var(--fg-dim)); padding:8px 10px !important; }
.teach .t-tutorial-back { background:var(--lesson-soft, var(--ground)); color:var(--lesson-ink, var(--fg)); }
.teach .t-tutorial-next { background:var(--lesson-ink, var(--fg)); color:var(--lesson-paper, var(--ground)); }
.teach .t-tutorial-card button:hover:not(:disabled) { transform:translateY(-1px); }
.teach .t-tutorial-card button:active:not(:disabled) { transform:scale(.97); }
.teach .t-tutorial-card button:disabled { opacity:.4; cursor:default; }
.teach :is(.t-tutorial-card button, .t-tutorial-help, .t-tutorial-menu button):focus-visible { outline:2px solid var(--lesson-accent-ink, var(--fg)); outline-offset:3px; }
.teach .t-tutorial-ring { position:fixed; z-index:10001; pointer-events:none; box-sizing:border-box; border:2px solid var(--lesson-accent-ink, var(--fg)); border-radius:16px; box-shadow:0 0 0 9999px rgb(0 0 0 / .2); }
.teach :is(.t-tutorial-help, .t-tutorial-menu, .t-tutorial-card, .t-tutorial-ring, .t-tutorial-invitation)[hidden] { display:none !important; }
@media (prefers-reduced-motion:reduce) { .teach .t-tutorial-card button { transition:none; } .teach .t-tutorial-card button:hover:not(:disabled), .teach .t-tutorial-card button:active:not(:disabled) { transform:none; } }

.teach .t-tutorial-invitation { position:fixed; z-index:10004; box-sizing:border-box; width:min(260px, calc(100vw - 24px)); display:flex; align-items:center; gap:8px; padding:12px 10px 12px 18px; border-radius:18px; background:var(--lesson-accent-ink, var(--fg)); color:var(--lesson-paper, var(--ground)); box-shadow:0 8px 28px rgb(0 0 0 / .2); animation:tutorial-invite 280ms cubic-bezier(.2,.8,.2,1); }
.teach .t-tutorial-invitation::before { content:''; position:absolute; left:var(--tutorial-pointer, 50%); top:-6px; width:12px; height:12px; background:inherit; transform:translateX(-50%) rotate(45deg); }
.teach .t-tutorial-invitation button { color:inherit; background:transparent; border:0; box-shadow:none; cursor:pointer; }
.teach .t-tutorial-invitation-link { flex:1; text-align:left; padding:0; min-height:44px; font:600 16px/1.4 var(--sans); }
.teach .t-tutorial-invitation-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border-radius:50%; }
.teach .t-tutorial-invitation-close:hover { background:rgb(128 128 128 / .2); }
.teach .t-tutorial-invitation button:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:6px; }
@keyframes tutorial-invite { 0% { opacity:0; transform:translateY(-6px) scale(.96); } 75% { opacity:1; transform:translateY(1px) scale(1.01); } 100% { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .teach .t-tutorial-invitation { animation:none; } }