:root{font-family:'Yu Gothic UI',Meiryo,sans-serif;color:#20352f;background:#e8eee9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{max-width:1600px;margin:auto;padding:0 4vw}header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cad6ce}.brand,.header-right{display:flex;align-items:center;gap:14px}.brand-icon{width:43px;height:43px;background:#17483d;color:white;display:grid;place-items:center;font:23px serif}.brand strong{font-size:17px;display:block;letter-spacing:.08em}.brand small{font-size:10px;color:#7a8d84}.header-right{gap:20px;font-size:12px}.status{color:#879992}.status.connected{color:#2d8067}.progress{border-left:1px solid #cad6ce;padding-left:20px;color:#698078}.progress b{font-size:19px;color:#224b40}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,1fr);gap:20px;padding:22px 0}.catalog,.detail{background:#f9fbf7;border:1px solid #d6e1d8;border-radius:4px;overflow:hidden}.catalog{display:flex;flex-direction:column;min-height:680px}.catalog-head{padding:28px 30px 0}.eyebrow{font:700 10px Arial,sans-serif;letter-spacing:.16em;color:#69887a;margin:0 0 12px}h1{font-size:25px;margin:0 0 20px;letter-spacing:.06em}.tabs{display:flex;border-bottom:1px solid #dce7dd;gap:20px}.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 4px;color:#7b8f83;font-weight:bold}.tabs button.active{color:#215c4b;border-color:#215c4b}.catalog-content{padding:22px 30px;flex:1;max-height:650px;overflow:auto}.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}.region,.topic-group{border-top:1px solid #dce7dd;padding-top:10px}.region-title{color:#638175;font-size:11px;font-weight:bold;letter-spacing:.08em;margin:0 0 10px}.tiles{display:flex;flex-wrap:wrap;gap:5px}.tile,.topic-button{border:1px solid #dbe6dc;background:#eff4ed;color:#3d6255;min-height:35px;padding:7px 9px;border-radius:2px;font:600 12px inherit;cursor:pointer;position:relative}.tile.active,.topic-button.active{background:#215c4b;color:white;border-color:#215c4b}.tile.done:after,.topic-button.done:after{content:'';position:absolute;right:4px;top:4px;width:6px;height:6px;background:#d9a94b;border-radius:50%}.topic-group{margin-bottom:18px}.topic-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.topic-button{text-align:left;line-height:1.5}.topic-button small{display:block;opacity:.7;font-size:10px}.catalog-foot{border-top:1px solid #dce7dd;margin:0 30px;padding:14px 0;display:flex;justify-content:space-between;font-size:10px;color:#8a9f91}.catalog-foot span:first-child{color:#b48b3c}.detail-top{background:#21594a;color:white;padding:30px 32px;display:flex;justify-content:space-between;min-height:150px}.light{color:#a9c9b6}.detail-top h2{font-family:serif;font-size:32px;letter-spacing:.06em;margin:0 0 10px}.detail-meta{font-size:11px;color:#bdd6c5;margin:0}.seal{border:1px solid #73a28e;border-radius:50%;width:62px;height:62px;display:grid;place-content:center;text-align:center;font:23px/.9 serif;color:#c9e1d1;flex-shrink:0}.seal small{font-size:12px}.detail-content{padding:6px 32px 0;max-height:455px;overflow:auto}.capital{display:flex;justify-content:space-between;align-items:center;padding:19px 0;border-bottom:1px solid #e1e9df;font-size:12px;color:#819488}.capital strong{font-size:17px;color:#20352f}.info{padding:19px 0 0}.info-title{display:flex;align-items:center;gap:10px}.info-title span{font:10px Arial;color:#b7a06c}.info h3{font-size:12px;margin:0;color:#526d60}.info p{font-size:14px;line-height:1.85;margin:8px 0 0;white-space:pre-line}.actions{display:flex;gap:8px;padding:22px 32px}.actions button{padding:12px 14px;border-radius:2px;font-size:12px;font-weight:bold;flex:1}.primary{border:1px solid #235d4d;background:#235d4d;color:white}.secondary{border:1px solid #cadbd0;background:white;color:#285c4d}button{font-family:inherit;cursor:pointer}button:focus{outline:3px solid #d4a550;outline-offset:2px;z-index:1}.quiz-box{margin:0 32px 24px;border-top:1px solid #dce7dd;padding-top:15px}.quiz-head{display:flex;justify-content:space-between;font-size:11px;color:#638175}.quiz-head button{border:0;background:none;font-size:20px}.quiz-box p{font-size:13px;line-height:1.7}.answers{display:grid;grid-template-columns:1fr 1fr;gap:6px}.answers button,#next-quiz{border:1px solid #cbdccf;background:white;color:#285c4d;padding:10px;text-align:left}.answers button.chosen{background:#dcebe1;border-color:#235d4d}#feedback{color:#286149;font-weight:bold}footer{display:flex;justify-content:space-between;gap:15px;padding:0 0 25px;color:#71877a;font-size:10px}.controls,.sources{display:flex;gap:14px;flex-wrap:wrap}.controls b{background:#d6e2d8;padding:3px 6px;color:#4b6b5d;margin-right:4px}.sources a{color:#71877a}@media(max-width:950px){main{grid-template-columns:1fr}.catalog{min-height:0}.catalog-content{max-height:400px}.detail-content{max-height:none}footer{flex-direction:column}}@media(max-width:550px){.app{padding:0 14px}header{height:70px}.brand strong{font-size:14px}.header-right{gap:8px}.status{font-size:0}.status:before{content:'●';font-size:13px}.progress{padding-left:8px}.catalog-head{padding:24px 18px 0}.catalog-content{padding:18px}.regions{grid-template-columns:repeat(2,1fr)}.topic-list{grid-template-columns:1fr}.catalog-foot{margin:0 18px}.detail-top{padding:25px}.detail-content{padding:6px 25px 0}.actions{padding:22px 25px}.quiz-box{margin:0 25px 24px}.controls{line-height:2}}

.quiz-source{background:#f1f4e9;border-left:3px solid #c3b077;padding:12px 14px;font-size:12px;line-height:1.8;white-space:pre-line}
.climate-chart{margin:20px 0;padding:15px;border:1px solid #d9e6db;background:#fff}.climate-chart figcaption{font-weight:700;font-size:13px}.climate-chart svg{display:block;max-width:480px;width:100%;height:auto;margin:8px auto}.climate-chart svg text{font:9px sans-serif;fill:#546e60}.chart-legend{font-size:11px;color:#4a6a5d}.chart-legend span+span{color:#a34238;margin-left:10px}.climate-chart summary{font-size:12px;cursor:pointer;color:#285c4d}.climate-chart table{border-collapse:collapse;font-size:11px;margin-top:8px;width:100%}.climate-chart th,.climate-chart td{padding:4px;border:1px solid #dce7dd;text-align:right}
.tile-map{margin:20px 0;padding:15px;border:1px solid #d9e6db;background:#fff}.tile-map figcaption{font-size:13px;font-weight:700;margin-bottom:10px}.tile-map img{display:block;width:min(100%,384px);height:auto;image-rendering:auto}.tile-map p{font-size:11px;color:#526d60;line-height:1.5}
.tile-grid{display:grid;width:min(100%,480px);grid-template-columns:repeat(1,1fr)}.tile-grid-3{grid-template-columns:repeat(3,1fr)}.tile-grid img{display:block;width:100%;height:auto}.tile-map img.relief-legend{width:min(100%,360px);height:auto}
.tile-cell{position:relative}.tile-cell .tile-overlay{position:absolute;inset:0}
.map-error{grid-column:1/-1;font-size:12px;color:#7d4a3b;padding:12px;border:1px solid #d8c5b9;background:#fff8f3}
.population-chart{margin:20px 0;padding:16px;border:1px solid #d9e6db;background:#fff}.population-chart figcaption{font-size:13px;font-weight:700}.population-legend{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;font-size:11px}.population-legend i{display:inline-block;width:10px;height:10px;margin-right:4px}.population-row{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:12px}.population-row strong{width:54px;flex:none}.population-bar{height:22px;position:relative;flex:1;background:#eee}.population-bar span{position:absolute;top:0;bottom:0}.population-chart table{border-collapse:collapse;font-size:11px;width:100%;margin-top:15px}.population-chart th,.population-chart td{padding:5px;border:1px solid #dce7dd;text-align:right}
.pyramid-chart{margin:20px 0;padding:15px;border:1px solid #d9e6db;background:#fff}.pyramid-chart figcaption{font-size:13px;font-weight:700}.pyramid-head{display:grid;grid-template-columns:1fr 54px 1fr;gap:4px;margin:12px 0 4px;font-size:10px;color:#526d60}.pyramid-head span:nth-child(2){text-align:center}.pyramid-head span:last-child{text-align:right}.pyramid-row{display:grid;grid-template-columns:1fr 54px 1fr;gap:4px;align-items:center;margin:2px 0}.pyramid-left,.pyramid-right{height:10px;background:#f2f5f0;display:flex}.pyramid-left{justify-content:flex-end}.pyramid-left span{background:#47839b}.pyramid-right span{background:#c37972}.pyramid-age{text-align:center;font-size:10px;white-space:nowrap}.pyramid-chart table{border-collapse:collapse;font-size:11px;width:100%;margin-top:15px}.pyramid-chart th,.pyramid-chart td{padding:4px;border:1px solid #dce7dd;text-align:right}
.related{margin-top:22px;padding-top:15px;border-top:1px solid #dce7dd}.related h3{font-size:12px;color:#526d60;margin:0 0 9px}.related button{display:block;width:100%;margin:5px 0;padding:10px;text-align:left;background:#f1f6ef;border:1px solid #d5e3d6;color:#285c4d;font-size:12px}

.tile-grid{position:relative}.map-label{position:absolute;transform:translate(-50%,-50%);font-size:11px;line-height:1.2;font-weight:700;color:#1b3b33;background:rgba(255,255,255,.9);padding:1px 2px;border-radius:2px;pointer-events:none}

.map-point{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;border:2px solid white;border-radius:50%;background:#b83c32;box-shadow:0 0 0 1px #6d251e;pointer-events:none}

.symbol-reference{margin:20px 0;padding:15px;border:1px solid #d9e6db;background:#fff}.symbol-reference figcaption{font-size:13px;font-weight:700}.symbol-reference img{display:block;max-width:100%;height:auto;margin:12px 0}.symbol-reference p{font-size:11px}

.topic-filter{margin:12px 0 0;padding:7px 10px;border:1px solid #cadbd0;border-radius:2px;background:#fff;color:#285c4d;font-size:12px;font-weight:600}.topic-filter[hidden]{display:none}

a[data-nav]:focus { outline: 3px solid #d4a550; outline-offset: 2px; }

.info a { color: #285c4d; overflow-wrap: anywhere; }
.tile-cell{aspect-ratio:1}
.quiz-source a{color:#285c4d;overflow-wrap:anywhere}
.gis-diagram{margin:20px 0;padding:15px;border:1px solid #d9e6db;background:#fff}.gis-diagram figcaption{font-size:13px;font-weight:700}.gis-diagram svg{display:block;width:100%;max-width:400px;height:auto;margin:12px 0}.gis-diagram p{font-size:13px;line-height:1.6}

.save-status{margin:12px 32px 0;color:#8a3d2a;font-size:13px;line-height:1.5}

.notes-panel{margin:20px 32px;padding:16px;background:#f1f6ef;border:1px solid #d5e3d6}.notes-panel[hidden]{display:none}.notes-fields,.notes-actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.notes-panel button{padding:7px;border:1px solid #b6cbbd;background:#fff;color:#215c4b}.notes-panel button[aria-pressed=true]{background:#215c4b;color:#fff}.notes-panel label{display:block;font-weight:bold;margin:10px 0}.notes-panel textarea{width:100%;font:inherit;resize:vertical}.notes-keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:10px 0}.notes-keys button{min-width:0;padding:6px 2px}.notes-panel [role=status]{font-size:12px} @media(max-width:600px){.notes-panel{margin:12px}.notes-keys{grid-template-columns:repeat(6,minmax(0,1fr))}}