/* Shared Spacian type, restrained photo/map surfaces and direct object controls. */
.solarSystem{color:var(--text,#15202b);margin:8px auto 48px;line-height:1.5}.solarSystem *{box-sizing:border-box}.solarSystem button{font:inherit;cursor:pointer}.solarSystem [hidden]{display:none!important}.solarStage{background:#030507;color:#fff;border-radius:18px;overflow:hidden}.solarStage>header{position:relative;padding:30px 36px 0;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px}.solarStage header nav{grid-column:1/-1;display:flex;gap:10px;font-size:12px;color:#a2aab1}.solarStage header nav a{color:inherit;text-decoration:none}.solarStage h1{font-size:44px;letter-spacing:-.04em;line-height:1.1;font-weight:700;margin:0 0 8px}.solarStage header p{font-size:14px;color:#aab3ba;margin:0}.solarStage header .solarEpoch{font-size:11px;margin-bottom:3px;color:#929ea7}.solarViewport{height:510px;position:relative;overflow:hidden;isolation:isolate}.solarViewport canvas{display:block;width:100%;height:100%;outline:none}.solarLoading{position:absolute;inset:0;display:grid;place-content:center;font-size:13px;color:#aab3ba}.solarLabels{position:absolute;inset:0;pointer-events:none}.solarLabels>button{position:absolute;transform:translate(-6px,-8px);pointer-events:auto;min-height:32px;padding:6px 9px;background:#030507a6;border:0;border-radius:7px;color:#d4dce2;font-size:11px;line-height:1.2;white-space:nowrap;text-shadow:0 1px 3px #000;text-align:left}.solarLabels>button[data-solar-label=mars]{color:#80d3e4;font-weight:650}.solarLabels>button>span{margin-left:5px;font-size:10px}.solarLabels>button:hover{background:#20272dee;color:#fff}.solarViewControls{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px}.solarViewControls>div{display:flex;border:1px solid #ffffff25;border-radius:24px;padding:3px;background:#151a1ee0}.solarViewControls button{min-height:34px;border:0;border-radius:21px;padding:7px 17px;font-size:11px;background:#151a1ee0;color:#c8d0d6}.solarViewControls>div button{min-height:28px;padding:4px 17px;background:none}.solarViewControls button[aria-pressed=true]{background:#fff;color:#0d1418}.solarScale{font-size:10px;color:#8b969e;text-align:center;margin:12px 24px 18px}.solarObjects{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid #ffffff24;margin:0 36px;padding:13px 0 19px}.solarObjects::-webkit-scrollbar{display:none}.solarObjects>:is(button,a){display:flex;gap:8px;align-items:center;justify-content:center;flex:1;min-width:95px;min-height:44px;border:0;background:none;color:#9da8b0;padding:10px 12px;font-size:12px;white-space:nowrap}.solarObjects>:is(button,a)[aria-pressed=true]{color:#fff}.solarObjects i{display:block;width:5px;height:5px;background:var(--planet-colour);border-radius:50%}.solarObjects>:is(button,a)[aria-pressed=true] i{outline:1px solid var(--planet-colour);outline-offset:3px}.solarObjects>:is(button,a)>span{font-size:10px;color:#68bbce}.solarInformation{max-width:940px;margin:32px auto 0}.solarBodyTitle{display:flex;gap:24px;justify-content:space-between;align-items:center}.solarBodyTitle p{font-size:12px;color:var(--muted);margin:0 0 5px}.solarBodyTitle h2{font-size:34px;line-height:1.1;letter-spacing:-.035em;margin:0;font-weight:650}.solarOpenMars{display:flex;gap:30px;align-items:center;padding:12px 18px;border-radius:11px;text-decoration:none;background:var(--text,#15202b);color:var(--bg,#fff);font-size:13px;font-weight:550;min-height:44px;white-space:nowrap}.solarFactSource{font-size:12px;color:var(--blue);text-decoration:none}.solarBodyDescription{max-width:700px;font-size:17px;line-height:1.7;color:var(--muted);margin:22px 0}.solarMetrics{display:flex;gap:40px;border-block:1px solid var(--line);margin:24px 0 0;padding:21px 0}.solarMetrics>div{flex:1}.solarMetrics dt{font-size:11px;color:var(--muted);margin-bottom:6px}.solarMetrics dd{font-size:25px;letter-spacing:-.025em;font-weight:600;line-height:1.2;margin:0;font-variant-numeric:tabular-nums}.solarMetrics small{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0}.solarAbout{margin-top:30px;font-size:12px;color:var(--muted)}.solarAbout summary{padding:10px 0;min-height:44px;cursor:pointer}.solarAbout p{max-width:760px;line-height:1.7}.solarAbout ul{padding-left:18px;line-height:1.9}.solarAbout a{color:var(--blue)}.solarSystem :is(button,a):focus-visible{outline:2px solid #4cb5d2;outline-offset:3px}
@view-transition{navigation:auto}.solarViewport{view-transition-name:solar-scene}::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media(max-width:900px){.solarStage>header{padding-inline:26px}.solarStage header .solarEpoch{font-size:10px}.solarObjects{margin-inline:26px}.solarObjects>:is(button,a){min-width:88px}.solarViewport{height:460px}}
@media(max-width:640px){.solarSystem{margin-top:0}.solarStage{margin:0 -16px;border-radius:0}.solarStage>header{display:block;padding:24px 24px 0}.solarStage header nav{font-size:11px;margin-bottom:25px}.solarStage h1{font-size:34px;margin-bottom:10px}.solarStage header p{font-size:12px}.solarStage header .solarEpoch{font-size:9px;margin-top:12px}.solarViewport{height:360px}.solarLabels>button{font-size:10px;padding:8px 7px;min-height:34px}.solarViewControls{gap:7px;padding-inline:18px}.solarViewControls button{font-size:10px;padding:8px 11px;min-height:36px}.solarViewControls>div button{padding-inline:12px}.solarScale{font-size:8px;margin:11px 20px 16px}.solarObjects{margin-inline:24px;padding:10px 0 16px}.solarObjects>:is(button,a){flex:0 0 auto;font-size:11px;min-width:78px;padding-inline:12px}.solarInformation{margin-top:24px}.solarBodyTitle{gap:14px}.solarBodyTitle h2{font-size:29px}.solarBodyTitle p{font-size:10px}.solarOpenMars{font-size:12px;padding:11px 14px;gap:18px}.solarFactSource{font-size:10px}.solarBodyDescription{font-size:14px;margin:18px 0;line-height:1.65}.solarMetrics{gap:18px;padding:18px 0;margin-top:20px}.solarMetrics dt{font-size:9px;max-width:95px}.solarMetrics dd{font-size:20px}.solarMetrics small{display:block;font-size:9px;margin-top:4px}.solarAbout{font-size:11px;margin-top:22px}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:0s}.solarSystem *{scroll-behavior:auto!important}}

.solarSystem a.solarOpenMars{color:#fff;background:#18232c}
.solarRegions{display:grid;gap:0;margin:32px 0}.solarRegions a{display:flex;justify-content:space-between;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line,#283137);font-size:15px}.solarRegions a span{color:#80d0dc}

.solarScale{font-size:11px;line-height:1.5;padding:0 20px}

/* Keep the stage, controls and current object readable on short and portrait viewports. */
.solarViewport{height:clamp(340px,54vh,510px)}.solarStage>header{padding-top:24px;gap:16px}.solarLabels>button{transform:none;min-height:36px}.solarObjects{scroll-padding-inline:16px}.solarViewControls button{min-height:44px}.solarViewControls>div button{min-height:36px}
@media(max-width:640px){.solarStage header nav{margin-bottom:18px}.solarStage>header{padding-top:20px}.solarViewport{height:clamp(280px,40vh,360px)}.solarStage header .solarEpoch{font-size:11px}.solarViewControls{flex-wrap:wrap;gap:6px;padding-inline:12px}.solarViewControls button{font-size:11px;padding-inline:10px}.solarViewControls>div button{padding-inline:10px}.solarBodyTitle{flex-wrap:wrap}.solarFactSource{font-size:12px}.solarMetrics dt,.solarMetrics small{font-size:11px}.solarAbout{font-size:13px}.solarScale{padding:0;margin:10px 16px 12px}}

.solarObjects>a{font-family:inherit;text-decoration:none;cursor:pointer}.solarViewControls button:disabled{opacity:.45;cursor:wait}.solarLoading{padding:24px;text-align:center;max-width:34em;margin:auto;line-height:1.6}

.solarMoonLinks{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin:24px 0}.solarMoonLinks>a:not(.solarOpenMars){display:flex;align-items:center;gap:16px;min-height:44px;text-decoration:none}.solarSystemNote,.solarMapCredit{font-size:13px;line-height:1.7;color:var(--muted,#636d78);max-width:760px}.solarMapCredit a{color:inherit}.solarLocalSystem .solarViewport{height:clamp(360px,58vh,560px)}@media(max-width:640px){.solarLocalSystem .solarViewport{height:clamp(330px,44vh,420px)}}

.solarLabels>button.hasLocationPin::before{content:"";position:absolute;left:var(--pin-x);top:var(--pin-y);width:4px;height:4px;border:1px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:#03050766}

.solarLabels>button.selected{font-size:13px;font-weight:600}