:root{
  --bg-0: oklch(0.16 0.02 250);
  --bg-1: oklch(0.20 0.025 250);
  --bg-2: oklch(0.24 0.03 250);
  --line: oklch(0.32 0.025 250);
  --line-soft: oklch(0.28 0.02 250 / 0.6);
  --ink: oklch(0.96 0.005 80);
  --ink-2: oklch(0.78 0.01 80);
  --ink-3: oklch(0.58 0.012 250);
  --sun: oklch(0.82 0.15 75);
  --sun-soft: oklch(0.82 0.15 75 / 0.18);
  --moon: oklch(0.86 0.04 240);
  --moon-soft: oklch(0.86 0.04 240 / 0.20);
  --earth: oklch(0.72 0.12 220);
  --earth-soft: oklch(0.72 0.12 220 / 0.18);
  --star: oklch(0.78 0.10 320);
  --star-soft: oklch(0.78 0.10 320 / 0.20);
  --real: oklch(0.80 0.12 150);
  --apparent: oklch(0.80 0.14 30);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  background:var(--bg-0);
  color:var(--ink);
  overflow:hidden;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}

#app{display:flex;flex-direction:column;height:100vh;width:100vw}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:14px 22px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(to bottom, var(--bg-1), var(--bg-0));
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{
  width:30px;height:30px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, oklch(0.95 0.02 80), oklch(0.55 0.04 250) 70%);
  box-shadow:0 0 18px oklch(0.86 0.04 240 / 0.4);
  flex-shrink:0;
}
.brand-title{font-weight:600;font-size:15px;letter-spacing:.01em}
.brand-sub{font-size:11.5px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}

.tabs{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.tab{
  background:transparent;color:var(--ink-2);
  border:1px solid transparent;
  padding:8px 14px;border-radius:8px;
  font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.tab:hover{background:var(--bg-2);color:var(--ink)}
.tab.active{
  background:var(--bg-2);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:inset 0 0 0 1px oklch(0.86 0.04 240 / 0.15);
}
.tab-num{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:var(--ink-3);
  margin-left:6px;
}
.tab.active .tab-num{color:var(--moon)}

/* ---------- Main ---------- */
.main{display:grid;grid-template-columns:1fr 300px;flex:1;min-height:0}
.stage{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 50%, var(--bg-1), var(--bg-0) 75%);
  overflow:hidden;
  border-left:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
}
.stage-svg-wrap{
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stage-svg-wrap svg{display:block;width:100%;height:100%}

/* Stars layer */
.stars{position:absolute;inset:0;pointer-events:none;opacity:.55}
.stars::before,.stars::after{
  content:"";position:absolute;inset:-20%;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 78% 32%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 44% 64%, #fff, transparent 60%),
    radial-gradient(1px 1px at 24% 82%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 88% 78%, #fff, transparent 60%),
    radial-gradient(1px 1px at 8%  46%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 28%, #fff, transparent 60%),
    radial-gradient(1px 1px at 70% 88%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 52% 44%, #fff, transparent 60%);
  background-size:600px 600px;
  background-repeat:repeat;
  opacity:.7;
}
.stars::after{
  background-size:420px 420px;
  background-position:120px 80px;
  opacity:.35;
}

/* ---------- Side panel ---------- */
.side{
  background:var(--bg-1);
  border-right:1px solid var(--line-soft);
  padding:22px 20px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:18px;
}
.side h2{
  font-size:16.5px;font-weight:600;letter-spacing:.005em;
  text-wrap:balance;
}
.side .lede{
  font-size:13px;color:var(--ink-2);line-height:1.7;
  text-wrap:pretty;
}
.kicker{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--ink-3);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.section-divider{height:1px;background:var(--line-soft)}

.readout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cell{
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:10px 12px;
}
.cell .label{font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:4px}
.cell .value{
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;font-weight:500;color:var(--ink);
  letter-spacing:.01em;
}
.cell .unit{font-size:11px;color:var(--ink-3);margin-right:4px}
.cell.wide{grid-column:1/-1}
.cell.sun .value{color:var(--sun)}
.cell.moon .value{color:var(--moon)}
.cell.earth .value{color:var(--earth)}
.cell.star .value{color:var(--star)}

.legend{display:flex;flex-direction:column;gap:9px}
.legend-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.legend-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 8px currentColor;
}
.legend-line{width:18px;height:2px;flex-shrink:0;border-radius:2px}
.legend-line.dashed{background-image:linear-gradient(to right,currentColor 50%,transparent 50%);background-size:6px 2px;height:2px}

.toggle-row{display:flex;flex-direction:column;gap:8px}
.toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:9px 12px;
  cursor:pointer;
  user-select:none;
  font-size:12.5px;color:var(--ink-2);
  transition:all .15s;
}
.toggle:hover{border-color:var(--line)}
.toggle.on{color:var(--ink);border-color:oklch(0.86 0.04 240 / 0.4)}
.toggle .sw{
  width:30px;height:18px;border-radius:9px;
  background:var(--bg-0);position:relative;border:1px solid var(--line);
  transition:all .2s;
}
.toggle .sw::after{
  content:"";position:absolute;top:2px;right:2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--ink-3);transition:all .2s;
}
.toggle.on .sw{background:oklch(0.86 0.04 240 / 0.25);border-color:var(--moon)}
.toggle.on .sw::after{background:var(--moon);right:14px}

.note{
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:12px 14px;
  font-size:12.5px;color:var(--ink-2);line-height:1.7;
  text-wrap:pretty;
}
.note b{color:var(--ink);font-weight:600}
.note .em-real{color:var(--real)}
.note .em-app{color:var(--apparent)}
.note .em-moon{color:var(--moon)}
.note .em-sun{color:var(--sun)}
.note .em-star{color:var(--star)}

/* ---------- Bottom controls ---------- */
.controls{
  display:flex;align-items:center;gap:16px;
  padding:14px 22px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(to top, var(--bg-1), var(--bg-0));
}
.btn{
  background:var(--bg-2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;font-size:13px;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .15s;
}
.btn:hover{background:oklch(0.27 0.03 250);border-color:oklch(0.4 0.025 250)}
.btn.primary{
  background:oklch(0.86 0.04 240 / 0.18);
  border-color:oklch(0.86 0.04 240 / 0.45);
  color:var(--ink);
}
.btn.primary:hover{background:oklch(0.86 0.04 240 / 0.28)}
.btn-ic{width:14px;height:14px;display:inline-block}

.time-readout{
  display:flex;align-items:center;gap:18px;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:7px 14px;
}
.time-readout .k{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace}
.time-readout .v{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink);font-weight:500}

.scrubber{flex:1;display:flex;align-items:center;gap:10px}
.scrubber input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;
  background:var(--line);border-radius:4px;outline:none;
}
.scrubber input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--moon);cursor:pointer;
  box-shadow:0 0 8px oklch(0.86 0.04 240 / 0.6);
}
.scrubber input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--moon);cursor:pointer;border:0;
}

.speed{
  display:flex;align-items:center;gap:2px;
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:8px;padding:3px;
}
.speed button{
  background:transparent;border:0;color:var(--ink-2);
  padding:5px 10px;border-radius:5px;font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;
}
.speed button.on{background:oklch(0.86 0.04 240 / 0.2);color:var(--ink)}

/* ---------- SVG element styles ---------- */
.orbit{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;opacity:.6}
.orbit-real{stroke:var(--real);opacity:.55;stroke-dasharray:5 5}
.orbit-apparent{stroke:var(--apparent);opacity:.55;stroke-dasharray:5 5}
.horizon{stroke:var(--line);stroke-width:1.4;fill:none}
.tick{stroke:var(--ink-3);stroke-width:1;opacity:.5}
.tick-label{fill:var(--ink-3);font-family:'IBM Plex Mono',monospace;font-size:10px}
.body-sun{fill:var(--sun);filter:drop-shadow(0 0 12px oklch(0.82 0.15 75 / 0.8))}
.body-moon{fill:var(--moon);filter:drop-shadow(0 0 8px oklch(0.86 0.04 240 / 0.7))}
.body-earth{fill:var(--earth);filter:drop-shadow(0 0 10px oklch(0.72 0.12 220 / 0.6))}
.body-star{fill:var(--star);filter:drop-shadow(0 0 6px oklch(0.78 0.10 320 / 0.7))}

.label-text{fill:var(--ink-2);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;font-weight:500}
.label-text.mono{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--ink-3)}

.ray{stroke:var(--sun);stroke-width:1;opacity:.5;stroke-dasharray:2 3}
.ray-moon{stroke:var(--moon);stroke-width:1;opacity:.5;stroke-dasharray:2 3}
.ray-star{stroke:var(--star);stroke-width:1;opacity:.5;stroke-dasharray:2 3}

.trail{fill:none;stroke-width:1.2;opacity:.35}
.trail-sun{stroke:var(--sun)}
.trail-moon{stroke:var(--moon)}
.trail-earth{stroke:var(--earth)}

.observer{fill:var(--ink);stroke:var(--bg-0);stroke-width:1}
.beam-pole{stroke:var(--ink);stroke-width:1.5;opacity:.7;stroke-linecap:round}

.arc-arrow{fill:none;stroke:var(--moon);stroke-width:1.6;opacity:.9}
.lag-arrow{stroke:var(--apparent);stroke-width:1.6;fill:none;opacity:.9}

.bg-fill-day{fill:oklch(0.82 0.15 75 / 0.05)}
.bg-fill-night{fill:oklch(0.4 0.05 250 / 0.18)}

/* Caption above stage */
.caption{
  position:absolute;top:18px;right:18px;
  background:oklch(0.20 0.025 250 / 0.85);
  backdrop-filter:blur(8px);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:12px 16px;
  max-width:340px;
  z-index:4;
}
.caption .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.caption h3{font-size:14.5px;font-weight:600;margin-bottom:4px}
.caption p{font-size:12.5px;color:var(--ink-2);line-height:1.6}

/* Narration strip at bottom of stage */
.narrator{
  position:relative;
  width:100%;
  background:linear-gradient(to top, var(--bg-1), oklch(0.18 0.025 250 / 0.92));
  border-top:1px solid var(--line);
  padding:14px 24px 14px;
  z-index:5;
  display:flex;flex-direction:column;gap:8px;
  flex-shrink:0;
  max-height:200px;
}
.narrator-inner{
  width:100%;
  max-width:920px;
  margin:0 auto;
  display:flex;flex-direction:column;gap:7px;
}
.narrator-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.narrator-step{
  display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:var(--ink-3);
  letter-spacing:.1em;text-transform:uppercase;
}
.narrator-step .badge{
  background:oklch(0.86 0.04 240 / 0.18);
  border:1px solid oklch(0.86 0.04 240 / 0.4);
  color:var(--moon);
  padding:2px 8px;border-radius:6px;
  font-size:10.5px;
  font-weight:500;
}
.narrator-dur{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:var(--ink-3);
}
.narrator h4{
  font-size:16px;font-weight:600;
  color:var(--ink);
  text-wrap:balance;
  line-height:1.3;
}
.narrator p{
  font-size:13px;color:var(--ink-2);
  line-height:1.65;
  text-wrap:pretty;
}
.narrator-bar{
  height:3px;background:var(--line);border-radius:2px;overflow:hidden;
  margin-top:2px;
}
.narrator-bar-fill{
  height:100%;background:var(--moon);transition:width .15s linear;
  box-shadow:0 0 8px oklch(0.86 0.04 240 / 0.7);
}
.narrator-dots{display:flex;gap:5px}
.narrator-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--line);
  transition:all .2s;
  cursor:pointer;
  border:0;padding:0;
}
.narrator-dot.done{background:oklch(0.86 0.04 240 / 0.5)}
.narrator-dot.active{background:var(--moon);box-shadow:0 0 6px var(--moon);transform:scale(1.3)}
.narrator-nav{display:flex;gap:4px;align-items:center}
.narrator-nav button{
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--ink-2);
  width:28px;height:28px;border-radius:7px;
  cursor:pointer;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;
  transition:all .15s;
}
.narrator-nav button:hover{background:oklch(0.27 0.03 250);color:var(--ink)}
.narrator-nav button:disabled{opacity:.4;cursor:not-allowed}

/* Floating mini-legend on stage */
.stage-legend{
  position:absolute;left:18px;top:18px;
  background:oklch(0.20 0.025 250 / 0.85);
  backdrop-filter:blur(8px);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:10px 14px;
  display:flex;flex-direction:column;gap:6px;
  z-index:4;
  font-size:11.5px;
}

.tag{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  padding:2px 7px;border-radius:4px;
  background:var(--bg-2);color:var(--ink-2);
  border:1px solid var(--line-soft);
  letter-spacing:.04em;
  margin-left:6px;
}
.tag.real{background:oklch(0.80 0.12 150 / 0.15);color:var(--real);border-color:oklch(0.80 0.12 150 / 0.35)}
.tag.apparent{background:oklch(0.80 0.14 30 / 0.15);color:var(--apparent);border-color:oklch(0.80 0.14 30 / 0.35)}

/* Responsive */
@media (max-width: 760px){
  .main{grid-template-columns:1fr}
  .side{order:2;border-right:0;border-top:1px solid var(--line-soft);max-height:240px}
  .tabs{justify-content:flex-start;overflow-x:auto}
}
@media (max-width: 1100px){
  .main{grid-template-columns:1fr 260px}
  .side{padding:18px 16px;gap:14px}
  .narrator{padding:10px 18px}
  .narrator h4{font-size:14px}
  .narrator p{font-size:12px}
}