#tutorial-root[hidden]{display:none}
#tutorial-root{position:absolute;inset:0;z-index:90;pointer-events:none;background:#020609b8}
.tutorial-open #hud{z-index:91}
.tutorial-open #hud button:not(.tutorial-target){opacity:.3}
.tutorial-card{position:absolute;left:50%;top:19%;transform:translateX(-50%);width:min(440px,calc(100% - 32px));padding:24px;border:1px solid #80c3b27a;border-radius:14px;background:linear-gradient(145deg,#152925,#080f18);box-shadow:0 22px 80px #000a;pointer-events:auto;max-height:calc(100dvh - 240px);overflow:auto;color:#e1e6dc}
.tutorial-card h2{font-family:Cinzel,Georgia,serif;font-size:25px;font-weight:500;line-height:1.25;margin:14px 0}
.tutorial-card p{font-size:14px;line-height:1.6;margin:12px 0;color:#c6d7d1}
.tutorial-card .tutorial-detail{font-size:12px;color:#9db1ac}
.tutorial-card .tutorial-action{color:#b6eee1;font-size:12px;margin-bottom:0}
.tutorial-card .primary{width:100%;margin:16px 0 0;min-height:44px}
.tutorial-target{outline:3px solid #a3f6e4!important;outline-offset:6px!important;box-shadow:0 0 30px #62d6cf99!important;opacity:1!important}
.tutorial-pointer{position:fixed;transform:translateX(-50%);font-size:10px;letter-spacing:1px;white-space:nowrap;color:#c0fff3;font-weight:700;line-height:22px;text-shadow:0 2px 8px #000;background:#071715;padding:0 7px;border-radius:4px}
@media(max-width:650px){.tutorial-card{top:17%;padding:20px}.tutorial-card h2{font-size:23px}.tutorial-card p{font-size:13px}.tutorial-card .tutorial-detail{font-size:11px}}
@media(orientation:landscape) and (max-height:550px){.tutorial-card{top:12px;padding:12px 18px;max-height:calc(100dvh - 126px);width:min(440px,calc(100% - 210px))}.tutorial-card h2{font-size:19px;margin:7px 0}.tutorial-card p{font-size:12px;margin:7px 0;line-height:1.4}.tutorial-card .tutorial-detail{font-size:11px}.tutorial-card .eyebrow{font-size:8px}.tutorial-card .primary{margin-top:7px;min-height:36px;padding:8px}.tutorial-pointer{font-size:9px}}