/* A short, non-modal field note. The forest stays interactive beneath it. */
#tutorial{position:fixed;z-index:24;inset-inline-start:var(--gutter);top:132px;width:310px;padding:17px 20px 15px;color:var(--ivory);background:linear-gradient(135deg,#183a31f5,#0b211ff2);border:1px solid #cfdbac6b;border-radius:6px;box-shadow:0 8px 24px #03110e40;pointer-events:none}
.tutorial-heading{display:flex;gap:12px;align-items:center;padding-inline-end:24px;font-size:10px;letter-spacing:.1em;color:#cfdbac}
#tutorial-step{letter-spacing:.08em;opacity:.75}.tutorial-skip{position:absolute;inset-inline-end:1px;top:1px;width:44px;height:44px;background:none;color:#bdcbbd;font-size:22px;pointer-events:auto;border-radius:4px}
#tutorial h2{margin:10px 0 7px;font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.4}
#tutorial p{font-size:12px;line-height:1.7;margin:0;color:#e4ebdb;overflow-wrap:anywhere}
#tutorial #tutorial-control{margin-top:10px;color:#dfdfb2;font-size:11px;line-height:1.6}
#tutorial-waypoint{display:flex;gap:9px;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid #c7d9b02e;font-size:10px;color:#b9cbb7}
#tutorial-arrow{font-size:22px;line-height:22px;display:inline-block;color:#e5e9b9;direction:ltr}
#tutorial-progress{position:absolute;bottom:-1px;inset-inline:0;height:2px;overflow:hidden;border-radius:0 0 6px 6px}
#tutorial-progress:after{content:'';display:block;width:var(--guide-progress);height:100%;background:#d1dfa3}
.tutorial-target{outline:2px solid #dfebae!important;outline-offset:5px;box-shadow:0 0 17px #d6e9a842!important}
.tutorial-active #objective,.tutorial-active .movement-hints,.tutorial-active .touch-look-hint,.tutorial-active .location-block{visibility:hidden}
.tutorial-active.aiming .finder-bottom{visibility:hidden}
.aiming #tutorial{top:auto;bottom:24px;width:min(360px,calc(50vw - 145px));padding:12px 16px}
.aiming .tutorial-heading{display:none}.aiming #tutorial h2{font-size:16px;margin:0 0 4px;padding-inline-end:20px}
.aiming #tutorial #tutorial-control{margin-top:6px}
.aiming #tutorial-waypoint{position:absolute;inset-inline-start:0;top:-30px;margin:0;padding:2px 8px;background:#0b211fe6;border:0;border-radius:3px}
@media(max-height:650px) and (min-width:1001px){.aiming #tutorial{top:132px;bottom:auto;width:calc(18.5vw - 38px)}}
@media(pointer:coarse),(max-width:650px),(max-height:500px) and (max-width:1000px){
 .tutorial-active #shutter-hint{display:none}
 #tutorial{inset-inline-start:12px;top:126px;width:min(340px,calc(100vw - 24px));padding:12px 14px}
 #tutorial h2{font-size:18px;margin:6px 0}#tutorial #tutorial-control{margin-top:6px}
 .aiming #tutorial{inset-inline-start:12px;transform:none;top:calc(43dvh + 24.75vw + 10px);bottom:auto;width:calc(100vw - 24px);padding:8px 12px}
 [dir="rtl"] .aiming #tutorial{transform:none}
 .aiming .tutorial-heading,.aiming .tutorial-skip,.aiming #tutorial h2{display:none}
 .aiming #tutorial p{font-size:11px;line-height:1.5}.aiming #tutorial #tutorial-control{font-size:10px;line-height:1.5;margin-top:3px}
 .aiming #tutorial-waypoint{inset-inline-start:auto;inset-inline-end:10px;top:-36px;padding:2px 6px;font-size:9px}
 .aiming #tutorial-arrow{font-size:18px;line-height:18px}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
 #tutorial{top:76px;width:310px;padding:10px 14px}#tutorial h2{font-size:16px}#tutorial p{font-size:11px;line-height:1.55}#tutorial-waypoint{margin-top:6px;padding-top:6px}
 .aiming #tutorial{top:auto;bottom:max(12px,env(safe-area-inset-bottom));inset-inline-start:50%;transform:translateX(-50%);width:calc(100vw - 320px)}
 [dir="rtl"] .aiming #tutorial{transform:translateX(50%)}
 .aiming #tutorial-waypoint{top:-27px}
}