:root{font-family:"Inter",system-ui,sans-serif;color:#183b33;background:#f0f3ed;--muted:#52675d;--line:#d6e0d5;--green:#1d5847;--paper:#fffefa;--ink:#183b33;--orange:#f4b86f}
*{box-sizing:border-box}
body{margin:0}
button,input{font:inherit}
button{cursor:pointer}
a{color:var(--green)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #21836a;outline-offset:3px}
.top{background:#153c32;color:#fffefa;border-bottom:1px solid #245345}
.top-inner{max-width:1440px;margin:auto;min-height:80px;padding:12px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none;flex:none}
.brand-wordmark{display:grid;line-height:1;gap:5px}
.brand-wordmark strong{font-size:1.9rem;letter-spacing:-.07em}
.brand-wordmark strong span{color:var(--orange)}
.brand-wordmark small{font-size:.74rem;letter-spacing:.015em;color:#d4e5d3}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.88rem}
.top nav .nav-link,.top nav button{border-radius:9px;padding:9px 12px;font-size:inherit;font-weight:650;text-decoration:none}
.top nav .nav-link,.top nav .plain{color:#f5f7ee;background:transparent}
.top nav .nav-link:hover,.top nav .plain:hover,.top nav .plain[aria-expanded=true]{background:#ffffff18}
.top nav .test-toggle{color:#17392f;background:var(--orange)}
.top nav .test-toggle:hover{background:#ffc889}
main{max-width:1440px;margin:auto;padding:0 32px 48px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,385px);align-items:center;gap:24px;padding:24px 0 22px;scroll-margin-top:14px}
.intro-text p{color:var(--muted);margin:10px 0 0;font-size:.94rem}
h1,h2{font-family:"Noto Serif",Georgia,serif;font-weight:700;line-height:1.08;margin:0}
h1{font-size:clamp(2.35rem,5.1vw,4.45rem);letter-spacing:-.065em}
h1 em{color:#28624f;font-weight:500}
h2{font-size:1.48rem;letter-spacing:-.035em}
.search{position:relative;z-index:5}
.search label{font-size:.86rem;display:block;font-weight:700;margin:0 0 7px 2px}
.field{display:flex;align-items:center;background:var(--paper);border:1px solid #9aafa0;border-radius:12px;min-height:51px;padding:0 12px;gap:8px}
.field:focus-within{box-shadow:0 0 0 3px #c4e0d1}
.field svg{width:21px;fill:none;stroke:#4a675b;stroke-width:1.8;flex:none}
.field input{width:100%;min-width:0;padding:11px 2px;border:0;background:transparent;outline:0;color:inherit}
.field input::-webkit-search-cancel-button{display:none}
.field button,.plain{background:#eaf1e9;border:0;color:var(--green);border-radius:8px;padding:7px 10px;font-size:.79rem;font-weight:700}
#suggestions{list-style:none;position:absolute;inset:calc(100% + 7px) 0 auto;margin:0;padding:5px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #183f2e29}
#suggestions li{padding:9px 10px;cursor:pointer;border-radius:7px;display:flex;align-items:center;gap:9px}
#suggestions li[aria-selected=true],#suggestions li:hover{background:#e8f0e7}
.suggest-type{margin-left:auto;color:var(--muted);font-size:.74rem;text-align:right}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.filters button{border-radius:999px;border:1px solid #cbd9cd;background:#f9faf5;color:#355347;padding:8px 13px;font-weight:650;font-size:.84rem}
.filters button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:white}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(255px,330px);align-items:stretch;gap:14px}
.map-card,.directory{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;box-shadow:0 5px 18px #2542310a}
.map-heading,.directory-heading{padding:15px 19px;min-height:77px}
.map-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.map-heading p,.directory-heading p{color:var(--muted);font-size:.82rem;margin:5px 0 0}
.map-window{position:relative;background:#d7eaf0;overflow:auto;aspect-ratio:1680 / 1230;scrollbar-width:none}
.map-surface{position:absolute;top:0;left:0;width:100%;height:100%;isolation:isolate;user-select:none}
.map-surface img{width:100%;height:100%;display:block;object-fit:fill}
#markers{position:absolute;inset:0}
.marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:calc(var(--dot,7px) + var(--point-growth,0px));height:calc(var(--dot,7px) + var(--point-growth,0px));background:var(--pin);border:1px solid #fff;box-shadow:0 1px 3px #142e3655;border-radius:50%;padding:0;color:white;display:grid;place-items:center;font-size:11px;font-weight:800}
.marker:hover,.marker:focus-visible,.marker.chosen{z-index:3;width:calc(29px + var(--point-growth,0px));height:calc(29px + var(--point-growth,0px));border-width:2px}
.marker.chosen{z-index:4;box-shadow:0 0 0 3px #123f4066,0 2px 6px #17394166}
.marker span{display:none}
.marker:hover span,.marker:focus-visible span,.marker.chosen span{display:block}
.selection{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 16px;background:#e8f2e8;font-size:.87rem;font-weight:650}
.map-credit{font-size:.73rem;color:var(--muted);padding:9px 16px}
.directory{display:flex;flex-direction:column;position:relative}
.directory-heading{border-bottom:1px solid var(--line);background:#edf3e9}
.directory-scroll{overflow:auto;position:absolute;inset:77px 0 0;overscroll-behavior:contain;padding:5px 12px 10px}
.category{margin:0;padding:13px 7px 6px;color:#315b4a;font-size:.77rem;letter-spacing:.045em;font-weight:750}
.entry{width:100%;display:flex;align-items:center;gap:9px;padding:6px;border:0;border-radius:7px;background:transparent;color:inherit;text-align:left;font-size:.91rem}
.entry+.entry{border-top:1px solid #edf1ea}
.entry:hover,.entry[aria-current=true]{background:#e8f0e7}
.badge{display:inline-grid;place-items:center;width:28px;height:24px;border-radius:6px;color:white;background:var(--pin);font-size:.7rem;font-weight:800;flex:none}
.empty,.note{font-size:.86rem;color:var(--muted);line-height:1.5}
.empty{padding:9px}
.plansze{margin-top:30px}
#downloads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:13px}
#downloads a{padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:9px;text-decoration:none;font-size:.84rem;font-weight:650}
#downloads a:hover{text-decoration:underline;background:#e9f2e7}
@media(max-width:850px){.intro{grid-template-columns:1fr;gap:16px}.workspace{grid-template-columns:minmax(0,1fr) 250px}#downloads{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.top-inner{padding:11px 14px;display:grid;gap:11px}.brand-icon{width:40px;height:40px}.top nav{gap:3px;font-size:.77rem}.top nav .nav-link,.top nav button{padding:8px 10px}main{padding:0 12px 25px}.intro{padding:23px 0 16px}.workspace{display:flex;flex-direction:column}.directory-scroll{position:static;max-height:470px}.map-heading,.directory-heading{min-height:auto;padding:11px 13px}.filters{gap:5px}.filters button{padding:7px 9px;font-size:.74rem}.map-window{aspect-ratio:1.16}.map-surface{width:100%;height:100%}}
@media(prefers-reduced-motion:reduce){.map-surface{transition:none}}
nav{align-items:center}
.test-toggle{border:0;border-radius:9px;background:var(--green);color:#fff;padding:8px 14px;font-weight:700}
.test-toggle:disabled{opacity:.45;cursor:default}
.quiz{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:16px;align-self:start}
.quiz header p,.quiz #quiz-status{font-size:.85rem;line-height:1.5;color:var(--muted)}
.quiz ol{margin:12px 0;padding-left:26px}
.quiz li{margin-bottom:6px;padding-left:3px}
.quiz li::marker{font-weight:700}
.quiz li button{border:1px solid var(--line);background:#fbfcf7;color:inherit;border-radius:8px;padding:8px 10px;text-align:left;width:100%;font-size:.9rem}
.quiz li button[aria-pressed=true]{border-color:var(--green);background:#e8f2e8}
.quiz li button span{display:block;font-size:.75rem;margin-top:3px}
.quiz li.correct button{background:#e1f4e6;color:#155436;border-color:#7ab78e}
.quiz li.incorrect button{background:#fbe7e5;color:#842922;border-color:#d38a83}
.quiz-actions,.map-tools{display:flex;gap:7px}
.map-tools{padding:0 16px 9px}
.map-tools button{min-width:35px;border:1px solid var(--line);border-radius:7px;background:#eaf1e9;color:var(--green);font-size:1.14rem;font-weight:700}
.map-tools button:disabled{opacity:.45}
.quiz-mode .marker{--pin:#395556!important;--dot:8px}
.quiz-mode .marker:not(.quiz-picked):hover,.quiz-mode .marker:not(.quiz-picked):focus-visible{width:calc(12px + var(--point-growth,0px));height:calc(12px + var(--point-growth,0px))}

.quiz-mode .marker.quiz-picked{width:calc(25px + var(--point-growth,0px));height:calc(25px + var(--point-growth,0px));border-width:2px;z-index:4;background:#284e79}
.quiz-mode .marker.quiz-picked span{display:block}
.quiz-mode .marker:disabled{cursor:default}
@media(max-width:660px){.quiz-mode .quiz{width:100%;order:-1}.quiz #quiz-status{margin:.6rem 0}.quiz-mode .intro{padding-bottom:12px}.quiz li button{padding:6px 8px}.test-toggle{white-space:nowrap}}

#quiz-results{list-style:none;position:absolute;inset:0;margin:0;padding:0;pointer-events:none}
#quiz-results .correct{--result-color:#18713f}
#quiz-results .incorrect{--result-color:#b53128}
.result-pin{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:27px;height:27px;border:2px solid white;border-radius:50%;background:var(--result-color);color:white;font-size:.8rem;font-weight:800;box-shadow:0 1px 4px #142e3677;z-index:2}
.result-line{position:absolute;height:2px;background:var(--result-color);box-shadow:0 0 1px 1px #fff;transform-origin:0 50%;z-index:1}
.result-line::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border:1px solid white;border-radius:50%;background:var(--result-color)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mode-button{white-space:nowrap}
.study-pin{position:absolute;z-index:5;pointer-events:none;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#1a754d;box-shadow:0 0 0 2px #185c41;transform:translate(-50%,-50%)}
.study-pin::after{content:"";position:absolute;inset:-5px;border:3px solid #188359;border-radius:50%;animation:study-pulse 1.25s ease-out infinite}
@keyframes study-pulse{from{transform:scale(.75);opacity:1}to{transform:scale(2.1);opacity:0}}
#history{width:min(610px,calc(100% - 24px));max-height:85vh;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:inherit}
#history::backdrop{background:#132c26a0}
.history-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
#history-list details{background:#f5f8f3;border:1px solid var(--line);border-radius:9px;margin:8px 0;padding:12px;font-size:.9rem}
#history-list summary{cursor:pointer;font-weight:700}
#history-list ol{padding-left:22px;margin-bottom:0}
#history-list li{margin:8px 0}
#history-list li span{display:block;font-size:.85rem;margin-top:3px}
.history-correct{color:#175b38}
.history-incorrect{color:#922d25}
@media(max-width:660px){.study-mode .study{width:100%;order:-1}.study-mode .intro{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.study-pin::after{animation:none}}

.map-tools{align-items:center}
.map-tools output{min-width:42px;color:var(--green);font-size:.82rem;font-variant-numeric:tabular-nums}
.zoom-hint{color:var(--muted);font-size:.75rem}
.map-window.zoomed{cursor:grab}
.map-window.zoomed:active{cursor:grabbing}
.map-window::-webkit-scrollbar{display:none}
@media(pointer:coarse){.zoom-hint{display:none}}

.country-option{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:.82rem;cursor:pointer}
.country-option input{accent-color:var(--green)}
.countries-layer,.countries-layer img,#country-labels{position:absolute;inset:0;pointer-events:none}
#country-labels span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:#453d2f;font-size:clamp(8px,1vw,13px);font-weight:750;paint-order:stroke fill;-webkit-text-stroke:2.7px #fffbee;text-shadow:0 0 3px #fffbee}

.study-info{position:absolute;z-index:6;width:max-content;padding:9px 11px;border:1px solid #a6bdad;border-radius:9px;background:#fffefa;color:var(--ink);box-shadow:0 3px 14px #132c2630;pointer-events:none;font-size:.77rem;line-height:1.35;overflow-wrap:anywhere}
.study-info strong,.study-info span{display:block}
.study-info strong{font-size:.89rem;color:#185c41;margin-bottom:4px}
.study-info span+span{margin-top:3px}

.entry{align-items:flex-start;padding-block:8px}
.entry-details{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.entry-details>span{color:var(--muted);font-size:.74rem;line-height:1.4}

.field{border-color:#a4b8aa;box-shadow:0 3px 10px #20392b09}
.field input::placeholder{color:#576961}
.map-tools{padding:0 19px 10px}
.map-tools button{min-height:32px}
.country-option{margin-left:auto}
.quiz,.study{border-radius:18px;box-shadow:0 5px 18px #2542310a;padding:19px}
.quiz li button{padding:9px 11px}
@media(max-width:660px){.intro-text p{font-size:.87rem}.directory-scroll{padding-inline:10px}.map-tools{padding-inline:11px}.country-option{font-size:.76rem}}
.brand-icon{display:block;flex:none;width:52px;height:52px;filter:drop-shadow(0 2px 5px #102e28a0)}
.category{display:flex;align-items:center;gap:8px;letter-spacing:.025em}
.category-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;color:var(--category-color);background:#edf3e9;background:color-mix(in srgb,var(--category-color) 14%,#fffefa)}
.category-icon svg{display:block;width:20px;height:20px}
@media(max-width:660px){.brand-icon{width:46px;height:46px}}