/* ===== Jasper Voice OS — Core / landing orb ===== */
@import url("_ds/forgedops-ai-design-system-06e9c6e5-498c-41d0-8343-28c85b36120a/design_handoff_landing/assets/fonts/fonts.css");
@import url("_ds/forgedops-ai-design-system-06e9c6e5-498c-41d0-8343-28c85b36120a/design_handoff_landing/styles/tokens.css");

:root{
  --navy:var(--wcs-navy,#0A1628);
  --navy2:var(--wcs-dark-navy,#1A2740);
  --cyan:var(--wcs-forge-cyan,#5BA3C7);
  --cyan-bright:#9FE8FF;
  --silver:var(--wcs-silver,#8A9BA8);
  --f-display:var(--font-display,"Cormorant Garamond",Georgia,serif);
  --f-struct:var(--font-structural,Oswald,"Arial Narrow",sans-serif);
  --f-body:var(--font-body,Inter,system-ui,sans-serif);
  --f-mono:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--f-body);color:#E6F0F7;overflow:hidden;
  background:
    radial-gradient(1200px 900px at 50% 42%, rgba(91,163,199,.10), rgba(91,163,199,0) 60%),
    radial-gradient(900px 700px at 82% 12%, rgba(91,163,199,.06), transparent 55%),
    linear-gradient(180deg,#0A1628 0%,#0C1B32 48%,#08111F 100%);
}
/* faint engineered grid */
.grid-bg{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(91,163,199,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,163,199,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 46%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 0%, transparent 78%);}

/* ---------- top bar ---------- */
/* absolute (not fixed): the page never scrolls, and fixed elements get
   promoted to compositor layers whose rasters go stale on theme flips here */
.topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px clamp(20px,4vw,44px);
  border-bottom:1px solid rgba(91,163,199,.16);}
.brandline{font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.16em;font-size:12px;
  font-weight:600;color:#DCE7EF;}
.brandline b{color:var(--cyan);}
.mount{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11.5px;color:var(--silver);}
.mount .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:blink 2.2s ease-in-out infinite;}
.mount .path{color:#9FD8EE;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- stage ---------- */
.stage{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:74px 20px 200px;}

/* satellites + connectors live in this square around the orb */
.constel{position:relative;width:min(86vmin,48vh,700px);height:min(86vmin,48vh,700px);
  display:flex;align-items:center;justify-content:center;}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;}
/* north-star compass — transparent blueprint underlay behind the orb */
.compass{position:absolute;left:50%;top:50%;width:126%;height:126%;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;}
.compass .cp{fill:none;stroke:rgba(91,163,199,.22);stroke-width:1;}
.compass .cp-mj{stroke:rgba(91,163,199,.38);}
.compass .cp-dash{stroke-dasharray:3 8;}
.compass .cp-star{stroke:rgba(159,232,255,.35);}
.compass .cp-n{fill:rgba(159,232,255,.30);}
.compass .cp-t{fill:rgba(138,155,168,.6);font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;}
.flow{stroke-dasharray:16 120;stroke-dashoffset:0;
  filter:drop-shadow(0 0 3px rgba(159,232,255,.9));animation:sync 2.6s linear infinite;}
@keyframes sync{from{stroke-dashoffset:136;}to{stroke-dashoffset:0;}}

/* ---------- the orb ---------- */
.orb{position:relative;width:min(44vmin,30vh,340px);height:min(44vmin,30vh,340px);border-radius:50%;
  z-index:4;cursor:pointer;isolation:isolate;
  background:
    radial-gradient(circle at 38% 32%, rgba(159,232,255,.30), rgba(91,163,199,.08) 34%, transparent 55%),
    radial-gradient(circle at 50% 54%, #16375c 0%, #0d2340 40%, #081a30 70%, #060f1e 100%);
  box-shadow:
    0 0 0 1px rgba(91,163,199,.35),
    0 0 60px rgba(91,163,199,.30),
    0 0 130px rgba(91,163,199,.20),
    inset 0 0 60px rgba(8,20,40,.85),
    inset 0 0 26px rgba(91,163,199,.30);
  animation:breathe 5.5s ease-in-out infinite;
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease,opacity .5s ease;}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px rgba(91,163,199,.35),0 0 55px rgba(91,163,199,.28),0 0 120px rgba(91,163,199,.18),inset 0 0 60px rgba(8,20,40,.85),inset 0 0 24px rgba(91,163,199,.28);}
  50%{box-shadow:0 0 0 1px rgba(91,163,199,.55),0 0 80px rgba(91,163,199,.42),0 0 170px rgba(91,163,199,.28),inset 0 0 60px rgba(8,20,40,.85),inset 0 0 40px rgba(91,163,199,.45);}}
.orb:hover{transform:scale(1.03);}

/* rotating electric arc rings (conic gradient masked to a ring) */
.orb::before,.orb::after{content:"";position:absolute;inset:-10%;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(159,232,255,.0) 40deg, rgba(159,232,255,.85) 62deg, rgba(91,163,199,.0) 90deg,
    transparent 180deg, rgba(159,232,255,.7) 232deg, rgba(91,163,199,0) 268deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
  mask:radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
  filter:drop-shadow(0 0 8px rgba(91,163,199,.6));
  animation:spin 7s linear infinite;}
.orb::after{inset:-2%;animation:spin 4.5s linear infinite reverse;opacity:.7;
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 64%, #000 68%, transparent 70%);
  mask:radial-gradient(circle, transparent 62%, #000 64%, #000 68%, transparent 70%);}
@keyframes spin{to{transform:rotate(360deg);}}

/* orb label */
.orb-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;z-index:2;user-select:none;}
.orb-mark{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:clamp(30px,5.4vmin,46px);
  line-height:1;color:#F4F9FC;letter-spacing:.01em;
  text-shadow:0 2px 6px rgba(6,15,30,.9),0 0 2px rgba(6,15,30,.65);}
.orb-sub{font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.34em;font-size:10.5px;
  color:#9FD8EE;text-indent:.34em;text-shadow:0 1px 3px rgba(6,15,30,.85);}
.orb-state{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#9FD8EE;margin-top:4px;opacity:.95;text-shadow:0 1px 3px rgba(6,15,30,.85);}

/* pulse ring emitted on wake */
.pulse{position:absolute;width:min(44vmin,30vh,340px);height:min(44vmin,30vh,340px);border-radius:50%;
  border:1px solid rgba(159,232,255,.6);z-index:3;pointer-events:none;opacity:0;}
.orb.awake ~ .pulse.go{animation:ripple 1.1s ease-out;}
@keyframes ripple{0%{opacity:.8;transform:scale(1);}100%{opacity:0;transform:scale(1.9);}}

/* awake / thinking states — calm, steady presence. Jasper only pulses and
   turns volatile while RESPONDING (.speaking), per Justin. */
.orb.awake{animation:none;box-shadow:0 0 0 1px rgba(159,232,255,.55),0 0 84px rgba(91,163,199,.5),0 0 170px rgba(91,163,199,.32),inset 0 0 46px rgba(8,20,40,.55),inset 0 0 48px rgba(91,163,199,.45);}
.orb.thinking{animation:none;box-shadow:0 0 0 1px rgba(159,232,255,.75),0 0 100px rgba(91,163,199,.6),0 0 190px rgba(91,163,199,.4),inset 0 0 46px rgba(8,20,40,.5),inset 0 0 58px rgba(91,163,199,.55);}
@keyframes breatheAwake{
  0%,100%{box-shadow:0 0 0 1px rgba(159,232,255,.5),0 0 72px rgba(91,163,199,.5),0 0 150px rgba(91,163,199,.32),inset 0 0 46px rgba(8,20,40,.55),inset 0 0 44px rgba(91,163,199,.45);}
  50%{box-shadow:0 0 0 1px rgba(159,232,255,.8),0 0 104px rgba(91,163,199,.7),0 0 220px rgba(91,163,199,.46),inset 0 0 46px rgba(8,20,40,.5),inset 0 0 66px rgba(91,163,199,.62);}
}
/* one-shot activation punch (transient .woke class, overrides breathe while present) */
.orb.woke{animation:activatePunch .62s cubic-bezier(.22,1,.36,1);}
@keyframes activatePunch{
  0%{transform:scale(.9);box-shadow:0 0 0 1px rgba(159,232,255,.9),0 0 30px rgba(91,163,199,.4),inset 0 0 40px rgba(8,20,40,.8);}
  42%{transform:scale(1.1);box-shadow:0 0 0 2px rgba(234,251,255,.95),0 0 150px rgba(159,232,255,.9),0 0 260px rgba(91,163,199,.6),inset 0 0 40px rgba(159,232,255,.7);}
  100%{transform:scale(1);box-shadow:0 0 0 1px rgba(159,232,255,.6),0 0 90px rgba(91,163,199,.55),0 0 180px rgba(91,163,199,.36),inset 0 0 46px rgba(91,163,199,.5);}
}

/* expanding tesla shockwave rings emitted on activation */
.shock{position:absolute;left:50%;top:50%;width:min(44vmin,30vh,340px);height:min(44vmin,30vh,340px);
  border-radius:50%;border:2px solid rgba(159,232,255,.75);pointer-events:none;z-index:3;opacity:0;
  transform:translate(-50%,-50%) scale(.7);
  box-shadow:0 0 26px rgba(91,163,199,.55),inset 0 0 26px rgba(91,163,199,.4);}
@keyframes shockout{0%{opacity:.95;transform:translate(-50%,-50%) scale(.72);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.2);}}

/* ---------- cosmic activation: swirl vortex + white-hot core ----------
   NOTE: revealed via display, NOT opacity. This preview's compositor gets
   stuck when an element starts at opacity:0 + transition and never repaints
   the opacity change, so the whole cosmic layer stayed invisible. display +
   a transform-scale bloom is reliable here. */
.orb-cosmic{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;
  display:none;pointer-events:none;}
.orb.awake .orb-cosmic{display:block;animation:cosmicIn .55s cubic-bezier(.22,1,.36,1) both;}
@keyframes cosmicIn{from{transform:scale(.82);}to{transform:scale(1);}}
@keyframes liquidThrob{0%,100%{transform:scale(1);}34%{transform:scale(1.045);}68%{transform:scale(.982);}}
.orb-cosmic .swirl{position:absolute;inset:-18%;border-radius:50%;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle, #000 8%, #000 34%, transparent 74%);
          mask:radial-gradient(circle, #000 8%, #000 34%, transparent 74%);}
.swirl.s1{background:conic-gradient(from 0deg,
    transparent 0deg, rgba(159,232,255,.85) 20deg, rgba(91,163,199,0) 46deg,
    transparent 92deg, rgba(159,232,255,.7) 120deg, transparent 158deg,
    rgba(91,163,199,.8) 210deg, transparent 254deg, rgba(159,232,255,.75) 320deg, transparent 360deg);
  filter:blur(2px);animation:swirl 6.2s linear infinite;}
.swirl.s2{inset:1%;background:conic-gradient(from 130deg,
    transparent 0deg, rgba(159,232,255,.82) 28deg, transparent 74deg,
    rgba(91,163,199,.85) 152deg, transparent 202deg, rgba(159,232,255,.72) 284deg, transparent 334deg);
  filter:blur(1.4px);animation:swirl 4s linear infinite reverse;}
.swirl.s3{inset:12%;background:conic-gradient(from 60deg,
    transparent 0deg, rgba(255,255,255,.95) 18deg, transparent 56deg,
    rgba(159,232,255,.95) 138deg, transparent 190deg, rgba(159,232,255,.9) 300deg, transparent 344deg);
  filter:blur(1px);animation:swirl 2.6s linear infinite;}
@keyframes swirl{to{transform:rotate(360deg);}}
.orb-cosmic .core{position:absolute;left:50%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#fff 12%,#EAFBFF 24%,rgba(159,232,255,.98) 44%,rgba(91,163,199,.32) 68%,transparent 82%);
  filter:blur(1px);mix-blend-mode:screen;}
@keyframes corepulse{0%,100%{transform:translate(-50%,-50%) scale(.88);opacity:.82;}50%{transform:translate(-50%,-50%) scale(1.14);opacity:1;}}
/* lift the label into a glowing state while active — dark grounding shadow kept for legibility */
.orb.awake .orb-mark{text-shadow:0 2px 6px rgba(6,15,30,.9),0 0 22px rgba(91,163,199,.5);}
/* activation clears ALL text off the orb — state is carried by motion (per Justin) */
.orb-inner{transition:opacity .35s ease;}
.orb.awake .orb-inner{opacity:0;pointer-events:none;}
/* response pulse — Jasper answers with motion, not text: fast breath, jittery
   throb, racing swirls and a hammering core — ONLY while .speaking */
.orb.awake.speaking{animation:breatheAwake .92s ease-in-out infinite, speakThrob .46s ease-in-out infinite;}
.orb.speaking .orb-cosmic{animation:cosmicIn .55s cubic-bezier(.22,1,.36,1) both, liquidThrob 1.15s ease-in-out infinite;}
.orb.speaking .orb-cosmic .core{animation:corepulse .55s ease-in-out infinite;}
.orb.speaking .swirl.s2{animation-duration:1.7s;}
.orb.speaking .swirl.s3{animation-duration:1.1s;}
@keyframes speakThrob{0%,100%{transform:scale(1);}22%{transform:scale(1.06) translate(1px,-1px);}48%{transform:scale(1.01);}74%{transform:scale(1.055) translate(-1px,1px);}}
.shock.soft{border-width:1px;border-color:rgba(159,232,255,.5);
  box-shadow:0 0 16px rgba(91,163,199,.3),inset 0 0 14px rgba(91,163,199,.2);}

/* ---------- contained energy ring (generated in JS) ----------
   uniform, symmetric arcs orbiting the orb as one synced group: slow group
   rotation + a phased flow/pulse travelling around the ring. no randomness. */
.bolts{position:absolute;left:50%;top:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:5;overflow:visible;display:none;}
.constel.cosmic .bolts{display:block;}
.energy-rot{transform-box:fill-box;transform-origin:center;animation:energyRot 42s linear infinite;}
.arc-glow{fill:none;stroke:var(--cyan);stroke-width:5;stroke-linecap:round;
  filter:blur(2.4px) drop-shadow(0 0 6px rgba(91,163,199,.85));
  stroke-dasharray:26 66;animation:arcFlow 3.4s linear infinite, arcPulse 3.4s ease-in-out infinite;}
.arc-core{fill:none;stroke:#9FE8FF;stroke-width:1.6;stroke-linecap:round;
  filter:drop-shadow(0 0 4px #9FE8FF);
  stroke-dasharray:16 76;animation:arcFlow 3.4s linear infinite, arcPulse 3.4s ease-in-out infinite;}
@keyframes energyRot{to{transform:rotate(360deg);}}
@keyframes arcFlow{to{stroke-dashoffset:-92;}}
@keyframes arcPulse{0%,100%{opacity:.28;}50%{opacity:1;}}

/* ---------- satellites ---------- */
.sat{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:999px;background:rgba(12,27,50,.85);
  border:1px solid rgba(91,163,199,.4);backdrop-filter:blur(2px);
  font-family:var(--f-mono);font-size:10.5px;color:#DCE7EF;white-space:nowrap;
  box-shadow:0 6px 20px rgba(4,10,20,.5);cursor:default;
  transform:translate(-50%,-50%);animation:float 6s ease-in-out infinite;
  transition:border-color .25s ease,box-shadow .25s ease,color .25s ease;}
.sat:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 18px rgba(91,163,199,.45);}
.sat .sdot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:0 0 auto;}
.sat .stier{color:var(--silver);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;}
@keyframes float{0%,100%{margin-top:0;}50%{margin-top:-7px;}}

/* ---------- voice bar (lives in the dock) ---------- */
.voicebar{position:relative;z-index:6;display:flex;align-items:center;gap:12px;}
.eq{display:flex;align-items:flex-end;gap:4px;height:22px;}
/* bars are driven by live mic level in JS — they move only on detectable voice */
.eq i{width:3px;height:6px;background:var(--cyan);border-radius:2px;opacity:.55;
  box-shadow:0 0 6px rgba(91,163,199,.6);transition:height .09s linear,opacity .35s ease;}
.listening .eq i{opacity:.85;}
.wake-hint{font-family:var(--f-mono);font-size:11.5px;color:var(--silver);letter-spacing:.04em;}
.wake-hint b{color:#9FD8EE;font-weight:500;}
.wake-hint .cy{color:var(--cyan);}

/* ---------- prompt + chips ---------- */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;gap:14px;padding:0 20px 26px;}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;
  color:#DCE7EF;background:rgba(12,27,50,.7);border:1px solid rgba(91,163,199,.4);
  border-radius:6px;padding:10px 16px;transition:all .2s var(--ease-out,ease);}
.chip:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(91,163,199,.35);}
.chip.on{background:var(--cyan);color:var(--navy);border-color:var(--cyan);}
.chip .g{width:14px;height:14px;display:inline-block;}
.promptbar{width:min(760px,94vw);display:flex;align-items:center;gap:12px;
  background:rgba(9,20,38,.92);border:1px solid rgba(91,163,199,.45);border-radius:14px;
  padding:12px 14px;box-shadow:0 12px 40px rgba(4,10,20,.6),inset 0 0 0 1px rgba(91,163,199,.06);}
.promptbar:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(91,163,199,.3),0 12px 40px rgba(4,10,20,.6);}
.mic{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;cursor:pointer;
  background:rgba(91,163,199,.12);border:1px solid rgba(91,163,199,.4);color:var(--cyan);transition:all .2s ease;}
.mic:hover{background:rgba(91,163,199,.22);}
.mic.live{background:var(--cyan);color:var(--navy);box-shadow:0 0 18px rgba(91,163,199,.55);}
.promptbar input{flex:1 1 auto;background:transparent;border:none;outline:none;color:#EAF3F8;
  font-family:var(--f-body);font-size:15px;}
.promptbar input::placeholder{color:#6f8598;}
.send{flex:0 0 auto;height:40px;padding:0 18px;border-radius:10px;cursor:pointer;
  font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;
  background:var(--cyan);color:var(--navy);border:1px solid var(--cyan);transition:all .2s ease;}
.send:hover{background:#EAF7FF;}

/* ---------- mind-map overlay ---------- */
.mindmap{position:fixed;inset:0;z-index:12;display:none;opacity:0;transition:opacity .5s ease;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(91,163,199,.08) 0%, rgba(10,22,40,0) 60%),
    #0A1628;}
body.map .mindmap{display:block;opacity:1;}
body.map .constel,body.map .voicebar{opacity:0;transition:opacity .35s ease;pointer-events:none;}
.mm-svg{position:absolute;inset:0;width:100%;height:100%;}
/* Obsidian graph-view styling — dot nodes, labels beneath, hairline links */
.mm-link{stroke:rgba(138,155,168,.26);stroke-width:1;}
.mm-dot{cursor:pointer;}
.mm-dot .core{fill:#8A9BA8;transition:fill .24s var(--ease-out, ease);}
.mm-dot .halo{fill:rgba(91,163,199,.10);}
.mm-dot.branch .core{fill:#7FB4D6;}
.mm-dot.root .core{fill:#5BA3C7;}
.mm-dot.root .halo{fill:rgba(91,163,199,.16);}
.mm-dot:hover .core{fill:#9FD8EE;}
.mm-dot text{text-anchor:middle;pointer-events:none;}
.mm-dot .lbl{fill:#8A9BA8;font-family:var(--f-mono);font-size:10.5px;}
.mm-dot.branch .lbl{fill:#DCE7EF;font-size:11.5px;}
.mm-dot.root .lbl{fill:#FFFFFF;font-size:14px;letter-spacing:.03em;}
.mm-dot .tag{fill:#5BA3C7;font-family:var(--f-struct, var(--f-mono));font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;}
.mm-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:14;
  font-family:var(--f-mono);font-size:11px;color:var(--silver);letter-spacing:.06em;}

/* ---------- sync target panel ---------- */
.syncpanel{position:fixed;left:50%;bottom:178px;transform:translateX(-50%);z-index:20;
  width:min(400px,calc(100vw - 40px));box-sizing:border-box;
  background:#FFFFFF;border:1px solid #C9D1DB;border-top:3px solid var(--cyan);border-radius:6px;
  box-shadow:0 12px 32px rgba(10,22,40,.18);padding:14px 16px;}
.sp-title{font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:#0A1628;margin-bottom:10px;}
.sp-kinds{display:flex;gap:16px;margin-bottom:10px;}
.sp-kind{display:flex;align-items:center;gap:6px;font-family:var(--f-body,Inter,system-ui,sans-serif);
  font-size:12.5px;color:#374151;cursor:pointer;}
.sp-kind input{accent-color:#5BA3C7;margin:0;}
.sp-input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #C9D1DB;border-radius:4px;
  font-family:var(--f-mono);font-size:12px;color:#111827;background:#FFFFFF;margin-bottom:12px;}
.sp-input:focus{outline:2px solid var(--cyan);outline-offset:2px;}
.sp-row{display:flex;gap:8px;}
.sp-go{font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.16em;font-size:11px;white-space:nowrap;
  background:var(--cyan);color:#0A1628;border:1px solid var(--cyan);border-radius:4px;padding:8px 14px;cursor:pointer;
  transition:background .24s ease;}
.sp-go:hover{background:#FFFFFF;}
.sp-cancel{font-family:var(--f-struct);text-transform:uppercase;letter-spacing:.16em;font-size:11px;white-space:nowrap;
  background:transparent;color:#0A1628;border:1px solid #8A9BA8;border-radius:4px;padding:8px 14px;cursor:pointer;
  transition:border-color .24s ease,color .24s ease;}
.sp-cancel:hover{border-color:var(--cyan);color:#3F7E9D;}

@media (prefers-reduced-motion:reduce){
  .orb,.orb::before,.orb::after,.mount .dot,.sat,.flow,.eq i,
  .swirl,.orb-cosmic,.orb-cosmic .core,.shock,.orb.woke,
  .arc-glow,.arc-core,.energy-rot,.nebula,.nimbus,.starfield,.comet,.star.tw{animation:none !important;}
}

/* ===================== deep-space background ===================== */
.space{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
/* soft nimbus / nebula clouds, slow drift */
.nebula{position:absolute;inset:-12%;
  background:
    radial-gradient(40% 30% at 22% 32%, rgba(91,163,199,.16), transparent 62%),
    radial-gradient(48% 36% at 80% 64%, rgba(45,92,138,.22), transparent 64%),
    radial-gradient(30% 42% at 62% 16%, rgba(91,163,199,.10), transparent 60%),
    radial-gradient(54% 44% at 28% 84%, rgba(26,39,64,.55), transparent 66%);
  filter:blur(34px);animation:nebuladrift 96s ease-in-out infinite alternate;}
@keyframes nebuladrift{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(-3%,2.4%,0) scale(1.09);}}

/* rotating star sphere — Jasper is the fixed centre it all turns around */
.starfield{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  transform-origin:center;animation:skyrot var(--sky-period,240s) linear infinite;}
@keyframes skyrot{to{transform:translate(-50%,-50%) rotate(360deg);}}
.star{position:absolute;border-radius:50%;background:#DCEEF8;transform:translate(-50%,-50%);
  box-shadow:0 0 4px rgba(159,232,255,.5);}
.star.tw{animation:twinkle 4.6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ---- zodiac constellations (Libra / Scorpio / Pisces) — screen-space drift layer ---- */
.zodiac{position:absolute;inset:0;z-index:1;pointer-events:none;}
.zitem{position:absolute;left:0;top:0;will-change:transform;}
.zconst{overflow:visible;display:block;}
.zconst line{stroke:rgba(91,163,199,.32);stroke-width:1;}
.zconst circle{fill:#CDE8F5;filter:drop-shadow(0 0 3px rgba(159,232,255,.55));}
.zconst .zlbl{fill:rgba(138,155,168,.7);font-family:var(--f-mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;}
/* distant planets */
.zplanet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;}
/* palette-only planets — navy / cyan / silver, no off-brand hues (per Justin) */
.zplanet.saturn{background:radial-gradient(circle at 36% 32%, #CDE8F5, #7FB4D6 58%, #1A2740 100%);
  box-shadow:0 0 14px 2px rgba(91,163,199,.35);}
.zplanet.saturn::after{content:"";position:absolute;left:50%;top:50%;width:200%;height:58%;
  border:1.5px solid rgba(159,232,255,.55);border-radius:50%;
  transform:translate(-50%,-50%) rotate(-22deg);}
.zplanet.mars{background:radial-gradient(circle at 36% 32%, #A9C6D8, #5F93B8 58%, #16283F 100%);
  box-shadow:0 0 12px 2px rgba(91,163,199,.3);}
.zplanet.pluto{background:radial-gradient(circle at 36% 32%, #DCE7EF, #8A9BA8 58%, #33415A 100%);
  box-shadow:0 0 8px 1px rgba(138,155,168,.3);}
/* nimbus cloud banks — soft drifting vapor */
.nimbus{position:absolute;width:52vw;height:26vh;border-radius:50%;filter:blur(42px);opacity:.55;pointer-events:none;
  background:
    radial-gradient(58% 62% at 38% 52%, rgba(138,155,168,.16), transparent 70%),
    radial-gradient(46% 54% at 66% 42%, rgba(91,163,199,.12), transparent 72%);
  animation:nimbusdrift 130s ease-in-out infinite alternate;}
.nimbus.n1{top:6%;left:-8%;}
.nimbus.n2{top:56%;right:-10%;animation-duration:170s;animation-direction:alternate-reverse;}
.nimbus.n3{top:32%;left:38%;opacity:.35;animation-duration:200s;}
@keyframes nimbusdrift{to{transform:translate3d(5vw,-3vh,0);}}

/* distant ice comet, long slow crossing */
.comet{position:absolute;top:14%;left:-8%;width:5px;height:5px;animation:cometdrift 74s linear infinite;}
.comet .comet-head{position:absolute;width:5px;height:5px;border-radius:50%;background:#EAF7FF;
  box-shadow:0 0 12px 3px rgba(159,232,255,.85);}
.comet::after{content:"";position:absolute;right:2px;top:1.5px;width:140px;height:2px;transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(159,232,255,0), rgba(159,232,255,.55));border-radius:2px;filter:blur(.5px);}
@keyframes cometdrift{0%{transform:translate(0,0);opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{transform:translate(122vw,30vh);opacity:0;}}

/* shooting stars (spawned in JS) */
.sky{position:absolute;inset:0;}
.shoot{position:absolute;width:120px;height:2px;border-radius:2px;transform-origin:right center;opacity:0;
  background:linear-gradient(90deg, transparent, #EAF7FF);filter:drop-shadow(0 0 6px #9FE8FF);}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(var(--ang)) scaleX(.2);}
  10%{opacity:1;}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--ang)) scaleX(1);}}