#help.tutorial-help{width:auto;min-width:40px;display:inline-flex;gap:7px;align-items:center;padding:9px 12px;white-space:nowrap;font-size:14px}
#help.tutorial-help>span:first-child{font-size:18px;color:var(--gold)}
body.tutorial-overview.immersive header{display:flex;position:fixed;left:0;right:0;top:0;z-index:90;background:#081e27}
#atlas-tutorial{position:fixed;inset:0;margin:0;padding:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;overflow:hidden;border:0;border-radius:0;background:transparent;color:var(--ink);box-shadow:none}
#atlas-tutorial::backdrop{background:transparent;backdrop-filter:none}
.tutorial-shade{position:absolute;inset:0;background:#020c15b8}
.tutorial-focus{position:absolute;pointer-events:none;border:2px solid #f5cf8a;border-radius:12px;box-shadow:0 0 0 9999px #020c15b8,0 0 24px #efcc8f55;transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease}
.tutorial-card{position:absolute;width:min(400px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:24px;background:linear-gradient(145deg,#173840,#0b222b);border:1px solid #91b4b04d;border-radius:20px;box-shadow:0 20px 70px #0007}
.tutorial-card:focus{outline:none}
.tutorial-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tutorial-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.06em;color:#e4c38e}
.tutorial-exit{padding:8px 10px;border-radius:7px;border:1px solid #ffffff30;font-size:14px;letter-spacing:normal;min-height:40px}
.tutorial-character{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 8px 9px #0003);animation:tutorial-float 3.2s ease-in-out infinite}
.tutorial-card .tutorial-character{display:block;margin:8px auto 0}
.tutorial-card h2{font-size:27px;line-height:1.18;margin:8px 0 12px;color:#f5f0dd}
.tutorial-card p{font-size:16px;line-height:1.55;margin:0 0 16px;color:#d1e0dc}
.tutorial-progress{display:flex;gap:5px;margin:20px 0 16px}
.tutorial-progress span{height:4px;flex:1;background:#ffffff20;border-radius:6px}
.tutorial-progress span[data-done=true]{background:#ebc786}
.tutorial-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tutorial-actions button{min-height:44px;font-size:14px}
.tutorial-actions .primary{white-space:normal;flex:1}
.tutorial-actions .subtle{padding:11px 14px}
.tutorial-actions button:disabled{opacity:.4;cursor:default}
.tutorial-audio{display:flex;align-items:center;gap:9px;margin-top:15px;padding-top:14px;border-top:1px solid #ffffff16}
.tutorial-audio button{font-size:14px;min-height:40px;text-align:left;color:#eacf98;padding:4px}
.tutorial-audio small{font-size:12px;color:#b6cecb;line-height:1.4}
.tutorial-audio [data-speaking=true]{animation:tutorial-glow 1s ease-in-out infinite}
.tutorial-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.tutorial-menu button{padding:12px;border:1px solid #ffffff25;border-radius:10px;text-align:left;font-size:14px;line-height:1.4;background:#ffffff04;min-height:50px}
.tutorial-menu button:hover,.tutorial-exit:hover{background:#ffffff0e;border-color:#eacf98}
.tutorial-hub .tutorial-primary{width:100%;min-height:48px;white-space:normal;text-align:left;margin-top:4px}
.tutorial-hub .tutorial-character{float:right;margin:0;width:80px;height:80px}
.tutorial-hub .tutorial-topline{clear:both}
.tutorial-footer-link{font-size:14px;text-decoration:underline;color:#b6cecb;margin-top:5px;min-height:38px}
.tutorial-invite{position:fixed;z-index:95;right:22px;bottom:22px;width:min(360px,calc(100% - 24px));height:auto;min-height:0;padding:18px;background:#102d36;border:1px solid #b6d9ca55;border-radius:18px;color:#eef4e8;box-shadow:0 16px 65px #0009}
.tutorial-invite[hidden]{display:none}
.tutorial-invite-main{display:flex;align-items:center;gap:8px}
.tutorial-invite .tutorial-character{flex:0 0 76px;width:76px;height:76px}
.tutorial-invite p{font-size:16px;line-height:1.45;margin:4px 0 14px;color:#d1e0dc}
.tutorial-invite strong{font-size:15px;color:#f1d29a}
.tutorial-invite .tutorial-actions{flex-wrap:wrap;gap:8px}
.tutorial-invite .tutorial-actions button{width:100%;min-height:42px}
.tutorial-invite .tutorial-actions .subtle{border:0;padding:6px}
.tutorial-section-invite{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;width:100%;height:auto;min-height:0;flex-shrink:0;box-sizing:border-box;border:1px solid #b6d9ca44;border-radius:12px;background:#173840;padding:12px;margin:14px 0;color:#d1e0dc;font-size:14px;line-height:1.4}
.tutorial-section-invite>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tutorial-section-invite button{min-height:40px;padding:8px 10px;border-radius:7px;color:var(--gold);border:1px solid #ffffff20;font-size:14px}
.tutorial-section-invite button:last-child{border:0}
@keyframes tutorial-float{50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes tutorial-glow{50%{opacity:.65}}
@media(max-width:640px){#help.tutorial-help{padding:8px}.tutorial-invite{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}.tutorial-card{padding:18px;max-height:calc(100dvh - 24px)}.tutorial-card .tutorial-character{float:left;width:68px;height:68px;margin:5px 12px 4px 0}.tutorial-card h2{font-size:23px;margin-top:14px}.tutorial-card p{font-size:16px;clear:both}.tutorial-topline{font-size:12px}.tutorial-progress{margin:15px 0 12px}.tutorial-audio{margin-top:10px;padding-top:8px}.tutorial-menu{clear:both}.tutorial-section-invite{align-items:flex-start;flex-direction:column}}
@media(max-height:480px){.tutorial-card .tutorial-character{display:none}.tutorial-card{padding:14px}.tutorial-card h2{font-size:22px;margin:6px 0}.tutorial-progress{margin:10px 0}.tutorial-card p{margin-bottom:8px}.tutorial-audio{margin-top:8px;padding-top:6px}}
@media(prefers-reduced-motion:reduce){.tutorial-character,.tutorial-audio [data-speaking=true]{animation:none}.tutorial-focus{transition:none}}