.map-section{padding:32px 0;background:#d2dcc2;overflow:hidden}
.map-section:before,.map-section:after{display:none}
.demo-viewport{position:absolute;inset:0;overflow:hidden;background:#d2dcc2}
#demo-map{display:block;width:100%;height:100%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#demo-map.is-dragging{cursor:grabbing}#demo-map:focus-visible{outline:3px solid #143427;outline-offset:-5px}
.map-layout{position:relative;display:grid;grid-template-columns:365px minmax(0,1fr);gap:32px;align-items:stretch;pointer-events:none;width:calc(100% - 64px);max-width:1440px}
.map-copy{pointer-events:auto;background:#1f4e3df5;border:1px solid #8fbfa166;border-radius:20px;padding:30px;box-shadow:0 14px 45px #142f2838}
.map-copy .eyebrow{font-size:.65rem;margin-bottom:14px}.map-copy h2{font-size:2.65rem;margin-bottom:18px}.map-copy .intro{font-size:.97rem;line-height:1.7;margin-bottom:22px}
.map-features{margin:0 0 26px}.map-features article{display:flex;gap:12px;margin:17px 0}.map-features article>span{font-size:.7rem}.map-features h3{font-size:.93rem;margin-bottom:5px}.map-features p{font-size:.79rem;line-height:1.6}
.demo-app-reference{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;padding-top:23px;margin-bottom:24px;border-top:1px solid #8fbfa144}.demo-app-reference img{display:block;width:112px;border-radius:12px;border:1px solid #8fbfa166;box-shadow:0 8px 20px #142f2855}.demo-app-reference h3{font-size:1.02rem;margin-bottom:8px}.demo-app-reference p{font-size:.73rem;line-height:1.6;margin-bottom:8px;color:#cddad2}.demo-app-reference .eyebrow{font-size:.55rem;letter-spacing:.08em}.demo-app-reference a{font-size:.67rem}.demo-app-credit{font-size:.58rem;line-height:1.6;color:#cddad2;margin:15px 0 0}
.map-workspace{position:relative;min-height:850px;display:flex;flex-direction:column;align-items:flex-end;gap:18px;min-width:0}
.demo-heading{align-self:flex-start;background:#142f28ed;color:#f5eedc;padding:18px 22px;border-radius:14px;box-shadow:0 6px 24px #142f281c;max-width:calc(100% - 66px);pointer-events:auto}
.demo-heading-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}.demo-heading .eyebrow{font-size:.62rem;letter-spacing:.13em;margin:0}.demo-badge{font-size:.55rem;letter-spacing:.07em;border:1px solid #8fbfa177;border-radius:4px;padding:3px 6px;color:#cddad2}.demo-heading h3{font-size:1.35rem;margin-bottom:10px}.demo-heading p{font-size:.76rem;line-height:1.7;margin-bottom:12px;color:#cddad2}.demo-heading strong{color:#f5eedc}.demo-summary{display:flex;gap:15px;flex-wrap:wrap;font-size:.65rem;color:#cddad2;border-top:1px solid #8fbfa144;padding-top:10px}.demo-summary strong{color:#f5eedc}
.demo-map-tools{position:absolute;top:0;right:0;display:flex;align-items:flex-end;flex-direction:column;gap:12px;pointer-events:none}.demo-controls{display:flex;flex-direction:column;border:1px solid #8fbfa199;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px #142f2833;pointer-events:auto}.demo-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:#1f4e3d;color:#f5eedc;font-size:1.5rem;line-height:1}.demo-controls button+button{border-top:1px solid #8fbfa144}.demo-controls button:hover{background:#2c5949}.demo-controls button:disabled{color:#95a59c;opacity:1;cursor:default}.demo-controls button:focus-visible{outline-offset:-4px}
.demo-legend{order:2;pointer-events:auto;background:#1f4e3df5;border:1px solid #ffffff38;border-radius:12px;color:#f5eedc;padding:10px 12px;max-width:180px;font-size:.72rem;box-shadow:0 4px 15px #142f2822}.demo-legend summary{cursor:pointer;font-weight:700}.demo-legend summary span{font-size:.6rem;color:#cddad2}.demo-legend ul{list-style:none;margin:10px 0;padding:0}.demo-legend li{display:flex;align-items:center;gap:8px;margin:6px 0}.demo-legend i{width:10px;height:10px;border-radius:50%;background:var(--rarity)}.demo-legend p{font-size:.6rem;margin:0;color:#cddad2}
.demo-marker{cursor:pointer;outline:none}.marker-ring{fill:none;stroke:transparent;stroke-width:3}.demo-marker:hover .marker-ring,.demo-marker:focus-visible .marker-ring{stroke:#143427;stroke-dasharray:3 3}.marker-label{visibility:hidden;pointer-events:none}.demo-marker[aria-pressed=true] .marker-label,.demo-marker:focus-visible .marker-label{visibility:visible}.marker-label rect{fill:#1f4e3df5;stroke:#8fbfa1;stroke-width:1.2}.marker-label text{font:italic 700 11.5px Roboto,Arial,sans-serif;fill:white;text-anchor:middle}
.demo-card-area{width:360px;max-width:100%;margin-top:auto;pointer-events:auto;filter:drop-shadow(0 10px 20px #142f2826)}
.demo-record{background:#142f28;border-radius:20px 20px 0 0;padding:17px;color:#fff;overflow-wrap:anywhere}.demo-record[hidden]{display:none}.demo-record-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.61rem;letter-spacing:.13em;color:#adc6b9;font-weight:700;margin-bottom:2px}.demo-record-meta button{width:32px;height:32px;flex:none;background:none;color:#cddad2;border:0;padding:0;font-size:1.6rem;line-height:1;border-radius:6px}.demo-record-meta button:hover{background:#2c5949}
#demo-scientific{font-size:1.35rem;line-height:1.25;letter-spacing:-.025em;margin:0 0 4px}#demo-record-title{font-size:.8rem;color:#cddad2;margin:0 0 8px}.demo-observer{font-size:.65rem;color:#cddad2;margin:0 0 10px}.demo-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.demo-pills span{font-size:.6rem;border:1px solid #ffffff2e;border-radius:12px;padding:4px 9px;background:#2c5949;color:#cddad2}#demo-rarity{border-color:var(--rarity,#ffa000);background:#ffffff09;color:#f5eedc}
.demo-record-content{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px}.demo-record-photo{display:block;align-self:start;overflow:hidden;border-radius:12px;background:#2c5949;text-decoration:none}.demo-record-photo img{display:block;width:100%;height:106px;object-fit:contain}.demo-record-photo span{display:block;padding:4px;text-align:center;font-size:.52rem;color:#cddad2}.demo-record-facts{display:flex;gap:16px;margin:0 0 8px;flex-wrap:wrap;font-size:.6rem;line-height:1.5}.demo-record-facts dt{color:#adc6b9}.demo-record-facts dd{margin:2px 0 0}.demo-field-note{font-size:.71rem;color:#cddad2;line-height:1.65;margin:0}.demo-photo-credit{font-size:.55rem;color:#adc6b9;margin:12px 0 0;line-height:1.6}
.demo-disclaimer{font-size:.65rem;line-height:1.6;margin:0 0 8px}.demo-gesture-hint{position:absolute;top:40%;left:50%;transform:translateX(-50%);background:#142f28ed;color:#f5eedc;border-radius:8px;padding:9px 14px;font-size:.75rem;width:max-content;max-width:90%;text-align:center;pointer-events:none;margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1100px){.map-layout{grid-template-columns:310px minmax(0,1fr);gap:22px;width:calc(100% - 40px)}.map-copy{padding:24px}.map-copy h2{font-size:2.4rem}.demo-heading{padding:16px;max-width:calc(100% - 56px)}.demo-heading h3{font-size:1.15rem}.demo-summary{gap:8px}.demo-app-reference{grid-template-columns:95px minmax(0,1fr);gap:12px}.map-workspace{min-height:940px}}
@media(max-width:800px){.map-section{padding:0}.map-layout{display:flex;flex-direction:column;gap:0;width:100%;max-width:none}.map-copy{max-width:none;border-radius:0;padding:30px 24px;background:#1f4e3d;box-shadow:none;border:0}.map-copy h2 br{display:none}.map-copy .intro{max-width:none}.map-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.map-features article{display:block;margin:0}.map-features article>span{display:block;margin-bottom:5px}.demo-app-reference{max-width:400px;grid-template-columns:95px minmax(0,1fr);padding-top:20px;margin-bottom:20px}.demo-app-reference img{width:95px}.demo-viewport{top:var(--map-copy-height,650px)}.map-workspace{min-height:900px;padding:20px;gap:16px}.demo-map-tools{top:20px;right:20px}.demo-heading{max-width:calc(100% - 56px)}.demo-card-area{width:360px}}
@media(max-width:480px){.map-copy{padding:28px 20px}.map-copy h2{font-size:2.4rem}.map-features{grid-template-columns:1fr;gap:15px}.map-features article{display:flex;gap:12px}.map-workspace{padding:14px;min-height:960px}.demo-map-tools{top:14px;right:14px}.demo-heading{padding:13px;max-width:calc(100% - 54px)}.demo-heading-top{gap:6px}.demo-heading h3{font-size:1.05rem}.demo-heading p{font-size:.68rem}.demo-summary{font-size:.58rem;gap:4px 10px}.demo-legend{font-size:.65rem;max-width:150px}.demo-record{padding:14px}.demo-record-content{grid-template-columns:82px minmax(0,1fr);gap:12px}}
@media print{.map-section{padding:20px 0!important;break-inside:avoid}.map-layout{display:grid;grid-template-columns:260px 1fr;width:100%;gap:16px}.demo-viewport{top:0}.map-copy{padding:18px;border-radius:12px}.map-copy h2{font-size:26px}.map-copy .intro{font-size:11px}.map-features{display:block}.map-features article{display:flex;margin:12px 0}.map-features h3{font-size:11px}.map-features p{font-size:10px}.demo-app-reference{grid-template-columns:70px 1fr}.demo-app-reference img{width:70px}.map-workspace{min-height:680px;padding:0}.demo-heading{max-width:100%}.demo-controls,.demo-legend,.demo-keyboard,#map-close-record,.demo-gesture-hint{display:none}.demo-record{border-radius:15px}.demo-card-area{width:100%}.demo-record-content{grid-template-columns:75px 1fr}.demo-record h4{font-size:18px}}
/* Full-width map with a light, translucent information area. */
.map-section{padding:24px 0}
.map-layout{width:calc(100% - 48px);max-width:none;grid-template-columns:330px minmax(0,1fr);gap:24px;height:calc(100svh - 48px);min-height:680px}
.map-copy{max-width:none;align-self:stretch;overflow:auto;background:#f5eedcdb;color:#143427;border:1px solid #ffffff70;border-radius:14px;box-shadow:none;padding:22px}
.map-copy .eyebrow,.map-copy .intro,.map-copy .map-features p,.map-copy .map-features article>span,.map-copy .demo-app-reference p,.map-copy .demo-app-credit{color:#345c49}
.map-copy .eyebrow{margin-bottom:10px}.map-copy h2{font-size:2.3rem;margin-bottom:13px}.map-copy .intro{font-size:.84rem;line-height:1.6;margin-bottom:18px}
.map-features{margin-bottom:18px}.map-features article{margin:12px 0}.map-features h3{font-size:.85rem}.map-features p{font-size:.73rem}
.demo-app-reference{grid-template-columns:80px minmax(0,1fr);border-color:#345c4933;padding-top:16px;margin-bottom:16px;gap:14px}.demo-app-reference img{width:80px}.demo-app-reference h3{font-size:.92rem}.demo-app-reference p{font-size:.67rem}
.map-workspace{min-height:0}
.demo-heading{max-width:none;margin:0 0 16px;padding:14px 0;background:none;border-radius:0;box-shadow:none;border-top:1px solid #345c4933;color:#143427}
.demo-heading h3{font-size:1.05rem;margin-bottom:8px}.demo-heading p,.demo-heading .demo-badge,.demo-summary{color:#345c49}.demo-heading strong,.demo-summary strong{color:#143427}.demo-heading p{font-size:.7rem;margin-bottom:10px}.demo-heading .eyebrow{margin:0;font-size:.55rem}.demo-heading-top{gap:8px}.demo-summary{border-color:#345c4933;font-size:.6rem;gap:12px}.demo-badge{border-color:#345c4955}
.demo-map-tools{inset:0 0 auto;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}.demo-legend{order:0;margin:0}.demo-controls{flex:none}
.demo-card-area{position:absolute;right:0;bottom:0;margin:0;max-height:calc(100% - 150px);overflow:auto;border-radius:20px}.demo-card-area:has(.demo-record[hidden]){display:none}.demo-record{border-radius:20px}

.pin-invitation rect{fill:#f5eedc;stroke:#1f4e3d;stroke-width:1.5}.pin-invitation text{font:700 12px Roboto,Arial,sans-serif;fill:#143427;text-anchor:middle}.pin-bounce{animation:pin-invite 2.8s ease-in-out infinite}.has-explored .pin-bounce{animation:none}.has-explored .pin-invitation{display:none}#demo-map:not(.has-explored) .demo-invitation .marker-label{visibility:hidden}
@keyframes pin-invite{0%,65%,100%{transform:translateY(0)}75%{transform:translateY(-7px)}85%{transform:translateY(0)}92%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.pin-bounce{animation:none}}
@media(max-width:1100px){.map-layout{grid-template-columns:300px minmax(0,1fr);gap:20px;width:calc(100% - 40px)}.map-copy{padding:18px}.map-copy h2{font-size:2.1rem}}
@media(max-width:800px){.map-section{padding:0}.map-layout{width:100%;height:auto;min-height:0;gap:0}.map-copy{overflow:visible;padding:26px 22px;border-radius:0;background:#f5eedcd9}.map-features{gap:15px}.map-features article{margin:0}.demo-heading{max-width:440px}.demo-app-reference{grid-template-columns:80px minmax(0,1fr)}.demo-app-reference img{width:80px}.map-workspace{height:100svh;min-height:620px;padding:20px}.demo-map-tools{inset:20px 20px auto}.demo-card-area{right:20px;bottom:20px;width:350px;max-width:calc(100% - 40px);max-height:calc(100% - 175px)}.demo-heading .eyebrow{font-size:.6rem}}
@media(max-width:480px){.map-copy{padding:24px 20px}.map-workspace{padding:14px;min-height:640px}.demo-map-tools{inset:14px 14px auto}.demo-card-area{right:14px;bottom:14px;max-width:calc(100% - 28px)}.demo-heading{max-width:none}.demo-legend{max-width:180px;font-size:.72rem}}
@media print{.map-layout{height:auto;min-height:680px;display:grid;grid-template-columns:260px 1fr}.map-copy{overflow:visible}.map-workspace{height:auto;min-height:680px}.demo-card-area{position:static;margin-top:auto}.pin-bounce{animation:none}.pin-invitation{display:none}}