/* One optical system for the home and live-results heroes; no global restyling. */
.public-page .hm-orbit {
  --hm-orbit-period: 20s;
  --hm-orbit-light: conic-gradient(from 0deg,
    #edf5ff 0deg, rgba(119, 217, 235, .9) 12deg,
    rgba(101, 149, 230, .18) 35deg, transparent 55deg 210deg,
    rgba(126, 105, 222, .22) 250deg, rgba(169, 157, 255, .75) 308deg,
    rgba(190, 209, 255, .98) 348deg, #edf5ff 360deg);
  position: relative;
  width: min(100%, 520px) !important;
  height: 460px !important;
  min-height: 0 !important;
  margin-left: auto;
  isolation: isolate;
  background: transparent !important;
  pointer-events: none;
}
.public-page .observation-hero-art { height: 460px !important; }
@media (min-width: 981px) {
  .public-page .hm-orbit { width: min(100%, 520px, calc(40vw - 40px)) !important; }
}
/* Match the home hero's stacked-art breakpoint, including the former 901–980px gap. */
@media (max-width: 980px) {
  .public-page .observation-catalog-hero__layout { grid-template-columns: minmax(0, 1fr) !important; }
  .public-page .hm-orbit { margin-inline: auto !important; }
}
.hm-orbit__field, .hm-orbit__labels { position: absolute; inset: 0; }
.hm-orbit__field { z-index: 0; }
.hm-orbit__aura {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 48%, rgba(139, 115, 255, .24), rgba(87, 117, 181, .095) 38%, transparent 68%);
  pointer-events: none;
}
.public-page .hm-orbit .hm-orbit__ring {
  position: absolute;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: min(82%, 420px) !important;
  height: auto !important;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(153, 144, 213, .26) !important;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 143, 220, .08), transparent 70%);
  box-shadow: 0 0 42px rgba(109, 89, 182, .07), inset 0 0 52px rgba(109, 89, 182, .035) !important;
  opacity: 1;
  animation: none !important;
}
.public-page .hm-orbit .hm-orbit__ring--inner {
  width: min(57.4%, 294px) !important;
  border-color: rgba(153, 144, 213, .11) !important;
}
.public-page .hm-orbit .hm-orbit__ring::before,
.public-page .hm-orbit .hm-orbit__ring::after {
  content: "";
  position: absolute;
  inset: -1px !important;
  width: auto;
  height: auto;
  padding: 1.8px;
  border: 0;
  border-radius: inherit;
  background: var(--hm-orbit-light) !important;
  box-shadow: none !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .92;
  pointer-events: none;
}
.public-page .hm-orbit .hm-orbit__ring::before { inset: -8px !important; padding: 15px; filter: blur(7px); opacity: .56; }
.public-page .hm-orbit .hm-orbit__ring--inner::before { padding: 8px; opacity: .28; }
.public-page .hm-orbit .hm-orbit__ring--inner::after { opacity: .68; }
.hm-orbit__lustre {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(136, 185, 255, .34), rgba(104, 184, 220, .10) 30deg, transparent 68deg 250deg, rgba(151, 124, 233, .18) 308deg, rgba(136, 185, 255, .34));
  mask-image: radial-gradient(farthest-side, transparent 48%, #000 78%, transparent 100%);
  filter: blur(8px);
  pointer-events: none;
}
.public-page .hm-orbit .hm-orbit__core {
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: clamp(102px, 26%, 132px) !important;
  height: auto !important;
  aspect-ratio: 1;
  gap: 5px !important;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(198, 192, 231, .19) !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, rgba(207, 211, 255, .15), rgba(19, 19, 35, .84)), #171727 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 18px 45px rgba(0, 0, 0, .3), 0 0 55px rgba(141, 124, 255, .10) !important;
  backdrop-filter: blur(20px);
  animation: none !important;
}
.public-page .hm-orbit .hm-orbit__core::after {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, .08), transparent 40%);
  opacity: 1;
  animation: none !important;
}
.public-page .hm-orbit .hm-orbit__core img { width: 76px; height: 76px; clip-path: none; object-fit: contain; }
.public-page .hm-orbit .hm-orbit__core small { position: absolute; bottom: 11px; }
.hm-orbit__labels { z-index: 4; }
.public-page .hm-orbit .observation-orbit__node {
  --hm-node-tint: 158, 143, 237;
  width: 184px !important;
  min-height: 72px !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-color: rgba(175, 170, 214, .23) !important;
  background: radial-gradient(ellipse at 0 0, rgba(var(--hm-node-tint), .15), transparent 72%), linear-gradient(155deg, #181923, #0e1019) !important;
  box-shadow: inset 0 1px rgba(228, 225, 255, .09), 0 12px 28px rgba(0, 0, 0, .3) !important;
  animation: none !important;
}
.public-page .hm-orbit .observation-orbit__node[data-category="gold"] { --hm-node-tint: 205, 175, 115; }
.public-page .hm-orbit .observation-orbit__node[data-category="forex"] { --hm-node-tint: 114, 195, 202; }
.public-page .hm-orbit .observation-orbit__node[data-category="crypto"] { --hm-node-tint: 143, 168, 244; }
.public-page .hm-orbit .observation-orbit__node-logo {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--hm-node-tint), .21);
  box-shadow: 0 0 16px rgba(var(--hm-node-tint), .08);
}
.public-page .hm-orbit .observation-orbit__node-name { display: grid; min-width: 0; gap: 3px; }
.hm-orbit__node-brand { color: #a1a1b5; font-size: 9px; font-weight: 600; line-height: 1.15; letter-spacing: .045em; }
.hm-orbit__node-model { color: #eeedf6; font-size: 12px; font-weight: 720; line-height: 1.2; }
.hm-orbit__node-category {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgb(var(--hm-node-tint));
  font-size: 9px;
  font-weight: 550;
  line-height: 1.2;
}
.hm-orbit__node-category::before { content: ""; width: 4px; height: 4px; flex: none; border-radius: 50%; background: currentColor; }
.public-page .hm-orbit .observation-orbit__node--1 { top: 32px !important; }
.public-page .hm-orbit .observation-orbit__node--2 { top: 43px !important; }
.public-page .hm-orbit .observation-orbit__node--3 { bottom: 90px !important; }
.public-page .hm-orbit .observation-orbit__node--4 { bottom: 90px !important; }
.public-page .hm-orbit .observation-orbit__node--5 { bottom: 0 !important; left: 50% !important; width: 204px !important; transform: translateX(-50%); }
.hm-orbit .observation-orbit__node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(var(--hm-node-tint), .8);
  border-radius: inherit;
  box-shadow: inset 0 0 22px rgba(var(--hm-node-tint), .08), 0 0 18px rgba(var(--hm-node-tint), .14);
  opacity: 0;
  pointer-events: none;
}
@keyframes hm-orbit-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hm-orbit-surface-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hm-orbit-node-signal { 0%, 100% { opacity: .85; } 5%, 95% { opacity: 0; } }
@keyframes hm-orbit-labels-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .public-page .hm-orbit .hm-orbit__ring::before,
  .public-page .hm-orbit .hm-orbit__ring::after { animation: hm-orbit-turn var(--hm-orbit-period) linear infinite; }
  .public-page .hm-orbit .hm-orbit__ring--inner::before,
  .public-page .hm-orbit .hm-orbit__ring--inner::after { animation-duration: 40s; animation-direction: reverse; }
  .hm-orbit__lustre { animation: hm-orbit-surface-turn var(--hm-orbit-period) linear infinite; }
  .hm-orbit .observation-orbit__node::after { animation: hm-orbit-node-signal var(--hm-orbit-period) var(--hm-node-offset, 0ms) linear infinite; }
  .hm-orbit--enter .hm-orbit__labels { animation: hm-orbit-labels-enter 280ms ease-out both; }
}
.public-page > main.route-enter:has(.hm-orbit) { animation: none !important; }
@media (max-width: 600px) {
  .public-page .hm-orbit, .public-page .observation-hero-art { height: 400px !important; }
  .public-page .hm-orbit .hm-orbit__ring { width: min(82%, 310px) !important; }
  .public-page .hm-orbit .hm-orbit__ring--inner { width: min(57.4%, 217px) !important; }
  .public-page .hm-orbit .hm-orbit__core { width: 102px !important; height: 102px !important; border-radius: 25px !important; }
  .public-page .hm-orbit .hm-orbit__core img { width: 59px; height: 59px; }
  .public-page .hm-orbit .hm-orbit__core small { bottom: 7px; }
  .public-page .hm-orbit .observation-orbit__node { width: min(45%, 160px) !important; min-height: 64px !important; gap: 8px !important; padding: 8px !important; }
  .public-page .hm-orbit .observation-orbit__node-logo { width: 30px; height: 30px; }
  .hm-orbit__node-model { font-size: 11px; }
  .hm-orbit__node-brand, .hm-orbit__node-category { font-size: 8px; }
  .public-page .hm-orbit .observation-orbit__node--1 { top: 9px !important; }
  .public-page .hm-orbit .observation-orbit__node--2 { top: 20px !important; }
  .public-page .hm-orbit .observation-orbit__node--3 { bottom: 76px !important; }
  .public-page .hm-orbit .observation-orbit__node--4 { bottom: 76px !important; }
  .public-page .hm-orbit .observation-orbit__node--5 { bottom: 0 !important; width: 190px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .public-page .hm-orbit *, .public-page .hm-orbit *::before, .public-page .hm-orbit *::after { animation: none !important; }
}

/* The ring/core persist visually while only their surrounding information crossfades. */
@view-transition { navigation: auto; }
.hm-orbit__field { view-transition-name: hm-orbit-field; }
.hm-orbit__core { view-transition-name: hm-orbit-core; }
.hm-orbit__labels { view-transition-name: hm-orbit-labels; }
::view-transition-group(hm-orbit-field),
::view-transition-group(hm-orbit-core),
::view-transition-group(hm-orbit-labels) { animation-duration: 300ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
::view-transition-old(hm-orbit-field), ::view-transition-new(hm-orbit-field),
::view-transition-old(hm-orbit-core), ::view-transition-new(hm-orbit-core),
::view-transition-old(hm-orbit-labels), ::view-transition-new(hm-orbit-labels) { animation-duration: 300ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }