.ss-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-hero { background: #02030A; }
.ss-planet { position: absolute; right: 22%; top: 50%; width: 1500px; height: 1500px; transform: translateY(-50%); border-radius: 50%; background: #03040C; }
@media (max-width: 700px) { .ss-planet { width: 900px; height: 900px; right: 16%; } }
.ss-horizon { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #1A1F3A; }
.ss-dot { position: absolute; right: calc(22% - 18px); top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: #E8ECFF; box-shadow: 0 0 14px #7F8CD6; opacity: 0; transition: opacity .6s; }
@media (max-width: 700px) { .ss-dot { right: calc(16% - 18px); } }
.ss-title { margin: 0; font-weight: 200; font-size: clamp(56px, 8vw, 120px); line-height: .9; letter-spacing: .02em; color: #E4E8FF; }
.r-sonicstate .ctl { color: #DCE2FF; }
.r-sonicstate .ctl label { color: #9AA3CC; }
.r-sonicstate .rh-meta { color: #9AA3CC; }
.r-sonicstate .trk .t { font-weight: 300; }
.r-sonicstate .trk[aria-pressed="true"] { --moon: #E8ECFF; }
.moon { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset -3px 0 0 0 var(--moon, #3A4170); transition: box-shadow .4s; }
.r-sonicstate .trk .n { opacity: 1; display: flex; align-items: center; }