:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#090e18;color:#eff3fa}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 30% 20%,#19314940,transparent 55%),#090e18}
.shell{width:min(1320px,92%);margin:auto}
header{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid #ffffff12}
.brand{font-size:12px;font-weight:750;letter-spacing:.19em;text-decoration:none;color:#edf5ff}
.brand span{font-size:26px;color:#a3d9cc;vertical-align:middle;margin-right:9px}
.header-note,.eyebrow{font-size:9px;letter-spacing:.18em;color:#9baec3;line-height:1.6}
.page-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;padding:35px 0 26px}
h1{font-size:clamp(30px,3.6vw,50px);line-height:1.15;font-weight:500;letter-spacing:-.045em;margin:10px 0 0}
h1 em{font-family:Georgia,serif;font-weight:400;color:#bce5d6}
.page-heading>p{font-size:12px;line-height:1.8;color:#98abc1;margin:0}
.explorer{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);border:1px solid #ffffff18;border-radius:25px;overflow:hidden;background:#101a28}
.viewport{min-width:0;background:radial-gradient(ellipse at center,#18364b70,transparent 68%),#0b1421}
.world-tabs{display:flex;gap:8px;padding:22px 22px 0}
button{font:inherit;cursor:pointer;color:inherit}
.world-tabs button,.controls button,#next-fact,.answer{background:#ffffff06;border:1px solid #ffffff20;border-radius:30px;padding:10px 15px;font-size:11px}
button:hover{background:#ffffff12}
button[aria-pressed=true]{background:#b8e2d4;color:#142b2b;border-color:#b8e2d4}
button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid #bcf2df;outline-offset:5px}
.canvas-wrap{position:relative;aspect-ratio:1.2;min-height:340px;max-height:650px}
#globe{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#globe:active{cursor:grabbing}
.globe-caption{position:absolute;left:28px;bottom:45px;pointer-events:none;display:flex;flex-direction:column;gap:6px}
.globe-caption span{font-size:8px;letter-spacing:.19em;color:#97b1c6}
.globe-caption strong{font-size:30px;font-weight:400;letter-spacing:-.04em}
.drag-hint{position:absolute;bottom:16px;left:28px;font-size:8px;letter-spacing:.1em;color:#8fa4bd;pointer-events:none}
.controls{padding:16px 22px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid #ffffff10}
.controls button{font-size:10px;padding:9px 12px}
.controls label{font-size:10px;color:#aabbd0;display:flex;align-items:center;gap:8px;margin-left:auto}
input{width:90px;accent-color:#b8e2d4}
.surface-note{font-size:9px;color:#8097ae;padding:0 22px 15px;margin:0}
.info-panel{padding:30px;border-left:1px solid #ffffff12}
.info-panel h2{font-size:32px;font-weight:450;letter-spacing:-.045em;margin:12px 0}
#intro{font-size:13px;color:#a9bbd0;line-height:1.8;min-height:68px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:23px 0}
.stats div{padding:13px;background:#ffffff04;border:1px solid #ffffff10;border-radius:12px}
.stats span{display:block;font-size:8px;letter-spacing:.12em;color:#8ea5bd;margin-bottom:7px}
.stats strong{font-size:13px;font-weight:500}
.fact-card,.mission-card{border-top:1px solid #ffffff15;padding-top:20px;margin-top:22px}
.section-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
#fact-count{font-size:10px;color:#879cb4}
h3{font-size:19px;font-weight:500;letter-spacing:-.025em;margin:12px 0}
#fact-text{font-size:13px;color:#b8c9db;line-height:1.8;min-height:90px}
#next-fact{padding:9px 12px;font-size:10px}
#source{font-size:10px;color:#b4dacc}
#missions{list-style:none;padding:0;margin:13px 0;font-size:12px;color:#adbed1}
#missions li{padding:7px 0}
#missions li.done{color:#b8e2d4}
#mission-status{font-size:11px;color:#b8e2d4;min-height:17px}
.challenge{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:25px 0;padding:28px;border:1px solid #ffffff18;background:#111b29;border-radius:22px}
.challenge h2{font-size:25px;font-weight:450;letter-spacing:-.035em;margin:8px 0}
#question{font-size:13px;color:#b7c8db;line-height:1.6}
#answers{display:flex;flex-wrap:wrap;gap:9px;padding-top:10px}
.answer{font-size:12px;border-radius:12px}
.answer:disabled{cursor:default;opacity:1}
.answer.correct{background:#264b40;border-color:#88ccb2}
.answer.wrong{background:#533141;border-color:#c88ca5}
#feedback{font-size:12px;color:#b8e2d4;line-height:1.6;min-height:30px}
footer{display:flex;justify-content:space-between;gap:20px;padding:20px 0 30px;font-size:8px;letter-spacing:.08em;color:#8199b2}
@media(max-width:900px){
 .explorer{grid-template-columns:1fr}
 .info-panel{border-left:0;border-top:1px solid #ffffff15;padding:25px}
 .canvas-wrap{aspect-ratio:1.25;max-height:none}
 #intro,#fact-text{min-height:0}
 .challenge{grid-template-columns:1fr;gap:5px}
 .page-heading>p,.header-note{display:none}
 .controls label{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}