.explore-tools { display:flex;align-items:center;gap:6px;padding:4px 12px;flex-wrap:wrap;font-size:12px; }
.explore-tools select {font:inherit;max-width:120px;border:1px solid #b7c4bc;border-radius:8px;padding:5px;background:#f1f3ed;color:#243b34;}
.explore-tools .btn {font-size:11px;min-height:30px;}
.explore-tools [aria-pressed="true"] {background:#29483d;color:#f5f3e9;}
.global-events {padding:4px 12px;background:#ddd9bd;display:flex;gap:5px;overflow:auto;}
.global-events .btn {font-size:12px;flex-shrink:0;}
.quiz-panel {position:relative;background:#e5e8cd;padding:8px 68px 8px 12px;color:#253e34;}
.quiz-panel p {margin:0;font-size:13px;font-weight:700;}
.quiz-panel small {font-size:11px;}
.quiz-panel .btn {position:absolute;right:10px;top:8px;}
#quizStart {margin-left:auto;font-size:12px;}
.event-milestones {height:7px;position:relative;pointer-events:none;}
.event-milestones span {position:absolute;top:0;width:3px;height:6px;border-radius:1px;background:#7f6842;}
.marker.approximate .dot-ring {stroke-dasharray:3 3;}
body[data-mode="earth"] .explore-tools {display:none;}
.earth-view {justify-content:flex-start;background:radial-gradient(ellipse at 36% 20%,#172b3c 0%,#091421 40%,#050b12 85%);padding:18px 14px;gap:10px;}
.space {position:relative;isolation:isolate;min-height:180px;}
.space::before {content:"";position:absolute;inset:0;z-index:-1;opacity:.6;background-image:radial-gradient(1px 1px at 8% 18%,#bfced6 99%,transparent),radial-gradient(1px 1px at 78% 38%,#cfdadf 99%,transparent),radial-gradient(1px 1px at 28% 74%,#99aab5 99%,transparent),radial-gradient(1px 1px at 91% 87%,#afbcc7 99%,transparent);background-size:161px 173px,193px 127px,151px 197px,211px 159px;}
.atmosphere, .atmosphere[data-visual] {width:min(62vw,37dvh,340px);height:min(62vw,37dvh,340px);box-shadow:none;}
.globe {width:100%;height:100%;overflow:visible;background:none;filter:drop-shadow(-3px -2px 7px #477a9e44);}
.globe[data-visual="hadean"] {filter:drop-shadow(-2px -2px 7px #bf55264f);}
#earthCanvas {width:100%;height:100%;display:block;}
.earth-concept {font-size:10px;line-height:1.5;color:#8099a9;max-width:36em;margin:0;text-align:center;}
.earth-caption {font-size:12px;color:#d3dde4;}
.earth-topics {display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.earth-topics button {border:1px solid #3c5263;border-radius:20px;padding:7px 12px;font-size:12px;background:#16293a;color:#dce5e7;}
.earth-facts {max-width:520px;backdrop-filter:none;}
.earth-facts li {grid-template-columns:48px 1fr auto;}
#researchRaster {image-rendering:auto;}
@media(prefers-reduced-motion:reduce){* {scroll-behavior:auto!important;}}
[hidden] {display:none!important;}

#quizClock {display:block;font-size:12px;font-variant-numeric:tabular-nums;}

.globe-view {position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 40% 35%,#162a3d,#050b13 78%);}
#mapGlobeCanvas {width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline-offset:-4px;}
#mapGlobeCanvas:active {cursor:grabbing;}
.globe-labels {position:absolute;inset:0;pointer-events:none;}
.globe-pin {position:absolute;transform:translate(-50%,-100%);border:0;background:transparent;color:#fff7dc;text-shadow:0 1px 3px #000,0 0 5px #000;font-size:12px;font-weight:700;max-width:190px;padding:10px 6px 18px;pointer-events:auto;line-height:1.3;}
.globe-pin::after {content:"";position:absolute;bottom:4px;left:calc(50% - 4px);width:8px;height:8px;border:2px solid #faf2d7;border-radius:50%;background:#9a5332;}
.globe-pin.approximate::after {border-style:dashed;}

.globe-pin {width:max-content;}

.view-switch {display:inline-flex;gap:0;}
.view-switch .btn {border-radius:0;}
.view-switch .btn:first-child {border-radius:10px 0 0 10px;}
.view-switch .btn:last-child {border-radius:0 10px 10px 0;}

/* Coastlines remain the edge between land and ocean. Do not outline the model's
   polygon fragments; overlapping land must not create even-odd cutouts. */
body[data-mode="life"] .land {stroke:none;fill-rule:nonzero;}
body[data-mode="life"] #landClipPath {clip-rule:nonzero;}
body[data-mode="life"] .fill {stroke:none;}

/* A visual boundary between the two renderers, aligned to the range thumb travel. */
.era-divider {position:absolute;left:calc(12px + (100% - 24px)*var(--boundary));top:9px;width:5px;height:27px;transform:translateX(-50%);border:2px solid #fff9e9;border-radius:3px;background:#364a44;box-shadow:0 1px 3px #10292155;pointer-events:none;z-index:2;}
.era-divider::before {content:"";position:absolute;width:8px;height:8px;top:-6px;left:-3.5px;transform:rotate(45deg);border:1px solid #fff9e9;background:#364a44;border-radius:1px;}
body[data-mode="life"] .fill {fill-opacity:1;}