.explorer-map{position:relative;border-radius:24px;overflow:hidden;border:5px solid #fff7df;box-shadow:0 12px 40px #2d625526;background:#91cdce;margin:20px 0 0}.explorer-map>svg{display:block;width:100%;height:auto}.map-sky-label{position:absolute;top:20px;left:27px;z-index:1;color:#3b7e7b;font-weight:800;font-size:12px;letter-spacing:3px}.map-status{padding:20px 24px;border-radius:16px;background:#fffdf1;border:1px solid #dce6cf;display:flex;gap:15px;align-items:center}.map-status>div{flex:1}.map-status strong{display:block;font-size:19px}.map-status span:not(.map-position-dot){font-size:14px;color:#829171}.map-position-dot{height:15px;width:15px;border-radius:100%;background:#399371;box-shadow:0 0 0 7px #e6f0d9}.checkpoint{cursor:pointer}.checkpoint:focus{outline:none}.checkpoint:focus>circle:first-child{stroke:#e29531;stroke-width:9}.checkpoint:hover>circle:first-child{stroke:#e6ae46}.checkpoint.locked{filter:saturate(.55)}.map-legend{display:flex;gap:20px;flex-wrap:wrap;margin:18px 4px 25px;font-size:13px;color:#5a7861}.map-legend small{font-size:11px;color:#92a084;width:100%}.checkpoint-panel{background:#fffdf4;border:1px solid #dce6d4;border-radius:17px;padding:26px;margin:20px 0}.checkpoint-panel h2{font-size:23px;margin:10px 0}.checkpoint-steps{display:flex;gap:12px;margin:22px 0;flex-wrap:wrap}.checkpoint-steps button{flex:1;min-width:170px;background:#edf2e4;border:1px solid #dce5cd;border-radius:12px;text-align:left;padding:16px;color:#4c7150;font-size:16px;font-weight:700}.checkpoint-steps b{display:inline-grid;place-items:center;width:30px;height:30px;background:#fff;border-radius:50%;margin-right:8px}.walk-legs{transform-origin:0 3px;animation:mapStep .6s ease-in-out infinite alternate}.walk-arms{transform-origin:0 -22px;animation:mapStep .6s ease-in-out infinite alternate-reverse}.map-walker{animation:mapBob .6s ease-in-out infinite alternate}.avatar-route{pointer-events:none}@keyframes mapStep{to{transform:rotate(12deg)}}@keyframes mapBob{to{transform:translateY(-4px)}}.reflection-scope{padding:19px;border-radius:13px;background:#f1f5e7;margin:16px 0}.reflection-scope h3{font-size:19px}.reflection-scope textarea{min-height:85px;margin:7px 0}.tp-label{font-size:11px;letter-spacing:1px;color:#719162;font-weight:700}.present-card{border:2px solid #d9e5c8;padding:24px;border-radius:13px;margin-top:20px;line-height:1.9}.assessment-pill{background:#eee9d9;padding:7px 11px;border-radius:8px;font-size:12px;margin-right:7px;display:inline-block}.offline-transfer{padding:18px;border:1px dashed #b9cca8;border-radius:12px;margin:20px 0}.privacy-note{font-size:12px;line-height:1.9;color:#7c9078}.teacher-assess{display:grid;grid-template-columns:1fr 1fr;gap:12px}.teacher-assess select{width:100%}
@media(max-width:600px){.map-status{padding:17px;flex-wrap:wrap}.map-status strong{font-size:16px}.map-status>div{min-width:210px}.map-status .button{width:100%}.map-sky-label{font-size:8px;top:12px;left:14px;letter-spacing:1px}.explorer-map{border-width:3px;border-radius:15px;overflow:auto}.explorer-map>svg{min-width:680px}.map-legend{gap:12px;font-size:12px}.checkpoint-panel{padding:19px}.checkpoint-panel h2{font-size:20px}.checkpoint-steps{flex-direction:column}.checkpoint-steps button{font-size:15px}.teacher-assess{grid-template-columns:1fr}.explorer-map:after{content:'↔ Geser peta untuk melihat seluruh checkpoint';display:block;position:sticky;left:0;text-align:center;padding:9px;background:#d1e7d6;color:#537765;font-size:11px}.reflection-scope{padding:15px}}
@media(prefers-reduced-motion:reduce){.map-walker,.walk-legs,.walk-arms{animation:none}}.reduce-motion .map-walker,.reduce-motion .walk-legs,.reduce-motion .walk-arms{animation:none}