/* Compact map picker; colors inherit the homepage environment and dark mode. */
#hero-sim-controls-model-explorer { width: 260px; }
body.dark-mode #hero-sim-controls-model-explorer { background: rgba(20, 22, 38, .84); border-color: #b4b8de26; }
body.dark-mode #hero-sim-controls-model-explorer .text-muted { color: #b8bdd0; }
body.dark-mode #hero-sim-controls-model-explorer button,
body.dark-mode #hero-sim-controls-model-explorer .text-primary { color: #c2c9e7; }
body.dark-mode #hero-sim-controls-model-explorer [aria-pressed="true"] { color: #bac5ff; }
#hero-sim-controls-model-explorer [data-explorer-body] {
    flex: 1; justify-content: center; padding: 7px 3px; border-radius: 7px;
    border: 1px solid transparent; font-size: 11px;
}
#hero-sim-controls-model-explorer [data-explorer-body][aria-pressed="true"] {
    background: color-mix(in srgb, currentColor 8%, transparent); border-color: currentColor;
}
#hero-explorer-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.hero-explorer-map {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 8px;
    padding: 7px 2px; min-height: 60px; transition: background .15s, border-color .15s;
}
.hero-explorer-map:hover, .hero-explorer-map[aria-pressed="true"] {
    background: color-mix(in srgb, currentColor 7%, transparent); border-color: currentColor;
}
.hero-explorer-map strong { display: block; font-size: 10px; line-height: 1.2; font-weight: 500; }
.hero-explorer-map small { display: none; }
.hero-explorer-map::after { content: ''; position: absolute; top: 2px; right: 3px; font-size: 9px; }
.hero-explorer-map[aria-pressed="true"]::after { content: '✓'; }
.hero-explorer-swatch {
    flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #dfded9, #78766f 55%, #191c23);
    box-shadow: inset -4px -3px 7px #0005;
}
[data-body="earth"] .hero-explorer-swatch { background: radial-gradient(circle at 35% 25%, #a9cbbb, #3f8a98 45%, #172f59 75%); }
[data-explorer-layer="night"] .hero-explorer-swatch { background: radial-gradient(circle at 35% 25%, #b79b4a, #14263f 40%, #050a18); }
[data-explorer-layer="relief"] .hero-explorer-swatch, [data-explorer-layer="elevation"] .hero-explorer-swatch { background: linear-gradient(135deg, #a44831, #d4c979, #609297, #344c92); }
[data-explorer-layer="hydrogen"] .hero-explorer-swatch { background: radial-gradient(circle at 35% 25%, #54d2eb, #6269a2 50%, #e357c2); }
[data-explorer-layer="red"] .hero-explorer-swatch { background: radial-gradient(circle at 35% 25%, #e5aa76, #a85939 60%, #542e26); }
[data-explorer-layer="green"] .hero-explorer-swatch { background: radial-gradient(circle at 35% 25%, #aaa172, #627344 45%, #445f69 65%, #203c46); }
[data-explorer-layer="blue"] .hero-explorer-swatch { background: radial-gradient(circle at 35% 25%, #80a0a2, #437562 45%, #246077 65%, #162e4c); }
#hero-explorer-note { line-height: 1.5; font-size: 10px; min-height: 30px; }
.hero-explorer-hint { font-size: 9px; opacity: .8; }
.hero-explorer-grab {
    position: fixed; z-index: 1; border-radius: 50%; clip-path: circle(50%);
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.hero-explorer-grab.is-dragging { cursor: grabbing; }
.hero-explorer-grab:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.hero-explorer-grab[hidden] { display: none; }
body[data-hero-sim="model-explorer"] #hero .hero-copy { position: relative; z-index: 2; pointer-events: none; }
body[data-hero-sim="model-explorer"] #hero .hero-copy a,
body[data-hero-sim="model-explorer"] #hero .hero-copy button,
body[data-hero-sim="model-explorer"] #hero .hero-copy .profile-flip-container { pointer-events: auto; }
#hero-sim-controls-model-explorer button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-height: 720px) {
    .hero-explorer-map { min-height: 52px; padding: 4px 2px; }
    #hero-explorer-note { font-size: 9px; }
}