#stage-shell { position: relative; }
#atlas-scale-guide { position: absolute; z-index: 9; top: 65px; left: max(14px, calc(50% - 610px)); display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(280px, 56%); padding: 9px 11px; border: 1px solid #9fc9c556; border-radius: 14px; color: #eaf7f0; background: #092230e8; box-shadow: 0 12px 34px #00141bc4; pointer-events: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#atlas-scale-guide[hidden] { display: none; }
.atlas-scale-guide__rings { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #9bcabd99; border-radius: 50%; box-shadow: 0 0 0 7px #a2dbc710, inset 0 0 18px #a2dbc724; }
.atlas-scale-guide__rings::before, .atlas-scale-guide__rings::after { content: ''; position: absolute; inset: 9px; border: 1px solid #b4e1c4bc; border-radius: 50%; }
.atlas-scale-guide__rings::after { inset: 19px; background: #c6edcb; box-shadow: 0 0 12px #b6ecc4b8; }
.atlas-scale-guide__content { min-width: 0; }
.atlas-scale-guide__label { display: block; color: #b2d8d0; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.atlas-scale-guide__power { display: block; margin-top: 2px; font-size: 20px; font-weight: 750; line-height: 1.12; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-scale-guide__power sup, .atlas-scale-guide__approx sup, .atlas-scale-guide__ticks sup { font-size: .68em; line-height: 0; }
.atlas-scale-guide__approx { display: block; margin-top: 3px; color: #c4e7dc; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-scale-guide__ticks { position: relative; display: flex; justify-content: space-between; width: 170px; max-width: 100%; margin-top: 6px; padding-top: 7px; border-top: 1px solid #95c8b55b; color: #b7d8d0; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-scale-guide__ticks::before { content: ''; position: absolute; top: -3px; left: calc(50% + var(--scale-progress, 0) * 50%); width: 5px; height: 5px; border-radius: 50%; background: #ecdda1; box-shadow: 0 0 8px #f3df9d; transform: translateX(-50%); }
@media (max-width: 700px) { #atlas-scale-guide { top: calc(56.25vw + 22px); left: 9px; gap: 9px; max-width: calc(100% - 18px); padding: 9px 11px; border-radius: 11px; } .atlas-scale-guide__rings { flex-basis: 36px; width: 36px; height: 36px; box-shadow: none; } .atlas-scale-guide__rings::before { inset: 7px; } .atlas-scale-guide__rings::after { inset: 15px; } .atlas-scale-guide__label { font-size: 9px; letter-spacing: .08em; } .atlas-scale-guide__power { font-size: 18px; } .atlas-scale-guide__approx { font-size: 10px; } .atlas-scale-guide__ticks { width: 155px; font-size: 8px; } }
body.immersive #atlas-scale-guide { top: 18px; left: 18px; }
@media (prefers-reduced-transparency: reduce) { #atlas-scale-guide { -webkit-backdrop-filter: none; backdrop-filter: none; background: #092230; } }