.tutorial-dialog,.tutorial-panel,.tutorial-resume,.tutorial-sync{--tutorial-ink:#eef0f7;--tutorial-muted:#afb3c4;color:var(--tutorial-ink);background:#14161e;border:1px solid #454959;font-family:DM Sans Variable,sans-serif;box-shadow:0 24px 90px #0006}.tutorial-dialog{text-align:center;border-radius:24px;width:min(440px,100vw - 32px);max-height:calc(100dvh - 40px);padding:32px}.tutorial-dialog::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#05060bbd}.tutorial-dialog h2{letter-spacing:-.05em;outline:none;margin:14px 0;font-size:30px;font-weight:500}.tutorial-dialog p:not(.tutorial-eyebrow),.tutorial-panel>p{color:var(--tutorial-muted);font-size:14px;line-height:1.65}.tutorial-dialog small{color:var(--tutorial-muted);margin-top:14px;font-size:11px;display:block}.tutorial-eyebrow{font:9px var(--mono);letter-spacing:.13em;color:#c7cceb;margin:0}.tutorial-orbit{place-items:center;height:128px;margin-bottom:22px;display:grid;position:relative}.tutorial-orbit i{border:1px solid #737b9c;border-radius:50%;width:165px;height:90px;animation:7s ease-in-out infinite alternate tutorial-orbit;position:absolute;transform:rotate(-25deg)}.tutorial-orbit i:nth-child(2){border-color:#3c4259;width:142px;height:116px;animation-direction:alternate-reverse;transform:rotate(30deg)}.tutorial-orbit>span{z-index:1;background:radial-gradient(circle,#343b57,#171a26 70%);border-radius:50%;place-items:center;width:84px;height:84px;display:grid}.tutorial-star{color:#dde2ff;z-index:2;position:absolute;top:19px;right:calc(50% - 72px)}.tutorial-preview{color:#d4d8e9;justify-content:center;gap:18px;margin:26px 0;font-size:11px;display:flex}.tutorial-preview span{align-items:center;gap:6px;display:flex}.tutorial-primary{color:#151824;background:#e0e5ff;border-radius:9px;justify-content:center;align-items:center;gap:12px;min-height:44px;padding:11px 17px;font-size:12px;font-weight:650;display:inline-flex}.tutorial-primary:hover{background:#fff}.tutorial-dialog>.tutorial-primary{width:100%;margin-top:16px}.tutorial-quiet{color:#aeb3c6;min-height:44px;padding:12px 4px;font-size:11px}.tutorial-dialog>.tutorial-quiet{margin:4px auto 0;display:block}.tutorial-spotlight{z-index:190;pointer-events:none;border:2px solid #aebbf9;border-radius:12px;position:fixed;box-shadow:0 0 0 4px #788ce623,0 0 24px #8ea4ff38}.tutorial-panel{z-index:200;border-radius:18px;width:350px;padding:20px;position:fixed;bottom:28px;right:24px}.tutorial-panel-top{align-items:center;gap:11px;display:flex}.tutorial-avatar{background:#252a3a;border:1px solid #42495f;border-radius:13px;flex-shrink:0;place-items:center;width:42px;height:42px;display:grid}.tutorial-panel-top .tutorial-eyebrow{flex:1;font-size:8px}.tutorial-eyebrow b{color:#a0a7c1;margin-top:5px;font-size:10px;font-weight:400;display:block}.tutorial-icon{color:#b9bfd1;place-items:center;width:44px;height:44px;display:grid}.tutorial-track{gap:5px;margin:17px 0;display:flex}.tutorial-track>span{background:#373d50;border-radius:3px;flex:1;height:3px;transition:background .3s}.tutorial-track>span[data-done=true]{background:#bac8ff}.tutorial-panel h2{letter-spacing:-.03em;outline:none;margin:0 0 9px;font-size:20px;font-weight:500;line-height:1.25}.tutorial-panel>p{margin:0 0 13px;font-size:12px}.tutorial-panel-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.tutorial-locate{color:#d4ddff;border:1px solid #555e7d;border-radius:8px;align-items:center;gap:7px;min-height:44px;padding:10px;font-size:11px;display:flex}.tutorial-panel[data-earned=true] .tutorial-avatar{color:#c1e4d2;background:#2b3b37;border-color:#648474}.tutorial-resume{z-index:200;border-radius:28px;align-items:center;gap:10px;padding:12px 16px;font-size:12px;display:flex;position:fixed;bottom:28px;right:24px}.tutorial-resume span{font:10px var(--mono);color:#aab7e5}.tutorial-sync{z-index:210;border-radius:12px;max-width:min(360px,100vw - 32px);padding:14px;font-size:12px;position:fixed;bottom:90px;right:16px}.tutorial-sync button{color:#d4ddff;padding:8px;text-decoration:underline}:is(.tutorial-dialog,.tutorial-panel,.tutorial-sync) button:focus-visible,.tutorial-resume:focus-visible{outline-offset:4px;outline:2px solid #c0cdff}@keyframes tutorial-orbit{to{transform:rotate(12deg)}}@media (max-width:759px){.tutorial-panel{left:12px;right:12px;bottom:calc(90px + env(safe-area-inset-bottom));width:auto;padding:16px}.tutorial-panel>p{font-size:12px}.tutorial-panel h2{font-size:19px}.tutorial-resume{bottom:calc(90px + env(safe-area-inset-bottom));right:16px}.tutorial-dialog{padding:25px}}@media (max-height:620px){.tutorial-panel{max-height:48dvh;overflow-y:auto}.tutorial-orbit{height:95px;margin-bottom:10px}}[data-reduced-motion=true] .tutorial-orbit i,[data-reduced-motion=true] .tutorial-track span{transition:none;animation:none}@media (prefers-reduced-motion:reduce){.tutorial-orbit i,.tutorial-track span{transition:none;animation:none}}@media (max-width:759px){html:has(.tutorial-panel){scroll-padding-bottom:340px}}.tutorial-panel[data-earned=true][data-reduced-motion=false] .tutorial-avatar{animation:.45s ease-out tutorial-unlock}.tutorial-spotlight[data-reduced-motion=false]{animation:2.4s ease-in-out infinite tutorial-beacon}@keyframes tutorial-unlock{0%{transform:scale(.85)}55%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes tutorial-beacon{50%{box-shadow:0 0 0 6px #788ce61a,0 0 28px #8ea4ff48}}@media (prefers-reduced-motion:reduce){.tutorial-spotlight,.tutorial-panel .tutorial-avatar{animation:none!important}}
