.tutorial-backdrop{z-index:1200;background:hsl(var(--background) / .88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);justify-content:center;align-items:center;padding:1.25rem;display:flex;position:fixed;inset:0}.tutorial-panel{background:hsl(var(--surface));border:1px solid hsl(var(--cyan) / .5);width:100%;max-width:34rem;box-shadow:var(--glow-cyan-sm);outline:none;padding:1.75rem 1.5rem 1.5rem;position:relative}.tutorial-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.tutorial-close{border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));cursor:pointer;background:0 0;flex:none;align-self:flex-start;padding:.2rem .45rem;font-family:IBM Plex Mono,monospace;font-size:.75rem;line-height:1}.tutorial-close:hover{color:hsl(var(--cyan));border-color:hsl(var(--cyan) / .6)}.tutorial-eyebrow{letter-spacing:.18em;color:hsl(var(--cyan));margin-bottom:0;font-family:IBM Plex Mono,monospace;font-size:.7rem}.tutorial-title{letter-spacing:.04em;color:hsl(var(--foreground));margin:0 0 .75rem;font-family:IBM Plex Mono,monospace;font-size:1.4rem}.tutorial-body{color:hsl(var(--muted-foreground));letter-spacing:.04em;margin:0 0 .85rem;font-family:IBM Plex Mono,monospace;font-size:.75rem;line-height:1.55}.tutorial-reward{letter-spacing:.06em;color:hsl(var(--purple));margin:0 0 1.25rem;font-family:IBM Plex Mono,monospace;font-size:.8rem}.tutorial-actions{flex-wrap:wrap;gap:.65rem;display:flex}.tutorial-btn{letter-spacing:.12em;cursor:pointer;border:1px solid hsl(var(--border));color:hsl(var(--foreground));background:0 0;padding:.65rem 1.1rem;font-family:IBM Plex Mono,monospace;font-size:.8rem}.tutorial-btn--primary{border-color:hsl(var(--cyan));color:hsl(var(--cyan));box-shadow:var(--glow-cyan-sm)}.tutorial-btn--primary:hover{background:hsl(var(--cyan) / .12)}.tutorial-btn--ghost{color:hsl(var(--muted-foreground))}.tutorial-btn--ghost:hover{color:hsl(var(--foreground));border-color:hsl(var(--cyan) / .5)}@keyframes tutorial-anim-glow{0%,to{text-shadow:0 0 6px hsl(var(--cyan) / .35);opacity:.9}50%{text-shadow:0 0 18px hsl(var(--cyan) / .85);opacity:1}}@keyframes tutorial-anim-glow-purple{0%,to{text-shadow:0 0 6px hsl(var(--purple) / .35);opacity:.9}50%{text-shadow:0 0 18px hsl(var(--purple) / .85);opacity:1}}.tutorial-anim{letter-spacing:.04em;font-family:IBM Plex Mono,monospace;font-style:normal;font-weight:700}.tutorial-anim--cyan{color:hsl(var(--cyan));animation:2.2s ease-in-out infinite tutorial-anim-glow}.tutorial-anim--purple{color:hsl(var(--purple));animation:2.2s ease-in-out infinite tutorial-anim-glow-purple}@media (prefers-reduced-motion:reduce){.tutorial-anim--cyan,.tutorial-anim--purple{animation:none}}.tutorial-body--em{letter-spacing:.1em;color:hsl(var(--foreground));margin-bottom:.9rem;font-family:IBM Plex Mono,monospace;font-size:.85rem}.tutorial-hint{letter-spacing:.06em;color:hsl(var(--muted-foreground));margin:0 0 .9rem;font-family:IBM Plex Mono,monospace;font-size:.72rem}.tutorial-options{flex-direction:column;gap:.75rem;margin-bottom:1.1rem;display:flex}.tutorial-option{text-align:left;background:linear-gradient(180deg, hsl(var(--cyan) / .09), hsl(var(--cyan) / .02));border:1px solid hsl(var(--cyan) / .55);width:100%;box-shadow:0 0 14px hsl(var(--cyan) / .18) inset, 0 0 10px hsl(var(--cyan) / .12);color:hsl(var(--foreground));cursor:pointer;align-items:center;gap:.75rem;padding:.9rem 1rem;transition:border-color .15s,box-shadow .15s,color .15s;display:flex}.tutorial-option:hover,.tutorial-option:focus-visible{border-color:hsl(var(--cyan) / .7);box-shadow:var(--glow-cyan-sm);color:hsl(var(--foreground));outline:none}.tutorial-option__tag{letter-spacing:.16em;border:1px solid hsl(var(--cyan));color:hsl(var(--cyan));background:hsl(var(--cyan) / .12);text-shadow:0 0 10px hsl(var(--cyan) / .7);box-shadow:0 0 10px hsl(var(--cyan) / .35);flex:none;align-self:center;padding:.35rem .7rem;font-family:IBM Plex Mono,monospace;font-size:.82rem;font-weight:700}.tutorial-option__tag--purple{border-color:hsl(var(--purple));color:hsl(var(--purple));background:hsl(var(--purple) / .14);text-shadow:0 0 10px hsl(var(--purple) / .7);box-shadow:0 0 10px hsl(var(--purple) / .35)}.tutorial-option:has(.tutorial-option__tag--purple){background:linear-gradient(180deg, hsl(var(--purple) / .1), hsl(var(--purple) / .02));border-color:hsl(var(--purple) / .55);box-shadow:0 0 14px hsl(var(--purple) / .18) inset, 0 0 10px hsl(var(--purple) / .12)}:is(.tutorial-option:has(.tutorial-option__tag--purple):hover,.tutorial-option:has(.tutorial-option__tag--purple):focus-visible){border-color:hsl(var(--purple));box-shadow:0 0 18px hsl(var(--purple) / .35)}.tutorial-panel .tutorial-option,.tutorial-panel .tutorial-option>span{white-space:normal!important;text-overflow:clip!important;overflow:visible!important}.tutorial-option__text{letter-spacing:.04em;white-space:normal;text-overflow:clip;overflow-wrap:break-word;flex:auto;min-width:0;font-family:IBM Plex Mono,monospace;font-size:.75rem;line-height:1.55;overflow:visible}.tutorial-option__eg{letter-spacing:.04em;color:hsl(var(--muted-foreground));margin-top:.3rem;font-family:IBM Plex Mono,monospace;font-size:.7rem;display:inline-block}@media (width<=640px){.tutorial-option{flex-direction:column;align-items:stretch;gap:.55rem}.tutorial-option__tag{text-align:center;align-self:stretch;width:100%}}.tutorial-dots{gap:.4rem;margin:0 0 1.1rem;display:flex}.tutorial-dot{background:hsl(var(--border));width:1.35rem;height:2px}.tutorial-dot--on{background:hsl(var(--cyan));box-shadow:var(--glow-cyan-sm)}
