/* first-visit tutorial (same logic as the site tutorial) */
.tut{box-sizing:border-box;width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:22px;border:1px solid #2c3576;border-radius:24px;background:#10163a;color:#eef1ff;text-align:center;margin:auto}
.tut::backdrop{background:rgba(5,8,24,.72);backdrop-filter:blur(5px)}
.tut-top,.tut-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tut-game{font-size:13px;letter-spacing:.12em;color:#7edcff;font-weight:800}
.tut-skip{background:none;border:0;color:#aab3de;padding:8px;cursor:pointer;font:600 14px system-ui}
.tut-inputs{display:flex;gap:6px;margin:14px 0}
.tut-inputs button{flex:1;padding:10px 7px;border:1px solid #2c3576;border-radius:12px;background:#161d4a;color:#c9d0f2;font:600 12px system-ui;cursor:pointer}
.tut-inputs button[aria-pressed=true]{background:#26307a;border-color:#7edcff;color:#fff}
.tut h2{font-size:24px;margin:14px 0 12px}
.tut-demo{position:relative;margin:0 auto 12px;width:232px;height:130px;border-radius:14px;overflow:hidden;background:#070a1f;box-shadow:0 0 0 1px #252d5a}
.tut-demo canvas{display:block;width:232px;height:130px}
.tut-pointer{position:absolute;width:34px;height:46px;left:110px;top:66px;filter:drop-shadow(0 4px 3px #0008);pointer-events:none}
.tut-pointer svg{width:100%;height:100%}
.tut-copy{min-height:60px;font-size:15px;line-height:1.5;color:#dfe5ff;margin:10px 0}
.tut-keys{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0 6px}
.tut-keys kbd{font:700 12px system-ui;padding:5px 9px;border-radius:7px;background:#eef1ff;color:#0b1028;box-shadow:0 3px 0 #8f97c7}
.tut-note{font-size:12px;color:#8f97c7}
.tut-bottom{margin-top:18px;font-size:13px;color:#8f97c7}
.tut-next{background:linear-gradient(110deg,#ffb64e,#ff8375);color:#101d35;border-radius:13px;font-weight:800}
.tut button:focus-visible,.help:focus-visible{outline:3px solid #7edcff;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.tut-pointer{animation:t-tap 1.6s ease-in-out infinite}.tut[data-motion=drag] .tut-pointer{animation:t-drag 2.4s ease-in-out infinite}.tut[data-motion=aim] .tut-pointer{animation:t-aim 2.8s ease-in-out infinite}.tut[data-motion=hold] .tut-pointer{animation:t-hold 2.4s ease-in-out infinite}.tut[data-motion=pull] .tut-pointer{animation:t-pull 2.6s ease-in-out infinite}.tut[data-motion=swipe] .tut-pointer{animation:t-swipe 2s ease-in-out infinite}}
@keyframes t-tap{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-8px) scale(.92)}}
@keyframes t-drag{0%,100%{transform:translateX(-60px)}50%{transform:translateX(50px)}}
@keyframes t-aim{0%,100%{transform:translate(-50px,-20px)}50%{transform:translate(45px,-30px)}}
@keyframes t-hold{0%,100%{transform:scale(1)}15%,75%{transform:scale(.86)}}
@keyframes t-pull{0%,20%{transform:translate(0,0)}70%{transform:translate(-50px,30px) scale(.92)}75%,100%{transform:translate(0,0)}}
@keyframes t-swipe{0%,100%{transform:translateX(-40px)}45%{transform:translateX(40px) scale(.92)}}
@media(max-height:620px){.tut{padding:14px}.tut-demo{height:100px}.tut-demo canvas{height:100px}.tut h2{margin:8px 0}.tut-copy{min-height:0}.tut-bottom{margin-top:10px}}

.tut-next{font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;border:0;padding:12px 24px;min-height:44px}.tut{font-family:inherit;direction:inherit}.tut-demo,.tut-keys{direction:ltr}.tut-step{direction:ltr;unicode-bidi:isolate}.tut button{touch-action:manipulation}.space-page #c{touch-action:none}