@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=JetBrains+Mono:wght@300;500&display=swap");

/* ========================================================
   Solar System 3D — halaman tata surya interaktif

   Halaman ini sengaja TIDAK memuat css/style.css: dia tidak
   punya header/footer situs, jadi reset & tipografinya berdiri
   sendiri di file ini.

   Bahasa visual: konsol telemetri misi. Angka dibaca sebagai
   data (mono, tabular), struktur dibentuk hairline rule, dan
   --ss-accent diambil dari warna benda langit yang sedang
   difokus (di-set dari js/solar-system.js).
   ======================================================== */

:root {
  --ss-void: #05070d;
  --ss-panel: rgba(8, 11, 20, 0.72);
  --ss-rule: rgba(255, 255, 255, 0.14);
  --ss-rule-soft: rgba(255, 255, 255, 0.07);
  --ss-text: #d6dae4;
  --ss-dim: #6b7385;
  --ss-accent: #00aaff;

  --ss-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ss-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* --- Reset lokal --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--ss-void);
  color: var(--ss-text);
  font-family: var(--ss-mono);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Wajib: aturan .ss-tour-btn { display: inline-flex } lebih kuat dari
   [hidden] bawaan browser, jadi tombol yang di-hide tetap muncul */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 1px solid var(--ss-accent);
  outline-offset: 3px;
}

/* Micro-label: satuan tipografi yang dipakai berulang di seluruh UI */
.ss-micro {
  font-family: var(--ss-mono);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Canvas --- */
#solar-system-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ss-void);
}

#solar-system-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Baris atas: kembali + kontrol tur --- */
.ss-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px clamp(16px, 3vw, 32px);
  pointer-events: none;
}

.ss-topbar > * {
  pointer-events: auto;
}

.ss-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  color: var(--ss-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.ss-back:hover,
.ss-back:focus-visible {
  color: var(--ss-text);
  border-bottom-color: var(--ss-rule);
}

.ss-back svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.ss-tour-controls {
  display: flex;
  gap: 8px;
}

.ss-tour-btn {
  position: relative; /* jadi jangkar buat cincin sorot panduan */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--ss-rule);
  border-radius: 2px;
  color: var(--ss-dim);
  background: var(--ss-panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.ss-tour-btn:hover {
  color: var(--ss-text);
  border-color: var(--ss-accent);
}

.ss-tour-btn:active {
  transform: translateY(1px);
}

.ss-tour-btn svg {
  width: 10px;
  height: 10px;
  flex: none;
  fill: currentColor;
}

/* Tombol tanda tanya — ikon saja, proporsi persegi */
.ss-icon-btn {
  padding: 9px;
  aspect-ratio: 1;
  justify-content: center;
}

.ss-icon-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
}

/* Tombol suara: dua ikon menumpuk di markup, cuma satu yang tampil.
   aria-pressed jadi satu-satunya sumber kebenaran, jadi state visual
   tidak bisa melenceng dari state yang dibaca screen reader. */
.ss-audio-btn .ss-audio-off,
.ss-audio-btn[aria-pressed="false"] .ss-audio-on {
  display: none;
}

.ss-audio-btn[aria-pressed="false"] .ss-audio-off {
  display: block;
}

/* Saat senyap tombolnya diredupkan — status "mati" harus terbaca
   sekilas tanpa perlu memelototi ikonnya. */
.ss-audio-btn[aria-pressed="false"] {
  opacity: 0.55;
}

.ss-audio-btn[aria-pressed="false"]:hover {
  opacity: 1;
}

/* --- Panel data planet --- */
.ss-panel {
  position: fixed;
  top: 50%;
  right: clamp(16px, 3vw, 32px);
  transform: translateY(-50%) translateX(24px);
  z-index: 45;
  width: min(372px, 34vw);
  max-height: 84vh;
  overflow-y: auto;
  padding: 24px 24px 22px;
  background: var(--ss-panel);
  border: 1px solid var(--ss-rule-soft);
  /* Sisi kiri panel memakai warna benda langit yang sedang dilihat */
  border-left: 2px solid var(--ss-accent);
  border-radius: 2px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

.ss-panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

/* Penanda masih ada isi di bawah — kelasnya dipasang dari JS, jadi
   fade-nya hilang begitu sudah di-scroll sampai habis */
.ss-panel.has-more {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 32px),
    transparent
  );
}

.ss-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}

.ss-seq {
  color: var(--ss-dim);
  font-variant-numeric: tabular-nums;
}

.ss-kind {
  color: var(--ss-accent);
  text-align: right;
}

.ss-name {
  margin: 0 0 12px;
  font-family: var(--ss-display);
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: clamp(1.85rem, 3.6vw, 2.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

.ss-desc {
  margin: 0 0 20px;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--ss-text);
  opacity: 0.82;
}

/* Label kelompok data — Orbit / Rotasi / Fisik */
.ss-group {
  margin: 18px 0 6px;
  color: var(--ss-accent);
}

.ss-group:first-of-type {
  margin-top: 0;
}

.ss-data {
  margin: 0;
  border-top: 1px solid var(--ss-rule);
}

.ss-data > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ss-rule-soft);
}

.ss-data dt {
  color: var(--ss-dim);
  flex: none;
}

.ss-data dd {
  margin: 0;
  font-weight: 500;
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ss-text);
}

.ss-note {
  margin: 16px 0 0;
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--ss-dim);
}

.ss-note-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ss-accent);
}

/* --- Rail bawah: benda langit diurutkan sesuai jarak orbit --- */
.ss-rail {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 clamp(12px, 3vw, 32px) 20px;
  pointer-events: none;
}

.ss-rail-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 22px);
  max-width: 1160px;
  width: 100%;
  pointer-events: auto;
}

.ss-rail-overview {
  position: relative; /* jangkar cincin sorot panduan, sama seperti .ss-tour-btn */
  flex: none;
  padding: 9px 14px;
  margin-top: 14px;
  border: 1px solid var(--ss-rule);
  border-radius: 2px;
  color: var(--ss-dim);
  background: var(--ss-panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.ss-rail-overview:hover,
.ss-rail-overview.is-active {
  color: var(--ss-text);
  border-color: var(--ss-accent);
}

/* Track = garis skala. Hairline-nya menyambungkan tiap tick benda langit */
.ss-rail-track {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.ss-rail-track::-webkit-scrollbar {
  display: none;
}

.ss-rail-track::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ss-rule) 6%,
    var(--ss-rule) 94%,
    transparent
  );
}

/* Penanda tepi region planet. Sesudah Neptunus daftar ini tidak lagi
   berisi planet, jadi garis skalanya diberi patok — bukan pemisah hiasan,
   tapi batas yang memang ada di tata surya. */
.ss-rail-zone {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  padding: 0 10px;
  pointer-events: none;
}

.ss-rail-zone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, var(--ss-rule), transparent);
}

.ss-rail-zone-label {
  margin-top: 30px; /* sebaris dengan nama benda langit di kiri-kanannya */
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-dim);
  opacity: 0.5;
  white-space: nowrap;
}

.ss-body-btn {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 4px 6px;
  color: var(--ss-dim);
  transition: color 0.25s ease;
}

/* Tick: titik yang duduk di garis skala + batang penghubung ke label */
.ss-body-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 10px;
  background: var(--ss-rule);
  transform: translateX(-50%);
  transition: background-color 0.25s ease;
}

.ss-body-btn::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ss-dim);
  transform: translateX(-50%);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Planet katai bukan planet: tick-nya lebih kecil, jadi hierarki benda
   langit terbaca dari garis skalanya sendiri tanpa perlu keterangan. */
.ss-body-btn[data-kind="dwarf"]::after {
  top: -1.5px;
  width: 3px;
  height: 3px;
}

.ss-body-btn:hover {
  color: var(--ss-text);
}

.ss-body-btn.is-active {
  color: #fff;
}

.ss-body-btn.is-active::before {
  background: var(--ss-accent);
}

.ss-body-btn.is-active::after {
  background: var(--ss-accent);
  box-shadow: 0 0 10px var(--ss-accent);
}

.ss-body-num {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

.ss-body-name {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Overlay loading: progres teksur dibaca seperti readout instrumen --- */
.ss-loading {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--ss-void);
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.ss-loading.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ss-loading-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--ss-dim);
}

.ss-loading-count {
  color: var(--ss-text);
  font-variant-numeric: tabular-nums;
}

/* Pesan kegagalan WebGL — menggantikan readout progres */
.ss-loading-label.ss-loading-fatal {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: min(460px, 84vw);
  text-align: center;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0.04em;
}

.ss-loading-fatal strong {
  color: var(--ss-text);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ss-loading-bar {
  position: relative;
  width: min(300px, 62vw);
  height: 1px;
  background: var(--ss-rule);
}

.ss-loading-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--ss-accent);
  box-shadow: 0 0 8px var(--ss-accent);
  transition: width 0.35s ease;
}

/* --- Panduan langkah demi langkah --- */
.ss-guide {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.ss-guide-scrim {
  position: absolute;
  inset: 0;
  /* Sengaja tidak pekat: scene tetap terlihat bergerak di belakangnya */
  background: radial-gradient(
    120% 80% at 50% 50%,
    rgba(5, 7, 13, 0.35),
    rgba(5, 7, 13, 0.82)
  );
  pointer-events: auto;
}

.ss-guide-card {
  position: relative;
  width: min(420px, 100%);
  /* Cukup tinggi supaya panah penunjuk ke rail muat di bawah kartu */
  margin-bottom: 160px;
  padding: 24px 24px 20px;
  background: rgba(8, 11, 20, 0.9);
  border: 1px solid var(--ss-rule-soft);
  border-top: 2px solid var(--ss-accent);
  border-radius: 2px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
  animation: ss-guide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ss-guide-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.ss-guide-step {
  margin: 0 0 10px;
  color: var(--ss-dim);
  font-variant-numeric: tabular-nums;
}

.ss-guide-title {
  margin: 0 0 10px;
  font-family: var(--ss-display);
  font-variation-settings: "wdth" 118, "wght" 700;
  font-size: 1.4rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

.ss-guide-body {
  margin: 0 0 18px;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ss-text);
  opacity: 0.85;
}

.ss-guide-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.ss-guide-dot {
  width: 18px;
  height: 2px;
  background: var(--ss-rule);
  transition: background-color 0.3s ease;
}

.ss-guide-dot.is-active {
  background: var(--ss-accent);
}

.ss-guide-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-guide-skip {
  margin-right: auto;
  color: var(--ss-dim);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.ss-guide-skip:hover {
  color: var(--ss-text);
  border-bottom-color: var(--ss-rule);
}

.ss-guide-back,
.ss-guide-next {
  padding: 9px 16px;
  border: 1px solid var(--ss-rule);
  border-radius: 2px;
  color: var(--ss-dim);
  transition: color 0.25s ease, border-color 0.25s ease,
    background-color 0.25s ease;
}

.ss-guide-back:hover {
  color: var(--ss-text);
  border-color: var(--ss-accent);
}

.ss-guide-next {
  color: #04070e;
  background: var(--ss-accent);
  border-color: var(--ss-accent);
}

.ss-guide-next:hover {
  filter: brightness(1.12);
}

/* Panah penunjuk — memantul ke arah elemen yang ditunjuk */
.ss-guide-arrow {
  position: fixed;
  z-index: 86;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--ss-accent);
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
}

.ss-guide-arrow-hint {
  padding: 6px 12px;
  background: var(--ss-accent);
  color: #04070e;
  border-radius: 2px;
  white-space: nowrap;
  font-weight: 500;
}

.ss-guide-arrow-icon {
  width: 26px;
  height: 26px;
}

.ss-guide-arrow.is-down {
  animation: ss-arrow-down 1.1s ease-in-out infinite;
}

/* Menunjuk ke atas: ikon di atas label, panahnya dibalik */
.ss-guide-arrow.is-up {
  flex-direction: column-reverse;
  animation: ss-arrow-up 1.1s ease-in-out infinite;
}

.ss-guide-arrow.is-up .ss-guide-arrow-icon {
  transform: rotate(180deg);
}

@keyframes ss-arrow-down {
  50% {
    margin-top: 9px;
  }
}

@keyframes ss-arrow-up {
  50% {
    margin-top: -9px;
  }
}

/* Kursor peraga — meluncur sendiri ke tombol yang sedang diajarkan.
   Titik acuannya ujung panah (pojok kiri-atas ikon), jadi koordinat yang
   dikirim JS = titik yang ditunjuk. */
.ss-demo-pointer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88;
  width: 26px;
  height: 26px;
  margin: -3px 0 0 -3px;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Penempatan pertama tidak boleh dianimasikan — kalau tidak, kursornya
   terlihat melesat dari pojok layar */
.ss-demo-pointer.is-instant {
  transition: none;
}

.ss-demo-arrow {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85));
  transition: transform 0.16s ease;
}

/* Di layar sentuh kursor panah diganti bulatan jari, titik acuannya
   pindah ke tengah bulatan */
.ss-demo-pointer.is-touch {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.ss-demo-pointer.is-touch .ss-demo-arrow {
  display: none;
}

.ss-demo-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid var(--ss-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Ketukan sekali */
.ss-demo-pointer.is-press .ss-demo-ring {
  animation: ss-demo-tap 0.62s ease-out;
}

.ss-demo-pointer.is-press .ss-demo-arrow {
  transform: scale(0.82);
}

/* Ditahan selama peraga menyeret. Lajunya diperlambat menyamai durasi
   putaran kamera (demoOrbit 1,7s di js/solar-system.js) — kalau tetap
   0,85s, kursornya sampai di ujung saat pandangan baru berputar setengah,
   dan seretnya terbaca putus dari akibatnya. */
.ss-demo-pointer.is-hold {
  transition-duration: 1.7s;
}

.ss-demo-pointer.is-hold .ss-demo-ring {
  opacity: 0.9;
  transform: scale(1.9);
}

.ss-demo-pointer.is-hold .ss-demo-arrow {
  transform: scale(0.86);
}

@keyframes ss-demo-tap {
  from {
    opacity: 0.95;
    transform: scale(0.5);
  }
  to {
    opacity: 0;
    transform: scale(3.8);
  }
}

/* Peraga gestur: seret & gulir, tampil di tengah layar */
.ss-guide-gesture {
  position: fixed;
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 86;
  display: flex;
  gap: 28px;
  pointer-events: none;
}

.ss-guide-gesture-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ss-text);
  animation: ss-gesture-float 2.4s ease-in-out infinite;
}

.ss-guide-gesture-item:nth-child(2) {
  animation-delay: 0.5s;
}

.ss-guide-gesture-item svg {
  width: 34px;
  height: 34px;
  color: var(--ss-accent);
}

/* Ikon kanan menyesuaikan alat: roda mouse di desktop, cubitan di layar
   sentuh. Kelas is-touch dipasang dari JS. */
.ss-gesture-pinch {
  display: none;
}

.ss-guide-gesture.is-touch .ss-gesture-mouse {
  display: none;
}

.ss-guide-gesture.is-touch .ss-gesture-pinch {
  display: block;
}

@keyframes ss-gesture-float {
  50% {
    transform: translateY(-7px);
  }
}

/* Selama panduan terbuka, kontrol yang sedang diajarkan diangkat ke atas
   scrim. Diangkat lewat pembungkusnya, BUKAN lewat .ss-guide-spot —
   .ss-rail sudah position: fixed, dan menimpanya dengan position: relative
   akan menjatuhkannya ke aliran normal di puncak halaman. */
body.is-guiding .ss-topbar,
body.is-guiding .ss-rail {
  z-index: 82;
}

.ss-guide-spot {
  z-index: 82;
}

/* Panel data ikut diangkat: hasil klik peraga ("data planet muncul")
   harus terlihat, bukan tenggelam di balik scrim. Di potret panel
   dimatikan saja — lihat blok responsif, tempatnya rebutan dengan kartu.

   backdrop-filter-nya dimatikan selama panduan: bareng kartu panduan itu
   jadi DUA lapis blur menumpuk di atas kanvas WebGL, dan di mesin tanpa
   akselerasi GPU biayanya sanggup menghentikan produksi frame (terbukti
   membekukan requestAnimationFrame di uji headless software-render).
   Latarnya ditebalkan sebagai gantinya supaya teksnya tetap terbaca. */
body.is-guiding .ss-panel {
  z-index: 82;
  background: rgba(8, 11, 20, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ss-guide-spot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--ss-accent);
  border-radius: 3px;
  pointer-events: none;
  animation: ss-spot-pulse 2s ease-in-out infinite;
}

@keyframes ss-spot-pulse {
  50% {
    opacity: 0.35;
  }
}

.ss-noscript {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 24px;
  text-align: center;
  background: var(--ss-void);
  color: var(--ss-dim);
}

.ss-noscript a {
  color: var(--ss-accent);
}

/* --- Responsif --- */

/* Dengan 14 benda langit rail sudah tidak muat di layar di bawah ±1200px,
   jadi tepinya di-fade supaya label yang cuma kelihatan separuh memudar,
   bukan terpotong tajam. Di atas lebar itu semuanya muat dan fade-nya
   justru bikin item pertama & terakhir tampak redup tanpa alasan. */
@media (max-width: 1200px) {
  .ss-rail-track {
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 20px,
      #000 calc(100% - 20px),
      transparent
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 20px,
      #000 calc(100% - 20px),
      transparent
    );
  }
}

@media (max-width: 900px) {
  .ss-panel {
    width: min(320px, 42vw);
  }
}

@media (max-width: 768px) {
  .ss-topbar {
    padding: 14px 14px;
  }

  .ss-tour-btn {
    padding: 8px 12px;
  }

  .ss-tour-btn .ss-tour-label {
    display: none;
  }

  /* Panel jadi sheet ringkas di atas rail. Tipografinya dikecilkan
     supaya seluruh isi—termasuk catatan—muat tanpa terpotong. */
  .ss-panel {
    top: auto;
    bottom: 88px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 54vh;
    transform: translateY(16px);
    padding: 14px 16px 14px;
  }

  .ss-panel.is-visible {
    transform: translateY(0);
  }

  .ss-panel .ss-micro {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }

  .ss-panel-head {
    padding-bottom: 7px;
  }

  .ss-name {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .ss-data > div {
    padding: 5px 0;
  }

  .ss-data dd {
    font-size: 0.7rem;
  }

  .ss-note {
    margin-top: 11px;
    font-size: 0.68rem;
    line-height: 1.55;
  }

  .ss-note-label {
    margin-bottom: 3px;
  }

  .ss-desc {
    margin-bottom: 13px;
    font-size: 0.69rem;
    line-height: 1.6;
  }

  .ss-group {
    margin: 12px 0 4px;
  }

  /* Panduan: kartu dinaikkan di atas rail, tanpa menutupi seluruh layar */
  .ss-guide {
    padding: 16px;
  }

  .ss-guide-card {
    margin-bottom: 148px;
    padding: 18px 18px 16px;
  }

  .ss-guide-title {
    font-size: 1.2rem;
  }

  .ss-guide-body {
    font-size: 0.72rem;
    margin-bottom: 14px;
  }

  /* Di potret panel data menempati petak yang sama dengan kartu panduan.
     Selama panduan panel disembunyikan supaya tidak tumpang tindih —
     isinya tetap muncul begitu panduan ditutup. */
  body.is-guiding .ss-panel {
    opacity: 0;
    visibility: hidden;
  }

  .ss-guide-gesture {
    gap: 20px;
  }

  .ss-rail {
    padding: 0 0 12px;
  }

  .ss-rail-inner {
    gap: 10px;
    padding: 0 12px;
  }

  /* Fade tepinya sudah diatur di blok max-width 1200px */
  .ss-rail-track {
    justify-content: flex-start;
    gap: 14px;
  }

  .ss-body-num {
    display: none;
  }

  /* Nomor benda langit disembunyikan di sini, jadi baris nama naik —
     label zona ikut naik supaya tetap sebaris dengannya */
  .ss-rail-zone-label {
    margin-top: 15px;
  }
}

@media (max-width: 480px) {
  .ss-rail-overview {
    padding: 8px 10px;
  }
}

/* Layar pendek & mendatar: panel dikecilkan agar canvas tetap terlihat */
@media (max-height: 560px) and (min-width: 769px) {
  .ss-panel {
    max-height: 82vh;
    padding: 16px 18px;
  }

  .ss-name {
    font-size: 1.6rem;
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  /* Kecuali panduan. Kalau gerakannya ikut dimatikan, panahnya diam,
     kursor peraga teleport, dan langkahnya jadi tidak terbaca sama
     sekali — persis keluhan "halamannya rusak". Sesuai keputusan pemilik
     situs (lihat catatan MOTION_SCALE di js/solar-system.js), gerak
     panduan diperlambat, bukan dihapus. */
  .ss-guide-arrow,
  .ss-guide-gesture-item,
  .ss-guide-spot::after {
    animation-duration: 1.8s !important;
  }

  .ss-demo-pointer {
    transition-duration: 1.1s !important;
  }

  /* demoOrbit melar 1,25x di mode ini (1,7s → 2,125s) — laju seretnya
     ikut, supaya tetap sejalan dengan putaran kameranya */
  .ss-demo-pointer.is-hold {
    transition-duration: 2.15s !important;
  }

  .ss-demo-pointer.is-instant {
    transition-duration: 0.01ms !important;
  }

  .ss-demo-ring {
    transition-duration: 0.3s !important;
  }

  .ss-demo-pointer.is-press .ss-demo-ring {
    animation-duration: 0.9s !important;
  }

  .ss-demo-arrow {
    transition-duration: 0.25s !important;
  }
}