/* R3 / V37 — Celestial Mechanics observatory presentation + Orbital Witness.
   Presentation-only successor. Existing Celestial Mechanics and Messenger engines remain untouched. */

.celestial-mechanics-v0712{
  --cm-gold:#d5b56f;
  --cm-gold-soft:#9e8657;
  --cm-ice:#9fe9f8;
  --cm-ink:#030708;
  --cm-glass:rgba(5,12,16,.86);
  background:
    radial-gradient(70rem 48rem at 50% 2%,rgba(77,134,154,.11),transparent 68%),
    radial-gradient(54rem 36rem at 12% 35%,rgba(175,130,65,.06),transparent 70%),
    linear-gradient(180deg,#020405,#05090a 34%,#020405 100%);
}
.celestial-mechanics-v0712 .cm-hero{min-height:auto;padding:clamp(1.1rem,2.4vw,2.4rem) 0 clamp(3rem,6vw,6rem);background:transparent}
.celestial-mechanics-v0712 .cm-shell{width:min(1600px,96vw)}

.cm-observatory-hero-r3{position:relative;margin:0 auto clamp(1rem,2.4vw,2rem);border:1px solid rgba(219,184,112,.33);background:#020405;overflow:hidden;box-shadow:0 34px 110px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.02)}
.cm-observatory-hero-r3:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,5,7,.04) 45%,rgba(2,5,7,.34) 68%,rgba(2,5,7,.96) 100%)}
.cm-observatory-hero-r3 img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#020405}
.cm-observatory-hero-overlay-r3{position:absolute;z-index:2;left:clamp(1rem,3.4vw,3.5rem);right:clamp(1rem,3.4vw,3.5rem);bottom:clamp(1rem,2.8vw,2.7rem);max-width:760px;text-shadow:0 2px 18px #000}
.cm-observatory-hero-overlay-r3 h1{font:400 clamp(2rem,4vw,4.8rem)/.92 Georgia,'Times New Roman',serif;margin:.28rem 0;color:#f0eadb;letter-spacing:-.035em}
.cm-observatory-hero-overlay-r3 .cm-subtitle{margin:.35rem 0;color:#dfc37e;letter-spacing:.27em;font-size:clamp(.62rem,1vw,.82rem)}
.cm-observatory-hero-overlay-r3 .lead{max-width:670px;margin:.6rem 0 1rem;color:#c7d0d0;font-size:clamp(.82rem,1.15vw,1rem);line-height:1.55}
.cm-hero-actions-r3{display:flex;gap:.65rem;flex-wrap:wrap}
.cm-hero-actions-r3 a{display:inline-flex;align-items:center;min-height:42px;padding:.68rem .9rem;border:1px solid rgba(216,184,111,.45);background:rgba(4,9,11,.72);color:#eed38f;text-decoration:none;font:600 .58rem/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;backdrop-filter:blur(8px)}
.cm-hero-actions-r3 a:hover,.cm-hero-actions-r3 a:focus-visible{outline:none;border-color:var(--cm-ice);color:#e7fbff;box-shadow:0 0 28px rgba(159,233,248,.08)}

/* Make the existing lesson read as one precision observatory rather than three flat cards. */
.celestial-mechanics-v0712 .cm-status{border-color:rgba(213,181,111,.34);background:linear-gradient(90deg,rgba(7,13,16,.92),rgba(4,9,11,.78));box-shadow:0 18px 50px rgba(0,0,0,.2)}
.celestial-mechanics-v0712 .cm-grid{position:relative;gap:.85rem;padding:.85rem;border:1px solid rgba(213,181,111,.16);background:radial-gradient(42rem 26rem at 52% 42%,rgba(64,125,145,.09),transparent 64%),linear-gradient(160deg,rgba(8,13,16,.76),rgba(2,5,7,.88));box-shadow:0 26px 82px rgba(0,0,0,.34)}
.celestial-mechanics-v0712 .cm-predict,.celestial-mechanics-v0712 .cm-instrument,.celestial-mechanics-v0712 .cm-model{background:linear-gradient(155deg,rgba(10,18,22,.9),rgba(3,7,9,.92));border-color:rgba(213,181,111,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 22px 62px rgba(0,0,0,.26);backdrop-filter:blur(8px)}
.celestial-mechanics-v0712 .cm-plot-wrap{background:radial-gradient(circle at 50% 48%,rgba(53,120,144,.16),rgba(2,5,7,.96) 67%);border-color:rgba(159,233,248,.14);box-shadow:inset 0 0 58px rgba(0,0,0,.55)}
.celestial-mechanics-v0712 .cm-dial{box-shadow:inset 0 0 40px rgba(213,181,111,.05),0 0 36px rgba(0,0,0,.3)}
.celestial-mechanics-v0712 .cm-answer-set button,.celestial-mechanics-v0712 .cm-time button,.celestial-mechanics-v0712 .cm-check,.celestial-mechanics-v0712 .cm-equation-toggle{background:linear-gradient(180deg,#0b1419,#071015);border-color:rgba(213,181,111,.25)}

/* Orbital Witness */
.cm-orbital-witness-r3{margin:clamp(3.8rem,8vw,8rem) 0 1.5rem;padding:clamp(1.1rem,2.8vw,2.5rem);border:1px solid rgba(213,181,111,.32);background:radial-gradient(55rem 42rem at 62% 35%,rgba(63,129,151,.10),transparent 68%),linear-gradient(145deg,#070c0f,#020405 74%);box-shadow:0 38px 110px rgba(0,0,0,.42);overflow:hidden}
.cm-witness-heading-r3{max-width:1020px;margin:0 auto clamp(1.8rem,4vw,3.3rem);text-align:center}
.cm-witness-heading-r3 h2{font:400 clamp(3.2rem,6.8vw,7.6rem)/.89 Georgia,'Times New Roman',serif;letter-spacing:-.055em;color:#f0eadc;margin:.52rem 0 .8rem}
.cm-witness-deck-r3{max-width:790px;margin:0 auto;color:#aab8ba;font-size:clamp(.88rem,1.3vw,1.08rem);line-height:1.72}
.cm-witness-law-r3{display:flex;justify-content:center;gap:.65rem 1rem;flex-wrap:wrap;margin-top:1.25rem;color:#ceb576;font:600 .57rem ui-monospace,Consolas,monospace;letter-spacing:.14em}
.cm-witness-law-r3 i{color:#566b71}
.cm-witness-stage-r3{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(290px,.58fr);border:1px solid rgba(213,181,111,.21);background:#020506;min-height:660px}
.cm-witness-canvas-wrap-r3{position:relative;min-width:0;overflow:hidden;background:#020506}
.cm-witness-canvas-wrap-r3:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(2,6,8,.78),rgba(2,6,8,.9)),url("assets/celestial-mechanics/orbital-witness-art-direction-r3.png") center/cover no-repeat;opacity:.62;filter:saturate(.86) contrast(1.08)}
.cm-witness-canvas-wrap-r3 canvas{position:relative;z-index:1;display:block;width:100%;height:100%;min-height:660px;background:transparent}
.cm-witness-hud-r3{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;display:flex;justify-content:space-between;gap:1rem;padding:.7rem .8rem;border:1px solid rgba(213,181,111,.18);background:rgba(2,6,8,.72);backdrop-filter:blur(10px);color:#91a2a6;font:600 .58rem ui-monospace,Consolas,monospace;letter-spacing:.1em}
.cm-witness-hud-r3 b{color:#d8bd7d;font-weight:600}.cm-witness-hud-r3 b.retrograde{color:#f1d28a;text-shadow:0 0 12px rgba(241,210,138,.28)}
.cm-witness-panel-r3{padding:clamp(1.2rem,2.4vw,2rem);border-left:1px solid rgba(213,181,111,.18);background:linear-gradient(180deg,rgba(8,14,16,.96),rgba(3,7,9,.98));display:flex;flex-direction:column}
.cm-witness-views-r3{display:grid;gap:.55rem;margin:.8rem 0 1.5rem}
.cm-witness-views-r3 button,.cm-witness-time-r3 button,.cm-witness-sync-r3{min-height:48px;padding:.7rem .78rem;border:1px solid rgba(213,181,111,.25);background:linear-gradient(180deg,#0a1418,#071014);color:#c7d1d2;text-align:left;cursor:pointer;font:600 .61rem ui-monospace,Consolas,monospace;letter-spacing:.12em}
.cm-witness-views-r3 button small{display:block;margin-top:.32rem;color:#6f8185;font-size:.52rem;letter-spacing:.04em;font-weight:500}
.cm-witness-views-r3 button[aria-pressed="true"]{border-color:#d5b56f;color:#f0d38b;background:radial-gradient(circle at 18% 50%,rgba(213,181,111,.13),transparent 45%),#0b1418;box-shadow:inset 2px 0 0 #d5b56f}
.cm-witness-views-r3 button:hover,.cm-witness-time-r3 button:hover,.cm-witness-sync-r3:hover,.cm-witness-views-r3 button:focus-visible,.cm-witness-time-r3 button:focus-visible,.cm-witness-sync-r3:focus-visible{outline:none;border-color:var(--cm-ice);color:#e4fbff}
.cm-witness-time-label-r3{margin-top:.2rem}
.cm-witness-time-r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.45rem;margin:.8rem 0 .55rem}
.cm-witness-time-r3 button{text-align:center;padding:.65rem .35rem;min-height:42px;font-size:.55rem}
.cm-witness-sync-r3{text-align:center;margin-bottom:1.3rem;color:#e5c980}
.cm-witness-source-r3{margin-top:auto;padding-top:1.25rem;border-top:1px solid rgba(213,181,111,.16)}
.cm-witness-source-r3 strong{display:block;margin:.45rem 0;color:#e4d4ad;font:500 .82rem Georgia,serif;letter-spacing:.06em}
.cm-witness-source-r3 p{color:#829296;font-size:.69rem;line-height:1.55}
.cm-witness-source-r3>div{display:flex;gap:.45rem;flex-wrap:wrap}
.cm-witness-source-r3 a{display:inline-flex;padding:.55rem .62rem;border:1px solid rgba(159,233,248,.18);color:#93dbe8;text-decoration:none;font:600 .5rem ui-monospace,Consolas,monospace;letter-spacing:.08em}
.cm-witness-source-r3 a:hover,.cm-witness-source-r3 a:focus-visible{outline:none;border-color:#9fe9f8;color:#e8fcff}
.cm-witness-axiom-r3{display:flex;justify-content:center;gap:.5rem 1rem;flex-wrap:wrap;padding:1.2rem;border:1px solid rgba(213,181,111,.16);border-top:0;background:#050809;text-align:center}
.cm-witness-axiom-r3 b{font:400 clamp(1.35rem,2.4vw,2.2rem) Georgia,serif;color:#e9dfc8}.cm-witness-axiom-r3 span{align-self:center;color:#87979a;font-size:.78rem;letter-spacing:.04em}

/* Integrate the following Mercury field more naturally as the next movement. */
.celestial-mechanics-v0712 .cm-mercury-field{margin-top:clamp(2.6rem,5vw,4.8rem);box-shadow:0 32px 96px rgba(0,0,0,.34)}

@media(max-width:1100px){
  .cm-witness-stage-r3{grid-template-columns:1fr;min-height:0}
  .cm-witness-panel-r3{border-left:0;border-top:1px solid rgba(213,181,111,.18)}
  .cm-witness-canvas-wrap-r3 canvas{min-height:560px}
  .cm-witness-source-r3{margin-top:1rem}
}
@media(max-width:720px){
  .cm-observatory-hero-overlay-r3{position:relative;left:auto;right:auto;bottom:auto;padding:1rem;background:linear-gradient(180deg,#071014,#030708)}
  .cm-observatory-hero-r3:before{display:none}
  .cm-observatory-hero-overlay-r3 h1{font-size:2.5rem}
  .cm-observatory-hero-r3 img{aspect-ratio:auto}
  .cm-hero-actions-r3{display:grid}
  .cm-hero-actions-r3 a{justify-content:center}
  .cm-orbital-witness-r3{padding:.8rem}
  .cm-witness-heading-r3 h2{font-size:3.1rem}
  .cm-witness-canvas-wrap-r3 canvas{min-height:470px}
  .cm-witness-hud-r3{position:relative;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:1fr 1fr;padding:.75rem;border-left:0;border-right:0;border-bottom:0}
  .cm-witness-hud-r3 span:last-child{grid-column:1/-1}
  .cm-witness-time-r3{grid-template-columns:1fr}
  .cm-witness-time-r3 button{min-height:44px}
  .cm-witness-law-r3{display:grid;gap:.4rem}.cm-witness-law-r3 i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cm-observatory-hero-r3,.cm-orbital-witness-r3{scroll-behavior:auto!important}
  .cm-witness-canvas-wrap-r3:before{filter:none}
}


/* R4 — the observatory is the room; the live instrument is the hero. */
.celestial-mechanics-v0712 .cm-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(1.7rem,3.4vw,3.5rem)}
.celestial-mechanics-v0712 .cm-hero:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 auto;
  height:min(920px,78rem);
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 15%,rgba(175,225,236,.10) 0 1px,transparent 1.5px) 0 0/38px 38px,
    radial-gradient(circle at 75% 22%,rgba(213,181,111,.09) 0 1px,transparent 1.5px) 0 0/61px 61px,
    radial-gradient(ellipse at 50% 18%,rgba(45,105,124,.20),transparent 38%),
    linear-gradient(90deg,rgba(188,143,68,.045),transparent 14% 86%,rgba(188,143,68,.045)),
    linear-gradient(180deg,#030607 0%,#071014 46%,#030607 100%);
}
.celestial-mechanics-v0712 .cm-hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:8rem;
  left:50%;
  width:min(1180px,84vw);
  height:500px;
  transform:translateX(-50%);
  border:1px solid rgba(213,181,111,.12);
  border-bottom:0;
  border-radius:50% 50% 0 0/88% 88% 0 0;
  box-shadow:inset 0 0 90px rgba(69,134,151,.035),0 -1px 0 rgba(234,204,132,.04);
  opacity:.9;
}
.cm-live-hero-r4{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  margin:0 auto clamp(1.2rem,2.4vw,2rem);
  padding:clamp(1rem,2vw,1.7rem) clamp(.2rem,1vw,.7rem);
  border-bottom:1px solid rgba(213,181,111,.20);
}
.cm-live-hero-r4>div{max-width:940px}
.cm-live-hero-r4 h1{font:400 clamp(3.1rem,6vw,7rem)/.88 Georgia,'Times New Roman',serif;margin:.3rem 0;color:#f0eadb;letter-spacing:-.045em}
.cm-live-hero-r4 .cm-subtitle{margin:.45rem 0;color:#dfc37e;letter-spacing:.28em;font-size:clamp(.64rem,1vw,.82rem)}
.cm-live-hero-r4 .lead{max-width:710px;margin:.72rem 0 0;color:#b7c5c7;font-size:clamp(.9rem,1.15vw,1.05rem);line-height:1.65}
.cm-witness-jump-r4{flex:0 0 auto;display:grid;gap:.32rem;min-width:230px;padding:.85rem 1rem;border:1px solid rgba(213,181,111,.28);background:rgba(3,8,10,.72);text-decoration:none;backdrop-filter:blur(8px);transition:border-color .2s ease,background .2s ease,transform .2s ease}
.cm-witness-jump-r4 span{color:#7d9298;font:600 .49rem ui-monospace,Consolas,monospace;letter-spacing:.14em}.cm-witness-jump-r4 strong{color:#e3ca8b;font:600 .61rem ui-monospace,Consolas,monospace;letter-spacing:.12em}
.cm-witness-jump-r4:hover,.cm-witness-jump-r4:focus-visible{outline:none;transform:translateY(-2px);border-color:#9fe9f8;background:rgba(8,18,22,.86)}
.celestial-mechanics-v0712 .cm-grid{border-color:rgba(213,181,111,.25);box-shadow:0 34px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.018)}
.celestial-mechanics-v0712 .cm-instrument{border-color:rgba(213,181,111,.39);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 28px 86px rgba(0,0,0,.36),0 0 0 1px rgba(84,148,164,.035)}
.celestial-mechanics-v0712 .cm-plot-wrap:after{content:"LIVE INSTRUMENT";position:absolute;right:.8rem;top:.72rem;color:#536d73;font:600 .48rem ui-monospace,Consolas,monospace;letter-spacing:.15em;pointer-events:none}

/* The Orbital Witness art-direction render was useful for design, but it must not sit behind the operative canvas. */
.cm-witness-canvas-wrap-r3:before{
  background:
    radial-gradient(circle at 50% 46%,rgba(63,129,151,.13),transparent 34%),
    radial-gradient(circle at 21% 22%,rgba(213,181,111,.08) 0 1px,transparent 1.4px) 0 0/46px 46px,
    radial-gradient(circle at 78% 31%,rgba(159,233,248,.08) 0 1px,transparent 1.4px) 0 0/69px 69px,
    linear-gradient(180deg,#020607,#03090c 58%,#010304);
  opacity:1;
  filter:none;
}
@media(max-width:900px){.cm-live-hero-r4{align-items:start;flex-direction:column;gap:1rem}.cm-witness-jump-r4{min-width:0;width:100%}}
@media(max-width:720px){.celestial-mechanics-v0712 .cm-hero:after{display:none}.cm-live-hero-r4 h1{font-size:3rem}.cm-live-hero-r4{padding-top:.6rem}.cm-witness-jump-r4{box-sizing:border-box}}
@media(prefers-reduced-motion:reduce){.cm-witness-jump-r4{transition:none}.cm-witness-jump-r4:hover,.cm-witness-jump-r4:focus-visible{transform:none}}