.orbital {
  color:var(--text);
  position:relative; overflow:hidden; min-height:calc(100svh - var(--header)); display:flex; flex-direction:column;
}
.stage { position:relative; display:flex; align-items:center; flex:1; padding:clamp(28px,5vh,72px) var(--gutter); min-height:clamp(385px,calc(100svh - 240px),600px); }
.controls { position:relative; z-index:2; margin-inline:var(--gutter); padding-block:18px; border-top:1px solid var(--line); }
.intro { position:relative; z-index:2; }
.intro :is(h1,h2) { margin:0; font-size:clamp(46px,6.2vw,105px); line-height:.91; font-weight:760; letter-spacing:-.06em; }
.intro :is(h1,h2) em { color:var(--accent); font-style:normal; }
.intro p { margin:clamp(18px,3vh,34px) 0 0; max-width:36ch; color:var(--muted); font-size:clamp(16px,1.65vw,23px); line-height:1.4; letter-spacing:-.024em; }
.action {
  border:0; border-radius:100px; background:var(--accent); color:var(--button-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:0 26px;
  min-height:56px; margin-top:28px; font-weight:700; font-size:16px;
  transition:transform 240ms var(--ease),box-shadow 240ms;
}
.action:hover { transform:translateY(-3px); box-shadow:0 12px 30px color-mix(in srgb,var(--accent),transparent 72%); }
.action:active { transform:translateY(0) scale(.97); }
.play-icon { display:block; width:13px; height:15px; clip-path:polygon(0 0,100% 50%,0 100%); background:currentColor; }
.action[aria-pressed=true] .play-icon { clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); }
.orbit-stage .intro { max-width:51%; }
.orbit-system {
  position:absolute; top:50%; translate:0 -50%; width:min(48vw,76vh,730px); aspect-ratio:1.21;
  right:2%; touch-action:pan-y;
}
.orbit-track { position:absolute; width:62%; aspect-ratio:1; left:43%; top:50%; translate:-50% -50%; border:2px dotted #819bc2; border-radius:50%; }
.earth { position:absolute; left:43%; top:50%; translate:-50% -50%; width:26%; aspect-ratio:1; display:grid; place-items:center; }
.earth canvas { width:100%; border-radius:50%; filter:drop-shadow(0 8px 18px #28397737); }
.earth span { position:absolute; top:106%; font-size:clamp(11px,1.4vw,16px); font-weight:650; }
.sun {
  position:absolute; right:-23%; top:50%; translate:0 -50%; width:41%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 32% 31%,#fff7b0,#ffc74a 38%,#ff8b22 74%);
  box-shadow:0 0 55px #fdb13989,inset 0 0 22px #fff2b8;
}
.rays { position:absolute; top:35%; left:77%; width:13%; height:30%; display:grid; align-items:center; }
.rays i { display:block; height:1px; color:#9eb9df; background:currentColor; position:relative; }
.rays i::before { content:""; position:absolute; left:0; top:50%; translate:0 -50%; border:5px solid transparent; border-left:0; border-right-color:currentColor; }
.rays span { position:absolute; top:106%; font-weight:650; font-size:clamp(11px,1.4vw,16px); }
.orbit-system :is(.earth,.rays) span { text-shadow:0 1px 4px #080b12,0 0 7px #080b12; }
.orbit-moon { border:0; padding:0; position:absolute; left:var(--orbit-x,43%); top:var(--orbit-y,12.5%); translate:-50% -50%; width:13%; min-width:44px; aspect-ratio:1; border-radius:50%; background:none; cursor:grab; touch-action:none; }
.orbit-moon:active { cursor:grabbing; }
.orbit-moon canvas { display:block; width:100%; border-radius:50%; filter:drop-shadow(0 0 8px #9bc3f34d); pointer-events:none; }
.orbit-controls,.portal-subpage .orbit-article > .reading {
  --text:var(--panel-ink); --muted:var(--panel-muted); --accent:var(--panel-accent);
  --line:var(--panel-line); color:var(--text); color-scheme:light;
  border:1px solid var(--line); border-radius:18px; background:var(--panel-bg);
}
.orbit-controls {
  --button-ink:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px 20px;
  padding:clamp(12px,2vw,20px); margin-bottom:10px;
}
.phase-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.phase-buttons button { display:flex; gap:9px; align-items:center; border:1px solid var(--line); background:var(--panel-inset); border-radius:100px; padding:10px 15px; min-height:44px; font-size:14px; font-weight:630; transition:background 250ms,color 250ms,border-color 250ms; }
.phase-buttons button:hover { border-color:var(--accent); }
.phase-buttons button[aria-pressed=true] { background:var(--accent); color:var(--button-ink); border-color:var(--accent); }
.orbit-readout { display:flex; align-items:center; gap:12px; min-width:195px; }
.orbit-readout canvas { width:44px; height:44px; border-radius:50%; }
.orbit-readout small { color:var(--muted); }
.orbit-readout strong { display:block; font-size:14px; white-space:nowrap; }

.orbit-caption { margin:0; padding:0 var(--gutter) 16px; color:var(--muted); font-size:12px; }
.portal-subpage .orbit-article {
  background:transparent; padding:clamp(32px,5vw,64px) var(--gutter) clamp(50px,8vw,100px);
}
.portal-subpage .orbit-article > .reading {
  padding:clamp(18px,4vw,58px);
}
.orbit-article h2 { font-size:clamp(28px,5vw,64px); letter-spacing:-.05em; }
.orbit-article .article-intro { font-size:clamp(17px,1.7vw,22px); }
.orbit-article h3 { margin:clamp(24px,4vw,48px) 0 0; font-size:clamp(22px,2.6vw,34px); line-height:1.1; letter-spacing:-.045em; }
.phase-explanations { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:22px 0; }
.phase-explanations div { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-inset); }
.phase-explanations dt { display:flex; align-items:center; gap:7px; font-size:17px; font-weight:710; }
.phase-explanations dd { margin:9px 0 0; color:var(--muted); line-height:1.5; }
.article-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,72px); }
.article-sources { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:32px; }
@media (max-width:900px) {
  .phase-explanations { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .orbit-stage { flex-direction:column; align-items:stretch; min-height:0; padding-top:36px; padding-bottom:4px; }
  .orbit-stage .intro { max-width:none; }
  .intro :is(h1,h2) { font-size:clamp(42px,9vw,65px); }
  .intro p { margin-top:15px; }
  .action { margin-top:18px; min-height:48px; padding:0 20px; }
  .orbit-system { width:min(100%,490px); position:relative; top:auto; right:auto; translate:none; margin:10px auto; }
  .orbit-controls { flex-wrap:wrap; }
  .orbit-readout { min-width:0; }
}
@media (max-width:500px) {
  .phase-explanations { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-pair { grid-template-columns:1fr; gap:0; }
  .phase-buttons button { font-size:12px; padding-inline:11px; }
  .phase-explanations dt { font-size:15px; }
}