.era-current-2220, .era-current-2280, .footer-era-2220, .footer-era-2280 { display: none; }
.era-2220-page .era-current-2186, .era-2220-page .era-current-2250,
.era-2280-page .era-current-2186, .era-2280-page .era-current-2250 { display: none; }
.era-2220-page .era-current-2220, .era-2280-page .era-current-2280 { display: inline; }
.era-2220-page .footer-era-2186, .era-2280-page .footer-era-2186 { display: none; }
.era-2220-page .footer-era-2220, .era-2280-page .footer-era-2280 { display: inline; }

.era-2220-page .era-option, .era-2280-page .era-option { opacity: 1; cursor: pointer; }
body.era-2220-page .era-option[data-era="2186"], body.era-2280-page .era-option[data-era="2186"] { color: #edf0e9; background: #07101e; }
body.era-2220-page .era-option[data-era="2186"] span, body.era-2220-page .era-option[data-era="2186"] small,
body.era-2280-page .era-option[data-era="2186"] span, body.era-2280-page .era-option[data-era="2186"] small { color: #a9dfff; }
body.era-2220-page .era-option[data-era="2220"], body.era-2280-page .era-option[data-era="2280"] { color: #07101e; background: #c9ff6a; }
body.era-2220-page .era-option[data-era="2220"] span, body.era-2220-page .era-option[data-era="2220"] small,
body.era-2280-page .era-option[data-era="2280"] span, body.era-2280-page .era-option[data-era="2280"] small { color: #18304b; }

.era-2220-page, .era-2280-page { min-width: 0; }
.era-2220-page .webgl-stage, .era-2220-page .scene-hud,
.era-2280-page .webgl-stage, .era-2280-page .scene-hud { display: none; }
.era-2220-page .site-header, .era-2280-page .site-header { position: absolute; }

.era-2220-page { --mars-amber: #ffc76a; --mars-dark: #07131f; background: #07131f; color: #edf5fa; }
.era-2220-page .brand span, .era-2220-page .era-switcher summary b, .era-2220-page footer a { color: #ffc76a; }
.era-2220-page .language-option { border-color: #85cfff; background: #07131f; }
.era-2220-page .language-option:hover, .era-2220-page .language-option:focus-visible { color: #07131f; background: #85cfff; border-color: #85cfff; }
.era-2220-page .mars-landscape { background: radial-gradient(circle at 78% 47%, #a54b2f 0 2%, transparent 2.4%), radial-gradient(circle at 12% 58%, #4e98c4 0 3.4%, transparent 3.8%), linear-gradient(135deg, #02070d, #0b1e32 54%, #271516); }
.era-landscape-2220::before { background: radial-gradient(circle at 50% 50%, rgba(105,181,230,.12), transparent 35%); }
.route-earth, .route-moon, .route-mars { position: absolute; z-index: 2; border-radius: 50%; }
.route-earth { left: 9%; top: 54%; width: 74px; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #bfeaff, #347bb0 44%, #102b4a 75%); box-shadow: 0 0 48px rgba(80,164,224,.36); }
.route-moon { left: 31%; top: 45%; width: 32px; aspect-ratio: 1; background: #c7c4b9; box-shadow: 0 0 0 9px rgba(199,196,185,.12); }
.route-mars { right: 12%; top: 42%; width: 52px; aspect-ratio: 1; background: #c6623e; box-shadow: inset -12px -8px 18px #4d1d16, 0 0 34px rgba(221,105,66,.32); }
.route-flight { position: absolute; z-index: 2; left: 15%; right: 15%; top: 51%; height: 19%; border-top: 1px dashed rgba(165,218,255,.8); border-radius: 50%; transform: rotate(-5deg); }
.route-freighters i { position: absolute; z-index: 3; top: 47%; width: 16px; height: 6px; border: 1px solid #ffc76a; background: #12263a; box-shadow: 0 0 12px rgba(255,199,106,.65); }
.route-freighters i:nth-child(1) { left: 42%; }.route-freighters i:nth-child(2) { left: 56%; top: 45%; }.route-freighters i:nth-child(3) { left: 68%; top: 44%; }
.era-2220-page .mars-era-statement { color: #102437; background: #e5edf0; }
.era-2220-page .mars-era-statement > p, .era-2220-page .mars-history header > p, .era-2220-page .mars-era-closing > p { color: #205e8c; }
.era-2220-page .mars-era-statement h2 em, .era-2220-page .mars-history h2 em, .era-2220-page .mars-era-section h2 em { color: #1d6c9f; }
.era-2220-page .mars-era-statement > div p { color: #415666; }
.era-2220-page .mars-era-section { background: #07131f; border-color: rgba(133,207,255,.22); }
.era-2220-page .mars-era-section:nth-of-type(even) { background: #0b1c2c; }
.era-2220-page .mars-section-lead, .era-2220-page .mars-section-copy p { color: #bed0dc; }
.era-2220-page .mars-section-number, .era-2220-page .mars-section-visual > span { color: #ffc76a; }
.era-2220-page .mars-section-visual { border-color: rgba(133,207,255,.28); background: #0e2638; }
.era-2220-page .mars-facts { background: rgba(133,207,255,.2); }
.era-2220-page .mars-facts div { background: #10283b; }
.era-2220-page .mars-facts dt { color: #9dcbe5; }.era-2220-page .mars-facts dd { color: #f2f8fb; }
.era-2220-page .mars-history { color: #102437; background: #dce8ec; }
.era-2220-page .mars-history-item.is-live:hover, .era-2220-page .mars-history-item.is-live:focus-visible, .era-2220-page .mars-history-item.is-current { background: #1d6c9f; }
.era-2220-page .mars-era-closing { color: #06121f; background: #ffc76a; }
.era-2220-page .mars-era-closing h2 em { color: #1d6c9f; }
.era-2220-page .mars-era-closing a { color: #07131f; border-color: #07131f; }

.era-2280-page { --mars-amber: #73f4d2; --mars-dark: #050916; background: #050916; color: #eff8ff; }
.era-2280-page .brand span, .era-2280-page .era-switcher summary b, .era-2280-page footer a { color: #73f4d2; }
.era-2280-page .language-option { border-color: #a9baff; background: #060b18; }
.era-2280-page .language-option:hover, .era-2280-page .language-option:focus-visible { color: #050916; background: #a9baff; border-color: #a9baff; }
.era-2280-page .mars-landscape { background: radial-gradient(circle at 18% 24%, rgba(91,131,218,.24), transparent 12%), radial-gradient(circle at 76% 70%, rgba(91,219,199,.16), transparent 18%), #02040b; }
.era-landscape-2280::before { opacity: .7; background-image: radial-gradient(#fff 1px, transparent 1.4px), radial-gradient(#8eb7ff 1px, transparent 1.3px); background-size: 97px 97px, 167px 167px; }
.orbital-earth { position: absolute; left: -9vw; bottom: -28vw; width: 58vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 55% 36%, #d7f4ff, #4d8fc6 25%, #153357 58%, #030812 73%); box-shadow: 0 0 90px rgba(80,153,225,.3); }
.orbital-moon { position: absolute; right: 12%; top: 18%; width: 45px; aspect-ratio: 1; border-radius: 50%; background: #aaa99f; box-shadow: inset -12px -8px 17px #3f4550; }
.colony-ring { position: absolute; z-index: 3; top: 16%; right: 13%; width: min(47vw, 650px); aspect-ratio: 1; border: 18px solid #c7d6ee; border-radius: 50%; box-shadow: 0 0 0 2px #73f4d2, inset 0 0 55px rgba(115,244,210,.24), 0 0 80px rgba(91,131,218,.35); transform: perspective(850px) rotateX(64deg) rotateZ(-18deg); }
.colony-ring::before, .colony-ring::after { content: ""; position: absolute; inset: -32px; border: 1px solid rgba(169,186,255,.7); border-radius: 50%; }
.colony-ring::after { inset: 18%; border-color: #73f4d2; }
.colony-ring i { position: absolute; inset: 46% -16%; height: 8%; background: #dbe8f7; border: 1px solid #73f4d2; }
.colony-ring i:nth-child(2) { transform: rotate(90deg); }
.colony-ring b { position: absolute; inset: 49% -35%; border-top: 2px solid #a9baff; }
.colony-axis { position: absolute; z-index: 4; right: 4%; top: 47%; width: 57%; height: 8px; background: #dfe9f7; box-shadow: 0 0 15px #73f4d2; transform: rotate(-18deg); }
.era-2280-page .mars-era-statement { color: #0c1930; background: #e6ecf5; }
.era-2280-page .mars-era-statement > p, .era-2280-page .mars-history header > p, .era-2280-page .mars-era-closing > p { color: #305d8a; }
.era-2280-page .mars-era-statement h2 em, .era-2280-page .mars-history h2 em, .era-2280-page .mars-era-section h2 em { color: #3364a4; }
.era-2280-page .mars-era-statement > div p { color: #46566d; }
.era-2280-page .mars-era-section { background: #050916; border-color: rgba(169,186,255,.22); }
.era-2280-page .mars-era-section:nth-of-type(even) { background: #0a1022; }
.era-2280-page .mars-section-lead, .era-2280-page .mars-section-copy p { color: #c5d1e4; }
.era-2280-page .mars-section-number, .era-2280-page .mars-section-visual > span { color: #73f4d2; }
.era-2280-page .mars-section-visual { border-color: rgba(169,186,255,.3); background: #0b1530; }
.era-2280-page .mars-facts { background: rgba(169,186,255,.2); }
.era-2280-page .mars-facts div { background: #0e1730; }
.era-2280-page .mars-facts dt { color: #9fafe4; }.era-2280-page .mars-facts dd { color: #f0f6ff; }
.era-2280-page .mars-history { color: #0c1930; background: #e3e8f2; }
.era-2280-page .mars-history-item.is-live:hover, .era-2280-page .mars-history-item.is-live:focus-visible, .era-2280-page .mars-history-item.is-current { background: #315fa5; }
.era-2280-page .mars-era-closing { color: #06101c; background: #73f4d2; }
.era-2280-page .mars-era-closing h2 em { color: #315fa5; }
.era-2280-page .mars-era-closing a { color: #06101c; border-color: #06101c; }

.era-section-visual::before, .era-section-visual::after, .era-section-visual i { content: ""; position: absolute; display: block; }
.era-visual-route::before { top: 50%; right: 9%; left: 9%; border-top: 1px dashed #85cfff; }
.era-visual-route i { top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #ffc76a; box-shadow: 0 0 14px #ffc76a; }
.era-visual-route i:nth-of-type(1) { left: 10%; }.era-visual-route i:nth-of-type(2) { left: 38%; }.era-visual-route i:nth-of-type(3) { left: 65%; }.era-visual-route i:nth-of-type(4) { right: 10%; }
.era-visual-cargo { background-image: linear-gradient(rgba(133,207,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(133,207,255,.1) 1px, transparent 1px); background-size: 42px 42px; }
.era-visual-cargo i { bottom: 18%; width: 11%; border: 2px solid #ffc76a; background: rgba(255,199,106,.12); }
.era-visual-cargo i:nth-of-type(1) { left: 8%; height: 22%; }.era-visual-cargo i:nth-of-type(2) { left: 23%; height: 34%; }.era-visual-cargo i:nth-of-type(3) { left: 38%; height: 27%; }.era-visual-cargo i:nth-of-type(4) { left: 53%; height: 43%; }.era-visual-cargo i:nth-of-type(5) { left: 68%; height: 31%; }.era-visual-cargo i:nth-of-type(6) { left: 83%; height: 51%; }
.era-visual-outpost::before { inset: 28% 10% -18%; border: 18px solid #dfe8ed; border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: 0 -8px 0 #85cfff; }
.era-visual-outpost i { bottom: 20%; width: 8px; height: 8px; border-radius: 50%; background: #ffc76a; box-shadow: 0 0 13px #ffc76a; }
.era-visual-outpost i:nth-of-type(1) { left: 19%; }.era-visual-outpost i:nth-of-type(2) { left: 31%; }.era-visual-outpost i:nth-of-type(3) { left: 43%; }.era-visual-outpost i:nth-of-type(4) { left: 55%; }.era-visual-outpost i:nth-of-type(5) { left: 67%; }.era-visual-outpost i:nth-of-type(6) { left: 79%; }
.era-visual-extraction::before { left: 12%; bottom: 14%; width: 31%; height: 62%; border: 8px solid #85cfff; border-top: 0; transform: skewX(-8deg); }
.era-visual-extraction::after { right: 12%; bottom: 14%; width: 31%; height: 44%; border-radius: 50% 50% 0 0; border: 12px solid #ffc76a; border-bottom: 0; }
.era-visual-extraction i { left: 48%; top: 25%; width: 1px; height: 52%; background: #85cfff; transform: rotate(20deg); }
.era-visual-crew { background-image: repeating-linear-gradient(0deg, transparent 0 37px, rgba(133,207,255,.13) 38px 39px); }
.era-visual-crew i { left: 15%; right: 15%; height: 2px; background: #85cfff; }
.era-visual-crew i:nth-of-type(1) { top: 28%; }.era-visual-crew i:nth-of-type(2) { top: 38%; width: 52%; }.era-visual-crew i:nth-of-type(3) { top: 48%; width: 65%; }.era-visual-crew i:nth-of-type(4) { top: 58%; width: 38%; }.era-visual-crew i:nth-of-type(5) { top: 68%; width: 58%; }.era-visual-crew i:nth-of-type(6) { top: 78%; width: 44%; }
.era-visual-handover::before { inset: 18% 12%; border: 1px solid #85cfff; }
.era-visual-handover i { top: 25%; bottom: 25%; width: 12%; border: 2px solid #ffc76a; }
.era-visual-handover i:nth-of-type(1) { left: 16%; }.era-visual-handover i:nth-of-type(2) { left: 30%; }.era-visual-handover i:nth-of-type(3) { left: 44%; }.era-visual-handover i:nth-of-type(4) { left: 58%; }.era-visual-handover i:nth-of-type(5) { left: 72%; }.era-visual-handover i:nth-of-type(6) { left: 86%; width: 0; }

.era-visual-cylinder::before { inset: 12% 20%; border: 18px solid #b9c8e5; border-radius: 50%; box-shadow: 0 0 0 2px #73f4d2, inset 0 0 28px rgba(115,244,210,.3); transform: perspective(450px) rotateX(65deg); }
.era-visual-cylinder::after { top: 49%; right: 8%; left: 8%; border-top: 2px solid #a9baff; }
.era-visual-cylinder i { top: 30%; bottom: 30%; width: 1px; background: #73f4d2; }
.era-visual-cylinder i:nth-of-type(1) { left: 24%; }.era-visual-cylinder i:nth-of-type(2) { left: 34%; }.era-visual-cylinder i:nth-of-type(3) { left: 44%; }.era-visual-cylinder i:nth-of-type(4) { left: 54%; }.era-visual-cylinder i:nth-of-type(5) { left: 64%; }.era-visual-cylinder i:nth-of-type(6) { left: 74%; }
.era-visual-gravity::before { inset: 13%; border: 1px solid #a9baff; border-radius: 50%; box-shadow: inset 0 0 0 34px rgba(115,244,210,.09), inset 0 0 0 68px rgba(169,186,255,.08); }
.era-visual-gravity i { top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #73f4d2; transform-origin: 0 0; }
.era-visual-gravity i:nth-of-type(1) { transform: rotate(0deg) translateX(110px); }.era-visual-gravity i:nth-of-type(2) { transform: rotate(60deg) translateX(90px); }.era-visual-gravity i:nth-of-type(3) { transform: rotate(120deg) translateX(70px); }.era-visual-gravity i:nth-of-type(4) { transform: rotate(180deg) translateX(110px); }.era-visual-gravity i:nth-of-type(5) { transform: rotate(240deg) translateX(90px); }.era-visual-gravity i:nth-of-type(6) { transform: rotate(300deg) translateX(70px); }
.era-visual-landscape { background: radial-gradient(circle at 50% 120%, #40606f 0 35%, transparent 36%), linear-gradient(#17264c, #335d78 58%, #17382f 59%); }
.era-visual-landscape::before { left: 10%; right: 10%; bottom: 19%; height: 25%; background: repeating-linear-gradient(90deg, #73f4d2 0 9px, transparent 10px 25px); opacity: .7; }
.era-visual-landscape::after { left: 18%; right: 18%; bottom: 8%; height: 12%; border-radius: 50%; background: #487fa2; }
.era-visual-metabolism { background-image: linear-gradient(rgba(169,186,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(169,186,255,.1) 1px, transparent 1px); background-size: 50px 50px; }
.era-visual-metabolism i { width: 62px; height: 62px; border: 8px solid #73f4d2; border-radius: 50%; }
.era-visual-metabolism i:nth-of-type(1) { left: 12%; top: 23%; }.era-visual-metabolism i:nth-of-type(2) { left: 39%; top: 39%; border-color: #a9baff; }.era-visual-metabolism i:nth-of-type(3) { right: 12%; top: 20%; }.era-visual-metabolism i:nth-of-type(4) { left: 16%; bottom: 12%; border-color: #a9baff; }.era-visual-metabolism i:nth-of-type(5) { right: 37%; bottom: 10%; }.era-visual-metabolism i:nth-of-type(6) { right: 10%; bottom: 13%; border-color: #a9baff; }
.era-visual-migration::before { top: 50%; right: 10%; left: 10%; border-top: 1px dashed #a9baff; }
.era-visual-migration i { top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: #73f4d2; box-shadow: 0 0 13px #73f4d2; }
.era-visual-migration i:nth-of-type(1) { left: 10%; }.era-visual-migration i:nth-of-type(2) { left: 37%; }.era-visual-migration i:nth-of-type(3) { left: 64%; }.era-visual-migration i:nth-of-type(4) { right: 10%; }
.era-visual-charter { background-image: repeating-linear-gradient(0deg, transparent 0 43px, rgba(169,186,255,.16) 44px 45px); }
.era-visual-charter::before { inset: 14% 12%; border-left: 2px solid #73f4d2; border-right: 2px solid #73f4d2; }
.era-visual-charter i { left: 18%; right: 18%; height: 1px; background: #a9baff; }
.era-visual-charter i:nth-of-type(1) { top: 25%; }.era-visual-charter i:nth-of-type(2) { top: 36%; }.era-visual-charter i:nth-of-type(3) { top: 47%; }.era-visual-charter i:nth-of-type(4) { top: 58%; }.era-visual-charter i:nth-of-type(5) { top: 69%; }.era-visual-charter i:nth-of-type(6) { top: 80%; }

@media (max-width: 720px) {
  .route-earth { width: 52px; }.route-moon { left: 30%; width: 23px; }.route-mars { width: 38px; }
  .colony-ring { right: 5%; width: 75vw; }
  .orbital-earth { left: -28vw; bottom: -15vw; width: 90vw; }
}


/* Generated future-era media: one hero plus a six-panel atlas per era. */
.future-era-hero .era-landscape::before,
.future-era-hero .era-landscape::after { z-index: 2; pointer-events: none; }
.future-era-hero-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.future-era-hero .era-landscape > i,
.future-era-hero .era-landscape > div { z-index: 3; opacity: .28; }
.future-era-section .era-section-visual { isolation: isolate; aspect-ratio: 1; min-height: 0; background: #07101e; }
.future-era-section .era-section-visual::before,
.future-era-section .era-section-visual::after,
.future-era-section .era-section-visual > i { display: none; }
.future-era-atlas { position: absolute; z-index: 1; width: 300%; height: 200%; max-width: none; object-fit: fill; }
.future-era-section .era-section-visual > span { z-index: 3; padding: 7px 9px; background: rgba(3, 8, 16, .72); backdrop-filter: blur(7px); }
.future-era-section .era-section-visual { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.era-section-route .future-era-atlas,
.era-section-settlement .future-era-atlas,
.era-section-form .future-era-atlas { left: 0; top: 0; }
.era-section-cargo .future-era-atlas,
.era-section-sol .future-era-atlas,
.era-section-gravity .future-era-atlas { left: -100%; top: 0; }
.era-section-outpost .future-era-atlas,
.era-section-habitat .future-era-atlas,
.era-section-landscape .future-era-atlas { left: -200%; top: 0; }
.era-section-resources .future-era-atlas,
.era-section-systems .future-era-atlas,
.era-section-metabolism .future-era-atlas { left: 0; top: -100%; }
.era-section-crew .future-era-atlas,
.era-section-network .future-era-atlas,
.era-section-migration .future-era-atlas { left: -100%; top: -100%; }
.era-section-handover .future-era-atlas,
.era-section-commons .future-era-atlas,
.era-section-charter .future-era-atlas { left: -200%; top: -100%; }
@media (max-width: 680px) {
  .future-era-hero-image { object-position: 62% center; }
  .future-era-section .era-section-visual { min-height: 230px; }
}